循环动态显示文字

可设置主页中展示的网站副标题或者自己喜欢的座右铭

修改主题配置文件_config.butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Site
title: Hexo
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） http://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  # source: 3
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:
    - 我双手合十的愿望里永远有你。
    - 穿越人海，只为与你相拥。
    - 手握日月摘 ♥ 悦。

侧边栏设置

修改主题配置文件_config.butterfly.yml，搜索aside

带有card_前缀的是显示在网页右边的那一竖列的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
# aside (側邊欄)
# --------------------------------------

aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: right # left or right
  display:
    archive: true
    tag: true
    category: true
  card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/hellodqy
  card_announcement:
    enable: true
    content: DQY & WY
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
    sort: date # date or updated
    sort_order: # Don't modify the setting unless you know how it works
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
    sort_order: # Don't modify the setting unless you know how it works
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
    orderby: random # Order of tags, random/name/length
    order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending
    sort_order: # Don't modify the setting unless you know how it works
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
    sort_order: # Don't modify the setting unless you know how it works
  card_webinfo:
    enable: true
    post_count: true
    last_push_date: true
    sort_order: # Don't modify the setting unless you know how it works

首页文章数目

首页显示的文章数目在Blog根目录下的系统配置文件修改，打开_config.yml搜索index_generator

per_page可以修改显示的文章数目

1
2
3
4
5
6
7
8
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 5
  order_by: -date

访问人数

修改主题配置文件_config.butterfly.yml，搜索busuanzi

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

运行时间

修改主题配置文件_config.butterfly.yml，搜索runtimeshow

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

字数统计

进入Blog根目录并执行

1
npm install hexo-wordcount —save or yarn add hexo-wordcount

修改主题配置文件_config.butterfly.yml，搜索wordcount

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

导航菜单

修改主题配置文件_config.butterfly.yml，去掉前面的井号就是启用该选项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
menu:
  首页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  摸鱼||fas fa-fish:
    游戏: /moyu/ || fas fa-gamepad
    工具: /tools/ || fas fa-tools
  蓝桥: /lanqiao/ || fas fa-folder-open
  标签: /tags/ || fas fa-tags
  # 分类: /categories/ ||
  # List||fas fa-list:
  #   Music: /music/ || fas fa-music
  #   Movie: /movies/ || fas fa-video
  友人帐: /link/ || fas fa-link
  关于我: /about/ || fas fa-heart

关键页面生成

博客有一些关键页面需要手动生成。

标签页

进入Blog根目录cmd执行

1
hexo new page tags

打开 source/tags/index.md 文件，修改如下

1
2
3
4
5
---
title: 标签
date: 2022-03-11 12:53:45
type: "tags"
---

分类页

进入Blog根目录cmd执行

1
hexo new page categories

打开source/categories/index.md文件，修改如下

1
2
3
4
5
---
title: 分类
date: 2022-03-11 12:56:06
type: "categories"
---

背景图片参考

  1. https://wallhaven.cc/
  2. https://wall.alphacoders.com/
  3. https://bz.zzzmh.cn/index

网站美化：http://haiyong.site/post/22e1d5da.html

背景图设置

顶部图

配置 含义
index_img 主页的 top_img
default_top_img 默认的 top_img，当页面的 top_img 没有配置时，会显示 default_top_img
archive_img 归档页面的 top_img
tag_img tag 子页面 的 默认 top_img
tag_per_img tag 子页面的 top_img，可配置每个 tag 的 top_img
category_img category 子页面 的 默认 top_img
category_per_img category 子页面的 top_img，可配置每个 category 的 top_img

修改主题配置文件_config.butterfly.yml

ctrl+f直接搜索index_img

1
index_img: 图片链接(例如: https://s1.ax1x.com/2023/04/25/p9uqhKU.jpg)

tag_per_img 和 category_per_img 是 3.2.0 新增的内容，可对 tag 和 category 进行单独的配置

并不推荐为每个 tag 和每个 category 都配置不同的顶部图，因为配置太多会拖慢生成速度

footer背景

修改主题配置文件_config.butterfly.yml

1
2
# footer是否显示图片背景(与 top_img一致)
footer_bg: true

背景图

打开主题配置文件的_config.yml搜索background，修改background后面的链接即可

注意：链接一定要用url()括起来！！！如果用纯色的话，色号要用单引号括起来，例如：’#add2c2’

打字效果

修改主题配置文件_config.butterfly.yml，搜索activate-power-mode

1
2
3
4
5
6
7
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)
  mobile: false

鼠标点击效果

修改主题配置文件_config.butterfly.yml

  1. 烟花，搜索fireworks

    zIndex：-1表示烟火效果在底部；9999表示效果在前面

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

  2. 爱心，搜索click_heart

    1
    2
    3
    4
    # 点击出現爱心
    click_heart:
      enable: true
      mobile: false

  3. 搜索ClickShowText

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # 点击出现文字，文字可自行修改
    ClickShowText:
      enable: false
      text:
        - I
        - LOVE
        - YOU
      fontSize: 15px
      random: false # 文字随机显示
      mobile: false

打赏

修改主题配置文件_config.butterfly.yml，搜索reward，注意将照片修改为自己的收款码

1
2
3
4
5
6
7
8
9
10
# Sponsor/reward
reward:
  enable: true
  QR_code:
     - img: /img/wechat.jpg
       link:
       text: 微信
     - img: /img/alipay.jpg
       link:
       text: 支付宝

修改代码高度

代码过长默认全部显示影响美观，需要设置高度限制

打开主题配置文件_config.butterfly.yml，搜索highlight，将false改为300(大概就是显示12行代码，超过12行会被折叠起来)

实现效果