Butterfly主题 一图流背景与顶部图修改

感谢作者: Android

原文章链接: https://android99.com/2021/08/10/butterfly-top-image-modify/

图片示例：

image-20240212233011216

主题配置

修改 Butterfly 的配置文件 _config.butterfly.yml。

编辑 index_img、background、footer_bg、mask.header 选项。
设置网站背景，将主页顶部图和页脚背景改为透明，移除顶部图的黑色半透遮罩。
(需要将示例地址替换为自己的图片地址。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Image (圖片設置)
# --------------------------------------

# The banner image of home page
index_img: transparent

# Beautify/Effect (美化/效果)
# --------------------------------------

# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: url(https://example.com/img/background.jpg)

# Footer Background
footer_bg: transparent

# Add mask to header or footer (为 header 或 footer 添加黑色半透遮罩)
mask:
  header: false

引入相关样式

新建一个文件，位于 source/css/modify.styl，并增加以下内容。
(此处只是举例，也可以使用已有的样式文件。)

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
@import 'nib'

// 顶部图
#page-header
  background: transparent !important

  &.post-bg, &.not-home-page
    height: 280px !important
  #post-info
    bottom: 40px !important
  #page-site-info
    top: 140px !important

  @media screen and (max-width: 768px)
    &.not-home-page
      height: 200px !important
    #post-info
      bottom: 10px !important
    #page-site-info
      top: 100px !important

.top-img
  height: 250px
  margin: -50px -40px 50px
  border-top-left-radius: inherit
  border-top-right-radius: inherit
  background-position: center center
  background-size: cover
  transition: all 0.3s

  @media screen and (max-width: 768px)
    height: 230px
    margin: -36px -14px 36px

  [data-theme='dark'] &
    filter: brightness(0.8)

// 页脚
#footer:before
  background-color: alpha(#FFF, .5)

  [data-theme='dark'] &
    background-color: alpha(#000, .5)

#footer-wrap, #footer-wrap a
  color: #111
  transition: unset

  [data-theme='dark'] &
    color: var(--light-grey)

修改 Butterfly 的配置文件 _config.butterfly.yml，在 inject.head 选项引入样式。

1
2
3
4
5
6
7
8
9
# other (其他)
# --------------------------------------

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href="/css/modify.css">

Hexo 会将 Stylus 渲染成 CSS 文件，所以此处应为 modify.css。

增加插件脚本

因为使用了 cheerio 来解析 HTML，所以需要先安装此依赖。

1
npm install cheerio

新建一个文件，位于 scripts/modify.js，并增加以下内容。
(此处只是举例，也可以使用已有的插件脚本文件。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
'use strict';
const { filter } = hexo.extend;
const cheerio = require('cheerio');

/**
 * 在页面插入新顶部图
 * @param {cheerio.Root} $ Root
 */
function insertTopImg($) {
    const header = $('#page-header');
    if (header.length === 0) return;
    const background = header.css('background-image');
    if (!background) return;
    $('#post, #page, #archive, #tag, #category').prepend(`<div class="top-img" style="background-image: ${background};"></div>`);
}

// 修改 HTML
filter.register('after_render:html', (str, data) => {
    const $ = cheerio.load(str, {
        decodeEntities: false
    });
    insertTopImg($);
    return $.html();
});

大功告成

👏 恭喜你完成了修改，可以使用以下命令进行预览。

Hexo中使用emoji表情

感谢作者：银河小徐

原文链接：https://blog.xaoxu.cn/archives/hexo-use-emoji

Hexo 开启欢乐的 emoji 之旅 💛

Hexo 默认的 markdown 渲染引擎不支持将 Github emoji 渲染到静态的 html 页面中，我们换一个支持 emoji 的引擎，再增加一个 emoji 插件即可.

安装

1
2
3
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save
npm install markdown-it-emoji --save

Tips：据说 hexo-renderer-markdown-it 的速度要比 Hexo 原装插件要快，而且功能更多

配置

完成插件安装后还需要修改 Hexo 站点配置文件 _config.yml（不是主题配置哦）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
## markdown 渲染引擎配置，默认是hexo-renderer-marked，这个插件渲染速度更快，且有新特性
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-footnote
    - markdown-it-sup
    - markdown-it-sub
    - markdown-it-abbr
    - markdown-it-emoji
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: false
    permalinkClass: header-anchor
    permalinkSymbol:

这里需要注意 render: 下的 html: 配置项，它的作用是控制 Markdown 渲染引擎是否转义文档中出现的 html 标签，默认为 false ，这里要设置为 true，否则回导致 渲染失败。

1
2
3
html: true # 不转义 HTML 内容，即允许 HTML
## OR
html: false # 转义 HTML，< > 尖括号会被转义成 < >等

plugins: 中的最后一项 - markdown-it-emoji 是手动添加的，官方 Github Wiki 中给出的配置不包含这一项，其他配置参照的 Github Wiki 中的默认配置，hexo-renderer-markdown-it 提供的其他新特性还没有一一尝试，暂时只想用它的 emoji 功能。✌

使用方法

输入对应的emoji编码就行了
例如：输入笑脸对应的 emoji 编码 😄 就可以得到 😄

Hexo+Butterfly主题设置背景透明度和字体

整理我自己在网上找的，后面手动改的参数，这里就不贴原文链接了，网上搜索到的都是千篇一律。

示例：

image-20240212234108761

新建css文件

引入css改变页面的样式，推荐在一个自己新建目录创建。有人选择在主题文件夹下找到css文件夹（\themes\Butterfly\source\css），这样系统升级可能会把自己的代码覆盖掉。本人是在Blog\CodeRain\source\css新建一个transpancy.css文件（文件名可以自取），修改最右边的数字改变透明度。

目录截图：

img

transpancy.css文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 文章页背景 */
.layout_post>#post {
    /* 以下代表透明度为0.7 可以自行修改*/
    background: rgba(255,255,255,.9);
}
 
/* 所有页面背景 */
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    /* 以下代表透明度为0.7 */
    background: rgba(255,255,255,.9);
}
/*侧边卡片的透明度 */
:root {
  --card-bg: rgba(255, 255, 255, .9);
}
/* 页脚透明 */
#footer {
	/* 以下代表透明度为0.7 */
	background: rgba(255,255,255, .9);
}

引入css 文件

在主题配置文件_config.yml引入css文件,全局检索inject,在以下head位置插入字段

位置图片：

img

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

排查过程（页脚为例）

浏览器页面打开

img

浏览器调试

img

去主题下面css文件夹下修改文件，此外发现仍有阴影，记得去（我本地设置）_config.butterfly.yml配置文件中将footer_bg: false

img

如上目录下把这个背景色注释掉发现问题解决（粗暴有侵入，所以另外引入CSS）

img

使用remixicon 第三方图标

使用cdn的方法

1
2
3
4
5
6
直接在项目中引入cdn ：
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet">
引入Remix Icon图标库后，就可以在web项目中使用了，只要在使用图标的时候将图标名称作为类名就可以了。类名规则：ri-{name}-{style}
案例
<i class="ri-admin-line"></i> <i class="ri-admin-fill"></i>
-->

butterfly使用方法

1
remixicon ri-admin-line