上篇我们说了 hexo 的优化,针对的站点的优化。
本篇讲解 next 主题的优化,包括:使用语言、前端页面显示宽度、菜单、侧栏、头像、添加或取消动画效果、打赏功能等等。
让页面排版更符合我们所要的功能和所想的风格。
可参考网站
http://theme-/getting-started.html
主题设定
选择 Scheme
修改 next主题配置文件。
[root@zhangblog next]# pwd/app/softinsall/hexo/themes/next[root@zhangblog next]# vim _config.yml # Schemes#scheme: Muse#scheme: Mistscheme: 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-Hanstimezone:
重新生成静态文件,然后重启 hexo 服务,再次访问可见是中文显示了。
设置菜单
菜单配置包括三个部分,第一是菜单项(名称和链接),第二是菜单项的显示文本,第三是菜单项对应的图标。
修改主题配置文件。
[root@zhangblog next]# vim _config.yml menu:home: / || homearchives: /archives/ || archivetags: /tags/ || tagscategories: /categories/ || thabout: /about/ || user#schedule: /schedule/ || calendarsitemap: /sitemap.xml || sitemapcommonweal: /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 Avataravatar:# 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 如:/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 插件。
插件地址:/hexojs/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 Atomfeed:type: atompath: atom.xmllimit: 20hub:content:content_limit: 140content_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]# lltotal 4-rw-r--r-- 1 root root 79 Jun 7 10:48 index.md[root@zhangblog tags]# cat index.md ---title: All Tagsdate: -06-07 10:36:52type: "tags"comments: false---
注意:如果有集成评论服务,页面也会带有评论。 若需要关闭的话,请添加字段 comments 并将值设置为 false。
使用标签
在文章中使用标签。
[root@zhangblog hexo]# pwd/app/softinsall/hexo[root@zhangblog hexo]# head source/_posts/MarkDown-新手指南.md # 相关信息如下---title: MarkDown 新手指南date: -06-04 19:28:51tags:- 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]# lltotal 4-rw-r--r-- 1 root root 89 Jun 7 11:04 index.md[root@zhangblog categories]# cat index.md ---title: 文章分类date: -06-07 11:00:17type: "categories"comments: false---
注意:如果有集成评论服务,页面也会带有评论。 若需要关闭的话,请添加字段 comments 并将值设置为 false。
使用分类
在文章中使用分类。
[root@zhangblog hexo]# pwd/app/softinsall/hexo[root@zhangblog hexo]# head source/_posts/MarkDown-新手指南.md # 相关信息如下---title: MarkDown 新手指南date: -06-04 19:28:51tags:- MarkDowncategories:- MarkDown---
浏览器访问
添加「关于」页面
新建关于页面
[root@zhangblog hexo]# pwd # 定位到 Hexo 站点目录下/app/softinsall/hexo[root@zhangblog hexo]# hexo new page aboutINFO Created: /app/softinsall/hexo/source/about/index.md
关于页面编辑
[root@zhangblog about]# pwd/app/softinsall/hexo/source/about[root@zhangblog about]# lltotal 4-rw-r--r-- 1 root root 47 Jun 7 16:07 index.md[root@zhangblog about]# cat index.md ---title: 关于我date: -06-07 16:07:36---# 关于本博客本博客诞生于 -06,虽然 -02 就开始在 CSDN 写博客,但是最开始都是作为自己的笔记记录,因此刚开始那段时间也不怎么重视排版。如果在 CSDN 看了我那些早期的博客,发现排版不好,体验性欠缺,还请多多包涵。后来该博客经过几次改版,自己发现不怎么适应。因此就转到了博客园。相比前者的经常改版,甚至有段时间广告频繁,博客园就好很多,页面也非常清爽。………………等等,后期可能还会有其他动作,敬请期待…………# 联系方式邮箱:zhanglianghhh@QQ: 1369929127</br><center>**你对本站的捐赠,就是我最大的动力!**</center>---
浏览器访问
添加「公益404」页面
腾讯公益404页面,寻找丢失儿童,让大家一起关注此项公益事业!
新建关于页面
[root@zhangblog hexo]# pwd # 定位到 Hexo 站点目录下/app/softinsall/hexo[root@zhangblog hexo]# hexo new page 404INFO Created: /app/softinsall/hexo/source/404/index.md
关于页面编辑
[root@zhangblog 404]# pwd/app/softinsall/hexo/source/404[root@zhangblog 404]# lltotal 4-rw-r--r-- 1 root root 758 Jun 7 23:19 index.md[root@zhangblog 404]# cat index.md ---title: 404date: -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="/gy/404/style/404style.css"></head><body><script type="text/plain" src="/404/search_children.js"charset="utf-8" homePageUrl="/"homePageName="回到我的主页"></script><script src="/gy/404/data.js" charset="utf-8"></script><script src="/gy/404/page.js" charset="utf-8"></script></body></html>
浏览器访问
侧边栏社交链接
侧栏社交链接的修改包含两个部分,第一是链接,第二是链接图标。两者配置均在主题配置文件中。
[root@zhangblog next]# pwd # 主题目录/app/softinsall/hexo/themes/next[root@zhangblog next]# vim _config.ymlsocial:GitHub: /zhanglianghhh || githubE-Mail: mailto:zhanglianghhh@ || envelope知乎: /people/lightzhang-23-69/activities || globeCSDN: /woshizhangliang999 || codiepie博客园: /zhanglianghhh/p/ || rss-squaresocial_icons:enable: trueicons_only: falsetransition: false
以如下配置说明:
GitHub: /zhanglianghhh || github
GitHub: 表示页面显示的文字
/zhanglianghhh : 跳转URL
github: 使用的图标
更多图标参见如下网站:
/faicons/
页面效果
开启打赏功能
越来越多的平台(微信公众号、新浪博客、简书、百度打赏等)支持打赏功能,付费阅读时代越来越近,因此增加了打赏功能。
支持微信打赏和支付宝打赏,只需在主题配置文件中填入微信和支付宝收款二维码图片地址,即可开启打赏功能。
[root@zhangblog next]# pwd # 在主题目录/app/softinsall/hexo/themes/next[root@zhangblog next]# vim _config.yml # Rewardreward_comment: 坚持原创分享,你的支持就是我最大的动力!wechatpay: /uploads/weixin_cash_code.pngalipay: /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 rollslinks_icon: linklinks_title: Links#links_layout: blocklinks_layout: inlinelinks:OpenInfo: http://mp./user1stormzhang: http://mp./user2
页面效果
站点建立时间
这个时间将在站点的底部显示,例如 © - 。 编辑主题配置文件,修改字段 since。
[root@zhangblog next]# pwd # 主题目录/app/softinsall/hexo/themes/next[root@zhangblog next]# vim _config.ymlfooter:# Specify the date when the site was setup.# If not defined, current year will be used. 修改处如下since: # Icon between year and copyright info.icon: user
页面效果
订阅微信公众号
在每篇文章的末尾默认显示微信公众号二维码,扫一扫,轻松订阅。
编辑主题配置文件,如下:
[root@zhangblog next]# pwd # 在主题目录/app/softinsall/hexo/themes/next[root@zhangblog next]# vim _config.yml# Wechat Subscriberwechat_subscriber:enabled: trueqcode: /uploads/weixin_pulic_code.pngdescription: 欢迎扫一扫,订阅我的微信公众号!
页面样式修改
[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: trueasync: false
设置「背景动画」
Next 主题自带四种背景动画效果,有兴趣自行体验,不过建议最好别开背景动画,因为会消耗额外的客户端资源。
编辑主题配置文件,如下:
[root@zhangblog next]# pwd # 在主题目录/app/softinsall/hexo/themes/next[root@zhangblog next]# vim _config.yml# Canvas-nestcanvas_nest: false# three_wavesthree_waves: false# canvas_linescanvas_lines: false# canvas_spherecanvas_sphere: false
底部版权信息
修改主题配置文件,如下:
[root@zhangblog next]# pwd # 在主题目录/app/softinsall/hexo/themes/next[root@zhangblog next]# vim _config.yml# Declare license on postspost_copyright:enable: truelicense: CC BY-NC-SA 3.0license_url: /licenses/by-nc-sa/3.0/
页面效果
添加文章更新时间
在主题配置文件中进行修改配置。
[root@iZ28xbsfvc4Z next]# pwd # 主题目录/app/softinsall/hexo/themes/next[root@iZ28xbsfvc4Z next]# vim _config.yml # Post meta display settingspost_meta:item_text: truecreated_at: trueupdated_at: true # 从 false 改为 truecategories: 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 改为 trueenable: truelength: 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主题接入搜索和站点管理