Updating…

gulp 壓縮和 PWA 支持

Gulp & PWA
Gulp

安裝 Gulp 和 Workbox

1
npm install --global gulp-cli

壓縮 HTML

1
2
npm install gulp-htmlclean --save-dev
npm install --save gulp-html-minifier-terser

壓縮 CSS

1
npm install gulp-clean-css --save-dev

壓縮 JavaScript

1
npm install gulp-terser --save-dev

gulp-uglify + gulp-babel

壓縮 pictures

1
npm install --save-dev [email protected]

創建 gulpfile.js 文件

創建 gulpfile.js 在 Hexo 根目錄

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
const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
const htmlmin = require('gulp-html-minifier-terser');
const htmlclean = require('gulp-htmlclean');
const imagemin = require('gulp-imagemin');
// gulp-terser (如果使用 gulp-terser,把下面的//去掉)
const terser = require('gulp-terser');

// babel
//const uglify = require('gulp-uglify');
//const babel = require('gulp-babel');

//pwa
//gulp.task('generate-service-worker', () => {
// return workbox.injectManifest({
// swSrc: './sw-template.js',
// swDest: './public/sw.js',
// globDirectory: './public',
// globPatterns: [
// "404.html","index.html","js/main.js","css/index.css"
// ],
// modifyURLPrefix: {
// "": "./"
// }
// });
//});

//minify js babel
//gulp.task('compress', () =>
// gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
// .pipe(babel({
// presets: ['@babel/preset-env']
// }))
// .pipe(uglify().on('error', function(e){
// console.log(e);
// }))
// .pipe(gulp.dest('./public'))
//);

// minify js - gulp-terser (如果使用 gulp-terser,把下面前面的//去掉)
gulp.task('compress', () =>
gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
.pipe(terser())
.pipe(gulp.dest('./public'))
)

//css
gulp.task('minify-css', () => {
return gulp.src('./public/**/*.css')
.pipe(cleanCSS({
compatibility: 'ie11'
}))
.pipe(gulp.dest('./public'));
});


// 壓縮 public 目錄內 html
gulp.task('minify-html', () => {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true, //清除 HTML 註釋
collapseWhitespace: true, //壓縮 HTML
collapseBooleanAttributes: true, //省略布爾屬性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true, //刪除所有空格作屬性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, //刪除 <script> 的 type="text/javascript"
removeStyleLinkTypeAttributes: true, //刪除 <style> 和 <link> 的 type="text/css"
minifyJS: true, //壓縮頁面 JS
minifyCSS: true, //壓縮頁面 CSS
minifyURLs: true
}))
.pipe(gulp.dest('./public'))
});

// 壓縮 public/uploads 目錄內圖片
gulp.task('minify-images', async () => {
gulp.src('./public/img/**/*.*')
.pipe(imagemin({
optimizationLevel: 5, //類型:Number 預設:3 取值範圍:0-7(優化等級)
progressive: true, //類型:Boolean 預設:false 無失真壓縮jpg圖片
interlaced: false, //類型:Boolean 預設:false 隔行掃描gif進行渲染
multipass: false, //類型:Boolean 預設:false 多次優化svg直到完全優化
}))
.pipe(gulp.dest('./public/img'));
});

// 執行 gulp 命令時執行的任務
gulp.task("default", async function() {gulp.parallel(
'compress','minify-html', 'minify-css', 'minify-images'
)});
PWA

文章頁面美化

Post Pages Beautified

轉載自: https://www.nesxc.com/post/yydd.html

新建 Styl 文件

ROOT\themes\butterfly\source\css\_page 目录新建 topimg.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
// 顶部图
#page-header, #page-header:before
background-color: transparent !important
background-image: unset !important

.top-img
height: 12.5rem
display: block
margin: -50px -40px 50px -40px
border-top-left-radius: inherit
border-top-right-radius: inherit
background-position: center center
-webkit-background-size: cover
-moz-background-size: cover
background-size: cover
background-repeat: no-repeat
transition: all 0.3s

.read-mode
display: none

@media screen and (max-width: 768px)
margin: -1.8rem -0.7rem 1.8rem -0.7rem

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

修改 post.pug

然后前往 ROOT\themes\butterfly\layout 目录,打开 post.pug

1
2
3
4
5
6
block content
#post
if top_img === false
include includes/header/post-info.pug
+ .top-img.gist(style=`background-image: url(${url_for(top_img)})`)
article#article-container.post-content!=page.content

注意事项

注意事项:
cover 图片请勿加入 (), 因为括号会破坏 css 结构。导致无法加载 cover。
如 /img/1 (1).webp。会加载不出来的。建议用 - 1 等方式替代括号。

更改加載動畫

Loading Animation

額外的標籤

Tag Plugin Plus

動畫效果

text

添加磁貼

Categories Magnet

版權美化

Copyright Beautify

微調合集

top left site title

首頁文章列表美化

Homepage article list animation effect

轉載自:https://guole.fun/posts/butterfly-custom/

feature
  1. 支持鼠标 hover 时,文章摘要淡入淡出
  2. 调整首页文章列表高度
  3. 调整首页文章标题字体字重
  4. 给文章摘要末尾动态添加 emoji 😄😄
tutorial

首先,修改首页 UI 样式,打开 /themes/butterfly/layout/includes/mixins/post-ui.pug,修改为如下内容,butterfly 3.8.2 版本可直接复制我的:

修改說明

注意缩进

移动.article-meta-wrap 整个内容到 a.article-title 同级邻近位置,方便给 article-titlecontent 增加一个.recent-post-info-top 父类。


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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
mixin postUI(posts)
each article , index in page.posts.data
.recent-post-item
- let link = article.link || article.path
- let title = article.title || _p('no_title')
- let leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius'
- let post_cover = article.cover
- let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
if post_cover && theme.cover.index_enable
.post_cover(class=leftOrRight)
a(href=url_for(link) title=title)
img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title)
.recent-post-info(class=no_cover)
.recent-post-info-top
a.article-title(href=url_for(link) title=title)= title

//- Display the article introduction on homepage
case theme.index_post_content.method
when false
- break
when 1
.content!= article.description
when 2
if article.description
.content!= article.description
else
- const content = strip_html(article.content)
- let expert = content.substring(0, theme.index_post_content.length)
- content.length > theme.index_post_content.length ? expert += ' ...' : ''
.content!= expert
default
- const content = strip_html(article.content)
- let expert = content.substring(0, theme.index_post_content.length)
- content.length > theme.index_post_content.length ? expert += ' ...' : ''
.content!= expert

.article-meta-wrap
if (is_home() && (article.top || article.sticky > 0))
span.article-meta
i.fas.fa-thumbtack.sticky
span.sticky= _p('sticky')
span.article-meta__separator |
if (theme.post_meta.page.date_type)
span.post-meta-date
if (theme.post_meta.page.date_type === 'both')
i.far.fa-calendar-alt
span.article-meta-label=_p('post.created')
time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))=date(article.date, config.date_format)
span.article-meta__separator |
i.fas.fa-history
span.article-meta-label=_p('post.updated')
time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated))=date(article.updated, config.date_format)
else
- let data_type_updated = theme.post_meta.page.date_type === 'updated'
- let date_type = data_type_updated ? 'updated' : 'date'
- let date_icon = data_type_updated ? 'fas fa-history' :'far fa-calendar-alt'
- let date_title = data_type_updated ? _p('post.updated') : _p('post.created')
i(class=date_icon)
span.article-meta-label=date_title
time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type]))=date(article[date_type], config.date_format)
if (theme.post_meta.page.categories && article.categories.data.length > 0)
span.article-meta
span.article-meta__separator |
i.fas.fa-inbox
each item, index in article.categories.data
a(href=url_for(item.path)).article-meta__categories #[=item.name]
if (index < article.categories.data.length - 1)
i.fas.fa-angle-right
if (theme.post_meta.page.tags && article.tags.data.length > 0)
span.article-meta.tags
span.article-meta__separator |
i.fas.fa-tag
each item, index in article.tags.data
a(href=url_for(item.path)).article-meta__tags #[=item.name]
if (index < article.tags.data.length - 1)
span.article-meta__link #[='•']

