biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-16 20:30:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

Breaking Change

Browse Source 
1. 不再支持hexo 4.0.0以下版本
2. 添加hexo fragment_cache,加快生成速度
3. 完善V5圖標顯示，不再需要同時加載V4和v5圖標
4. 去除cheerio依賴
5. 整合豆瓣配置，增加配置遊戲，圖書頁面top_img,可設置是否設置meta,解決部分瀏覽器無法顯示圖片問題
6. 友情鏈接除列表外可自定義內容
7. 可設置主頁標題距離頂部距離
8. 側邊欄可隱藏,可設置手機頁面是否隱藏
9. 增加disqusjs和utterances 兩個評論
10. 主頁文章增加tags和更新日期顯示，可以配置post_meta
11. 首頁subtitle可關閉打字效果，可設置打字效果顯示一次或loop
12. 增加valine和gitalk的配置
13. darkmode配置整理
14. 增加404頁面
15. post_beautify改為beautify，頁面美化不再只限於post頁，page頁也一樣
16. 可設置是否顯示cover，可設置各位置的cover顯示
17. 增加mermaid,可畫流程圖、狀態圖、時序圖、甘特圖等等
18. 增加pangu配置，中英文之間添加空格
19. 整合部分配置
20. post-copyright增加decode網址 (可以顯示中文)
21. 增加部分顏色配置
Feature
1. 適配IE
2. 增加一個Tag Plugins: 圖庫集
3. 增加一個Tag Plugins: tag-hide 功能 inline/block
4. 去除page頁開頭顯示與標題一樣的內容
5. aside 公告欄設置，支持html代碼
6. 手機界面sidebar顯示進度條和加深對應的標題
7. 主頁subtitle 的 hitokoto 顯示內容出處
9. footer 的hexo鏈接改為https
10. 修改手機下，menus和toc的打開效果
11. 手機頁面下，搜索界面全屏顯示
12. SEO優化，標題欄改為h1顯示
13. 閲讀模式優化，可根據light mode 和darkmode調整背景
14. 當屏蔽js時，header會出現（之前用js控制，會隱藏）
Fixed
1. 修復Tencent Analytics的script加載為https #105
2. 修復相關文章，日期顯示錯誤bug
3. 修復gitalk報錯問題
4. 修復當valine background 是絕對地址時無法顯示的bug
5. 修復medium-zoom 無法使用的bug
6. 修復在safari下，點擊或移動到首頁文章cover，圓角變成正方形的bug #114
7. 修復在部分瀏覽器下，aside,友情鏈接頭像轉動變形的bug
8. 修復在寬度限制下，表格內容溢出屏幕外而出現滾動條的bug \#138
9. 修復gitalk js 在一些沒有設置評論的page里加載的bug
10. 修復tag plugins 的gist 在不同主題下的背景顏色問題（黑色主題下，文字不易觀看）
11. 修復highlight figcaption 顯示不全的bug
12. 修復disqus評論數無法獲取的bug
13. 修復子目錄在觸摸屏下點擊,偶爾不出現的bug
14. 修復a標籤太長（連續英文字母）不會換行的bug
15. 修復toc滾動時，閲讀進度條也跟著滾動的bug
16. 修復aside的圖片，可點擊顯示大圖bug
17. 修復activate-power-mode設置參數無效bug
18. 修復語言上的錯誤 \#156
19. 修復主頁在safari桌面端，首頁滾動卡頓的bug
This commit is contained in:
Jerry
2020-03-17 21:28:27 +08:00
Unverified
parent 9c996d0a73
commit 321091befb
125 changed files with 3824 additions and 2684 deletions
Download Patch File Download Diff File Expand all files Collapse all files

370
source/css/_mode/darkmode.styl Normal file
View File

