本文基于原文作者 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 栏钮文本选填右下角按钮上的文字；默认显示为：关于本页；可新增配置项设置你需要的内容（优先级最高）