mixin countBlockInIndex
- needLoadCountJs = true
span.article-meta
span.article-meta__separator |
i.fas.fa-comments
if block
block
span.article-meta-label= ' ' + _p('card_post_count')

if theme.comments.card_post_count
case theme.comments.use[0]
when 'Disqus'
when 'Disqusjs'
+countBlockInIndex
a(href=full_url_for(link) + '#disqus_thread')
when 'Valine'
+countBlockInIndex
a(href=url_for(link) + '#post-comment' itemprop="discussionUrl")
span.valine-comment-count(data-xid=url_for(link) itemprop="commentCount")
when 'Waline'
+countBlockInIndex
a(href=url_for(link) + '#post-comment')
span.waline-comment-count(id=url_for(link))
when 'Twikoo'
+countBlockInIndex
a.twikoo-count(href=url_for(link) + '#post-comment')
when 'Facebook Comments'
+countBlockInIndex
a(href=url_for(link) + '#post-comment')
span.fb-comments-count(data-href=urlNoIndex(article.permalink))

if theme.ad && theme.ad.index
if (index + 1) % 3 == 0
.recent-post-item.ads-wrap!=theme.ad.index

修改首页布局样式,增加 hover 时动画等效果。为了移动端浏览体验,仅添加给 PC 端。打开 butterfly/themes/butterfly/source/css/_page/homepage.styl 文件,结尾处增加如下内容(顶格写,与#recent-posts 同级):


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
+minWidth768()
#recent-posts
.recent-post-item
height: 15em
& > .recent-post-info > .recent-post-info-top > .content
visibility: hidden
transition: .1s linear
line-height: 1.4
opacity: 0
&::after
content: ""
&:hover .recent-post-info > .recent-post-info-top > .content
visibility: visible
transition: .2s linear
line-height: 1.4
margin-top: 5px
margin-bottom: 20px
opacity: 1
&::after
content: " 😄😄"
&:hover .recent-post-info > .article-meta-wrap
transition: .2s linear
margin-top: 5px
color: rgba(133,133,133,0.70)

微调字体大小。在 homepage.styl 文件中,顶部 & > .recent-post-item 原内容下,增加以下内容:


1
2
3
4
5
6
7
8
9
10
11
12
  & > .recent-post-item
display: flex
flex-direction: row
align-items: center
height: 20em
border-radius: 12px 8px 8px 12px
background: var(--card-bg)
box-shadow: var(--card-box-shadow)
transition: all .3s
+ & > .recent-post-info > .recent-post-info-top > .article-title
+ font-size: 1.43em
+ font-weight: bold

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
#recent-posts
& > .recent-post-item:not(:first-child)
margin-top: 1rem

& > .recent-post-item
display: flex
flex-direction: row
align-items: center
height: 20em
border-radius: 12px 8px 8px 12px
background: var(--card-bg)
box-shadow: var(--card-box-shadow)
transition: all .2s
& > .recent-post-info > .recent-post-info-top > .article-title
font-size: 1.43em
font-weight: bold

+maxWidth768()
border-radius: 12px 12px 8px 8px

&:hover
box-shadow: var(--card-hover-box-shadow)

img.post_bg
transform: scale(1.1)

if hexo-config('cover.position') == 'both'
.left_radius
border-radius: 8px 0 0 8px

.right_radius
order: 2
border-radius: 0 8px 8px 0
else if hexo-config('cover.position') == 'left'
.left_radius
border-radius: 8px 0 0 8px

.right_radius
border-radius: 8px 0 0 8px
else if hexo-config('cover.position') == 'right'
.left_radius
order: 2
border-radius: 0 8px 8px 0

.right_radius
order: 2
border-radius: 0 8px 8px 0

&.ads-wrap
display: block !important
height: auto !important

.post_cover
overflow: hidden
width: 45%
height: 100%
-webkit-mask-image: -webkit-radial-gradient(white, black)

img.post_bg
width: 100%
height: 100%
transition: all .3s
object-fit: cover

&:hover
transform: scale(1.1)

& >.recent-post-info
display: inline-block
overflow: hidden
padding: 0 40px
width: 55%

&.no-cover
width: 100%

& > .recent-post-info-top > .article-title
@extend .limit-more-line
margin-bottom: .3rem
color: var(--text-highlight-color)
font-size: 1.43em
line-height: 1.4
transition: all .2s ease-in-out
-webkit-line-clamp: 2
font-weight: bold

&:hover
color: $text-hover

& > .article-meta-wrap
color: $theme-meta-color
font-size: 90%


& > .post-meta-date
cursor: default

.sticky
color: $sticky-color

i
margin: 0 .2rem 0 0

.article-meta-label
if hexo-config('post_meta.page.label')
padding-right: .2rem
else
display: none

.article-meta__separator
margin: 0 .3rem

.article-meta__link
margin: 0 .2rem

.fa-angle-right
margin: 0 .2rem

if hexo-config('post_meta.page.date_format') == 'relative'
time
display: none

a
color: $theme-meta-color

&:hover
color: $text-hover
text-decoration: underline

& > .recent-post-info-top > .content
@extend .limit-more-line
line-height: 1.4
margin-top: .3rem
-webkit-line-clamp: 3

+maxWidth768()
#recent-posts
.recent-post-item
flex-direction: column
height: auto !important

.post_cover
order: 1 !important
width: 100%
height: 230px
border-radius: 8px 8px 0 0

.recent-post-info
order: 2 !important
padding: 1rem 1rem 1.5rem
width: 100%

&.no-cover
padding: 1.5rem 1rem

&.recent-post-info-top > .article-title
font-size: 1.43em

&.recent-post-info-top > .content
height: auto

+minWidth768()
#recent-posts
.recent-post-item
height: 15em
& > .recent-post-info > .recent-post-info-top > .content
visibility: hidden
transition: .1s linear
line-height: 1.4
opacity: 0
&::after
content: ""
&:hover .recent-post-info > .recent-post-info-top > .content
visibility: visible
transition: .2s linear
line-height: 1.4
margin-top: 5px
margin-bottom: 20px
opacity: 1
&::after
content: " 😄😄"
&:hover .recent-post-info > .article-meta-wrap
transition: .2s linear
margin-top: 5px
color: rgba(133,133,133,0.70)

搭配这个效果,建议主题配置文件中,关闭首页的文章分类显示,效果更佳。


1
2
3
4
5
6
7
post_meta:
page: # Home Page
date_type: created # created or updated or both 主页文章日期是创建日或者更新日或都显示
date_format: relative # date/relative 显示日期还是相对日期
categories: false # true or false 主页是否显示分类
tags: true # true or false 主页是否显示标签
label: true # true or false 显示描述性文字

禁用 Internet Explorer

Block IE

轉載自: https://www.nesxc.com/post/noie.html

創建 kernel.js[Blogroot]/themes/butterfly/source/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
25
26
27
28
29
30
31
32
33
  function IEVersion() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if(isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var IEVersion;
IEVersion = parseFloat(RegExp["$1"]);
if (IEVersion == 7) {
return 7;
} else if(IEVersion == 8) {
return 8;
} else if(IEVersion == 9) {
return 9;
} else if(IEVersion == 10) {
return 10;
} else {
return 6;//IE版本<=7
}
} else if(isEdge) {
return 'edge';//edge
} else if(isIE11) {
return 11; //IE11
}else{
return -1;//不是ie浏览器
}
}
var isIE = IEVersion();
if (isIE == "6" || isIE == "7" || isIE == "8" || isIE == "9" || isIE == "10" || isIE == "11" ){//判断当前是否是IE浏览器
window.location = "/kernel.html";//如果是IE内核跳转至kernel.html
}

