前言

问:为什么不直接手敲静态页面(反正也就一个页面)?
答:使用静态文件生成器方便管理,不需要修改源码就能修改样式和增加其他内容(采用读取配置文件实现)

正文

  1. 克隆

    1
    git clone https://github.com/lete114/hexo-theme-MengD.git MengD
  2. 克隆后使用cd MengD进入MengD后执行以下命令

    1
    2
    npm install hexo --save
    npm install hexo-deployer-git --save
  3. 相关命令

    1
    2
    3
    4
    hexo server # 本地预览(简写hexo s)
    hexo generate # 生成静态文件(简写hexo g)
    hexo clean # 清理文件缓存
    hexo deploy # 部署(简写hexo d)

    hexo s后在浏览器地址栏输入http://localhost:4000/即可本地预览
    hexo g后根目录会多出public文件夹,里面就是生成出来的静态页面
    hexo clean后系统将删除你的public文件夹(一般很少使用)
    hexo d后系统将public文件夹内的静态文件复制到.deploy_git文件夹内并部署到你的仓库
    请留意你的根目录_config.yml配置文件内的配置是否填写

    1
    2
    3
    4
    5
    6
    7
    8
    # 你的域名地址
    url: https://lete114.top

    # 提交
    deploy:
    type: git
    repo: # 提交的仓库地址
    branch: master

主题配置文件

选取部分功能进行分析

自定义js、css

必须以以下格式进行自定义引入(注意缩进)

1
2
3
4
5
6
7
8
9
10
11
# 如下
# - https://xxx.com/css/css.css
# - https://xxx.com/js/js.js
# - css/css.css
# - js/js.js
css:
- https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css
- css/Lete.css
js:
- https://xxx.com/js/js.js
- js/js.js

自定义图标

想自定义多套不同的icon图标,可以在上面自定义css处引入icon图标

1
2
3
4
5
6
7
8
9
10
11
12
# 自定义图标
iconfont: https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@master/butterfly/css/iconfont.min.css
# 图标大小
font_size: 1.6em
# Icon 图标
links:
iconfont icon-youxiang: mailto:lete@lete114.top
iconfont icon-github3: https://github.com/lete114
iconfont icon-icon_doc_fill: https://blog.lete114.top
iconfont icon-lianjie: https://blog.lete114.top/link/
iconfont icon-csdn: https://me.csdn.net/Lott0419
iconfont icon-zhihu: https://www.zhihu.com/people/lete114

百度分析

填写问号后面的key就可以了
baidu.png

404页面配置

属性 说明
sec 30 多少秒后返回首页
text_color #e58a8a 读秒字体颜色,可填Hex值,也可以填颜色单词
text 404!页面君找不到这个网页!! 404页面文字描述
background #fff 404背景颜色,可填Hex值、颜色单词、图片地址
border_color #7986cb 返回首页按钮边框颜色
font_color #80bdab 返回首页按钮文字颜色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
## 404页面
error_404:
# 多少秒后返回首页
sec: 30
# 读秒字体颜色
text_color: '#e58a8a'
# 404文字描述
text: '404!页面君找不到这个网页!!'
# 自定义背景
# bg_img: url(https://cdn.jsdelivr.net/gh/lete114/CDN2/img/wei_er_li_te/3.jpg)
# bg_img: '#fff'
# bg_img: 'white'
background: url(https://cdn.jsdelivr.net/gh/lete114/CDN2/img/wei_er_li_te/3.jpg)
# 鼠标移到返回首页按钮
# 返回首页边框颜色
border_color: '#7986cb'
# 返回首页字体颜色
font_color: '#80bdab'

音乐播放

属性 说明
autoplay 自动播放
loop 循环播放
src 音频地址
controls [不推荐使用] 显示控件
muted [不推荐使用] 静音
preload [不推荐使用] 音频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性
1
2
3
4
5
6
7
8
9
music:
field: 404
### autoplay=自动播放 | loop=循环播放 | controls=显示控件 | muted=静音 | src=音频地址
### 不推荐:controls、muted、preload
### preload=音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性
property:
autoplay
loop
src="https://656e-env-jxscvzag-1301289878.tcb.qcloud.la/music/zenyang.mp3"