安装

1
git clone https://github.com/lete114/hexo-theme-yilia-pro.git themes/Yilia-Pro

修改 hexo 根目录下的 _config.yml:theme: Yilia-Pro

功能

在原 Yilia 基础上增加的功能

  1. 标题前添加图标(可旋转)
  2. 自定义图标
  3. 自定义图标大小
  4. 添加主题样式(搞自由度定制)
  5. 代码块样式(default | darker | pale night | light | ocean | mac | mac light)
  6. 代码框(default | darker | pale night | light | ocean | mac | mac light)
  7. 字数统计
  8. 阅读时长统计
  9. 访问量统计(不蒜子)
  10. 文章最新更新时间
  11. 自定义标题切换
  12. 自定义搜索框 desc
  13. 网站启动年份
  14. 网站运行时间
  15. ICP 备案
  16. CDN 加速
  17. 版权声明
  18. Valine 评论系统(移除其他评论系统、目前只有 valine、计划未来添加其他评论系统)
  19. 自定义引入 css、js
  20. 百度分析&谷歌分析
  21. 页脚自定义字体颜色
  22. 自定义文章封面
  23. 页脚小红心
  24. 其他细节优化

配置

标题 icon 图标

1
2
3
4
5
6
# 参考：https://getkit.cn/resources/font-awesome/
# 标题icon图标
rotate_sec: "1s" # 旋转速度默认1秒，留空不不旋转
rotate_deg: "-360deg" # 旋转方向 正数顺时针，负数逆时针，留空不旋转
title_prefix_icon: '\f863' # 图标Unicode编码
title_prefix_icon_color: "#00c4b6" # 图标颜色

参考图标库：https://getkit.cn/resources/font-awesome/
找到喜欢的图标，鼠标移动上去右键审查元素
展开i标签，选中 i 标签下的::before
下面styles一栏有 Unicode 编码

images

左侧 Icon 图标

font_size:20px 设置图标大小显示
subnav: 下的图标前缀(iconfont)可自定义配合下面的import:引入自己的 Icon 图标

1
2
3
4
5
6
7
8
9
# SubNav
font_size: 20px # 图标大小
subnav:
  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

主题颜色

注释写的很清楚

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
themes:
  entirety_color: "#e58a8a" # 主题色
  article_more: "#4d4d4d" # 展开更多
  # 背景图片
  bg_img: url("https://cdn.jsdelivr.net/gh/lete114/CDN2/img/wei_er_li_te/3.jpg")
  mobile_bg_img: url("https://cdn.jsdelivr.net/gh/lete114/CDN/Use/JAKWhn.png")
  article: rgba(255,255,255,.7) # 文章透明度
  rightside: "#ccc" # 右侧按钮背景颜色
  a_color: "#00c4b6" # 超链接颜色
  a_color_hover: "#e58a8a"
  scrollbar_color: "#e58a8a" # 滚动条
  slider: "#e58a8a" # 所有文章板块背景，使用渐变色直接 slider: 'linear-gradient(200deg,#fff,#e58a8a)'
  footer_text: "#212121" # 页脚文字颜色
  footer_text_a:
  selection_text_bg: "#00c4b6 " # 选中文字的背景颜色
  selection_text: "#fff"
  mobile_nav: "#00c4b6" # 头像下方导航文字颜色
  pc_nav: "#00c4b6"

代码块样式

1
2
## 代码块样式
highlight_theme: mac # default / darker / pale night / light / ocean / mac / mac light / false

images
images
images
images
images
images
images
images

自定义 CSS 和 JS

可以引入自己写的 CSS 和 JS
style_script:可直接样式
js 写在<script>里
css 写在<style>里

注意:要保证在一行

1
2
3
4
5
6
7
8
9
10
11
12
13
# 自定义css js
import:
  css:
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">
    #    - <link rel="stylesheet" href="https://blog.lete114.top/css/index.css">
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@master/butterfly/css/iconfont.min.css">
  js:
    -
    #- <script src="https://blog.lete114.top/js/Lete.js"></script>
  style_script:
    -
    - <style>/*修改github图标颜色*/ .icon-github3{color:#000} /*修改博客图标颜色*/ .icon-icon_doc_fill{color:#e58a8a} </style>
    # (如上)不想另建css文件引入可以直接写样式

百度统计&谷歌统计

1
2
3
4
# 百度统计&谷歌统计
analytics:
  baidu: "ab2d808c5ec8e10d08db3396ec9ac2b9"
  google: