安装

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: