前言

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

正文

  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"