搭博客全过程及遇到的问题和美化

字数统计: 3.2k字   |   阅读时长: 15分   |   本文总阅读量: 次

搭博历程

博客搭建

首先，比较重要一点，是你的电脑可以科学上网，至于如何弄，就各凭本事喽，然后搭博客全过程可以参考GitHub+Hexo 搭建个人网站详细教程,这里面讲的可以说非常详尽了，我主要说说中间遇到的问题，和关于yilia主题的美化，具体效果可以参见我的博客。

在安装hexo这个地方我遇到
安装hexo
npm ERR! A complete log of this run can be found in:
npm ERR! 一串路径debug.log
的报错，据说是是npm官方镜像连不通的问题，试试用淘宝的npm镜像。
解决办法：
在Git bash中
执行 npm config set registry https://registry.npmmirror.com 将npm包源指向淘宝，就不需要翻墙安包了。
之后再按部就班的按照步骤来就可以了
当然，如果你安装起来没问题，没报错，就不用这些小道尔。

在选择主题的时候我用的是yilia，以下的美化修改全是基于yilia主题的，如果用的别的主题的，要改的话，请自行Google。目前最多的都是基于next的，功能也比较全面，是个不错的选择。

安装请查看上方蓝色字体标识得主题文字，并修改hexo根目录下的_config.yml文件中的theme: yilia，注意冒号后面有一个空格，不然不生效，之后修改主题中的_config.yml文件也是。

1.关于两个头像

头像
在主题文件中的_config.yml文件配置中，这个位置有两个图片路径，
上方的favicon: /favicon.png
是你的网页标识图标，就是你网页标题前面的图标。这个路径是在你主题yilia目录下的source文件夹中，添加一个favicon.png文件后hexo g hexo d部署一下，就能看见你网页的图标了。

下面那个头像的url以及打赏所要显示的支付宝，微信收货码是在你blog根目录下的source文件夹中。

2.关于鼠标覆盖头像动态效果

在路径Blog\themes\yilia\source文件夹下
增加css文件txbh.css用来设置头像变换的样式,可以在这里面找，我用的是jello，如果想用别的可以替换jello字段。代码如下：

1
2
3
4
.left-col #header .profilepic img:hover {
    -webkit-animation: jello 1s;
    animation: jello 1s;
}

另外还有一个用的头像旋转360°，鼠标离开后又转回来的，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
.left-col #header .profilepic img {
    /* 控制旋转速度时间*/
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}
.left-col #header .profilepic img:hover {
    /* 鼠标经过360% */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

然后在Blog\themes\yilia\layout\_partial\head.ejs文件中添加进去创建的css文件：
找到<%- partial('css') %>，在它的下面添加代码，把刚才写的文件添加进去，注意！！是在它的下面添加，不然效果将不会生效

1
2
3
4
<% if (theme.txbh){ %>
  <link href="//cdn.bootcss.com/animate.css/3.5.0/animate.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="/./txbh.css">
<% } %>

若用360°旋转效果则去掉上边一行link，只要txbh.css的link即可。
最后在主题文件目录下的_config.yml中添加

1
2
#头像变换
txbh: true

重新hexo g，hexo d部署下后就可以看到效果了

3.鼠标点击页面出现桃心效果

在Blog\themes\yilia\source文件夹下，新建click.js文件，代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
! function(e, t, a) {
    function n() {
        c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r()
    }

    function r() {
        for (var e = 0; e < d.length; e++)
            d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
        requestAnimationFrame(r)
    }

    function o() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function(e) {
            t && t(), i(e)
        }
    }

    function i(e) {
        var a = t.createElement("div");
        a.className = "heart", d.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: s()
        }), t.body.appendChild(a)
    }

    function c(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        } catch (t) {
            a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }

    function s() {
        return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
    }
    var d = [];
    e.requestAnimationFrame = function() {
        return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function(e) {
            setTimeout(e, 1e3 / 60)
        }
    }(), n()
}(window, document);

然后再Blog\themes\yilia\layout\_partial文件夹下的after-footer.ejs中加入

1
2
3
</script>
<script type="text/javascript" src="<%=config.root%>./click.js">
</script>

hexo g,hexo d重新部署后就可看到效果，另外还有鼠标点击出现文字特效供参考。

4.添加播放器和背景音乐

下载js和css文件，执行npm install aplayer --save
然后把Blog\node_modules\aplayer其中dist文件夹放到Blog\themes\yilia\source中
在Blog\themes\yilia\layout\layout.ejs的body标签下div结束后添加下面代码

1
2
3
4
5
<link rel="stylesheet" href="/./dist/APlayer.min.css">
 <div id="aplayer" style="z-index: 99999;"></div>
 <script src="/./dist/hls.min.js"></script>
 <script src="/./dist/APlayer.min.js"></script>
 <script src="/./dist/musicPlay.js"></script>

其中id为aplayer就是你要把浏览器放置的地方，样式z-index则是为了让播放器显示载最上面一层，而hls.min.js文件则可以看文档。
然后再Blog\themes\yilia\source\dist建立一个js文件，名字任意，我建的是musicPlay.js，在其中写下如下代码
注意 container对应id为aplayer，还有文件名对应的link，别改了上面忘了下面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    // mini: false,
    fixed: true,//吸底模式
    autoplay: true,//默认是否自动播放
    theme: '#FADFA3',
    loop: 'all',
    order: 'random',
    preload: 'auto',
    volume: 0.4,//默认音量
    mutex: true,//是否不允许多个播放器同时播放
    listFolded: true,//是否默认收起播放列表
    listMaxHeight: 90,//播放列表的高度
    //lrcType: 3, //使用lrc文件提供歌词
    //网易云默认外链链接：http://music.163.com/song/media/outer/url?id=ID数字.mp3
    audio: [
        {
            name: '生僻字',
            artist: '陈柯宇',
            url: 'http://music.163.com/song/media/outer/url?id=518781004.mp3',
            cover: 'http://p1.music.126.net/fzy5I3GvAjiDfwhIEbgXuw==/109951163062323125.jpg',
            lrc: '/./dist/music/lrc/518781004.lrc',
            theme: '#46718b'
        },
        {
            name: '光年之外',
            artist: '邓紫棋',
            url: 'http://music.163.com/song/media/outer/url?id=449818741.mp3',
            cover: 'http://p1.music.126.net/fkqFqMaEt0CzxYS-0NpCog==/18587244069235039.jpg',
            lrc: '/./dist/music/lrc/449818741.lrc',
            theme: '#46718b'
        }
    ]
});

我这里用的是网易云歌曲的外链接，在网页打开网易云，找到你要用的背景音乐页面，上面链接中会有歌曲的id，替换对应url下的歌曲id即可，歌曲图片可以右键点击网页上的歌曲封面，审查元素，然后找到对应的外链链接，对于一些需要版权什么的歌曲，可以去歌曲外链大全上搜索一下，替换对应的歌曲链接url和封面图片的url即可，其中audio标签下，就是我加进去的歌曲，由于我把lrcType: 3注释了，所以lrc歌词文件不会生效。
至此到Blog目录hexo g，hexo d布置一下即可查看效果。

5.在博客下添加看板娘

看板娘即live2d，用 Git Bash Here 在blog目录执行如下代码

1
npm install --save hexo-helper-live2d

这里可以看到模型的预览效果，但有可能不准，我下的就是串的，，选好自己想要的模型，然后安装

1
npm install "模型的包名" --save

模型包名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

在blog下的或者yilia(推荐)下的_config.yml文件添加配置(一定要在blog下的配置！！！)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
live2d:
  enable: true              # 是否开启
  scriptFrom: local         # 默认
  pluginRootPath: live2dw/  # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/        # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/  # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr    # jsdelivr CDN
  # scriptFrom: unpkg       # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  model:
    use: live2d-widget-model-wanko # 调用模型名，必须要先下载
  display:
    position: right         # 在博客的左边还是右边显示
    width: 150              # 边框宽度
    height: 300             # 边框高度
  mobile:
    show: true              # 是否在手机上显示
    # use: wanko            # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko    # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url

详细配置见文档下的细节设置和常规设置。
hexo g，hexo d重新部署即可看到效果

6.文章中添加字数，阅读时间，访问量及页脚添加网站运行时间，浏览量等

访问量的统计都是基于不蒜子。
在Blog\themes\yilia\layout\_partial\post目录下创建word.ejs文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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>

    <% if (!is_home() && is_post()) { %>
        <span id="busuanzi_container_page_pv">
          &nbsp; | &nbsp;  本文总阅读量: <span id="busuanzi_value_page_pv"></span> 次
        </span>
    <% } %>
</div>

然后在 Blog\themes/yilia/layout/_partial/article.ejs中

1
<%- partial('post/title', {class_name: 'article-title'}) %>

一行下添加

1
2
3
<% if(theme.word_count && post.wcount){ %>
          <%- partial('post/word') %>
        <% } %>

其中word_count和wcount分别是控制主题中和文章中是否开启的flag

在yilia主题文件夹下的_config.yml文件添加配置
word_count: true
每次写文章在md文件头位置加入
wcount： true
即可开启字数，阅读时间，访问量的显示。
页脚位置的配置
在Blog\themes\yilia\layout\_partial下的footer.ejs文件夹中div#outer中div#footer-info结束后加入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<span id="busuanzi_container_site_pv">
        &nbsp;&nbsp;&nbsp;
        总访问量: <span id="busuanzi_value_site_pv"></span>
        </span>|
        <span id="busuanzi_container_site_uv">
        总访客: <span id="busuanzi_value_site_uv"></span>
        </span>
        </br>
        <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
        <script>
            var now = new Date(); 
            function createtime(){ var grt= new Date("01/24/2019 1:00: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>
        <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

保存，退出，hexo g，hexo d重新部署后即可看到效果。

7.博客添加评论系统及更换背景

比较好用的畅言现在要网站备案号才可以用，跳过备案号可以尝试hexo部署畅言,然后我用的是来必力,一个韩国的评论系统，具体配置过程可以见Hexo 部署评论系统。还有一个更换左侧背景的帖子。

8.写在后面

大体我就加了这些东西，如果有更多的好东西可以在评论中交流分享一下。

赏

Trick or treat

支付宝
微信
置顶

扫一扫，分享到微信

微信分享二维码
    总访问量: | 总访客:
载入天数...载入时分秒...

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

东尐，<br>过气程序员<br>沙雕青年<br><br>青灯为墙，旖旎为家<br><br>以梦为马，不负韶华<br>联系加V，lqd5216915