本文基于原文作者 MeuiCat 声明的 CC BY-NC-ND 4.0 许可证,以署名、非商业、不演绎的方式完整转载自其 博客

引用 CSS

  • 先你需要在[blogRoot]/source/css 里面添加一个 css 名字随意
    (需要注意的是不能放在 [blogRoot]/themes/butterfly/source/css 里面 否则可能出现 bug)
  • 列如:[blogRoot]/source/css/icat.css
  • 再修改主题配置文件,按照下面引入 (一定是 head,否则可能出现短暂无 CSS)
1
2
3
4
5
6
inject:
head:
- <link rel="stylesheet" href="/css/icat.css">
- ...
bottom:
- ...

引用 JS

  • 首先你需要在 [blogRoot]/source/js 里面添加一个 js 名字随意
    (需要注意的是不能放在 [blogRoot]/themes/butterfly/source/js 里面 否则可能出现 bug)
  • 列如:[blogRoot]/source/js/icat.js
  • 再修改主题配置文件,按照下面引入 (一定是 bottom 否则可能出现 dom 不完全导致 js 报错)

魔改页前置

本小节为 ✨ 第四章 | 魔改教程 的页面魔改顶部 banner 教程内容

创建数据

  • 创建 [blogRoot]/themes/butterfly/layout/includes/page/icat_change.pug 文件,并新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
- var pageBackground = 'background: url(' + page.top_bg + ') left 28% / cover no-repeat;'

#icat_page
.icat-content.icat-content-item.icatPage.single(style=pageBackground)
.icat-card-content
.icat-content-item-tips= page.top_item || _p('Hallo iCat!')
span.icat-content-item-title= page.top_title || page.title || _p('MeuiCat')
.icat-content-bottom
.icat-tips= page.top_tips || page.description || _p(' 有肉有猫有生活.')

- if (typeof page.top_link !== 'undefined' && page.top_link && page.top_link.trim().length > 0)
if (page.top_link.startsWith('/'))
- var pageLink = '' + page.top_link + ''
else if (!page.top_link.startsWith('http') && !page.top_link.startsWith('https'))
- var pageLink = 'https://' + page.top_link + ''
else
- var pageLink = '' + page.top_link + ''
.icat-change-button-group
a.icat-change-button(href=pageLink)
i.iconfont.icat-go-right(style='font-size: .9rem')
span.icat-change-button-text= page.top_text || _p(' 关于本页 ')
  • 修改 [blogRoot]/themes/butterfly/layout/page.pug 页面里的内容

    ( + 号直接删除 即是正常缩进)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
extends includes/layout.pug

block content
#page
- if top_img === false
- h1.page-title= page.title
+ if page.top_page && page.top_page === true
+ include includes/page/icat_change.pug
+ else
+ if top_img === false
+ h1.page-title= page.title

case page.type
when 'tags'
  • 在自建的 CSS 文件 [blogRoot]/source/css/icat.css 里新增以下内容
    CSS
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
#page:has(#icat_page) {
border: 0;
box-shadow: none !important;
padding: 0 !important;
background: transparent !important;
}
#web_bg ~ .page:has(#icat_page) {
background: var(--card-bg);
}
/* page 背景调整 */

.icat-content.icat-content-item.icatPage {
height: 19rem;
color: var(--icat-white);
overflow: hidden;
margin-top: 0;
border-radius: 12px;
border: var(--style-border-always);
box-shadow: var(--icat-shadow-border);
}
.icat-content-item .icat-card-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 1rem 2rem;
}
.icat-content-item .icat-content-item-tips {
opacity: .8;
font-size: .6rem;
margin-bottom: .5rem;
}
.icat-content-item .icat-card-content .icat-content-item-title {
margin-bottom: .5rem;
}
.icat-content-item .icat-content-item-title {
font-size: 36px;
font-weight: bold;
line-height: 1;
}
.icat-content-item .icat-content-bottom {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.icat-content-item .icat-content-bottom .icat-tips {
font-weight: bold;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
.icat-content-item .icat-card-content .icat-change-button-group .icat-change-button {
height: 40px;
width: auto;
padding: 0 22px;
border-radius: 20px;
justify-content: center;
background: var(--icat-white);
color: var(--icat-black);
display: flex;
align-items: center;
transition: .3s;
cursor: pointer;
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: blur(20px);
transform: translateZ(0);
box-shadow: 0 8px 16px -4px var(--icat-black-op);
}
.icat-content-item .icat-card-content .icat-change-button-group .icat-change-button i {
margin-right: 4px;
font-weight: bold;
}
#page:has(#icat_page) .icat-content-item .icat-card-content .icat-change-button-group .icat-change-button:hover {
background: var(--icat-blue);
color: var(--icat-white);
}

@media screen and (max-width: 768px) {
.icat-content-item .icat-card-content {
padding: 1rem 1rem;
}
.icat-content-item .icat-card-content .icat-change-button-group .icat-change-button {
width: 60px;
}
.icat-content-item .icat-card-content .icat-change-button-group .icat-change-button i {
margin-right: -3px;
}
.icat-content-item .icat-card-content .icat-change-button-group .icat-change-button-text {
display: none;
}
}
/* 响应式 */

/* icat-page 顶部样式 */

使用参数

  • Page Front-matter 内加 top_page 并配置为 true 即可
1
2
3
4
5
6
7
8
9
10
11
12
13
---
···

top_page: true
top_bg: https://s11.ax1x.com/2023/05/02/p9GRHqe.jpg
top_item: 测试
top_title: 测试页面
top_tips: 热烈 且自由
top_link: meuicat.com
top_text: 关于本页
---

<!-- 页面内容 -->
参数描述优先级默认值
top_pagebanner 栏开关选填默认关闭;此项为是否显示 banner 顶部栏 的开关,如不配置此项就不显示(不需要新增配置为 false,默认是关闭的),如需启用请新增配置并将 top_page 配置为 true
top_bgbanner 栏背景图必填此项为 banner 顶部栏 的背景图,没有优先级,所以如果使用 banner 顶部栏就 必填;链接形式即可
top_itembanner 栏类名选填默认显示为:Hallo iCat!;可新增配置项设置你需要的内容(优先级最高)
top_titlebanner 栏标题选填按优先级默认显示顺序为:你所创建的页面标题 - MeuiCat; 可新增配置项设置你需要的内容(优先级最高)
top_tipsbanner 栏描述选填按优先级默认显示顺序为:你所创建的页面 description 描述 - 有肉有猫有生活.;可新增配置项设置你需要的内容(优先级最高)
top_linkbanner 栏按钮链接选填默认关闭;此项为是否显示 banner 顶部栏 右下角的按钮块,如不配置此项就不显示(不需要新增配置为 false,默认是关闭的),如需启用请新增配置并将 top_link 配置为你想要的链接内容,如 /essay/ meuicat.com https://meuicat.com/ 的链接即可
top_textbanner 栏钮文本选填右下角按钮上的文字;默认显示为:关于本页;可新增配置项设置你需要的内容(优先级最高)