@@ -0,0 +1,370 @@
if hexo-config('darkmode.enable')
[data-theme='dark']
body
background-color: darken(#121212, 2)
color: alpha(#FFFFFF, .6)
::-webkit-scrollbar-thumb
background: lighten(#121212, 5)
// 網站背景，footer背景
#web_bg[data-type=color],
#footer[data-type=color]
background: darken(#121212, 2)
#web_bg[data-type=photo]:before,
#footer[data-type=photo]:before
position: absolute
width: 100%
height: 100%
background-color: alpha($dark-black, .7)
content: ''
#nav,
.layout_post > #post,
.layout_page > div:first-child:not(.recent-posts)
background-color: #121212
#sidebar
background: #121212
box-shadow: -.25rem 0 .25rem #121212
#article-container code
background: #2c2c2c
.recent-posts
.recent-post-item
background: #121212 !important
.article-title
color: alpha(#FFFFFF, .8) !important
#page-header
&.fixed
background: alpha(#121212, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
.toggle-menu,
#site-name,
a
color: alpha(#FFFFFF, .8)
.menus_item_child
background-color: lighten(#121212, 5) !important
li
&:hover
background: lighten(#121212, 20)
a
color: alpha(#FFFFFF, .6)
// 代碼框
#article-container pre,
#article-container pre code
background-color: lighten(#121212, 2)
.highlight-tools
background: lighten(#121212, 3)
#article-container .highlight:not(.js-file-line-container)
background-color: lighten(#121212, 2)
.code pre,
.gutter pre
background-color: lighten(#121212, 2)
table
.copy-notice
background: lighten(#121212, 3)
.copy-notice
background: lighten(#121212, 3)
blockquote
background-color: lighten(#121212, 10)
color: alpha(#FFFFFF, .6)
hr
border: 2px dashed alpha(#FFFFFF, .3)
background: 0
&:before
color: alpha(#FFFFFF, .6)
.layout_post .tag_share .post-meta__tags
border: 1px solid alpha(#FFFFFF, .6)
color: alpha(#FFFFFF, .6)
&:hover
background: darken(#FFFFFF, 60)
// 文章版權
.post-copyright
border: 1px solid alpha(#FFFFFF, .6)
.post-copyright-meta
color: alpha(#FFFFFF, .8)
.post-copyright-info
color: alpha(#FFFFFF, .6)
// 音樂播放器
.aplayer
filter: brightness(.7)
color: $dark-black
// 右下角按鈕
#rightside
& > div
& > i,
& > a,
& > div
background-color: lighten(#121212, 5) !important
color: alpha(#FFFFFF, .6) !important
&:hover
background: lighten(#121212, 20) !important
// 打賞按鈕
.post-reward
.reward-button
background-color: lighten(#121212, 10) !important
.reward-all
background-color: lighten(#121212, 10) !important
&:after
border-top: 13px solid lighten(#121212, 10) !important
.md-links-item:before,
.aside-category-list:hover,
.archive-list-item:hover,
#bookmark-it
background-color: lighten(#121212, 10) !important
img,
iframe:not(.utterances-frame),
.gist
filter: brightness(.7)
// 側邊欄
#aside_content
.card-widget
background: #121212 !important
.headline,
.length_num,
.aside-post_title,
.aside-category-list_link,
.archive-list-link,
.social-icon
color: alpha(#FFFFFF, .6) !important
.button--animated:before
background: lighten(#121212, 20) !important
// 頭部
#nav
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
background-color: alpha($dark-black, .7)
content: ''
#nav span,
#nav i,
#page-header a,
#page-header .toggle-menu,
#post-meta,
#post-meta a,
#footer-wrap,
#footer-wrap a
color: alpha(#FFFFFF, .6) !important
.posttitle,
h1,
h2,
h3,
h4,
h5,
h6
color: alpha(#FFFFFF, .8)
.recent-posts .post-meta__date,
.recent-posts .article-meta,
.recent-posts a,
.post-reward .reward-button,
.fa-clipboard,
.gutter pre,
#bookmark-it,
.copy-notice,
.md-links-item a,
.category-list-link,
.relatedPosts_date,
.prev-post .label,
.next-post .label
color: alpha(#FFFFFF, .6) !important
.prev_info,
.next_info,
.relatedPosts_title
color: alpha(#FFFFFF, .8) !important
// 時間軸界面
.article-sort-item__title
color: alpha(#FFFFFF, .6)
&:hover
color: #49b1f5
// 手機 MENU,TOC
#mobile-sidebar
#mobile-sidebar-menus
background: #121212
.headline
color: alpha(#FFFFFF, .6) !important
.length_num
color: alpha(#FFFFFF, .8) !important
a
color: alpha(#FFFFFF, .6) !important
// note
if hexo-config('note.style') == 'modern'
.note
filter: brightness(.7)
if hexo-config('note.style') == 'flat'
.note
filter: brightness(.7)
color: #4c4948
// 第三方
// 插件 hexo-blog-encrypt
#hexo-blog-encrypt
label,
input
color: alpha(#FFFFFF, .6) !important
input
background-color: #121212
if hexo-config('gitalk') && hexo-config('gitalk.enable')
#gitalk-container
.gt-header-textarea,
.gt-header-preview,
.gt-comment-content,
button,
.gt-popup
filter: brightness(.7)
svg
fill: alpha(#FFFFFF, .6) !important
if hexo-config('valine') && hexo-config('valine.enable')
// 評論
#vcomment
p,
a,
textarea,
.vemoji-btn,
.vpreview-btn,
input,
path,
.vcount,
.vnum,
.vtime,
.vsys,
.vsys,
.vnick
color: alpha(#FFFFFF, .6) !important
.vsys
background: rgb(97, 106, 107) !important
.vbtn,
.vat
border: 1px solid alpha(#FFFFFF, .6)
background: lighten(#121212, 5) !important
color: alpha(#FFFFFF, .6) !important
&:hover
background: lighten(#121212, 20) !important
.vwrap
border: 1px solid alpha(#FFFFFF, .6)
input
border-bottom: 1px dashed #616a6b
.vh
border-bottom: 1px dashed #616a6b
pre
border: 1px solid alpha(#FFFFFF, .6)
background-color: #121212
code
background: transparent
code
background-color: #2c2c2c
color: alpha(#FFFFFF, .6)
.vcontent.expand:before
background: linear-gradient(180deg, hsla(0, 0, 0, 0), hsl(218, 8%, 19%))
.vcontent.expand:after
background: hsla(204, 5%, 22%, 1)
if hexo-config('local_search') && hexo-config('local_search.enable')
#local-search
background: #121212
.local-search-box--input
background: #121212
color: alpha(#FFFFFF, .6)
.search-result-title
color: alpha(#FFFFFF, .6)
if hexo-config('algolia_search.enable')
#algolia-search
background: #121212
.ais-search-box--input
background: #121212
color: alpha(#FFFFFF, .6)
#algolia-search-results
.algolia-hit-item-link
color: alpha(#FFFFFF, .6)
if hexo-config('disqusjs.enable')
#disqus_thread
#dsqjs
.dsqjs-tab-active,
.dsqjs-no-comment
color: alpha(#FFFFFF, .6)
.dsqjs-order-label
background-color: lighten(#121212, 5)
.dsqjs-post-body
color: alpha(#FFFFFF, .6)
code,
pre
background: #2c2c2c
blockquote
color: alpha(#FFFFFF, .6)
.mermaid
filter: brightness(.7)

147
source/css/_mode/readmode.styl Normal file
View File

@@ -0,0 +1,147 @@
if hexo-config('readmode') && hexo-config('readmode.enable')
[data-theme='light']
.read-mode
background: #fff
#nav.post-bg
a
color: $font-black !important
#article-container
pre,
.highlight:not(.js-file-line-container)
background: #f7f7f7 !important
code
color: #4c4948
blockquote
border-left: .2rem solid #ddd
background-color: transparent
ol,
li
&:before
background: transparent
color: #4c4948
ul
>li
&:before
border: .2rem solid #90a4ae
hr
border: 2px dashed #d6dbdf
background: transparent
&:before
color: darken(#d6dbdf, 10)
.hide-button
background: darken(#d6dbdf, 10) !important
.note
border: 2px solid #eee
border-left-color: transparent
background-color: transparent
#mobile-sidebar-menus,
#rightside i,
#rightside a,
#rightside #rightside_config
background: darken(#d6dbdf, 10) !important
[data-theme='dark']
.read-mode
background: #0d0d0d
#article-container
code
color: rgba(255, 255, 255, .6)
blockquote
border-left: .2rem solid rgba(255, 255, 255, .6)
background-color: transparent
ol,
li
&:before
background: transparent
color: rgba(255, 255, 255, .6)
ul
>li
&:before
border: .15rem solid rgba(255, 255, 255, .6)
.note
border: 2px solid rgba(255, 255, 255, .6)
border-left-color: transparent
filter: none
background-color: transparent
color: rgba(255, 255, 255, .6)
.hide-button
background: #1f1f1f !important
.read-mode
#body-wrap
padding-left: 0 !important
#nav.post-bg
background-color: transparent
background-image: none !important
a
text-shadow: none !important
&:before
opacity: 0
& > #post-info
padding: 0
color: $font-black
text-align: center
.layout_post
> #post
background: transparent
box-shadow: none
&:hover
box-shadow: none
.highlight
display: block !important
#rightside
#darkmode
display: none
& > canvas
display: none !important
.code-area-wrap > .highlight-tools,
#footer,
#post > *:not(:first-child),
#to_comment,
#sidebar,
#toggle-sidebar,
#mobile-toc-button,
#page-header
display: none !important
#web_bg
background: none
#article-container
h1,
h2,
h3,
h4,
h5,
h6
padding: 0
&:before
content: ''