配置主题

修改鼠标样式

进入/themes/butterfly/source/css/目录

新建mouse.css文件，写入：

1
2
3
4
5
6
7
8
9
body {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),
        default;
}
a,
img {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),
        default;
}

进入/themes/butterfly/目录

在_config.yml文件中，Inject处的head:项中添加

1
- <link rel="stylesheet" href="/css/mouse.css">

即可。

为Hexo拓展社交图标

以Butterfly主题为例

Hexo Butterfly本身使用Font Awesome库中的图标，但其中不包括中国大陆许多应用，如B站，知乎等等。

链接：Font Awesome图标库

使用方法：直接在social: 列表中添加，冒号前为“class“属性值，冒号后为跳转链接，**||**后为。参考案例

1
2
3
4
5
6
7
8
# social settings (社交圖標設置)
# formal:
#   icon: link || the description
social:
   fab fa-github: https://github.com/XXX || Github
   fab fa-qq: tencent://message/?uin=XXX||QQ
   iconfont icon-zhihu-circle-fill: https://www.zhihu.com/people/XXX||知乎
   fa fa-envelope: mailto:XXX@outlook.com || Email

因此我们可以使用**阿里iconfont图标**，为我们Butterfly主题拓展一些国内常用的社交图标。

使用方法：

  1. 首先进入官网注册，登录；

  2. 搜索找到自己需要的图标后（以知乎为例），点击添加到购物车（鼠标放在图标上会有一个购物车图标）；

  3. 再点击主页右上角的购物车图标，可以看到自己选的图标，然后点击“添加至项目”（没有项目就新建一个）；

  4. 在主页上方点击“资源管理”进入我的项目中；

  5. 点击“下载到本地”；

  6. 将下载好的文件发送到/themes/butterfly/source/css/目录下，解压，修改文件夹名为iconfont（压缩包里的文件都放在这个文件夹里）；

  7. 进入/themes/butterfly/目录下，修改_config.yml文件中的Inject项（使用__config.butterfly.yml配置文件的同学直接修改这个文件就行）

    1
    2
    3
    4
    5
    6
    7
    8
    # Inject
    # Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
    # 插入代码到头部 </head> 之前 和 底部 </body> 之前
    inject:
      head:
        # - <link rel="stylesheet" href="/xxx.css">
      bottom:
        # - <script src="xxxx"></script>

    在head:处添加引用我们下载好的文件（注意换行和空格！）

    1
    - <link rel="stylesheet" href="/css/iconfont/iconfont.css">

    可以直接复制下方代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Inject
    # Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
    # 插入代码到头部 </head> 之前 和 底部 </body> 之前
    inject:
      head:
        - <link rel="stylesheet" href="/css/iconfont/iconfont.css">
      bottom:
        # - <script src="xxxx"></script>

  8. 最后，再修改同一文件中的social settings (社交圖標設置)项

    1
    2
    3
    4
    5
    6
    # social settings (社交圖標設置)
    # formal:
    #   icon: link || the description
    social:
      # fab fa-github: https://github.com/xxxxx || Github
      # fas fa-envelope: mailto:xxxxxx@gmail.com || Email

    这里我放出我自己的配置

    1
    2
    3
    4
    5
    # social settings (社交圖標設置)
    # formal:
    #   icon: link || the description
    social:
        iconfont icon-zhihu-circle-fill: https://www.zhihu.com/people/ashbell||知乎

    social:处的iconfont为我们解压文件中的iconfont.css中的文件名，icon-zhihu-circle-fill为我们需要用的知乎的图标名，冒号后面内容前面也提过。

  9. 完成上述部分就实现了Hexo Butterfly的图标拓展

有强迫症的同学可能和我一样，发现自己添加的图标不会像主题自带的其它图标一样，当鼠标放在图标上时会有翻转的效果。那么如何能够实现这种翻转呢？

