diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index ecbf408..c7a86b3 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,8 +1,15 @@ + ## I want to create a new issue diff --git a/README.md b/README.md index 2486840..1aea826 100644 --- a/README.md +++ b/README.md @@ -1,35 +1,33 @@ # hexo-theme-butterfly -Version +Version Author Hexo node.js -Demo: https://demo.jerryc.me/ - -JerryC: https://jerryc.me/ +Demo: 👍 [Butterfly](https://demo.jerryc.me/) || 🤞 [JerryC](https://jerryc.me/) Based on [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody) theme. ## Installation -Stable branch: +Stable branch [recommend]: ``` -git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly +git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly ``` Dev branch: ``` -git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly +git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly ``` ## Configuration Set theme in the hexo work folder's root config file `_config.yml`: -> theme: Butterfly +> theme: butterfly If you don't have pug & stylus renderer, try this: @@ -37,7 +35,15 @@ git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Bu ## Documentation -Find in [hexo-theme-butterfly docs](https://docs.jerryc.me) and [JerryC](https://jerryc.me/posts/21cfbf15). it supports `zh-TW` +Find in [Butterfly Docs](https://demo.jerryc.me/posts/21cfbf15/). it supports `zh-TW` and `zh-CN` + +You can also join the Chat Group. + +[💬 Join QQ Group [recommend]](https://jq.qq.com/?_wv=1027&k=5KI3Jqb) + +[💬 Join Telegram Group](https://t.me/hexo_butterfly) + + ## Screenshots diff --git a/README_CN.md b/README_CN.md index 295d892..c951209 100644 --- a/README_CN.md +++ b/README_CN.md @@ -1,45 +1,49 @@ # hexo-theme-butterfly -Version +Version Author Hexo node.js -Demo: https://demo.jerryc.me/ - -JerryC: https://jerryc.me/ - +Demo: 👍 [Butterfly](https://demo.jerryc.me/) || 🤞 [JerryC](https://jerryc.me/) 一款基於[hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody)修改的主題 ## 安裝 -在你的博客根目錄裡 +在你的博客根目錄裡安裝穩定版【推薦】 ``` -git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly +git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly ``` 如果想要安裝比較新的dev分支，可以 ``` -git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly +git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly ``` ## 應用主題 修改hexo配置文件`_config.yml`，把主題改為`Butterfly` ``` -theme: Butterfly +theme: butterfly ``` >如果你沒有pug以及stylus的渲染器，請下載安裝： npm install hexo-renderer-pug hexo-renderer-stylus --save or yarn add hexo-renderer-pug hexo-renderer-stylus ## 文檔 -可查看[hexo-theme-butterfly docs](https://docs.jerryc.me) 和 [JerryC](https://jerryc.me/posts/21cfbf15) +可查看[Butterfly Docs](https://demo.jerryc.me/posts/21cfbf15/) + +你也可以加入群組 + +[ 💬 QQ群 [推薦]](https://jq.qq.com/?_wv=1027&k=5KI3Jqb) + +[ 💬 Telegram群](https://t.me/hexo_butterfly) ## 截圖 + ![image](https://user-images.githubusercontent.com/16351105/58887365-1272f780-8718-11e9-9329-3292c6ba20d4.png) ![image](https://user-images.githubusercontent.com/16351105/58887457-3cc4b500-8718-11e9-9417-2bdea603c92e.png) diff --git a/_config.yml b/_config.yml index 27c7668..ff041a8 100644 --- a/_config.yml +++ b/_config.yml @@ -1,64 +1,48 @@ -# Main menu navigation -# --------------- -# format: xxx: 連結 || icon +# Main menu navigation (導航目錄) +# -------------------------------------- + +# format: name: link || icon # sub-menu -# xxx || icon: -# xxx || 連結 || icon +# name || icon: +# name || link || icon + menu: - Home: / || fa fa-home - Archives: /archives/ || fa fa-archive - Tags: /tags/ || fa fa-tags - Categories: /categories/ || fa fa-folder-open - Link: /link/ || fa fa-link - About: /about/ || fa fa-heart - List||fa fa-list: - - Music || /music/ || fa fa-music - - Movie || /movies/ || fa fa-film + Home: / || fas fa-home + Archives: /archives/ || fas fa-archive + Tags: /tags/ || fas fa-tags + Categories: /categories/ || fas fa-folder-open + List||fas fa-list: + - Music || /music/ || fas fa-music + - Movie || /movies/ || fas fa-video + Link: /link/ || fas fa-link + About: /about/ || fas fa-heart -# Favicon -# --------------- -favicon: /img/favicon.ico - -# PWA -# See https://github.com/JLHwung/hexo-offline -# --------------- -# pwa: -# enable: true -# manifest: /img/pwa/manifest.json -# theme_color: "#fff" -# apple_touch_icon: /img/pwa/apple-touch-icon.png -# favicon_32_32: /img/pwa/32.png -# favicon_16_16: /img/pwa/16.png -# mask_icon: /img/pwa/safari-pinned-tab.svg - -# Highlight theme -# --------------- -highlight_theme: light # default / darker / pale night / light / ocean -highlight_copy: true #代碼複製按鈕 -highlight_lang: true #代碼語言顯示 -highlight_shrink: false # true 全部代碼框不展開，需點擊 '>' 打開 / false 代碼框展開，有'>'點擊按鈕 | none 代碼框展開，不顯示 '>' 按鈕 +# Code Blocks (代碼相關) +# -------------------------------------- +highlight_theme: light # default / darker / pale night / light / ocean / mac / false +highlight_copy: true # copy button +highlight_lang: true # show the code language +highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button code_word_wrap: false -# copy setting -# 是否禁止複製（如果禁止，highlight_copy的功能將無效) -# copyright 複製的內容後面加上版權信息 +# copy settings +# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息) copy: - enable: true # true 開啟 / false 禁止 + enable: true copyright: false -# social settings +# social settings (社交圖標設置) # formal: -# icon: link -# --------------- +# icon: link || the description social: - fa fa-github: https://github.com/jerryc127 - fa fa-envelope: mailto:xxxxxxxx@gmail.com - fa fa-rss: /atom.xml + fab fa-github: https://github.com/xxxxx || Github + fas fa-envelope: mailto:xxxxxx@gmail.com || Email + +# search (搜索) +# -------------------------------------- -#### search #### # Algolia search -# --------------- algolia_search: enable: false hits: @@ -67,54 +51,49 @@ algolia_search: labels: input_placeholder: Search for Posts hits_empty: "We didn't find any results for the search: ${query}" # if there are no result - hits_stats: "${hits} results found in ${time} ms" + hits_stats: '${hits} results found in ${time} ms' # Local search -# Please see doc for more details: https://docs.jerryc.me/config.html#本地搜索 -# --------------- local_search: enable: false labels: input_placeholder: Search for Posts hits_empty: "We didn't find any results for the search: ${query}" # if there are no result +# Math (數學) +# -------------------------------------- +# About the per_page +# if you set it to true, it will load mathjax/katex script in each page (true 表示每一頁都加載js) +# if you set it to false, it will load mathjax/katex script according to your setting (add the 'mathjax: true' in page's front-matter) +# (false 需要時加載，須在使用的 Markdown Front-matter 加上 mathjax: true) + # MathJax -# Please see doc for more details: https://docs.jerryc.me/config.html#mathjax -# --------------- mathjax: enable: false - # true 表示每一頁都加載mathjax.js - # false 需要時加載，須在使用的Markdown Front-matter 加上 mathjax: true per_page: false # KaTeX -# --------------- katex: enable: false - # true 表示每一頁都加載katex.js - # false 需要時加載，須在使用的Markdown Front-matter 加上 katex: true per_page: false hide_scrollbar: true -# mermaid -# see https://github.com/knsv/mermaid -# ------------------------------- -mermaid: - enable: false - # built-in themes: default/forest/dark/neutral - theme: default +# Image (圖片設置) +# -------------------------------------- -# Post info settings -# --------------- +# Favicon（網站圖標） +favicon: /img/favicon.png + +# Avatar (頭像) avatar: img: /img/avatar.png - effect: false # 頭像會一直轉圈 + effect: false -# the banner image of index +# the banner image of home page index_img: # if the banner of page not setting,it will show the top_img -default_top_img: /img/index.jpg +default_top_img: https://i.loli.net/2020/05/01/IuWi8QbHvzjlOPw.jpg # the banner image of archive page archive_img: @@ -127,7 +106,7 @@ tag_img: # category page, look like https://xxxxxxxxx.com/categories/butterfly category_img: -# 如果你有使用hexo-douban，可配置這個 +# If you are using hexo-douban, you can configure it (如果你有使用 hexo-douban,可配置這個) # douban: # meta: false # movies_img: @@ -135,31 +114,30 @@ category_img: # games_img: cover: - # 是否顯示文章封面 + # display the cover or not (是否顯示文章封面) index_enable: true aside_enable: true archives_enable: true - # 封面顯示的位置 - # 三個值可配置 left , right , both + # the position of cover in home page (封面顯示的位置) + # left/right/both position: both - # 當沒有設置cover時，默認的封面顯示 - default_cover: - - /img/post.jpg + # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示) + default_cover: + - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg -# if the photo link cannot connect,it will show that -lodding_bg: - flink: /img/friend_404.gif #404後圖片 - post_page: /img/404.jpg #404後圖片 -# post: /img/loading.gif ##加載動畫 +# Replace Broken Images (替換無法顯示的圖片) +error_img: + flink: /img/friend_404.gif + post_page: /img/404.jpg # A simple 404 page error_404: enable: false - subtitle: "Page Not Found" - background: + subtitle: 'Page Not Found' + background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png post_meta: - page: + page: # Home Page date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示 categories: true # true or false 主頁是否顯示分類 tags: false # true or false 主頁是否顯示標籤 @@ -168,19 +146,29 @@ post_meta: categories: true # true or false 文章頁是否顯示分類 tags: true # true or false 文章頁是否顯示標籤 -# Please see doc for more details: https://docs.jerryc.me/config.html#字數統計 +# wordcount (字數統計) wordcount: + enable: false post_wordcount: true min2read: true total_wordcount: true +# Display the article introduction on homepage +# 1: description +# 2: both (if the description exists, it will show description. or show the auto_excerpt) +# 3: auto_excerpt (default) +index_post_content: + method: 3 + length: 500 # if you set method to 2 or 3, the length need to config + +# Post +# -------------------------------------- + +# toc (目錄) toc: enable: true number: true - -# auto open the sidebar in 'post' -auto_open_sidebar: - enable: true + auto_open: true # auto open the sidebar post_copyright: enable: true @@ -188,21 +176,46 @@ post_copyright: license: CC BY-NC-SA 4.0 license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/ -# 自動節選 -auto_excerpt: - enable: true - length: 150 +# Sponsor/reward +reward: + enable: false + QR_code: + - img: /img/wechat.jpg + link: + text: wechat + - img: /img/alipay.jpg + link: + text: alipay -#### Share System #### -# ----------------------------------------- +# Related Articles +related_post: + enable: true + limit: 6 # Number of posts displayed + date_type: created # or created or updated 文章日期顯示創建日或者更新日 + +# figcaption (圖片描述文字) +photofigcaption: false + +# anchor +# when you scroll in post, the URL will update according to header id. +anchor: false + +# Share System (分享功能) +# -------------------------------------- + +# AddThis +# https://www.addthis.com/ addThis: enable: false pubid: +# Share.js +# https://github.com/overtrue/share.js sharejs: enable: true sites: facebook,twitter,wechat,weibo,qq +# AddToAny # https://www.addtoany.com/ addtoany: enable: false @@ -215,30 +228,38 @@ addtoany: - email - copy_link -#### Comments System #### -# ------------------------------------ +# Comments System +# -------------------------------------- + +# disqus +# https://disqus.com/ disqus: enable: false shortname: - count: false # top_img顯示評論數 + count: false # dispaly comment count in top_img -# Disqus.js版評論系統，應對大陸長城的折中方案，兼容原版：https://github.com/SukkaW/DisqusJS -# API 申請地址：https://disqus.com/api/applications/ -# 與 disqus 共用樣式 +# Alternative Disqus - Render comments with Disqus API +# DisqusJS評論系統，可以實現在網路審查地區載入 Disqus 評論列表，兼容原版 +# https://github.com/SukkaW/DisqusJS disqusjs: enable: false shortname: siteName: apikey: - api: https://disqus.skk.moe/disqus/ #一般情況下無需修改 API 地址 + api: + nocomment: # display when a blog post or an article has no comment attached admin: adminLabel: - count: true # top_img顯示評論數 + count: false # dispaly comment count in top_img -laibili: +# livere(來必力) +# https://www.livere.com/ +livere: enable: false uid: +# gitalk +# https://github.com/gitalk/gitalk gitalk: enable: false client_id: @@ -246,49 +267,96 @@ gitalk: repo: owner: admin: - language: zh-CN # en , zh-CN , zh-TW + language: en # en, zh-CN, zh-TW, es-ES, fr, ru perPage: 10 # Pagination size, with maximum 100. distractionFreeMode: false # Facebook-like distraction free mode. pagerDirection: last # Comment sorting direction, available values are last and first. createIssueManually: false # Gitalk will create a corresponding github issue for your every single page automatically - count: true # top_img顯示評論數 + count: false # dispaly comment count in top_img -# valine comment system. https://valine.js.org +# valine +# https://valine.js.org valine: enable: false # if you want use valine,please set this value is true appId: # leancloud application app id appKey: # leancloud application app key - notify: false # valine mail notify (true/false) https://github.com/xCss/Valine/wiki - verify: false # valine verify code (true/false) pageSize: 10 # comment list page size avatar: monsterid # gravatar style https://valine.js.org/#/avatar - lang: en # i18n: zh-cn/en + lang: en # i18n: zh-CN/zh-TW/en/ja placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints ) - guest_info: nick,mail,link #valine comment header info + guest_info: nick,mail,link #valine comment header info (nick/mail/link) recordIP: false # Record reviewer IP serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in) - bg: /img/comment_bg.png # valine background - count: true # top_img顯示評論數 + bg: # valine background + emojiCDN: # emoji CDN + enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar + requiredFields: nick,mail # required fields (nick/mail) + count: false # dispaly comment count in top_img # utterances # https://utteranc.es/ utterances: enable: false repo: - # 可選 pathname/url/title/og:title + # Issue Mapping: pathname/url/title/og:title issue_term: pathname - # 可選 github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark + # Theme: github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark light_theme: github-light dark_theme: photon-dark -##### Footer Settings #### -# ------------------------------------ +# Facebook Comments Plugin +# https://developers.facebook.com/docs/plugins/comments/ +facebook_comments: + enable: false + app_id: + user_id: # optional + pageSize: 10 # The number of comments to show + order_by: social # social/time/reverse_time + lang: en_US # Language en_US/zh_CN/zh_TW and so on + count: false + +# Chat Services +# -------------------------------------- + +# Chat Button [recommend] +# It will create a button in the bottom right corner of website, and hide the origin button +chat_btn: false + +# The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down +chat_hide_show: false + +# chatra +# https://chatra.io/ +chatra: + enable: false + id: + +# tidio +# https://www.tidio.com/ +tidio: + enable: false + public_key: + +# daovoice +# http://daovoice.io/ +daovoice: + enable: false + app_id: + +# gitter +# https://gitter.im/ +gitter: + enable: false + room: + +# Footer Settings +# -------------------------------------- + since: 2020 footer_custom_text: -footer_copyright: - enable: true +footer_copyright: true ICP: enable: false @@ -296,33 +364,37 @@ ICP: text: icon: /img/icp.png -#### Analysis #### -# --------------- +# Analysis +# -------------------------------------- + +# Baidu Analytics baidu_analytics: # Google Analytics google_analytics: -# Tencent_analytics ID +# Tencent Analytics ID tencent_analytics: -# Ads -# --------------- -# Google Adsense +# Advertisement +# -------------------------------------- + +# Google Adsense (谷歌廣告) google_adsense: enable: false js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js client: enable_page_level_ads: true -# 廣告插入位置 -# 適用於開啓手動廣告的配置 +# Insert ads manually (手動插入廣告) # ad: # index: # aside: # post: -#### 站長驗證 #### +# Verification (站長驗證) +# -------------------------------------- + # Google Webmaster tools verification setting # See: https://www.google.com/webmasters/ google_site_verification: @@ -339,29 +411,12 @@ baidu_site_verification: # see http://zhanzhang.so.com/ qihu_site_verification: -# 打賞按鈕 -reward: - enable: true - QR_code: - - itemlist: - img: /img/wechat.jpg - text: 微信 - - itemlist: - img: /img/alipay.jpg - text: 支付寶 - -# 推薦文章 -related_post: - enable: true - limit: 6 # 顯示推薦文章數目 - date_type: created # or created or updated 文章日期顯示創建日或者更新日 - -#### 美化/效果 #### -#-------------------------------- +# Beautify/Effect (美化/效果) +# -------------------------------------- # Theme color for customize # Notice: color value must in double quotes like "#000" or may cause error! -# --------------- + # theme_color: # enable: true # main: "#49B1F5" @@ -377,31 +432,36 @@ related_post: # blockquote_padding_color: "#49b1f5" # blockquote_background_color: "#49b1f5" -# 主頁設置 -# 默認top_img全屏，site_info在中間 -# 使用默認, 都無需填寫（建議默認） -index_site_info_top: # 主頁標題距離頂部距離 例如 300px/300em/300rem/10% -index_top_img_height: # 主頁top_img高度 例如 300px/300em/300rem 不能使用百分比 +# The top_img settings of home page +# default: top img - full screen, site info - middle (默認top_img全屏，site_info在中間) +# The positon of site info, eg: 300px/300em/300rem/10% (主頁標題距離頂部距離) +index_site_info_top: +# The height of top_img, eg: 300px/300em/300rem (主頁top_img高度) +index_top_img_height: -# category和tag頁的UI設置 -# index 值代表 UI將與首頁的UI一樣 -# 默認跟archives頁面UI一樣 -category_ui: # 留空或index -tag_ui: # 留空或index +# The user interface setting of category and tag page (category和tag頁的UI設置) +# index - same as Homepage UI (index 值代表 UI將與首頁的UI一樣) +# default - same as archives UI 默認跟archives頁面UI一樣 +category_ui: # 留空或 index +tag_ui: # 留空或 index -# 設置網站背景 -# 可設置圖片 或者 顔色 -# 圖片格式 background: url(http://xxxxxx.com/xxx.jpg) -# 顔色 background: '#49B202' -# 留空 顯示白色 +# Website Background (設置網站背景) +# can set it to color or image (可設置圖片 或者 顔色) +# The formal of color: '#49B202' +# The formal of image: url(http://xxxxxx.com/xxx.jpg) +# White color will be shown as default background: -# footer是否顯示圖片背景(與top_img一致) +# Show the footer background image (same as top_img) footer_bg: false -# 背景特效 -# 避免卡頓，建議只開啟一個 -# canvas_ribbon 禁止彩帶背景 +# the position of bottom right button/default unit: px (右下角按鈕距離底部的距離/默認單位為px) +rightside-bottom: + +# Background effects (背景特效) +# -------------------------------------- + +# canvas_ribbon (靜止彩帶背景) # See: https://github.com/hustcc/ribbon.js canvas_ribbon: enable: false @@ -409,121 +469,134 @@ canvas_ribbon: alpha: 0.6 zIndex: -1 click_to_change: false - mobile: false # false 手機端不顯示 true 手機端顯示 + mobile: false -# 動態彩帶 +# Dynamic ribbon (動態彩帶) canvas_ribbon_piao: enable: false - mobile: false # false 手機端不顯示 true 手機端顯示 + mobile: false # canvas_nest # https://github.com/hustcc/canvas-nest.js canvas_nest: enable: false - color: "0,0,255" #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.) + color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.) opacity: 0.7 # the opacity of line (0~1), default: 0.5. zIndex: -1 # z-index property of the background, default: -1. count: 99 # the number of lines, default: 99. - mobile: false # false 手機端不顯示 true 手機端顯示 + mobile: false -# 打字效果 +# Typewriter Effect (打字效果) +# https://github.com/disjukr/activate-power-mode activate_power_mode: enable: false - colorful: true # 冒光特效 - shake: true # 抖動特效 + colorful: true # open particle animation (冒光特效) + shake: true # open shake (抖動特效) -# 鼠標點擊效果 -# 避免卡頓，建議只開啟一個 -# 點擊煙火特效 +# Mouse click effects: fireworks (鼠標點擊效果: 煙火特效) fireworks: enable: false + zIndex: 9999 # -1 or 9999 -# 點擊出現愛心 -click_heart: - enable: false +# Mouse click effects: Heart symbol (鼠標點擊效果: 愛心) +click_heart: false -# 點擊出現文字，文字可自行修改 +# Mouse click effects: words (鼠標點擊效果: 文字) ClickShowText: enable: false text: - - 本人 - - 超帥 + - I + - LOVE + - YOU fontSize: 15px -# 網站顯示模式 -# light 默認模式 -# dark 黑暗模式（不建議） +# Default display mode (網站默認的顯示模式) +# light (default) / dark display_mode: light -# 美化頁面顯示 +# Beautify (美化頁面顯示) beautify: enable: false + field: post # site/post title-prefix-icon: '\f0c1' - title-prefix-icon-color: "#F47466" + title-prefix-icon-color: '#F47466' -# 全局字體 +# Global font settings +# Don't modify the following settings unless you know how they work (非必要不要修改) font: - enable: false - font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif - code-font: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number + font-family: + code-font: -# 網站名字字體 +# Font settings for the site title and site subtitle # 左上角網站名字 主頁居中網站名字 blog_title_font: - font_link: https://fonts.googleapis.com/css?family=Titillium+Web #字體鏈接 - font-family: Titillium Web, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif + font_link: https://fonts.googleapis.com/css?family=Titillium+Web&display=swap + font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', Microsoft YaHei', sans-serif -# 水平分隔綫 -hr: - enable: false - icon: '\f21c' #fontawesome上圖標的Unicode - icon-top: -20px +# The setting of divider icon (水平分隔線圖標設置) +hr_icon: + enable: true + icon: # the unicode value of Font Awesome icon + icon-top: -# 主頁subtitle +# the subtitle on homepage (主頁subtitle) subtitle: enable: true - # 打字效果 + # Typewriter Effect (打字效果) effect: true - # 循環或者只打字一次 - loop: false + # loop (循環打字) + loop: true # source調用第三方服務 # source: false 關閉調用 - # source: 1 調用金山詞霸的每日一句（簡體） - # source: 2 調用一言網的一句話（簡體） #https://hitokoto.cn/ + # source: 1 調用搏天api的隨機語錄（簡體） https://api.btstu.cn/ + # source: 2 調用一言網的一句話（簡體） https://hitokoto.cn/ # source: 3 調用一句網（簡體） http://yijuzhan.com/ # source: 4 調用今日詩詞（簡體） https://www.jinrishici.com/ # subtitle 會先顯示 source , 再顯示 sub 的內容 source: false - # (如果有英文逗號' , '，請使用轉義字符 ,) + # 如果有英文逗號' , ',請使用轉義字元 , + # 如果有英文雙引號' " ',請使用轉義字元 " + # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住 # 如果關閉打字效果，subtitle只會顯示sub的第一行文字 sub: - 今日事,今日畢 - Never put off till tomorrow what you can do today -# fontawesome圖標 -# 默認使用的是 fontawesome v4版本的圖標 -fontawesome_v5: - enable: false +# Loading Animation (加載動畫) +preloader: false + +# aside (側邊欄) +# -------------------------------------- -#### 側邊欄 #### -#------------------------------------- -# 側邊欄顯示設置 aside: enable: true - mobile: true # 手機頁面（ 顯示寬度 < 768px ）是否顯示aside內容 + mobile: true # display on mobile position: right # left or right - card_author: true - card_announcement: true - card_recent_post: true - card_categories: true - card_tags: true - card_archives: true + card_author: + enable: true + description: + card_announcement: + enable: true + content: This is my Blog + card_recent_post: + enable: true + limit: 5 # if set 0 will show all + card_categories: + enable: true + limit: 8 # if set 0 will show all + expand: none # none/true/false + card_tags: + enable: true + limit: 40 # if set 0 will show all + color: false + 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 card_webinfo: true -# 網站公告 -announcement: - content: 感謝訪問本站，若喜歡請收藏 ^_^ - # busuanzi count for PV / UV in site # 訪問人數 busuanzi: @@ -531,88 +604,66 @@ busuanzi: site_pv: true page_pv: true -# 網頁開通時間 -# 格式: 月/日/年 時間 -# 也可以寫成 年/月/日 時間 +# Time difference between publish date and now (網頁運行時間) +# Formal: Month/Day/Year Time or Year/Month/Day Time runtimeshow: - enable: true - start_date: 6/7/2018 00:00:00 + enable: false + publish_date: -#### 右下角按鈕 #### -#---------------------------------------------- -# 簡繁轉換 +# Bottom right button (右下角按鈕) +# -------------------------------------- + +# Conversion between Traditional and Simplified Chinese (簡繁轉換) translate: enable: true - # 默認按鈕顯示文字 + # The text of a button default: 繁 - #網站默認語言，1: 繁體中文, 2: 簡體中文 + # the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese） defaultEncoding: 2 - #延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0 + # Time delay translateDelay: 0 - #博客網址 - cookieDomain: "https://xxx/" - #當文字是簡體時，按鈕顯示的文字 - msgToTraditionalChinese: "繁" - #當文字是繁體時，按鈕顯示的文字 - msgToSimplifiedChinese: "簡" + # The text of the button when the language is Simplified Chinese + msgToTraditionalChinese: '繁' + # The text of the button when the language is Traditional Chinese + msgToSimplifiedChinese: '簡' -#閲讀模式 -readmode: - enable: true +# Read Mode (閲讀模式) +readmode: true # dark mode darkmode: enable: true - # dark mode和 light mode切換按鈕 + # Toggle Button to switch dark/light mode button: true - # 自動切換 dark mode和 light mode - # autoChangeMode: 1 跟隨系統而變化，不支持的瀏覽器/系統將按照時間晚上6點到早上6點之間切換為 dark mode - # autoChangeMode: 2 只按照時間晚上6點到早上6點之間切換為 dark mode - # autoChangeMode: false 取消自動切換 - autoChangeMode: 1 + # Switch dark/light mode automatically (自動切換 dark mode和 light mode) + # autoChangeMode: 1 Following System Settings, if the system doesn't support dark mode, it will switch dark mode between 6 pm to 6 am + # autoChangeMode: 2 Switch dark mode between 6 pm to 6 am + # autoChangeMode: false + autoChangeMode: false -#### other #### -#------------------------------------------------ +# Lightbox (圖片大圖查看模式) +# -------------------------------------- +# You can only choose one, or neither (只能選擇一個 或者 兩個都不選) -# 圖片大圖查看模式 -# 可選 medium_zoom 或者 fancybox -# 只選一個 或者 兩個都不選 -#-------------------------------------------- -# medium_zoom https://github.com/francoischalifour/medium-zoom -medium_zoom: +# medium-zoom +# https://github.com/francoischalifour/medium-zoom +medium_zoom: false + +# fancybox +# http://fancyapps.com/fancybox/3/ +fancybox: true + +# Tag Plugins settings (標籤外掛) +# -------------------------------------- + +# mermaid +# see https://github.com/knsv/mermaid +mermaid: enable: false - -# fancybox http://fancyapps.com/fancybox/3/ -fancybox: - enable: true - -# Snackbar 彈窗 -# https://github.com/polonel/SnackBar -# position 彈窗位置 -# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right -snackbar: - enable: false - position: bottom-left - bg_light: "#49b1f5" #light mode時彈窗背景 - bg_dark: "#2d3035" #dark mode時彈窗背景 - -#百度推送 -baidu_push: - enable: false - -# https://instant.page/ -# prefetch預加載 -instantpage: - enable: true - -# https://github.com/vinta/pangu.js -# 中英文之間添加空格 -pangu: - enable: false - field: page # page/post + # built-in themes: default/forest/dark/neutral + theme: default # Note (Bootstrap Callout) -# https://muse.theme-next.org/docs/tag-plugins/note note: # Note tag style values: # - simple bs-callout old alert style. Default. @@ -626,50 +677,86 @@ note: # Offset also applied to label tag variables. This option can work with disabled note tag. light_bg_offset: 0 -# 圖片懶加載 -# https://github.com/aFarkas/lazysizes +# other +# -------------------------------------- + +# Snackbar (Toast Notification 彈窗) +# https://github.com/polonel/SnackBar +# position 彈窗位置 +# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right +snackbar: + enable: false + position: bottom-left + bg_light: '#49b1f5' # The background color of Toast Notification in light mode + bg_dark: '#121212' # The background color of Toast Notification in dark mode + +# Baidu Push (百度推送) +baidu_push: false + +# https://instant.page/ +# prefetch (預加載) +instantpage: true + +# https://github.com/vinta/pangu.js +# Insert a space between Chinese character and English character (中英文之間添加空格) +pangu: + enable: false + field: site # site/post + +# Lazyload (圖片懶加載) +# https://github.com/verlok/lazyload lazyload: enable: true + post: /img/loading.gif -# 避免重複網址分散seo -canonical: true +# PWA +# See https://github.com/JLHwung/hexo-offline +# --------------- +# pwa: +# enable: false +# manifest: /image/pwa/manifest.json +# theme_color: "#fff" +# apple_touch_icon: /image/pwa/apple-touch-icon.png +# favicon_32_32: /image/pwa/32.png +# favicon_16_16: /image/pwa/16.png +# mask_icon: /image/pwa/safari-pinned-tab.svg -# 禁止百度轉碼 +# Disable Baidu transformation on mobile devices (禁止百度轉碼) disable_baidu_transformation: true -# twitter分享自動帶上樣式 -# https://i.loli.net/2019/09/08/qm3RfvUCKbct1Wz.png -twitter_meta: true - -# facebook QQ 等 分享自動帶上樣式 -# https://i.loli.net/2019/09/08/2wbFJEKloisRvhj.png +# Open graph meta tags +# https://developers.facebook.com/docs/sharing/webmasters/ Open_Graph_meta: true -# 開啟hexo自帶的緩存，加快生成速度 +# Caches the contents in a fragment, speed up the generation (開啟hexo自帶的緩存,加快生成速度) fragment_cache: true -# CDN -# 網站必須 -# 可根據需要自行添加js/css -CDN_USE: - css: - - /css/index.css - - js: - - https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js #/js/third-party/jquery.min.js - - /js/utils.js - - /js/main.js +# Inject +# Insert the code to head (before '' tag) and the bottom (before '' tag) +# 插入代码到头部 之前 和 底部 之前 +inject: + head: + # - + bottom: + # - # CDN -# 非必要不要修改 +# Don't modify the following settings unless you know how they work +# 非必要請不要修改 CDN: + # main + main_css: /css/index.css + jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js + main: /js/main.js + utils: /js/utils.js + # comments blueimp_md5: https://cdn.jsdelivr.net/npm/blueimp-md5/js/md5.min.js gitalk: https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js gitalk_css: https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css valine: https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js - disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1.2/dist/disqus.js - disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1.2/dist/disqusjs.css + disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js + disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css utterances: https://utteranc.es/client.js # share @@ -698,10 +785,9 @@ CDN: canvas_ribbon_piao: /js/third-party/piao.js canvas_nest: /js/third-party/canvas-nest.js - lazyload: https://cdn.jsdelivr.net/npm/lazysizes@latest/lazysizes.min.js - instantpage: https://cdn.jsdelivr.net/npm/instant.page@latest/instantpage.min.js + lazyload: https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js + instantpage: https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js typed: https://cdn.jsdelivr.net/npm/typed.js - js_cookies: https://cdn.jsdelivr.net/npm/js-cookie/dist/js.cookie.min.js pangu: https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js # photo @@ -713,7 +799,7 @@ CDN: snackbar_css: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css snackbar: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js - # 鼠標點擊特效 + # effect anime: https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js activate_power_mode: /js/third-party/activate-power-mode.js fireworks: /js/third-party/fireworks.js @@ -721,7 +807,16 @@ CDN: ClickShowText: /js/third-party/ClickShowText.js # fontawesome - fontawesome_v4: https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css - fontawesome_v5: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css + fontawesome: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css + # Conversion between Traditional and Simplified Chinese translate: /js/tw_cn.js + + # justifiedGallery + justifiedGallery_js: https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js + justifiedGallery_css: https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css + + # aplayer + aplayer_css: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css + aplayer_js: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js + meting_js: https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js diff --git a/languages/default.yml b/languages/default.yml index 441e6d5..6c601af 100644 --- a/languages/default.yml +++ b/languages/default.yml @@ -24,7 +24,7 @@ post: created: Created updated: Updated wordcount: Word count - min2read: "Reading time: %s min" + min2read: 'Reading time: %s min' page_pv: Post View comments: Comments copyright: @@ -32,13 +32,13 @@ post: link: Link copyright_notice: Copyright Notice copyright_content: 'All articles in this blog are licensed under %s unless stating additionally.' - recommend: Recommend + recommend: Related Articles search: Search algolia_search: input_placeholder: Search for Posts hits_empty: "We didn't find any results for the search: ${query}." - hits_stats: "${hits} results found in ${time} ms" + hits_stats: '${hits} results found in ${time} ms' local_search: label: Local search @@ -61,7 +61,7 @@ aside: card_tags: Tags card_archives: Archives card_recent_post: Recent Post - card_bookmark: Add to bookmark + card_bookmark: Bookmark card_webinfo: headline: Info article_name: Article @@ -69,6 +69,7 @@ aside: site_wordcount: Total Count site_uv_name: UV site_pv_name: PV + more_button: More donate: Donate share: Share @@ -77,13 +78,13 @@ bookmark: rightside: readmode_title: Read Mode - font_plus_title: Increase font size - font_minus_title: Decrease font size - translate_title: Traditional Chinese and Simplified Chinese Conversion - night_mode_title: Dark Mode - back_to_top: Back to top - toc: Table of Contents - scroll_to_comment: Scroll to comment + font_plus_title: Increase Font Size + font_minus_title: Decrease Font Size + translate_title: Switch Between Traditional Chinese And Simplified Chinese + night_mode_title: Switch Between Light And Dark Mode + back_to_top: Back To Top + toc: Table Of Contents + scroll_to_comment: Scroll To Comments setting: Setting runtime_unit: days @@ -103,4 +104,8 @@ Snackbar: day_to_night: Dark Mode Activated Manually night_to_day: Light Mode Activated Manually -error_title: Page not found +loading: Loading... + +error404: + error_title: Page not found + back_button: Go back home diff --git a/languages/en.yml b/languages/en.yml index 441e6d5..6c601af 100644 --- a/languages/en.yml +++ b/languages/en.yml @@ -24,7 +24,7 @@ post: created: Created updated: Updated wordcount: Word count - min2read: "Reading time: %s min" + min2read: 'Reading time: %s min' page_pv: Post View comments: Comments copyright: @@ -32,13 +32,13 @@ post: link: Link copyright_notice: Copyright Notice copyright_content: 'All articles in this blog are licensed under %s unless stating additionally.' - recommend: Recommend + recommend: Related Articles search: Search algolia_search: input_placeholder: Search for Posts hits_empty: "We didn't find any results for the search: ${query}." - hits_stats: "${hits} results found in ${time} ms" + hits_stats: '${hits} results found in ${time} ms' local_search: label: Local search @@ -61,7 +61,7 @@ aside: card_tags: Tags card_archives: Archives card_recent_post: Recent Post - card_bookmark: Add to bookmark + card_bookmark: Bookmark card_webinfo: headline: Info article_name: Article @@ -69,6 +69,7 @@ aside: site_wordcount: Total Count site_uv_name: UV site_pv_name: PV + more_button: More donate: Donate share: Share @@ -77,13 +78,13 @@ bookmark: rightside: readmode_title: Read Mode - font_plus_title: Increase font size - font_minus_title: Decrease font size - translate_title: Traditional Chinese and Simplified Chinese Conversion - night_mode_title: Dark Mode - back_to_top: Back to top - toc: Table of Contents - scroll_to_comment: Scroll to comment + font_plus_title: Increase Font Size + font_minus_title: Decrease Font Size + translate_title: Switch Between Traditional Chinese And Simplified Chinese + night_mode_title: Switch Between Light And Dark Mode + back_to_top: Back To Top + toc: Table Of Contents + scroll_to_comment: Scroll To Comments setting: Setting runtime_unit: days @@ -103,4 +104,8 @@ Snackbar: day_to_night: Dark Mode Activated Manually night_to_day: Light Mode Activated Manually -error_title: Page not found +loading: Loading... + +error404: + error_title: Page not found + back_button: Go back home diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml index a78d07e..d66990e 100644 --- a/languages/zh-CN.yml +++ b/languages/zh-CN.yml @@ -24,7 +24,7 @@ post: created: 发表于 updated: 更新于 wordcount: 字数总计 - min2read: "阅读时长: %s 分钟" + min2read: '阅读时长: %s 分钟' page_pv: 阅读量 comments: 评论数 copyright: @@ -38,14 +38,14 @@ post: search: 搜索 algolia_search: input_placeholder: 搜索文章 - hits_empty: "找不到您查询的内容:${query}" - hits_stats: "找到 ${hits} 条结果，用时 ${time} 毫秒" + hits_empty: '找不到您查询的内容:${query}' + hits_stats: '找到 ${hits} 条结果，用时 ${time} 毫秒' local_search: label: 本地搜索 input_placeholder: 搜索文章 - hits_empty: "找不到您查询的内容:${query}" - powered: "提供支持" + hits_empty: '找不到您查询的内容:${query}' + powered: '提供支持' by: 由 pagination: @@ -71,6 +71,7 @@ aside: site_wordcount: 本站总字数 site_uv_name: 本站访客数 site_pv_name: 本站总访问量 + more_button: 查看更多 donate: 打赏 share: 分享 @@ -82,7 +83,7 @@ rightside: font_plus_title: 放大字体 font_minus_title: 缩小字体 translate_title: 简繁转换 - night_mode_title: 夜间模式 + night_mode_title: 浅色和深色模式转换 back_to_top: 回到顶部 toc: 目录 scroll_to_comment: 直达评论 @@ -106,3 +107,8 @@ Snackbar: night_to_day: 你已切换为浅色模式 error_title: 页面没有找到 +loading: 加载中... + +error404: + error_title: 页面没有找到 + back_button: 回到主页 diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml index 166be03..0e73531 100644 --- a/languages/zh-TW.yml +++ b/languages/zh-TW.yml @@ -9,7 +9,7 @@ footer: copy: success: 複製成功 error: 複製錯誤 - noSupport: 瀏覽器不支持 + noSupport: 瀏覽器不支援 page: articles: 文章總覽 @@ -24,28 +24,28 @@ post: created: 發表於 updated: 更新於 wordcount: 字數總計 - min2read: "閲讀時長: %s 分鐘" - page_pv: 閲讀量 + min2read: '閱讀時長: %s 分鐘' + page_pv: 閱讀量 comments: 評論數 copyright: author: 文章作者 - link: 文章鏈接 + link: 文章連結 copyright_notice: 版權聲明 - copyright_content: '本博客所有文章除特別聲明外，均採用 + copyright_content: '本部落格所有文章除特別聲明外，均採用 %s 許可協議。轉載請註明來自 %s！' recommend: 相關推薦 -search: 搜索 +search: 搜尋 algolia_search: - input_placeholder: 搜索文章 - hits_empty: "找不到您查詢的內容:${query}" - hits_stats: "找到 ${hits} 條結果，用時 ${time} 毫秒" + input_placeholder: 搜尋文章 + hits_empty: '找不到您查詢的內容:${query}' + hits_stats: '找到 ${hits} 條結果，用時 ${time} 毫秒' local_search: - label: 本地搜索 - input_placeholder: 搜索文章 - hits_empty: "找不到您查詢的內容:${query}" - powered: "提供支持" + label: 本地搜尋 + input_placeholder: 搜尋文章 + hits_empty: '找不到您查詢的內容:${query}' + powered: '提供支援' by: 由 pagination: @@ -67,34 +67,35 @@ aside: card_webinfo: headline: 網站資訊 article_name: 文章數目 - runtime_name: 已運行時間 + runtime_name: 已執行時間 site_wordcount: 本站總字數 site_uv_name: 本站訪客數 site_pv_name: 本站總訪問量 + more_button: 檢視更多 donate: 打賞 share: 分享 bookmark: - title: 添加書籤 + title: 新增書籤 rightside: - readmode_title: 閲讀模式 - font_plus_title: 放大字體 - font_minus_title: 縮小字體 + readmode_title: 閱讀模式 + font_plus_title: 放大字型 + font_minus_title: 縮小字型 translate_title: 簡繁轉換 - night_mode_title: 夜間模式 + night_mode_title: 淺色和深色模式轉換 back_to_top: 回到頂部 toc: 目錄 scroll_to_comment: 直達評論 - setting: 設置 + setting: 設定 runtime_unit: 天 copy_copyright: author: 作者 - link: 鏈接 + link: 連結 source: 來源 - info: 著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。 + info: 著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。 Snackbar: bookmark: @@ -105,6 +106,8 @@ Snackbar: day_to_night: 你已切換為深色模式 night_to_day: 你已切換為淺色模式 -error_title: 頁面沒有找到 - +loading: 載入中... +error404: + error_title: 頁面沒有找到 + back_button: 回到主頁 diff --git a/layout/404.pug b/layout/404.pug index 8ae9438..2de0d72 100644 --- a/layout/404.pug +++ b/layout/404.pug @@ -1,87 +1,30 @@ +- var top_img = theme.error_404.background || theme.default_top_img +- var bg_img = `background-image: url(${url_for(top_img)})` + doctype html html(lang=config.language data-theme=theme.display_mode) head - - var pageTitle = _p('error_title') - - var tabTitle = pageTitle + ' | ' + config.title - - var pageDescription = page.description || page.title || config.description - - var pageKeywords = Array.isArray(config.keywords) ? (config.keywords).join(','): ([]).join(',') || config.keywords - - var pageAuthor = config.email ? config.author + ',' + config.email : config.author - - var pageCopyright = config.copyright || config.author - - var without_html = url.replace('index.html', '') - - var top_img = theme.error_404.background || theme.default_top_img - - var bg_img = `background-image: url(${top_img})` - - - meta(charset='UTF-8') - meta(http-equiv="X-UA-Compatible" content="IE=edge") - meta(name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5") - title= tabTitle - meta(name="description" content=pageDescription) - if pageKeywords - meta(name="keywords" content=pageKeywords) - meta(name="author" content=pageAuthor) - meta(name="copyright" content=pageCopyright) - meta(name ="format-detection" content="telephone=no") - !=favicon_tag(theme.favicon || config.favicon) - //- 預解析 - include includes/head/dns_prefetch.pug - //- 網站驗證 - include includes/head/site_verification.pug - //- Open_Graph - include includes/head/Open_Graph.pug - //- PWA - if (theme.pwa && theme.pwa.enable) - include includes/head/pwa - - script(src=url_for(theme.CDN.js_cookies)) - - if theme.darkmode.enable - include includes/head/darkmode.pug - - each item in theme.CDN_USE.css - link(rel='stylesheet', href=url_for(item)) - - if theme.fontawesome_v5 && theme.fontawesome_v5.enable - link(rel='stylesheet', href=url_for(theme.CDN.fontawesome_v5)) - else - link(rel='stylesheet', href=url_for(theme.CDN.fontawesome_v4)) - - if (theme.snackbar && theme.snackbar.enable) - link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css)) - - if theme.canonical - link(rel="canonical" href=without_html) - - if theme.algolia_search.enable - link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.algolia_search_css)) - script(src=url_for(theme.CDN.algolia_search) defer) - - //- google_adsense - include includes/head/google_adsense.pug - - //- analytics - include includes/head/analytics.pug - - if theme.blog_title_font.font_link - link(rel='stylesheet', href=url_for(theme.blog_title_font.font_link)) - - include includes/head/config.pug - include includes/head/config_site.pug - + include includes/head.pug body + if theme.preloader + !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache}) + if theme.fireworks && theme.fireworks.enable canvas.fireworks - nav#nav.error-no-found(style=bg_img) - include includes/header/header.pug - #error_info.is-center - h1#error_title= '404' - #error_subtitle= theme.error_404.subtitle - include includes/mobile-sidebar/index.pug - include includes/rightside.pug - each item in theme.CDN_USE.js - script(src=url_for(item)) - include includes/additional-js.pug - include includes/search/index.pug + if theme.background + - var is_photo = theme.background.startsWith('url') ? 'photo':'color' + #web_bg(data-type=is_photo) - + #error-wrap + .error-content + .error-img(style=bg_img) + .error-info + h1.error_title= '404' + .error_subtitle= theme.error_404.subtitle + a.button--animated(href=url_for(config.root)) + i.fas.fa-rocket + = _p('error404.back_button') + + !=partial('includes/search/index', {}, {cache:theme.fragment_cache}) + include includes/additional-js.pug diff --git a/layout/category.pug b/layout/category.pug index c8b5cb3..01ad990 100644 --- a/layout/category.pug +++ b/layout/category.pug @@ -2,9 +2,9 @@ extends includes/layout.pug block content if theme.category_ui == 'index' - include ./includes/mixins/UI.pug + include ./includes/mixins/post-ui.pug #recent-posts.recent-posts.category_ui - +UI_NEW(page.posts) + +postUI include includes/pagination.pug else include ./includes/mixins/article-sort.pug diff --git a/layout/flink.pug b/layout/flink.pug index 532dcc5..178f683 100644 --- a/layout/flink.pug +++ b/layout/flink.pug @@ -1,18 +1,21 @@ #page .flink#article-container - each i in site.data.link - h2= i.class_name - .post-cards - .md-links + if site.data.link + each i in site.data.link + if i.class_name + h2!= i.class_name + if i.class_desc + .flink-desc!=i.class_desc + .flink-list each item in i.link_list - .md-links-item - a(href=item.link title=item.name target="_blank") + .flink-list-item + a(href=url_for(item.link) title=item.name target="_blank") if theme.lazyload.enable - img.lazyload(data-src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name ) + img(data-src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name ) else - img(src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name ) - .md-links-title= item.name - .md-links-des= item.descr + img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name ) + .flink-item-name= item.name + .flink-item-desc= item.descr != page.content if page.comments !== false include includes/comments/index.pug diff --git a/layout/includes/additional-js.pug b/layout/includes/additional-js.pug index 9f7804a..effa64e 100644 --- a/layout/includes/additional-js.pug +++ b/layout/includes/additional-js.pug @@ -1,10 +1,14 @@ +script(src=url_for(theme.CDN.jquery)) +script(src=url_for(theme.CDN.utils)) +script(src=url_for(theme.CDN.main)) + if theme.translate && theme.translate.enable script(src=url_for(theme.CDN.translate)) -if (theme.medium_zoom && theme.medium_zoom.enable) +if theme.medium_zoom script(src=url_for(theme.CDN.medium_zoom)) -if (theme.fancybox && theme.fancybox.enable) +if theme.fancybox script(src=url_for(theme.CDN.fancybox)) include ./math/index.pug @@ -35,14 +39,14 @@ if theme.activate_power_mode.enable if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv script(async src=url_for(theme.CDN.busuanzi)) -if theme.instantpage.enable - script(src=url_for(theme.CDN.instantpage) type="module") +if theme.instantpage + script(src=url_for(theme.CDN.instantpage) type="module" defer) if theme.lazyload.enable - script(src=url_for(theme.CDN.lazyload) async="") + script(src=url_for(theme.CDN.lazyload) async) //- 鼠標特效 -if theme.click_heart && theme.click_heart.enable +if theme.click_heart script(src=url_for(theme.CDN.click_heart)) if theme.ClickShowText && theme.ClickShowText.enable @@ -62,4 +66,11 @@ if theme.mermaid.enable include ./math/mermaid.pug if is_home() - include index-js.pug \ No newline at end of file + include ./head/subtitle.pug + +!=fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)}) + +if theme.preloader + !=partial('includes/loading/loading-js', {}, {cache:theme.fragment_cache}) + +!=partial('includes/chat/index', {}, {cache:theme.fragment_cache}) diff --git a/layout/includes/chat/chatra.pug b/layout/includes/chat/chatra.pug new file mode 100644 index 0000000..0566392 --- /dev/null +++ b/layout/includes/chat/chatra.pug @@ -0,0 +1,30 @@ +//- https://chatra.io/help/api/ +script. + (function(d, w, c) { + w.ChatraID = '#{theme.chatra.id}'; + var s = d.createElement('script'); + w[c] = w[c] || function() { + (w[c].q = w[c].q || []).push(arguments); + }; + s.async = true; + s.src = 'https://call.chatra.io/chatra.js'; + if (d.head) d.head.appendChild(s); + })(document, window, 'Chatra'); + + if (!{theme.chat_btn}) { + var chatBtn = document.getElementById("chat_btn") + chatBtn.addEventListener("click", function(){ + Chatra('openChat') + }); + } else { + if (!{theme.chat_hide_show}) { + function chatBtnHide () { + Chatra('hide') + } + function chatBtnShow () { + Chatra('show') + } + } + } + + diff --git a/layout/includes/chat/daovoice.pug b/layout/includes/chat/daovoice.pug new file mode 100644 index 0000000..dd0e047 --- /dev/null +++ b/layout/includes/chat/daovoice.pug @@ -0,0 +1,37 @@ +//- https://guide.daocloud.io/daovoice/javascript-api-5869833.html +script. + (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/!{theme.daovoice.app_id}.js","daovoice") + +script. + var isChatBtn = !{theme.chat_btn} + daovoice('init', { + app_id: '!{theme.daovoice.app_id}',},{ + launcher: { + disableLauncherIcon: isChatBtn // 悬浮 ICON 是否显示 + }, + }); + daovoice('update'); + + if (isChatBtn) { + var chatBtn = document.getElementById("chat_btn") + chatBtn.addEventListener("click", function(){ + daovoice('show') + }); + } else { + if (!{theme.chat_hide_show}) { + function chatBtnHide () { + daovoice('update', {},{ + launcher: { + disableLauncherIcon: true // 悬浮 ICON 是否显示 + }, + }); + } + function chatBtnShow () { + daovoice('update', {},{ + launcher: { + disableLauncherIcon: false // 悬浮 ICON 是否显示 + }, + }); + } + } + } \ No newline at end of file diff --git a/layout/includes/chat/gitter.pug b/layout/includes/chat/gitter.pug new file mode 100644 index 0000000..51cdc0a --- /dev/null +++ b/layout/includes/chat/gitter.pug @@ -0,0 +1,28 @@ +//- https://sidecar.gitter.im/ +script. + var isChatBtn = !{theme.chat_btn} + + if (isChatBtn) { + ((window.gitter = {}).chat = {}).options = { + room: '#{theme.gitter.room}', + activationElement: '#chat_btn' + }; + } else { + ((window.gitter = {}).chat = {}).options = { + room: '#{theme.gitter.room}', + }; + + if (!{theme.chat_hide_show}) { + var gitterBtn = document.getElementsByClassName('gitter-open-chat-button') + + function chatBtnHide () { + gitterBtn[0].style.display= 'none' + } + + function chatBtnShow () { + gitterBtn[0].style.display= 'block' + } + } + } + +script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer) \ No newline at end of file diff --git a/layout/includes/chat/index.pug b/layout/includes/chat/index.pug new file mode 100644 index 0000000..48b8585 --- /dev/null +++ b/layout/includes/chat/index.pug @@ -0,0 +1,8 @@ +if theme.chatra && theme.chatra.enable + include ./chatra.pug +else if theme.tidio && theme.tidio.enable + include ./tidio.pug +else if theme.daovoice && theme.daovoice.enable + include ./daovoice.pug +else if theme.gitter && theme.gitter.enable + include ./gitter.pug \ No newline at end of file diff --git a/layout/includes/chat/tidio.pug b/layout/includes/chat/tidio.pug new file mode 100644 index 0000000..90270a7 --- /dev/null +++ b/layout/includes/chat/tidio.pug @@ -0,0 +1,39 @@ +script(src=`//code.tidio.co/${theme.tidio.public_key}.js` async) + +if theme.chat_btn + script. + (function() { + function onTidioChatApiReady() { + window.tidioChatApi.hide(); + window.tidioChatApi.on("close", function() { + window.tidioChatApi.hide(); + }); + } + if (window.tidioChatApi) { + window.tidioChatApi.on("ready", onTidioChatApiReady); + } else { + document.addEventListener("tidioChat-ready", onTidioChatApiReady); + } + + document.getElementById("chat_btn").addEventListener("click", function(){ + window.tidioChatApi.show(); + window.tidioChatApi.open(); + }); + })(); +else if theme.chat_hide_show + script. + function chatBtnHide () { + if (window.tidioChatApi) { + window.tidioChatApi.hide(); + //- document.getElementById('tidio-chat').style.display= 'none' + } + } + + function chatBtnShow () { + if (window.tidioChatApi) { + window.tidioChatApi.show(); + //- document.getElementById('tidio-chat').style.display= 'block' + } + } + + diff --git a/layout/includes/comments/disqusjs.pug b/layout/includes/comments/disqusjs.pug index d1ddd2f..7d670d2 100644 --- a/layout/includes/comments/disqusjs.pug +++ b/layout/includes/comments/disqusjs.pug @@ -3,12 +3,13 @@ script(src=url_for(theme.CDN.disqusjs)) script. var dsqjs = new DisqusJS({ shortname: '!{theme.disqusjs.shortname}', - siteName: "!{theme.disqusjs.siteName}", + siteName: '!{theme.disqusjs.siteName}', identifier: '!{ page.path }', url: '!{ page.permalink }', title: '!{ page.title }', api: '!{theme.disqusjs.api}', apikey: '!{theme.disqusjs.apikey}', + nocomment: '!{theme.disqusjs.nocomment}', admin: '!{theme.disqusjs.admin}', adminLabel: '!{theme.disqusjs.adminLabel}' }); diff --git a/layout/includes/comments/facebook_comments.pug b/layout/includes/comments/facebook_comments.pug new file mode 100644 index 0000000..50f8838 --- /dev/null +++ b/layout/includes/comments/facebook_comments.pug @@ -0,0 +1,12 @@ +#fb-root +script(async defer crossorigin="anonymous" src=`https://connect.facebook.net/${theme.facebook_comments.lang}/sdk.js#xfbml=1&version=v6.0`) +.fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light' + data-href=urlNoIndex() + data-numposts= theme.facebook_comments.pageSize || 10 + data-order-by= theme.facebook_comments.order_by || 'social' + data-width="100%") + +if theme.darkmode.enable + script. + var themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' + document.getElementsByClassName('fb-comments')[0].setAttribute('data-colorscheme',themeNow) diff --git a/layout/includes/comments/index.pug b/layout/includes/comments/index.pug index 030ae23..a8d1a92 100644 --- a/layout/includes/comments/index.pug +++ b/layout/includes/comments/index.pug @@ -1,26 +1,29 @@ - var d = theme.disqus && theme.disqus.enable - var dj = theme.disqusjs && theme.disqusjs.enable -- var l = theme.laibili && theme.laibili.enable +- var l = theme.livere && theme.livere.enable - var gt = theme.gitalk && theme.gitalk.enable - var v = theme.valine && theme.valine.enable - var u = theme.utterances && theme.utterances.enable -- var isComment = d || dj || l || gt || v || u +- var fb = theme.facebook_comments && theme.facebook_comments.enable +- var isComment = d || dj || l || gt || v || u || fb if isComment hr #post-comment .comment_headling - i.fa.fa-comments.fa-fw(aria-hidden="true") + i.fas.fa-comments.fa-fw span= ' ' + _p('comment') if d include ./disqus.pug else if dj include ./disqusjs.pug else if l - include ./laibili.pug + include ./livere.pug else if gt include ./gitalk.pug else if v include ./valine.pug else if u - include ./utterances.pug \ No newline at end of file + include ./utterances.pug + else if fb + include ./facebook_comments.pug \ No newline at end of file diff --git a/layout/includes/comments/laibili.pug b/layout/includes/comments/livere.pug similarity index 85% rename from layout/includes/comments/laibili.pug rename to layout/includes/comments/livere.pug index cd0fc75..f530901 100644 --- a/layout/includes/comments/laibili.pug +++ b/layout/includes/comments/livere.pug @@ -1,4 +1,4 @@ -#lv-container(data-id="city" data-uid=theme.laibili.uid) +#lv-container(data-id="city" data-uid=theme.livere.uid) script. (function(d, s) { var j, e = d.getElementsByTagName(s)[0]; diff --git a/layout/includes/comments/valine.pug b/layout/includes/comments/valine.pug index 71a771c..d5c7493 100644 --- a/layout/includes/comments/valine.pug +++ b/layout/includes/comments/valine.pug @@ -1,23 +1,35 @@ +- let emojiMaps = '""' +if site.data.valine + - emojiMaps = JSON.stringify(site.data.valine) + #vcomment.vcomment script(src=url_for(theme.CDN.valine)) script. - var GUEST_INFO = ['nick','mail','link']; - var guest_info = '#{ theme.valine.guest_info }'.split(',').filter(function(item){ - return GUEST_INFO.indexOf(item) > -1 - }); - guest_info = guest_info.length == 0 ? GUEST_INFO :guest_info; + var requestSetting = function (from,set) { + var from = from + var setting = set.split(',').filter(function(item){ + return from.indexOf(item) > -1 + }); + setting = setting.length == 0 ? from :setting; + return setting + } + + var guestInfo = requestSetting(['nick','mail','link'],'#{ theme.valine.guest_info }') + var requiredFields = requestSetting(['nick','mail'],'#{ theme.valine.requiredFields }') window.valine = new Valine({ el:'#vcomment', - notify: #{theme.valine.notify}, - verify: #{theme.valine.verify}, appId: '#{theme.valine.appId}', appKey: '#{theme.valine.appKey}', placeholder: '#{theme.valine.placeholder}', avatar: '#{theme.valine.avatar}', - meta: guest_info, + meta: guestInfo, pageSize: '#{theme.valine.pageSize}', lang: '#{theme.valine.lang}', recordIP: #{theme.valine.recordIP}, - serverURLs: '#{theme.valine.serverURLs}' + serverURLs: '#{theme.valine.serverURLs}', + emojiCDN: '#{theme.valine.emojiCDN}', + emojiMaps: !{emojiMaps}, + enableQQ: #{theme.valine.enableQQ}, + requiredFields: requiredFields }); diff --git a/layout/includes/footer.pug b/layout/includes/footer.pug index 30b238f..c1e710d 100644 --- a/layout/includes/footer.pug +++ b/layout/includes/footer.pug @@ -5,7 +5,7 @@ .copyright!= `©${theme.since} - ${nowYear} By ${config.author}` else .copyright!= `©${nowYear} By ${config.author}` - if theme.footer_copyright.enable + if theme.footer_copyright .framework-info span= _p('footer.driven') + ' ' a(href='https://hexo.io') diff --git a/layout/includes/head.pug b/layout/includes/head.pug index 696306f..bb40a6c 100644 --- a/layout/includes/head.pug +++ b/layout/includes/head.pug @@ -1,45 +1,46 @@ -- var pageTitle = page.title || config.title || '' +- var pageTitle - if (is_archive()) pageTitle = _p('page.archives') -- if (is_tag()) pageTitle = _p('page.tag') + ': ' + page.tag -- if (is_category()) pageTitle = _p('page.category') + ': ' + page.category -- if (is_month()) pageTitle += ': ' + page.month + '/' + page.year -- if (is_year()) pageTitle += ': ' + page.year +- else if (is_tag()) pageTitle = _p('page.tag') + ': ' + page.tag +- else if (is_category()) pageTitle = _p('page.category') + ': ' + page.category +- else if (is_month()) pageTitle += ': ' + page.month + '/' + page.year +- else if (is_year()) pageTitle += ': ' + page.year +- else if (is_current('/404.html', [strict])) pageTitle = _p('error404.error_title') +- else pageTitle = page.title || config.title || '' + - var isSubtitle = config.subtitle ? ' - ' + config.subtitle : '' - var tabTitle = is_home() || !pageTitle ? config.title + isSubtitle : pageTitle + ' | ' + config.title -- pageTitle ? '' : pageTitle = config.title || '' -- var pageDescription = page.description || page.title || config.description -- var pageKeywords = Array.isArray(config.keywords) ? (config.keywords).join(','): ([]).join(',') || config.keywords -- if (page.tags && page.tags.data) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',') +- var pageDescription = page_description() +- var pageKeywords +- if (page.keywords) pageKeywords = Array.isArray(page.keywords) ? (page.keywords).join(',') : ([]).join(',') || page.keywords +- else if (page.tags && page.tags.length) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',') +- else pageKeywords = Array.isArray(config.keywords) ? (config.keywords).join(','): ([]).join(',') || config.keywords - var pageAuthor = config.email ? config.author + ',' + config.email : config.author - var pageCopyright = config.copyright || config.author -- var without_html = url.replace('index.html', '') meta(charset='UTF-8') meta(http-equiv="X-UA-Compatible" content="IE=edge") meta(name="viewport" content="width=device-width,initial-scale=1") title= tabTitle -meta(name="description" content=pageDescription) +meta(name="description" content!=pageDescription) if pageKeywords meta(name="keywords" content=pageKeywords) meta(name="author" content=pageAuthor) meta(name="copyright" content=pageCopyright) meta(name ="format-detection" content="telephone=no") !=favicon_tag(theme.favicon || config.favicon) +link(rel="canonical" href=urlNoIndex()) if theme.disable_baidu_transformation meta(http-equiv="Cache-Control" content="no-transform") meta(http-equiv="Cache-Control" content="no-siteapp") -if page.hide == true - meta(name="robots" content="noindex") - if theme.douban if theme.douban.meta && (is_current('/movies/', [strict]) || is_current('/books/', [strict]) || is_current('/games/', [strict])) meta(name="referrer" content="no-referrer") //- 預解析 -!=partial('includes/head/dns_prefetch', {}, {cache:theme.fragment_cache}) +!=partial('includes/head/preconnect', {}, {cache:theme.fragment_cache}) //- 網站驗證 !=partial('includes/head/site_verification', {}, {cache:theme.fragment_cache}) @@ -51,28 +52,19 @@ include ./head/Open_Graph.pug if (theme.pwa && theme.pwa.enable) !=partial('includes/head/pwa', {}, {cache:theme.fragment_cache}) -script(src=url_for(theme.CDN.js_cookies)) - if theme.darkmode.enable !=partial('includes/head/darkmode', {}, {cache:theme.fragment_cache}) -each item in theme.CDN_USE.css - link(rel='stylesheet', href=url_for(item)) +//- main css +link(rel='stylesheet', href=url_for(theme.CDN.main_css)) +link(rel='stylesheet', href=url_for(theme.CDN.fontawesome)) -if theme.fontawesome_v5 && theme.fontawesome_v5.enable - link(rel='stylesheet', href=url_for(theme.CDN.fontawesome_v5)) -else - link(rel='stylesheet', href=url_for(theme.CDN.fontawesome_v4)) - -if (theme.fancybox && theme.fancybox.enable) +if theme.fancybox link(rel='stylesheet', href=url_for(theme.CDN.fancybox_css)) if (theme.snackbar && theme.snackbar.enable) link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css)) -if theme.canonical - link(rel="canonical" href=without_html) - if is_post() if(page.prev) link(rel="prev" title=page.prev.title href=url_for(page.prev.permalink) ) @@ -92,9 +84,17 @@ include ./head/comment.pug //- analytics !=partial('includes/head/analytics', {}, {cache:theme.fragment_cache}) +//- font if theme.blog_title_font.font_link - link(rel='stylesheet', href=url_for(theme.blog_title_font.font_link)) + link(rel='stylesheet' href=url_for(theme.blog_title_font.font_link)) //- global config !=partial('includes/head/config', {}, {cache:theme.fragment_cache}) + include ./head/config_site.pug +include ./head/noscript.pug + +!=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)}) + +if page.aplayer + include ./head/aplayer.pug \ No newline at end of file diff --git a/layout/includes/head/Open_Graph.pug b/layout/includes/head/Open_Graph.pug index ff4a39b..78d04c8 100644 --- a/layout/includes/head/Open_Graph.pug +++ b/layout/includes/head/Open_Graph.pug @@ -1,17 +1,12 @@ - var contentType = is_post() ? 'article' : 'website' -//- twitter meta -if theme.twitter_meta - meta(name="twitter:card" content="summary") - meta(name="twitter:title" content=pageTitle) - meta(name="twitter:description" content=pageDescription) - meta(name="twitter:image" content=full_url_for(page.cover || theme.avatar.img)) - -//- Open_Graph if theme.Open_Graph_meta meta(property="og:type" content=contentType) meta(property="og:title" content=pageTitle) - meta(property="og:url" content=without_html) + meta(property="og:url" content=urlNoIndex()) meta(property="og:site_name" content=config.title) - meta(property="og:description" content=pageDescription) + meta(property="og:description" content!=pageDescription) meta(property="og:image" content=full_url_for(page.cover || theme.avatar.img)) + meta(property="article:published_time" content=date_xml(page.date)) + meta(property="article:modified_time" content=date_xml(page.updated)) + meta(name="twitter:card" content="summary") diff --git a/layout/includes/head/aplayer.pug b/layout/includes/head/aplayer.pug new file mode 100644 index 0000000..c7aa010 --- /dev/null +++ b/layout/includes/head/aplayer.pug @@ -0,0 +1,3 @@ +link(rel='stylesheet' href=url_for(theme.CDN.aplayer_css)) +script(src=url_for(theme.CDN.aplayer_js)) +script(src=url_for(theme.CDN.meting_js)) \ No newline at end of file diff --git a/layout/includes/head/comment.pug b/layout/includes/head/comment.pug index 91d5cf0..3597780 100644 --- a/layout/includes/head/comment.pug +++ b/layout/includes/head/comment.pug @@ -1,3 +1,9 @@ +if (theme.facebook_comments.enable && page.comments !== false && !is_tag() && !is_category() && !is_archive() && !is_home()) + if theme.facebook_comments.app_id + meta(property="fb:app_id" content=theme.facebook_comments.app_id ) + if theme.facebook_comments.user_id + meta(property="fb:admins" content=theme.facebook_comments.user_id) + if (theme.disqusjs && theme.disqusjs.enable && page.comments !== false && !is_tag() && !is_category() && !is_archive() && !is_home()) link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.disqusjs_css)) diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug index 88a8633..3ffe6d2 100644 --- a/layout/includes/head/config.pug +++ b/layout/includes/head/config.pug @@ -31,7 +31,6 @@ translate = JSON.stringify({ defaultEncoding: theme.translate.defaultEncoding, translateDelay: theme.translate.translateDelay, - cookieDomain: theme.translate.cookieDomain, msgToTraditionalChinese: theme.translate.msgToTraditionalChinese, msgToSimplifiedChinese: theme.translate.msgToSimplifiedChinese }) @@ -42,7 +41,7 @@ copyright = JSON.stringify({ languages: { author: _p("copy_copyright.author") + ': ' + config.author, - link: _p("copy_copyright.link") + ': ' + without_html, + link: _p("copy_copyright.link") + ': ', source: _p("copy_copyright.source") + ': ' + config.title, info: _p("copy_copyright.info") } @@ -60,9 +59,8 @@ var Snackbar = 'undefined'; if (theme.snackbar && theme.snackbar.enable) { - Snackbar = JSON.stringify({ + Snackbar = JSON.stringify({ bookmark: { - title: _p("Snackbar.bookmark.title"), message_prev: _p("Snackbar.bookmark.message_prev"), message_next: _p("Snackbar.bookmark.message_next") }, @@ -76,16 +74,6 @@ }) } - var highlightCopy = theme.highlight_copy - var highlightLang = theme.highlight_lang - var highlightShrink = theme.highlight_shrink - var runtime = theme.runtimeshow.enable - var fancybox = theme.fancybox.enable - var medium_zoom = theme.medium_zoom.enable - var baiduPush = theme.baidu_push && theme.baidu_push.enable - var isFontAwesomeV5 = theme.fontawesome_v5 && theme.fontawesome_v5.enable - - script. var GLOBAL_CONFIG = { root: '!{config.root}', @@ -98,22 +86,25 @@ script. noSupport: '!{_p("copy.noSupport")}' }, bookmark: { - title: '!{_p("Snackbar.bookmark.title")}', message_prev: '!{_p("Snackbar.bookmark.message_prev")}', message_next: '!{_p("Snackbar.bookmark.message_next")}' }, runtime_unit: '!{_p("runtime_unit")}', - runtime: !{runtime}, + runtime: !{theme.runtimeshow.enable}, copyright: !{copyright}, ClickShowText: !{ClickShowText}, - medium_zoom: !{medium_zoom}, - fancybox: !{fancybox}, + medium_zoom: !{theme.medium_zoom}, + fancybox: !{theme.fancybox}, Snackbar: !{Snackbar}, - baiduPush: !{baiduPush}, - highlightCopy: !{highlightCopy}, - highlightLang: !{highlightLang}, - highlightShrink: !{highlightShrink}, - isFontAwesomeV5: !{isFontAwesomeV5} - + justifiedGallery: { + js: '!{theme.CDN.justifiedGallery_js}', + css: '!{theme.CDN.justifiedGallery_css}' + }, + baiduPush: !{theme.baidu_push}, + highlightCopy: !{theme.highlight_copy}, + highlightLang: !{theme.highlight_lang}, + isPhotoFigcaption: !{theme.photofigcaption}, + islazyload: !{theme.lazyload.enable}, + isanchor: !{theme.anchor} } diff --git a/layout/includes/head/config_site.pug b/layout/includes/head/config_site.pug index 1e5ed9e..84167e8 100644 --- a/layout/includes/head/config_site.pug +++ b/layout/includes/head/config_site.pug @@ -1,6 +1,17 @@ +- + let isHighlightShrink + if (theme.highlight_shrink == 'none') isHighlightShrink = 'undefined' + else if (page.highlight_shrink !== null && page.toc !== undefined ) isHighlightShrink = page.highlight_shrink + else isHighlightShrink = theme.highlight_shrink + + const pageToc = page.toc !== null && page.toc !== undefined ? page.toc : theme.toc.enable + const showToc = is_post() && pageToc && (toc(page.content) !== '' || page.encrypt == true ) +- + script. var GLOBAL_CONFIG_SITE = { isPost: !{is_post()}, - isHome: !{is_home()} - } - + isHome: !{is_home()}, + isHighlightShrink: !{isHighlightShrink}, + isSidebar: !{showToc} + } diff --git a/layout/includes/head/darkmode.pug b/layout/includes/head/darkmode.pug index e6adeab..cc1a27b 100644 --- a/layout/includes/head/darkmode.pug +++ b/layout/includes/head/darkmode.pug @@ -1,47 +1,56 @@ script. - const autoChangeMode = '#{theme.darkmode.autoChangeMode}' - var t = Cookies.get("theme") - if (autoChangeMode == '1'){ - const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches - const isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches - const isNotSpecified = window.matchMedia("(prefers-color-scheme: no-preference)").matches - const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified + var activateDarkMode = function () { + document.documentElement.setAttribute('data-theme', 'dark') + if (document.querySelector('meta[name="theme-color"]') !== null) { + document.querySelector('meta[name="theme-color"]').setAttribute('content', '#000') + } + } + var activateLightMode = function () { + document.documentElement.setAttribute('data-theme', 'light') + if (document.querySelector('meta[name="theme-color"]') !== null) { + document.querySelector('meta[name="theme-color"]').setAttribute('content', '#fff') + } + } - if (t === undefined){ + var getCookies = function (name) { + const value = `; ${document.cookie}` + const parts = value.split(`; ${name}=`) + if (parts.length === 2) return parts.pop().split(';').shift() + } + + var autoChangeMode = '#{theme.darkmode.autoChangeMode}' + var t = getCookies('theme') + if (autoChangeMode === '1') { + var isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches + var isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches + var isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches + var hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified + + if (t === undefined) { if (isLightMode) activateLightMode() else if (isDarkMode) activateDarkMode() - else if (isNotSpecified || hasNoSupport){ + else if (isNotSpecified || hasNoSupport) { console.log('You specified no preference for a color scheme or your browser does not support it. I Schedule dark mode during night time.') - now = new Date(); - hour = now.getHours(); - isNight = hour < 6 || hour >= 18 + var now = new Date() + var hour = now.getHours() + var isNight = hour <= 6 || hour >= 18 isNight ? activateDarkMode() : activateLightMode() - } - } else if (t == 'light') activateLightMode() + } + window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) { + if (Cookies.get('theme') === undefined) { + e.matches ? activateDarkMode() : activateLightMode() + } + }) + } else if (t === 'light') activateLightMode() else activateDarkMode() - - } else if (autoChangeMode == '2'){ - now = new Date(); - hour = now.getHours(); - isNight = hour < 6 || hour >= 18 - if(t === undefined) isNight? activateDarkMode() : activateLightMode() + } else if (autoChangeMode === '2') { + now = new Date() + hour = now.getHours() + isNight = hour <= 6 || hour >= 18 + if (t === undefined) isNight ? activateDarkMode() : activateLightMode() else if (t === 'light') activateLightMode() - else activateDarkMode() + else activateDarkMode() } else { - if ( t == 'dark' ) activateDarkMode() - else if ( t == 'light') activateLightMode() + if (t === 'dark') activateDarkMode() + else if (t === 'light') activateLightMode() } - - function activateDarkMode(){ - document.documentElement.setAttribute('data-theme', 'dark') - if (document.querySelector('meta[name="theme-color"]') !== null){ - document.querySelector('meta[name="theme-color"]').setAttribute('content','#000') - } - } - function activateLightMode(){ - document.documentElement.setAttribute('data-theme', 'light') - if (document.querySelector('meta[name="theme-color"]') !== null){ - document.querySelector('meta[name="theme-color"]').setAttribute('content','#fff') - } - } - diff --git a/layout/includes/head/dns_prefetch.pug b/layout/includes/head/dns_prefetch.pug deleted file mode 100644 index 1bfccf7..0000000 --- a/layout/includes/head/dns_prefetch.pug +++ /dev/null @@ -1,16 +0,0 @@ -link(rel="preconnect" href="//cdn.jsdelivr.net") - -if theme.google_analytics - link(rel="preconnect" href="https://www.google-analytics.com" crossorigin) - -if theme.baidu_analytics - link(rel="preconnect" href="https://hm.baidu.com") - -if theme.tencent_analytics - link(rel="preconnect" href="http://ta.qq.com") - -if theme.blog_title_font.font_link - link(rel="preconnect" href="https://fonts.googleapis.com" crossorigin) - -if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv - link(rel="preconnect" href="//busuanzi.ibruce.info") diff --git a/layout/includes/head/noscript.pug b/layout/includes/head/noscript.pug new file mode 100644 index 0000000..761826c --- /dev/null +++ b/layout/includes/head/noscript.pug @@ -0,0 +1,9 @@ +noscript. + \ No newline at end of file diff --git a/layout/includes/head/preconnect.pug b/layout/includes/head/preconnect.pug new file mode 100644 index 0000000..2d99293 --- /dev/null +++ b/layout/includes/head/preconnect.pug @@ -0,0 +1,19 @@ +link(rel="preconnect" href="//cdn.jsdelivr.net") + +if theme.google_analytics + link(rel="preconnect" href="//www.google-analytics.com" crossorigin) + +if theme.baidu_analytics + link(rel="preconnect" href="//hm.baidu.com") + +if theme.tencent_analytics + link(rel="preconnect" href="//ta.qq.com") + +if 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) + +if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv + link(rel="preconnect" href="//busuanzi.ibruce.info") + +if theme.baidu_push + link(rel="preconnect" href="//zz.bdstatic.com") diff --git a/layout/includes/head/subtitle.pug b/layout/includes/head/subtitle.pug new file mode 100644 index 0000000..8f73b82 --- /dev/null +++ b/layout/includes/head/subtitle.pug @@ -0,0 +1,130 @@ +if theme.subtitle.enable + - var source = theme.subtitle.source + - var subtitleEffect = theme.subtitle.effect + + if subtitleEffect + script(src=url_for(theme.CDN.typed)) + + if source == '1' + script. + var subtitleType = function () { + var subtitleEffect = !{ subtitleEffect } + fetch('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json',) + .then(function (res) { + return res.json() + }) + .then(function (data) { + if (subtitleEffect) { + var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',') + var both = sub.unshift(data.text) + var typed = new Typed('#subtitle', { + strings: sub, + startDelay: 300, + typeSpeed: 150, + loop: !{theme.subtitle.loop}, + backSpeed: 50, + }) + } else { + document.getElementById('subtitle').innerHTML = data.text + } + }) + .catch(function (err) { + console.error(err) + }) + } + window.addEventListener('load', subtitleType) + + else if source == '2' + script. + var subtitleType = function () { + var subtitleEffect = !{ subtitleEffect } + fetch('https://v1.hitokoto.cn') + .then(function (res) { + return res.json() + }) + .then(function (data) { + if (subtitleEffect) { + var from = '出自 ' + data.from + var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',') + var both = sub.unshift(data.hitokoto, from) + var typed = new Typed('#subtitle', { + strings: sub, + startDelay: 300, + typeSpeed: 150, + loop: !{theme.subtitle.loop}, + backSpeed: 50, + }) + } else { + document.getElementById('subtitle').innerHTML = data.hitokoto + } + }) + .catch(function (err) { + console.error(err) + }) + } + window.addEventListener('load', subtitleType) + + else if source == '3' + script. + var subtitleType = function () { + loadScript('http://yijuzhan.com/api/word.php?m=js', function () { + var subtitleEffect = !{ subtitleEffect } + var con = str[0] + if (subtitleEffect) { + var from = '出自 ' + str[1] + var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',') + var both = sub.unshift(con, from) + var typed = new Typed('#subtitle', { + strings: sub, + startDelay: 300, + typeSpeed: 150, + loop: !{theme.subtitle.loop}, + backSpeed: 50, + }) + } else { + document.getElementById('subtitle').innerHTML = con + } + }) + } + window.addEventListener('load', subtitleType) + + else if source == '4' + script. + var subtitleType = function () { + loadScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js',function () { + var subtitleEffect = !{ subtitleEffect } + jinrishici.load(function (result) { + if (subtitleEffect) { + var sub = "!{theme.subtitle.sub}".length == 0 ? new Array() : "!{theme.subtitle.sub}".split(',') + var content = result.data.content + var both = sub.unshift(content) + var typed = new Typed('#subtitle', { + strings: sub, + startDelay: 300, + typeSpeed: 150, + loop: !{theme.subtitle.loop}, + backSpeed: 50, + }) + } else { + document.getElementById('subtitle').innerHTML = result.data.content + } + }) + } + ) + } + window.addEventListener('load', subtitleType) + + else + script. + var subtitleEffect = !{subtitleEffect} + if (subtitleEffect) { + var typed = new Typed("#subtitle", { + strings: "!{theme.subtitle.sub}".split(","), + startDelay: 300, + typeSpeed: 150, + loop: !{theme.subtitle.loop}, + backSpeed: 50 + }) + } else { + document.getElementById("subtitle").innerHTML = '!{theme.subtitle.sub[0]}' + } diff --git a/layout/includes/header/header.pug b/layout/includes/header/header.pug deleted file mode 100644 index 9346dd0..0000000 --- a/layout/includes/header/header.pug +++ /dev/null @@ -1,15 +0,0 @@ -#page-header - span#blog_name.pull_left - a#site-name.blog_title(href=url_for('/')) #[=config.title] - span.toggle-menu.pull_right.close - a.site-page - i.fa.fa-bars.fa-fw(aria-hidden="true") - span.pull_right.menus - .menus_items - include ./menu_item.pug - - if (theme.algolia_search.enable || theme.local_search && theme.local_search.enable) - span#search_button.pull_right - a.site-page.social-icon.search - i.fa.fa-search.fa-fw - span=' '+_p('search') diff --git a/layout/includes/header/index.pug b/layout/includes/header/index.pug index b3c9d9d..16f6ab3 100644 --- a/layout/includes/header/index.pug +++ b/layout/includes/header/index.pug @@ -19,13 +19,13 @@ if theme.douban else if is_current('/games/', [strict]) - var top_img = theme.douban.games_img || theme.default_top_img -- var bg_img = top_img && top_img !== true ? `background-image: url(${top_img})` : '' +- var bg_img = top_img && top_img !== true ? `background-image: url(${url_for(top_img)})` : '' - var site_title = is_archive() ? _p('page.archives') : page.title || page.tag || page.category || config.title - var isHomeClass = is_home() ? 'full_page' : 'not-index-bg' - is_post() ? isHomeClass = 'post-bg' : isHomeClass -#nav(class=isHomeClass style=bg_img) - !=partial('includes/header/header', {}, {cache:theme.fragment_cache}) +header#page-header(class=isHomeClass style=bg_img) + !=partial('includes/header/nav', {}, {cache:theme.fragment_cache}) if is_home() #site-info h1#site_title=site_title @@ -33,11 +33,9 @@ if theme.douban span#subtitle if(theme.social) #site_social_icons - each url, icon in theme.social - a.social-icon(href=url target="_blank") - i(class=icon aria-hidden="true") + !=fragment_cache('social', function(){return partial('includes/header/social')}) #scroll_down - i.fa.fa-angle-down.scroll-down-effects + i.fas.fa-angle-down.scroll-down-effects else if is_post() include ./post-info.pug else diff --git a/layout/includes/header/menu_item.pug b/layout/includes/header/menu_item.pug index cb7c719..f029ad0 100644 --- a/layout/includes/header/menu_item.pug +++ b/layout/includes/header/menu_item.pug @@ -1,18 +1,22 @@ -each value, label in theme.menu - if !Array.isArray(value) - .menus_item - a.site-page(href=url_for(trim(value.split('||')[0]))) - i.fa-fw(class=trim(value.split('||')[1])) - span=' '+label - else - .menus_item - a.site-page - i.fa-fw(class=trim(label.split('||')[1]) aria-hidden="true") - span=' '+ trim(label.split('||')[0]) - i.fa.fa-chevron-down.menus-expand(aria-hidden="true") - ul.menus_item_child - each i in value - li - a.site-page(href=url_for(trim(i.split('||')[1]))) - i.fa-fw(class=trim(i.split('||')[2])) - span=' '+trim(i.split('||')[0]) \ No newline at end of file +.menus_items + each value, label in theme.menu + if !Array.isArray(value) + .menus_item + a.site-page(href=url_for(trim(value.split('||')[0]))) + if value.split('||')[1] + i.fa-fw(class=trim(value.split('||')[1])) + span=' '+label + else + .menus_item + a.site-page + if label.split('||')[1] + i.fa-fw(class=trim(label.split('||')[1]) ) + span=' '+ trim(label.split('||')[0]) + i.fas.fa-chevron-down.menus-expand + ul.menus_item_child + each i in value + li + a.site-page(href=url_for(trim(i.split('||')[1]))) + if i.split('||')[2] + i.fa-fw(class=trim(i.split('||')[2])) + span=' '+trim(i.split('||')[0]) \ No newline at end of file diff --git a/layout/includes/header/nav.pug b/layout/includes/header/nav.pug new file mode 100644 index 0000000..79bf9d6 --- /dev/null +++ b/layout/includes/header/nav.pug @@ -0,0 +1,17 @@ +nav#nav + span#blog_name.pull-left + a#site-name.blog_title(href=url_for('/')) #[=config.title] + + span.pull-right.menus + if (theme.algolia_search.enable || theme.local_search && theme.local_search.enable) + #search_button + a.site-page.social-icon.search + i.fas.fa-search.fa-fw + span=' '+_p('search') + !=fragment_cache('menus', function(){return partial('includes/header/menu_item')}) + + span.toggle-menu.close + a.site-page + i.fas.fa-bars.fa-fw + + diff --git a/layout/includes/header/post-info.pug b/layout/includes/header/post-info.pug index 1737790..63439df 100644 --- a/layout/includes/header/post-info.pug +++ b/layout/includes/header/post-info.pug @@ -7,18 +7,20 @@ if (theme.post_meta.post.date_type) if (theme.post_meta.post.date_type === 'both') time.post-meta__date - i.fa.fa-calendar(aria-hidden="true") - =' '+_p('post.created')+' '+date(page.date, config.date_format) + span.post-meta__date-created(title= _p('post.created')+' '+full_date(page.date)) + i.far.fa-calendar-alt.fa-fw + =' '+_p('post.created')+' '+date(page.date, config.date_format) span.post-meta__separator | - i.fa.fa-history(aria-hidden="true") - =' '+_p('post.updated')+' '+date(page.updated, config.date_format) + span.post-meta__date-updated(title= _p('post.updated')+' '+full_date(page.updated)) + i.fas.fa-history.fa-fw + =' '+_p('post.updated')+' '+date(page.updated, config.date_format) else - var data_type_update = theme.post_meta.post.date_type === 'updated' - var date_type = data_type_update ? 'updated' : 'date' - - var date_icon = data_type_update ? 'fa-history' :'fa-calendar' + - var date_icon = data_type_update ? 'fas fa-history' :'far fa-calendar-alt' - var data_info = data_type_update ? _p('post.updated') : _p('post.created') - time.post-meta__date - i.fa(class=date_icon aria-hidden="true") + time.post-meta__date(title=data_info + ' ' + full_date(page[date_type])) + i.fa-fw(class=date_icon) =' ' + data_info + ' ' + date(page[date_type], config.date_format) if (theme.post_meta.post.categories && page.categories.data.length > 0) @@ -27,25 +29,23 @@ span.post-meta__separator | each item, index in page.categories.data - i.fa.fa-inbox.post-meta__icon(aria-hidden="true") + i.fas.fa-inbox.fa-fw.post-meta__icon a(href=url_for(item.path)).post-meta__categories #[=item.name] if (index < page.categories.data.length - 1) - i.fa.fa-angle-right.post-meta__separator(aria-hidden="true") + i.fas.fa-angle-right.post-meta__separator .meta-secondline - - let postWordcount = theme.wordcount.post_wordcount || theme.wordcount.min2read + - let postWordcount = theme.wordcount.enable && (theme.wordcount.post_wordcount || theme.wordcount.min2read) if (postWordcount) span.post-meta-wordcount if theme.wordcount.post_wordcount - - var wordCountIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-file-word' : 'fa fa-file-word-o' - i.post-meta__icon(class=wordCountIcon aria-hidden="true") + i.far.fa-file-word.fa-fw.post-meta__icon span= _p('post.wordcount') + ':' span.word-count= wordcount(page.content) if theme.wordcount.min2read span.post-meta__separator | if theme.wordcount.min2read - - var readCountIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-clock' : 'fa fa-clock-o' - i.post-meta__icon(class=readCountIcon aria-hidden="true") + i.far.fa-clock.fa-fw.post-meta__icon span= _p('post.min2read', min2read(page.content, {cn: 350, en: 160})) .meta-thirdline @@ -53,30 +53,36 @@ if (postWordcount && theme.busuanzi.page_pv) span.post-meta__separator | if theme.busuanzi.page_pv - i.fa.fa-eye.post-meta__icon(aria-hidden="true") + i.far.fa-eye.fa-fw.post-meta__icon span=_p('post.page_pv') + ':' span#busuanzi_value_page_pv span.post-meta-commentcount - - var commentCount = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-comments' : 'fa fa-comment-o' if ((theme.disqus && theme.disqus.enable && theme.disqus.count && page.comments !== false) || (theme.disqusjs && theme.disqusjs.enable && theme.disqusjs.count && page.comments !== false)) - if (theme.busuanzi && theme.busuanzi.page_pv) + if (postWordcount || theme.busuanzi.page_pv) span.post-meta__separator | - i.post-meta__icon(class=commentCount aria-hidden="true") + i.far.fa-comments.fa-fw.post-meta__icon span= _p('post.comments') + ':' span.disqus-comment-count.comment-count a(href=full_url_for(page.path) + '#disqus_thread') else if (theme.valine && theme.valine.enable && theme.valine.count && page.comments !== false) - if (theme.busuanzi && theme.busuanzi.page_pv) + if (postWordcount || theme.busuanzi.page_pv) span.post-meta__separator | - i.post-meta__icon(class=commentCount aria-hidden="true") + i.far.fa-comments.fa-fw.post-meta__icon span= _p('post.comments') + ':' a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl") span.valine-comment-count.comment-count(data-xid=url_for(page.path) itemprop="commentCount") else if (theme.gitalk && theme.gitalk.enable && theme.gitalk.count && page.comments !== false) - if (theme.busuanzi && theme.busuanzi.page_pv) + if (postWordcount || theme.busuanzi.page_pv) span.post-meta__separator | - i.post-meta__icon(class=commentCount aria-hidden="true") + i.far.fa-comments.fa-fw.post-meta__icon span= _p('post.comments') + ':' a(href=url_for(page.path) + '#post-comment') span.gitalk-comment-count.comment-count + else if theme.facebook_comments.enable && theme.facebook_comments.count && page.comments !== false + if (postWordcount || theme.busuanzi.page_pv) + span.post-meta__separator | + i.far.fa-comments.fa-fw.post-meta__icon + span= _p('post.comments') + ':' + a.comment-count(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/header/social.pug b/layout/includes/header/social.pug new file mode 100644 index 0000000..80adfe9 --- /dev/null +++ b/layout/includes/header/social.pug @@ -0,0 +1,4 @@ +each url, icon in theme.social + a.social-icon(href=url_for(trim(url.split('||')[0])) target="_blank" + title=url.split('||')[1] === undefined ? '' : trim(url.split('||')[1])) + i(class=icon) \ No newline at end of file diff --git a/layout/includes/index-js.pug b/layout/includes/index-js.pug deleted file mode 100644 index cdbb734..0000000 --- a/layout/includes/index-js.pug +++ /dev/null @@ -1,116 +0,0 @@ -if theme.subtitle.enable - - let source = theme.subtitle.source - - let subtitleEffect = theme.subtitle.effect - - if subtitleEffect - script(src=url_for(theme.CDN.typed)) - - if source == '1' - script. - let subtitleEffect = !{subtitleEffect} - fetch('https://api.ooopn.com/ciba/api.php',) - .then(function (res){ - return res.json(); - }) - .then(function (data) { - if (subtitleEffect){ - let sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(","); - let both = sub.unshift(data['ciba-en'],data.ciba) - let typed = new Typed("#subtitle", { - strings: sub, - startDelay: 300, - typeSpeed: 150, - loop: !{theme.subtitle.loop}, - backSpeed: 50 - }); - }else{ - document.getElementById("subtitle").innerHTML = data['ciba-en'] - } - }) - .catch(function (err) { - console.error(err); - }) - - else if source == '2' - script. - let subtitleEffect = !{subtitleEffect} - fetch('https://v1.hitokoto.cn') - .then(function (res){ - return res.json(); - }) - .then(function (data) { - if (subtitleEffect){ - let from = '出自 ' + data.from - let sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(","); - let both = sub.unshift(data.hitokoto,from) - let typed = new Typed("#subtitle", { - strings: sub, - startDelay: 300, - typeSpeed: 150, - loop: !{theme.subtitle.loop}, - backSpeed: 50 - }); - }else{ - document.getElementById("subtitle").innerHTML = data.hitokoto - } - }) - .catch(function (err) { - console.error(err); - }) - - else if source == "3" - script(type="text/javascript" src="http://yijuzhan.com/api/word.php?m=js") - script. - let subtitleEffect = !{subtitleEffect} - let con = str[0]; - if (subtitleEffect){ - let from = "出自 " + str[1]; - let sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(","); - let both = sub.unshift(con,from) - let typed = new Typed("#subtitle", { - strings: sub, - startDelay: 300, - typeSpeed: 150, - loop: !{theme.subtitle.loop}, - backSpeed: 50 - }); - }else{ - document.getElementById("subtitle").innerHTML = con - } - - else if source == '4' - script(type="text/javascript" src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8") - script. - let subtitleEffect = !{subtitleEffect} - jinrishici.load(function(result) { - if (subtitleEffect){ - let sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(","); - let content = result.data.content; - let both = sub.unshift(content) - let typed = new Typed("#subtitle", { - strings: sub, - startDelay: 300, - typeSpeed: 150, - loop: !{theme.subtitle.loop}, - backSpeed: 50 - }); - }else{ - document.getElementById("subtitle").innerHTML = result.data.content - } - }) - - else - - var subtitle = theme.subtitle.sub[0] - script. - let subtitleEffect = !{subtitleEffect} - if (subtitleEffect){ - let typed = new Typed("#subtitle", { - strings: '!{theme.subtitle.sub}'.split(","), - startDelay: 300, - typeSpeed: 150, - loop: !{theme.subtitle.loop}, - backSpeed: 50 - }) - }else{ - document.getElementById("subtitle").innerHTML = '!{subtitle}' - } diff --git a/layout/includes/layout.pug b/layout/includes/layout.pug index a56961d..dae1612 100644 --- a/layout/includes/layout.pug +++ b/layout/includes/layout.pug @@ -1,21 +1,27 @@ - var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : '' -- var autoOpenSidebar = theme.auto_open_sidebar.enable === true ? 'on' : '' +- var pageHighlightShrinkSet = page.highlight_shrink !== undefined ? page.highlight_shrink : theme.highlight_shrink +- var pageHighlightShrink = theme.highlight_shrink !== 'none' && pageHighlightShrinkSet ? 'code-close' : '' doctype html html(lang=config.language data-theme=theme.display_mode) head include ./head.pug body + if theme.preloader + !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache}) + if theme.fireworks && theme.fireworks.enable canvas.fireworks + !=partial('includes/mobile-sidebar/index', {}, {cache:theme.fragment_cache}) - if (is_post() && page.toc != false && theme.toc.enable) - i.fa.fa-arrow-right#toggle-sidebar(aria-hidden="true" class=autoOpenSidebar) - include ./sidebar.pug - #body-wrap + + include ./sidebar.pug + + #body-wrap(class=pageHighlightShrink) if theme.background - - var is_photo = theme.background.substring(3,0) === 'url' ? 'photo':'color' + - var is_photo = theme.background.startsWith('url') ? 'photo':'color' #web_bg(data-type=is_photo) + include ./header/index.pug if (!is_post()) @@ -36,11 +42,7 @@ html(lang=config.language data-theme=theme.display_mode) - var is_bg = theme.footer_bg == false ? 'color' : 'photo' footer#footer(style=footer_bg data-type=is_bg) !=partial('includes/footer', {}, {cache:theme.fragment_cache}) + include ./rightside.pug !=partial('includes/search/index', {}, {cache:theme.fragment_cache}) - each item in theme.CDN_USE.js - script(src=url_for(item)) - include ./additional-js.pug - - - + include ./additional-js.pug \ No newline at end of file diff --git a/layout/includes/loading/loading-js.pug b/layout/includes/loading/loading-js.pug new file mode 100644 index 0000000..93054c5 --- /dev/null +++ b/layout/includes/loading/loading-js.pug @@ -0,0 +1,6 @@ +script. + var endLoading = function () { + document.body.style.overflow = 'auto'; + document.getElementById('loading-box').classList.add("loaded") + } + window.addEventListener('load',endLoading) \ No newline at end of file diff --git a/layout/includes/loading/loading.pug b/layout/includes/loading/loading.pug new file mode 100644 index 0000000..2e4b65f --- /dev/null +++ b/layout/includes/loading/loading.pug @@ -0,0 +1,9 @@ +#loading-box + .loading-left-bg + .loading-right-bg + .spinner-box + .configure-border-1 + .configure-core + .configure-border-2 + .configure-core + .loading-word= _p('loading') diff --git a/layout/includes/mixins/UI.pug b/layout/includes/mixins/UI.pug deleted file mode 100644 index b0e5001..0000000 --- a/layout/includes/mixins/UI.pug +++ /dev/null @@ -1,61 +0,0 @@ -mixin UI_NEW(posts) - - posts.each(function(article,index){ - .recent-post-item - - var link = article.link || article.path - - var post_cover = article.cover - - var title = article.title || _p('no_title') - - var leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius' - - var 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) - if theme.lazyload.enable - img.post_bg.lazyload(data-src=`${post_cover}` alt=title onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'`) - else - img.post_bg(src=`${post_cover}` alt=title onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'`) - .recent-post-info(class=no_cover) - a.article-title(href=url_for(link) title=title)= title - .article-meta-wrap - if (theme.post_meta.page.date_type) - if (theme.post_meta.page.date_type === 'both') - time.post-meta__date - i.fa.fa-calendar(aria-hidden="true") - =date(article.date, config.date_format) - span.article-meta__separator | - i.fa.fa-history(aria-hidden="true") - =date(article.updated, config.date_format) - else - - var date_type = theme.post_meta.page.date_type === 'updated' ? 'updated' : 'date' - - var date_icon = theme.post_meta.page.date_type === 'updated' ? 'fa-history' :'fa-calendar' - time.post-meta__date - i.fa(class=date_icon aria-hidden="true") - =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 | - each item, index in article.categories.data - i.fa.fa-inbox.article-meta__icon(aria-hidden="true") - a(href=url_for(item.path)).article-meta__categories #[=item.name] - if (index < article.categories.data.length - 1) - i.fa.fa-angle-right(aria-hidden="true") - if (theme.post_meta.page.tags && article.tags.data.length > 0) - span.article-meta.tags - span.article-meta__separator | - each item, index in article.tags.data - i.fa.fa-tag.article-meta__icon(aria-hidden="true") - a(href=url_for(item.path)).article-meta__tags #[=item.name] - if (index < article.tags.data.length - 1) - span.article-meta__link - - if theme.auto_excerpt && theme.auto_excerpt.enable - - const content = strip_html(article.content) - - let expert = content.substring(0, theme.auto_excerpt.length) - - content.length > theme.auto_excerpt.length ? expert += ' ...' : '' - .content!= expert - else - .content!= article.description - - if theme.ad && theme.ad.index - if (index + 1) % 3 == 0 - .recent-post-item.ad_height!=theme.ad.index - - - }) \ No newline at end of file diff --git a/layout/includes/mixins/article-sort.pug b/layout/includes/mixins/article-sort.pug index 41801d1..22b35a2 100644 --- a/layout/includes/mixins/article-sort.pug +++ b/layout/includes/mixins/article-sort.pug @@ -11,10 +11,10 @@ mixin articleSort(posts) if article.cover && theme.cover.archives_enable .article-sort-img a.article-sort-item__img(href=url_for(article.path)) - img(src=article.cover alt=article.title || 'No Title' onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'`) + img(src=url_for(article.cover) alt=article.title || 'No Title' onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'`) .article-sort-post a.article-sort-item__post(href=url_for(article.path)) - i.fa.fa-clock-o(aria-hidden="true") - time.article-sort-item__time= date(article.date) + i.far.fa-calendar-alt + time.article-sort-item__time(title=_p('post.created') + ' ' + full_date(article.date))= date(article.date, config.date_format) .article-sort-item__title= article.title || 'No Title' - }) \ No newline at end of file diff --git a/layout/includes/mixins/post-ui.pug b/layout/includes/mixins/post-ui.pug new file mode 100644 index 0000000..e9455d0 --- /dev/null +++ b/layout/includes/mixins/post-ui.pug @@ -0,0 +1,78 @@ +mixin postUI(posts) + each article , index in page.posts.data + .recent-post-item + - var link = article.link || article.path + - var title = article.title || _p('no_title') + - var leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius' + - var post_cover = article.cover + - var 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) + if theme.lazyload.enable + img.post_bg(data-src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title) + else + 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) + a.article-title(href=url_for(link) title=title)= title + .article-meta-wrap + if (is_home() && (article.top || article.sticky > 0)) + span.article-meta + i.fas.fa-thumbtack.article-meta__icon.sticky + span.sticky= _p('sticky') + span.article-meta__separator | + if (theme.post_meta.page.date_type) + if (theme.post_meta.page.date_type === 'both') + time.post-meta__date + span.post-meta__date-created(title=_p('post.created') + ' ' + full_date(article.date)) + i.far.fa-calendar-alt + =date(article.date, config.date_format) + span.article-meta__separator | + span.post-meta__date-updated(title=_p('post.updated') + ' ' + full_date(article.updated)) + i.fas.fa-history + =date(article.updated, config.date_format) + else + - var data_type_updated = theme.post_meta.page.date_type === 'updated' + - var date_type = data_type_updated ? 'updated' : 'date' + - var date_icon = data_type_updated ? 'fas fa-history' :'far fa-calendar-alt' + - var date_title = data_type_updated ? _p('post.updated') : _p('post.created') + time.post-meta__date(title=date_title + ' ' + full_date(article[date_type])) + i(class=date_icon) + =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.article-meta__icon + 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.article-meta__icon + 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 #[='•'] + + //- Display the article introduction on homepage + if theme.index_post_content.method == 1 + .content!= article.description + else if theme.index_post_content.method == 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 + 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 + + if theme.ad && theme.ad.index + if (index + 1) % 3 == 0 + .recent-post-item.ad_height!=theme.ad.index diff --git a/layout/includes/mobile-sidebar/mobile-menus.pug b/layout/includes/mobile-sidebar/mobile-menus.pug index 55580ec..ac562cd 100644 --- a/layout/includes/mobile-sidebar/mobile-menus.pug +++ b/layout/includes/mobile-sidebar/mobile-menus.pug @@ -1,6 +1,6 @@ #mobile-sidebar-menus .mobile_author_icon - img.avatar-img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.lodding_bg.flink}'` alt="avatar") + img.avatar-img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar") .mobile_post_data if site.posts.length .mobile_data_item.is-center @@ -23,5 +23,4 @@ .headline= _p('aside.categories') .length_num= site.categories.length hr - .menus_items - include ../header/menu_item.pug + !=fragment_cache('menus', function(){return partial('includes/header/menu_item')}) diff --git a/layout/includes/pagination.pug b/layout/includes/pagination.pug index 33bf9ae..0783343 100644 --- a/layout/includes/pagination.pug +++ b/layout/includes/pagination.pug @@ -1,7 +1,7 @@ - var options = { - prev_text: '', - next_text: '', + prev_text: '', + next_text: '', mid_size: 1, escape: false } @@ -11,29 +11,29 @@ if(!is_post()) div.pagination !=paginator(options) else - nav#pagination.pagination_post + nav#pagination.pagination-post if(page.prev) - - var hasPageNext = page.prev ? 'pull_left' : 'pull-full' + - var hasPageNext = page.next ? 'pull-left' : 'pull-full' .prev-post(class=hasPageNext) - var pagination_cover = page.prev.cover === false ? page.prev.randomcover : page.prev.cover a(href=url_for(page.prev.path)) if theme.lazyload.enable - img.prev_cover.lazyload(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` ) + img.prev-cover(data-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` ) else - img.prev_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` ) + img.prev-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` ) .pagination-info .label=_p('pagination.prev') .prev_info=page.prev.title if(page.next) - - var hasPagePrev = page.prev ? 'pull_right' : 'pull-full' + - var hasPagePrev = page.prev ? 'pull-right' : 'pull-full' - var pagination_cover = page.next.cover == false ? page.next.randomcover : page.next.cover .next-post(class=hasPagePrev) a(href=url_for(page.next.path)) if theme.lazyload.enable - img.next_cover.lazyload(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) + img.next-cover(data-src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'`) else - img.next_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) + img.next-cover(src=url_for(pagination_cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'`) .pagination-info .label=_p('pagination.next') .next_info=page.next.title \ No newline at end of file diff --git a/layout/includes/post/reward.pug b/layout/includes/post/reward.pug index 8aefea4..3c5ac28 100644 --- a/layout/includes/post/reward.pug +++ b/layout/includes/post/reward.pug @@ -1,11 +1,12 @@ .post-reward - a.reward-button.button--primary.button--animated - i.fa.fa-qrcode + button.reward-button + i.fas.fa-qrcode = ' ' + _p('donate') .reward-main ul.reward-all each item in theme.reward.QR_code + - var clickTo = (item.itemlist||item).link ? (item.itemlist||item).link : (item.itemlist||item).img li.reward-item - img.lazyload.post-qr-code__img(src=url_for((item.itemlist||item).img) alt=(item.itemlist||item).text) + img.post-qr-code__img(src=url_for((item.itemlist||item).img) alt=(item.itemlist||item).text onclick=`window.open('${url_for(clickTo)}')`) .post-qr-code__desc=(item.itemlist||item).text diff --git a/layout/includes/recent-posts.pug b/layout/includes/recent-posts.pug deleted file mode 100644 index 3eeaaf5..0000000 --- a/layout/includes/recent-posts.pug +++ /dev/null @@ -1,63 +0,0 @@ -each article , index in page.posts.data - .recent-post-item - - var link = article.link || article.path - - var title = article.title || _p('no_title') - - var leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius' - - var post_cover = article.cover - - var 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) - if theme.lazyload.enable - img.post_bg.lazyload(data-src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title) - else - img.post_bg(src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title) - .recent-post-info(class=no_cover) - a.article-title(href=url_for(link) title=title)= title - .article-meta-wrap - if (article.top) - span.article-meta - i.fa.fa-thumb-tack.article-meta__icon.sticky - span.sticky= _p('sticky') - span.article-meta__separator | - if (theme.post_meta.page.date_type) - if (theme.post_meta.page.date_type === 'both') - time.post-meta__date - i.fa.fa-calendar(aria-hidden="true") - =date(article.date, config.date_format) - span.article-meta__separator | - i.fa.fa-history(aria-hidden="true") - =date(article.updated, config.date_format) - else - - var date_type = theme.post_meta.page.date_type === 'updated' ? 'updated' : 'date' - - var date_icon = theme.post_meta.page.date_type === 'updated' ? 'fa-history' :'fa-calendar' - time.post-meta__date - i.fa(class=date_icon aria-hidden="true") - =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 | - each item, index in article.categories.data - i.fa.fa-inbox.article-meta__icon(aria-hidden="true") - a(href=url_for(item.path)).article-meta__categories #[=item.name] - if (index < article.categories.data.length - 1) - i.fa.fa-angle-right(aria-hidden="true") - if (theme.post_meta.page.tags && article.tags.data.length > 0) - span.article-meta.tags - span.article-meta__separator | - each item, index in article.tags.data - i.fa.fa-tag.article-meta__icon(aria-hidden="true") - a(href=url_for(item.path)).article-meta__tags #[=item.name] - if (index < article.tags.data.length - 1) - span.article-meta__link - - if theme.auto_excerpt && theme.auto_excerpt.enable - - const content = strip_html(article.content) - - let expert = content.substring(0, theme.auto_excerpt.length) - - content.length > theme.auto_excerpt.length ? expert += ' ...' : '' - .content!= expert - else - .content!= article.description - - if theme.ad && theme.ad.index - if (index + 1) % 3 == 0 - .recent-post-item.ad_height!=theme.ad.index diff --git a/layout/includes/rightside.pug b/layout/includes/rightside.pug index 0c64a3e..90e0dc0 100644 --- a/layout/includes/rightside.pug +++ b/layout/includes/rightside.pug @@ -1,23 +1,32 @@ section#rightside.rightside #rightside-config-hide - if theme.readmode.enable && is_post() - i#readmode.fa.fa-book(title=_p('rightside.readmode_title')) if is_post() - i#font_plus.fa.fa-plus(title=_p('rightside.font_plus_title')) - i#font_minus.fa.fa-minus(title=_p('rightside.font_minus_title')) + if theme.readmode + button#readmode(title=_p('rightside.readmode_title')) + i.fas.fa-book-open + button#font_plus(title=_p('rightside.font_plus_title')) + i.fas.fa-plus + button#font_minus(title=_p('rightside.font_minus_title')) + i.fas.fa-minus if theme.translate && theme.translate.enable - a#translateLink.translate_chn_to_cht(href="javascript:translatePage();" title=_p('rightside.translate_title') target="_self")= theme.translate.default + button#translateLink.translate_chn_to_cht(title=_p('rightside.translate_title'))= theme.translate.default if theme.darkmode.enable && theme.darkmode.button - - var lightModeIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-sun' : 'fa fa-sun-o' - - var darkModeIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-moon' : 'fa fa-moon-o' - - var display_mode = theme.display_mode == 'dark' ? lightModeIcon : darkModeIcon - i#darkmode.darkmode(class=display_mode title=_p('rightside.night_mode_title')) + button#darkmode(title=_p('rightside.night_mode_title')) + i.fas.fa-adjust #rightside-config-show - #rightside_config(title=_p("rightside.setting")) - i.fa.fa-cog(aria-hidden="true") + button#rightside_config(title=_p("rightside.setting")) + i.fas.fa-cog if is_post() && page.comments !== false && isComment a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment")) - i.scroll_to_comment.fa.fa-comments - if is_post() && page.toc != false && theme.toc.enable - i#mobile-toc-button.fa.fa-list-ul.close(title=_p("rightside.toc") aria-hidden="true") - i.fa.fa-arrow-up#go-up(title=_p("rightside.back_to_top") aria-hidden="true") + i.scroll_to_comment.fas.fa-comments + if showToc + button#mobile-toc-button.close(title=_p("rightside.toc")) + i.fas.fa-list-ul + if theme.chat_btn && (theme.chatra.enable || theme.tidio.enable || theme.daovoice.enable || theme.gitter.enable) + button#chat_btn(title=_p("rightside.chat_btn")) + i.fas.fa-sms + + button#go-up(title=_p("rightside.back_to_top")) + i.fas.fa-arrow-up + + diff --git a/layout/includes/search/algolia.pug b/layout/includes/search/algolia.pug index bf4e465..7041dc1 100644 --- a/layout/includes/search/algolia.pug +++ b/layout/includes/search/algolia.pug @@ -8,5 +8,5 @@ #algolia-pagination #algolia-stats span.search-close-button - i.fa.fa-times + i.fas.fa-times .search-mask diff --git a/layout/includes/search/local-search.pug b/layout/includes/search/local-search.pug index 1262d55..74ca4c7 100644 --- a/layout/includes/search/local-search.pug +++ b/layout/includes/search/local-search.pug @@ -19,5 +19,5 @@ span=_p("local_search.powered_by") | #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search] span.search-close-button - i.fa.fa-times + i.fas.fa-times .search-mask \ No newline at end of file diff --git a/layout/includes/share/share-js.pug b/layout/includes/share/share-js.pug index ec12a88..85f84dd 100644 --- a/layout/includes/share/share-js.pug +++ b/layout/includes/share/share-js.pug @@ -1,4 +1,4 @@ if (theme.sharejs && theme.sharejs.enable) - .social-share(data-image= page.cover|| theme.avatar.img data-sites= theme.sharejs.sites) + .social-share(data-image=url_for(page.cover|| theme.avatar.img) data-sites= theme.sharejs.sites) link(rel="stylesheet" href=url_for(theme.CDN.sharejs_css)) script(src=url_for(theme.CDN.sharejs)) \ No newline at end of file diff --git a/layout/includes/sidebar.pug b/layout/includes/sidebar.pug index ac6d5be..c155dab 100644 --- a/layout/includes/sidebar.pug +++ b/layout/includes/sidebar.pug @@ -1,12 +1,12 @@ -#sidebar - - const showToc = is_post() && page.toc != false && theme.toc.enable - - - let tocNumber - if (page.toc_number !== undefined) tocNumber = page.toc_number - else if (theme.toc.number !== undefined) tocNumber = theme.toc.number - else tocNumber = true - - - if(showToc) +- + let tocNumber = page.toc_number !== undefined ? page.toc_number : theme.toc.number + let autoOpenPostSet = page.auto_open == undefined ? theme.toc.auto_open : page.auto_open + let autoOpenSidebar = autoOpenPostSet ? 'on' : '' +- + +if(showToc) + i.fas.fa-arrow-right#toggle-sidebar(class=autoOpenSidebar) + #sidebar .sidebar-toc div.sidebar-toc__title= _p('sidebar.catalog') div.sidebar-toc__progress @@ -18,4 +18,4 @@ div.sidebar-toc__content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber}) else div.sidebar-toc__content!=toc(page.content, {list_number: tocNumber}) - \ No newline at end of file + \ No newline at end of file diff --git a/layout/includes/third-party/pangu.pug b/layout/includes/third-party/pangu.pug index a3ff318..8477369 100644 --- a/layout/includes/third-party/pangu.pug +++ b/layout/includes/third-party/pangu.pug @@ -1,13 +1,12 @@ script(src=url_for(theme.CDN.pangu)) -if theme.pangu.field === 'post' - if is_post() - script. - document.addEventListener('DOMContentLoaded', function() { - pangu.spacingElementById('content-inner') - }) -else if theme.pangu.field === 'page' +if theme.pangu.field === 'post' && is_post() script. document.addEventListener('DOMContentLoaded', function() { - pangu.spacingElementById('content-inner') + pangu.autoSpacingPage() + }) +else if theme.pangu.field === 'site' + script. + document.addEventListener('DOMContentLoaded', function() { + pangu.autoSpacingPage() }) diff --git a/layout/includes/widget/card_announcement.pug b/layout/includes/widget/card_announcement.pug index 4194cf4..5f6fbd1 100644 --- a/layout/includes/widget/card_announcement.pug +++ b/layout/includes/widget/card_announcement.pug @@ -1,6 +1,6 @@ .card-widget.card-announcement .card-content .item-headline - i.fa.fa-bullhorn.card-announcement-animation(aria-hidden="true") + i.fas.fa-bullhorn.card-announcement-animation span= _p('aside.card_announcement') - .announcement_content!= theme.announcement.content \ No newline at end of file + .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 20f79d6..dfb5775 100644 --- a/layout/includes/widget/card_archives.pug +++ b/layout/includes/widget/card_archives.pug @@ -1,6 +1,11 @@ .card-widget.card-archives .card-content .item-headline - i.fa.fa-archive(aria-hidden="true") + i.fas.fa-archive span= _p('aside.card_archives') - != list_archives({type:'monthly',format: 'YYYY年MM月'}) + + - 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 426697d..95fea9d 100644 --- a/layout/includes/widget/card_author.pug +++ b/layout/includes/widget/card_author.pug @@ -1,9 +1,9 @@ .card-widget.card-info .card-content .card-info-avatar.is-center - img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.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__description= config.description + .author-info__description!= theme.aside.card_author.description || config.description .card-info-data if site.posts.length @@ -25,12 +25,10 @@ .length_num= site.categories.length .card-info-bookmark.is-center - a#bookmark-it.bookmark.button--primary.button--animated(href="javascript:;" title= _p('aside.card_bookmark') target="_self") - i.fa.fa-bookmark(aria-hidden="true") + button#bookmark-it.button--animated(title= _p('aside.card_bookmark')) + i.fas.fa-bookmark span= _p('aside.card_bookmark') || 'Follow Me' if(theme.social) .card-info-social-icons.is-center - each url, icon in theme.social - a.social-icon(href=url target="_blank") - i(class=icon aria-hidden="true") + !=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 9470821..55c1827 100644 --- a/layout/includes/widget/card_categories.pug +++ b/layout/includes/widget/card_categories.pug @@ -2,22 +2,8 @@ if site.categories.length .card-widget.card-categories .card-content .item-headline - i.fa.fa-folder-open(aria-hidden="true") + i.fas.fa-folder-open span= _p('aside.card_categories') - ul.aside-category-item - mixin displayCategories(parent = undefined) - - site.categories.find({ parent }).sort("name").each(function(category) { - - var childCount = site.categories.find({ parent: category._id }).count(); - li.aside-category-list - a.aside-category-list_link(href=url_for(category.path)) - span.aside-category-list_name= category.name - span.aside-category-list_length= category.length - - if childCount > 0 - ul.aside-category-item.child - +displayCategories(category._id) - - }) - - +displayCategories() + !=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_recent_post.pug b/layout/includes/widget/card_recent_post.pug index d82fa17..5995c45 100644 --- a/layout/includes/widget/card_recent_post.pug +++ b/layout/includes/widget/card_recent_post.pug @@ -1,10 +1,11 @@ .card-widget.card-recent-post .card-content .item-headline - i.fa.fa-history(aria-hidden="true") + i.fas.fa-history span= _p('aside.card_recent_post') - .aside-recent-item - - site.posts.sort('date', -1).limit(5).each(function(article){ + .aside-recent-item + - var postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5 + - site.posts.sort('date', -1).limit(postLimit).each(function(article){ .aside-recent-post - var link = article.link || article.path - var title = article.title || _p('no_title') @@ -15,13 +16,11 @@ if post_cover && theme.cover.aside_enable .aside-post-cover if theme.lazyload.enable - img.aside-post-bg.lazyload(data-src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` title=title alt=title) + img.aside-post-bg(data-src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` title=title alt=title) else - img.aside-post-bg(src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` title=title alt=title) + img.aside-post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` title=title alt=title) .aside-post-title(class=no_cover) .aside-post_title(href=url_for(link) title=article.title || _p('no_title'))= article.title || _p('no_title') - if (theme.post_meta.page.date_type) - - var date_type = theme.post_meta.page.date_type == 'updated' ? 'updated' : 'date' - time.aside-post_meta.post-meta__date #[=date(article[date_type], config.date_format)] + time.aside-post_meta.post-meta__date(title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)] - }) diff --git a/layout/includes/widget/card_tags.pug b/layout/includes/widget/card_tags.pug index cd4806a..ec472cf 100644 --- a/layout/includes/widget/card_tags.pug +++ b/layout/includes/widget/card_tags.pug @@ -2,6 +2,11 @@ if site.tags.length .card-widget.card-tags .card-content .item-headline - i.fa.fa-tags(aria-hidden="true") + i.fas.fa-tags span= _p('aside.card_tags') - .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: 200, color: true, start_color: '#999', end_color: '#99a9bf'}) + + - 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: 16, maxfontsize: 22, limit: tagLimit}) + else + .card-tag-cloud!= tagcloud({min_font: 16, max_font: 22, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf'}) diff --git a/layout/includes/widget/card_webinfo.pug b/layout/includes/widget/card_webinfo.pug index 6691f7b..ec95659 100644 --- a/layout/includes/widget/card_webinfo.pug +++ b/layout/includes/widget/card_webinfo.pug @@ -1,8 +1,7 @@ -- var webinfoIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'fas fa-chart-line' : 'fa fa-line-chart' .card-widget.card-webinfo .card-content .item-headline - i(class=webinfoIcon aria-hidden="true") + i.fas.fa-chart-line span= _p('aside.card_webinfo.headline') .webinfo .webinfo-item @@ -11,8 +10,8 @@ if theme.runtimeshow.enable .webinfo-item .webinfo-runtime-name= _p('aside.card_webinfo.runtime_name') + " :" - #webinfo-runtime-count.webinfo-runtime-count(start_date=theme.runtimeshow.start_date) - if theme.wordcount.total_wordcount + #webinfo-runtime-count.webinfo-runtime-count(publish_date=theme.runtimeshow.publish_date) + if theme.wordcount.enable && theme.wordcount.total_wordcount .webinfo-item .webinfo-site-wordcount-name=_p('aside.card_webinfo.site_wordcount') + " :" .webinfo-site-wordcount=totalcount(site) diff --git a/layout/includes/widget/index.pug b/layout/includes/widget/index.pug index dc789d4..f37e6c5 100644 --- a/layout/includes/widget/index.pug +++ b/layout/includes/widget/index.pug @@ -1,19 +1,19 @@ if theme.aside.enable if page.aside !== false #aside_content.aside_content - if theme.aside.card_author + if theme.aside.card_author.enable !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache}) - if theme.aside.card_announcement + if theme.aside.card_announcement.enable !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache}) - if theme.aside.card_recent_post + if theme.aside.card_recent_post.enable !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache}) if theme.ad && theme.ad.aside !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache}) - if theme.aside.card_categories + if theme.aside.card_categories.enable !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache}) - if theme.aside.card_tags + if theme.aside.card_tags.enable !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache}) - if theme.aside.card_archives + if theme.aside.card_archives.enable !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache}) if theme.aside.card_webinfo !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache}) \ No newline at end of file diff --git a/layout/index.pug b/layout/index.pug index 36f6860..2655cb4 100644 --- a/layout/index.pug +++ b/layout/index.pug @@ -1,6 +1,7 @@ extends includes/layout.pug block content + include ./includes/mixins/post-ui.pug #recent-posts.recent-posts - include includes/recent-posts.pug + +postUI include includes/pagination.pug \ No newline at end of file diff --git a/layout/page-tags.pug b/layout/page-tags.pug deleted file mode 100644 index 47c569b..0000000 --- a/layout/page-tags.pug +++ /dev/null @@ -1,14 +0,0 @@ -.tag-cloud - .tag-cloud__title= _p('page.tag') - | - - span.tag-cloud__amount= site.tags.length - .tag-cloud-tags - - site.tags.sort('path').each(function (tags){ - - var fontSize = Math.floor(Math.random() * 15 + 15) + "px"; //15 ~ 30 - - var color = "rgb(" + Math.floor(Math.random() * 201) + ", " + Math.floor(Math.random() * 201) +", " + Math.floor(Math.random() * 201) +")"; // 0,0,0 -> 200,200,200 - a(href=url_for(tags.path) style='font-size:' + fontSize + ';color:' + color)=tags.name - -}) - if page.comments !== false - include includes/comments/index.pug - - diff --git a/layout/page.pug b/layout/page.pug index 19411b1..ff3aa6f 100644 --- a/layout/page.pug +++ b/layout/page.pug @@ -2,7 +2,14 @@ extends includes/layout.pug block content if page.type === 'tags' - include page-tags.pug + .tag-cloud + .tag-cloud__title= _p('page.tag') + | - + span.tag-cloud__amount= site.tags.length + .tag-cloud-tags + !=cloudTags({source: site.tags, minfontsize: 15, maxfontsize: 30, limit: 0}) + if page.comments !== false + include includes/comments/index.pug else if page.type === 'link' include flink.pug else if page.type === 'categories' diff --git a/layout/post.pug b/layout/post.pug index 0411099..56b1859 100644 --- a/layout/post.pug +++ b/layout/post.pug @@ -2,7 +2,7 @@ extends includes/layout.pug block content article#post(class="") - #article-container!=page.content + #article-container.post-content!=page.content include includes/post/post-copyright.pug .tag_share if (theme.post_meta.post.tags) diff --git a/layout/tag.pug b/layout/tag.pug index ec2e31b..9f39ff8 100644 --- a/layout/tag.pug +++ b/layout/tag.pug @@ -2,9 +2,9 @@ extends includes/layout.pug block content if theme.tag_ui == 'index' - include ./includes/mixins/UI.pug + include ./includes/mixins/post-ui.pug #recent-posts.recent-posts - +UI_NEW(page.posts) + +postUI include includes/pagination.pug else include ./includes/mixins/article-sort.pug diff --git a/package.json b/package.json index e4c0363..641ee07 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,18 @@ { "name": "hexo-theme-butterfly", - "version": "2.2.0", - "description": "A Hexo Theme: Butterfly" + "version": "3.0.0-rc-1", + "private": true, + "engines": { + "node": ">=8.10.0" + }, + "description": "A Simple and Card UI Design theme for Hexo", + "keywords": [ + "hexo", + "theme", + "butterfly", + "Card UI Design" + ], + "repository": "https://github.com/jerryc127/hexo-theme-butterfly.git", + "author": "Jerry ", + "license": "MIT" } \ No newline at end of file diff --git a/scripts/events/404.js b/scripts/events/404.js index e091744..c37daae 100644 --- a/scripts/events/404.js +++ b/scripts/events/404.js @@ -1,8 +1,15 @@ -hexo.extend.generator.register('404', function(locals){ +/** + * Butterfly + * 404 error page + */ + +'use strict' + +hexo.extend.generator.register('404', function (locals) { if (!hexo.theme.config.error_404.enable) return return { path: '404.html', data: locals.posts, layout: ['404'] } -}); \ No newline at end of file +}) diff --git a/scripts/events/replace-config.js b/scripts/events/replace_config.js similarity index 95% rename from scripts/events/replace-config.js rename to scripts/events/replace_config.js index 7d7612d..77b7786 100644 --- a/scripts/events/replace-config.js +++ b/scripts/events/replace_config.js @@ -2,6 +2,8 @@ * Note: configs in _data/butterfly.yml will replace configs in hexo.theme.config. */ +'use strict' + hexo.on('generateBefore', function () { const rootConfig = hexo.config if (hexo.locals.get) { @@ -9,4 +11,4 @@ hexo.on('generateBefore', function () { data && data.butterfly && (hexo.theme.config = data.butterfly) } hexo.theme.config.rootConfig = rootConfig -}) \ No newline at end of file +}) diff --git a/scripts/filters/hide-post.js b/scripts/filters/hide-post.js deleted file mode 100644 index 7ce8f84..0000000 --- a/scripts/filters/hide-post.js +++ /dev/null @@ -1,63 +0,0 @@ -/** - * global hexo - * from printempw/hexo-hide-posts - * modify by Jerry - */ - -'use strict'; - -var public_generators = []; - -hexo.extend.filter.register('before_generate', function () { - this._bindLocals(); - - const all_posts = this.locals.get('posts'); - const hidden_posts = all_posts.find({ - 'hide': true - }); - const normal_posts = all_posts.filter(post => !post['hide']); - - this.locals.set('all_posts', all_posts); - this.locals.set('hidden_posts', hidden_posts); - this.locals.set('posts', normal_posts); -}); - -hexo.extend.filter.register('after_init', function () { - - const original = {}; - for (const name in hexo.extend.generator.list()) { - original[name] = hexo.extend.generator.get(name); - } - - hexo.extend.generator.register('post', async function (locals) { - const fg = original.post.bind(this); - - const generated_public = await fg(locals); - const generated_hidden = await fg(Object.assign({}, locals, { - posts: locals.hidden_posts - })); - - // Remove post.prev and post.next for hidden posts - generated_hidden.forEach(ele => { - ele.data.prev = ele.data.next = null; - }); - - return generated_public.concat(generated_hidden); - }); - - // Then we hack into other generators if necessary - public_generators.filter( - name => Object.keys(original).includes(name) - ).forEach(name => { - // Overwrite original generator - hexo.extend.generator.register(name, function (locals) { - const fg = original[name].bind(this); - - return fg(Object.assign({}, locals, { - posts: new locals.posts.constructor( - locals.posts.data.concat(locals.hidden_posts.data) - ) - })); - }); - }); -}); \ No newline at end of file diff --git a/scripts/filters/post-lazyload.js b/scripts/filters/post-lazyload.js deleted file mode 100644 index e3c8177..0000000 --- a/scripts/filters/post-lazyload.js +++ /dev/null @@ -1,30 +0,0 @@ -'use strict'; - -const fs = require('hexo-fs'); -const url_for = require('hexo-util').url_for.bind(hexo); - -function lazyProcess(htmlContent) { - var bg = url_for(hexo.theme.config.lodding_bg.post); - return htmlContent.replace(//gi, (str, p1, p2, p3) => { - if (/data-src/gi.test(str)) { - return str; - } - if (/class="(.*?)"/gi.test(str)){ - str = str.replace(/class="(.*?)"/gi, (classStr, p1) => { - return classStr.replace(p1, `${p1} lazyload`); - }) - str = str.replace(p2, `${bg}`) - return str.replace(p3, `${p3} data-src="${p2}"`); - } - str = str.replace(p2, `${bg}`) - return str.replace(p3, `${p3} class="lazyload" data-src="${p2}"`); - }); -} - -var processPost = function(data) { - if (!hexo.theme.config.lazyload.enable) return; - data.content = lazyProcess.call(this, data.content); - return data; -}; - -hexo.extend.filter.register('after_post_render', processPost); \ No newline at end of file diff --git a/scripts/filters/post_lazyload.js b/scripts/filters/post_lazyload.js new file mode 100644 index 0000000..3ae664c --- /dev/null +++ b/scripts/filters/post_lazyload.js @@ -0,0 +1,23 @@ +/** + * Butterfly + * lazyload + * replace src to data-src + */ +//
+ +'use strict' + +const urlFor = require('hexo-util').url_for.bind(hexo) + +function lazyProcess (htmlContent) { + var bg = hexo.theme.config.lazyload.post ? urlFor(hexo.theme.config.lazyload.post) : 'data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=' + return htmlContent.replace(/( yearA === yearB && monthA === monthB + : (yearA, monthA, yearB, monthB) => yearA === yearB + const limit = options.limit + const moreButton = this._p('aside.more_button') + let result = '' + + if (!format) { + format = type === 'monthly' ? 'MMMM YYYY' : 'YYYY' + } + + const posts = this.site.posts.sort('date', order) + if (!posts.length) return result + + const data = [] + let length = 0 + + posts.forEach(post => { + // Clone the date object to avoid pollution + let date = post.date.clone() + + if (timezone) date = date.tz(timezone) + + const year = date.year() + const month = date.month() + 1 + const lastData = data[length - 1] + + if (!lastData || !compareFunc(lastData.year, lastData.month, year, month)) { + if (lang) date = date.locale(lang) + const name = date.format(format) + length = data.push({ + name, + year, + month, + count: 1 + }) + } else { + lastData.count++ + } + }) + + const link = item => { + let url = `${archiveDir}/${item.year}/` + + if (type === 'monthly') { + if (item.month < 10) url += '0' + url += `${item.month}/` + } + + return this.url_for(url) + } + + result += '' + return result +}) + +var toMomentLocale = function (lang) { + if (lang === undefined) { + return undefined + } + + // moment.locale('') equals moment.locale('en') + // moment.locale(null) equals moment.locale('en') + if (!lang || lang === 'en' || lang === 'default') { + return 'en' + } + return lang.toLowerCase().replace('_', '-') +} diff --git a/scripts/helpers/aside_categories.js b/scripts/helpers/aside_categories.js new file mode 100644 index 0000000..7454b5f --- /dev/null +++ b/scripts/helpers/aside_categories.js @@ -0,0 +1,96 @@ +/** + * Butterfly + * for aside categories + */ + +'use strict' + +hexo.extend.helper.register('aside_categories', function (categories, options) { + if (!options && (!categories || !Object.prototype.hasOwnProperty.call(categories, 'length')) + ) { + options = categories + categories = this.site.categories + } + + if (!categories || !categories.length) return '' + options = options || {} + const { config } = this + const showCount = Object.prototype.hasOwnProperty.call(options, 'show_count') + ? options.show_count + : true + const depth = options.depth ? parseInt(options.depth, 10) : 0 + const orderby = options.orderby || 'name' + const order = options.order || 1 + const categoryDir = this.url_for(config.category_dir) + const limit = options.limit === 0 ? categories.length : options.limit + const isExpand = options.expand !== 'none' + const expandClass = isExpand && options.expand === true ? 'card-category-list-icon expand' : 'card-category-list-icon' + + const buttonLabel = this._p('aside.more_button') + const prepareQuery = (parent) => { + const query = {} + if (parent) { query.parent = parent } else { query.parent = { $exists: false } } + return categories.find(query).sort(orderby, order).filter((cat) => cat.length) + } + + const hierarchicalList = (t, level, parent, topparent = true) => { + let result = '' + var isTopParent = topparent + if (t > 0) { + prepareQuery(parent).forEach((cat, i) => { + if (t > 0) { + t = t - 1 + let child + if (!depth || level + 1 < depth) { + var childList = hierarchicalList(t, level + 1, cat._id, false) + child = childList[0] + t = childList[1] + } + + var parentClass = isExpand && isTopParent && child ? 'parent' : '' + + result += `
  • ` + + result += `` + + result += `${cat.name}` + + if (showCount) { + result += `${cat.length}` + } + + if (isExpand && isTopParent && child) { + result += `` + } + + result += '' + + result += '
    • ' + + if (child) { + result += `
      ${child}
    ` + } + } + }) + } + + return [result, t] + } + + const list = hierarchicalList(limit, 0) + + var moreButton = function () { + var moreHtml = '' + if (categories.length <= limit) return '' + moreHtml += '
  • ' + moreHtml += ` + ${buttonLabel}
    • ` + + return moreHtml + } + + return `
      + ${list[0]} + ${moreButton()} +
    ` +}) diff --git a/scripts/helpers/list-archives.js b/scripts/helpers/list-archives.js deleted file mode 100644 index 10738bc..0000000 --- a/scripts/helpers/list-archives.js +++ /dev/null @@ -1,103 +0,0 @@ -"use strict"; - -hexo.extend.helper.register("list_archives", function(options = {}) { - const { config } = this; - const archiveDir = config.archive_dir; - const { timezone } = config; - const lang = this.page.lang || this.page.language || config.language; - let { format } = options; - const type = options.type || "monthly"; - const { style = "list", transform, separator = ", " } = options; - const showCount = Object.prototype.hasOwnProperty.call(options, "show_count") - ? options.show_count - : true; - const order = options.order || -1; - const limit = 8; - let result = ""; - - var more_button; - if (lang === "zh-CN") { - more_button = "查看更多"; - } else if (lang === "zh-TW") { - more_button = "查看更多"; - } else { - more_button = "More"; - } - - if (!format) { - format = type === "monthly" ? "MMMM YYYY" : "YYYY"; - } - - const posts = this.site.posts.sort("date", order); - if (!posts.length) return result; - - const data = []; - let length = 0; - - posts.forEach(post => { - // Clone the date object to avoid pollution - let date = post.date.clone(); - - if (timezone) date = date.tz(timezone); - if (lang) date = date.locale(lang); - - const year = date.year(); - const month = date.month() + 1; - const name = date.format(format); - const lastData = data[length - 1]; - - if (!lastData || lastData.name !== name) { - length = data.push({ - name, - year, - month, - count: 1 - }); - } else { - lastData.count++; - } - }); - - const link = item => { - let url = `${archiveDir}/${item.year}/`; - - if (type === "monthly") { - if (item.month < 10) url += "0"; - url += `${item.month}/`; - } - - return this.url_for(url); - }; - - result += `"; - return result; -}); diff --git a/scripts/helpers/page.js b/scripts/helpers/page.js new file mode 100644 index 0000000..74e7674 --- /dev/null +++ b/scripts/helpers/page.js @@ -0,0 +1,58 @@ +/** + * Butterfly + * @example + * page_description() + * injectHtml(data) + * cloudTags(source, minfontsize, maxfontsize, limit) + */ + +'use strict' + +const { stripHTML, escapeHTML } = require('hexo-util') + +hexo.extend.helper.register('page_description', function () { + const { config, page } = this + let description = page.description || page.content || page.title || config.description + + if (description) { + description = escapeHTML(stripHTML(description).substring(0, 200) + .trim() + ).replace(/\n/g, ' ') + return description + } +}) + +hexo.extend.helper.register('injectHtml', function (data) { + let result = '' + if (!data) return '' + for (var i = 0; i < data.length; i++) { + result += data[i] + } + return result +}) + +hexo.extend.helper.register('cloudTags', function (options = {}) { + const env = this + const source = options.source + const minfontsize = options.minfontsize + const maxfontsize = options.maxfontsize + const limit = options.limit + + let result = '' + const tagLimit = limit === 0 ? source.length : limit + source.sort('name').limit(tagLimit).forEach(function (tags) { + var fontSize = Math.floor(Math.random() * (maxfontsize - minfontsize) + minfontsize) + 'px' + var color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200 + result += `${tags.name}` + }) + return result +}) + +hexo.extend.helper.register('urlNoIndex', function () { + const { permalink } = hexo.config + let url = this.url.replace(/index\.html$/, '') + if (!permalink.endsWith('.html')) { + url = url.replace(/\.html$/, '') + } + return url +}) diff --git a/scripts/helpers/related-post.js b/scripts/helpers/related-post.js deleted file mode 100644 index 455eff0..0000000 --- a/scripts/helpers/related-post.js +++ /dev/null @@ -1,90 +0,0 @@ -hexo.extend.helper.register('related_posts', function (currentPost, allPosts) { - var relatedPosts = []; - currentPost.tags.forEach(function (tag) { - allPosts.forEach(function (post) { - if (isTagRelated(tag.name, post.tags)) { - var relatedPost = { - title: post.title, - path: post.path, - cover: post.cover, - randomcover: post.randomcover, - weight: 1, - updated: post.updated, - created: post.date - }; - var index = findItem(relatedPosts, 'path', post.path); - if (index != -1) { - relatedPosts[index].weight += 1; - } else { - if (currentPost.path != post.path) { - relatedPosts.push(relatedPost); - }; - }; - }; - }); - }); - if (relatedPosts.length == 0) { - return '' - }; - var result = ""; - const hexoConfig = hexo.theme.config.rootConfig; - const config = hexo.theme.config; - - var limit_num = config.related_post.limit || 6 - var date_type = config.related_post.date_type || 'created' - var headline_lang = this._p('post.recommend') - - relatedPosts = relatedPosts.sort(compare('weight')); - var lazy_src = config.lazyload.enable ? lazy_src = 'data-src' : lazy_src = 'src' - var lazy_class = config.lazyload.enable ? lazy_class = 'lazyload' : lazy_class = '' - - if (relatedPosts.length > 0) { - result += '
    ' - result += '
    ' + ' ' + headline_lang + '
    ' - result += '
    ' - - for (var i = 0; i < Math.min(relatedPosts.length, limit_num); i++) { - var cover = relatedPosts[i].cover === false ? relatedPosts[i].randomcover : relatedPosts[i].cover - result += '
    '; - result += ''; - if (date_type == 'created') { - result += '
    ' + ' ' + this.date(relatedPosts[i].created,hexoConfig.date_format) + '
    ' - } else { - result += '
    ' + ' ' + this.date(relatedPosts[i].updated,hexoConfig.date_format) + '
    ' - } - result += '
    ' + relatedPosts[i].title + '
    '; - result += '
    ' - }; - - result += '
    ' - return result; - - } -}); - -function isTagRelated(tagName, TBDtags) { - var result = false; - TBDtags.forEach(function (tag) { - if (tagName == tag.name) { - result = true; - }; - }) - return result; -} - -function findItem(arrayToSearch, attr, val) { - for (var i = 0; i < arrayToSearch.length; i++) { - if (arrayToSearch[i][attr] == val) { - return i - }; - }; - return -1; -} - -function compare(attr) { - return function (a, b) { - var val1 = a[attr]; - var val2 = b[attr]; - return val2 - val1; - } -} \ No newline at end of file diff --git a/scripts/helpers/related_post.js b/scripts/helpers/related_post.js new file mode 100644 index 0000000..60c1e6c --- /dev/null +++ b/scripts/helpers/related_post.js @@ -0,0 +1,123 @@ +/** + * Butterfly + * Related Posts + * According the tag + */ + +'use strict' + +hexo.extend.helper.register('related_posts', function (currentPost, allPosts) { + var relatedPosts = [] + currentPost.tags.forEach(function (tag) { + allPosts.forEach(function (post) { + if (isTagRelated(tag.name, post.tags)) { + var relatedPost = { + title: post.title, + path: post.path, + cover: post.cover, + randomcover: post.randomcover, + weight: 1, + updated: post.updated, + created: post.date + } + var index = findItem(relatedPosts, 'path', post.path) + if (index !== -1) { + relatedPosts[index].weight += 1 + } else { + if (currentPost.path !== post.path) { + relatedPosts.push(relatedPost) + } + } + } + }) + }) + if (relatedPosts.length === 0) { + return '' + } + var result = '' + const hexoConfig = hexo.theme.config.rootConfig + const config = hexo.theme.config + + var limitNum = config.related_post.limit || 6 + var dateType = config.related_post.date_type || 'created' + var headlineLang = this._p('post.recommend') + var lazySrc = config.lazyload.enable ? 'data-src' : 'src' + + relatedPosts = relatedPosts.sort(compare('weight')) + + if (relatedPosts.length > 0) { + result += '
    ' + result += + '
    ' + + ' ' + + headlineLang + + '
    ' + result += '
    ' + + for (var i = 0; i < Math.min(relatedPosts.length, limitNum); i++) { + var cover = + relatedPosts[i].cover === false + ? relatedPosts[i].randomcover + : relatedPosts[i].cover + result += + '
    ' + result += + '' + if (dateType === 'created') { + result += + '
    ' + + ' ' + + this.date(relatedPosts[i].created, hexoConfig.date_format) + + '
    ' + } else { + result += + '
    ' + + ' ' + + this.date(relatedPosts[i].updated, hexoConfig.date_format) + + '
    ' + } + result += + '
    ' + relatedPosts[i].title + '
    ' + result += '
    ' + } + + result += '
    ' + return result + } +}) + +function isTagRelated (tagName, TBDtags) { + var result = false + TBDtags.forEach(function (tag) { + if (tagName === tag.name) { + result = true + } + }) + return result +} + +function findItem (arrayToSearch, attr, val) { + for (var i = 0; i < arrayToSearch.length; i++) { + if (arrayToSearch[i][attr] === val) { + return i + } + } + return -1 +} + +function compare (attr) { + return function (a, b) { + var val1 = a[attr] + var val2 = b[attr] + return val2 - val1 + } +} diff --git a/scripts/tags/button.js b/scripts/tags/button.js new file mode 100644 index 0000000..8e7ea43 --- /dev/null +++ b/scripts/tags/button.js @@ -0,0 +1,27 @@ +/** + * Button + * {% btn url text icon option %} + * option: color outline center block larger + * color : default/blue/pink/red/purple/orange/green + */ + +'use strict' + +const urlFor = require('hexo-util').url_for.bind(hexo) + +function btn (args) { + args = args.join(' ').split(',') + var url = args[0] || '' + var text = args[1] || '' + var icon = args[2] || '' + var option = args[3] || '' + + url = url.trim() + text = text.trim() + icon = icon.trim() + option = option.trim() + + return `${icon.length > 0 ? `` : ''} ${text} ` +} + +hexo.extend.tag.register('btn', btn, { ends: false }) diff --git a/scripts/tags/gallery.js b/scripts/tags/gallery.js index b4bcd28..ecefe6b 100644 --- a/scripts/tags/gallery.js +++ b/scripts/tags/gallery.js @@ -1,11 +1,18 @@ -const url_for = require('hexo-util').url_for.bind(hexo); +/** + * Butterfly + * galleryGroup and allery + */ -function gallery(args, content) { - return `
    ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')} -
    `; +'use strict' + +const url_for = require('hexo-util').url_for.bind(hexo) + +function gallery (args, content) { + return `
    ${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')} +
    ` } -function galleryGroup(args){ +function galleryGroup (args) { const name = args[0] const desrc = args[1] const url = url_for(args[2]) @@ -23,5 +30,5 @@ function galleryGroup(args){ ` } -hexo.extend.tag.register('gallery', gallery, {ends: true}); -hexo.extend.tag.register('galleryGroup', galleryGroup); +hexo.extend.tag.register('gallery', gallery, { ends: true }) +hexo.extend.tag.register('galleryGroup', galleryGroup) diff --git a/scripts/tags/hide.js b/scripts/tags/hide.js index fd8e19d..c3c9361 100644 --- a/scripts/tags/hide.js +++ b/scripts/tags/hide.js @@ -1,33 +1,71 @@ - /** - * {% hideInline content,display,bg,color %} - * content不能包含當引號，可用 ' + * Butterfly + * @example + * hideInline + * {% hideInline content,display,bg,color %} + * content不能包含當引號，可用 ' + * hideBlock + * {% hideBlock display,bg,color %} + * content + * {% endhideBlock %} + * hideToggle + * {% hideToggle display,bg,color %} + * content + * {% endhideToggle %} */ -function hideInline(args) { + +'use strict' + +function hideInline (args) { args = args.join(' ').split(',') - let content = args[0].trim() - let display = args[1] || 'Click' - let bg = args[2] ==='' || typeof args[2] ==='undefined' ? '' : `background-color:${args[2]}` - let color = args[3] || '#fff' - return `${display} - ${content}` + var content = args[0] + var display = args[1] || 'Click' + var bg = args[2] || false + var color = args[3] || false + var group = 'style="' + + if (bg) group += `background-color: ${bg};` + if (color) group += `color: ${color}` + group += '"' + + return `${content}` } -/** - * {% hideBlock display,bg,color %} - * content - * {% endhideBlock %} - */ -function hideBlock(args,content) { +function hideBlock (args, content) { args = args.join(' ').split(',') - let display = args[0] || 'Click' - let bg = args[1] ==='' || typeof args[2] ==='undefined' ? '' : `background-color:${args[2]}` - let color = args[2] || '#fff' + var display = args[0] || 'Click' + var bg = args[1] || false + var color = args[2] || false + var group = 'style="' - return `
    ${display} - ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
    ` + if (bg) group += `background-color: ${bg};` + if (color) group += `color: ${color}` + group += '"' + return `
    ${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
    ` } -hexo.extend.tag.register('hideInline', hideInline); -hexo.extend.tag.register('hideBlock', hideBlock, {ends: true}); \ No newline at end of file +function hideToggle (args, content) { + args = args.join(' ').split(',') + var display = args[0] + var bg = args[1] || false + var color = args[2] || false + var group = 'style="' + var border = '' + + if (bg) { + border = `style="border: 1px solid ${bg}"` + group += `background-color: ${bg};` + } + if (color) group += `color: ${color}` + group += '"' + + return `
    ${display}
    +
    ${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}
    ` +} + +hexo.extend.tag.register('hideInline', hideInline) +hexo.extend.tag.register('hideBlock', hideBlock, { ends: true }) +hexo.extend.tag.register('hideToggle', hideToggle, { ends: true }) diff --git a/scripts/tags/mermaid.js b/scripts/tags/mermaid.js index 319310e..e45b10a 100644 --- a/scripts/tags/mermaid.js +++ b/scripts/tags/mermaid.js @@ -1,7 +1,15 @@ -function mermaid(args, content) { +/** + * Butterfly + * mermaid + * https://github.com/mermaid-js/mermaid + */ + +'use strict' + +function mermaid (args, content) { return `
    ${content} -
    `; +
    ` } -hexo.extend.tag.register('mermaid', mermaid, {ends: true}); \ No newline at end of file +hexo.extend.tag.register('mermaid', mermaid, { ends: true }) diff --git a/scripts/tags/note.js b/scripts/tags/note.js index 61acd3b..bd7e021 100644 --- a/scripts/tags/note.js +++ b/scripts/tags/note.js @@ -3,13 +3,13 @@ * transplant from hexo-theme-next */ -'use strict'; +'use strict' -function postNote(args, content) { +function postNote (args, content) { return `
    - ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')} -
    `; + ${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')} +
    ` } -hexo.extend.tag.register('note', postNote, {ends: true}); -hexo.extend.tag.register('subnote', postNote, {ends: true}); \ No newline at end of file +hexo.extend.tag.register('note', postNote, { ends: true }) +hexo.extend.tag.register('subnote', postNote, { ends: true }) diff --git a/scripts/tags/tabs.js b/scripts/tags/tabs.js new file mode 100644 index 0000000..c5db8fa --- /dev/null +++ b/scripts/tags/tabs.js @@ -0,0 +1,62 @@ +/** + * Tabs + * transplant from hexo-theme-next + * modify by Jerry + */ + +'use strict' + +function postTabs (args, content) { + const tabBlock = /\n([\w\W\s\S]*?)/g + + args = args.join(' ').split(',') + const tabName = args[0] + const tabActive = Number(args[1]) || 0 + + const matches = [] + let match + let tabId = 0 + let tabNav = '' + let tabContent = '' + + !tabName && hexo.log.warn('Tabs block must have unique name!') + + while ((match = tabBlock.exec(content)) !== null) { + matches.push(match[1]) + matches.push(match[2]) + } + + for (let i = 0; i < matches.length; i += 2) { + const tabParameters = matches[i].split('@') + let postContent = matches[i + 1] + let tabCaption = tabParameters[0] || '' + let tabIcon = tabParameters[1] || '' + let tabHref = '' + + postContent = hexo.render.renderSync({ text: postContent, engine: 'markdown' }).trim() + + tabId += 1 + tabHref = (tabName + ' ' + tabId).toLowerCase().split(' ').join('-'); + + ((tabCaption.length === 0) && (tabIcon.length === 0)) && (tabCaption = tabName + ' ' + tabId) + + const isOnlyicon = tabIcon.length > 0 && tabCaption.length === 0 ? ' style="text-align: center;"' : '' + const icon = tabIcon.trim() + tabIcon.length > 0 && (tabIcon = ``) + + const toTop = '' + + const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : '' + tabNav += `
    • ` + tabContent += `
    ${postContent + toTop}
    ` + } + + tabNav = `
      ${tabNav}
    ` + tabContent = `
    ${tabContent}
    ` + + return `
    ${tabNav + tabContent}
    ` +} + +hexo.extend.tag.register('tabs', postTabs, { ends: true }) +hexo.extend.tag.register('subtabs', postTabs, { ends: true }) +hexo.extend.tag.register('subsubtabs', postTabs, { ends: true }) diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl new file mode 100644 index 0000000..d793d45 --- /dev/null +++ b/source/css/_global/function.styl @@ -0,0 +1,18 @@ +.limit-one-line + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + +.limit-more-line + display: -webkit-box + overflow: hidden + -webkit-box-orient: vertical + +.fontawesomeIcon + display: inline-block + font-weight: 600 + font-style: normal + font-variant: normal + font-family: 'Font Awesome 5 Free' + text-rendering: auto + -webkit-font-smoothing: antialiased diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index 9d2d126..5f0db29 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -14,9 +14,6 @@ body if !hexo-config('copy.enable') user-select: none - -moz-user-select: none - -webkit-user-select: none - -ms-user-select: none *::-webkit-scrollbar width: 8px @@ -62,49 +59,39 @@ h6 left: $sidebar-icon-left z-index: 100 font-size: $sidebar-icon-size - opacity: 0 cursor: pointer transition: all .2s hr position: relative margin: 2rem auto - width: calc(100% - 4px) border: 2px dashed lighten($theme-hr-color, 50%) - &:hover + if hexo-config('hr_icon.enable') + width: calc(100% - 4px) + + &:hover + &:before + left: calc(95% - 20px) + &:before - left: calc(95% - 20px) + position: absolute + top: $hr-icon-top + left: 5% + z-index: 1 + color: lighten($theme-hr-color, 30%) + content: $hr-icon + font-size: 20px + line-height: 1 + transition: all 1s ease-in-out + @extend .fontawesomeIcon - &:before - position: absolute - top: $hr-icon-top - left: 5% - z-index: 1 - color: $theme-hr-color - content: $hr-icon - font-style: normal - font-variant: normal - font-size: 20px - line-height: 1 - transition: all 1s ease-in-out - text-rendering: auto - -webkit-font-smoothing: antialiased - - if hexo-config('fontawesome_v5') && hexo-config('fontawesome_v5.enable') - font-weight: 600 - font-family: 'Font Awesome 5 Free' - else - font-weight: normal - font-family: FontAwesome - -iframe +.table-wrap + overflow-x: scroll margin: 0 0 1rem table - display: block - overflow: auto - margin: 0 0 1rem + display: table width: 100% border-spacing: 0 border-collapse: collapse @@ -123,18 +110,26 @@ table background: $theme-text-selection-color color: #F7F7F7 +button + margin: 0 + padding: 0 + outline: 0 + border: none + background: none + cursor: pointer + // font -#nav #site_title, -#nav #site_subtitle, +#page-header #site_title, +#page-header #site_subtitle, #site-name, #aside_content .author-info__name, #aside_content .author-info__description font-family: $site-name-font -.is_right +.is-right text-align: right -.is_left +.is-left text-align: left .is-center @@ -143,22 +138,24 @@ table .is_visible display: block !important -.is_invisible +.is-visible-inline + display: inline-block !important + +.is-invisible display: none !important -.is_hidden +.is-hidden overflow: hidden -.pull_left +.copy-true + user-select: all + +.pull-left float: left -.pull_right +.pull-right float: right -// button hover -.button--primary - color: $theme-button-hover-color - .button--animated transition-duration: 1s transition-property: color @@ -187,49 +184,12 @@ img[src=''], img:not([src]) opacity: 0 -// hexo tag video -.video-container - position: relative - overflow: hidden - margin-bottom: .8rem - padding-top: 56.25% - height: 0 +.img-alt + margin: -.5rem 0 .5rem + color: $font-black - iframe - position: absolute - top: 0 - left: 0 - margin-top: 0 - width: 100% - height: 100% - -// tag-hide -.hide-inline, -.hide-block - & > .hide-button - position: relative - z-index: 1 - display: inline-block - padding: 0 1rem - background: $tag-hide-bg - text-align: center - cursor: pointer - - &:hover - text-decoration: none !important - - & > .hide-content - display: none - -.hide-inline - & > .hide-button - margin: 0 .3rem - - & > .hide-content - margin: 0 .3rem - -.hide-block - margin: 0 0 .8rem + &:hover + text-decoration: none !important .comment_headling margin-bottom: 10px @@ -237,19 +197,17 @@ img:not([src]) font-size: 20px .post-ad - margin: 2rem 0 !important + margin: 2rem 0 .ad_height - height: auto !important display: block !important + height: auto !important +// animation #content-inner, #footer animation: main 1s -#nav - animation: nav-effect 1s - #page-header animation: header-effect 1s @@ -257,10 +215,13 @@ img:not([src]) #site_subtitle animation: titlescale 1s -canvas, +canvas:not(#ribbon-canvas), #web_bg animation: to_show 4s +#ribbon-canvas + animation: ribbon_to_show 4s + .card-announcement-animation color: #FF0000 animation: announ_animation .8s linear infinite @@ -287,10 +248,10 @@ if hexo-config('avatar.effect') == true .tocOpenMobile .sidebar-toc__title - animation: tocsidebarRtoL .5s + animation: tocsidebarRtoL .4s .sidebar-toc__progress - animation: tocsidebarRtoL .5s + animation: tocsidebarRtoL .6s .sidebar-toc__content animation: tocsidebarRtoL .7s @@ -308,21 +269,9 @@ if hexo-config('avatar.effect') == true top: 0 opacity: .4 -@keyframes nav-effect - 0% - opacity: 0 - transform: translateY(-50px) - - 100% - opacity: 1 - transform: translateY(0) - @keyframes header-effect 0% opacity: 0 - - 50% - opacity: 0 transform: translateY(-50px) 100% @@ -370,6 +319,13 @@ if hexo-config('avatar.effect') == true 100% opacity: 1 +@keyframes ribbon_to_show + 0% + opacity: 0 + + 100% + opacity: hexo-config('canvas_ribbon.alpha') + @keyframes avatar_turn_around from transform: rotate(0) diff --git a/source/css/_highlight/diff.styl b/source/css/_highlight/diff.styl index 19aa8d7..db787d4 100644 --- a/source/css/_highlight/diff.styl +++ b/source/css/_highlight/diff.styl @@ -1,8 +1,73 @@ -$highlight_theme = hexo-config('highlight_theme') +// For diff highlight +pre .deletion + color: $highlight-deletion -if $highlight_theme == 'light' - $highlight-deletion = #fdd - $highlight-addition = #dfd -else - $highlight-deletion = #008000 - $highlight-addition = #800000 +pre .addition + color: $highlight-addition + +pre .meta + color: $highlight-purple + +pre + .comment + color: $highlight-comment + + .variable, + .attribute, + .regexp, + .ruby .constant, + .xml .tag .title, + .xml .pi, + .xml .doctype, + .html .doctype, + .css .id, + .tag .name, + .css .class, + .css .pseudo + color: $highlight-red + + .tag + color: $highlight-aqua + + .number, + .preprocessor, + .literal, + .params, + .constant, + .command + color: $highlight-orange + + .built_in + color: $highlight-yellow + + .ruby .class .title, + .css .rules .attribute, + .string, + .value, + .inheritance, + .header, + .ruby .symbol, + .xml .cdata, + .special, + .number, + .formula + color: $highlight-green + + .keyword, + .title, + .css .hexcolor + color: $highlight-aqua + + .function, + .python .decorator, + .python .title, + .ruby .function .title, + .ruby .title .keyword, + .perl .sub, + .javascript .title, + .coffeescript .title + color: $highlight-blue + + .tag .attr, + .javascript .function + color: $highlight-purple diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl index 12c81df..809cdac 100644 --- a/source/css/_highlight/highlight.styl +++ b/source/css/_highlight/highlight.styl @@ -1,6 +1,10 @@ // https://github.com/equinusocio/vsc-material-theme +$highlight_theme = hexo-config('highlight_theme') + @require 'theme' -@require 'diff' + +if $highlight_theme != false + @require 'diff' wordWrap = !hexo-config('rootConfig.highlight.line_number') && hexo-config('code_word_wrap') @@ -16,13 +20,6 @@ $code-block counter-reset: line white-space: pre-wrap -.code-area-wrap - position: relative - margin: 0 0 1rem - -figure.highlight - position: relative - blockquote margin: 0 0 1rem padding: .1rem .8rem @@ -71,10 +68,6 @@ blockquote figure.highlight @extend $code-block position: relative - border-radius: 1px - - if hexo-config('highlight_shrink') == true - display: none pre margin: 0 @@ -82,10 +75,6 @@ blockquote border: none .line - &::selection - background: $highlight-selection - color: $highlight-foreground - if wordWrap &:before display: inline-block @@ -100,10 +89,8 @@ blockquote background-color: $highlight-selection table - position: relative - display: table - margin: 0 - width: auto + display: block + overflow: auto border: none td @@ -113,7 +100,6 @@ blockquote figcaption clearfix() padding: .3rem 0 .1rem .7rem - color: $highlight-foreground font-size: 1em line-height: 1em @@ -136,16 +122,59 @@ blockquote padding-right: .5rem padding-left: .5rem width: 100% - background-color: $highlight-background .line height: 1rem + .highlight-tools + position: relative + overflow: hidden + width: 100% + height: 1.5rem + background: $highlight-tools.bg-color + color: $highlight-tools.color + font-size: 14px + + .code-expand + position: absolute + padding: .4rem .7rem + cursor: pointer + transition: all .3s + transform: rotate(0) + + & + .code-lang + left: 1.7rem + + &.code-closed + transition: all .3s + transform: rotate(-90deg) !important + + .code-lang + position: absolute + left: .7rem + text-transform: capitalize + font-weight: bold + font-size: .8rem + line-height: 1.5rem + + .copy-notice + position: absolute + top: .25rem + right: 1.7rem + opacity: 0 + + .copy-button + position: absolute + top: .4rem + right: .7rem + cursor: pointer + transition: color .2s + + &:hover + color: $theme-color + .gutter user-select: none - -webkit-user-select: none - -moz-user-select: none - -ms-user-select: none .gist table width: auto @@ -153,124 +182,43 @@ blockquote td border: none - // For diff highlight - pre .deletion - background: $highlight-deletion + if $highlight_theme == 'mac' + figure.highlight + margin: 0 0 1.2rem + border-radius: 7px + box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .4) + -webkit-transform: translateZ(0) - pre .addition - background: $highlight-addition + .highlight-tools + &:after + position: absolute + top: .45rem + left: .7rem + width: 12px + height: 12px + border-radius: 50% + background: #fc625d + box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b + content: ' ' - pre .meta - color: $highlight-purple + .code-expand + right: 0 - pre - .comment - color: $highlight-comment + &.code-closed + transition: all .3s + transform: rotate(90deg) !important - &::selection - background: $highlight-selection - color: $highlight-foreground + & ~ .copy-notice + right: 2.8rem - .variable, - .attribute, - .regexp, - .ruby .constant, - .xml .tag .title, - .xml .pi, - .xml .doctype, - .html .doctype, - .css .id, - .tag .name, - .css .class, - .css .pseudo - color: $highlight-red + & ~ .copy-button + right: 1.8rem - &::selection - background: $highlight-selection - color: $highlight-foreground + .code-lang + left: 3.8rem !important - .tag - color: $highlight-aqua - - &::selection - background: $highlight-selection - color: $highlight-foreground - - .number, - .preprocessor, - .literal, - .params, - .constant, - .command - color: $highlight-orange - - &::selection - background: $highlight-selection - color: $highlight-foreground - - .built_in - color: $highlight-yellow - - &::selection - background: $highlight-selection - color: $highlight-foreground - - .ruby .class .title, - .css .rules .attribute, - .string, - .value, - .inheritance, - .header, - .ruby .symbol, - .xml .cdata, - .special, - .number, - .formula - color: $highlight-green - - &::selection - background: $highlight-selection - color: $highlight-foreground - - .keyword, - .title, - .css .hexcolor - color: $highlight-aqua - - &::selection - background: $highlight-selection - color: $highlight-foreground - - .function, - .python .decorator, - .python .title, - .ruby .function .title, - .ruby .title .keyword, - .perl .sub, - .javascript .title, - .coffeescript .title - color: $highlight-blue - - &::selection - background: $highlight-selection - color: $highlight-foreground - - .tag .attr, - .javascript .function - color: $highlight-purple - - &::selection - background: $highlight-selection - color: $highlight-foreground - -.highlight-tools - position: relative - overflow: hidden - width: 100% - height: 1.4rem - background: darken($highlight-background, 5) - color: $highlight-foreground - font-size: 14px - -.highlight-close - height: 0 !important \ No newline at end of file +// when the page.highlight_shrink set to true +#body-wrap.code-close + figure.highlight + & > :not(.highlight-tools) + display: none diff --git a/source/css/_highlight/theme.styl b/source/css/_highlight/theme.styl index c956ce1..2c4ae7c 100644 --- a/source/css/_highlight/theme.styl +++ b/source/css/_highlight/theme.styl @@ -13,17 +13,23 @@ if $highlight_theme == 'default' $highlight-aqua = #89DDFF $highlight-blue = #82AAFF $highlight-purple = #C792EA + $highlight-deletion = #BF42BF + $highlight-addition = #105EDE $highlight-gutter = { - color: #37474F, + color: alpha($highlight-foreground, .5), bg-color: $highlight-background } + $highlight-tools = { + color: alpha($highlight-foreground, .8), + bg-color: darken($highlight-background, 2) + } -if $highlight_theme == 'darker' +if $highlight_theme == 'darker' || ($highlight_theme == 'mac') $highlight-background = #212121 $highlight-current-line = #282a2e $highlight-selection = #61616150 $highlight-foreground = #EEFFFF - $highlight-comment = #4A4A4A + $highlight-comment = #969896 $highlight-red = #FF5370 $highlight-orange = #F78C6C $highlight-yellow = #FFCB6B @@ -31,10 +37,16 @@ if $highlight_theme == 'darker' $highlight-aqua = #89DDFF $highlight-blue = #82AAFF $highlight-purple = #C792EA + $highlight-deletion = #BF42BF + $highlight-addition = #105EDE $highlight-gutter = { - color: #424242, + color: alpha($highlight-foreground, .5), bg-color: $highlight-background } + $highlight-tools = { + color: alpha($highlight-foreground, .8), + bg-color: darken($highlight-background, 2) + } if $highlight_theme == 'pale night' $highlight-background = #292D3E @@ -49,17 +61,23 @@ if $highlight_theme == 'pale night' $highlight-aqua = #89DDFF $highlight-blue = #82AAFF $highlight-purple = #C792EA + $highlight-deletion = #BF42BF + $highlight-addition = #105EDE $highlight-gutter = { - color: #3A3F58, + color: alpha($highlight-foreground, .5), bg-color: $highlight-background } + $highlight-tools = { + color: $highlight-foreground, + bg-color: darken($highlight-background, 2) + } if $highlight_theme == 'ocean' $highlight-background = #0F111A $highlight-current-line = #000000 $highlight-selection = #717CB450 $highlight-foreground = #8F93A2 - $highlight-comment = #464B5D + $highlight-comment = rgba(101, 115, 126, .8) $highlight-red = #FF5370 $highlight-orange = #F78C6C $highlight-yellow = #FFCB6B @@ -67,17 +85,23 @@ if $highlight_theme == 'ocean' $highlight-aqua = #89DDFF $highlight-blue = #82AAFF $highlight-purple = #C792EA + $highlight-deletion = #BF42BF + $highlight-addition = #105EDE $highlight-gutter = { - color: #3B3F5180, + color: alpha($highlight-foreground, .5), bg-color: $highlight-background } + $highlight-tools = { + color: $highlight-foreground, + bg-color: darken($highlight-background, 2) + } if $highlight_theme == 'light' $highlight-background = #F6F8FA $highlight-current-line = #00346e $highlight-selection = #80CBC440 $highlight-foreground = #90A4AE - $highlight-comment = #90A4AE90 + $highlight-comment = rgba(149, 165, 166, .8) $highlight-red = #E53935 $highlight-orange = #F76D47 $highlight-yellow = #FFB62C @@ -85,7 +109,26 @@ if $highlight_theme == 'light' $highlight-aqua = #39ADB5 $highlight-blue = #6182B8 $highlight-purple = #7C4DFF + $highlight-deletion = #BF42BF + $highlight-addition = #105EDE $highlight-gutter = { - color: #CFD8DC, + color: alpha($highlight-foreground, .5), bg-color: $highlight-background } + $highlight-tools = { + color: $highlight-foreground, + bg-color: darken($highlight-background, 5) + } + +if $highlight_theme == false + $highlight-background = #F6F8FA + $highlight-foreground = #90A4AE + $highlight-selection = #80CBC440 + $highlight-gutter = { + color: alpha($highlight-foreground, .5), + bg-color: $highlight-background + } + $highlight-tools = { + color: $highlight-foreground, + bg-color: darken($highlight-background, 5) + } diff --git a/source/css/_layout/404.styl b/source/css/_layout/404.styl index 0ffb194..9d2ce1f 100644 --- a/source/css/_layout/404.styl +++ b/source/css/_layout/404.styl @@ -1,44 +1,80 @@ if hexo-config('error_404.enable') - #nav.error-no-found - display: flex - flex-direction: column - justify-content: center - height: 100vh + #error-wrap + position: absolute + top: 50% + right: 0 + left: 0 + margin: 0 auto + padding: 0 1rem + max-width: 1000px + transform: translate(0, -50%) - &:before - width: 100% - height: 100% - background-color: alpha($dark-black, .5) - content: '' + .error-content + display: flex + flex-direction: row + justify-content: center + align-items: center + margin: 0 1rem + height: 18rem + border-radius: 8px + background: #fff + box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06) - #error_info - position: absolute - padding: 0 4rem - width: 100% - letter-spacing: 3px - line-height: 1 - - #error_title, - #error_subtitle + @media screen and (max-width: 768px) + flex-direction: column margin: 0 - padding: 0 - color: $light-grey - letter-spacing: 5px + height: 25rem + + .error-img + flex: 1 + height: 100% + border-top-left-radius: 8px + border-bottom-left-radius: 8px + background-color: #49b1f5 + background-position: center + background-size: cover + + @media screen and (max-width: 768px) + flex: 1 + width: 100% + border-top-right-radius: 8px + border-bottom-left-radius: 0 + + .error-info + flex: 1 + padding: .5rem + text-align: center + font-size: 14px font-family: $site-name-font - #error_title - font-size: 10rem + @media screen and (max-width: 768px) + flex: 1.1 + width: 100% - #error_subtitle - font-size: 2rem + .error_title + margin-top: -4rem + color: $font-color + font-size: 9em - @media screen and (max-width: $sm) - #nav.error-no-found - #error_info - padding: 0 2rem + @media screen and (max-width: 768px) + margin-top: -3rem - #error_title - font-size: 7rem !important + .error_subtitle + @extend .limit-more-line + margin-top: -3.5rem + color: $font-color + word-break: break-word + font-size: 1.6em + -webkit-line-clamp: 2 - #error_subtitle - font-size: 1rem !important + a + position: relative + z-index: 1 + display: inline-block + margin-top: .5rem + padding: .3rem 1.5rem + background: $theme-color + color: white + + i + padding-right: .3rem diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index 0276c21..f63945c 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -16,14 +16,13 @@ .card-info img - display: inline-block width: 110px height: 110px border-radius: 70px - transition: all .3s + transition: all .5s &:hover - transform: rotate(540deg) + transform: rotate(360deg) .author-info &__name @@ -34,23 +33,22 @@ margin-top: -.3rem .card-info-data + display: table padding: .7rem 0 + width: 100% + table-layout: fixed & > .card-info-data-item - display: inline-block - width: 33.3% + display: table-cell a .headline - display: block - overflow: hidden + @extend .limit-one-line color: $font-black - // text-transform: uppercase - text-overflow: ellipsis - white-space: nowrap font-size: .7rem .length_num + margin-top: -.3rem color: $dark-black font-size: 1rem @@ -73,9 +71,9 @@ position: relative z-index: 1 display: block + width: 100% background-color: $light-blue color: $button-color - text-transform: uppercase line-height: 1.6rem span @@ -92,7 +90,8 @@ .card-tag-cloud a - word-break: keep-all + display: inline-block + padding: 0 .1rem &:hover color: $light-blue !important @@ -132,13 +131,11 @@ font-size: .6rem .aside-post_title - display: -webkit-box - overflow: hidden + @extend .limit-more-line padding-left: 10px height: 40px line-height: 1rem -webkit-line-clamp: 2 - -webkit-box-orient: vertical &:hover color: $light-blue !important @@ -147,31 +144,28 @@ .aside-post_title height: auto - .card-archives ul.archive-list, - .card-categories ul.aside-category-item + .card-archives ul.card-archive-list, + .card-categories ul.card-category-list margin: 0 padding: .2rem 0 0 list-style: none - .card-archives ul.archive-list > .archive-list-item, - .card-categories ul.aside-category-item > .aside-category-list - padding: .2rem 1rem - cursor: pointer - transition: all .3s - - &:hover - padding: .2rem .85rem - background-color: $light-blue - + .card-archives ul.card-archive-list > .card-archive-list-item, + .card-categories ul.card-category-list > .card-category-list-item a + display: inline-block + padding: .15rem 1rem + width: 100% color: $font-black + transition: all .4s + + &:hover + padding: .15rem .85rem + background-color: $light-blue span display: inline-block - overflow: hidden vertical-align: bottom - text-overflow: ellipsis - white-space: nowrap &:first-child width: 80% @@ -180,14 +174,43 @@ width: 20% text-align: right - .card-categories - .aside-category-item - &.child - padding: 0 0 0 1.2rem + &.more + span + padding-right: .3rem + width: auto !important + transition: .5s - .card-archives - .archive-list-link-more - justify-content: center + &:hover + span + padding-right: .6rem + + .card-categories + .card-category-list + &.child + padding: 0 0 0 1rem + + > .parent + .card-category-list + &-name + width: 70% !important + + &-count + width: 18% + text-align: right + + &-icon + float: right + margin-right: -.35rem + padding: .35rem + transition: transform .3s + transform: rotate(0) + + &.expand + transform: rotate(-90deg) + + if hexo-config('aside.card_categories.expand') == false + + .child + display: none .card-webinfo .webinfo diff --git a/source/css/_layout/chat.styl b/source/css/_layout/chat.styl new file mode 100644 index 0000000..6d515f4 --- /dev/null +++ b/source/css/_layout/chat.styl @@ -0,0 +1,8 @@ +// chat +if hexo-config('chat_btn') == true && hexo-config('chatra.enable') + #chatra:not(.chatra--expanded) + visibility: hidden !important + width: 1px !important + height: 1px !important + opacity: 0 !important + pointer-events: none diff --git a/source/css/_layout/flink.styl b/source/css/_layout/flink.styl index cd48474..5d40731 100644 --- a/source/css/_layout/flink.styl +++ b/source/css/_layout/flink.styl @@ -1,82 +1,76 @@ .flink#article-container - .post-cards - margin: -10px 10px 0 + .flink-desc + margin: .2rem 0 .5rem - .md-links - overflow: auto - text-align: center + .flink-list + overflow: auto + padding: 10px 10px 0 + text-align: center - & > .md-links-item - position: relative - float: left - overflow: hidden - margin: 20px 7px - width: calc(100% / 3 - 15px) - height: 90px - border-radius: 8px - line-height: 17px - transform: perspective(1px) translateZ(0) + & > .flink-list-item + position: relative + float: left + overflow: hidden + margin: 20px 7px + width: calc(100% / 3 - 15px) + height: 90px + border-radius: 8px + line-height: 17px + transform: perspective(1px) translateZ(0) - &:hover - img - transform: rotate(540deg) - - &:before - position: absolute - top: 0 - right: 0 - bottom: 0 - left: 0 - z-index: -1 - background: $light-blue - content: '' - transition-timing-function: ease-out - transition-duration: .3s - transition-property: transform - transform: scale(0) - - &:hover:before, - &:focus:before, - &:active:before - transform: scale(1) - - a - color: $font-color - text-decoration: none - - img - float: left - margin: 13px 0 0 10px - width: 65px - height: 65px - border-radius: 35px - transition: all .3s - - .md-links-title - overflow: hidden - padding: 16px 10px 0 0 - height: 40px - text-overflow: ellipsis - white-space: nowrap - font-weight: bold - font-size: 20px - - .md-links-des - overflow: hidden - padding: 16px 10px - height: 50px - text-overflow: ellipsis - white-space: nowrap - font-size: 13px - -@media screen and (max-width: 1100px) - .flink - .md-links - .md-links-item + @media screen and (max-width: 1100px) width: calc(50% - 15px) !important -@media screen and (max-width: 600px) - .flink - .md-links - .md-links-item + @media screen and (max-width: 600px) width: calc(100% - 15px) !important + + &:hover + img + transform: rotate(360deg) + + &:before + position: absolute + top: 0 + right: 0 + bottom: 0 + left: 0 + z-index: -1 + background: $light-blue + content: '' + transition-timing-function: ease-out + transition-duration: .3s + transition-property: transform + transform: scale(0) + + &:hover:before, + &:focus:before, + &:active:before + transform: scale(1) + + a + color: $font-color + text-decoration: none + + img + float: left + margin: 13px 0 0 10px + width: 65px + height: 65px + border-radius: 35px + transition: all .3s + + .img-alt + display: none + + .flink-item-name + @extend .limit-one-line + padding: 16px 10px 0 0 + height: 40px + font-weight: bold + font-size: 20px + + .flink-item-desc + @extend .limit-one-line + padding: 16px 10px + height: 50px + font-size: 13px diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl index f38cf1c..d141cd0 100644 --- a/source/css/_layout/head.styl +++ b/source/css/_layout/head.styl @@ -1,8 +1,8 @@ -#nav +#page-header position: relative width: 100% background-color: $light-blue - background-attachment: local + background-attachment: scroll background-position: center center background-size: cover background-repeat: no-repeat @@ -11,6 +11,7 @@ // index &.full_page height: $index_top_img_height + background-attachment: fixed #site-info position: absolute @@ -43,7 +44,7 @@ margin: 0 .5rem color: $light-grey text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15) - font-size: .9rem + font-size: 1rem cursor: pointer #scroll_down @@ -94,18 +95,16 @@ font-size: 1.5rem .posttitle - display: -webkit-box - overflow: hidden + @extend .limit-more-line line-height: 1.5 -webkit-line-clamp: 3 - -webkit-box-orient: vertical #post-meta font-size: 95% > .meta-secondline, > .meta-thirdline - display inline + display: inline .word-count, #busuanzi_value_page_pv, @@ -118,7 +117,7 @@ &__icon margin-right: .2rem - + a color: $light-grey transition: all .3s ease-out @@ -127,25 +126,38 @@ color: $light-blue text-decoration: underline -#page-header +// css hack +// all browser in ios and safari in all apple device +_::-webkit-full-page-media, +_:future, +:root #page-header.full_page + background-attachment: scroll !important + +#nav position: absolute top: 0 - z-index: 99 + z-index: 90 padding: 10px 36px width: 100% height: 58px border: none font-size: 18px + opacity: 0 transition: all .5s + &:not(.fixed) + .menus + padding-right: 0 !important + .toggle-menu display: none padding: .1rem 0 0 .3rem + vertical-align: top &:hover color: $white - &.is_visible + &.is-visible-inline .site-page font-size: inherit @@ -158,16 +170,11 @@ &.fixed position: fixed top: -60px - z-index: 101 + z-index: 91 background: alpha($white, .8) box-shadow: 0 5px 6px -5px alpha($grey, .6) transition: transform .2s ease-in-out, opacity .2s ease-in-out - &.open-sidebar - .menus, - #search_button - display: none - a, #site-name, .toggle-menu @@ -189,71 +196,76 @@ font-weight: bold cursor: pointer - .menus_item - position: relative - display: inline-block - padding: 0 0 0 .7rem + .menus_items + display: inline - &:hover - .menus_item_child - display: block - - .menus-expand - transform: rotate(180deg) !important - - .menus-expand - padding: 4px - transition: all .3s - transform: rotate(0) - - & > a - &:after - position: absolute - bottom: 0 - left: 0 - z-index: -1 - width: 0 - height: 3px - background-color: lighten($theme-color, 30%) - content: '' - transition: all .3s ease-in-out + .menus_item + position: relative + display: inline-block + padding: 0 0 0 .7rem &:hover + .menus_item_child + display: block + + .menus-expand + transform: rotate(180deg) !important + + .menus-expand + padding: 4px + transition: all .3s + transform: rotate(0) + + & > a &:after - width: 100% - - .menus_item_child - position: absolute - right: 0 - display: none - margin-top: 8px - padding: 0 - width: max-content - background-color: alpha($white, .8) - box-shadow: 0 5px 20px -4px rgba($dark-black, .5) - animation: sub_menus .3s .1s ease both - - &:before - position: absolute - top: -8px - left: 0 - width: 100% - height: 20px - content: '' - - li - padding: 1px 10px - list-style: none - text-align: center + position: absolute + bottom: 0 + left: 0 + z-index: -1 + width: 0 + height: 3px + background-color: lighten($theme-color, 30%) + content: '' + transition: all .3s ease-in-out &:hover - background: $theme-color + &:after + width: 100% - a - color: $font-black - text-shadow: none + .menus_item_child + position: absolute + right: 0 + display: none + margin-top: 8px + padding: 0 + width: max-content + background-color: alpha($white, .8) + box-shadow: 0 5px 20px -4px rgba($dark-black, .5) + animation: sub_menus .3s .1s ease both + + &:before + position: absolute + top: -8px + left: 0 + width: 100% + height: 20px + content: '' + + li + list-style: none + + &:hover + background: $theme-color + + a + display: inline-block + padding: .3rem .7rem + width: 100% + color: $font-black + text-shadow: none #search_button + display: inline padding: 0 0 0 .7rem .site-page @@ -264,7 +276,7 @@ cursor: pointer @media screen and (min-width: $sm) - #nav + #page-header #site_title font-size: 2rem @@ -272,10 +284,10 @@ font-size: 1.2rem @media screen and (max-width: $sm) - #page-header + #nav padding: 10px .8rem - #nav + #page-header #site_social_icons display: block @@ -300,10 +312,15 @@ .post-meta__categories display: none - + .meta-thirdline display: block .post-meta-pv-cv .post-meta__separator:first-child - display: none \ No newline at end of file + display: none + + if !hexo-config('busuanzi.page_pv') + .post-meta-commentcount + .post-meta__separator + display: none \ No newline at end of file diff --git a/source/css/_layout/loadding.styl b/source/css/_layout/loadding.styl new file mode 100644 index 0000000..6b4aa1d --- /dev/null +++ b/source/css/_layout/loadding.styl @@ -0,0 +1,94 @@ +if hexo-config('preloader') + loading-bg() + position: fixed + z-index: 1000 + width: 50% + height: 100% + background-color: $preloader-bg + transition: all .5s + + #loading-box + .loading-left-bg + loading-bg() + + .loading-right-bg + loading-bg() + right: 0 + + .spinner-box + position: fixed + z-index: 1001 + display: flex + justify-content: center + align-items: center + width: 100% + height: 100vh + + .configure-border-1 + position: absolute + padding: 3px + width: 115px + height: 115px + background: #ffab91 + animation: configure-clockwise 3s ease-in-out 0s infinite alternate + + .configure-border-2 + left: -115px + padding: 3px + width: 115px + height: 115px + background: rgb(63, 249, 220) + transform: rotate(45deg) + animation: configure-xclockwise 3s ease-in-out 0s infinite alternate + + .loading-word + position: absolute + color: $white + font-size: .8rem + + .configure-core + width: 100% + height: 100% + background-color: $preloader-bg + + &.loaded + .loading-left-bg + transform: translate(-100%, 0) + + .loading-right-bg + transform: translate(100%, 0) + + .spinner-box + display: none + + @keyframes configure-clockwise + 0% + transform: rotate(0) + + 25% + transform: rotate(90deg) + + 50% + transform: rotate(180deg) + + 75% + transform: rotate(270deg) + + 100% + transform: rotate(360deg) + + @keyframes configure-xclockwise + 0% + transform: rotate(45deg) + + 25% + transform: rotate(-45deg) + + 50% + transform: rotate(-135deg) + + 75% + transform: rotate(-225deg) + + 100% + transform: rotate(-315deg) diff --git a/source/css/_layout/mobile-sidebar.styl b/source/css/_layout/mobile-sidebar.styl index a8f6583..2b50b8f 100644 --- a/source/css/_layout/mobile-sidebar.styl +++ b/source/css/_layout/mobile-sidebar.styl @@ -1,12 +1,10 @@ #mobile-sidebar #menu_mask position: fixed - top: 0 - right: 0 - bottom: 0 - left: 0 z-index: 102 display: none + width: 100% + height: 100% background: alpha($dark-black, .8) #mobile-sidebar-menus @@ -14,9 +12,8 @@ top: 0 right: -250px z-index: 103 - display: block - overflow: hidden - overflow-y: scroll + overflow-x: hidden + overflow-y: auto width: 250px height: 100% background: #f6f8fa @@ -27,25 +24,26 @@ text-align: center img - display: inline-block - padding: 0 width: 110px height: 110px border-radius: 70px - transition: all .3s + transition: all .5s + + &:hover + transform: rotate(360deg) .mobile_post_data + display: table padding: .6rem .5rem 0 + width: 100% + table-layout: fixed .mobile_data_item - display: inline-block - width: 33.3% + display: table-cell .mobile_data_link & > a > div - overflow: hidden - text-overflow: ellipsis - white-space: nowrap + @extend .limit-one-line .length_num color: $dark-black @@ -54,52 +52,42 @@ .headline display: block color: $font-black - // text-transform: uppercase font-size: .7rem hr margin: 1rem auto .menus_items - margin-bottom: 5rem - padding: 0 .5rem + padding: 0 .5rem 2rem .site-page + @extend .limit-one-line position: relative - z-index: 0 display: block - overflow: hidden - margin: 0 padding: .3rem 1.5rem color: $font-black - text-overflow: ellipsis - text-shadow: none - white-space: nowrap font-size: .8rem cursor: pointer - i - width: 30% - text-align: left + i:first-child + width: 30% + text-align: left - span - width: 70% + span + width: 70% - &:hover - color: $light-blue + &:hover + color: $light-blue .menus-expand position: absolute right: 0 - padding: 6px - width: 30px !important - height: 30px + padding: .4rem transition: all .3s transform: rotate(0) &.menus-closed - transition: all .3s - transform: rotate(180deg) !important + transform: rotate(90deg) !important .menus_item_child margin: 0 diff --git a/source/css/_layout/note.styl b/source/css/_layout/note.styl deleted file mode 100644 index 6920407..0000000 --- a/source/css/_layout/note.styl +++ /dev/null @@ -1,287 +0,0 @@ -.note - $note-icons = hexo-config('note.icons') - $note-style = hexo-config('note.style') - position: relative - margin: 0 0 1rem - padding: 15px - - if ($note-style == 'simple') - border: 1px solid $light-grey - border-left-width: 5px - - if ($note-style == 'modern') - border: 1px solid transparent - background-color: $whitesmoke - - if ($note-style == 'flat') - border: initial - border-left: 5px solid $light-grey - background-color: lighten($light-grey, 65%) - - if hexo-config('note.border_radius') is a 'unit' - border-radius: unit(hexo-config('note.border_radius'), px) - - h2, - h3, - h4, - h5, - h6 - if $note-icons - margin-top: 3px - else - margin-top: 0 - - margin-bottom: 0 - padding-top: 0 !important - border-bottom: initial - - p, - ul, - ol, - table, - pre, - blockquote, - img - &:first-child - margin-top: 0 !important - - &:last-child - margin-bottom: 0 !important - - if $note-icons - &:not(.no-icon) - padding-left: 45px - - &::before - position: absolute - top: 13px - left: 15px - font-size: larger - - if hexo-config('fontawesome_v5') && hexo-config('fontawesome_v5.enable') - font-weight: 600 - font-family: 'Font Awesome 5 Free' - else - font-family: 'FontAwesome' - - &.default - if ($note-style == 'flat') - background-color: $note-default-bg - - if ($note-style == 'modern') - border-color: $note-modern-default-border - background-color: $note-modern-default-bg - color: $note-modern-default-text - - a, - span.exturl - &:not(.btn) - border-bottom: 1px solid $note-modern-default-text - color: $note-modern-default-text - - &:hover - border-bottom: 1px solid $note-modern-default-hover - color: $note-modern-default-hover - - if ($note-style != 'modern') - border-left-color: $note-default-border - - h2, - h3, - h4, - h5, - h6 - color: $note-default-text - - if $note-icons - &:not(.no-icon) - &::before - content: $note-default-icon - - if ($note-style != 'modern') - color: $note-default-text - - &.primary - if ($note-style == 'flat') - background-color: $note-primary-bg - - if ($note-style == 'modern') - border-color: $note-modern-primary-border - background-color: $note-modern-primary-bg - color: $note-modern-primary-text - - a, - span.exturl - &:not(.btn) - border-bottom: 1px solid $note-modern-primary-text - color: $note-modern-primary-text - - &:hover - border-bottom: 1px solid $note-modern-primary-hover - color: $note-modern-primary-hover - - if ($note-style != 'modern') - border-left-color: $note-primary-border - - h2, - h3, - h4, - h5, - h6 - color: $note-primary-text - - if $note-icons - &:not(.no-icon) - &::before - content: $note-primary-icon - - if ($note-style != 'modern') - color: $note-primary-text - - &.info - if ($note-style == 'flat') - background-color: $note-info-bg - - if ($note-style == 'modern') - border-color: $note-modern-info-border - background-color: $note-modern-info-bg - color: $note-modern-info-text - - a, - span.exturl - &:not(.btn) - border-bottom: 1px solid $note-modern-info-text - color: $note-modern-info-text - - &:hover - border-bottom: 1px solid $note-modern-info-hover - color: $note-modern-info-hover - - if ($note-style != 'modern') - border-left-color: $note-info-border - - h2, - h3, - h4, - h5, - h6 - color: $note-info-text - - if $note-icons - &:not(.no-icon) - &::before - content: $note-info-icon - - if ($note-style != 'modern') - color: $note-info-text - - &.success - if ($note-style == 'flat') - background-color: $note-success-bg - - if ($note-style == 'modern') - border-color: $note-modern-success-border - background-color: $note-modern-success-bg - color: $note-modern-success-text - - a, - span.exturl - &:not(.btn) - border-bottom: 1px solid $note-modern-success-text - color: $note-modern-success-text - - &:hover - border-bottom: 1px solid $note-modern-success-hover - color: $note-modern-success-hover - - if ($note-style != 'modern') - border-left-color: $note-success-border - - h2, - h3, - h4, - h5, - h6 - color: $note-success-text - - if $note-icons - &:not(.no-icon) - &::before - content: $note-success-icon - - if ($note-style != 'modern') - color: $note-success-text - - &.warning - if ($note-style == 'flat') - background-color: $note-warning-bg - - if ($note-style == 'modern') - border-color: $note-modern-warning-border - background-color: $note-modern-warning-bg - color: $note-modern-warning-text - - a, - span.exturl - &:not(.btn) - border-bottom: 1px solid $note-modern-warning-text - color: $note-modern-warning-text - - &:hover - border-bottom: 1px solid $note-modern-warning-hover - color: $note-modern-warning-hover - - if ($note-style != 'modern') - border-left-color: $note-warning-border - - h2, - h3, - h4, - h5, - h6 - color: $note-warning-text - - if $note-icons - &:not(.no-icon) - &::before - content: $note-warning-icon - - if ($note-style != 'modern') - color: $note-warning-text - - &.danger - if ($note-style == 'flat') - background-color: $note-danger-bg - - if ($note-style == 'modern') - border-color: $note-modern-danger-border - background-color: $note-modern-danger-bg - color: $note-modern-danger-text - - a, - span.exturl - &:not(.btn) - border-bottom: 1px solid $note-modern-danger-text - color: $note-modern-danger-text - - &:hover - border-bottom: 1px solid $note-modern-danger-hover - color: $note-modern-danger-hover - - if ($note-style != 'modern') - border-left-color: $note-danger-border - - h2, - h3, - h4, - h5, - h6 - color: $note-danger-text - - if $note-icons - &:not(.no-icon) - &::before - content: $note-danger-icon - - if ($note-style != 'modern') - color: $note-danger-text diff --git a/source/css/_layout/page.styl b/source/css/_layout/page.styl index 7b79592..d049c36 100644 --- a/source/css/_layout/page.styl +++ b/source/css/_layout/page.styl @@ -80,26 +80,23 @@ width: 100% & > .article-title - display: -webkit-box - overflow: hidden + @extend .limit-more-line margin-bottom: .3rem color: $font-black - text-overflow: ellipsis - word-wrap: break-word font-size: 1.2rem line-height: 1.4 transition: all .2s ease-in-out - -webkit-box-orient: vertical -webkit-line-clamp: 2 &:hover color: $light-blue !important & > .article-meta-wrap - font-size: 95% + font-size: 85% & > time color: $theme-meta-color + cursor: default & > .article-meta color: $theme-meta-color @@ -110,12 +107,14 @@ i margin: 0 .2rem 0 0 - .article-meta__separator, - .article-meta__link + .article-meta__separator margin: 0 .3rem + .article-meta__link + margin: 0 .2rem + .fa-angle-right - margin: 0 .3rem + margin: 0 .2rem a.article-meta__categories, a.article-meta__tags @@ -126,13 +125,9 @@ text-decoration: underline & > .content - display: -webkit-box - overflow: hidden + @extend .limit-more-line margin-top: .3rem - height: 85px - word-break: break-word -webkit-line-clamp: 3 - -webkit-box-orient: vertical // tags page .tag-cloud @@ -260,16 +255,14 @@ font-size: .7rem &__title - display: -webkit-box - overflow: hidden + @extend .limit-more-line color: $font-black font-size: .75rem transition: all .3s -webkit-line-clamp: 2 - -webkit-box-orient: vertical &:hover - color: $light-blue + color: $light-blue !important transform: translateX(20px) &__img @@ -378,4 +371,10 @@ @media screen and (max-width: 900px) .layout_page & > div:first-child:not(.recent-posts) - width: 100% !important \ No newline at end of file + width: 100% !important + +// ie10-ios11使用 +@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) + .recent-post-info + .content + height: 90px diff --git a/source/css/_layout/pagination.styl b/source/css/_layout/pagination.styl index f8935c8..a7c1e28 100644 --- a/source/css/_layout/pagination.styl +++ b/source/css/_layout/pagination.styl @@ -20,8 +20,8 @@ color: $button-color cursor: default - img.prev_cover, - img.next_cover + img.prev-cover, + img.next-cover position: absolute width: 100% height: 100% @@ -38,10 +38,8 @@ .prev_info, .next_info - overflow: hidden + @extend .limit-one-line color: $button-color - text-overflow: ellipsis - white-space: nowrap font-weight: 500 .next-post @@ -68,12 +66,12 @@ height: 150px &:hover - img.prev_cover, - img.next_cover + img.prev-cover, + img.next-cover opacity: .8 transform: scale(1.1) - &.pagination_post + &.pagination-post margin: 2rem 0 !important background: $dark-black diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl index 93f9ae4..2b3ab7c 100644 --- a/source/css/_layout/post.styl +++ b/source/css/_layout/post.styl @@ -1,147 +1,148 @@ -#article-container - if hexo-config('beautify.enable') - headStyle(fontsize) - padding-left: unit(fontsize + .4, 'rem') +beautify() + headStyle(fontsize) + padding-left: unit(fontsize + .4, 'rem') - code - font-size: unit(fontsize, 'rem') + code + font-size: unit(fontsize, 'rem') - &:before - margin-left: unit((-(fontsize + .2)), 'rem') - font-size: unit(fontsize, 'rem') + &:before + margin-left: unit((-(fontsize + .2)), 'rem') + font-size: unit(fontsize, 'rem') - &:hover - padding-left: unit(fontsize + .6, 'rem') + &:hover + padding-left: unit(fontsize + .6, 'rem') - h1, - h2, - h3, - h4, - h5, - h6 - cursor: pointer + h1, + h2, + h3, + h4, + h5, + h6 + cursor: pointer + transition: all .2s ease-out + + &:before + position: absolute + top: calc(50% - .35rem) + color: $title-prefix-icon-color + content: $title-prefix-icon + line-height: 1 transition: all .2s ease-out + @extend .fontawesomeIcon + &:hover &:before - position: absolute - top: calc(50% - .35rem) - color: $title-prefix-icon-color - content: $title-prefix-icon - font-style: normal - font-variant: normal - line-height: 1 - transition: all .2s ease-out - text-rendering: auto - -webkit-font-smoothing: antialiased + color: $light-blue - if hexo-config('fontawesome_v5') && hexo-config('fontawesome_v5.enable') - font-weight: 600 - font-family: 'Font Awesome 5 Free' - else - font-weight: normal - font-family: FontAwesome + h1 + headStyle(1) - &:hover - &:before - color: $light-blue + h2 + headStyle(.9) - h1 - headStyle(1) + h3 + headStyle(.8) - h2 - headStyle(.9) + h4 + headStyle(.7) - h3 - headStyle(.8) + h5 + headStyle(.6) - h4 - headStyle(.7) + h6 + headStyle(.6) - h5 - headStyle(.6) + ol, + ul + margin-top: .4rem + padding: 0 0 0 .8rem + list-style: none + counter-reset: li - h6 - headStyle(.6) + p + margin: 0 0 .5rem ol, ul - margin-top: .4rem - padding: 0 0 0 .8rem - list-style: none - counter-reset: li + padding-left: .5rem - p - margin: 0 0 .5rem - - ol, - ul - padding-left: .5rem - - li + li + &:not(.tab) position: relative margin: .2rem 0 padding: .1rem .5rem .1rem 1.5rem - &:hover - &:before - transform: rotate(360deg) - + &:hover &:before - position: absolute - top: 0 - left: 0 - background: $light-blue - color: $card-bg - cursor: pointer - transition: all .3s ease-out + transform: rotate(360deg) - ol - > li + &:before + position: absolute + top: 0 + left: 0 + background: $light-blue + color: $card-bg + cursor: pointer + transition: all .3s ease-out + + ol + > li + &:before + margin-top: .2rem + width: w = 1.2rem + height: h = w + border-radius: .5 * w + content: counter(li) + counter-increment: li + text-align: center + font-size: .6rem + line-height: h + + ul + > li:not(.tab) + &:hover &:before - margin-top: .2rem - width: w = 1.2rem - height: h = w - border-radius: .5 * w - content: counter(li) - counter-increment: li - text-align: center - font-size: .6rem - line-height: h + border-color: $theme-button-hover-color - ul - > li - &:hover - &:before - border-color: $theme-button-hover-color + &:before + $w = .3rem + top: 10px + margin-left: .45rem + width: w = $w + height: h = w + border: .5 * w solid $light-blue + border-radius: w + background: transparent + content: '' + line-height: h + +no-beautify() + ol, + ul + margin-top: .4rem + + p + margin: 0 0 .5rem - &:before - $w = .3rem - top: 10px - margin-left: .45rem - width: w = $w - height: h = w - border: .5 * w solid $light-blue - border-radius: w - background: transparent - content: '' - line-height: h - else ol, ul - margin-top: .4rem - counter-reset: li + padding-left: .5rem - p - margin: 0 0 .5rem + li + position: relative + margin: .3rem 0 + padding-left: .3rem - ol, - ul - padding-left: .5rem +#article-container + if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'site' + beautify() + else if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'post' + no-beautify() - li - position: relative - margin: .3rem 0 - padding-left: .3rem + &.post-content + beautify() + else + no-beautify() a color: $a-link-color @@ -163,64 +164,10 @@ a.fancybox width: 100% text-align: center -p - margin: 0 0 .8rem - img max-width: 100% transition: all .2s -// highlight -.highlight-tools - .code-expand - position: absolute - top: 0 - z-index: 1 - padding: 7px 10px - color: $highlight-foreground - cursor: pointer - transition: all .3s - transform: rotate(0) - - & + .code-lang - left: 30px - - &.code-closed - transition: all .3s - transform: rotate(-90deg) !important - - .code-lang - position: absolute - left: 15px - z-index: 1 - color: $highlight-foreground - text-transform: capitalize - font-weight: bold - font-size: .8rem - line-height: 1.4rem - cursor: pointer - - .copy-notice - position: absolute - top: 0 - right: 0 - z-index: 1 - background: darken($highlight-background, 5) - color: $highlight-aqua - opacity: 0 - - .fa-clipboard - position: absolute - top: .4rem - right: 10px - z-index: 1 - color: $highlight-aqua - cursor: pointer - transition: color .2s - - &:hover - color: darken($highlight-aqua, 20%) - .katex-wrap overflow: auto @@ -319,6 +266,9 @@ img text-decoration: none #article-container + word-wrap: break-word + overflow-wrap: break-word + a color: $theme-link-color @@ -328,6 +278,12 @@ img img margin: 0 auto .8rem + p + margin: 0 0 .8rem + + iframe + margin: 0 0 1rem + @media screen and (max-width: 1024px) .layout_post width: auto @@ -337,4 +293,15 @@ img padding: 1rem 5px & > #post - padding: 1.8rem .7rem \ No newline at end of file + padding: 1.8rem .7rem + +// adjust the layout width in big screen +@media screen and (min-width: $lr) + .layout_post + max-width: 1300px + + .layout_page + max-width: 1500px + + &.hide-aside + max-width: 1300px \ No newline at end of file diff --git a/source/css/_layout/relatedposts.styl b/source/css/_layout/relatedposts.styl index 89ef159..fbdbf02 100644 --- a/source/css/_layout/relatedposts.styl +++ b/source/css/_layout/relatedposts.styl @@ -8,18 +8,27 @@ .relatedPosts_item position: relative - float: left + display: inline-block overflow: hidden - margin: 5px - width: calc(100% / 3 - 10px) + margin: 3px + width: calc(33.333% - 6px) height: 200px background: $dark-black + vertical-align: bottom &:hover .relatedPosts_cover opacity: .8 transform: scale(1.1) + @media screen and (max-width: 768px) + margin: 2px + width: calc(50% - 4px) + height: 150px + + @media screen and (max-width: 480px) + width: calc(100% - 4px) + .relatedPosts_cover width: 100% height: 100% @@ -40,22 +49,5 @@ font-size: 90% .relatedPosts_title - display: -webkit-box - overflow: hidden + @extend .limit-more-line -webkit-line-clamp: 2 - -webkit-box-orient: vertical - - .clear_both - clear: both - -@media screen and (max-width: 768px) - .relatedPosts - .relatedPosts_item - margin: 2px - width: calc(100% / 2 - 4px) - height: 150px - -@media screen and (max-width: 480px) - .relatedPosts - .relatedPosts_item - width: calc(100% - 4px) diff --git a/source/css/_layout/reward.styl b/source/css/_layout/reward.styl index 291b474..0e0eca0 100644 --- a/source/css/_layout/reward.styl +++ b/source/css/_layout/reward.styl @@ -1,20 +1,18 @@ .post-reward - margin: 75px auto 0 + position: relative + margin-top: 4rem width: 100% text-align: center .reward-button - position: relative - z-index: 1 - display: inline-block - width: 100px + padding: .5rem 1.2rem background: $light-blue color: $button-color - text-align: center - line-height: 36px - cursor: pointer + transition: all .4s &:hover + box-shadow: inset 9em 0 0 0 $theme-button-hover-color + .reward-main display: block @@ -22,17 +20,15 @@ position: absolute bottom: 40px left: 0 + z-index: 100 display: none - margin: 0 padding: 0 0 15px width: 100% - transition: all .6s .reward-all display: inline-block - margin: 0 0 0 -110px - padding: 20px 10px 8px - width: 320px + margin: 0 + padding: 1rem .5rem border-radius: 4px background: $reward-pop-up-bg @@ -61,14 +57,15 @@ display: inline-block padding: 0 8px list-style-type: none + vertical-align: top img - position: relative - max-width: 130px width: 130px - border-radius: 3px + height: 130px .post-qr-code__desc - margin: -5px 0 + padding-top: .4rem + width: 130px color: $reward-pop-up-color text-align: center + word-break: break-all diff --git a/source/css/_layout/rightside.styl b/source/css/_layout/rightside.styl index 730788e..4693169 100644 --- a/source/css/_layout/rightside.styl +++ b/source/css/_layout/rightside.styl @@ -1,7 +1,8 @@ #rightside position: fixed right: -38px - bottom: 40px + bottom: $rightside-bottom + z-index: 100 opacity: 0 transition: all .5s @@ -16,9 +17,8 @@ animation: rightsideOut .3s & > div - & > i, - & > a, - & > div + & > button, + & > a display: block margin-bottom: 2px width: 30px @@ -27,7 +27,6 @@ color: $button-color text-align: center font-size: 16px - line-height: 29px cursor: pointer &:hover @@ -40,9 +39,7 @@ #mobile-toc-button display: none -@media screen and (max-width: $bg) - #rightside - #mobile-toc-button + @media screen and (max-width: $bg) display: block @keyframes rightsideIn diff --git a/source/css/_layout/third-party.styl b/source/css/_layout/third-party.styl index e5e6519..b31f940 100644 --- a/source/css/_layout/third-party.styl +++ b/source/css/_layout/third-party.styl @@ -1,28 +1,25 @@ if hexo-config('valine.enable') - // valine #vcomment button - padding: .3rem 1rem + padding: .3rem .8rem border-color: $button-color background-color: $light-blue color: $button-color font-size: .7rem + transition: all .3s &:hover background-color: $theme-button-hover-color - textarea - if hexo-config('valine.bg') + if hexo-config('valine.bg') + textarea background: url(hexo-config('valine.bg')) 100% 100% no-repeat - .info - display: none - .vimg - border: 0 + transition: all .3s &:hover - transform: rotate(540deg) + transform: rotate(360deg) .vat padding: 0 .8rem @@ -30,6 +27,7 @@ if hexo-config('valine.enable') border-radius: 5px color: $light-blue font-size: .7125rem + transition: all .3s &:hover background-color: $light-blue @@ -51,11 +49,12 @@ if hexo-config('beautify.enable') content: none // third-party +// fireworks .fireworks position: fixed top: 0 left: 0 - z-index: 999999 + z-index: $fireworks-zIndex pointer-events: none .medium-zoom-image--opened @@ -85,4 +84,9 @@ if hexo-config('beautify.enable') padding: .3rem 0 .8em .has-jax - overflow: auto \ No newline at end of file + overflow: auto + +//aplayer +#article-container + .aplayer + margin: 0 0 1rem \ No newline at end of file diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl index ed12656..7b9ab69 100644 --- a/source/css/_mode/darkmode.styl +++ b/source/css/_mode/darkmode.styl @@ -20,7 +20,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' background-color: alpha($dark-black, .7) content: '' - #nav, + #page-header, .layout_post > #post, .layout_page > div:first-child:not(.recent-posts) background-color: #121212 @@ -39,47 +39,64 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' .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) + &:before + position: absolute + top: 0 + right: 0 + bottom: 0 + left: 0 + background-color: alpha($dark-black, .7) + content: '' - .toggle-menu, - #site-name, + & > #nav a - color: alpha(#FFFFFF, .8) + color: alpha(#FFFFFF, .8) !important - .menus_item_child - background-color: lighten(#121212, 5) !important - - li - &:hover - background: lighten(#121212, 20) + &.fixed + background: alpha(#121212, .8) + box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0) + .toggle-menu, + #site-name, a - color: alpha(#FFFFFF, .6) + color: alpha(#FFFFFF, .8) + + .menus_item_child + background-color: lighten(#121212, 5) !important + + li + &:hover + background: lighten(#121212, 20) !important + + a + color: alpha(#FFFFFF, .8) + + #site_subtitle + & > span + color: alpha(#FFFFFF, .6) // 代碼框 - #article-container pre, - #article-container pre code - background-color: lighten(#121212, 2) + #article-container + pre, + .highlight:not(.js-file-line-container) + background-color: lighten(#121212, 2) !important + color: alpha(#FFFFFF, .6) !important + + figure.highlight + .line:before + color: alpha(#FFFFFF, .6) !important + + .gutter pre + background-color: lighten(#121212, 2) !important + + .hljs + background-color: lighten(#121212, 2) !important .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) + background: lighten(#121212, 3) !important + color: #90a4ae !important blockquote background-color: lighten(#121212, 10) @@ -109,6 +126,9 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' .post-copyright-info color: alpha(#FFFFFF, .6) + &:after + background: #121212 + // 音樂播放器 .aplayer filter: brightness(.7) @@ -117,14 +137,13 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' // 右下角按鈕 #rightside & > div - & > i, - & > a, - & > div - background-color: lighten(#121212, 5) !important - color: alpha(#FFFFFF, .6) !important + & > button, + & > a + background-color: lighten(#121212, 5) + color: alpha(#FFFFFF, .6) &:hover - background: lighten(#121212, 20) !important + background: lighten(#121212, 20) // 打賞按鈕 .post-reward @@ -137,17 +156,19 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' &:after border-top: 13px solid lighten(#121212, 10) !important - .md-links-item:before, - .aside-category-list:hover, - .archive-list-item:hover, + .flink-list-item:before, + .card-category-list-item a:hover, + .card-archive-list-item a:hover, #bookmark-it background-color: lighten(#121212, 10) !important img, - iframe:not(.utterances-frame), .gist filter: brightness(.7) + #article-container iframe + filter: brightness(.7) + // 側邊欄 #aside_content .card-widget @@ -156,33 +177,21 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' .headline, .length_num, .aside-post_title, - .aside-category-list_link, - .archive-list-link, - .social-icon + .card-category-list-link, + .card-archive-list-link, + .social-icon, + .card-category-list-link-more, + .card-archive-list-link-more color: alpha(#FFFFFF, .6) !important .button--animated:before - background: lighten(#121212, 20) !important + background: lighten(#121212, 20) - // 頭部 - #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 + #footer-wrap a, + .img-alt color: alpha(#FFFFFF, .6) !important .posttitle, @@ -198,11 +207,11 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' .recent-posts .article-meta, .recent-posts a, .post-reward .reward-button, - .fa-clipboard, + .copy-button, .gutter pre, #bookmark-it, .copy-notice, - .md-links-item a, + .flink-list-item a, .category-list-link, .relatedPosts_date, .prev-post .label, @@ -215,11 +224,13 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' color: alpha(#FFFFFF, .8) !important // 時間軸界面 - .article-sort-item__title - color: alpha(#FFFFFF, .6) + .article-sort + &-item__title + color: alpha(#FFFFFF, .6) - &:hover - color: #49b1f5 + &-item:before, + &-title:before + background: #121212 // 手機 MENU,TOC #mobile-sidebar @@ -235,6 +246,24 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' a color: alpha(#FFFFFF, .6) !important + // error 404 + #error-wrap + .error-content + background: #121212 + + .error-img + filter: brightness(.7) + + .error-info + .error_title + color: alpha(#FFFFFF, .8) + + .error_subtitle + color: alpha(#FFFFFF, .6) + + a + background: #2c2c2c + // note if hexo-config('note.style') == 'modern' .note @@ -245,6 +274,35 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' filter: brightness(.7) color: #4c4948 + // hide-tags + .hide-button, + .btn-beautify + filter: brightness(.8) + + // tabs + #article-container + .tabs + border: 2px solid #2c2c2c + border-top: none + + > .nav-tabs + background: #2c2c2c + + button + border-top: 2px solid #2c2c2c + background: #2c2c2c + color: alpha(#FFFFFF, .6) + + .tab:not(.active) + button + &:hover + border-top: 2px solid lighten(#121212, 20) + background: lighten(#121212, 20) + + .active + button + background: #121212 + // 第三方 // 插件 hexo-blog-encrypt #hexo-blog-encrypt @@ -255,6 +313,9 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' input background-color: #121212 + .mermaid + filter: brightness(.7) + if hexo-config('gitalk') && hexo-config('gitalk.enable') #gitalk-container .gt-header-textarea, @@ -268,61 +329,16 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' 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 + background: #121212 !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 @@ -366,5 +382,12 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' blockquote color: alpha(#FFFFFF, .6) - .mermaid - filter: brightness(.7) + if hexo-config('preloader') + #loading-box + .loading-left-bg, + .loading-right-bg, + .configure-core + background-color: darken(#121212, 2) + + .loading-word + color: alpha(#FFFFFF, .6) diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl index c89cb92..c39cea6 100644 --- a/source/css/_mode/readmode.styl +++ b/source/css/_mode/readmode.styl @@ -1,9 +1,11 @@ -if hexo-config('readmode') && hexo-config('readmode.enable') +if hexo-config('readmode') [data-theme='light'] - .read-mode - background: #fff + $light-redmode-bg = #fff - #nav.post-bg + .read-mode + background: $light-redmode-bg + + #page-header.post-bg a color: $font-black !important @@ -12,17 +14,27 @@ if hexo-config('readmode') && hexo-config('readmode.enable') .highlight:not(.js-file-line-container) background: #f7f7f7 !important + * + color: $font-black !important + + figure.highlight + .line:before + color: $font-black !important + + .hljs + background: #f7f7f7 !important + code color: #4c4948 blockquote border-left: .2rem solid #ddd - background-color: transparent + background-color: $light-redmode-bg ol, li &:before - background: transparent + background: $light-redmode-bg color: #4c4948 ul @@ -32,41 +44,66 @@ if hexo-config('readmode') && hexo-config('readmode.enable') hr border: 2px dashed #d6dbdf - background: transparent + background: $light-redmode-bg &:before color: darken(#d6dbdf, 10) - .hide-button - background: darken(#d6dbdf, 10) !important + .hide-toggle + border: 1px solid darken(#d6dbdf, 10) !important + + .hide-button, + .btn-beautify + background: $light-redmode-bg !important + color: #4c4948 !important + + .btn-beautify + border: 1px solid darken(#d6dbdf, 10) + + &.button--animated:before + background: $light-redmode-bg + + .hide-inline, + .hide-block + & >.hide-button + border: 1px solid darken(#d6dbdf, 10) + + & > .button--animated:before + background: $light-redmode-bg .note border: 2px solid #eee - border-left-color: transparent - background-color: transparent + background-color: $light-redmode-bg - #mobile-sidebar-menus, - #rightside i, - #rightside a, - #rightside #rightside_config - background: darken(#d6dbdf, 10) !important + .tabs + border: 1px solid darken(#d6dbdf, 10) + + #rightside button + background: darken(#d6dbdf, 20) !important [data-theme='dark'] + $dark-readmode-bg = #0d0d0d + .read-mode - background: #0d0d0d + background: $dark-readmode-bg #article-container + pre, + .highlight:not(.js-file-line-container) + * + color: rgba(255, 255, 255, .6) !important + code color: rgba(255, 255, 255, .6) blockquote border-left: .2rem solid rgba(255, 255, 255, .6) - background-color: transparent + background-color: $dark-readmode-bg ol, li &:before - background: transparent + background: $dark-readmode-bg color: rgba(255, 255, 255, .6) ul @@ -74,21 +111,43 @@ if hexo-config('readmode') && hexo-config('readmode.enable') &:before border: .15rem solid rgba(255, 255, 255, .6) + .hide-toggle + border: 1px solid rgba(255, 255, 255, .6) !important + + .hide-button, + .btn-beautify + background: $dark-readmode-bg !important + filter: none + color: rgba(255, 255, 255, .6) !important + + .btn-beautify + border: 1px solid rgba(255, 255, 255, .6) + + &.button--animated:before + background: $dark-readmode-bg !important + + .hide-inline, + .hide-block + & >.hide-button + border: 1px solid rgba(255, 255, 255, .6) + + & > .button--animated:before + background: $dark-readmode-bg !important + .note border: 2px solid rgba(255, 255, 255, .6) - border-left-color: transparent filter: none - background-color: transparent + background-color: $dark-readmode-bg color: rgba(255, 255, 255, .6) - .hide-button - background: #1f1f1f !important + .tabs + border: 2px solid rgba(255, 255, 255, .6) .read-mode #body-wrap padding-left: 0 !important - #nav.post-bg + #page-header.post-bg background-color: transparent background-image: none !important @@ -111,29 +170,38 @@ if hexo-config('readmode') && hexo-config('readmode.enable') &:hover box-shadow: none - .highlight - display: block !important + figure.highlight + border-radius: 0 !important + box-shadow: none !important - #rightside - #darkmode - display: none + & > :not(.highlight-tools) + display: block !important & > canvas display: none !important - .code-area-wrap > .highlight-tools, + .highlight-tools, #footer, #post > *:not(:first-child), #to_comment, #sidebar, #toggle-sidebar, #mobile-toc-button, - #page-header + #nav display: none !important #web_bg background: none + 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 h1, h2, @@ -145,3 +213,33 @@ if hexo-config('readmode') && hexo-config('readmode.enable') &:before content: '' + + &:hover + padding: 0 + + ul, + li, + ol + &:hover:before + transform: none !important + + .tabs + > .nav-tabs + background: transparent + + > .tab + border-bottom: 0 + + button + border-top: none !important + background: transparent + + &:hover + background: none !important + + &.active + button + text-decoration: underline + + > .tab-contents .tab-item-content.active + animation: none diff --git a/source/css/_search/algolia.styl b/source/css/_search/algolia.styl index 6dab083..5531882 100644 --- a/source/css/_search/algolia.styl +++ b/source/css/_search/algolia.styl @@ -45,6 +45,10 @@ &:hover color: $search-color + em + color: $search-keyword-highlight + font-weight: bold + .ais-pagination.pagination margin: .8rem 0 0 padding: 0 diff --git a/source/css/_search/index.styl b/source/css/_search/index.styl index bf3794e..7f8ab5d 100644 --- a/source/css/_search/index.styl +++ b/source/css/_search/index.styl @@ -50,4 +50,5 @@ height: 100% .search-result-list - max-height: 100% !important + padding-bottom: 2rem + max-height: 75vh !important diff --git a/source/css/_search/local-search.styl b/source/css/_search/local-search.styl index e1861f9..e0b3c5f 100644 --- a/source/css/_search/local-search.styl +++ b/source/css/_search/local-search.styl @@ -18,7 +18,8 @@ .local-search__hit-item position: relative - padding-left: 1.5rem + padding-left: 1.3rem + line-height: 1.7 &:hover &:before @@ -27,7 +28,7 @@ &:before $w = .3rem position: absolute - top: .4rem + top: .3rem left: 0 width: w = $w height: h = w @@ -41,12 +42,21 @@ a display: block color: $font-black + font-weight: 600 font-size: 14px cursor: pointer &:hover color: $search-color + .search-result + margin: 0 0 .4rem + word-break: break-all + + .search-keyword + color: $search-keyword-highlight + font-weight: bold + .local-search-stats__hr display: none !important diff --git a/source/css/_tags/button.styl b/source/css/_tags/button.styl new file mode 100644 index 0000000..a828718 --- /dev/null +++ b/source/css/_tags/button.styl @@ -0,0 +1,60 @@ +#article-container + .btn-center + margin: 0 0 1rem + text-align: center + + .btn-beautify + position: relative + z-index: 1 + display: inline-block + margin: 0 .2rem .3rem + padding: 0 1rem + background-color: $btn-default-color + color: $btn-color + line-height: 2 + + &:not(.block) + .btn-beautify:not(.block) + margin: 0 .2rem 1rem + + &.block + display: block + margin: 0 0 1rem + width: fit-content + width: -moz-fit-content + + &.center + margin: 0 auto 1rem + + &.right + margin: 0 0 1rem auto + + &.larger + padding: .3rem 1.3rem + + &:hover + text-decoration: none + + for $type in $btn-types + &.{$type} + background-color: lookup('$btn-' + $type + '-color') + + &.outline + border: 1px solid transparent + border-color: $btn-default-color + background-color: transparent + color: $btn-default-color + transition: all .3s + + &.button--animated:before + background: $btn-default-color + + &:hover + color: white !important + + for $type in $btn-types + &.{$type} + border-color: lookup('$btn-' + $type + '-color') + color: lookup('$btn-' + $type + '-color') + + &.button--animated:before + background: lookup('$btn-' + $type + '-color') diff --git a/source/css/_layout/gallery.styl b/source/css/_tags/gallery.styl similarity index 87% rename from source/css/_layout/gallery.styl rename to source/css/_tags/gallery.styl index 4d3103d..4857326 100644 --- a/source/css/_layout/gallery.styl +++ b/source/css/_tags/gallery.styl @@ -9,6 +9,9 @@ figure.gallery-group background: $dark-black -webkit-transform: translate3d(0, 0, 0) + @media screen and (max-width: 600px) + width: calc(100% - .4rem) + &:hover img opacity: .4 @@ -54,8 +57,7 @@ figure.gallery-group opacity: 0 p - display: -webkit-box - overflow: hidden + @extend .limit-more-line margin: 0 padding: .4rem 0 0 letter-spacing: 1px @@ -65,19 +67,16 @@ figure.gallery-group transition: opacity .35s, transform .35s transform: translate3d(100%, 0, 0) -webkit-line-clamp: 4 - -webkit-box-orient: vertical .gallery-group-name + @extend .limit-more-line position: relative - display: -webkit-box - overflow: hidden margin: 0 padding: .4rem 0 font-weight: bold font-size: 1.2rem line-height: 1.5 -webkit-line-clamp: 2 - -webkit-box-orient: vertical &:after position: absolute @@ -100,10 +99,9 @@ figure.gallery-group img opacity: 0 + .img-alt + display: none + .fancybox width: auto - text-align: inherit - -@media screen and (max-width: 600px) - figure.gallery-group - width: calc(100% - .4rem) \ No newline at end of file + text-align: inherit \ No newline at end of file diff --git a/source/css/_tags/hexo.styl b/source/css/_tags/hexo.styl new file mode 100644 index 0000000..57e87b9 --- /dev/null +++ b/source/css/_tags/hexo.styl @@ -0,0 +1,30 @@ +// pullquote +blockquote + &.pullquote + position: relative + max-width: 45% + font-size: 110% + + &.left + float: left + margin: 1em .5em 0 0 + + &.right + float: right + margin: 1em 0 0 .5rem + +// hexo tag video +.video-container + position: relative + overflow: hidden + margin-bottom: .8rem + padding-top: 56.25% + height: 0 + + iframe + position: absolute + top: 0 + left: 0 + margin-top: 0 + width: 100% + height: 100% diff --git a/source/css/_tags/hide.styl b/source/css/_tags/hide.styl new file mode 100644 index 0000000..e9b27fe --- /dev/null +++ b/source/css/_tags/hide.styl @@ -0,0 +1,48 @@ +// tag-hide +.hide-inline, +.hide-block + & > .hide-button + position: relative + z-index: 1 + display: inline-block + padding: .3rem 1rem + background: $tag-hide-bg + color: $white !important + + &.open + display: none + + & > .hide-content + display: none + +.hide-inline + & > .hide-button + margin: 0 .3rem + + & > .hide-content + margin: 0 .3rem + +.hide-block + margin: 0 0 .8rem + +.hide-toggle + margin-bottom: 1rem + border: 1px solid $tag-hide-toggle-bg + + & > .hide-button + padding: .3rem .5rem + background: $tag-hide-toggle-bg + color: $font-color + cursor: pointer + + & > i + font-size: 1.2em + transition: all .3s + + &.open + i + transform: rotate(90deg) + + & > .hide-content + display: none + margin: 1.5rem 1.2rem diff --git a/source/css/_tags/note.styl b/source/css/_tags/note.styl new file mode 100644 index 0000000..841e899 --- /dev/null +++ b/source/css/_tags/note.styl @@ -0,0 +1,97 @@ +.note + $note-icons = hexo-config('note.icons') + $note-style = hexo-config('note.style') + position: relative + margin: 0 0 1rem + padding: 15px + + if ($note-style == 'simple') + border: 1px solid $light-grey + border-left-width: 5px + + if ($note-style == 'modern') + border: 1px solid transparent + background-color: $whitesmoke + + if ($note-style == 'flat') + border: initial + border-left: 5px solid $light-grey + background-color: lighten($light-grey, 65%) + + if hexo-config('note.border_radius') is a 'unit' + border-radius: unit(hexo-config('note.border_radius'), px) + + h2, + h3, + h4, + h5, + h6 + if $note-icons + margin-top: 3px + else + margin-top: 0 + + margin-bottom: 0 + padding-top: 0 !important + border-bottom: initial + + p, + ul, + ol, + table, + pre, + blockquote, + img + &:first-child + margin-top: 0 !important + + &:last-child + margin-bottom: 0 !important + + if $note-icons + &:not(.no-icon) + padding-left: 45px + + &::before + position: absolute + top: 13px + left: 15px + font-size: larger + @extend .fontawesomeIcon + + for $type in $note-types + &.{$type} + if ($note-style == 'flat') + background: lookup('$note-' + $type + '-bg') + + if ($note-style == 'modern') + border-color: lookup('$note-modern-' + $type + '-border') + background: lookup('$note-modern-' + $type + '-bg') + color: lookup('$note-modern-' + $type + '-text') + + a, + span.exturl + &:not(.btn) + border-bottom: 1px solid lookup('$note-modern-' + $type + '-text') + color: lookup('$note-modern-' + $type + '-text') + + &:hover + border-bottom: 1px solid lookup('$note-modern-' + $type + '-hover') + color: lookup('$note-modern-' + $type + '-hover') + + if ($note-style != 'modern') + border-left-color: lookup('$note-' + $type + '-border') + + h2, + h3, + h4, + h5, + h6 + color: lookup('$note-' + $type + '-text') + + if $note-icons + &:not(.no-icon)::before + content: lookup('$note-' + $type + '-icon') + + if ($note-style != 'modern') + color: lookup('$note-' + $type + '-text') diff --git a/source/css/_tags/tabs.styl b/source/css/_tags/tabs.styl new file mode 100644 index 0000000..770bc40 --- /dev/null +++ b/source/css/_tags/tabs.styl @@ -0,0 +1,70 @@ +#article-container + .tabs + position: relative + margin: 0 0 1rem + border: 1px solid $tab-border-color + border-top: none + + > .nav-tabs + display: flex + flex-wrap: wrap + margin: 0 + padding: 0 + background: $tab-botton-bg + + > .tab + margin: 0 + padding: 0 + list-style: none + + @media screen and (max-width: 768px) + flex-grow: 1 + + button + display: block + padding: .5rem 1rem + border-top: 2px solid $tab-border-color + background: $tab-botton-bg + color: $font-color + width 100% + line-height: 2 + transition: all .4s + + &:hover + border-top: 2px solid $tab-button-hover-bg + background: $tab-button-hover-bg + + i + width: 1.5em + + &.active + button + border-top: 2px solid $tab-active-border-color + background: $card-bg + cursor: default + + > .tab-contents + .tab-item-content + position: relative + display: none + padding: 1.8rem 1.2rem + + @media screen and (max-width: 768px) + padding: 1.2rem .7rem + + &.active + display: block + animation: tabshow .5s + + .tab-to-top + position: relative + display: block + margin: 0 0 0 auto + color: $tab-to-top-color + +@keyframes tabshow + 0% + transform: translateY(15px) + + 100% + transform: translateY(0) diff --git a/source/css/index.styl b/source/css/index.styl index a7df530..d06ba37 100644 --- a/source/css/index.styl +++ b/source/css/index.styl @@ -2,9 +2,10 @@ @import '_third-party/normalize.min.css' // project @import 'var' -@import '_global' +@import '_global/*' @import '_highlight/highlight' @import '_layout/*' +@import '_tags/*' @import '_mode/*' // search diff --git a/source/css/var.styl b/source/css/var.styl index 84d3429..2d265ff 100644 --- a/source/css/var.styl +++ b/source/css/var.styl @@ -3,7 +3,6 @@ $bright-blue = #49B1F5 $strong-cyan = #00c4b6 $light-orange = #FF7242 $light-red = #F47466 - $themeColorEnable = hexo-config('theme_color') && hexo-config('theme_color.enable') $theme-color = $themeColorEnable ? convert(hexo-config('theme_color.main')) : $bright-blue $theme-paginator-color = $themeColorEnable ? convert(hexo-config('theme_color.paginator')) : $strong-cyan @@ -14,23 +13,20 @@ $theme-hr-color = $themeColorEnable ? convert(hexo-config('theme_color.hr_color' $code-foreground = $themeColorEnable ? convert(hexo-config('theme_color.code_foreground')) : $light-red $code-background = $themeColorEnable ? convert(hexo-config('theme_color.code_background')) : rgba(27, 31, 35, .05) $theme-toc-color = $themeColorEnable ? convert(hexo-config('theme_color.toc_color')) : $strong-cyan - // font -$fontEnable = hexo-config('font') && hexo-config('font.enable') -$font-family = $fontEnable ? convert(hexo-config('font.font-family')) : Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif -$code-font = $fontEnable ? convert(hexo-config('font.code-font')) : consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number -$site-name-font = convert(hexo-config('blog_title_font.font-family')) || '"Titillium Web",Lato,PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif' - -//hr -$hrEnable = hexo-config('hr') && hexo-config('hr.enable') -$hr-icon = $hrEnable ? hexo-config('hr.icon') : '\f0c4' -$hr-icon-top = $hrEnable ? convert(hexo-config('hr.icon-top')) : -10px - -//page beatutify +$dafault-font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif +$dafault-code-font = consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', sans-serif +$font-family = hexo-config('font.font-family') ? unquote(hexo-config('font.font-family')) : $dafault-font-family +$code-font = hexo-config('font.code-font') ? unquote(hexo-config('font.code-font')) : $dafault-code-font +$site-name-font = hexo-config('blog_title_font.font-family') ? unquote(hexo-config('blog_title_font.font-family')) : $font-family +// hr +$hrEnable = hexo-config('hr_icon') && hexo-config('hr_icon.enable') +$hr-icon = $hrEnable && hexo-config('hr_icon.icon') ? hexo-config('hr_icon.icon') : '\f0c4' +$hr-icon-top = $hrEnable && hexo-config('hr_icon.icon-top') ? convert(hexo-config('hr_icon.icon-top')) : -10px +// page beatutify $beautifyEnable = hexo-config('beautify.enable') $title-prefix-icon = $beautifyEnable ? hexo-config('beautify.title-prefix-icon') : '\f0c1' $title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red - // Global Variables $font-size = 14px $font-color = #1F2D3D @@ -39,6 +35,7 @@ $rem = 20px $text-line-height = 2 $sm = 768px $bg = 1024px +$lr = 2000px $web-bg = convert(hexo-config('background')) $index_top_img_height = convert(hexo-config('index_top_img_height')) || 100vh $index_site_info_top = convert(hexo-config('index_site_info_top')) || 43% @@ -52,11 +49,10 @@ $whitesmoke = #f5f5f5 $font-black = #4C4948 $card-bg = $white // code -$code-font-family = $font-family $line-height-code-block = 20px $blockquote-color = #6a737d $blockquote-padding-color = $themeColorEnable ? convert(hexo-config('theme_color.blockquote_padding_color')) : #49B1F5 -$blockquote-background-color = $themeColorEnable ? alpha(convert(hexo-config('theme_color.blockquote_background_color')),.1) : alpha($blockquote-padding-color,.1) +$blockquote-background-color = $themeColorEnable ? alpha(convert(hexo-config('theme_color.blockquote_background_color')), .1) : alpha($blockquote-padding-color, .1) // page $body-bg = #fff $a-link-color = #99a9bf @@ -78,16 +74,21 @@ $reward-pop-up-color = #858585 // search $search-bg = #f6f8fa $search-color = $theme-color -//gallery +$search-keyword-highlight = #F47466 +// gallery $gallery-color = #fff // tag-hide $tag-hide-bg = $theme-color - - - -// Note colors -// -------------------------------------------------- +$tag-hide-toggle-bg = #f0f0f0 +// preloader +$preloader-bg = #37474f +// rightside +$rightside-bottom = hexo-config('rightside-bottom') is a 'unit' ? unit(hexo-config('rightside-bottom'), px) : 40px +// fireworks +$fireworks-zIndex = hexo-config('fireworks.zIndex') ? hexo-config('fireworks.zIndex') : 99999 +// Tag Plugins - Note hexo-config('note.light_bg_offset') is a 'unit' ? ($lbg = unit(hexo-config('note.light_bg_offset'), '%')) : ($lbg = 0) +$note-types = 'default' 'primary' 'info' 'success' 'warning' 'danger' // Default $note-default-border = #777 $note-default-bg = lighten(spin($note-default-border, 0), 94% + $lbg) @@ -142,3 +143,19 @@ $note-modern-danger-border = #ebcdd2 $note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4)) $note-modern-danger-text = #a94442 $note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%) +// Tag Plugins - Button +$btn-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green' +$btn-color = #fff +$btn-default-color = #777 +$btn-blue-color = #428bca +$btn-pink-color = #FF69B4 +$btn-red-color = #FF0000 +$btn-orange-color = #FF8C00 +$btn-purple-color = #6f42c1 +$btn-green-color = #5cb85c +// Tag Plugins - Tab +$tab-border-color = #f0f0f0 +$tab-botton-bg = #f0f0f0 +$tab-button-hover-bg = darken($tab-border-color, 8) +$tab-active-border-color = $theme-color +$tab-to-top-color = #99a9bf \ No newline at end of file diff --git a/source/img/avatar.png b/source/img/avatar.png deleted file mode 100644 index 90fb856..0000000 Binary files a/source/img/avatar.png and /dev/null differ diff --git a/source/img/comment_bg.png b/source/img/comment_bg.png deleted file mode 100644 index 1ce3938..0000000 Binary files a/source/img/comment_bg.png and /dev/null differ diff --git a/source/img/favicon.ico b/source/img/favicon.ico deleted file mode 100644 index e07d73a..0000000 Binary files a/source/img/favicon.ico and /dev/null differ diff --git a/source/img/favicon.png b/source/img/favicon.png new file mode 100644 index 0000000..862ebe8 Binary files /dev/null and b/source/img/favicon.png differ diff --git a/source/img/index.jpg b/source/img/index.jpg deleted file mode 100644 index 6e18f89..0000000 Binary files a/source/img/index.jpg and /dev/null differ diff --git a/source/img/post.jpg b/source/img/post.jpg deleted file mode 100644 index 49a812c..0000000 Binary files a/source/img/post.jpg and /dev/null differ diff --git a/source/img/post_loadding.svg b/source/img/post_loadding.svg deleted file mode 100644 index ef01327..0000000 --- a/source/img/post_loadding.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/source/js/main.js b/source/js/main.js index 4738e61..65b1e29 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -1,92 +1,68 @@ $(function () { const isSnackbar = GLOBAL_CONFIG.Snackbar !== undefined - const isTocContent = $('#sidebar .sidebar-toc__content').children().length > 0 - const $pageHead = $('#page-header') + const $nav = $('#nav') const $rightside = $('#rightside') const $body = $('body') /** * 當menu過多時，自動適配，避免UI錯亂 - */ - const searchWidth = $('#search_button').outerWidth() !== undefined ? $('#search_button').outerWidth() : 0 - const blogNameWidth = $('#blog_name').width() - - var mw = 0 - var $menusItem = $pageHead.find('.menus_item') - for (var i = 0; i < $menusItem.length; i++) { - mw = mw + $menusItem.eq(i).outerWidth() - } - - /** - * 傳入 1 sidebar打開時 + * 傳入 1 sidebar打開時 * 傳入 2 正常狀態下 - * 傳入 3 resize時使用 */ + var blogNameWidth = $('#blog_name').width() + var menusWidth = $('.menus').width() + var sidebarWidth = $('#sidebar').width() + function isAdjust (n) { var t if (n === 1) { - t = blogNameWidth + searchWidth + mw > $pageHead.width() - 300 + t = blogNameWidth + menusWidth > $nav.width() - sidebarWidth - 20 } else if (n === 2) { - t = blogNameWidth + searchWidth + mw > $pageHead.width() + t = blogNameWidth + menusWidth > $nav.width() - 20 } if (t) headerAdjust() else headerAdjustBack() } + function headerAdjust () { + $nav.find('.toggle-menu').addClass('is-visible-inline') + $nav.find('.menus_items').addClass('is-invisible') + $nav.find('#search_button span').addClass('is-invisible') + } + + function headerAdjustBack () { + $nav.find('.toggle-menu').removeClass('is-visible-inline') + $nav.find('.menus_items').removeClass('is-invisible') + $nav.find('#search_button span').removeClass('is-invisible') + } + // 初始化header function initAjust () { if (window.innerWidth < 768) headerAdjust() else isAdjust(2) } + initAjust() - - function headerAdjust () { - $pageHead.find('.toggle-menu').addClass('is_visible') - $pageHead.find('.menus').addClass('is_invisible') - $pageHead.find('#search_button span').addClass('is_invisible') - } - - function headerAdjustBack () { - $pageHead.find('.toggle-menu').removeClass('is_visible') - $pageHead.find('.menus').removeClass('is_invisible') - $pageHead.find('#search_button span').removeClass('is_invisible') - } + $('#nav').css({ opacity: '1', animation: 'headerNoOpacity 1s' }) $(window).on('resize', function () { - if (!$pageHead.hasClass('open-sidebar')) { + if ($('#sidebar').hasClass('tocOpenPc') && $nav.hasClass('fixed')) { + isAdjust(1) + } else { initAjust() } }) - /** - * windows時 設置主頁top_img 為 fixed - */ - if (GLOBAL_CONFIG_SITE.isHome) { - var isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent) - if (!isSafari && isDesktop()) { - $('#nav').css('background-attachment', 'fixed') - } - } - /** * 進入post頁sidebar處理 */ - - var isSidebarOpen = $('#toggle-sidebar').hasClass('on') && isTocContent - var isPcSidebarOpen = false - if (window.innerWidth > 1024 && isSidebarOpen) { - setTimeout(function () { - openSidebar() - }, 400) - } - - // 當toc爲空時，隱藏toc按鈕 - if (isTocContent) { - $('#toggle-sidebar').css('opacity', '1') - } else { - $('#toggle-sidebar').css('display', 'none') - $('#mobile-toc-button').css('display', 'none') + if (GLOBAL_CONFIG_SITE.isPost) { + if (window.innerWidth > 1024 && $('#toggle-sidebar').hasClass('on')) { + setTimeout(function () { + openSidebar() + }, 400) + } } /** @@ -94,9 +70,10 @@ $(function () { */ function closeSidebar () { - isPcSidebarOpen = false - $pageHead.removeClass('open-sidebar') $('#sidebar').removeClass('tocOpenPc') + $('.menus').animate({ + paddingRight: 0 + }, 400) $('#body-wrap').animate({ paddingLeft: 0 }, 400) @@ -114,9 +91,10 @@ $(function () { } function openSidebar () { - isPcSidebarOpen = true - $pageHead.addClass('open-sidebar') $('#sidebar').addClass('tocOpenPc') + $('.menus').animate({ + paddingRight: 300 + }, 400) $('#body-wrap').animate({ paddingLeft: 300 }, 400) @@ -129,7 +107,8 @@ $(function () { opacity: '1' }) var isAdjustTimeCount = window.setInterval(function () { - isAdjust(1) + if ($nav.hasClass('fixed')) isAdjust(1) + else isAdjust(2) }, 100) setTimeout(function () { clearInterval(isAdjustTimeCount) @@ -165,7 +144,7 @@ $(function () { $toggleMenu.removeClass('close').addClass('open') $mobileSidevarMenus.css('transform', 'translate3d(-100%,0,0)') var $mobileSidevarMenusChild = $mobileSidevarMenus.children() - for (i = 0; i <= $mobileSidevarMenusChild.length; i++) { + for (let i = 0; i <= $mobileSidevarMenusChild.length; i++) { const duration = i / 5 + 0.2 $mobileSidevarMenusChild.eq(i).css('animation', 'sidebarItem ' + duration + 's') } @@ -221,9 +200,9 @@ $(function () { const mql = window.matchMedia('(max-width: 1024px)') mql.addListener(function (ev) { if (ev.matches) { - if (isPcSidebarOpen === true) closeSidebar() + if ($('#sidebar').hasClass('tocOpenPc')) closeSidebar() } else { - if ($('#toggle-sidebar').hasClass('on') && isTocContent) openSidebar() + if ($('#toggle-sidebar').hasClass('on')) openSidebar() if ($mobileTocButton.hasClass('open')) closeMobileSidebar('toc') } }) @@ -232,7 +211,7 @@ $(function () { * 首頁top_img底下的箭頭 */ $('#scroll_down').on('click', function () { - scrollTo('#content-inner') + scrollToDest('#content-inner') }) /** @@ -258,122 +237,143 @@ $(function () { /** * 代碼 + * 只適用於Hexo默認的代碼渲染 */ - const isHighlightCopy = GLOBAL_CONFIG.highlightCopy - const isHighlightLang = GLOBAL_CONFIG.highlightLang - const isHighlightShrink = GLOBAL_CONFIG.highlightShrink const $figureHighlight = $('figure.highlight') - if (isHighlightCopy || isHighlightLang || isHighlightShrink !== 'none') { - $figureHighlight.wrap('
    ').before('
    ') - } - /** + if ($figureHighlight.length) { + const isHighlightCopy = GLOBAL_CONFIG.highlightCopy + const isHighlightLang = GLOBAL_CONFIG.highlightLang + const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink + + if (isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined) { + $figureHighlight.prepend('
    ') + } + + /** * 代碼收縮 */ - const $highlightTools = $('.highlight-tools') - if (isHighlightShrink === true) { - $highlightTools.append('') - } else if (isHighlightShrink === false) { - $highlightTools.append('') - } - - $(document).on('click', '.highlight-tools >.code-expand', function () { - var $table = $(this).parent().next() - if ($(this).hasClass('code-closed')) { - $table.css('display', '') - $(this).removeClass('code-closed') - } else { - $table.css('display', 'none') - $(this).addClass('code-closed') + const $highlightTools = $('.highlight-tools') + if (isHighlightShrink === true) { + $highlightTools.append('') + } else if (isHighlightShrink === false) { + $highlightTools.append('') } - }) - /** - * 代碼語言 - */ - if (isHighlightLang) { - var langNameIndex, langName - $figureHighlight.each(function () { - langNameIndex = langName = $(this).attr('class').split(' ')[1] - if (langNameIndex === "plain" || langNameIndex === undefined) - langName = "Code"; - $(this).prev().append('
    ' + langName + '
    ') - }) - } - /** - * 代碼copy - * copy function - */ - if (isHighlightCopy) { - $highlightTools.append('
    ') - var copy = function (text, ctx) { - if (document.queryCommandSupported && document.queryCommandSupported('copy')) { - try { - document.execCommand('copy') // Security exception may be thrown by some browsers. - if (isSnackbar) { - snackbarShow(GLOBAL_CONFIG.copy.success) - } else { - $(ctx).prev('.copy-notice') - .text(GLOBAL_CONFIG.copy.success) - .animate({ - opacity: 1, - right: 30 - }, 450, function () { - setTimeout(function () { - $(ctx).prev('.copy-notice').animate({ - opacity: 0, - right: 0 - }, 650) - }, 400) - }) - } - } catch (ex) { - if (isSnackbar) { - snackbarShow(GLOBAL_CONFIG.copy.success) - } else { - $(ctx).prev('.copy-notice') - .text(GLOBAL_CONFIG.copy.error) - .animate({ - opacity: 1, - right: 30 - }, 650, function () { - setTimeout(function () { - $(ctx).prev('.copy-notice').animate({ - opacity: 0, - right: 0 - }, 650) - }, 400) - }) - return false - } - } + $(document).on('click', '.highlight-tools >.code-expand', function () { + var $hideItem = $(this).parent().nextAll() + if ($(this).hasClass('code-closed')) { + $hideItem.css('display', 'block') + $(this).removeClass('code-closed') } else { - if (isSnackbar) { - snackbarShow(GLOBAL_CONFIG.copy.noSupport) + $hideItem.css('display', 'none') + $(this).addClass('code-closed') + } + }) + + /** + * 代碼語言 + */ + if (isHighlightLang) { + var langNameIndex, langName + $figureHighlight.each(function () { + langNameIndex = langName = $(this).attr('class').split(' ')[1] + if (langNameIndex === 'plain' || langNameIndex === undefined) langName = 'Code' + $(this).find('.highlight-tools').append('
    ' + langName + '
    ') + }) + } + + /** + * 代碼copy + * copy function + */ + if (isHighlightCopy) { + $highlightTools.append('
    ') + var copy = function (text, ctx) { + if (document.queryCommandSupported && document.queryCommandSupported('copy')) { + try { + document.execCommand('copy') // Security exception may be thrown by some browsers. + if (isSnackbar) { + snackbarShow(GLOBAL_CONFIG.copy.success) + } else { + $(ctx).prev('.copy-notice') + .text(GLOBAL_CONFIG.copy.success) + .animate({ + opacity: 1 + }, 450, function () { + setTimeout(function () { + $(ctx).prev('.copy-notice').animate({ + opacity: 0 + }, 650) + }, 400) + }) + } + } catch (ex) { + if (isSnackbar) { + snackbarShow(GLOBAL_CONFIG.copy.success) + } else { + $(ctx).prev('.copy-notice') + .text(GLOBAL_CONFIG.copy.error) + .animate({ + opacity: 1 + }, 650, function () { + setTimeout(function () { + $(ctx).prev('.copy-notice').animate({ + opacity: 0 + }, 650) + }, 400) + }) + return false + } + } } else { - $(ctx).prev('.copy-notice').text(GLOBAL_CONFIG.copy.noSupport) + if (isSnackbar) { + snackbarShow(GLOBAL_CONFIG.copy.noSupport) + } else { + $(ctx).prev('.copy-notice').text(GLOBAL_CONFIG.copy.noSupport) + } } } - } - // click events - $(document).on('click', '.highlight-tools>.fa-clipboard', function () { - var selection = window.getSelection() - var range = document.createRange() - range.selectNodeContents($(this).parent().next().find('.code pre')[0]) - selection.removeAllRanges() - selection.addRange(range) - var text = selection.toString() - copy(text, this) - selection.removeAllRanges() + // click events + $(document).on('click', '.highlight-tools>.copy-button', function () { + var $buttonParent = $(this).parents('figure.highlight') + $buttonParent.addClass('copy-true') + var selection = window.getSelection() + var range = document.createRange() + range.selectNodeContents($buttonParent.find('table .code pre')[0]) + selection.removeAllRanges() + selection.addRange(range) + var text = selection.toString() + copy(text, this) + selection.removeAllRanges() + $buttonParent.removeClass('copy-true') + }) + } + } + + /** + * PhotoFigcaption + */ + function addPhotoFigcaption () { + const images = $('#article-container img').not('.justified-gallery img') + images.each(function (i, o) { + var $this = $(o) + if ($this.attr('alt')) { + var t = $('
    ' + $this.attr('alt') + '
    ') + $this.after(t) + } }) } + if (GLOBAL_CONFIG.isPhotoFigcaption) addPhotoFigcaption() /** * justified-gallery 圖庫排版 */ var $justifiedGallery = $('.justified-gallery') + var isJustifiedGallery = false if ($justifiedGallery.length) { + isJustifiedGallery = true var $imgList = $justifiedGallery.find('img') $imgList.unwrap() if ($imgList.length) { @@ -382,13 +382,21 @@ $(function () { $(o).wrap('
    ') }) } - $('head').append('') - loadScript('https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js', function () { - $justifiedGallery.not($('.hide-content .justified-gallery')).justifiedGallery({ - rowHeight: 220, - margins: 4 - }) + $('head').append(``) + loadScript(`${GLOBAL_CONFIG.justifiedGallery.js}`, function () { + initJustifiedGallery($justifiedGallery) }) + + var initJustifiedGallery = function (selector) { + selector.each(function (i, o) { + if ($(this).is(':visible')) { + $(this).justifiedGallery({ + rowHeight: 220, + margins: 4 + }) + } + }) + } } /** @@ -401,13 +409,7 @@ $(function () { var images = $('#article-container img:not(.gallery-group-img)').not($('a>img')) images.each(function (i, o) { var lazyloadSrc = $(o).attr('data-src') ? $(o).attr('data-src') : $(o).attr('src') - $(o).wrap( - '' - ) + $(o).wrap(``) }) $().fancybox({ @@ -420,41 +422,48 @@ $(function () { } else if (isMediumZoom) { const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img')) zoom.on('open', function (event) { - const photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff' + var photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff' zoom.update({ background: photoBg }) }) } - // 點擊toc，收起sidebar - // $('.toc-link').on('click', function () { - // closeMobileSidebar('toc') - // }) - + /** + * 滾動處理 + */ var initTop = 0 - $(window).scroll(function (event) { + var isChatShow = true + var isChatBtnHide = typeof chatBtnHide === 'function' + var isChatBtnShow = typeof chatBtnShow === 'function' + $(window).scroll(throttle(function (event) { var currentTop = $(this).scrollTop() - var isUp = scrollDirection(currentTop) + var isDown = scrollDirection(currentTop) if (currentTop > 56) { - if (isUp) { - if ($pageHead.hasClass('visible')) $pageHead.removeClass('visible') + if (isDown) { + if ($nav.hasClass('visible')) $nav.removeClass('visible') + if (isChatBtnShow && isChatShow === true) { + chatBtnHide() + isChatShow = false + } } else { - if (!$pageHead.hasClass('visible')) $pageHead.addClass('visible') + if (!$nav.hasClass('visible')) $nav.addClass('visible') + if (isChatBtnHide && isChatShow === false) { + window.chatBtnShow() + isChatShow = true + } } - $pageHead.addClass('fixed') - + $nav.addClass('fixed') if ($rightside.css('opacity') === '0') { $rightside.css({ opacity: '1', transform: 'translateX(-38px)' }) } } else { if (currentTop === 0) { - $pageHead.removeClass('fixed').removeClass('visible') + $nav.removeClass('fixed').removeClass('visible') } - $rightside.css({ opacity: '', transform: '' }) } - }) + }, 200)) // find the scroll direction function scrollDirection (currentTop) { @@ -467,14 +476,14 @@ $(function () { * 點擊滾回頂部 */ $('#go-up').on('click', function () { - scrollTo('body') + scrollToDest('body') }) /** * toc */ - if (GLOBAL_CONFIG_SITE.isPost && isTocContent) { + if (GLOBAL_CONFIG_SITE.isPost && GLOBAL_CONFIG_SITE.isSidebar) { $('.toc-child').hide() // main of scroll @@ -491,7 +500,7 @@ $(function () { closeMobileSidebar('toc') } else { e.preventDefault() - scrollTo($(this).attr('href')) + scrollToDest($(this).attr('href')) } }) @@ -518,6 +527,8 @@ $(function () { }, 100) } + // anchor + var isanchor = GLOBAL_CONFIG.isanchor var updateAnchor = function (anchor) { if (window.history.replaceState && anchor !== window.location.hash) { window.history.replaceState(undefined, undefined, anchor) @@ -551,7 +562,7 @@ $(function () { var currentActive = $('.toc-link.active') if (currentId && currentActive.attr('href') !== currentId) { - updateAnchor(currentId) + if (isanchor) updateAnchor(currentId) $('.toc-link').removeClass('active') @@ -620,7 +631,7 @@ $(function () { }) $(window).on('touchmove', function (e) { - var $menusChild = $('#page-header .menus_item_child') + var $menusChild = $('#nav .menus_item_child') if ($menusChild.is(':visible')) { $menusChild.css('display', 'none') } @@ -648,7 +659,7 @@ $(function () { if (copyFont.length > 45) { textFont = copyFont + '\n' + '\n' + '\n' + copyright.languages.author + '\n' + - copyright.languages.link + '\n' + + copyright.languages.link + window.location.href + '\n' + copyright.languages.source + '\n' + copyright.languages.info } else { @@ -666,43 +677,23 @@ $(function () { /** * Darkmode */ - var isFontAwesomeV5 = GLOBAL_CONFIG.isFontAwesomeV5 var $darkModeButtom = $('#darkmode') - if (typeof autoChangeMode !== 'undefined') { - if (Cookies.get('theme') === 'dark') changeLightIcon() - else changeDarkIcon() - } - - function changeLightIcon () { - isFontAwesomeV5 ? $darkModeButtom.removeClass('fa-moon').addClass('fa-sun') : $darkModeButtom.removeClass('fa-moon-o').addClass('fa-sun-o') - } - - function changeDarkIcon () { - isFontAwesomeV5 ? $darkModeButtom.removeClass('fa-sun').addClass('fa-moon') : $darkModeButtom.removeClass('fa-sun-o').addClass('fa-moon-o') - } - function switchReadMode () { var nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' if (nowMode === 'light') { - changeLightIcon() activateDarkMode() - Cookies.set('theme', 'dark', { expires: 2 }) + Cookies.set('theme', 'dark', 2) if (isSnackbar) snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night) } else { - changeDarkIcon() activateLightMode() - Cookies.set('theme', 'light', { expires: 2 }) + Cookies.set('theme', 'light', 2) if (isSnackbar) snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day) } } $darkModeButtom.click(function () { switchReadMode() - try { - utterancesTheme() - } catch (e) { - return false - } + if (typeof utterancesTheme === 'function') utterancesTheme() }) /** @@ -711,7 +702,7 @@ $(function () { if (GLOBAL_CONFIG.runtime) { // get user config var $runtimeCount = $('#webinfo-runtime-count') - var startDate = $runtimeCount.attr('start_date') + var startDate = $runtimeCount.attr('publish_date') var showDateTime = function () { var BirthDay = new Date(startDate) var today = new Date() @@ -725,6 +716,18 @@ $(function () { interval = setInterval(showDateTime, 10000) } + /** + * table overflow + */ + + var $table = $('#article-container table').not($('figure.highlight > table')) + $table.each(function () { + $(this).wrap('
    ') + }) + + /** + * 百度推送 + */ if (GLOBAL_CONFIG.baiduPush) { (function () { var bp = document.createElement('script') @@ -743,14 +746,46 @@ $(function () { * tag-hide */ var $hideInline = $('.hide-button') - $hideInline.on('click', function (e) { - e.preventDefault() - $(this).hide() - var $hideContent = $(this).next('.hide-content') - $hideContent.show() - $hideContent.find('.justified-gallery').justifiedGallery({ - rowHeight: 220, - margins: 4 + if ($hideInline.length) { + $hideInline.on('click', function (e) { + var $this = $(this) + var $hideContent = $(this).next('.hide-content') + $this.toggleClass('open') + $hideContent.toggle() + if ($this.hasClass('open')) { + if (isJustifiedGallery && $hideContent.find('.justified-gallery').length > 0) { + initJustifiedGallery($hideContent.find('.justified-gallery')) + } + } }) + } + + const $tab = $('#article-container .tabs') + $tab.find('.tab button').on('click', function (e) { + const $this = $(this) + const $tabItem = $this.parent() + + if (!$tabItem.hasClass('active')) { + const $tacbContent = $this.parents('.nav-tabs').next() + $tabItem.siblings('.active').removeClass('active') + $tabItem.addClass('active') + const tabId = $this.attr('data-href') + $tacbContent.find('> .tab-item-content').removeClass('active') + $tacbContent.find(`> ${tabId}`).addClass('active') + const $isTabJustifiedGallery = $tacbContent.find(tabId).find('.justified-gallery') + if (isJustifiedGallery && $isTabJustifiedGallery.length > 0) { + initJustifiedGallery($isTabJustifiedGallery) + } + } + }) + + var $cardCategory = $('.card-category-list-item.parent a') + $cardCategory.on('click', function (e) { + if ($(event.target).hasClass('card-category-list-icon')) { + var $this = $(this) + $this.find('.card-category-list-icon').toggleClass('expand') + $this.parent().next().toggle() + return false + } }) }) diff --git a/source/js/search/algolia.js b/source/js/search/algolia.js index 8f02459..b8b63e9 100644 --- a/source/js/search/algolia.js +++ b/source/js/search/algolia.js @@ -100,7 +100,7 @@ $(function () { return ( '
    ' + stats + - '