Hexo+github搭建个人博客(3):优化博客系统

1. 配置图片资源

存放图片资源的位置。 路径为 themes/next/source/images下，里面存放图片资源即可,或者自己在source下添加assets文件夹存放。
可以在配置文件themes/next/_config.yml中直接引用。几个图片配置如下:

avatar: /images/avatar.jpeg            #头像图片
favicon: /images/timg.png              #网页图标
weixin: /images/qr_code.jpg            #微信收款二维码图片，打赏用的
alipay:                             #支付宝二维码

2. 解决 Hexo 搭建博客显示不出分类、标签问题

请参考链接: 解决 Hexo 搭建博客显示不出分类、标签问题

3. 少量图片本地引用的简便办法

对于零星少量的图片使用，可以在网站根目录下的source文件夹中建立一个images文件夹，将所需要的图片文件复制到此文件夹，使用MarkDown中![](/images/image.jpg)的方式访问使用

4. Hexo Next开启阅读全文按钮

• 1. 在网站根目录下运行：npm install hexo-excerpt --save
• 2. 主题配置文件设置：

     excerpt_description: true
     read_more_btn: true

• 3. 如果只想显示标题,或者想自己控制描述内容的多少,可以在文章中加入<escape><!-- more --></escape>代码来控制显示内容多少.

5. 添加来比力评论系统

1. 在 来必力 的官网上注册账号。
2. 在代码管理标签中获取data-uid
3. 打开主题目录下的blog/themes/next/_config.yml配置文件，定位到livere_uid字段，粘贴上刚刚复制的UID

6. 添加关于我页面

• 执行命令:hexo new page "about" 会在hexo/source目录下创建一个about目录
• 打开主题目录下的blog/themes/next/_config.yml配置文件，将menu中about前的注释去掉。

  menu:
    home:  / || home
    about:  /about/ || user
    tags:  /tags/ || tags
    ...

• 然后编辑source/about/目录中的index.md文件即可展示个人信息.

7. 增加文章阅读和访问统计

• next主题集成了busuanzi统计功能,只需要打开主题目录下的themes/next/_config.yml配置文件,将busuanzi_count:标签下的enable设置为true即可.

  busuanzi_count:
    enable: true
    total_visitors: true
    total_visitors_icon: fa fa-user
    total_views: true
    total_views_icon: fa fa-eye
    post_views: true
    post_views_icon: fa fa-eye

• 在hexo/themes/next/layout/_third-party/statistics/busuanzi-counter.swig中修改:
  • 1> 访客数busuanzi_value_site_uv描述修改,使得其更加直观,找到如下的代码行：

    <span id="busuanzi_value_site_uv"></span>

    将其前后加入文字说明，更加的人性化，改成如下：

    您是第:<span id="busuanzi_value_site_uv"></span>位访客

  • 2> 浏览量 busuanzi_value_site_pv 描述修改,找到如下的代码行：

    <span id="busuanzi_value_site_pv"></span>

    将其前面加入文字说明，更加的人性化，改成如下：

    本站总访问量:<span id="busuanzi_value_site_pv"></span>

8. 文末添加版权申明

打开主题目录下的themes/next/_config.yml配置文件,creative_commons设置如下

creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true
  language: 
  

9. hexo添加文章阅读字数和阅读时长

• 安装相应的插件

  npm i --save hexo-wordcount
  npm install hexo-symbols-count-time --save

• 修改next配置文件_config.yml,看是否有如下配置,没有就新增:

  symbols_count_time:
    separated_meta: true
    item_text_post: true
    item_text_total: true

10. 删除底部页脚 由 Hexo 强力驱动

修改 themes/next/layout/_partials/footer.swig文件, 删除如下内容:

{%- if theme.footer.powered %}
  <div class="powered-by">
    {%- set next_site = 'https://theme-next.org' %}
    {%- if theme.scheme !== 'Gemini' %}
      {%- set next_site = 'https://' + theme.scheme | lower + '.theme-next.org' %}
    {%- endif %}
    {{- __('footer.powered', next_url('https://hexo.io', 'Hexo', {class: 'theme-link'}) + ' & ' + next_url(next_site, 'NexT.' + theme.scheme, {class: 'theme-link'})) }}
  </div>
{%- endif %}

11. hexo修改文章底部的那个带#号的标签

修改模板 /themes/next/layout/_macro/post.swig，搜索 {%- set tag_indicate = '#' %}，将其中的#换成

12. 增加搜索功能

安装插件，在blog的目录下执行:

npm install hexo-generator-search  --save
npm install hexo-generator-searchdb --save

同时设置next主题配置文件的local_search为enable

13. 增加留言板功能

• 添加留言本 page, 进入到博客的根目录，运行命令：

  hexo new page guestbook

• 在themes/next/_config.yml中增加配置

  menu:
    home: / || fa fa-home
    about: /about/ || fa fa-user
    ...
    guestbook: /guestbook/ || fa fa-comment #留言

• 修改themes\next\languages\zh-CN.yml增加：

  menu:
    home: 首页
    ...
    commonweal: 公益 404
    guestbook: 留言

• 编辑留言页面:在博客根目录\source\guestbook\index.md中

14. 增加文章图片本地引用

• 文章图片引用

  • 1> 安装插件hexo-asset-image: 不要使用npm install hexo-asset-image –save命令安装,否则本地图片引用路径无效,要使用如下命令安装:

    npm install https://github.com/CodeFalling/hexo-asset-image --save

  • 2> 修改文件_config.yml里的post_asset_folder:这个选项设置为true
  • 3> 执行创建文件命令hexo n "hexo 本地图片引用",看是否在source/_posts目录下有相应的本地图片引用文件夹产生.
  • 4> 引用图片: 直接在文章里面用![](xxx.jpg)来引用图片即可。

• 主页图片应用

  直接在hexo/source目录下创建images文件夹，其中存放图片即可，引用方式为：![](images/xxx.png),这种方式图片统一放一个文件夹，适合少量图片的情况。

---