博客系统hexo yelee搭建历程

使用hexo搭建博客

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

npm install hexo
hexo init 
cd 
npm install 
hexo clean && hexo g && hexo d
hexo server

使用yelee模板

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

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

更改根目录的_config.yml文件

theme: yelee

在使用命令

hexo clean | hexo g | hexo s

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

在这里插入图片描述

我的博客：Zoey-Share-Site

yelee模板bug处理

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

创建一些系统页

生成标签云
hexo new page tags
生成关于我
hexo new page about
为文章添加分类
hexo new page categories

添加统计字数

npm i --save hexo-wordcount

文件配置：

在yelee/layout/_partial/post/word.ejs下创建word.ejs文件：


    
      
        
          字数统计: 
        <%= wordcount(post.content) %>字
      
    

    
        |  
      
        
          阅读时长: 
        <%= min2read(post.content) %>分

然后在 themes/yelee/layout/_partial/article.ejs中添加


    <% if (theme.fancybox){ %>
      
    <% } %>
    <% if (post.link || post.title){ %>
      
        <%- partial('post/title', {class_name: 'article-title'}) %>
        
        <% if(theme.word_count && !post.no_word_count){%>
          <%- partial('post/word') %>
          <% } %>

开启功能
在yelee主题的_config.yml中添加下面代码

word_count: True

配置本地搜索

npm install hexo-generator-search --save

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

search:
  on: ture
  #on: false

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

RSS 订阅

npm install hexo-generator-feed --save

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

网站运行时间添加

载入天数...载入时分秒...

Url 持久化

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

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

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

npm install hexo-abbrlink --save

然后配置根目录的_config.yml

permalink: :title/

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

首先安装 hexo-autonofollow 插件：

npm install hexo-autonofollow --save

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

# 外部链接优化
nofollow:
    enable: true
    exclude:     # 例外的链接，可将友情链接放置此处
    - 'yousite'

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

示例：Zoey-Share-Site

添加萌妹子

获取

npm install --save hexo-helper-live2d

配置

live2d:
  enable: true
  scriptFrom: local
  model:
    use: live2d-widget-model-unitychan
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

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

npm install live2d-widget-model-shizuku

添加文章评论

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

在/yelee/_config.yml中加入：

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

在CDN中加入：

valine: //unpkg.com/[email protected]/dist/Valine.min.js

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

 <% } 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文件，写入：

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

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

加入网易云音乐

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

image

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

示例：Zoey-Share-Site

让Hexo一直在后台运行

安装pm2

$ npm install -g pm2

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

//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}');
})

运行脚本
在根目录下

# pm2 start hexo_run.js