在主題配置文件中插入

1
2
3
4
inject:
head:
bottom:
+ - <script defer data-pjax src="/js/kernel.js"></script>

創建 kernel.html[Blogroot]/source/

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
<!DOCTYPE html>
<html>
<head>
<title>The kernel version is too low</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
height: 100%;
width: 100%;
background: #fefefe url(https://cdn.jsdelivr.net/gh/iMacyhs/[email protected]/assets/img/background.jpg)center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #2E2F30;
font-family: "Montserrat", sans-serif;
margin: 0;
}

footer {
position: absolute;
bottom: 1%;
width: 100%;
text-align: center;
font-size: .6em;
color: #fff
}

a {
color: #fff;
}

a:hover {
color: #d35400;
}

.dialog {
float:none;
text-align: center;
width: 75%;
margin: 40% auto 0;
}

h1 {
font-size: 3.5em;
color: #fff;
line-height: 1em;
}

p {
font-size: 1.4em;
color: #fff;
}

@media only screen and (max-width: 767px) {
.dialog {
width: 90%;
margin: 60% auto 0;
}
}
</style>
</head>

<body>
<div>
<div class="dialog">
<h1>Sorry, we stop service for you.</h1>
<p>You may be browsing our web pages using the IE kernel, but our webpage is not supported by IE kernel. We recommend that you use <a href="https://www.microsoft.com/en-us/edge">Microsoft Edge</a> to access.</p>
</div>
</div>
</body>
<footer><a href="https://www.istevec.com" target="_blank">Steve's Blog</a></footer>
</html>

