静态个人主页配置详细

发表于 2020-08-25 | 更新于 2021-08-02

总字数: 872 | 阅读时长: 3分钟 | 阅读量: 0

前言

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

正文

克隆

1	git clone https://github.com/lete114/hexo-theme-MengD.git MengD

克隆后使用cd MengD进入MengD后执行以下命令

1 2	npm install hexo --save npm install hexo-deployer-git --save

相关命令
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

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

# 如下
# - 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图标

# 自定义图标
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就可以了

404页面配置

属性	值	说明
sec	30	多少秒后返回首页
text_color	#e58a8a	读秒字体颜色，可填Hex值，也可以填颜色单词
text	404！页面君找不到这个网页！！	404页面文字描述
background	#fff	404背景颜色，可填Hex值、颜色单词、图片地址
border_color	#7986cb	返回首页按钮边框颜色
font_color	#80bdab	返回首页按钮文字颜色

## 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”，则忽略该属性

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"

文章作者: Lete乐特

文章链接: https://blog.lete114.top/article/Hexo-MengD.html

赏

alipay
wechat