diff --git a/README.md b/README.md index 4e851b4..9a1d6c2 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,9 @@ # hexo-theme-butterfly -![version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly) +![master version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/master?color=%231ab1ad&label=master) +![master version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/dev?label=dev) ![https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff](https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff) -![hexo version](https://img.shields.io/badge/hexo-4.2+-0e83c) -![npm download](https://img.shields.io/npm/dw/hexo-theme-butterfly?color=green) +![hexo version](https://img.shields.io/badge/hexo-5.0+-0e83c) ![license](https://img.shields.io/github/license/jerryc127/hexo-theme-butterfly?color=FF5531) Demo: 👍 [Butterfly](https://butterfly.js.org/) || 🤞 [JerryC](https://jerryc.me/) @@ -71,7 +71,7 @@ npm i hexo-theme-butterfly - [x] Related articles - [x] Displays outdated notice for a post - [x] Share (AddThis/Sharejs/Addtoany) -- [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments/Twikoo） +- [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo) - [x] Multiple Comment System Support - [x] Online Chats (Chatra/Tidio/Daovoice/Gitter/Crisp) - [x] Web analytics (Baidu Analytics/Google Analytics/Tencent Analytics/CNZZ Analytics) diff --git a/README_CN.md b/README_CN.md index 713e6f4..f0081e9 100644 --- a/README_CN.md +++ b/README_CN.md @@ -1,12 +1,11 @@ # hexo-theme-butterfly -![version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly) +![master version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/master?color=%231ab1ad&label=master) +![master version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly/dev?label=dev) ![https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff](https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff) -![hexo version](https://img.shields.io/badge/hexo-4.2+-0e83c) -![npm download](https://img.shields.io/npm/dw/hexo-theme-butterfly?color=green) +![hexo version](https://img.shields.io/badge/hexo-5.0+-0e83c) ![license](https://img.shields.io/github/license/jerryc127/hexo-theme-butterfly?color=FF5531) - 預覽: 👍 [Butterfly](https://butterfly.js.org/) || 🤞 [JerryC](https://jerryc.me/) 文檔: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/) @@ -71,7 +70,7 @@ theme: butterfly - [x] 顯示相關文章 - [x] 過期文章提醒 - [x] 多種分享系統（AddThis/Sharejs/Addtoany） -- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments/Twikoo） +- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo） - [x] 支持雙評論部署 - [x] 多種在線聊天（Chatra/Tidio/Daovoice/Gitter/Crisp） - [x] 多種分析系統（百度分析/谷歌分析/騰訊分析/CNZZ分析） diff --git a/_config.yml b/_config.yml index 8515a5f..06ebbee 100644 --- a/_config.yml +++ b/_config.yml @@ -240,7 +240,7 @@ addtoany: comments: # Up to two comments system, the first will be shown as default - # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments/Twikoo + # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo use: # - Valine # - Disqus @@ -304,6 +304,15 @@ valine: requiredFields: nick,mail # required fields (nick/mail) option: +# waline - A simple comment system with backend support fork from Valine +# https://waline.js.org/ +waline: + serverURL: # Waline server address url + avatar: monsterid # gravatar style https://zh-tw.gravatar.com/site/implement/images/#default-image + emojiCDN: # emoji CDN + bg: /image/comment_bg.png # waline background + option: + # utterances # https://utteranc.es/ utterances: @@ -326,6 +335,8 @@ facebook_comments: # Twikoo # https://github.com/imaegoo/twikoo twikoo: + envId: + option: # Chat Services # -------------------------------------- @@ -395,6 +406,14 @@ tencent_analytics: # https://www.umeng.com/ cnzz_analytics: +# Cloudflare Analytics +# https://www.cloudflare.com/zh-tw/web-analytics/ +cloudflare_analytics: + +# Microsoft Clarity +# https://clarity.microsoft.com/ +microsoft_clarity: + # Advertisement # -------------------------------------- @@ -609,6 +628,7 @@ aside: enable: true description: button: + enable: true icon: fab fa-github text: Follow Me link: https://github.com/xxxxxx @@ -619,24 +639,29 @@ aside: enable: true limit: 5 # if set 0 will show all sort: date # date or updated + sort_order: # Don't modify the setting unless you know how it works card_categories: enable: true limit: 8 # if set 0 will show all expand: none # none/true/false + sort_order: # Don't modify the setting unless you know how it works card_tags: enable: true limit: 40 # if set 0 will show all color: false + sort_order: # Don't modify the setting unless you know how it works card_archives: enable: true type: monthly # yearly or monthly format: MMMM YYYY # eg: YYYY年MM月 order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending limit: 8 # if set 0 will show all + sort_order: # Don't modify the setting unless you know how it works card_webinfo: enable: true post_count: 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 # 訪問人數 @@ -654,14 +679,11 @@ runtimeshow: # Aside widget - Newest Comments newest_comments: enable: false + sort_order: # Don't modify the setting unless you know how it works limit: 6 avatar: true - leancloud: - enable: false - appId: # leancloud application app id - appKey: # leancloud application app key - serverURL: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in) - default_avatar: # mp/identicon/monsterid/wavatar/retro/robohash/blank + # You can only choose one, or neither + valine: false github_issues: enable: false repo: @@ -670,6 +692,7 @@ newest_comments: forum: api_key: twikoo: false + waline: false # Bottom right button (右下角按鈕) # -------------------------------------- @@ -848,6 +871,7 @@ CDN: disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css utterances: https://utteranc.es/client.js twikoo: https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js + waline: https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js # share addtoany: https://static.addtoany.com/menu/page.js diff --git a/layout/includes/head/analytics.pug b/layout/includes/head/analytics.pug index f4379b5..4873ebf 100644 --- a/layout/includes/head/analytics.pug +++ b/layout/includes/head/analytics.pug @@ -30,3 +30,14 @@ if theme.tencent_analytics if theme.cnzz_analytics script(async data-pjax src=`https://s4.cnzz.com/z_stat.php?id=${theme.cnzz_analytics}&web_id=${theme.cnzz_analytics}`) + +if theme.cloudflare_analytics + script(defer data-pjax src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon=`{"token": "${theme.cloudflare_analytics}"}`) + +if theme.microsoft_clarity + script. + (function(c,l,a,r,i,t,y){ + c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; + t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; + y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); + })(window, document, "clarity", "script", "!{theme.microsoft_clarity}"); \ No newline at end of file diff --git a/layout/includes/head/preconnect.pug b/layout/includes/head/preconnect.pug index 1200a20..98c5983 100644 --- a/layout/includes/head/preconnect.pug +++ b/layout/includes/head/preconnect.pug @@ -12,6 +12,12 @@ if theme.tencent_analytics if theme.cnzz_analytics link(rel="preconnect" href="//s4.cnzz.com") +if theme.cloudflare_analytics + link(rel="preconnect" href="//static.cloudflareinsights.com") + +if theme.microsoft_clarity + link(rel="preconnect" href="//www.clarity.ms") + if theme.blog_title_font && theme.blog_title_font.font_link && theme.blog_title_font.font_link.indexOf('//fonts.googleapis.com') != -1 link(rel="preconnect" href="//fonts.googleapis.com" crossorigin='') diff --git a/layout/includes/header/post-info.pug b/layout/includes/header/post-info.pug index 316a506..9639512 100644 --- a/layout/includes/header/post-info.pug +++ b/layout/includes/header/post-info.pug @@ -65,24 +65,30 @@ span.post-meta-label= _p('post.comments') + ':' if block block - - if whichCount === 'Disqus' || whichCount === 'Disqusjs' - +countBlock - span.disqus-comment-count - a(href=full_url_for(page.path) + '#disqus_thread') - else if whichCount === 'Valine' - +countBlock - a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl") - span.valine-comment-count(data-xid=url_for(page.path) itemprop="commentCount") - else if whichCount === 'Gitalk' - +countBlock - a(href=url_for(page.path) + '#post-comment') - span.gitalk-comment-count - else if whichCount === 'Twikoo' - +countBlock - a(href=url_for(page.path) + '#post-comment') - span#twikoo-count - else if whichCount === 'Facebook Comments' - +countBlock - a(href=url_for(page.path) + '#post-comment') - span.fb-comments-count(data-href=urlNoIndex()) \ No newline at end of file + + case whichCount + when 'Disqus' + when 'Disqusjs' + +countBlock + span.disqus-comment-count + a(href=full_url_for(page.path) + '#disqus_thread') + when 'Valine' + +countBlock + a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl") + span.valine-comment-count(data-xid=url_for(page.path) itemprop="commentCount") + when 'Waline' + +countBlock + a(href=url_for(page.path) + '#post-comment') + span.waline-comment-count(id=url_for(page.path)) + when 'Gitalk' + +countBlock + a(href=url_for(page.path) + '#post-comment') + span.gitalk-comment-count + when 'Twikoo' + +countBlock + a(href=url_for(page.path) + '#post-comment') + span#twikoo-count + when 'Facebook Comments' + +countBlock + a(href=url_for(page.path) + '#post-comment') + span.fb-comments-count(data-href=urlNoIndex()) \ No newline at end of file diff --git a/layout/includes/layout.pug b/layout/includes/layout.pug index e3a5b8c..e9d68fe 100644 --- a/layout/includes/layout.pug +++ b/layout/includes/layout.pug @@ -1,5 +1,6 @@ - var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : '' - var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : '' +- var pageType = is_post() ? 'post' : 'page' doctype html 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}) - #body-wrap + #body-wrap(class=pageType) include ./header/index.pug main#content-inner.layout(class=hideAside) diff --git a/layout/includes/page/artitalk.pug b/layout/includes/page/artitalk.pug index 940b046..c2d1dde 100644 --- a/layout/includes/page/artitalk.pug +++ b/layout/includes/page/artitalk.pug @@ -13,7 +13,7 @@ script. if (!{Boolean(option)}) { const otherSetting = !{option} - setting = Object.assign({}, setting, otherSetting) + setting = Object.assign(setting, otherSetting) } const init = () => { diff --git a/layout/includes/third-party/comments/index.pug b/layout/includes/third-party/comments/index.pug index 4514fce..3bab3bb 100644 --- a/layout/includes/third-party/comments/index.pug +++ b/layout/includes/third-party/comments/index.pug @@ -31,6 +31,8 @@ hr #utterances-wrap when 'Twikoo' #twikoo-wrap + when 'Waline' + #waline-wrap when 'Facebook Comments' .fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light' data-numposts= theme.facebook_comments.pageSize || 10 diff --git a/layout/includes/third-party/comments/js.pug b/layout/includes/third-party/comments/js.pug index 07a6f12..404149b 100644 --- a/layout/includes/third-party/comments/js.pug +++ b/layout/includes/third-party/comments/js.pug @@ -14,5 +14,7 @@ each name in theme.comments.use !=partial('includes/third-party/comments/utterances', {}, {cache:theme.fragment_cache}) when 'Twikoo' !=partial('includes/third-party/comments/twikoo', {}, {cache:theme.fragment_cache}) + when 'Waline' + !=partial('includes/third-party/comments/waline', {}, {cache:theme.fragment_cache}) when 'Facebook Comments' !=partial('includes/third-party/comments/facebook_comments', {}, {cache:theme.fragment_cache}) diff --git a/layout/includes/third-party/comments/twikoo.pug b/layout/includes/third-party/comments/twikoo.pug index 6dac48d..a3f249e 100644 --- a/layout/includes/third-party/comments/twikoo.pug +++ b/layout/includes/third-party/comments/twikoo.pug @@ -1,16 +1,25 @@ +- let option = theme.twikoo.option ? JSON.stringify(theme.twikoo.option) : false + script. (()=>{ const $countDom = document.getElementById('twikoo-count') const init = () => { - twikoo.init({ - envId: '!{theme.twikoo}', + let initData = { + envId: '!{theme.twikoo.envId}', el: '#twikoo-wrap' - }) + } + + if (!{Boolean(option)}) { + const otherData = !{option} + initData = Object.assign(initData, otherData) + } + + twikoo.init(initData) } const getCount = () => { twikoo.getCommentsCount({ - envId: '!{theme.twikoo}', + envId: '!{theme.twikoo.envId}', urls: [window.location.pathname], includeReply: false }).then(function (res) { diff --git a/layout/includes/third-party/comments/valine.pug b/layout/includes/third-party/comments/valine.pug index 5ca95bc..e67f92b 100644 --- a/layout/includes/third-party/comments/valine.pug +++ b/layout/includes/third-party/comments/valine.pug @@ -29,7 +29,7 @@ script. if (!{Boolean(option)}) { const otherData = !{option} - initData = Object.assign({}, initData, otherData) + initData = Object.assign(initData, otherData) } const valine = new Valine(initData) @@ -40,7 +40,7 @@ script. } 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 { function loadOtherComment () { diff --git a/layout/includes/third-party/comments/waline.pug b/layout/includes/third-party/comments/waline.pug new file mode 100644 index 0000000..027a312 --- /dev/null +++ b/layout/includes/third-party/comments/waline.pug @@ -0,0 +1,39 @@ +- let option = theme.waline.option ? JSON.stringify(theme.waline.option) : false +- let emojiMaps = '""' +if site.data.waline + - emojiMaps = JSON.stringify(site.data.waline) + +script. + function loadWaline () { + function initWaline () { + let initData = { + el: '#waline-wrap', + serverURL: '!{theme.waline.serverURL}', + avatar: '#{theme.waline.avatar}', + path: location.pathname, + emojiCDN: '#{theme.waline.emojiCDN}', + emojiMaps: !{emojiMaps}, + } + + if (!{Boolean(option)}) { + const otherData = !{option} + initData = Object.assign(initData, otherData) + } + + const waline = new Waline(initData) + } + + if (typeof Waline === 'function') initWaline() + else getScript('!{url_for(theme.CDN.waline)}').then(initWaline) + } + + if ('!{theme.comments.use[0]}' === 'Waline' || !!{theme.comments.lazyload}) { + if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('waline-wrap'),loadWaline) + else setTimeout(loadWaline, 0) + } else { + function loadOtherComment () { + loadWaline() + } + } + + diff --git a/layout/includes/third-party/newest-comments/index.pug b/layout/includes/third-party/newest-comments/index.pug index bf422c4..ac50aa7 100644 --- a/layout/includes/third-party/newest-comments/index.pug +++ b/layout/includes/third-party/newest-comments/index.pug @@ -1,8 +1,12 @@ -if theme.newest_comments.leancloud.enable - include ./leancloud.pug -else if theme.newest_comments.github_issues.enable +- let config = theme.newest_comments + +if config.valine + include ./valine.pug +else if config.waline + include ./waline.pug +else if config.github_issues.enable include ./github-issues.pug -else if theme.newest_comments.disqus.enable +else if config.disqus.enable include ./disqus-comment.pug -else if theme.newest_comments.twikoo +else if config.twikoo include ./twikoo-comment.pug \ No newline at end of file diff --git a/layout/includes/third-party/newest-comments/twikoo-comment.pug b/layout/includes/third-party/newest-comments/twikoo-comment.pug index f012760..3af9f93 100644 --- a/layout/includes/third-party/newest-comments/twikoo-comment.pug +++ b/layout/includes/third-party/newest-comments/twikoo-comment.pug @@ -16,7 +16,7 @@ script. const getComment = () => { const runTwikoo = () => { twikoo.getRecentComments({ - envId: '!{theme.twikoo}', + envId: '!{theme.twikoo.envId}', pageSize: !{theme.newest_comments.limit}, includeReply: true }).then(function (res) { diff --git a/layout/includes/third-party/newest-comments/leancloud.pug b/layout/includes/third-party/newest-comments/valine.pug similarity index 86% rename from layout/includes/third-party/newest-comments/leancloud.pug rename to layout/includes/third-party/newest-comments/valine.pug index 2e53917..98c195d 100644 --- a/layout/includes/third-party/newest-comments/leancloud.pug +++ b/layout/includes/third-party/newest-comments/valine.pug @@ -1,3 +1,5 @@ +- let default_avatar = theme.valine.avatar + script(src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.17.0/js/md5.min.js") script. window.addEventListener('load', () => { @@ -17,7 +19,7 @@ script. const getIcon = (icon, mail) => { if (icon) return icon - let defaultIcon = '!{ theme.newest_comments.leancloud.default_avatar ? `?d=${theme.newest_comments.leancloud.default_avatar}` : ''}' + let defaultIcon = '!{ default_avatar ? `?d=${default_avatar}` : ''}' let iconUrl = `https://gravatar.loli.net/avatar/${md5(mail.toLowerCase()) + defaultIcon}` return iconUrl } @@ -54,17 +56,17 @@ script. const getComment = () => { let serverURL = '' - if (!{Boolean(theme.newest_comments.leancloud.serverURL)}) { - serverURL = '!{theme.newest_comments.leancloud.serverURL}' + if (!{Boolean(theme.valine.serverURLs)}) { + serverURL = '!{theme.valine.serverURLs}' } else { - serverURL = 'https://!{theme.newest_comments.leancloud.appId.substring(0,8)}.api.lncldglobal.com' + serverURL = 'https://!{theme.valine.appId.substring(0,8)}.api.lncldglobal.com' } var settings = { "method": "GET", "headers": { - "X-LC-Id": '!{theme.newest_comments.leancloud.appId}', - "X-LC-Key": '!{theme.newest_comments.leancloud.appKey}', + "X-LC-Id": '!{theme.valine.appId}', + "X-LC-Key": '!{theme.valine.appKey}', "Content-Type": "application/json" }, } @@ -78,7 +80,7 @@ script. 'content': changeContent(e.comment), 'mail': e.mail, 'nick': e.nick, - 'url': e.url, + 'url': e.url + '#' + e.objectId, 'date': e.createdAt, } }) diff --git a/layout/includes/third-party/newest-comments/waline.pug b/layout/includes/third-party/newest-comments/waline.pug new file mode 100644 index 0000000..c99abc2 --- /dev/null +++ b/layout/includes/third-party/newest-comments/waline.pug @@ -0,0 +1,95 @@ +- let default_avatar = theme.waline.avatar + +script. + window.addEventListener('load', () => { + const changeContent = (content) => { + if (content === '') return content + + content = content.replace(/<[^>]+>/g,"") // remove html tag + content = content.replace(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|webp)/g, '') // remove image link + content = content.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi, '') // remove url + + if (content.length > 150) { + content = content.substring(0,150) + '...' + } + return content + } + + const getIcon = (mail) => { + let defaultIcon = '!{ default_avatar ? `?d=${default_avatar}` : ''}' + let iconUrl = `https://gravatar.loli.net/avatar/${mail + defaultIcon}` + return iconUrl + } + + const generateHtml = array => { + let result = '' + + if (array.length) { + for (let i = 0; i < array.length; i++) { + result += '
' + + if (!{theme.newest_comments.avatar}) { + let name = 'src' + if(!{theme.lazyload.enable}) { + name = 'data-lazy-src' + } + result += `${array[i].nick}` + } + + result += `
+ ${array[i].content} +
${array[i].nick}
+
` + } + } else { + result += '!{_p("aside.card_newest_comments.zero")}' + } + + let $dom = document.querySelector('#card-newest-comments .aside-list') + $dom.innerHTML= result + window.lazyLoadInstance && window.lazyLoadInstance.update() + window.pjax && window.pjax.refresh($dom) + } + + const getComment = () => { + const loadWaline = () => { + Waline.Widget.RecentComments({ + el: '#card-newest-comments .aside-list', + serverURL: '!{theme.waline.serverURL}', + count: !{theme.newest_comments.limit} + }).then(comments => { + const walineArray = comments.map(function (e) { + return { + 'content': changeContent(e.comment), + 'mail': e.mail, + 'nick': e.nick, + 'url': e.url + '#' + e.objectId, + 'date': e.createdAt, + } + }) + saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), 10/(60*24)) + generateHtml(walineArray) + }).catch(e => { + const $dom = document.querySelector('#card-newest-comments .aside-list') + $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}" + }) + } + + if (typeof Waline === 'function') loadWaline() + else getScript('!{url_for(theme.CDN.waline)}').then(loadWaline) + } + + const newestCommentInit = () => { + if (document.querySelector('#card-newest-comments .aside-list')) { + const data = saveToLocal.get('waline-newest-comments') + if (data) { + generateHtml(JSON.parse(data)) + } else { + getComment() + } + } + } + + newestCommentInit() + document.addEventListener('pjax:complete', newestCommentInit) + }) diff --git a/layout/includes/widget/card_announcement.pug b/layout/includes/widget/card_announcement.pug index 0dcda40..a38b7b9 100644 --- a/layout/includes/widget/card_announcement.pug +++ b/layout/includes/widget/card_announcement.pug @@ -1,7 +1,6 @@ if theme.aside.card_announcement.enable .card-widget.card-announcement - .card-content - .item-headline - i.fas.fa-bullhorn.card-announcement-animation - span= _p('aside.card_announcement') - .announcement_content!= theme.aside.card_announcement.content \ No newline at end of file + .item-headline + i.fas.fa-bullhorn.card-announcement-animation + span= _p('aside.card_announcement') + .announcement_content!= theme.aside.card_announcement.content \ No newline at end of file diff --git a/layout/includes/widget/card_archives.pug b/layout/includes/widget/card_archives.pug index b1ce93d..1080e28 100644 --- a/layout/includes/widget/card_archives.pug +++ b/layout/includes/widget/card_archives.pug @@ -1,12 +1,11 @@ if theme.aside.card_archives.enable .card-widget.card-archives - .card-content - .item-headline - i.fas.fa-archive - span= _p('aside.card_archives') - - - let type = theme.aside.card_archives.type || 'monthly' - - let format = theme.aside.card_archives.format || 'MMMM YYYY' - - let order = theme.aside.card_archives.order || -1 - - 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 }) + .item-headline + i.fas.fa-archive + span= _p('aside.card_archives') + + - let type = theme.aside.card_archives.type || 'monthly' + - let format = theme.aside.card_archives.format || 'MMMM YYYY' + - let order = theme.aside.card_archives.order || -1 + - 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 }) diff --git a/layout/includes/widget/card_author.pug b/layout/includes/widget/card_author.pug index 00ed643..933b7ce 100644 --- a/layout/includes/widget/card_author.pug +++ b/layout/includes/widget/card_author.pug @@ -1,37 +1,37 @@ if theme.aside.card_author.enable .card-widget.card-info - .card-content - .card-info-avatar.is-center - 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") - else - 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__description!= theme.aside.card_author.description || config.description + .card-info-avatar.is-center + 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") + else + 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__description!= theme.aside.card_author.description || config.description - .card-info-data - if site.posts.length - .card-info-data-item.is-center - a(href=url_for(config.archive_dir) + '/') - .headline= _p('aside.articles') - .length-num= site.posts.length + .card-info-data + if site.posts.length + .card-info-data-item.is-center + a(href=url_for(config.archive_dir) + '/') + .headline= _p('aside.articles') + .length-num= site.posts.length - if site.tags.length - .card-info-data-item.is-center - a(href=url_for(config.tag_dir) + '/') - .headline= _p('aside.tags') - .length-num= site.tags.length + if site.tags.length + .card-info-data-item.is-center + a(href=url_for(config.tag_dir) + '/') + .headline= _p('aside.tags') + .length-num= site.tags.length - if site.categories.length - .card-info-data-item.is-center - a(href=url_for(config.category_dir) + '/') - .headline= _p('aside.categories') - .length-num= site.categories.length + if site.categories.length + .card-info-data-item.is-center + a(href=url_for(config.category_dir) + '/') + .headline= _p('aside.categories') + .length-num= site.categories.length + if theme.aside.card_author.button.enable a#card-info-btn.button--animated(href=theme.aside.card_author.button.link) i(class=theme.aside.card_author.button.icon) span=theme.aside.card_author.button.text - - if(theme.social) - .card-info-social-icons.is-center - !=fragment_cache('social', function(){return partial('includes/header/social')}) + + if(theme.social) + .card-info-social-icons.is-center + !=fragment_cache('social', function(){return partial('includes/header/social')}) diff --git a/layout/includes/widget/card_categories.pug b/layout/includes/widget/card_categories.pug index eab8ba8..4f69e2f 100644 --- a/layout/includes/widget/card_categories.pug +++ b/layout/includes/widget/card_categories.pug @@ -1,8 +1,7 @@ if theme.aside.card_categories.enable if site.categories.length .card-widget.card-categories - .card-content - .item-headline - i.fas.fa-folder-open - 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 }) + .item-headline + i.fas.fa-folder-open + 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 }) diff --git a/layout/includes/widget/card_newest_comment.pug b/layout/includes/widget/card_newest_comment.pug index bf88d05..d9b972f 100644 --- a/layout/includes/widget/card_newest_comment.pug +++ b/layout/includes/widget/card_newest_comment.pug @@ -1,8 +1,7 @@ if theme.newest_comments.enable .card-widget#card-newest-comments - .card-content - .item-headline - i.fas.fa-bolt - span= _p('aside.card_newest_comments.headline') - .aside-list - span= _p('aside.card_newest_comments.loading_text') + .item-headline + i.fas.fa-bolt + span= _p('aside.card_newest_comments.headline') + .aside-list + span= _p('aside.card_newest_comments.loading_text') diff --git a/layout/includes/widget/card_post_toc.pug b/layout/includes/widget/card_post_toc.pug index 065a457..3874dc7 100644 --- a/layout/includes/widget/card_post_toc.pug +++ b/layout/includes/widget/card_post_toc.pug @@ -1,13 +1,12 @@ - let tocNumber = page.toc_number !== undefined ? page.toc_number : theme.toc.number #card-toc.card-widget - .card-content - .item-headline - i.fas.fa-stream - span= _p('aside.card_toc') + .item-headline + i.fas.fa-stream + span= _p('aside.card_toc') - if (page.encrypt == true) - .toc-content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber}) - else - .toc-content!=toc(page.content, {list_number: tocNumber}) + if (page.encrypt == true) + .toc-content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber}) + else + .toc-content!=toc(page.content, {list_number: tocNumber}) \ No newline at end of file diff --git a/layout/includes/widget/card_recent_post.pug b/layout/includes/widget/card_recent_post.pug index fe90d70..b207475 100644 --- a/layout/includes/widget/card_recent_post.pug +++ b/layout/includes/widget/card_recent_post.pug @@ -1,28 +1,27 @@ if theme.aside.card_recent_post.enable .card-widget.card-recent-post - .card-content - .item-headline - i.fas.fa-history - span= _p('aside.card_recent_post') - .aside-list - - 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' - - site.posts.sort(sort, -1).limit(postLimit).each(function(article){ - - let link = article.link || article.path - - let title = article.title || _p('no_title') - - let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-cover' : '' - - let post_cover = article.cover - .aside-list-item(class=no_cover) - if post_cover && theme.cover.aside_enable - a.thumbnail(href=url_for(link) title=title) - 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) - 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)] + .item-headline + i.fas.fa-history + span= _p('aside.card_recent_post') + .aside-list + - 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' + - site.posts.sort(sort, -1).limit(postLimit).each(function(article){ + - let link = article.link || article.path + - let title = article.title || _p('no_title') + - let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-cover' : '' + - let post_cover = article.cover + .aside-list-item(class=no_cover) + if post_cover && theme.cover.aside_enable + a.thumbnail(href=url_for(link) title=title) + 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) else - time(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)] - - }) \ No newline at end of file + 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)] + - }) \ No newline at end of file diff --git a/layout/includes/widget/card_self.pug b/layout/includes/widget/card_self.pug new file mode 100644 index 0000000..a02763f --- /dev/null +++ b/layout/includes/widget/card_self.pug @@ -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 + diff --git a/layout/includes/widget/card_tags.pug b/layout/includes/widget/card_tags.pug index 1595ff7..2293d82 100644 --- a/layout/includes/widget/card_tags.pug +++ b/layout/includes/widget/card_tags.pug @@ -1,13 +1,12 @@ if theme.aside.card_tags.enable if site.tags.length .card-widget.card-tags - .card-content - .item-headline - i.fas.fa-tags - span= _p('aside.card_tags') + .item-headline + i.fas.fa-tags + span= _p('aside.card_tags') - - let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40 - if theme.aside.card_tags.color - .card-tag-cloud!= cloudTags({source: site.tags, minfontsize: 1.1, maxfontsize: 1.5, limit: tagLimit, unit: 'em'}) - 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'}) + - let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40 + if theme.aside.card_tags.color + .card-tag-cloud!= cloudTags({source: site.tags, minfontsize: 1.1, maxfontsize: 1.5, limit: tagLimit, unit: 'em'}) + 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'}) diff --git a/layout/includes/widget/card_webinfo.pug b/layout/includes/widget/card_webinfo.pug index 7b07218..3bff545 100644 --- a/layout/includes/widget/card_webinfo.pug +++ b/layout/includes/widget/card_webinfo.pug @@ -1,32 +1,31 @@ if theme.aside.card_webinfo.enable .card-widget.card-webinfo - .card-content - .item-headline - i.fas.fa-chart-line - span= _p('aside.card_webinfo.headline') - .webinfo - if theme.aside.card_webinfo.post_count - .webinfo-item - .item-name= _p('aside.card_webinfo.article_name') + " :" - .item-count= site.posts.length - if theme.runtimeshow.enable - .webinfo-item - .item-name= _p('aside.card_webinfo.runtime.name') + " :" - .item-count#runtimeshow(data-publishDate=date_xml(theme.runtimeshow.publish_date)) - if theme.wordcount.enable && theme.wordcount.total_wordcount - .webinfo-item - .item-name=_p('aside.card_webinfo.site_wordcount') + " :" - .item-count=totalcount(site) - if theme.busuanzi.site_uv - .webinfo-item - .item-name= _p('aside.card_webinfo.site_uv_name') + " :" - .item-count#busuanzi_value_site_uv - if theme.busuanzi.site_pv - .webinfo-item - .item-name= _p('aside.card_webinfo.site_pv_name') + " :" - .item-count#busuanzi_value_site_pv - if theme.aside.card_webinfo.last_push_date - .webinfo-item - .item-name= _p('aside.card_webinfo.last_push_date.name') + " :" - .item-count#last-push-date(data-lastPushDate=date_xml(Date.now())) + .item-headline + i.fas.fa-chart-line + span= _p('aside.card_webinfo.headline') + .webinfo + if theme.aside.card_webinfo.post_count + .webinfo-item + .item-name= _p('aside.card_webinfo.article_name') + " :" + .item-count= site.posts.length + if theme.runtimeshow.enable + .webinfo-item + .item-name= _p('aside.card_webinfo.runtime.name') + " :" + .item-count#runtimeshow(data-publishDate=date_xml(theme.runtimeshow.publish_date)) + if theme.wordcount.enable && theme.wordcount.total_wordcount + .webinfo-item + .item-name=_p('aside.card_webinfo.site_wordcount') + " :" + .item-count=totalcount(site) + if theme.busuanzi.site_uv + .webinfo-item + .item-name= _p('aside.card_webinfo.site_uv_name') + " :" + .item-count#busuanzi_value_site_uv + if theme.busuanzi.site_pv + .webinfo-item + .item-name= _p('aside.card_webinfo.site_pv_name') + " :" + .item-count#busuanzi_value_site_pv + if theme.aside.card_webinfo.last_push_date + .webinfo-item + .item-name= _p('aside.card_webinfo.last_push_date.name') + " :" + .item-count#last-push-date(data-lastPushDate=date_xml(Date.now())) diff --git a/layout/includes/widget/index.pug b/layout/includes/widget/index.pug index 94c496f..10dd161 100644 --- a/layout/includes/widget/index.pug +++ b/layout/includes/widget/index.pug @@ -1,4 +1,4 @@ -#aside_content.aside_content +#aside-content.aside-content //- post if is_post() if showToc && theme.toc.style_simple @@ -23,4 +23,5 @@ !=partial('includes/widget/card_categories', {}, {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_webinfo', {}, {cache:theme.fragment_cache}) \ No newline at end of file + !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache}) + !=partial('includes/widget/card_self', {}, {cache:theme.fragment_cache}) \ No newline at end of file diff --git a/package.json b/package.json index 11aed36..f17b1cb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "3.4.2", + "version": "3.5.0", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index 66a51bf..d06931e 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -157,8 +157,8 @@ if $site-name-font #site-title, #site-subtitle, #site-name, - #aside_content .author-info__name, - #aside_content .author-info__description + #aside-content .author-info__name, + #aside-content .author-info__description font-family: $site-name-font .is-center diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index 469909d..a55880c 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -1,4 +1,4 @@ -#aside_content +#aside-content width: 25% +minWidth900() @@ -20,6 +20,7 @@ position: relative overflow: hidden margin-top: 1rem + padding: 1rem 1.2rem border-radius: 8px background: var(--card-bg) box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06) @@ -53,7 +54,7 @@ .card-info-data display: table - padding: .7rem 0 + margin: .7rem 0 .2rem width: 100% table-layout: fixed @@ -88,6 +89,7 @@ #card-info-btn display: block + margin-top: .7rem background-color: var(--btn-bg) color: var(--btn-color) text-align: center @@ -96,9 +98,6 @@ span padding-left: .5rem - .card-content - padding: 1rem 1.2rem - .item-headline padding-bottom: .3rem font-size: 1.2em @@ -353,8 +352,37 @@ .layout justify-content: center - > .aside_content + > .aside-content display: none > div:first-child - width: 80% \ No newline at end of file + 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') diff --git a/source/css/_layout/third-party.styl b/source/css/_layout/third-party.styl index 3ffd4aa..3c1ab6c 100644 --- a/source/css/_layout/third-party.styl +++ b/source/css/_layout/third-party.styl @@ -1,4 +1,5 @@ -#vcomment +#vcomment, +#waline font-size: 1.1em .vbtn @@ -9,12 +10,9 @@ &:hover background: var(--btn-hover-color) - if hexo-config('valine.bg') - textarea - background: url(hexo-config('valine.bg')) 100% 100% no-repeat - - &:focus - background-image: none + textarea + &:focus + background-image: none .vimg transition: all .3s @@ -27,6 +25,16 @@ &:after z-index: 22 +if hexo-config('valine.bg') + #vcomment + textarea + background: url(hexo-config('valine.bg')) 100% 100% no-repeat + +if hexo-config('waline.bg') + #waline + textarea + background: url(hexo-config('waline.bg')) 100% 100% no-repeat + .fireworks position: fixed top: 0 diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl index 5ce560b..ee5a28b 100644 --- a/source/css/_mode/darkmode.styl +++ b/source/css/_mode/darkmode.styl @@ -110,7 +110,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' .ads-wrap 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) // 第三方 diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl index b10849a..b1ee497 100644 --- a/source/css/_mode/readmode.styl +++ b/source/css/_mode/readmode.styl @@ -7,7 +7,10 @@ if hexo-config('readmode') --gray: #d6dbdf --hr-border: #d6dbdf --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'] .read-mode @@ -18,12 +21,32 @@ if hexo-config('readmode') --gray: rgba(255, 255, 255, .7) --hr-border: rgba(255, 255, 255, .5) --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 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 #body-wrap @@ -54,22 +77,13 @@ if hexo-config('readmode') .highlight-tools, #footer, #post > *:not(#post-info):not(.post-content), - #to_comment, - #mobile-toc-button, #nav, .post-outdate-notice, - #web_bg + #web_bg, + #rightside, + .no-top-img 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 a color: #99a9bf diff --git a/source/js/main.js b/source/js/main.js index f32b446..08db8b6 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -488,7 +488,20 @@ document.addEventListener('DOMContentLoaded', function () { */ const rightSideFn = { 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 const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'