创建menu

创建分类

1
2
3
4
5
6
7
8
hexo new page archives #时间轴
hexo new page tags #标签
hexo new page categories #分类
hexo new page music #音乐
hexo new page Gallery #照片
hexo new page movies #电影
hexo new page link #友链
hexo new page about #关于

_config.butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  清单||fa fa-heartbeat:
    音乐: /music/ || fas fa-music
    照片: /Gallery/ || fas fa-images
    电影: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

代码高亮显示

_config.butterfly.yml

1
highlight_theme: light

主页文章节选

选项

  1. description： 只显示description
  2. both： 优先选择description，如果没有配置description，则显示自动节选的内容
  3. auto_excerpt：只显示自动节选
  4. false： 不显示文章内容

_config.butterfly.yml

1
2
3
index_post_content:
  method: 2
  length: 500 # if you set method to 2 or 3, the length need to config

description 在 front-matter中添加

文章顶部图

如果不显示顶部图，_config.butterfly.yml 中 disable_top_img：true

配置中的其他值

文章 front-matter 中 配置top_img

配置中的值

1
2
3
4
top_img: false # 不显示图片
top_img: orange # 显示颜色
top_img: 'linear-gradient(20deg, #0062be, #925696, #cc426e, #fb0347)' # 显示渐变色
top_img: img链接 # 显示图片，这个图片的路径是从根目录拼接的，如果要放在本地，就要放在主题的配置静态资源中，使用图床解决

文章置顶

直接在文章的front-matter区域里添加sticky: 1属性来把这篇文章置顶。数值越大，置顶的优先级越大。

文章封面

文章的markdown文档上,在Front-matter添加cover,并填上要显示的图片地址

配置默认的cover

1
2
3
4
5
6
7
8
9
10
11
12
13
cover:
  # 是否显示文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 封面显示的位置
  # 三个值可配置 left , right , both
  position: both
  # 当没有设置cover时，默认的封面显示
  default_cover:
  - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
  - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg2.png
  - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg3.png

使用本地图片

在source 创建一个resources 存放静态资源，应用路径/resources/img’name.jsp

文章推送

主题配置文件

1
2
3
4
related_post:
  enable: true
  limit: 6 # 显示推荐文章数目
  date_type: created # or created or updated 文章日期显示创建日或者更新日

文章分页按钮

false 不显示

1
2
3
4
5
6
7
# post_pagination (分页)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: false

头像设置

头像保存在source/resources目录下

1
2
3
avatar:
  img: /resources/avatar.jpg
  effect: true # 是否旋转

复制相关配置

关闭 复制有版权信息

1
2
3
4
5
copy:
  enable: true
  copyright:
    enable: false
    limit_count: 50

Footer 配置

博客年份

1
2
3
4
footer:
  owner:
    enable: true
    since: 2022

页脚自定义文本

1
2
3
4
5
footer:
  owner:
    enable: true
    since: 2022
  custom_text: 我来到、我看见、我记录！

侧边栏配置

访问人数 busanzi

1
2
3
4
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

运行时间

1
2
3
4
5
6
runtimeshow:
  enable: true
  publish_date: 2/5/2022 00:00:00  
  ##网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间

显示最新评论

1
2
3
4
5
6
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6	# 显示条数
  storage: 10 # 缓存刷新时间/min
  avatar: true # 是否显示头像

评论配置

1
2
3
4
5
6
7
8
9
10
11
comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
  use: Valine,Disqus # 使用的评论系统
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: true # 评论懒加载
  count: true # Display comment count in top_img
  card_post_count: false # Display comment count in Home Page

网站美化

网站背景

1
background: url(/resources/sys/bg_img.jpg)

页脚背景

1
footer_bg: /resources/sys/footer.jpg

打字效果

1
2
3
4
5
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)
  mobile: false

背景彩带特效

1
2
3
4
5
6
7
canvas_ribbon:
  enable: true
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

鼠标点击烟花特效

1
2
3
4
fireworks:
  enable: true
  zIndex: 9999 # -1 or 9999
  mobile: false

字数统计

安装hexo-wordcount

1
cnpm install hexo-wordcount --save

配置主题文件

1
2
3
4
5
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

本地搜索

安装 hexo-generator-search

1
npm install hexo-generator-search --save

_config.yaml 中配置

1
2
3
4
search:
  path: search.xml
  field: post
  content: true

主题配置文件

1
2
local_search:
  enable: false