biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-10 21:17:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: twikoo 增加 option 配置

Browse Source 
feat: aside widget 增加排序（只對page頁和sticky內的有效）
feat: aside 增加自定義 widget
improvement: readmode 優化
improvement: html結構優化
This commit is contained in:
Jerry
2020-12-24 01:29:09 +08:00
parent 25cf081250
commit d5d5681981
25 changed files with 242 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
_config.yml
View File

@@ -334,6 +334,8 @@ facebook_comments:
# Twikoo # Twikoo
# https://github.com/imaegoo/twikoo # https://github.com/imaegoo/twikoo
twikoo: twikoo:
envId:
option:
# Chat Services # Chat Services
# -------------------------------------- # --------------------------------------
@@ -627,24 +629,29 @@ aside:
enable: true enable: true
limit: 5 # if set 0 will show all limit: 5 # if set 0 will show all
sort: date # date or updated sort: date # date or updated
sort_order: # Don't modify the setting unless you know how it works
card_categories: card_categories:
enable: true enable: true
limit: 8 # if set 0 will show all limit: 8 # if set 0 will show all
expand: none # none/true/false expand: none # none/true/false
sort_order: # Don't modify the setting unless you know how it works
card_tags: card_tags:
enable: true enable: true
limit: 40 # if set 0 will show all limit: 40 # if set 0 will show all
color: false color: false
sort_order: # Don't modify the setting unless you know how it works
card_archives: card_archives:
enable: true enable: true
type: monthly # yearly or monthly type: monthly # yearly or monthly
format: MMMM YYYY # eg: YYYY年MM月 format: MMMM YYYY # eg: YYYY年MM月
order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
limit: 8 # if set 0 will show all limit: 8 # if set 0 will show all
sort_order: # Don't modify the setting unless you know how it works
card_webinfo: card_webinfo:
enable: true enable: true
post_count: true post_count: true
last_push_date: true last_push_date: true
sort_order: # Don't modify the setting unless you know how it works
# busuanzi count for PV / UV in site # busuanzi count for PV / UV in site
# 訪問人數 # 訪問人數
@@ -662,6 +669,7 @@ runtimeshow:
# Aside widget - Newest Comments # Aside widget - Newest Comments
newest_comments: newest_comments:
enable: false enable: false
sort_order: # Don't modify the setting unless you know how it works
limit: 6 limit: 6
avatar: true avatar: true
# You can only choose one, or neither # You can only choose one, or neither

3
layout/includes/layout.pug
View File

@@ -1,5 +1,6 @@
- var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : '' - var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''
- var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : '' - var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
- var pageType = is_post() ? 'post' : 'page'
doctype html doctype html
html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside) html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
@@ -14,7 +15,7 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside
!=partial('includes/sidebar', {}, {cache:theme.fragment_cache}) !=partial('includes/sidebar', {}, {cache:theme.fragment_cache})
#body-wrap #body-wrap(class=pageType)
include ./header/index.pug include ./header/index.pug
main#content-inner.layout(class=hideAside) main#content-inner.layout(class=hideAside)

2
layout/includes/page/artitalk.pug
View File

@@ -13,7 +13,7 @@ script.
if (!{Boolean(option)}) { if (!{Boolean(option)}) {
const otherSetting = !{option} const otherSetting = !{option}
setting = Object.assign({}, setting, otherSetting) setting = Object.assign(setting, otherSetting)
} }
const init = () => { const init = () => {

2
layout/includes/third-party/comments/index.pug vendored
View File

@@ -32,7 +32,7 @@ hr
when 'Twikoo' when 'Twikoo'
#twikoo-wrap #twikoo-wrap
when 'Waline' when 'Waline'
#waline #waline-wrap
when 'Facebook Comments' when 'Facebook Comments'
.fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light' .fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light'
data-numposts= theme.facebook_comments.pageSize || 10 data-numposts= theme.facebook_comments.pageSize || 10

17
layout/includes/third-party/comments/twikoo.pug vendored
View File

@@ -1,16 +1,25 @@
- let option = theme.twikoo.option ? JSON.stringify(theme.twikoo.option) : false
script. script.
(()=>{ (()=>{
const $countDom = document.getElementById('twikoo-count') const $countDom = document.getElementById('twikoo-count')
const init = () => { const init = () => {
twikoo.init({ let initData = {
envId: '!{theme.twikoo}', envId: '!{theme.twikoo.envId}',
el: '#twikoo-wrap' el: '#twikoo-wrap'
}) }
if (!{Boolean(option)}) {
const otherData = !{option}
initData = Object.assign(initData, otherData)
}
twikoo.init(initData)
} }
const getCount = () => { const getCount = () => {
twikoo.getCommentsCount({ twikoo.getCommentsCount({
envId: '!{theme.twikoo}', envId: '!{theme.twikoo.envId}',
urls: [window.location.pathname], urls: [window.location.pathname],
includeReply: false includeReply: false
}).then(function (res) { }).then(function (res) {

4
layout/includes/third-party/comments/valine.pug vendored
View File

@@ -29,7 +29,7 @@ script.
if (!{Boolean(option)}) { if (!{Boolean(option)}) {
const otherData = !{option} const otherData = !{option}
initData = Object.assign({}, initData, otherData) initData = Object.assign(initData, otherData)
} }
const valine = new Valine(initData) const valine = new Valine(initData)
@@ -40,7 +40,7 @@ script.
} }
if ('!{theme.comments.use[0]}' === 'Valine' || !!{theme.comments.lazyload}) { if ('!{theme.comments.use[0]}' === 'Valine' || !!{theme.comments.lazyload}) {
if (!{theme.comments.lazyload}) btf.loadComment(document.querySelector('#vcomment'),loadValine) if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('vcomment'),loadValine)
else setTimeout(loadValine, 0) else setTimeout(loadValine, 0)
} else { } else {
function loadOtherComment () { function loadOtherComment () {

6
layout/includes/third-party/comments/waline.pug vendored
View File

@@ -4,7 +4,7 @@ script.
function loadWaline () { function loadWaline () {
function initWaline () { function initWaline () {
let initData = { let initData = {
el: '#waline', el: '#waline-wrap',
serverURL: '!{theme.waline.serverURL}', serverURL: '!{theme.waline.serverURL}',
avatar: '#{theme.waline.avatar}', avatar: '#{theme.waline.avatar}',
path: location.pathname, path: location.pathname,
@@ -12,7 +12,7 @@ script.
if (!{Boolean(option)}) { if (!{Boolean(option)}) {
const otherData = !{option} const otherData = !{option}
initData = Object.assign({}, initData, otherData) initData = Object.assign(initData, otherData)
} }
const waline = new Waline(initData) const waline = new Waline(initData)
@@ -23,7 +23,7 @@ script.
} }
if ('!{theme.comments.use[0]}' === 'Waline' || !!{theme.comments.lazyload}) { if ('!{theme.comments.use[0]}' === 'Waline' || !!{theme.comments.lazyload}) {
if (!{theme.comments.lazyload}) btf.loadComment(document.querySelector('#waline'),loadWaline) if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('waline-wrap'),loadWaline)
else setTimeout(loadWaline, 0) else setTimeout(loadWaline, 0)
} else { } else {
function loadOtherComment () { function loadOtherComment () {

2
layout/includes/third-party/newest-comments/twikoo-comment.pug vendored
View File

@@ -16,7 +16,7 @@ script.
const getComment = () => { const getComment = () => {
const runTwikoo = () => { const runTwikoo = () => {
twikoo.getRecentComments({ twikoo.getRecentComments({
envId: '!{theme.twikoo}', envId: '!{theme.twikoo.envId}',
pageSize: !{theme.newest_comments.limit}, pageSize: !{theme.newest_comments.limit},
includeReply: true includeReply: true
}).then(function (res) { }).then(function (res) {

9
layout/includes/widget/card_announcement.pug
View File

@@ -1,7 +1,6 @@
if theme.aside.card_announcement.enable if theme.aside.card_announcement.enable
.card-widget.card-announcement .card-widget.card-announcement
.card-content .item-headline
.item-headline i.fas.fa-bullhorn.card-announcement-animation
i.fas.fa-bullhorn.card-announcement-animation span= _p('aside.card_announcement')
span= _p('aside.card_announcement') .announcement_content!= theme.aside.card_announcement.content
.announcement_content!= theme.aside.card_announcement.content

19
layout/includes/widget/card_archives.pug
View File

@@ -1,12 +1,11 @@
if theme.aside.card_archives.enable if theme.aside.card_archives.enable
.card-widget.card-archives .card-widget.card-archives
.card-content .item-headline
.item-headline i.fas.fa-archive
i.fas.fa-archive span= _p('aside.card_archives')
span= _p('aside.card_archives')
- let type = theme.aside.card_archives.type || 'monthly'
- let type = theme.aside.card_archives.type || 'monthly' - let format = theme.aside.card_archives.format || 'MMMM YYYY'
- let format = theme.aside.card_archives.format || 'MMMM YYYY' - let order = theme.aside.card_archives.order || -1
- let order = theme.aside.card_archives.order || -1 - let limit = theme.aside.card_archives.limit === 0 ? 0 : theme.aside.card_archives.limit || 8
- let limit = theme.aside.card_archives.limit === 0 ? 0 : theme.aside.card_archives.limit || 8 != aside_archives({ type:type, format: format, order: order, limit: limit })
!= aside_archives({ type:type, format: format, order: order, limit: limit })

61
layout/includes/widget/card_author.pug
View File

@@ -1,37 +1,36 @@
if theme.aside.card_author.enable if theme.aside.card_author.enable
.card-widget.card-info .card-widget.card-info
.card-content .card-info-avatar.is-center
.card-info-avatar.is-center if theme.lazyload.enable
if theme.lazyload.enable img.avatar-img(data-lazy-src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
img.avatar-img(data-lazy-src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar") else
else img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar") .author-info__name= config.author
.author-info__name= config.author .author-info__description!= theme.aside.card_author.description || config.description
.author-info__description!= theme.aside.card_author.description || config.description
.card-info-data .card-info-data
if site.posts.length if site.posts.length
.card-info-data-item.is-center .card-info-data-item.is-center
a(href=url_for(config.archive_dir) + '/') a(href=url_for(config.archive_dir) + '/')
.headline= _p('aside.articles') .headline= _p('aside.articles')
.length-num= site.posts.length .length-num= site.posts.length
if site.tags.length if site.tags.length
.card-info-data-item.is-center .card-info-data-item.is-center
a(href=url_for(config.tag_dir) + '/') a(href=url_for(config.tag_dir) + '/')
.headline= _p('aside.tags') .headline= _p('aside.tags')
.length-num= site.tags.length .length-num= site.tags.length
if site.categories.length if site.categories.length
.card-info-data-item.is-center .card-info-data-item.is-center
a(href=url_for(config.category_dir) + '/') a(href=url_for(config.category_dir) + '/')
.headline= _p('aside.categories') .headline= _p('aside.categories')
.length-num= site.categories.length .length-num= site.categories.length
a#card-info-btn.button--animated(href=theme.aside.card_author.button.link) a#card-info-btn.button--animated(href=theme.aside.card_author.button.link)
i(class=theme.aside.card_author.button.icon) i(class=theme.aside.card_author.button.icon)
span=theme.aside.card_author.button.text span=theme.aside.card_author.button.text
if(theme.social) if(theme.social)
.card-info-social-icons.is-center .card-info-social-icons.is-center
!=fragment_cache('social', function(){return partial('includes/header/social')}) !=fragment_cache('social', function(){return partial('includes/header/social')})

9
layout/includes/widget/card_categories.pug
View File

@@ -1,8 +1,7 @@
if theme.aside.card_categories.enable if theme.aside.card_categories.enable
if site.categories.length if site.categories.length
.card-widget.card-categories .card-widget.card-categories
.card-content .item-headline
.item-headline i.fas.fa-folder-open
i.fas.fa-folder-open span= _p('aside.card_categories')
span= _p('aside.card_categories') !=aside_categories({ limit: theme.aside.card_categories.limit === 0 ? 0 : theme.aside.card_categories.limit || 8 , expand: theme.aside.card_categories.expand })
!=aside_categories({ limit: theme.aside.card_categories.limit === 0 ? 0 : theme.aside.card_categories.limit || 8 , expand: theme.aside.card_categories.expand })

11
layout/includes/widget/card_newest_comment.pug
View File

@@ -1,8 +1,7 @@
if theme.newest_comments.enable if theme.newest_comments.enable
.card-widget#card-newest-comments .card-widget#card-newest-comments
.card-content .item-headline
.item-headline i.fas.fa-bolt
i.fas.fa-bolt span= _p('aside.card_newest_comments.headline')
span= _p('aside.card_newest_comments.headline') .aside-list
.aside-list span= _p('aside.card_newest_comments.loading_text')
span= _p('aside.card_newest_comments.loading_text')

15
layout/includes/widget/card_post_toc.pug
View File

@@ -1,13 +1,12 @@
- let tocNumber = page.toc_number !== undefined ? page.toc_number : theme.toc.number - let tocNumber = page.toc_number !== undefined ? page.toc_number : theme.toc.number
#card-toc.card-widget #card-toc.card-widget
.card-content .item-headline
.item-headline i.fas.fa-stream
i.fas.fa-stream span= _p('aside.card_toc')
span= _p('aside.card_toc')
if (page.encrypt == true) if (page.encrypt == true)
.toc-content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber}) .toc-content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber})
else else
.toc-content!=toc(page.content, {list_number: tocNumber}) .toc-content!=toc(page.content, {list_number: tocNumber})

49
layout/includes/widget/card_recent_post.pug
View File

@@ -1,28 +1,27 @@
if theme.aside.card_recent_post.enable if theme.aside.card_recent_post.enable
.card-widget.card-recent-post .card-widget.card-recent-post
.card-content .item-headline
.item-headline i.fas.fa-history
i.fas.fa-history span= _p('aside.card_recent_post')
span= _p('aside.card_recent_post') .aside-list
.aside-list - let postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5
- let postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5 - let sort = theme.aside.card_recent_post.sort === 'updated' ? 'updated' : 'date'
- let sort = theme.aside.card_recent_post.sort === 'updated' ? 'updated' : 'date' - site.posts.sort(sort, -1).limit(postLimit).each(function(article){
- site.posts.sort(sort, -1).limit(postLimit).each(function(article){ - let link = article.link || article.path
- let link = article.link || article.path - let title = article.title || _p('no_title')
- let title = article.title || _p('no_title') - let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-cover' : ''
- let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-cover' : '' - let post_cover = article.cover
- let post_cover = article.cover .aside-list-item(class=no_cover)
.aside-list-item(class=no_cover) if post_cover && theme.cover.aside_enable
if post_cover && theme.cover.aside_enable a.thumbnail(href=url_for(link) title=title)
a.thumbnail(href=url_for(link) title=title) if theme.lazyload.enable
if theme.lazyload.enable img(data-lazy-src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
img(data-lazy-src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
else
img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
.content
a.title(href=url_for(link) title=title)= title
if theme.aside.card_recent_post.sort === 'updated'
time(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated)) #[=date(article.updated, config.date_format)]
else else
time(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)] img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
- }) .content
a.title(href=url_for(link) title=title)= title
if theme.aside.card_recent_post.sort === 'updated'
time(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated)) #[=date(article.updated, config.date_format)]
else
time(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)]
- })

9
layout/includes/widget/card_self.pug Normal file
View File

@@ -0,0 +1,9 @@
if site.data.widget
each item in site.data.widget
.card-widget(class=item.class_name id=item.id_name style=item.order ? `order: ${item.order}` : '')
.item-headline
i(class=item.icon)
span=item.name
.item-content
!=item.html

17
layout/includes/widget/card_tags.pug
View File

@@ -1,13 +1,12 @@
if theme.aside.card_tags.enable if theme.aside.card_tags.enable
if site.tags.length if site.tags.length
.card-widget.card-tags .card-widget.card-tags
.card-content .item-headline
.item-headline i.fas.fa-tags
i.fas.fa-tags span= _p('aside.card_tags')
span= _p('aside.card_tags')
- let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40 - let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40
if theme.aside.card_tags.color if theme.aside.card_tags.color
.card-tag-cloud!= cloudTags({source: site.tags, minfontsize: 1.1, maxfontsize: 1.5, limit: tagLimit, unit: 'em'}) .card-tag-cloud!= cloudTags({source: site.tags, minfontsize: 1.1, maxfontsize: 1.5, limit: tagLimit, unit: 'em'})
else else
.card-tag-cloud!= tagcloud({min_font: 1.1, max_font: 1.5, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf', unit: 'em'}) .card-tag-cloud!= tagcloud({min_font: 1.1, max_font: 1.5, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf', unit: 'em'})

57
layout/includes/widget/card_webinfo.pug
View File

@@ -1,32 +1,31 @@
if theme.aside.card_webinfo.enable if theme.aside.card_webinfo.enable
.card-widget.card-webinfo .card-widget.card-webinfo
.card-content .item-headline
.item-headline i.fas.fa-chart-line
i.fas.fa-chart-line span= _p('aside.card_webinfo.headline')
span= _p('aside.card_webinfo.headline') .webinfo
.webinfo if theme.aside.card_webinfo.post_count
if theme.aside.card_webinfo.post_count .webinfo-item
.webinfo-item .item-name= _p('aside.card_webinfo.article_name') + " :"
.item-name= _p('aside.card_webinfo.article_name') + " :" .item-count= site.posts.length
.item-count= site.posts.length if theme.runtimeshow.enable
if theme.runtimeshow.enable .webinfo-item
.webinfo-item .item-name= _p('aside.card_webinfo.runtime.name') + " :"
.item-name= _p('aside.card_webinfo.runtime.name') + " :" .item-count#runtimeshow(data-publishDate=date_xml(theme.runtimeshow.publish_date))
.item-count#runtimeshow(data-publishDate=date_xml(theme.runtimeshow.publish_date)) if theme.wordcount.enable && theme.wordcount.total_wordcount
if theme.wordcount.enable && theme.wordcount.total_wordcount .webinfo-item
.webinfo-item .item-name=_p('aside.card_webinfo.site_wordcount') + " :"
.item-name=_p('aside.card_webinfo.site_wordcount') + " :" .item-count=totalcount(site)
.item-count=totalcount(site) if theme.busuanzi.site_uv
if theme.busuanzi.site_uv .webinfo-item
.webinfo-item .item-name= _p('aside.card_webinfo.site_uv_name') + " :"
.item-name= _p('aside.card_webinfo.site_uv_name') + " :" .item-count#busuanzi_value_site_uv
.item-count#busuanzi_value_site_uv if theme.busuanzi.site_pv
if theme.busuanzi.site_pv .webinfo-item
.webinfo-item .item-name= _p('aside.card_webinfo.site_pv_name') + " :"
.item-name= _p('aside.card_webinfo.site_pv_name') + " :" .item-count#busuanzi_value_site_pv
.item-count#busuanzi_value_site_pv if theme.aside.card_webinfo.last_push_date
if theme.aside.card_webinfo.last_push_date .webinfo-item
.webinfo-item .item-name= _p('aside.card_webinfo.last_push_date.name') + " :"
.item-name= _p('aside.card_webinfo.last_push_date.name') + " :" .item-count#last-push-date(data-lastPushDate=date_xml(Date.now()))
.item-count#last-push-date(data-lastPushDate=date_xml(Date.now()))

5
layout/includes/widget/index.pug
View File

@@ -1,4 +1,4 @@
#aside_content.aside_content #aside-content.aside-content
//- post //- post
if is_post() if is_post()
if showToc && theme.toc.style_simple if showToc && theme.toc.style_simple
@@ -23,4 +23,5 @@
!=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache}) !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache}) !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache}) !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache}) !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_self', {}, {cache:theme.fragment_cache})

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "hexo-theme-butterfly", "name": "hexo-theme-butterfly",
"version": "3.5.0-b1", "version": "3.5.0-b2",
"description": "A Simple and Card UI Design theme for Hexo", "description": "A Simple and Card UI Design theme for Hexo",
"main": "package.json", "main": "package.json",
"scripts": { "scripts": {

4
source/css/_global/index.styl
View File

@@ -157,8 +157,8 @@ if $site-name-font
#site-title, #site-title,
#site-subtitle, #site-subtitle,
#site-name, #site-name,
#aside_content .author-info__name, #aside-content .author-info__name,
#aside_content .author-info__description #aside-content .author-info__description
font-family: $site-name-font font-family: $site-name-font
.is-center .is-center

39
source/css/_layout/aside.styl
View File

@@ -1,4 +1,4 @@
#aside_content #aside-content
width: 25% width: 25%
+minWidth900() +minWidth900()
@@ -20,6 +20,7 @@
position: relative position: relative
overflow: hidden overflow: hidden
margin-top: 1rem margin-top: 1rem
padding: 1rem 1.2rem
border-radius: 8px border-radius: 8px
background: var(--card-bg) background: var(--card-bg)
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06) box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
@@ -96,9 +97,6 @@
span span
padding-left: .5rem padding-left: .5rem
.card-content
padding: 1rem 1.2rem
.item-headline .item-headline
padding-bottom: .3rem padding-bottom: .3rem
font-size: 1.2em font-size: 1.2em
@@ -353,8 +351,37 @@
.layout .layout
justify-content: center justify-content: center
> .aside_content > .aside-content
display: none display: none
> div:first-child > div:first-child
width: 80% width: 80%
.page
.sticky_layout
display: flex
flex-direction: column
if hexo-config('aside.card_recent_post.sort_order')
.card-recent-post
order: hexo-config('aside.card_recent_post.sort_order')
if hexo-config('newest_comments.sort_order')
#card-newest-comments
order: hexo-config('newest_comments.sort_order')
if hexo-config('aside.card_categories.sort_order')
.card-categories
order: hexo-config('aside.card_categories.sort_order')
if hexo-config('aside.card_tags.sort_order')
.card-tags
order: hexo-config('aside.card_tags.sort_order')
if hexo-config('aside.card_archives.sort_order')
.card-archives
order: hexo-config('aside.card-archives.sort_order')
if hexo-config('aside.card_webinfo.sort_order')
.card-webinfo
order: hexo-config('aside.card_webinfo.sort_order')

2
source/css/_mode/darkmode.styl
View File

@@ -110,7 +110,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
.ads-wrap .ads-wrap
filter: brightness(.8) filter: brightness(.8)
#aside_content .aside-list > .aside-list-item:not(:last-child) #aside-content .aside-list > .aside-list-item:not(:last-child)
border-bottom: 1px dashed alpha(#FFFFFF, .1) border-bottom: 1px dashed alpha(#FFFFFF, .1)
// 第三方 // 第三方

44
source/css/_mode/readmode.styl
View File

@@ -7,7 +7,10 @@ if hexo-config('readmode')
--gray: #d6dbdf --gray: #d6dbdf
--hr-border: #d6dbdf --hr-border: #d6dbdf
--hr-before-color: darken(#d6dbdf, 10) --hr-before-color: darken(#d6dbdf, 10)
-highlight-bg: #f7f7f7 --highlight-bg: #f7f7f7
--exit-btn-bg: #C0C0C0
--exit-btn-color: #fff
--exit-btn-hover: darken(#C0C0C0, 20)
[data-theme='dark'] [data-theme='dark']
.read-mode .read-mode
@@ -18,12 +21,32 @@ if hexo-config('readmode')
--gray: rgba(255, 255, 255, .7) --gray: rgba(255, 255, 255, .7)
--hr-border: rgba(255, 255, 255, .5) --hr-border: rgba(255, 255, 255, .5)
--hr-before-color: rgba(255, 255, 255, .7) --hr-before-color: rgba(255, 255, 255, .7)
-highlight-bg: #171717 --highlight-bg: #171717
--exit-btn-bg: #1f1f1f
--exit-btn-color: rgba(255, 255, 255, .9)
--exit-btn-hover: lighten(#1f1f1f, 20)
.read-mode .read-mode
background: var(--readmode-light-color) background: var(--readmode-light-color)
#aside_content .exit-readmode
position: fixed
top: 30px
right: 30px
width: 40px
height: 40px
border-radius: 8px
background: var(--exit-btn-bg)
color: var(--exit-btn-color)
text-align: center
font-size: 16px
cursor: pointer
transition: background .3s
&:hover
background: var(--exit-btn-hover)
#aside-content
display: none display: none
#body-wrap #body-wrap
@@ -54,22 +77,13 @@ if hexo-config('readmode')
.highlight-tools, .highlight-tools,
#footer, #footer,
#post > *:not(#post-info):not(.post-content), #post > *:not(#post-info):not(.post-content),
#to_comment,
#mobile-toc-button,
#nav, #nav,
.post-outdate-notice, .post-outdate-notice,
#web_bg #web_bg,
#rightside,
.no-top-img
display: none !important display: none !important
if !hexo-config('chat_btn')
#chatra,
#tidio-chat-code,
#tidio-chat,
#daodream-container,
.gitter-chat-embed,
.gitter-open-chat-button
display: none !important
#article-container #article-container
a a
color: #99a9bf color: #99a9bf

15
source/js/main.js
View File

@@ -490,7 +490,20 @@ document.addEventListener('DOMContentLoaded', function () {
*/ */
const rightSideFn = { const rightSideFn = {
switchReadMode: () => { // read-mode switchReadMode: () => { // read-mode
document.body.classList.toggle('read-mode') const $body = document.body
$body.classList.add('read-mode')
const newEle = document.createElement('button')
newEle.type = 'button'
newEle.className = 'fas fa-sign-out-alt exit-readmode'
$body.appendChild(newEle)
function clickFn () {
$body.classList.remove('read-mode')
newEle.remove()
newEle.removeEventListener('click', clickFn)
}
newEle.addEventListener('click', clickFn)
}, },
switchDarkMode: () => { // Switch Between Light And Dark Mode switchDarkMode: () => { // Switch Between Light And Dark Mode
const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'