Linux下使用 github+hexo 搭建个人博客04-next主题优化
上篇我们说了 hexo 的优化,针对的站点的优化。
本篇讲解 next 主题的优化,包括:使用语言、前端页面显示宽度、菜单、侧栏、头像、添加或取消动画效果、打赏功能等等。
让页面排版更符合我们所要的功能和所想的风格。
可参考网站
http://theme-next.iissnan.com/getting-started.html
主题设定
选择 Scheme
修改 next 主题配置文件。
[root@zhangblog next]# pwd /app/softinsall/hexo/themes/next [root@zhangblog next]# vim _config.yml # Schemes #scheme: Muse #scheme: Mist scheme: Pisces #scheme: Gemini
可以自行更换,不用重启 hexo 服务。个人更喜欢 Pisces,将菜单栏放在左侧,而不是原来的顶部。
Muse 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
Mist Muse 的紧凑版本,整洁有序的单栏外观
Pisces 双栏 Scheme,小家碧玉似的清新
页面宽度设置
默认情况下,该主题页面两边留白较多,所以如果需要可以把两边留白处减少些。
当然,此步操作可略。
[root@zhangblog css]# pwd /app/softinsall/hexo/themes/next/source/css [root@zhangblog css]# vim _variables/base.styl # 修改处一 $main-desktop = 1160px [root@zhangblog css]# vim _schemes/Pisces/_layout.styl # 修改处二 .content-wrap { float: right; box-sizing: border-box; padding: $content-desktop-padding; /* width: $content-desktop; 改为如下信息 */ width: calc(100% - 252px); background: white; min-height: 700px; box-shadow: $box-shadow-inner; border-radius: $border-radius-inner;
设置语言
页面默认为英文,改为中文显示。
首先确定该主题支持哪些语言。
[root@zhangblog languages]# pwd # 在主题目录,查看 next 主题支持哪些语言 /app/softinsall/hexo/themes/next [root@zhangblog languages]# ll languages/ total 64 -rw-r--r-- 1 root root 1669 Jun 7 20:13 default.yml -rw-r--r-- 1 root root 1601 Jun 7 20:13 de.yml -rw-r--r-- 1 root root 1712 Jun 7 20:13 en.yml -rw-r--r-- 1 root root 1553 Jun 7 20:13 fr-FR.yml -rw-r--r-- 1 root root 1507 Jun 7 20:13 id.yml -rw-r--r-- 1 root root 1688 Jun 7 20:13 it.yml -rw-r--r-- 1 root root 1573 Jun 7 20:13 ja.yml -rw-r--r-- 1 root root 1596 Jun 7 20:13 ko.yml -rw-r--r-- 1 root root 1729 Jun 7 20:13 nl-NL.yml -rw-r--r-- 1 root root 1545 Jun 7 20:13 pt-BR.yml -rw-r--r-- 1 root root 1583 Jun 7 20:13 pt.yml -rw-r--r-- 1 root root 2632 Jun 7 20:13 ru.yml -rw-r--r-- 1 root root 1997 Jun 7 20:13 vi.yml -rw-r--r-- 1 root root 1781 Jun 7 20:13 zh-Hans.yml # 中文简体,使用该语言 -rw-r--r-- 1 root root 1763 Jun 7 20:13 zh-hk.yml -rw-r--r-- 1 root root 1763 Jun 7 20:13 zh-tw.yml
在站点配置文件使用指定语言。
[root@zhangblog hexo]# pwd # 站点目录 /app/softinsall/hexo [root@zhangblog hexo]# vim _config.yml ……………… language: zh-Hans timezone:
重新生成静态文件,然后重启 hexo 服务,再次访问可见是中文显示了。
设置菜单
菜单配置包括三个部分,第一是菜单项(名称和链接),第二是菜单项的显示文本,第三是菜单项对应的图标。
修改主题配置文件。
[root@zhangblog next]# vim _config.yml menu: home: / || home archives: /archives/ || archive tags: /tags/ || tags categories: /categories/ || th about: /about/ || user #schedule: /schedule/ || calendar sitemap: /sitemap.xml || sitemap commonweal: /404/ || heartbeat # Enable/Disable menu icons. menu_icons: enable: true
home 主页
archives 归档类
tags 标签页
categories 分类页
about 关于页
schedule 时间表
sitemap 网站地图
commonweal 公益 404
设置侧栏
修改主题配置文件。
[root@zhangblog next]# vim _config.yml sidebar: # Sidebar Position, available values: left | right (only for Pisces | Gemini). position: left #position: right
默认不用修改。
侧边栏位置,可用值::left | right (仅适用于 Pisces | Gemini)。
设置头像
修改主题配置文件。
[root@zhangblog next]# vim _config.yml # Sidebar Avatar avatar: # In theme directory (source/images): /images/avatar.gif # In site directory (source/uploads): /uploads/avatar.gif # You can also use other linking images. 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
图片路径
[root@zhangblog next]# pwd # next 主题目录 /app/softinsall/hexo/themes/next [root@zhangblog next]# ll source/uploads/avatar.png -rw-r--r-- 1 root root 131807 Apr 30 14:39 source/uploads/avatar.png
主题配置
设置「RSS」
false:禁用 RSS,不在页面上显示 RSS 连接。
留空:使用 Hexo 生成的 Feed 链接。 你可以需要先安装 hexo-generator-feed 插件。
安装插件
[root@iZ28xbsfvc4Z hexo]# pwd # 站点目录 /app/softinsall/hexo [root@iZ28xbsfvc4Z hexo]# npm install hexo-generator-feed --save
站点配置文件修改
[root@zhangblog hexo]# pwd /app/softinsall/hexo [root@zhangblog hexo]# vim _config.yml #Feed Atom feed: type: atom path: atom.xml limit: 20 hub: content: content_limit: 140 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: 上面截取描述的分隔符,截取内容是以指定的这个分隔符作为截取结束的标志。在达到规定的内容长度之前最后出现的这个分隔符之前的内容,防止从中间截断。
添加「标签」页面
新建标签页面
[root@zhangblog hexo]# pwd # 定位到 Hexo 站点目录下 /app/softinsall/hexo [root@zhangblog hexo]# hexo new page tags INFO Created: /app/softinsall/hexo/source/tags/index.md
标签页面设置
[root@zhangblog tags]# pwd /app/softinsall/hexo/source/tags [root@zhangblog tags]# ll total 4 -rw-r--r-- 1 root root 79 Jun 7 10:48 index.md [root@zhangblog tags]# cat index.md --- title: All Tags date: 2019-06-07 10:36:52 type: "tags" comments: false ---
注意:如果有集成评论服务,页面也会带有评论。 若需要关闭的话,请添加字段 comments 并将值设置为 false。
使用标签
在文章中使用标签。
[root@zhangblog hexo]# pwd /app/softinsall/hexo [root@zhangblog hexo]# head source/_posts/MarkDown-新手指南.md # 相关信息如下 --- title: MarkDown 新手指南 date: 2019-06-04 19:28:51 tags: - MarkDown ---
浏览器访问
添加「分类」页面
新建分类页面
[root@zhangblog hexo]# pwd # 定位到 Hexo 站点目录下 /app/softinsall/hexo [root@zhangblog hexo]# hexo new page categories INFO Created: /app/softinsall/hexo/source/categories/index.md
分类页面设置
[root@zhangblog categories]# pwd /app/softinsall/hexo/source/categories [root@zhangblog categories]# ll total 4 -rw-r--r-- 1 root root 89 Jun 7 11:04 index.md [root@zhangblog categories]# cat index.md --- title: 文章分类 date: 2019-06-07 11:00:17 type: "categories" comments: false ---
注意:如果有集成评论服务,页面也会带有评论。 若需要关闭的话,请添加字段 comments 并将值设置为 false。
使用分类
在文章中使用分类。
[root@zhangblog hexo]# pwd /app/softinsall/hexo [root@zhangblog hexo]# head source/_posts/MarkDown-新手指南.md # 相关信息如下 --- title: MarkDown 新手指南 date: 2019-06-04 19:28:51 tags: - MarkDown categories: - MarkDown ---
浏览器访问
添加「关于」页面
新建关于页面
[root@zhangblog hexo]# pwd # 定位到 Hexo 站点目录下 /app/softinsall/hexo [root@zhangblog hexo]# hexo new page about INFO Created: /app/softinsall/hexo/source/about/index.md
关于页面编辑
[root@zhangblog about]# pwd /app/softinsall/hexo/source/about [root@zhangblog about]# ll total 4 -rw-r--r-- 1 root root 47 Jun 7 16:07 index.md [root@zhangblog about]# cat index.md --- title: 关于我 date: 2019-06-07 16:07:36 --- # 关于本博客 本博客诞生于 2019-06,虽然 2015-02 就开始在 CSDN 写博客,但是最开始都是作为自己的笔记记录,因此刚开始那段时间也不怎么重视排版。如果在 CSDN 看了我那些早期的博客,发现排版不好,体验性欠缺,还请多多包涵。 后来该博客经过几次改版,自己发现不怎么适应。因此就转到了博客园。相比前者的经常改版,甚至有段时间广告频繁,博客园就好很多,页面也非常清爽。 ……………… 等等,后期可能还会有其他动作,敬请期待………… # 联系方式 邮箱:zhanglianghhh@163.com QQ: 1369929127 </br> <center> **你对本站的捐赠,就是我最大的动力!** </center> ---
浏览器访问
添加「公益404」页面
腾讯公益404页面,寻找丢失儿童,让大家一起关注此项公益事业!
新建关于页面
[root@zhangblog hexo]# pwd # 定位到 Hexo 站点目录下 /app/softinsall/hexo [root@zhangblog hexo]# hexo new page 404 INFO Created: /app/softinsall/hexo/source/404/index.md
关于页面编辑
[root@zhangblog 404]# pwd /app/softinsall/hexo/source/404 [root@zhangblog 404]# ll total 4 -rw-r--r-- 1 root root 758 Jun 7 23:19 index.md [root@zhangblog 404]# cat index.md --- title: 404 date: 2019-06-07 23:15:22 --- <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8;"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="robots" content="all" /> <meta name="robots" content="index,follow"/> <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css"> </head> <body> <script type="text/plain" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="回到我的主页"> </script> <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script> <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script> </body> </html>
浏览器访问
侧边栏社交链接
侧栏社交链接的修改包含两个部分,第一是链接,第二是链接图标。两者配置均在主题配置文件中。
[root@zhangblog next]# pwd # 主题目录 /app/softinsall/hexo/themes/next [root@zhangblog next]# vim _config.yml social: GitHub: https://github.com/zhanglianghhh || github E-Mail: mailto:zhanglianghhh@163.com || envelope 知乎: https://www.zhihu.com/people/lightzhang-23-69/activities || globe CSDN: https://blog.csdn.net/woshizhangliang999 || codiepie 博客园: https://www.cnblogs.com/zhanglianghhh/p/ || rss-square social_icons: enable: true icons_only: false transition: false
以如下配置说明:
GitHub: https://github.com/zhanglianghhh || github
GitHub: 表示页面显示的文字
https://github.com/zhanglianghhh : 跳转URL
github: 使用的图标
更多图标参见如下网站:
页面效果
开启打赏功能
越来越多的平台(微信公众号、新浪博客、简书、百度打赏等)支持打赏功能,付费阅读时代越来越近,因此增加了打赏功能。
支持微信打赏和支付宝打赏,只需在主题配置文件中填入微信和支付宝收款二维码图片地址,即可开启打赏功能。
[root@zhangblog next]# pwd # 在主题目录 /app/softinsall/hexo/themes/next [root@zhangblog next]# vim _config.yml # Reward reward_comment: 坚持原创分享,你的支持就是我最大的动力! wechatpay: /uploads/weixin_cash_code.png alipay: /uploads/alipay_cash_code.png
图片所在位置
[root@zhangblog next]# pwd # 在主题目录 /app/softinsall/hexo/themes/next [root@zhangblog next]# ll source/uploads/weixin_cash_code.png -rw-r--r-- 1 root root 27337 Jun 7 19:39 source/uploads/weixin_cash_code.png [root@zhangblog next]# ll source/uploads/alipay_cash_code.png -rw-r--r-- 1 root root 58235 Jun 7 19:37 source/uploads/alipay_cash_code.png
页面效果
友情链接
在主题配置文件中修改。
[root@zhangblog next]# pwd # 主题目录 /app/softinsall/hexo/themes/next [root@zhangblog next]# vim _config.yml # Blog rolls links_icon: link links_title: Links #links_layout: block links_layout: inline links: OpenInfo: http://mp.weixin.qq.com/user1 stormzhang: http://mp.weixin.qq.com/user2
页面效果
站点建立时间
这个时间将在站点的底部显示,例如 © 2015- 2019。 编辑主题配置文件,修改字段 since。
[root@zhangblog next]# pwd # 主题目录 /app/softinsall/hexo/themes/next [root@zhangblog next]# vim _config.yml footer: # Specify the date when the site was setup. # If not defined, current year will be used. 修改处如下 since: 2015 # Icon between year and copyright info. icon: user
页面效果
订阅微信公众号
在每篇文章的末尾默认显示微信公众号二维码,扫一扫,轻松订阅。
编辑主题配置文件,如下:
[root@zhangblog next]# pwd # 在主题目录 /app/softinsall/hexo/themes/next [root@zhangblog next]# vim _config.yml # Wechat Subscriber wechat_subscriber: enabled: true qcode: /uploads/weixin_pulic_code.png description: 欢迎扫一扫,订阅我的微信公众号!
页面样式修改
[root@zhangblog next]# pwd # 在主题目录 /app/softinsall/hexo/themes/next [root@zhangblog next]# vim layout/_macro/wechat-subscriber.swig <div id="wechat_subscriber" style="display: block; padding: 10px 0; margin: 20px auto; width: 100%; text-align: center"> <!-- <img id="wechat_subscriber_qcode" src="{{ theme.wechat_subscriber.qcode }}" alt="{{ theme.author }} wechat" style="width: 200px; max-width: 100%;"/> 去掉 style 中的 width: 200px; --> <img id="wechat_subscriber_qcode" src="{{ theme.wechat_subscriber.qcode }}" alt="{{ theme.author }} wechat" style="max-width: 100%;"/> <div>{{ theme.wechat_subscriber.description }}</div> </div>
页面效果
设置「动画效果」
Next 主题默认开启动画效果,由于该效果使用 JavaScript 编写,因此只有当 JavaScript 脚本加载完毕后,才会显示页面。
如果你对加载速度在乎的话,那么可以关闭动画效果。
编辑主题配置文件,如下:
[root@zhangblog next]# pwd # 在主题目录 /app/softinsall/hexo/themes/next [root@zhangblog next]# vim _config.yml # Use velocity to animate everything. motion: # true 开启动画, false 关闭动画 enable: true async: false
设置「背景动画」
Next 主题自带四种背景动画效果,有兴趣自行体验,不过建议最好别开背景动画,因为会消耗额外的客户端资源。
编辑主题配置文件,如下:
[root@zhangblog next]# pwd # 在主题目录 /app/softinsall/hexo/themes/next [root@zhangblog next]# vim _config.yml # Canvas-nest canvas_nest: false # three_waves three_waves: false # canvas_lines canvas_lines: false # canvas_sphere canvas_sphere: false
底部版权信息
修改主题配置文件,如下:
[root@zhangblog next]# pwd # 在主题目录 /app/softinsall/hexo/themes/next [root@zhangblog next]# vim _config.yml # Declare license on posts post_copyright: enable: true license: CC BY-NC-SA 3.0 license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/
页面效果
添加文章更新时间
在主题配置文件中进行修改配置。
[root@iZ28xbsfvc4Z next]# pwd # 主题目录 /app/softinsall/hexo/themes/next [root@iZ28xbsfvc4Z next]# vim _config.yml # Post meta display settings post_meta: item_text: true created_at: true updated_at: true # 从 false 改为 true categories: true
浏览器访问
首页不显示全文(只显示预览)
在主题配置文件中进行修改配置。
[root@iZ28xbsfvc4Z next]# pwd # 主题目录 /app/softinsall/hexo/themes/next [root@iZ28xbsfvc4Z next]# vim _config.yml # Automatically Excerpt. Not recommend. # Please use <!-- more --> in the post to control excerpt accurately. auto_excerpt: # 从 false 改为 true enable: true length: 150
页面效果
文章末尾统一添加“本文结束”标记
[root@iZ28xbsfvc4Z next]# pwd # 主题目录 /app/softinsall/hexo/themes/next [root@iZ28xbsfvc4Z next]# vim layout/_macro/passage-end-tag.swig # 增加该文件 <div> {% if not is_index %} <div style="text-align:center;color: #555;font-size:24px;"><-------------The End-------------></div> {% endif %} </div> [root@iZ28xbsfvc4Z next]# vim layout/_macro/post.swig # 修改该文件,在 <div class="post-body>…………</div> 标签后增加如下信息 <!-- 文章末尾统一添加“本文结束”标记 --> <div> {% if not is_index %} {% include 'passage-end-tag.swig' %} {% endif %} </div> [root@iZ28xbsfvc4Z next]# vim _config.yml # 主题配置文件修改 # 文章末尾添加“本文结束”标记 passage_end_tag: 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 搭建个人博客06-next主题接入数据统计
- Linux下使用 github+hexo 搭建个人博客05-next主题接入评论系统
- 基于Hexo+Next主题的个人博客搭建定制优化
- hexo框架-next主题-github搭建个人博客
- 使用GitHub + Hexo搭建个人博客(九)- 切换 Hexo 主题
- Hexo+GitHub搭建静态博客平台(三)-Next主题基本使用
- hexo+gitHub搭建个人独立博客 Next主题配置(二)
- Hexo+GitHub+Next主题搭建个人博客
- 使用github与Hexo搭建个人博客
- 使用GitHub + Hexo搭建个人博客(十)- 发表新博客
- 使用 Github Pages 和 Hexo 搭建个人博客
- Github Pages 搭建HEXO主题个人博客
- Linux环境下使用hexo+github搭建个人博客
- GitHub + Hexo + NexT 主题 免费搭建博客-参考链接收集
- 使用Hexo + GitHub Pages搭建个人博客
- 使用hexo+github搭建免费个人博客详细教程
- 【Hexo搭建个人博客】(六)Next主题集成的第三方服务(Valine评论系统、Local Search搜索服务、不蒜子统计、百度统计分析服务、百度内容分享服务、MathJax公式服务)
- 使用Hexo搭建Github个人静态博客
- 使用Hexo+GitHub搭建及配置个人博客
- 使用hexo在GitHub上搭建个人博客网站