hexo yelee博客系统搭建历程

  |     |  

使用hexo搭建博客

什么是 Hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

1
2
3
4
5
6
npm install hexo
hexo init <blog folder>
cd <blog folder>
npm install
hexo clean && hexo g && hexo d
hexo server

使用yelee模板

使用hexo-theme-yelee 模板,该模板个人感觉非常高大上,故使用该模板搭建。
进入themes目录,拉取yelee代码

1
2
cd themes
git clone https://github.com/MOxFIVE/hexo-theme-yelee

更改根目录的_config.yml文件

1
theme: yelee

在使用命令

1
hexo clean | hexo g | hexo s

即可进入到自己的博客页。

yelee模板bug处理

首页不显示文章列表,这是因为加载出错了,进行更改
进入yelee模板页的 .config.yml
将search.onload false 配置改成 search.on false 即可使首页正常显示

创建一些系统页

1
2
3
4
5
6
生成标签云
hexo new page tags
生成关于我
hexo new page about
为文章添加分类
hexo new page categories

添加统计字数

1
npm i --save hexo-wordcount

文件配置:

  1. 在yelee/layout/_partial/post/word.ejs下创建word.ejs文件:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div style="margin-top:10px;">
    <span class="post-time">
    <span class="post-meta-item-icon">
    <i class="fa fa-keyboard-o"></i>
    <span class="post-meta-item-text"> 字数统计: </span>
    <span class="post-count"><%= wordcount(post.content) %></span>
    </span>
    </span>

    <span class="post-time">
    &nbsp; | &nbsp;
    <span class="post-meta-item-icon">
    <i class="fa fa-hourglass-half"></i>
    <span class="post-meta-item-text"> 阅读时长: </span>
    <span class="post-count"><%= min2read(post.content) %></span>
    </span>
    </span>
    </div>
  2. 然后在 themes/yelee/layout/_partial/article.ejs中添加
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div class="article-inner">
    <% if (theme.fancybox){ %>
    <input type="hidden" class="isFancy" />
    <% } %>
    <% if (post.link || post.title){ %>
    <header class="article-header">
    <%- partial('post/title', {class_name: 'article-title'}) %>
    <!-- 开始添加字数统计-->
    <% if(theme.word_count && !post.no_word_count){%>
    <%- partial('post/word') %>
    <% } %>
    <!-- 添加完成 -->
    </header>
  3. 开启功能
    在yelee主题的_config.yml中添加下面代码
    1
    word_count: True

配置本地搜索

1
npm install hexo-generator-search --save

然后配置文件themes/yelee/_config.yml中修改为:

1
2
3
search:
on: ture
#on: false

左边的本地搜索即可使用,不过可能会有点慢。

RSS 订阅

1
npm install hexo-generator-feed --save

重启服务即可本地查看效果。

网站运行时间添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("02/14/2018 12:49:00");//此处修改你的建站时间或者网站上线时间
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>

Url 持久化

我们可以发现 hexo 默认生成的文章地址路径是 【网站名称/年/月/日/文章名称】。

这种链接对搜索爬虫是很不友好的,它的 url 结构超过了三层,太深了。

下面我推荐安装 hexo-abbrlink 插件:

1
npm install hexo-abbrlink --save

然后配置根目录的_config.yml

1
permalink: :title/

减少出站链接能够有效防止权重分散,hexo 有很方便的自动为出站链接添加 nofollow 的插件。

首先安装 hexo-autonofollow 插件:

1
npm install hexo-autonofollow --save

再在外层_config.yml 中添加配置,将 nofollow 设置为 true:

1
2
3
4
5
# 外部链接优化
nofollow:
enable: true
exclude: # 例外的链接,可将友情链接放置此处
- 'yousite'

这样,例外的链接将不会被加上 nofollow 属性。

示例:Zoey-Share-Site

添加萌妹子

获取

1
npm install --save hexo-helper-live2d

配置

1
2
3
4
5
6
7
8
9
10
11
live2d:
enable: true
scriptFrom: local
model:
use: live2d-widget-model-unitychan
display:
position: right
width: 150
height: 300
mobile:
show: true

需要哪个萌妹子,需要先下载模型,官方

1
npm install live2d-widget-model-shizuku

添加文章评论

文章评论可以选择来必力或者Valine等。
这里演示Valine的接入方式,当然来必力接入也非常简单,有兴趣者也可以研究下。
先去Valine官网注册账号,创建开发版应用,申请获得appid和appkey,
然后修改配置文件:

在/yelee/_config.yml中加入:

1
2
3
4
5
6
7
8
valine:
on: true
appid: ***** # App ID
appkey: ***** # App Key
verify: true # 验证码
notify: true # 评论回复邮箱提醒
avatar: mp # 匿名者头像选项
placeholder: Just go go!

在CDN中加入:

1
valine: //unpkg.com/valine@1.2.0-beta1/dist/Valine.min.js

在/yelee/layout/_partial/article.ejs中加入

1
2
3
4
5
6
7
8
9
10
11
12
13
<% } else if (theme.livere.on) { %>
<%- partial('comments/livere') %>
<!--加入下面内容-->
<% } else if (theme.valine.on){ %>
<%- partial('comments/valine', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>

<% } else if (theme.youyan.on) { %>
<%- partial('comments/youyan') %>
<% }

创建/yelee/layout/_partial/comments/valine.ejs文件,写入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<section id="comments" style="margin: 2em; padding: 2em; background: rgba(255, 255, 255, 0.5)">
<div id="vcomment" class="comment"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="<%- theme.CDN.valine %>"></script>
<script>
new Valine({
el: '#vcomment',
notify: '<%= theme.valine.notify %>',
verify: '<%= theme.valine.verify %>',
app_id: "<%= theme.valine.appid %>",
app_key: "<%= theme.valine.appkey %>",
placeholder: "<%= theme.valine.placeholder %>",
avatar: "<%= theme.valine.avatar %>"
});
</script>
</section>

在/yelee/source/css/_partial/mobile.styl最后加入:

1
2
3
4
#comments {
margin: (10/16)rem 10px !important;
padding: 1rem !important;
}