編輯 [Blogroot]/_condig.yml

排除渲染

1
2
skip_render:
+ - kernel.html

首頁菜單

Home Menu

轉載自:https://paddylin.gitee.io/post/a510.html

  1. 創建 cover.css[blog]/themes/butterfly/source/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
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    .l_cover{min-height:56px}

    .cover-wrapper{
    top:0;
    left:0;
    max-width:100%;
    display:flex;
    flex-wrap:nowrap;
    flex-direction:column;
    align-items:center;
    align-self:center;
    align-content:center;
    color:#555;
    padding:0 16px;
    -moz-user-select:none;
    -ms-user-select:none;
    -webkit-user-select:none;
    user-select:none;
    position:relative;
    overflow:hidden;
    margin-bottom:-100px
    }
    .cover-wrapper .cover-backstretch,.cover-wrapper .cover-bg{
    position:absolute;
    width:100%;
    height:100%;
    background-position:center;
    background-size:cover
    }
    .cover-wrapper .cover-backstretch.lazyload:not(.loaded),.cover-wrapper .cover-bg.lazyload:not(.loaded){opacity:0}
    .cover-wrapper .cover-backstretch.lazyload.loaded,.cover-wrapper .cover-bg.lazyload.loaded{
    animation-delay:0s;
    animation-duration:.5s;
    animation-fill-mode:forwards;
    animation-timing-function:ease-out;
    animation-name:fadeIn
    }

    @-moz-keyframes fadeIn{
    0%{opacity:0;filter:blur(12px);transform:scale(1.02)}
    100%{opacity:1}
    }

    @-webkit-keyframes fadeIn{
    0%{opacity:0;filter:blur(12px);transform:scale(1.02)}
    100%{opacity:1}
    }

    @-o-keyframes fadeIn{
    0%{opacity:0;filter:blur(12px);transform:scale(1.02)}
    100%{opacity:1}
    }

    @keyframes fadeIn{
    0%{opacity:0;filter:blur(12px);transform:scale(1.02)}
    100%{opacity:1}
    }
    .cover-wrapper .cover-body{
    z-index:1;position:relative;
    height:30%;
    }
    .cover-wrapper#half{
    max-height:640px;
    min-height:400px;
    height:calc(36vh - 56px + 200px)
    }
    .cover-wrapper .cover-body{margin-top:56px;margin-bottom:100px;}
    .cover-wrapper .cover-body,.cover-wrapper .cover-body .bottom,.cover-wrapper .cover-body .top{display:flex;flex-direction:column;align-items:center;max-width:100%;}
    .cover-wrapper .cover-body .bottom{margin-top:32px}
    .cover-wrapper .list-h{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:stretch;
    border-radius:4px;
    -moz-user-select:none;
    -ms-user-select:none;
    -webkit-user-select:none;
    user-select:none
    }
    .cover-wrapper .list-h a{
    flex:1;
    display:flex;
    font-weight:600
    }
    .cover-wrapper .list-h a img{
    display:block;
    border-radius:2px;
    margin:4px;
    min-width:40px;
    max-width:44px
    }
    @media screen and (max-width:768px){
    .cover-wrapper .list-h a img{
    min-width:36px;
    max-width:40px
    }
    }
    @media screen and (max-width:500px){
    .cover-wrapper .list-h a img{
    margin:2px 4px;
    min-width:32px;
    max-width:36px
    }
    }
    @media screen and (max-width:375px){
    .cover-wrapper .list-h a img{min-width:28px;max-width:32px}}
    .cover-wrapper{max-width:100%}
    .cover-wrapper.search .bottom .menu{margin-top:16px}
    .cover-wrapper.search .bottom .menu .list-h a{
    white-space:nowrap;
    flex-direction:row;
    align-items:baseline;
    font-size:1rem;
    padding:2px;
    margin:4px;
    color:rgba(85,85,85,.75);
    text-shadow:0 1px 2px rgba(0,0,0,.05);
    border-bottom:2px solid transparent
    }
    @media screen and (max-width:500px){.cover-wrapper.search .bottom .menu .list-h a{margin:4px 12px}}
    .cover-wrapper.search .bottom .menu .list-h a i{margin-right:4px}
    .cover-wrapper.search .bottom .menu .list-h a p{font-size:1rem}
    .cover-wrapper.search .bottom .menu .list-h a.active,.cover-wrapper.search .bottom .menu .list-h a:active,.cover-wrapper.search .bottom .menu .list-h a:hover{color:#555;border-bottom:2px solid #555}
    .cover-wrapper.dock .menu,.cover-wrapper.featured .menu,.cover-wrapper.focus .menu{border-radius:6px}
    .cover-wrapper.dock .menu .list-h a,.cover-wrapper.featured .menu .list-h a,.cover-wrapper.focus .menu .list-h a{flex-direction:column;align-items:center;padding:12px;line-height:1px;border-radius:4px;border-bottom:none;text-align:center;align-content:flex-end;color:rgba(68,68,68,.7);font-size:1.5rem}
    @media screen and (max-width:500px){.cover-wrapper.dock .menu .list-h a,.cover-wrapper.featured .menu .list-h a,.cover-wrapper.focus .menu .list-h a{padding:12px 8px}}
    .cover-wrapper.dock .menu .list-h a i,.cover-wrapper.featured .menu .list-h a i,.cover-wrapper.focus .menu .list-h a i{margin:8px}
    .cover-wrapper.dock .menu .list-h a p,.cover-wrapper.featured .menu .list-h a p,.cover-wrapper.focus .menu .list-h a p{font-size:.875rem}
    .cover-wrapper.dock .menu .list-h a.active,.cover-wrapper.featured .menu .list-h a.active,.cover-wrapper.focus .menu .list-h a.active{backdrop-filter:none}
    .cover-wrapper.dock .menu .list-h a.active i,.cover-wrapper.dock .menu .list-h a.active i+p,.cover-wrapper.featured .menu .list-h a.active i,.cover-wrapper.featured .menu .list-h a.active i+p,.cover-wrapper.focus .menu .list-h a.active i,.cover-wrapper.focus .menu .list-h a.active i+p{color:#7c5246}
    .cover-wrapper.dock .menu .list-h a.active img+p,.cover-wrapper.featured .menu .list-h a.active img+p,.cover-wrapper.focus .menu .list-h a.active img+p{color:#444}.cover-wrapper.dock .menu .list-h a:hover,.cover-wrapper.featured .menu .list-h a:hover,.cover-wrapper.focus .menu .list-h a:hover{background:#fff}
    .cover-wrapper.dock .top{margin-bottom:48px}
    .cover-wrapper.dock .menu{background:rgba(255,255,255,.5);position:absolute;bottom:0;max-width:100%}
    .cover-wrapper.dock .menu .list-h{flex-wrap:nowrap;margin:4px}
    .cover-wrapper.dock .menu .list-h a+a{margin-left:4px}
    @media screen and (max-width:500px){
    .cover-wrapper.dock .menu .list-h{overflow-x:scroll}
    .cover-wrapper.dock .menu .list-h::-webkit-scrollbar{height:0;width:0}
    .cover-wrapper.dock .menu .list-h::-webkit-scrollbar-track-piece{background:0 0}
    .cover-wrapper.dock .menu .list-h::-webkit-scrollbar-thumb{background:#7c5246;cursor:pointer;border-radius:0}
    .cover-wrapper.dock .menu .list-h::-webkit-scrollbar-thumb:hover{background:#ff5722}}
    @supports (backdrop-filter:blur(20px)){
    .cover-wrapper.dock .menu{background:rgba(255,255,255,.5);backdrop-filter:saturate(200%) blur(20px)}}
    .cover-wrapper.featured .menu .list-h{margin:-2px}
    .cover-wrapper.featured .menu .list-h a{margin:2px;background:rgba(255,255,255,.5)}
    @supports (backdrop-filter:blur(20px)){
    .cover-wrapper.featured .menu .list-h a{background:rgba(255,255,255,.5);backdrop-filter:saturate(200%) blur(20px)}}
    .cover-wrapper.focus .menu{transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}
    .cover-wrapper.focus .menu .list-h{margin:2px}
    .cover-wrapper.focus .menu:hover{background:rgba(255,255,255,.5)}
    @supports (backdrop-filter:blur(20px)){
    .cover-wrapper.focus .menu:hover{background:rgba(255,255,255,.5);backdrop-filter:saturate(200%) blur(20px)}}
    .cover-wrapper.focus .menu .list-h a{margin:2px}
    .cover-wrapper.focus .menu .list-h a:hover{opacity:1;background:#fff}
  2. 插入 butterfly/_config.yml

    1
    - <link rel="stylesheet" href="/css/cover.css">
  3. 編輯 butterfly\layout\includes\header\index.pug

    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
    header#page-header(class=isHomeClass style=bg_img)
    !=partial('includes/header/nav', {}, {cache: true})
    if top_img !== false
    if is_post()
    include ./post-info.pug
    else if is_home()
    #site-info
    h1#site-title=site_title
    if theme.subtitle.enable
    - var loadSubJs = true
    #site-subtitle
    span#subtitle
    + #full.cover-wrapper.featured(style='')
    + .cover-backstretch
    + .cover-body
    + .bottom
    + .menu.navigation
    + .list-h
    + a#home.active(href='/', data-pjax-state='')
    + img.lazyload.placeholder.loaded(src='/img/home.png', srcset='/img/home.png', data-ll-status='loaded')
    + p Home
    + a#archives(href='/archives/', data-pjax-state='load')
    + img.lazyload.placeholder.loaded(src='/img/archive.png', srcset='/img/archive.png', data-ll-status='loaded')
    + p Archive
    + a#links(href='/links/', data-pjax-state='load')
    + img.lazyload.placeholder.loaded(src='/img/bookmark.png', srcset='/img/bookmark.png', data-ll-status='loaded')
    + p Friends
    + a#comments(href='/messages/', data-pjax-state='')
    + img.lazyload.placeholder.loaded(src='/img/chat.png', srcset='/img/chat.png', data-ll-status='loaded')
    + p Messages
    + a#about(href='/about/', data-pjax-state='load')
    + img.lazyload.placeholder.loaded(src='/img/about.png', srcset='/img/about.png', data-ll-status='loaded')
    + p About
    if(theme.social)
    #site_social_icons
    !=fragment_cache('social', function(){return partial('includes/header/social')})
    #scroll-down
    i.fas.fa-angle-down.scroll-down-effects
    else
    #page-site-info
    h1#site-title=site_title