让你的专属博客更加漂亮

清疚 2022-02-17 17:24 235阅读 0赞

## 前言 ##

hexo+github搭建专属个人博客的教程很多，这里也就不再介绍了，当然你也可以点击**阅读原文**查看。但是在初始搭建完成后，需要进行很多配置，使得网站功能更加健全，因此本文主要介绍网站的功能补全和优化。

本文以next主题为例，但很多设置对其他主题也通用。

## 增加cnzz站点统计PV，UV等信息 ##

如何在网站上添加访问信息统计呢？

1.注册友盟账号:https://www.umeng.com/  
2.选择-产品-网站统计添加要统计的网站信息  
3.站点设置-获取代码，注意是复制图中所示的代码之一，而不是前面的代码，否则只会显示图标而不显示统计结果。

![640?wx\_fmt=png][640_wx_fmt_png]

cnzz统计

找到主题下cnzz的文件，例如next主题修改/next/layout/\_third-party/analytics/cnzz-analytics.swig  
文件内容如下：

{% if theme.cnzz_siteid %}
    <div>
    
    这里替换成你复制的内容
    </div>
    {% endif %}

添加完成后，记得修改next主题配置文件，将cnzz相关信息修改：

cnzz_siteid: 这里替换成你自己的id

效果可访问https://www.yanbinghu.com

## 文章添加置顶功能 ##

1.安装插件：

npm uninstall hexo-generator-index --save
    npm install hexo-generator-index-pin-top --save

2.修改样式，打开next/layout/\_macro/post.swig，找到class为post-meta的div,插入下面的内容：

{% if post.top %}
        <i class="fa fa-thumb-tack"></i>
        <font color="green">置顶</font>
        <span class="post-meta-divider">|</span>
    {% endif %}

使用时，只需要在文章的开头加：

top: true

即可。

![640?wx\_fmt=png][640_wx_fmt_png 1]

置顶

效果：

![640?wx\_fmt=png][640_wx_fmt_png 2]

## 添加标签云 ##

安装插件：

npm install hexo-tag-cloud --save

打开next/layout/\_custom/sidebar.swig

{% if site.tags.length > 1 %}
    <script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
    <div class="widget-wrap">
        <h3 class="widget-title">Tag Cloud</h3>
        <div id="myCanvasContainer" class="widget tagcloud">
            <canvas width="250" height="250" id="resCanvas" style="width=100%">
                {
       { list_tags() }}
            </canvas>
        </div>
    </div>
    {% endif %}

效果（不同主题展示的效果可能不太一样）：

![640?wx\_fmt=png][640_wx_fmt_png 3]

## 为网站添加关键字，seo优化 ##

1.增加页面关键字，修改next主题配置文件中的keywords:

keywords: "C语言,Cpp,Linux,Go,Python,算法"

## 解决hexo 公式渲染不完整的问题 ##

原来的渲染引擎有问题，过于复杂的公式没法正确显示，需要卸载，并重新安装完好的MathJax渲染引擎：

npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-kramed --save

## 效果： ##

![640?wx\_fmt=png][640_wx_fmt_png 4]

## 解决卜算子计数脚本失效问题 ##

原因：通过浏览器右键检查元素查看控制台可以看到，有一个js文件加载失败。  
打开next主题next/layout/\_third-party/analytics/busuanzi-counter.swig 中卜算子脚本地址  
修改为：

https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js

## 让百度收录网站地址 ##

与google收录类似，但是时间比较长，并且由于github屏蔽了百度爬虫，因此在百度自动爬取时会出现403错误。

## 强制https访问网站 ##

github pages默认情况下是http访问的，有时候http会被浏览器标识为不安全。因此，需要更改github pages的设置，强制https访问网站。  
设置方法：进入github pages项目-->setting-->勾选Enfoce HTTPS

## 添加微信公众号 ##

wechat_subscriber:
      enabled: true
      qcode: /pictures/qrcode.jpg   #二维码路径
      description: 欢迎关注个人微信公众号#描述

## 修改字体 ##

修改字体大小，可通过修改/source/css/\_variables/base.styl  
中的font-size-base，这是修改除标题以外的其他内容字体大小。  
code-font-size修改代码字体大小。  
font-family-base 修改字体

