Linux下使用 github+hexo 搭建个人博客04-next主题优化

踏歌行

发布于 2020-10-15 15:01:44

1.2K0

发布于 2020-10-15 15:01:44

文章被收录于专栏：踏歌行的专栏踏歌行的专栏

上篇我们说了 hexo 的优化，针对的站点的优化。

本篇讲解 next 主题的优化，包括：使用语言、前端页面显示宽度、菜单、侧栏、头像、添加或取消动画效果、打赏功能等等。

让页面排版更符合我们所要的功能和所想的风格。

可参考网站

http://theme-next.iissnan.com/getting-started.html

主题设定

选择 Scheme

修改 next 主题配置文件。

1 [root@zhangblog next]# pwd
2 /app/softinsall/hexo/themes/next
3 [root@zhangblog next]# vim _config.yml 
4 # Schemes
5 #scheme: Muse
6 #scheme: Mist
7 scheme: Pisces
8 #scheme: Gemini

可以自行更换，不用重启 hexo 服务。个人更喜欢 Pisces，将菜单栏放在左侧，而不是原来的顶部。 Muse 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白 Mist Muse 的紧凑版本，整洁有序的单栏外观 Pisces 双栏 Scheme，小家碧玉似的清新

页面宽度设置

默认情况下，该主题页面两边留白较多，所以如果需要可以把两边留白处减少些。

