上一篇文章,介绍了如何利用 hexo+github pages 搭建个人博客。那么这篇文章则以我的博客为例详细教你打造个性超赞博客 Hexo+GitHubPages+NexT 的主题。
我这里选择了 GitHub 上面最多人用的一款主题:Next
安装 next 主题
第一步:下载next主题
进入博客 hexo 文件夹里面空白处 D:\blog\hexo,鼠标右键选择 Git Bash here 运行下述命令:git clone https://github.com/iissnan/hexo-theme-next themes/next
然后 回车 。这样next主题就会下载到themes文件夹里面了。 (这个命令窗口不要关掉,后面还要用)
git clone https://github.com/iissnan/hexo-theme-next themes/next
第二步:设置 _config.yml 文件
用 sublime 打开 D:\blog\hexo _config.yml 文件,找到 theme 字段,修改参数为:theme: next
,(注意:后面有一个空格)
修改完,保存。
第三步:本地测试
在刚才的命令窗口分别输入以下代码:
第一个命令: hexo clean 然后按 回车 ,等一会,出现 $ 符号
第二个命令: hexo s -g 然后按 回车 ,等一会,出现:
打开浏览器访问 :http://localhost:4000,查看一下新的博客页面
可以看到,博客页面非常简洁,(或许和你实际看到的,略有不同,没有关系,后面我们还要进一步美化)。
这款主题包含4种风格,默认的是Muse,也可以尝试其他风格。具体操作:
打开 D:\blog\hexo_config.yml,定位到 Schemes,想要哪款主题就取消前面的#,我的博客使用的是 Gemini
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
好了,我们已经看到基本效果了,现在转到命令窗口,Ctrl+C 停止运行。 (窗口不用关掉,后面还要用)
首先更换语言成中文,点击blogs文件夹(也就是你博客项目的根目录文件夹)中的_config,yml配置文件,进行修改:
如果要用记事本编辑,一定要另存为,编码选 utf-8 。建议用:notepad 或者 subline text。
修改完成后说明主题已经换成next主题,并且样式为Gemini样式,接下来在blogs博客目录下,使用Git 调试运行看看效果:
hexo c //清空缓存
hexo s -g
浏览器:http://localhost:4000/,效果展示如下:
下面就需要根据个人需求,对该blog主题进行装修了······
侧边栏美化
添加博客名字和slogan
修改站点文件如下:
文件路径:hexo_config.yml (hexo 的配置文件)
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: python爱好者 # 更改为你自己的
subtitle: Bright Future
description: Stay Hungry,Stay Foolish
keywords: python,hexo
author: 爱好者
language: zh-CN
timezone:
新建标签、分类、关于页面
第一个:hexo new page “tags” 然后 回车
第二个:hexo new page “categories” 然后 回车
第三个:hexo new page “about” 然后 回车
然后,打开 D:\blog\hexo\source 就可以看到上述三个文件夹。
要添加关于博主的介绍,只需要在 D:\blog\hexo\source\about\index.md 文件中,用 markdown 书写内容即可.
侧栏社交链接图标设置
可以添加你的github、Email、知乎、简书等社交网站账号。
文件路径:hexo\themes\next_config.yml (主题next 的配置文件)
# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------
# Social Links.
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
GitHub: https://github.com/jaybinkoo || github
E-Mail: mailto:jaybin@aliyun.com || envelope
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:jaybinkoo?call|chat || skype
添加侧栏友情链接
在主题配置文件 _config.yml中Sidebar Settings部分添加字段:网址可以自定义
Hexo c
Hexo s –g
看下效果:
添加头像并设置随光标转动
博客添加头像有两种方法:
第一种是放在本地文件夹中:D:\blog\hexo\public\uploads,并且命名为avatar.jpg。
第二种是将图片放在七牛云中,然后传入链接。推荐这种方式,可以加快网页打开速度。
打开站点文件,搜索 avatar ,在下面添加下面代码:(我选择了第二种)
Hexo c
Hexo s –g
看下效果:
页脚美化
这些都很简单, 每个true /false注释写的很清楚,看不懂英文的自己复制下来翻译一下。
效果如下:(页脚)
隐藏powered By Hexo/主题
themes\next\layout_partials\ footer.swig
按下图位置进行注释掉,
页脚显示总访客数和总浏览量
在themes\next\layout_partials\ footer.swig,文件首行添加如下代码:
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
#接着修改相应代码:
# 添加总访客量
<span id="busuanzi_container_site_uv">
访客数:<span id="busuanzi_value_site_uv"></span>人次
</span>
{% if theme.footer.powered %}
<!--<div class="powered-by">{#
#}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>-->
{% endif %}
# 添加'|'符号
{% if theme.footer.powered and theme.footer.theme.enable %}
<span class="post-meta-divider">|</span>
{% endif %}
{% if theme.footer.custom_text %}
<div class="footer-custom">{#
#}{{ theme.footer.custom_text }}{#
#}</div>
{% endif %}
# 添加总访问量
<span id="busuanzi_container_site_pv">
总访问量:<span id="busuanzi_value_site_pv"></span>次
</span>
# 添加'|'符号
{% if theme.footer.powered and theme.footer.theme.enable %}
<span class="post-meta-divider">|</span>
{% endif %}
# 添加博客全站共:
<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>
以上代码#开头的中文要删掉,否则都会显示出来
显示统计字数和估计阅读时长
修改主题文件 _config.yml :
文件位置:blogs_config.yml
Post wordcount display settings
Dependencies: https://github.com/willin/hexo-wordcount
显示统计字数和估计阅读时长
注意:这个要安装插件,先进入站点文件夹根目录
然后:npm install hexo-wordcount --save
post_wordcount:
item_text: true
wordcount: true
min2read: true
totalcount: false
separated_meta: false
设置阅读全文:
在写博客的时候,添加
即从该处分开,隐藏后面文字,需点击“阅读全文”查看
添加标签
在写文章时,.md文件
效果
将# 改成标签的图标
具体实现方法
修改模板 /themes/next/layout/_macro/post.swig,搜索 rel=“tag”>#,将 # 换成<i class="fa fa-tag"></i>
主题配置文件中,添加网站版权信息
生成“分类”页并添加tpye属性
打开命令行,进入博客所在文件夹。执行命令
$ hexo new page categories
成功后会提示:
INFO Created: ~/Documents/blog/source/categories/index.md
根据上面的路径,找到index.md这个文件,打开后默认内容是这样的:
添加type: "categories"到内容中,添加后是这样的
标签文件也一样,需要添加 type: tags 才可以跳转到标签页面
打开这几个开关,左侧边栏会出现这种效果:
在next主题的配置文件里,设置打赏功能
文章末尾添加“本文结束”标记
新建 passage-end-tag.swig 文件
在路径\themes\next\layout_macro中添加passage-end-tag.swig文件,其内容为:
{% if theme.passage_end_tag.enabled %}
<div style="text-align:center;color: #ccc;font-size:14px;">
------本文已触底,感谢您的阅读!一看就知道今天的你,比昨天的你更好一些,喵~<i class="fa fa-paw"></i> ------</div>
{% endif %}
修改 post.swig 文件
在\themes\next\layout_macro\post.swig中,post-body之后,post-footer之前添加如下代码:
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
在主题配置文件中添加字段
在主题配置文件 _config.yml中添加以下字段开启此功能:
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
完成以上设置之后,在每篇文章之后都会添加“本文结束”标记。
该功能简易添加方法参见:https://github.com/iissnan/hexo-theme-next/issues/1039
添加网站已运行时间
在themes/layout/_parrials/footer.swing 中添加
把代码放在你想要的位置,插入位置不同,效果显示的位置也会不同。若想要显示为简体或者英文,只要把对应的文字修改就行。
<!-- 网站运行时间的设置 -->
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span> Sometimes your whole life boils down to one insame move.
<script>
var now = new Date();
function createtime() {
var grt= new Date("03/09/2019 13:14:21");//此处修改你的建站时间或者网站上线时间
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()",250);
</script>
文章底部添加版权信息
效果
教程:
修改文件:themes/next/layout/_macro/post-copyright.swig
若没有post-copyright.swig文件,则自己创建post-copyright.swig文件,添加如下代码,剩余步骤同5.3 文章末尾添加“本文结束”标记方法。
<ul class="post-copyright">
<li class="post-copyright-author">
<strong>{{ __('post.copyright.author') + __('symbol.colon') }}</strong>
{{ post.author | default(config.author) }}
</li>
<li class="post-copyright-link">
<strong>{{ __('post.copyright.link') + __('symbol.colon') }}</strong>
<a href="{{ post.url | default(post.permalink) }}" title="{{ post.title }}">{{ post.url | default(post.permalink) }}</a>
</li>
<li class="post-copyright-license">
<strong>{{ __('post.copyright.license_title') + __('symbol.colon') }} </strong>
{{ __('post.copyright.license_content', theme.post_copyright.license_url, theme.post_copyright.license) }}
</li>
</ul>
设置每页显示数量
在项目的配置文件下面,blogs
用LeanClound给hexo+next博客添加文章阅读数
注册LeanCloud账号
创建应用
新应用名称 (自定义) → 开发版 → 创建即可
创建Class
在创建的应用上点击 存储
数据栏中,_开头的都是系统预定义好的表,为了区分,新建一张表来保存数据。为了保证对 NexT 主题的修改兼容,新建 Class 名字必须为 Counter。为了避免权限问题导致 次数统计显示不正常,选择无限制,创建 Class。
获取App ID和App Key
建议设置Web安全域名,填入自己的博客域名。
填写 App ID 和 App Key
打开博客根目录/themes/next/下的_config.yml,查找leancloud,填写复制来的App ID和App Key,重新生成、部署博客即可正常统计文章阅读量。
文件路径:themes\next_config.yml (主题next的配置文件)
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: true
app_id: 0jIPAHo6f5PO-gzGzoHsz
app_key: RC0L6MlmcTDqRbk
# visitors count
counter: true
添加 LeanCloud 的 Valine 评论功能
创建 Comment
数据栏中,_开头的都是系统预定义好的表,为了区分,新建一张表来保存数据。为了保证对 NexT 主题的修改兼容,新建 Class 名字必须为 Comment。权限选择限制写入 ,创建 Class。
填写 App ID 和 App Key (和上面的是一样的)
打开博客根目录 /themes/next/ 下的 _config.yml,查找 Valine,填写复制来的App ID和App Key,重新生成、部署博客即可正常统计文章阅读量。
文件路径: themes\next_config.yml (next 主题配置文件)
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
enable: true
appid: 0jIPAHSJOq8dN1q3GzoHsz
appkey: RCiQJH6MlmcTDqRbk
notify: false # mail notifier , https://github.com/xCss/Valine/wiki
verify: true # Verification code
placeholder: 欢迎留言!匿名也可以留言! # comment box placeholder
avatar: mm # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
添加近期文章板块
打开文件:vim themes/next/layout/_macro/sidebar.swig,找到if theme.links后面的endif,在后面添加:
{% if theme.recent_posts %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout }}">
<div class="links-of-blogroll-title">
<!-- modify icon to fire by szw -->
<i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
{{ theme.recent_posts_title }}
</div>
<ul class="links-of-blogroll-list">
{% set posts = site.posts.sort('-date') %}
{% for post in posts.slice('0', '5') %}
<li>
<a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
在next主题_config.yml配置文件中添加:
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true
设置背景动画
参考: https://blog.csdn.net/sinat_33381791/article/details/82827842
由于在Next 6.0后设置 Canvas_nest: true是背景将会有动画效果,但是没有反应,查看一下官方文档有解释说明。
#解决方案
- 打开Git进入自己文件夹下/themes/next文件夹下
$ cd themes/next
运行git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest即:
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest
进入 thems/next/_config.yml文件下修改 canvas_nest: true(注意: 冒号后面要空格)
效果如图:
到此为止,我个人觉得博客装修,就完工了。
下一篇 如何可以通过域名来实现访问的博客?