📖 本教程更新于 2023 年 06 月 12 日
引用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报错）
1
2
3
4
5
6
| inject:
head:
- ...
bottom:
- <script async data-pjax src="/js/icat.js"></script>
- ...
|
魔改页前置
本小节为 ✨ 第四章 | 魔改教程 的页面魔改顶部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 里新增以下内容
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
| #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);
}
.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;
}
}
|
使用参数
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://s1.ax1x.com/2023/05/02/p9GRHqe.jpg
top_item: 测试
top_title: 测试页面
top_tips: 热烈 且自由
top_link: meuicat.com
top_text: 关于本页
---
<!-- 页面内容 -->
|
| 参数 | 描述 | 优先级 | 默认值 |
|---|
| top_page | banner栏 开关 | 选填 | 默认关闭；此项为是否显示 banner顶部栏 的开关，如不配置此项就不显示（不需要新增配置为false，默认是关闭的），如需启用请新增配置并将 top_page 配置为 true |
| top_bg | banner栏 背景图 | 必填 | 此项为 banner顶部栏 的背景图，没有优先级，所以如果使用banner顶部栏就必填；链接形式即可 |
| top_item | banner栏 类名 | 选填 | 默认显示为：Hallo iCat！；可新增配置项设置你需要的内容（优先级最高） |
| top_title | banner栏 标题 | 选填 | 按优先级默认显示顺序为：你所创建的页面标题 - MeuiCat； 可新增配置项设置你需要的内容（优先级最高） |
| top_tips | banner栏 描述 | 选填 | 按优先级默认显示顺序为：你所创建的页面description描述 - 有肉有猫有生活.；可新增配置项设置你需要的内容（优先级最高） |
| top_link | banner栏 按钮链接 | 选填 | 默认关闭；此项为是否显示 banner顶部栏 右下角的按钮块，如不配置此项就不显示（不需要新增配置为false，默认是关闭的），如需启用请新增配置并将 top_link 配置为你想要的链接内容，如 /essay/ meuicat.com https://meuicat.com/ 的链接即可 |
| top_text | banner栏 按钮文本 | 选填 | 右下角按钮上的文字；默认显示为：关于本页；可新增配置项设置你需要的内容（优先级最高） |
微信
