hexo框架安装和主题Butterfly安装教程

hexo 安装

引言

教程比较长,搬起凳子慢慢看吧.
如果你身处中国大陆,且访问 Github 不稳定,你可以用 Gitee 安装
Github如果网络无法解决请下载魔法上网工具,上bing搜索免费节点,临时解决网络问题进行下载
也可以用请点这里下载,不保证是最新

安装必须软件

在安装主题之前请先安装运行环境这里只做主机和服务器的教程,上传到github的方法这里不做介绍,如过感兴趣请到官方去看,按作者的流畅傻瓜式操作就行

  1. node-必须 下载**node(lts)**版本
    pArS9yQ.png
  2. git-必须根据自己系统下载相应的格式
    pArSCLj.png
  3. visualstudio-必须
    pArSFwn.png
  4. Typora 备用,适合新手
  5. 安装完以上东西以后,在电脑左下角搜索框搜索cmd,并打开
    pArSkoq.png
  6. 输入node -v检查是否安装成功,如显示 v..(代表数字)则说明*,node安装正确
    pArSEF0.png
  7. 修改npm源,输入以下命令修改源(不换源可能会遇到下载问题)
    cmd
    1
    npm config set registry https://mirrors.huaweicloud.com/repository/npm/

安装hexo

  1. 打开你的c盘或者d盘,删除文件路径,输入cmd,并按回车键会打开cmd命令窗口.
    pArSVYV.png
  2. 输入以下命令,安装hexo
    cmd
    1
    npm install -g hexo-cli && hexo -v
    返回一堆数字字母说明安装成功,如下两种都可以
    pArSZWT.md.png
  3. 继续使用cmd窗口输入以下三条命令
    cmd
    1
    2
    3
    hexo init blog-demo
    cd blog-demo
    npm i
  4. 初始化成功以后blog-demo目录下会有以下内容
    • node_modules:依赖包
    • scaffolds:生成文章的一些模板
    • source:用来存放你的文章
    • themes:主题
    • .npmignore:发布时忽略的文件(可忽略)
    • _config.landscape.yml:主题的配置文件
    • config.yml:博客的配置文件
    • package.json:项目名称,描述,版本,运行和开发等信
  5. 继续在命令窗口输入hexo cl && hexo s启动项目,看到有以下画面说明启动成功然后按ctrl+c取消预览,其中http://localhost:4000/为预览连接

安装Butterfly主题

    • 上Github下载主题
    • 下载下来以后解压下来改文件夹名字为butterfly(注意大小写),复制到项目themes文件夹
    • 修改项目根目录**_config.yml文件**,修改最底下的theme:项,冒号后面写上主题名字butterfly
  2. 继续在cmd命令行输入以下命令安装渲染插件
    cmd
    1
    npm install hexo-renderer-pug hexo-renderer-stylus --save
  3. 复制根 \themes\butterfly_config.yml 这个文件到跟目录并改名为 _config.butterfly.yml,或者下载我提供的文件直接按路径放进去,里面有我用简体标注每项修改的作用,请点这里下载按对应路径放进去就行

修改主页排序

找到文件C:\hexo\node_modules\hexo-generator-index\lib\generator.js
修改里面的代码为以下代码保存

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
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 当两篇文章top都有定义时
            if(a.top == b.top) return b.updated - a.updated; // 若top值一样,则按照文章更新日期降序排列
            else return b.top - a.top; // 否则按照top值降序排列
        }
        else if(a.top && !b.top) { // 以下两种情况是若只有一篇文章top有定义,则将有top的排在前面(这里用异或操作居然不行233)
            return -1;
        }
        else if(!a.top && b.top) { //上一条已解释
            return 1;
        }
        else return b.updated - a.updated; // 若都没定义,则按照文章更新日期降序排列
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

主题添加小风车,设置转速，哔哩哔哩插入优化

css
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/* 文章页H1-H6图标样式效果 */
h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
    -webkit-animation: ccc 1.6s linear infinite ;
    animation: ccc 1.6s linear infinite ;
}
@-webkit-keyframes ccc {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn)
    }
}
@keyframes ccc {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn)
    }
}
/* 页面设置icon转动速度调整 */
#rightside_config i.fas.fa-cog.fa-spin {
    animation: fa-spin 5s linear infinite ;
}
#content-inner.layout h1::before {
    color: #ef50a8 ;
    margin-left: -1.55rem;
    font-size: 1.3rem;
    margin-top: -0.23rem;
}
#content-inner.layout h2::before {
    color: #fb7061 ;
    margin-left: -1.35rem;
    font-size: 1.1rem;
    margin-top: -0.12rem;
}
#content-inner.layout h3::before {
    color: #ffbf00 ;
    margin-left: -1.22rem;
    font-size: 0.95rem;
    margin-top: -0.09rem;
}
#content-inner.layout h4::before {
    color: #a9e000 ;
    margin-left: -1.05rem;
    font-size: 0.8rem;
    margin-top: -0.09rem;
}
#content-inner.layout h5::before {
    color: #57c850 ;
    margin-left: -0.9rem;
    font-size: 0.7rem;
    margin-top: 0.0rem;
}
#content-inner.layout h6::before {
    color: #5ec1e0 ;
    margin-left: -0.9rem;
    font-size: 0.66rem;
    margin-top: 0.0rem;
}
/*哔哩哔哩视频适配*/
.aspect-ratio {position: relative;width: 100%;height: 0;padding-bottom: 75%;margin: 3% auto;text-align: center;}      
.aspect-ratio iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

哔哩哔哩调用方法

html
1
2
3
4
5
6
7
8
9
10
11
<div align=center class="aspect-ratio">
    <iframe src="https://player.bilibili.com/player.html?aid=9926758&&page=1&as_wide=1&high_quality=1&danmaku=0&autoplay=0" 
    scrolling="no" 
    border="0" 
    frameborder="no" 
    framespacing="0" 
    high_quality=1
    danmaku=1 
    allowfullscreen="true"> 
    </iframe>
</div>

安装本地搜索依赖

cmd
1
npm install hexo-generator-search --save

重新启动hexo

cmd
1
2
3
hexo cl
hexo d
hexo s

结语

为防止失联:
请关注我的主站:https://link3.cc/xiaofei888