Butterfly Beautified Notes (Still Updating)
Updating…
gulp 壓縮和 PWA 支持
Gulp & PWA
Gulp
安裝 Gulp 和 Workbox
1 | npm install --global gulp-cli |
壓縮 HTML
1 | npm install gulp-htmlclean --save-dev |
壓縮 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 | const gulp = require('gulp'); |
文章頁面美化
Post Pages Beautified
轉載自: https://www.nesxc.com/post/yydd.html
新建 Styl 文件
在 ROOT\themes\butterfly\source\css\_page
目录新建 topimg.styl
1 | // 顶部图 |
修改 post.pug
然后前往 ROOT\themes\butterfly\layout
目录,打开 post.pug。
1 | block content |
注意事项
注意事项:
cover 图片请勿加入 (), 因为括号会破坏 css 结构。导致无法加载 cover。
如 /img/1 (1).webp。会加载不出来的。建议用 - 1 等方式替代括号。
更改加載動畫
Loading Animation
額外的標籤
Tag Plugin Plus
動畫效果
添加磁貼
Categories Magnet
版權美化
Copyright Beautify
微調合集
top left site title
首頁文章列表美化
Homepage article list animation effect
轉載自:https://guole.fun/posts/butterfly-custom/
feature
- 支持鼠标 hover 时,文章摘要淡入淡出
- 调整首页文章列表高度
- 调整首页文章标题字体字重
- 给文章摘要末尾动态添加 emoji 😄😄
tutorial
首先,修改首页 UI 样式,打开 /themes/butterfly/layout/includes/mixins/post-ui.pug
,修改为如下内容,butterfly 3.8.2
版本可直接复制我的:
注意缩进 移动 修改說明
.article-meta-wrap
整个内容到 a.article-title
同级邻近位置,方便给 article-title
和 content
增加一个.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
111mixin 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 | +minWidth768() |
微调字体大小。在 homepage.styl
文件中,顶部 & > .recent-post-item
原内容下,增加以下内容:
1 | & > .recent-post-item |
1 | #recent-posts |
搭配这个效果,建议主题配置文件中,关闭首页的文章分类显示,效果更佳。
1 | post_meta: |
禁用 Internet Explorer
Block IE
轉載自: https://www.nesxc.com/post/noie.html
創建 kernel.js
在 [Blogroot]/themes/butterfly/source/js/
寫入下面內容:
1 | function IEVersion() { |
在主題配置文件中插入
1 | inject: |
創建 kernel.html
在 [Blogroot]/source/
1 |
|
編輯 [Blogroot]/_condig.yml
排除渲染
1 | skip_render: |
首頁菜單
Home Menu
轉載自:https://paddylin.gitee.io/post/a510.html
創建
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}插入
butterfly/_config.yml
1
- <link rel="stylesheet" href="/css/cover.css">
編輯
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
41header#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