我们只需要修改iconfont.css文件中的.iconfont{}

​ 原内容

1
2
3
4
5
6
7
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

​ 修改后

1
2
3
4
5
6
7
8
9
10
11
12
.iconfont {
    font-family: "iconfont" !important;
    font-size: 22px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    font-variant: normal;
    display: var(--fa-display,inline-block);
    line-height: 1;
    text-rendering: auto;
}

​ 修改完毕后重载一下Hexo即可。

插件篇

hexo-admonition

Hexo 内容辅助插件，支持将类似 reStructuredText 的警告提示块添加到 Markdown 文档中。例如 note、warning、error 等提示块。

Hexo-admonition 插件使用示例

这是基于 hexo-admonition 插件渲染的一条提示信息。类型为 note，并设置了自定义标题。

提示内容开头留 4 个空格，可以有多行，最后用空行结束此标记。

1
2
!!! info 这是一个info示例
    我是一段演示文本。

hexo-auto-excerpt

自动添加tag

使用方法：

手动加入<!-- more -->tag。

1
2
3
4
5
title: Hexo Butterfly主题美化
date:
  2022-7-13
tags:
  - <!-- more -->

Hexo-all-minifier

压缩css、js、html和images的插件。

hexo-blog-encrypt

加密文章的插件。

hexo-bilibili-bangumi

hexo 番剧页面插件，可选数据源：Bilibili, Bangumi

hexo-blogroll

展示你最喜欢的几个博客的最新的几篇文章。

1
npm install hexo-blogroll --save

使用方法

  1. 创建 blogroll.json 文件并放入source/_data目录
1
2
3
4
5
6
7
8
9
10
11
12
{
    "blogs": [
        {
            "title": "Another blog",
            "feed": "https://another.blog/feed"
        },
        {
            "title": "Yet another blog",
            "feed": "https://yet.another.blog./feed"
        }
    ]
}
  1. 创建Blogroll页面
1
2
3
4
5
6
---
title: Blogroll
date: 2022-12-18 23:24:32
---

{% blogroll 5 %}

hexo-github-calendar

在博客中插入一个类似GitHub的活动日历。

1
npm i hexo-githubcalendar --save

在本目录_config.yml文件中添加（注意不是主题配置文件）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# github活动日历
githubcalendar:
  enable: true
  enable_page: /
  user: Asucanyh-cn
  layout:
    type: id
    name: recent-posts
    index: 0
  githubcalendar_html: '<div class="recent-post-item" style="width:100%;height:auto;padding:10px;"><div id="github_loading" style="width:10%;height:100%;margin:0 auto;display: block"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="#d0d0d0" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg></div><div id="github_container"></div></div>'
  pc_minheight: 280px
  mobile_minheight: 0px
  color: "['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']"
  api: xxx
  calendar_js: https://cdn.jsdelivr.net/gh/Zfour/hexo-github-calendar@1.21/hexo_githubcalendar.js
  plus_style: ""

公共api被墙了，需要自己搭建api。

hexo-generator-feed

为hexo部署一个信息源页

hexo-algoliasearch

algolias搜索引擎，搭配教程使用。

1
npm install hexo-algoliasearch --save

hexo-url-submission

自动提交链接至搜索引擎，用于提高被收录的效率。

hexo-generator-sitemap

生成网站地图

1
npm install hexo-generator-sitemap --save

配置_config.yml

1
2
3
4
5
6
7
8
9
sitemap:
  path: 
    - sitemap.xml
    - sitemap.txt
  template: ./sitemap_template.xml
  template_txt: ./sitemap_template.txt
  rel: false
  tags: true
  categories: true

排除页面

1
2
3
4
5
---
title: lorem ipsum
date: 2020-01-02
sitemap: false
---

hexo-image-cloudflare

使用Cloudflare去缓存图片

1
npm i hexo-image-cloudflare

hexo-steam-games

获取steam游戏库

参考