加入网易云音乐

进入网易云音乐版,可以选择单曲生成音乐链接外链,也可以创建歌单,添加多条歌曲,在生成一个歌单播放器外链,注意部分歌曲因为版权问题而无法生成外链,应当去除有版权的歌曲。

在自己觉得需要的地方加入,样式可以自己在调整下,相信你可以的。

1
2
3
<div style="position:absolute; bottom:120px;left:auto; width:85%">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=260 height=86 src="//music.163.com/outchain/player?type=2&id=422428548&auto=1&height=66"></iframe>
</div>

示例:Zoey-Share-Site

让Hexo一直在后台运行

安装pm2

$ npm install -g pm2

写一个执行脚本
在博客根目录下面创建一个hexo_run.js

1
2
3
4
5
6
7
8
9
10
//run
const { exec } = require('child_process')
exec('hexo server',(error, stdout, stderr) => {
if(error){
console.log('exec error: ${error}')
return
}
console.log('stdout: ${stdout}');
console.log('stderr: ${stderr}');
})

运行脚本
在根目录下

1
# pm2 start hexo_run.js

我的博客:Zoey-Share-Site

参考链接:
https://www.imooc.com/article/44662?block_id=tuijian_wz
https://tding.top/archives/9a232bbe/

文章目录
  1. 1. 使用hexo搭建博客
  2. 2. 使用yelee模板
  3. 3. yelee模板bug处理
  4. 4. 创建一些系统页
  5. 5. 添加统计字数
  6. 6. 配置本地搜索
  7. 7. RSS 订阅
    1. 7.1. 网站运行时间添加
  8. 8. Url 持久化
  9. 9. 添加萌妹子
  10. 10. 添加文章评论
  11. 11. 加入网易云音乐
  12. 12. 让Hexo一直在后台运行
作者共写了53.1k个字 本站总访问量  |   您是访问本站的第个小伙伴