当然，此步操作可略。

 1 [root@zhangblog css]# pwd
 2 /app/softinsall/hexo/themes/next/source/css
 3 [root@zhangblog css]# vim _variables/base.styl  # 修改处一
 4 $main-desktop                   = 1160px
 5 [root@zhangblog css]# vim _schemes/Pisces/_layout.styl  # 修改处二 
 6 .content-wrap {
 7   float: right;
 8   box-sizing: border-box;
 9   padding: $content-desktop-padding;
10   /* width: $content-desktop; 改为如下信息 */
11   width: calc(100% - 252px);
12   background: white;
13   min-height: 700px;
14   box-shadow: $box-shadow-inner;
15   border-radius: $border-radius-inner;

设置语言

页面默认为英文，改为中文显示。

首先确定该主题支持哪些语言。

 1 [root@zhangblog languages]# pwd  # 在主题目录，查看 next 主题支持哪些语言
 2 /app/softinsall/hexo/themes/next
 3 [root@zhangblog languages]# ll languages/
 4 total 64
 5 -rw-r--r-- 1 root root 1669 Jun  7 20:13 default.yml
 6 -rw-r--r-- 1 root root 1601 Jun  7 20:13 de.yml
 7 -rw-r--r-- 1 root root 1712 Jun  7 20:13 en.yml
 8 -rw-r--r-- 1 root root 1553 Jun  7 20:13 fr-FR.yml
 9 -rw-r--r-- 1 root root 1507 Jun  7 20:13 id.yml
10 -rw-r--r-- 1 root root 1688 Jun  7 20:13 it.yml
11 -rw-r--r-- 1 root root 1573 Jun  7 20:13 ja.yml
12 -rw-r--r-- 1 root root 1596 Jun  7 20:13 ko.yml
13 -rw-r--r-- 1 root root 1729 Jun  7 20:13 nl-NL.yml
14 -rw-r--r-- 1 root root 1545 Jun  7 20:13 pt-BR.yml
15 -rw-r--r-- 1 root root 1583 Jun  7 20:13 pt.yml
16 -rw-r--r-- 1 root root 2632 Jun  7 20:13 ru.yml
17 -rw-r--r-- 1 root root 1997 Jun  7 20:13 vi.yml
18 -rw-r--r-- 1 root root 1781 Jun  7 20:13 zh-Hans.yml  # 中文简体，使用该语言
19 -rw-r--r-- 1 root root 1763 Jun  7 20:13 zh-hk.yml
20 -rw-r--r-- 1 root root 1763 Jun  7 20:13 zh-tw.yml

在站点配置文件使用指定语言。

1 [root@zhangblog hexo]# pwd  # 站点目录
2 /app/softinsall/hexo
3 [root@zhangblog hexo]# vim _config.yml  
4 ………………
5 language: zh-Hans
6 timezone:

重新生成静态文件，然后重启 hexo 服务，再次访问可见是中文显示了。

设置菜单

菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。

修改主题配置文件。

 1 [root@zhangblog next]# vim _config.yml 
 2 menu:
 3   home: / || home
 4   archives: /archives/ || archive
 5   tags: /tags/ || tags
 6   categories: /categories/ || th
 7   about: /about/ || user
 8   #schedule: /schedule/ || calendar
 9   sitemap: /sitemap.xml || sitemap
10   commonweal: /404/ || heartbeat
11 
12 # Enable/Disable menu icons.
13 menu_icons:
14   enable: true

home 主页 archives 归档类 tags 标签页 categories 分类页 about 关于页 schedule 时间表 sitemap 网站地图 commonweal 公益 404

设置侧栏

修改主题配置文件。

1 [root@zhangblog next]# vim _config.yml 
2 sidebar:
3   # Sidebar Position, available values: left | right (only for Pisces | Gemini).
4   position: left
5   #position: right

默认不用修改。侧边栏位置，可用值:：left | right (仅适用于 Pisces | Gemini)。

设置头像

修改主题配置文件。

1 [root@zhangblog next]# vim _config.yml 
2 # Sidebar Avatar
3 avatar:
4   # In theme directory (source/images): /images/avatar.gif
5   # In site directory (source/uploads): /uploads/avatar.gif
6   # You can also use other linking images.
7   url: /uploads/avatar.png

如果是站外，完整的互联网 URI 如：http://example.com/avatar.png

如果是站内： 1、将头像放置主题目录下的 source/uploads/ （新建 uploads 目录若不存在），配置为：avatar: /uploads/avatar.png 2、或者放置在 source/images/ 目录下，配置为：avatar: /images/avatar.png

图片路径

1 [root@zhangblog next]# pwd  # next 主题目录
2 /app/softinsall/hexo/themes/next
3 [root@zhangblog next]# ll source/uploads/avatar.png 
4 -rw-r--r-- 1 root root 131807 Apr 30 14:39 source/uploads/avatar.png

主题配置

设置「RSS」

false：禁用 RSS，不在页面上显示 RSS 连接。留空：使用 Hexo 生成的 Feed 链接。你可以需要先安装 hexo-generator-feed 插件。

插件地址：https://github.com/hexojs/hexo-generator-feed

安装插件

1 [root@iZ28xbsfvc4Z hexo]# pwd  # 站点目录
2 /app/softinsall/hexo
3 [root@iZ28xbsfvc4Z hexo]# npm install hexo-generator-feed --save

站点配置文件修改

 1 [root@zhangblog hexo]# pwd
 2 /app/softinsall/hexo
 3 [root@zhangblog hexo]# vim _config.yml 
 4 #Feed Atom
 5 feed:
 6   type: atom
 7   path: atom.xml
 8   limit: 20
 9   hub:
10   content:
11   content_limit: 140
12   content_limit_delim: ' '

参数讲解： type: RSS 的类型(atom/rss2) path: 文件路径，默认是 atom.xml/rss2.xml limit: 展示文章的数量，使用 0 或则 false 代表展示全部 hub: content: 在RSS文件中是否包含内容，有3个值 true/false 默认不填为 false content_limit: 指定内容的长度作为摘要，仅仅在上面content设置为 false 和没有自定义的描述出现 content_limit_delim: 上面截取描述的分隔符，截取内容是以指定的这个分隔符作为截取结束的标志。在达到规定的内容长度之前最后出现的这个分隔符之前的内容，防止从中间截断。

添加「标签」页面

新建标签页面

1 [root@zhangblog hexo]# pwd  # 定位到 Hexo 站点目录下
2 /app/softinsall/hexo
3 [root@zhangblog hexo]# hexo new page tags  
4 INFO  Created: /app/softinsall/hexo/source/tags/index.md

标签页面设置

 1 [root@zhangblog tags]# pwd
 2 /app/softinsall/hexo/source/tags
 3 [root@zhangblog tags]# ll
 4 total 4
 5 -rw-r--r-- 1 root root 79 Jun  7 10:48 index.md
 6 [root@zhangblog tags]# cat index.md 
 7 ---
 8 title: All Tags
 9 date: 2019-06-07 10:36:52
10 type: "tags"
11 comments: false
12 ---

注意：如果有集成评论服务，页面也会带有评论。若需要关闭的话，请添加字段 comments 并将值设置为 false。

使用标签 在文章中使用标签。

1 [root@zhangblog hexo]# pwd
2 /app/softinsall/hexo
3 [root@zhangblog hexo]# head source/_posts/MarkDown-新手指南.md  # 相关信息如下
4 ---
5 title: MarkDown 新手指南
6 date: 2019-06-04 19:28:51
7 tags:
8   - MarkDown
9 ---

浏览器访问

添加「分类」页面

新建分类页面

1 [root@zhangblog hexo]# pwd  # 定位到 Hexo 站点目录下
2 /app/softinsall/hexo
3 [root@zhangblog hexo]# hexo new page categories 
4 INFO  Created: /app/softinsall/hexo/source/categories/index.md

分类页面设置

 1 [root@zhangblog categories]# pwd
 2 /app/softinsall/hexo/source/categories
 3 [root@zhangblog categories]# ll
 4 total 4
 5 -rw-r--r-- 1 root root 89 Jun  7 11:04 index.md
 6 [root@zhangblog categories]# cat index.md  
 7 ---
 8 title: 文章分类
 9 date: 2019-06-07 11:00:17
10 type: "categories"
11 comments: false
12 ---

注意：如果有集成评论服务，页面也会带有评论。若需要关闭的话，请添加字段 comments 并将值设置为 false。

使用分类 在文章中使用分类。

 1 [root@zhangblog hexo]# pwd
 2 /app/softinsall/hexo
 3 [root@zhangblog hexo]# head source/_posts/MarkDown-新手指南.md # 相关信息如下
 4 ---
 5 title: MarkDown 新手指南
 6 date: 2019-06-04 19:28:51
 7 tags:
 8   - MarkDown
 9 categories:
10   - MarkDown
11 ---

浏览器访问

添加「关于」页面

新建关于页面

1 [root@zhangblog hexo]# pwd  # 定位到 Hexo 站点目录下
2 /app/softinsall/hexo
3 [root@zhangblog hexo]# hexo new page about
4 INFO  Created: /app/softinsall/hexo/source/about/index.md

关于页面编辑

 1 [root@zhangblog about]# pwd
 2 /app/softinsall/hexo/source/about
 3 [root@zhangblog about]# ll
 4 total 4
 5 -rw-r--r-- 1 root root 47 Jun  7 16:07 index.md
 6 [root@zhangblog about]# cat index.md 
 7 ---
 8 title: 关于我
 9 date: 2019-06-07 16:07:36
10 ---
11 
12 # 关于本博客
13 本博客诞生于 2019-06，虽然 2015-02 就开始在 CSDN 写博客，但是最开始都是作为自己的笔记记录，因此刚开始那段时间也不怎么重视排版。如果在 CSDN 看了我那些早期的博客，发现排版不好，体验性欠缺，还请多多包涵。
14 
15 后来该博客经过几次改版，自己发现不怎么适应。因此就转到了博客园。相比前者的经常改版，甚至有段时间广告频繁，博客园就好很多，页面也非常清爽。
16 
17 ………………
18 
19 等等，后期可能还会有其他动作，敬请期待…………
20 
21 # 联系方式
22 邮箱：zhanglianghhh@163.com
23 QQ: 1369929127
24 
25 </br>
26 
27 <center>
28 
29 **你对本站的捐赠，就是我最大的动力！**
30 
31 </center>
32 
33 ---

浏览器访问

添加「公益404」页面

腾讯公益404页面，寻找丢失儿童，让大家一起关注此项公益事业！

新建关于页面

1 [root@zhangblog hexo]# pwd  # 定位到 Hexo 站点目录下
2 /app/softinsall/hexo
3 [root@zhangblog hexo]# hexo new page 404
4 INFO  Created: /app/softinsall/hexo/source/404/index.md

关于页面编辑

 1 [root@zhangblog 404]# pwd
 2 /app/softinsall/hexo/source/404
 3 [root@zhangblog 404]# ll
 4 total 4
 5 -rw-r--r-- 1 root root 758 Jun  7 23:19 index.md
 6 [root@zhangblog 404]# cat index.md 
 7 ---
 8 title: 404
 9 date: 2019-06-07 23:15:22
10 ---
11 
12 <!DOCTYPE HTML>
13 <html>
14 <head>
15   <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
16   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
17   <meta name="robots" content="all" />
18   <meta name="robots" content="index,follow"/>
19   <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
20 </head>
21 <body>
22   <script type="text/plain" src="http://www.qq.com/404/search_children.js"
23           charset="utf-8" homePageUrl="/"
24           homePageName="回到我的主页">
25   </script>
26   <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
27   <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
28 </body>
29 </html>

浏览器访问

侧边栏社交链接

侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标。两者配置均在主题配置文件中。

 1 [root@zhangblog next]# pwd  # 主题目录
 2 /app/softinsall/hexo/themes/next
 3 [root@zhangblog next]# vim _config.yml
 4 social:
 5   GitHub: https://github.com/zhanglianghhh || github
 6   E-Mail: mailto:zhanglianghhh@163.com || envelope
 7   知乎: https://www.zhihu.com/people/lightzhang-23-69/activities || globe
 8   CSDN: https://blog.csdn.net/woshizhangliang999 || codiepie
 9   博客园: https://www.cnblogs.com/zhanglianghhh/p/ || rss-square
10 
11 social_icons:
12   enable: true
13   icons_only: false
14   transition: false

以如下配置说明：

GitHub: https://github.com/zhanglianghhh || github

GitHub：表示页面显示的文字 https://github.com/zhanglianghhh ：跳转URL github：使用的图标

更多图标参见如下网站：

http://www.fontawesome.com.cn/faicons/

页面效果

开启打赏功能

越来越多的平台（微信公众号、新浪博客、简书、百度打赏等）支持打赏功能，付费阅读时代越来越近，因此增加了打赏功能。

支持微信打赏和支付宝打赏，只需在主题配置文件中填入微信和支付宝收款二维码图片地址，即可开启打赏功能。

1 [root@zhangblog next]# pwd  # 在主题目录
2 /app/softinsall/hexo/themes/next
3 [root@zhangblog next]# vim _config.yml 
4 # Reward
5 reward_comment: 坚持原创分享，你的支持就是我最大的动力！
6 wechatpay: /uploads/weixin_cash_code.png
7 alipay: /uploads/alipay_cash_code.png

图片所在位置

1 [root@zhangblog next]# pwd  # 在主题目录
2 /app/softinsall/hexo/themes/next
3 [root@zhangblog next]# ll source/uploads/weixin_cash_code.png 
4 -rw-r--r-- 1 root root 27337 Jun  7 19:39 source/uploads/weixin_cash_code.png
5 [root@zhangblog next]# ll source/uploads/alipay_cash_code.png 
6 -rw-r--r-- 1 root root 58235 Jun  7 19:37 source/uploads/alipay_cash_code.png

页面效果

友情链接

在主题配置文件中修改。

 1 [root@zhangblog next]# pwd  # 主题目录
 2 /app/softinsall/hexo/themes/next
 3 [root@zhangblog next]# vim _config.yml
 4 # Blog rolls
 5 links_icon: link
 6 links_title: Links
 7 #links_layout: block
 8 links_layout: inline
 9 links:
10   OpenInfo: http://mp.weixin.qq.com/user1
11   stormzhang: http://mp.weixin.qq.com/user2

页面效果

站点建立时间

 1 [root@zhangblog next]# pwd  # 主题目录
 2 /app/softinsall/hexo/themes/next
 3 [root@zhangblog next]# vim _config.yml
 4 footer:
 5   # Specify the date when the site was setup.
 6   # If not defined, current year will be used.  修改处如下
 7   since: 2015
 8 
 9   # Icon between year and copyright info.
10   icon: user

页面效果

订阅微信公众号

在每篇文章的末尾默认显示微信公众号二维码，扫一扫，轻松订阅。

编辑主题配置文件，如下：

1 [root@zhangblog next]# pwd  # 在主题目录
2 /app/softinsall/hexo/themes/next
3 [root@zhangblog next]# vim _config.yml
4 # Wechat Subscriber
5 wechat_subscriber:
6   enabled: true
7   qcode: /uploads/weixin_pulic_code.png
8   description: 欢迎扫一扫，订阅我的微信公众号！

页面样式修改

 1 [root@zhangblog next]# pwd  # 在主题目录
 2 /app/softinsall/hexo/themes/next
 3 [root@zhangblog next]# vim layout/_macro/wechat-subscriber.swig 
 4 <div id="wechat_subscriber" style="display: block; padding: 10px 0; margin: 20px auto; width: 100%; text-align: center">
 5 <!-- 
 6     <img id="wechat_subscriber_qcode" src="{{ theme.wechat_subscriber.qcode }}" alt="{{ theme.author }} wechat" style="width: 200px; max-width: 100%;"/>
 7     去掉 style 中的 width: 200px;
 8      -->
 9     <img id="wechat_subscriber_qcode" src="{{ theme.wechat_subscriber.qcode }}" alt="{{ theme.author }} wechat" style="max-width: 100%;"/>
10     <div>{{ theme.wechat_subscriber.description }}</div>
11 </div>

页面效果

设置「动画效果」

Next 主题默认开启动画效果，由于该效果使用 JavaScript 编写，因此只有当 JavaScript 脚本加载完毕后，才会显示页面。如果你对加载速度在乎的话，那么可以关闭动画效果。

编辑主题配置文件，如下：

1 [root@zhangblog next]# pwd  # 在主题目录
2 /app/softinsall/hexo/themes/next
3 [root@zhangblog next]# vim _config.yml
4 # Use velocity to animate everything.
5 motion:
6   # true 开启动画， false 关闭动画
7   enable: true
8   async: false

设置「背景动画」

Next 主题自带四种背景动画效果，有兴趣自行体验，不过建议最好别开背景动画，因为会消耗额外的客户端资源。

编辑主题配置文件，如下：

 1 [root@zhangblog next]# pwd  # 在主题目录
 2 /app/softinsall/hexo/themes/next
 3 [root@zhangblog next]# vim _config.yml
 4 # Canvas-nest
 5 canvas_nest: false
 6 
 7 # three_waves
 8 three_waves: false
 9 
10 # canvas_lines
11 canvas_lines: false
12 
13 # canvas_sphere
14 canvas_sphere: false

底部版权信息

修改主题配置文件，如下：

1 [root@zhangblog next]# pwd  # 在主题目录
2 /app/softinsall/hexo/themes/next
3 [root@zhangblog next]# vim _config.yml
4 # Declare license on posts
5 post_copyright:
6   enable: true
7   license: CC BY-NC-SA 3.0
8   license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

页面效果

添加文章更新时间

在主题配置文件中进行修改配置。

1 [root@iZ28xbsfvc4Z next]# pwd  # 主题目录
2 /app/softinsall/hexo/themes/next
3 [root@iZ28xbsfvc4Z next]# vim _config.yml 
4 # Post meta display settings
5 post_meta:
6   item_text: true
7   created_at: true
8   updated_at: true   # 从 false 改为 true
9   categories: true

浏览器访问

首页不显示全文(只显示预览)

在主题配置文件中进行修改配置。

1 [root@iZ28xbsfvc4Z next]# pwd  # 主题目录
2 /app/softinsall/hexo/themes/next
3 [root@iZ28xbsfvc4Z next]# vim _config.yml 
4 # Automatically Excerpt. Not recommend.
5 # Please use <!-- more --> in the post to control excerpt accurately.
6 auto_excerpt:
7   # 从 false 改为 true
8   enable: true
9   length: 150

页面效果

文章末尾统一添加“本文结束”标记

 1 [root@iZ28xbsfvc4Z next]# pwd  # 主题目录
 2 /app/softinsall/hexo/themes/next
 3 [root@iZ28xbsfvc4Z next]# vim layout/_macro/passage-end-tag.swig  # 增加该文件
 4 <div>
 5     {% if not is_index %}
 6         <div style="text-align:center;color: #555;font-size:24px;"><-------------The End-------------></div>
 7     {% endif %}
 8 </div>
 9 [root@iZ28xbsfvc4Z next]# vim layout/_macro/post.swig  # 修改该文件，在 <div class="post-body>…………</div> 标签后增加如下信息
10     <!-- 文章末尾统一添加“本文结束”标记 -->
11     <div>
12       {% if not is_index %}
13         {% include 'passage-end-tag.swig' %}
14       {% endif %}
15     </div>
16 [root@iZ28xbsfvc4Z next]# vim _config.yml  # 主题配置文件修改
17 # 文章末尾添加“本文结束”标记
18 passage_end_tag:
19   enabled: true

页面效果