Linux下使用 github+hexo 搭建个人博客04-next主题优化
Posted zhanglianghhh
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Linux下使用 github+hexo 搭建个人博客04-next主题优化相关的知识，希望对你有一定的参考价值。
上篇我们说了 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 插件。
安装插件
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： 使用的图标
更多图标参见如下网站：
页面效果
开启打赏功能
越来越多的平台（微信公众号、新浪博客、简书、百度打赏等）支持打赏功能，付费阅读时代越来越近，因此增加了打赏功能。
支持微信打赏和支付宝打赏，只需在主题配置文件中填入微信和支付宝收款二维码图片地址，即可开启打赏功能。
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
页面效果
站点建立时间
这个时间将在站点的底部显示，例如 © 2015- 2019。 编辑主题配置文件，修改字段 since。
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
页面效果
推荐阅读
Linux下使用 github+hexo 搭建个人博客01-hexo搭建
Linux下使用 github+hexo 搭建个人博客02-hexo部署到Github Pages
Linux下使用 github+hexo 搭建个人博客03-hexo配置优化
Linux下使用 github+hexo 搭建个人博客04-next主题优化
Linux下使用 github+hexo 搭建个人博客05-next主题接入评论系统
Linux下使用 github+hexo 搭建个人博客06-next主题接入数据统计
Linux下使用 github+hexo 搭建个人博客07-next主题接入搜索和站点管理
以上是关于Linux下使用 github+hexo 搭建个人博客04-next主题优化的主要内容，如果未能解决你的问题，请参考以下文章