## 修改链接样式 ##

原先的链接样式只有下划线，颜色并无特别之处，因此修改链接样式为传统样式。效果：

![640?wx\_fmt=png][640_wx_fmt_png 5]

修改文件source\\css\_common\\components\\post\\post.styl  
增加内容

.post-body p a{
      color: #0593d3;
      border-bottom: none;
      border-bottom: 1px solid #0593d3;
      &:hover {
        color: #fc6423;
        border-bottom: none;
        border-bottom: 1px solid #fc6423;
      }
    }

## 增加gitment和gitalk评论系统 ##

之前用过很多评论系统，但是不幸的是一个个地关闭了。但是gitment和gitalk依托于github，因此它基本是不可能被关闭的。新版的next主题已经默认可以支持gitment评论系统了。关于如何集成gitalk评论系统可阅读原文查看。

## 修改tag标签 ##

默认的tag标签符号是一个井号，我们需要更换为tag图标。修改layout/\_macro/post.swig  
搜索 rel="tag">\#，将 \# 换成

<i class="fa fa-tag"></i>

## 效果： ##

![640?wx\_fmt=png][640_wx_fmt_png 6]

## 添加RSS订阅 ##

安装插件并修改配置文件即可：

npm install hexo-generator-feed --save

## 添加打赏功能 ##

修改配置文件

reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
    wechatpay: /wechatpay.jpg
    alipay: /alipay.jpg

wechatpay.jpg 和alipay.jpg分别是微信和支付宝的收款二维码。可放在hexo的resource目录下。

## 添加文章的字数统计和阅读时长统计 ##

修改配置文件

# Post wordcount display settings
    # Dependencies: https://github.com/willin/hexo-wordcount
    post_wordcount:
      item_text: true
      wordcount: true
      min2read: true

另外，在hexo根目录下执行命令

npm i --save hexo-wordcount

安装成功后即可。

## 添加站内搜索 ##

需要安装hexo-generator-search

npm install hexo-generator-searchdb --save

在站点的\_config.yml中添加

search:
      path: search.xml
      field: post
      format: html
      limit: 10000

同时在next主题中开启local search，这样站内的内容就可以搜索了。

![640?wx\_fmt=png][640_wx_fmt_png 7]

## 缩短优化链接 ##

hexo博客默认链接是以标题命名的，一旦标题变了，链接也就变了，而且链接过长，因此需要优化。

npm install hexo-abbrlink --save

打开hexo主配置文件，将permalink部分修改为下面的格式。

permalink: :year/:month/:day/:abbrlink.html

当然为了避免链接层级过深，也可以去掉日或者月，以达到seo优化的目的。

## 总结 ##

以上只是部分更新内容，更多内容以及最新内容可**阅读原文**查看完整优化内容。而配置文件中还可以做很多优化，但这些仅仅需要修改配置文件，因此没有拿出来说明。

关注公众号【编程珠玑】，获取更多Linux/C/C++/Python/Go/算法/工具等原创技术文章。后台免费获取经典电子书和视频资源

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg]

[640_wx_fmt_png]: /images/20220217/4b6a390c979a4a1eaab02ee698ce82f5.png
[640_wx_fmt_png 1]: /images/20220217/6c2bb9070f9744d4b86932064e84434b.png
[640_wx_fmt_png 2]: /images/20220217/fb77b8855de448d9901b4f8bd47146f6.png
[640_wx_fmt_png 3]: /images/20220217/ff6ce202ec1f4d129c5d88959ec9b5ee.png
[640_wx_fmt_png 4]: /images/20220217/6b7112813cdf48868aeb1bfb31d491d2.png
[640_wx_fmt_png 5]: /images/20220217/8191c4c0a81549b69e80238efe66ed87.png
[640_wx_fmt_png 6]: /images/20220217/f3a9864168ea4a3ca0e3fbfb093b3c2e.png
[640_wx_fmt_png 7]: /images/20220217/b7b1aed88ace454c9b0afb5ee989a25a.png
[640_wx_fmt_jpeg]: /images/20220217/b1bbe2df5e0b43a3a6482b7686b6a420.png