博客系统hexo yelee搭建历程

使用hexo搭建博客

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

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代码

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

文件配置:

  1. 在yelee/layout/_partial/post/word.ejs下创建word.ejs文件:
<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>
  1. 然后在 themes/yelee/layout/_partial/article.ejs中添加
<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>
  1. 开启功能
    在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

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

网站运行时间添加

<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 插件:

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/valine@1.2.0-beta1/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文件,写入:

<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最后加入:

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

加入网易云音乐

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

image

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

<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

//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

我的博客:Zoey-Share-Site

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339

推荐阅读更多精彩内容