官方文档:https://hexo.io/zh-cn/docs

安装环境

  • 安装node和git环境
  • 安装hexo
    npm install -g hexo-cli
  • 初始化
    1
    2
    3
    hexo init <folder>
    cd <folder>
    npm install

配置

修改配置文件

1
2
3
4
5
6
# config.yml
deploy:
type: git
#括号里面换成自己的用户名和仓库名,去掉括号
repo: git@github.com:(BoView)/(BoView).github.io.git
branch: master

运行

1
2
hexo -g
hexo server

上传

hexo -d

域名配置

1
2
3
4
5
6
7
8
9
10
11
// 用的万网域名
// 域名下添加解析记录类型为 CNAME
// 主机记录为@
// 线路选择默认
// 记录值为github的仓库名userName.github.io
//
// 在hexo项目目录下添加CNAME文件,添加域名
// 重新部署

hexo g
hexo d

中间遇到github pages报错,原因是没有把CNAME文件放到source目录下,生成之后github上没有这个文件。

更换主题

来自这篇博客, 页面字体及一些细节借鉴了这里

编辑文章

  • 新建文章
    hexo new <title>
    将在source目录下生成<title>.md
    编辑时按md文件规则编辑
  • 新建菜单栏
    about页面为例:
    hexo new page about
    将source/about/index.md文件内的type改为about,如下:
    1
    2
    3
    4
    ---
    title: about
    type: "about"
    ---

定义自己的博客

添加看板娘

  1. 安装依赖包

    1
    2
    3
    npm install --save hexo-helper-live2d
    # 添加自己想选择的模型
    npm i live2d-widget-model-nipsilon

    模型列表:https://github.com/xiazeyu/live2d-widget-models
    在线演示地址:https://huaji8.top/post/live2d-plugin-2.0/

  2. _config.yml配置:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    live2d:
    enable: true
    scriptFrom: local
    model:
    use: live2d-widget-model-nipsilon
    display:
    position: left
    width: 150
    height: 150
    mobile:
    show: false
    react:
    opacityDefault: .8
    dev:
    log: true
    mouseLog: true

    按需配置:
    参数说明:
    https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html
    了解更多的话可以看张鑫旭大神的文章哦:https://www.zhangxinxu.com/wordpress/2018/05/live2d-web-webgl-js/

  3. 自定义菜单
    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
    var dialog = `
    <div class='dialog'>
    <div class='words'>你好(〃'▽'〃)</div>
    <div class='menu'>
    <ul class='menu-list'>
    <li><i class='fa fa-home'></i></li>
    <li><i class='fa fa-music'></i></li>
    <li><i class='fa fa-comment'></i></li>
    <li><i class='fa fa-camera'></i></li>
    <li><i class='fa fa-info-circle'></i></li>
    <li><i class='fa fa-times-circle'></i></li>
    </ul>
    <ul class='menu-music'>
    <li><i class='fa fa-play-circle'></i></li>
    <li><i class='fa fa-pause-circle'></i></li>
    </ul>
    <div>
    <div>
    `
    setTimeout(() => {
    $('#live2d-widget').append(dialog)
    }, 1000)
    $('.menu-list').on('mouseenter', 'i', (e) => {
    // 添加hover事件
    })

    $('.menu-list').on('click', 'i', (e) => {
    // 添加点击事件
    })

添加音乐播放器

插件:https://aplayer.js.org/#/
添加插件后目录链接无法点击问题:
将这一句代码去掉就可以了

1
if(!e.defaultPrevented){e.preventDefault(),location.hash!==this.hash&&window.history.pushState(null,null,this.hash);var n=document.getElementById(this.hash.substring(1));if(!n)return;t(n,500,function(e){location.replace("#"+e.id)})}

自定义模板

以本博客所用的主题Maupassant为例, 其中历史页面使用了一个时间轴
从_config.yml配置文件可以看到:

1
2
3
4
5
6
7
8
9
timeline:
- num: 1
word: 2014/06/12-Start
- num: 2
word: 2014/11/29-XXX
- num: 3
word: 2015/02/18-DDD
- num: 4
word: More

同时在主题的模板目录下有一个timeline.pug文件, 里面内容为:

1
2
3
4
5
6
7
8
9
10
11
12
13
extends base
block title
title= page.title + ' | ' + config.title
block content
// ...some code
- for (var i in theme.timeline)
div.timeline-entry
div.timeline-entry-inner
div(class="timeline-icon wow fadeInUp" data-wow-delay="0.2s")
span.number= theme.timeline[i].num
div(class="timeline-label wow fadeInUp" data-wow-delay="0.2s")
span.word= theme.timeline[i].word
// ...some code

使用timeliness这个组件只需要在md文件的front-matter中添加
layout: timeline
这样就很清楚啦,在配置文件中定义变量,在模板中读取,写文章时修改layout就ok了( • ̀ω•́ )✧
所以自己来写一个吧! (以本博客的关于页面为例,页面下方的联系用了自己的模板)

  1. 首先新建一个文件about.pug
    内容类似:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    extends base
    block title
    title= page.title + ' | ' + config.title
    block content
    // ..some code
    - for (var i in theme.about)
    a(href=theme.about[i].href, title=theme.about[i].name)
    i(class='fa ' + theme.about[i].icon)
    // ...some code
  2. 配置文件添加变量
    形式可以自己定义,只要模板文件遵循格式就好啦(~ ̄▽ ̄)~

    1
    2
    3
    4
    about:
    - name: github
    href: https://github.com/amenging
    icon: fa-github
  3. 修改md文件的layoutabout

添加emoji

1
2
3
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save
npm install markdown-it-emoji --save

中间如果执行有错误先运行hexo clean哦
_config.yml添加

1
2
3
4
5
6
plugins:
- markdown-it-footnote
- markdown-it-sup
- markdown-it-sub
- markdown-it-abbr
- markdown-it-emoji

emoji网站:https://www.emojicopy.com/

其它

清除public目录

hexo clean

rss订阅

npm install hexo-generator-feed --save
在_config.yml下添加

1
2
3
4
5
6
7
8
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

当然_config.yml的menu里也要添加

1
2
3
- page: rss
directory: atom.xml
icon: fa-rss

创建404页面

hexo new page 404
这样就可以啦,github会把它作为默认404
不过听说要绑定域名哦