From 3a46e83146a2873506acc79a142c4e2e668458df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= Date: Sat, 18 Jun 2022 16:09:08 +0800 Subject: [PATCH 01/30] :lipstick: Add page load animate style. --- VERSION | 1 + assets/js/config.js | 105 +++++++++++++++------------------- assets/js/motion.js | 10 ++-- assets/js/utils.js | 2 +- data/config.yaml | 4 ++ exampleSite/config.yaml | 6 +- layouts/partials/scripts.html | 102 ++++++++------------------------- 7 files changed, 84 insertions(+), 146 deletions(-) create mode 100644 VERSION create mode 100644 data/config.yaml diff --git a/VERSION b/VERSION new file mode 100644 index 0000000..0c89fc9 --- /dev/null +++ b/VERSION @@ -0,0 +1 @@ +4.0.0 \ No newline at end of file diff --git a/assets/js/config.js b/assets/js/config.js index caa0075..be94ae9 100644 --- a/assets/js/config.js +++ b/assets/js/config.js @@ -1,66 +1,53 @@ if (!window.NexT) window.NexT = {}; (function() { - const className = 'next-config'; - const staticConfig = {}; - let variableConfig = {}; - - const parse = text => JSON.parse(text || '{}'); - - const update = name => { - const targetEle = document.querySelector(`.${className}[data-name="${name}"]`); - if (!targetEle) return; - const parsedConfig = parse(targetEle.text); - if (name === 'main') { - Object.assign(staticConfig, parsedConfig); - } else { - variableConfig[name] = parsedConfig; + const siteConfig = { + "hostname" : "{{ .Site.BaseURL }}", + "root" : "/", + "images" : "{{ .Site.Params.images }}", + "scheme" : "{{ .Site.Params.scheme }}", + "darkmode" : {{ .Site.Params.darkmode }}, + "version" : "{{ .Site.Data.config.version }}", + "exturl" : {{ .Site.Params.exturl }}, + "sidebar" : {{ .Site.Params.sidebar | jsonify }}, + "copycode" : {{ .Site.Params.codeblock.copyBtn | jsonify }}, + "bookmark" : {{ .Site.Params.bookmark | jsonify }}, + "comments" : {{ .Site.Params.comments | jsonify }}, + "mediumzoom" : {{ .Site.Params.mediumzoom }}, + "lazyload" : {{ .Site.Params.lazyload }}, + "pangu" : {{ .Site.Params.pangu }}, + "stickytabs" : {{ .Site.Params.tabs.sticky }}, + "motion" : {{ .Site.Params.motion | jsonify }}, + // TODO Find prismjs + //"prism" : "", + "i18n" : { + "placeholder" : "", + "empty" : "${query}", + "hits_time" : "'${hits}', '${time}'", + "hits" : "${hits}" + }, + {{- if .Site.Params.algoliaSearch.enable }} + // TODO + "algolia" : { + "appID" : "", + "apiKey" : "", + "indexName" : "", + "hits" : "" } + {{- end }} + {{- if .Site.Params.localSearch.enable }} + // TODO + "path" : "/search.json", + "localsearch": {{ .Site.Params.localSearch | jsonify }}, + {{- end }} + "lang" : "{{ .Site.LanguageCode }}", + "permalink" : "{{ .Page.Permalink | absURL }}", + "title" : "{{ .Page.Title }}", + "isHome" : {{ .IsHome }}, + "isPage" : {{ .IsPage }} }; + + window.CONFIG = new Proxy(siteConfig, {}); - update('main'); - - window.CONFIG = new Proxy({}, { - get(overrideConfig, name) { - let existing; - if (name in staticConfig) { - existing = staticConfig[name]; - } else { - if (!(name in variableConfig)) update(name); - existing = variableConfig[name]; - } - - // For unset override and mixable existing - if (!(name in overrideConfig) && typeof existing === 'object') { - // Get ready to mix. - overrideConfig[name] = {}; - } - - if (name in overrideConfig) { - const override = overrideConfig[name]; - - // When mixable - if (typeof override === 'object' && typeof existing === 'object') { - // Mix, proxy changes to the override. - return new Proxy({ ...existing, ...override }, { - set(target, prop, value) { - target[prop] = value; - override[prop] = value; - return true; - } - }); - } - - return override; - } - - // Only when not mixable and override hasn't been set. - return existing; - } - }); - - document.addEventListener('pjax:success', () => { - variableConfig = {}; - }); -})(); +})(); \ No newline at end of file diff --git a/assets/js/motion.js b/assets/js/motion.js index 2f38249..f98867e 100644 --- a/assets/js/motion.js +++ b/assets/js/motion.js @@ -82,7 +82,7 @@ NexT.motion.middleWares = { postList: function() { const sequence = []; - const { post_block, post_header, post_body, coll_header } = CONFIG.motion.transition; + const { postblock, postheader, postbody, collheader } = CONFIG.motion.transition; function animate(animation, selector) { if (!animation) return; @@ -95,10 +95,10 @@ NexT.motion.middleWares = { }); } - animate(post_block, '.post-block, .pagination, .comments'); - animate(coll_header, '.collection-header'); - animate(post_header, '.post-header'); - animate(post_body, '.post-body'); + animate(postblock, '.post-block, .pagination, .post-comments'); + animate(collheader, '.collection-header'); + animate(postheader, '.post-header'); + animate(postbody, '.post-body'); return sequence; }, diff --git a/assets/js/utils.js b/assets/js/utils.js index 4b95e07..62acfce 100644 --- a/assets/js/utils.js +++ b/assets/js/utils.js @@ -287,7 +287,7 @@ NexT.utils = { if (window.innerWidth < 992 || CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') return; // Expand sidebar on post detail page by default, when post has a toc. const hasTOC = document.querySelector('.post-toc'); - let display = CONFIG.page.sidebar; + let display = CONFIG.sidebar; if (typeof display !== 'boolean') { // There's no definition sidebar in the page front-matter. display = CONFIG.sidebar.display === 'always' || (CONFIG.sidebar.display === 'post' && hasTOC); diff --git a/data/config.yaml b/data/config.yaml new file mode 100644 index 0000000..dbd6bed --- /dev/null +++ b/data/config.yaml @@ -0,0 +1,4 @@ +# Hugo NexT theme's custom config +# + +version: 4.0.0 \ No newline at end of file diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 8e8ed5a..a4a71ba 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -996,8 +996,8 @@ params: # Use Animate.css to animate everything. # For more information: https://animate.style motion: - enable: false - async: false + enable: true + async: true transition: # All available transition variants: https://theme-next.js.org/animate/ postBlock: fadeIn @@ -1010,7 +1010,7 @@ params: # Progress bar in the top during page loading. # For more information: https://github.com/CodeByZach/pace pace: - enable: false + enable: true # All available colors: # black | blue | green | orange | pink | purple | red | silver | white | yellow color: blue diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index 216ddb7..6a75aec 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -15,83 +15,29 @@ {{- $pluginJS = replace $pluginJS "${name}" $npm }} {{- $pluginJS = replace $pluginJS "${version}" $js.version }} {{- $pluginJS = replace $pluginJS "${file}" $file }} - + {{- end }} - - -{{ $config := resources.Get "js/config.js" }} -{{ $boot := resources.Get "js/next-boot.js" }} -{{ $utils := resources.Get "js/utils.js" }} -{{ $alljs := (slice $config $boot $utils) | resources.Concat "js/all.js"}} - \ No newline at end of file +{{- $config := resources.Get "js/config.js" | resources.ExecuteAsTemplate "config.js" . }} +{{- $motion := resources.Get "js/motion.js" }} +{{- $boot := resources.Get "js/next-boot.js" }} +{{- $utils := resources.Get "js/utils.js" }} +{{- $nextjs := (slice $config $utils $boot ) }} +{{- if .Site.Params.motion.enable }} +{{ $motionjs := resources.Get "js/motion.js" }} +{{ $nextjs = $nextjs | append $motionjs }} +{{- end }} +{{- if or (eq .Site.Params.shceme "Muse") (eq .Site.Params.shceme "Mist") }} +{{ $musejs := resources.Get "js/schemes/muse.js" }} +{{ $nextjs = $nextjs | append $musejs }} +{{- end }} +{{- if .Site.Params.bookmark.enable }} +{{- $bookmarkjs := resources.Get "js/bookmark.js" }} +{{- $nextjs = $nextjs | append $bookmarkjs }} +{{- end }} +{{- if .Site.Params.pjax }} +{{- $pjaxjs := resources.Get "js/pjax.js" }} +{{- $nextjs = $nextjs | append $pjaxjs }} +{{- end }} +{{- $nextjs = $nextjs | resources.Concat "js/hugo-next.js"}} + \ No newline at end of file From 00c93d2fb70dbf2d22e9f5b027c999e0f9e6ad2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= Date: Sat, 18 Jun 2022 19:53:09 +0800 Subject: [PATCH 02/30] :lipstick: Fixed some display padding & margin in mobile. --- assets/css/_common/outline/footer/index.scss | 8 + assets/css/_mixins.scss | 2 +- assets/css/_schemes/Pisces/_sidebar.scss | 2 +- assets/css/main.scss | 184 +++++++++---------- exampleSite/config.yaml | 2 +- 5 files changed, 103 insertions(+), 95 deletions(-) diff --git a/assets/css/_common/outline/footer/index.scss b/assets/css/_common/outline/footer/index.scss index 154186c..9f475d4 100644 --- a/assets/css/_common/outline/footer/index.scss +++ b/assets/css/_common/outline/footer/index.scss @@ -21,6 +21,14 @@ @include flex-column(); @include main-container(); + @include mobile() { + font-size: $font-size-smaller; + } + + @include mobile-small() { + font-size: $font-size-smallest; + } + @if $footer_vendors_enable { .vendors-list { a { diff --git a/assets/css/_mixins.scss b/assets/css/_mixins.scss index 9e435a8..10b2ebe 100644 --- a/assets/css/_mixins.scss +++ b/assets/css/_mixins.scss @@ -64,7 +64,7 @@ } @mixin sidebar-inline-links-item() { - margin: 5px 0 0; + margin: 5px 0; a { box-sizing: border-box; diff --git a/assets/css/_schemes/Pisces/_sidebar.scss b/assets/css/_schemes/Pisces/_sidebar.scss index c8a5715..4d6e9b1 100644 --- a/assets/css/_schemes/Pisces/_sidebar.scss +++ b/assets/css/_schemes/Pisces/_sidebar.scss @@ -75,7 +75,7 @@ @if $links_settings_layout == 'inline' { display: inline-block; max-width: 100%; - @include sidebar-inline-links-item(); + margin: 5px; } } diff --git a/assets/css/main.scss b/assets/css/main.scss index b214e0a..d73b24c 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -1,136 +1,136 @@ -// CSS Style Guide: https://codeguide.co/#css +// CSS Style Guide : https://codeguide.co/#css // All variables from site's config content. {{- $P := .Site.Params }} // Base -$scheme: {{ $P.scheme }}; -$darkmode: {{ $P.darkmode }}; +$scheme : {{ $P.scheme }}; +$darkmode : {{ $P.darkmode }}; -$body_scrollbar_overlay: {{ $P.bodyScrollbar.overlay }}; -$body_scrollbar_stable: {{ $P.bodyScrollbar.stable }}; -$mermaid_enable: {{ $P.mermaid.enable }}; -$mobile_layout_economy: {{ $P.mobileLayoutEconomy }}; -$theme_color_dark: {{ $P.themeColor.dark }}; -$theme_color_light: {{ $P.themeColor.light }}; +$body_scrollbar_overlay : {{ $P.bodyScrollbar.overlay }}; +$body_scrollbar_stable : {{ $P.bodyScrollbar.stable }}; +$mermaid_enable : {{ $P.mermaid.enable }}; +$mobile_layout_economy : {{ $P.mobileLayoutEconomy }}; +$theme_color_dark : {{ $P.themeColor.dark }}; +$theme_color_light : {{ $P.themeColor.light }}; // Header -$bookmark_color: {{ $P.bookmark.color }}; -$bookmark_enable: {{ $P.bookmark.enable }}; -$github_banner_enable: {{ $P.githubBanner.enable }}; -$menu_settings_badges: {{ $P.menuSets.badges }}; +$bookmark_color : {{ $P.bookmark.color }}; +$bookmark_enable : {{ $P.bookmark.enable }}; +$github_banner_enable : {{ $P.githubBanner.enable }}; +$menu_settings_badges : {{ $P.menuSets.badges }}; // Footer -$footer_icon_color: {{ $P.footer.icon.color }}; -$footer_icon_animated: {{ $P.footer.icon.animated }}; -$footer_beian_enable: {{ $P.footer.beian.enable }}; -$footer_vendors_enable: {{ isset $P.footer "vendors" }}; +$footer_icon_color : {{ $P.footer.icon.color }}; +$footer_icon_animated : {{ $P.footer.icon.animated }}; +$footer_beian_enable : {{ $P.footer.beian.enable }}; +$footer_vendors_enable : {{ isset $P.footer "vendors" }}; // Counter -$busuanzi_enable: {{ $P.busuanzi.enable }}; -$busuanzi_visitors: {{ $P.busuanzi.visitors }}; -$busuanzi_views: {{ $P.busuanzi.views }}; -$busuanzi_post_views: {{ $P.busuanzi.postViews }}; +$busuanzi_enable : {{ $P.busuanzi.enable }}; +$busuanzi_visitors : {{ $P.busuanzi.visitors }}; +$busuanzi_views : {{ $P.busuanzi.views }}; +$busuanzi_post_views : {{ $P.busuanzi.postViews }}; // Font -$font_enable: {{ $P.font.enable }}; -$font_global_size: {{ default $P.font.global.size 1 }}; -$font_headings_size: {{ default $P.font.headings.size 1.625 }}; -$font_title_size: {{ default $P.font.title.size 1.375 }}; +$font_enable : {{ $P.font.enable }}; +$font_global_size : {{ default $P.font.global.size 1 }}; +$font_headings_size : {{ default $P.font.headings.size 1.625 }}; +$font_title_size : {{ default $P.font.title.size 1.375 }}; // Code & Code blocks // TODO find the configure variable -$highlight_dark_background: #000; -$highlight_dark_foreground: #222; -$highlight_light_background: #000; -$highlight_light_foreground: #222; +$highlight_dark_background : #000; +$highlight_dark_foreground : #222; +$highlight_light_background : #000; +$highlight_light_foreground : #222; -$codeblock_copy_btn_style: {{ $P.codeblock.copyBtn.style }}; +$codeblock_copy_btn_style : {{ $P.codeblock.copyBtn.style }}; // Sidebar -$sidebar_offset: {{ $P.sidebar.offset }}; -$sidebar_padding: {{ $P.sidebar.padding }}; -$sidebar_position: {{ $P.sidebar.position }}; -$sidebar_width: {{ $P.sidebar.width }}; +$sidebar_offset : {{ $P.sidebar.offset }}; +$sidebar_padding : {{ $P.sidebar.padding }}; +$sidebar_position : {{ $P.sidebar.position }}; +$sidebar_width : {{ $P.sidebar.width }}; -$motion_enable: {{ $P.motion.enable }}; -$motion_transition_sidebar: {{ $P.motion.transition.sidebar }}; +$motion_enable : {{ $P.motion.enable }}; +$motion_transition_sidebar : {{ $P.motion.transition.sidebar }}; -$back2top_enable: {{ $P.backTop.enable }}; -$back2top_scrollpercent: {{ $P.backTop.scrollpercent }}; -$back2top_sidebar: {{ $P.backTop.sidebar }}; +$back2top_enable : {{ $P.backTop.enable }}; +$back2top_scrollpercent : {{ $P.backTop.scrollpercent }}; +$back2top_sidebar : {{ $P.backTop.sidebar }}; -$avatar_rotated: {{ $P.avatar.rotated }}; -$avatar_rounded: {{ $P.avatar.rounded }}; -$avatar_rounded: {{ $P.avatar.rounded }}; -$site_state: {{ $P.siteState }}; -$social_icons_only: {{ $P.socialIcons.iconsOnly }}; -$social_icons_transition: {{ $P.socialIcons.transition }}; -$links_settings_layout: {{ $P.linksSets.layout }}; -$toc_enable: {{ $P.toc.enable }}; -$toc_expand_all: {{ $P.toc.expandAll }}; -$toc_wrap: {{ $P.toc.wrap }}; +$avatar_rotated : {{ $P.avatar.rotated }}; +$avatar_rounded : {{ $P.avatar.rounded }}; +$avatar_rounded : {{ $P.avatar.rounded }}; +$site_state : {{ $P.siteState }}; +$social_icons_only : {{ $P.socialIcons.iconsOnly }}; +$social_icons_transition : {{ $P.socialIcons.transition }}; +$links_settings_layout : {{ $P.linksSets.layout }}; +$toc_enable : {{ $P.toc.enable }}; +$toc_expand_all : {{ $P.toc.expandAll }}; +$toc_wrap : {{ $P.toc.wrap }}; // Posts -$creative_commons_post: {{ $P.creativeCommons.post }}; -$follow_me: {{ isset $P "followme" }}; -$motion_trans_coll_header: {{ $P.motion.transition.collHeader }}; -$motion_trans_post_block: {{ $P.motion.transition.postBlock }}; -$motion_trans_post_body: {{ $P.motion.transition.postBody }}; -$motion_trans_post_header: {{ $P.motion.transition.postHeader }}; -$post_edit_enable: {{ $P.postEdit.enable }}; -$post_meta_item_text: {{ $P.postMeta.itemText }}; -$reward_settings_animation: {{ $P.rewardSets.animation }}; -$post_end_tag_icon: {{ $P.postFooter.tagIcon }}; +$creative_commons_post : {{ $P.creativeCommons.post }}; +$follow_me : {{ isset $P "followme" }}; +$motion_trans_coll_header : {{ $P.motion.transition.collHeader }}; +$motion_trans_post_block : {{ $P.motion.transition.postBlock }}; +$motion_trans_post_body : {{ $P.motion.transition.postBody }}; +$motion_trans_post_header : {{ $P.motion.transition.postHeader }}; +$post_edit_enable : {{ $P.postEdit.enable }}; +$post_meta_item_text : {{ $P.postMeta.itemText }}; +$reward_settings_animation : {{ $P.rewardSets.animation }}; +$post_end_tag_icon : {{ $P.postFooter.tagIcon }}; // TODO find the paramters -$text_align_desktop: justify; -$text_align_mobile: justify; +$text_align_desktop : {{ $P.textAlign.desktop }}; +$text_align_mobile : {{ $P.textAlign.mobile }}; // Note -$note_icons: {{ $P.note.icons }}; -$note_light_bg_offset: {{ $P.note.lightBgOffset }}; -$note_style: {{ $P.note.style }}; +$note_icons : {{ $P.note.icons }}; +$note_light_bg_offset : {{ $P.note.lightBgOffset }}; +$note_style : {{ $P.note.style }}; // Tabs -$tabs_transition_labels: {{ $P.tabs.transition.labels }}; -$tabs_transition_tabs: {{ $P.tabs.transition.tabs }}; +$tabs_transition_labels : {{ $P.tabs.transition.labels }}; +$tabs_transition_tabs : {{ $P.tabs.transition.tabs }}; // Reading progress bar -$reading_progress_start: {{ $P.readingProgress.start }}; -$reading_progress_color: {{ $P.readingProgress.color }}; -$reading_progress_enable: {{ $P.readingProgress.enable }}; -$reading_progress_height: {{ $P.readingProgress.height }}; -$reading_progress_position: {{ $P.readingProgress.position }}; -$reading_progress_reversed: {{ $P.readingProgress.reversed }}; +$reading_progress_start : {{ $P.readingProgress.start }}; +$reading_progress_color : {{ $P.readingProgress.color }}; +$reading_progress_enable : {{ $P.readingProgress.enable }}; +$reading_progress_height : {{ $P.readingProgress.height }}; +$reading_progress_position : {{ $P.readingProgress.position }}; +$reading_progress_reversed : {{ $P.readingProgress.reversed }}; // Thirdparty -$math_mathjax_enable: {{ $P.math.mathjax.enable }}; -$related_posts_enable: {{ $P.relatedPosts.enable }}; -$pdf_enable: {{ $P.pdf.enable }}; -$pdf_height: {{ $P.pdf.height }}; +$math_mathjax_enable : {{ $P.math.mathjax.enable }}; +$related_posts_enable : {{ $P.relatedPosts.enable }}; +$pdf_enable : {{ $P.pdf.enable }}; +$pdf_height : {{ $P.pdf.height }}; // Search engine -$algolia_search_enable: {{ $P.algoliaSearch.enable }}; -$local_search_enable: {{ $P.localSearch.enable }}; +$algolia_search_enable : {{ $P.algoliaSearch.enable }}; +$local_search_enable : {{ $P.localSearch.enable }}; // Online IM -$gitalk_enable: {{ $P.gitalk.enable }}; -$gitter_enable: {{ $P.gitter.enable }}; +$gitalk_enable : {{ $P.gitalk.enable }}; +$gitter_enable : {{ $P.gitter.enable }}; // Comment -$disqusjs_enable: {{ $P.disqusjs.enable }}; -$livere_enable: {{ $P.livere.enable }}; -$utterances_enable: {{ $P.utterances.enable }}; -$waline_enable: {{ $P.waline.enable }}; +$disqusjs_enable : {{ $P.disqusjs.enable }}; +$livere_enable : {{ $P.livere.enable }}; +$utterances_enable : {{ $P.utterances.enable }}; +$waline_enable : {{ $P.waline.enable }}; {{- with .Site.Params.comments }} -{{ $tce := and (isset . "nav") (and .storage (gt (len .nav) 1)) }} -$two_comments_enable: {{ $tce }}; +{{- $tce := and (isset . "nav") (and .storage (gt (len .nav) 1)) }} +$two_comments_enable : {{ $tce }}; {{- if $tce }} -{{- $sortNav := sort .nav "weight" }} -$two_comments_actived: {{ .active }}; -$first_comment_color: {{ (index $sortNav 0).color }}; -$first_comment_name: {{ lower (index $sortNav 0).name }}; -$second_comment_color: {{ (index $sortNav 1).color }}; -$second_comment_name: {{ lower (index $sortNav 1).name }}; +{{- $sortNav := sort .nav "weight" }} +$two_comments_actived : {{ .active }}; +$first_comment_color : {{ (index $sortNav 0).color }}; +$first_comment_name : {{ lower (index $sortNav 0).name }}; +$second_comment_color : {{ (index $sortNav 1).color }}; +$second_comment_name : {{ lower (index $sortNav 1).name }}; {{- end }} {{- end }} diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index a4a71ba..077ce67 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -483,7 +483,7 @@ params: mobile: justify # Reduce padding / margin indents on devices with narrow width. - mobileLayoutEconomy: false + mobileLayoutEconomy: true # Browser header panel color. themeColor: From f155ded3e003840b3f42d1cd3008f5a8d54dfa4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= Date: Sun, 19 Jun 2022 14:53:12 +0800 Subject: [PATCH 03/30] :lipstick: Add extend URL display style. --- assets/js/config.js | 1 - assets/js/next-boot.js | 2 +- assets/js/utils.js | 16 ---------------- exampleSite/config.yaml | 6 ++++-- exampleSite/start.sh | 2 +- layouts/_default/_markup/render-link.html | 7 +++++++ 6 files changed, 13 insertions(+), 21 deletions(-) create mode 100644 layouts/_default/_markup/render-link.html diff --git a/assets/js/config.js b/assets/js/config.js index be94ae9..992939b 100644 --- a/assets/js/config.js +++ b/assets/js/config.js @@ -9,7 +9,6 @@ if (!window.NexT) window.NexT = {}; "scheme" : "{{ .Site.Params.scheme }}", "darkmode" : {{ .Site.Params.darkmode }}, "version" : "{{ .Site.Data.config.version }}", - "exturl" : {{ .Site.Params.exturl }}, "sidebar" : {{ .Site.Params.sidebar | jsonify }}, "copycode" : {{ .Site.Params.codeblock.copyBtn | jsonify }}, "bookmark" : {{ .Site.Params.bookmark | jsonify }}, diff --git a/assets/js/next-boot.js b/assets/js/next-boot.js index dedb54b..088ccfe 100644 --- a/assets/js/next-boot.js +++ b/assets/js/next-boot.js @@ -37,7 +37,7 @@ NexT.boot.refresh = function() { * Register JS handlers by condition option. * Need to add config option in Front-End at 'scripts/helpers/next-config.js' file. */ - CONFIG.prism && window.Prism.highlightAll(); + //CONFIG.prism && window.Prism.highlightAll(); /*CONFIG.mediumzoom && window.mediumZoom('.post-body :not(a) > img, .post-body > img', { background: 'var(--content-bg-color)' });*/ diff --git a/assets/js/utils.js b/assets/js/utils.js index 62acfce..7c18011 100644 --- a/assets/js/utils.js +++ b/assets/js/utils.js @@ -23,22 +23,6 @@ HTMLElement.prototype.wrap = function(wrapper) { NexT.utils = { - registerExtURL: function() { - document.querySelectorAll('span.exturl').forEach(element => { - const link = document.createElement('a'); - // https://stackoverflow.com/questions/30106476/using-javascripts-atob-to-decode-base64-doesnt-properly-decode-utf-8-strings - link.href = decodeURIComponent(atob(element.dataset.url).split('').map(c => { - return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); - }).join('')); - link.rel = 'noopener external nofollow noreferrer'; - link.target = '_blank'; - link.className = element.className; - link.title = element.title; - link.innerHTML = element.innerHTML; - element.parentNode.replaceChild(link, element); - }); - }, - /** * One-click copy code support. */ diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 077ce67..44a6f4c 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -608,9 +608,11 @@ params: index_with_subtitle: false # Automatically add external URL with Base64 encrypt & decrypt. - exturl: false + exturl: + enable: true + icon: true # If true, an icon will be attached to each external URL - exturl_icon: true + #exturl_icon: true # Google Webmaster tools verification. # See: https://developers.google.com/search diff --git a/exampleSite/start.sh b/exampleSite/start.sh index 165aa03..806fa5f 100644 --- a/exampleSite/start.sh +++ b/exampleSite/start.sh @@ -17,6 +17,6 @@ Documentation: https://hugo-next.js.org EOT } -next V0.0.1 +next `cat ../VERSION` hugo server -D -t ../.. --port 1414 --panicOnWarning \ No newline at end of file diff --git a/layouts/_default/_markup/render-link.html b/layouts/_default/_markup/render-link.html new file mode 100644 index 0000000..8b66301 --- /dev/null +++ b/layouts/_default/_markup/render-link.html @@ -0,0 +1,7 @@ +{{- $extURL := .Page.Site.Params.exturl.enable }} + + {{ .Text | safeHTML }} + {{- if and $extURL .Page.Site.Params.exturl.icon }} + + {{- end }} + \ No newline at end of file From d20198d956c2dc992f712a306612fbd49b86baf6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= Date: Sun, 19 Jun 2022 15:22:42 +0800 Subject: [PATCH 04/30] :lipstick: Rechange the page visitor links. --- assets/js/next-boot.js | 1 - exampleSite/config.yaml | 2 +- exampleSite/content/posts/emoji-support.md | 2 +- exampleSite/content/posts/hello-world.en.md | 2 +- exampleSite/content/posts/hello-world.md | 2 +- exampleSite/content/posts/markdown-syntax.md | 2 +- exampleSite/content/posts/syntax-highlighting.md | 2 +- exampleSite/content/posts/table-of-content.md | 2 +- 8 files changed, 7 insertions(+), 8 deletions(-) diff --git a/assets/js/next-boot.js b/assets/js/next-boot.js index 088ccfe..0c27ed1 100644 --- a/assets/js/next-boot.js +++ b/assets/js/next-boot.js @@ -44,7 +44,6 @@ NexT.boot.refresh = function() { CONFIG.lazyload && window.lozad('.post-body img').observe(); CONFIG.pangu && window.pangu.spacingPage(); - CONFIG.exturl && NexT.utils.registerExtURL(); NexT.utils.registerCopyCode(); NexT.utils.registerTabsTag(); /*NexT.utils.registerActiveMenuItem(); diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 44a6f4c..2bd8498 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -354,7 +354,7 @@ params: vendors: title: 提供CDN/云资源支持 list: - - name: CloudBase Webify + - name: Webify link: https://webify.cloudbase.net - name: Vercel img: /imgs/vendors/vercel.svg || 55 diff --git a/exampleSite/content/posts/emoji-support.md b/exampleSite/content/posts/emoji-support.md index bbf8a14..b0ab583 100644 --- a/exampleSite/content/posts/emoji-support.md +++ b/exampleSite/content/posts/emoji-support.md @@ -13,7 +13,7 @@ tags: - emoji toc: false -url: "emoji-support.html" +url: "post/emoji-support.html" --- Emoji 可以通过多种方式在 Hugo 项目中启用。 diff --git a/exampleSite/content/posts/hello-world.en.md b/exampleSite/content/posts/hello-world.en.md index dc49e61..a512e62 100644 --- a/exampleSite/content/posts/hello-world.en.md +++ b/exampleSite/content/posts/hello-world.en.md @@ -11,7 +11,7 @@ tags: - Hugo - Startup -url: hello-world.html +url: post/hello-world.html weight: 2 --- diff --git a/exampleSite/content/posts/hello-world.md b/exampleSite/content/posts/hello-world.md index 2abc8de..a7fdcff 100644 --- a/exampleSite/content/posts/hello-world.md +++ b/exampleSite/content/posts/hello-world.md @@ -11,7 +11,7 @@ tags: - Hugo - 开始 -url: hello-world.html +url: post/hello-world.html weight: 2 --- diff --git a/exampleSite/content/posts/markdown-syntax.md b/exampleSite/content/posts/markdown-syntax.md index ef223bd..89bf77e 100644 --- a/exampleSite/content/posts/markdown-syntax.md +++ b/exampleSite/content/posts/markdown-syntax.md @@ -17,7 +17,7 @@ tags: toc: false draft: false -url: markdown-syntax.html +url: post/markdown-syntax.html --- 仅以此篇文章来测试下在 `NexT` 主题中在通过 `Hugo` 引擎来建站时，是否支持 `Markdown` 文件内容中所写的各种语法，并展示下实际的效果。 diff --git a/exampleSite/content/posts/syntax-highlighting.md b/exampleSite/content/posts/syntax-highlighting.md index db5ccb6..bbedc6f 100644 --- a/exampleSite/content/posts/syntax-highlighting.md +++ b/exampleSite/content/posts/syntax-highlighting.md @@ -13,7 +13,7 @@ tags: - 高亮 - Chroma -url: "syntax-highlighting.html" +url: post/syntax-highlighting.html --- Hugo 通过 Chroma 提供非常快速的语法高亮显示，现 Hugo 中使用 Chroma 作为代码块高亮支持，它内置在 Go 语言当中，速度是真的非常、非常快，而且最为重要的是它也兼容之前我们使用的 Pygments 方式。 diff --git a/exampleSite/content/posts/table-of-content.md b/exampleSite/content/posts/table-of-content.md index 4d48a92..884653c 100644 --- a/exampleSite/content/posts/table-of-content.md +++ b/exampleSite/content/posts/table-of-content.md @@ -14,7 +14,7 @@ tags: - 博客 toc: true -url: "table-of-content.html" +url: post/table-of-content.html --- 巴顿将军说过：“衡量一个人是否成功，不是看他站到顶峰，而是从顶峰跌落之后的反弹力”，褚时健的人生便是如此，中年发家致富，名利双收，之后又跌落到谷底，等到74岁再创业，10年后带着褚橙归来，东山再起收获亿万财富，他的发展轨迹就是反弹的过程。 From 05ac33e27f59383b42b2f339832c9c6d4c5f902b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= Date: Sun, 19 Jun 2022 18:18:17 +0800 Subject: [PATCH 05/30] :lipstick: Come true the comments switch button working. --- .../_common/components/third-party/utterances.scss | 3 ++- assets/css/_common/scaffolding/comments.scss | 13 ++++++++----- assets/js/next-boot.js | 1 + assets/js/utils.js | 14 ++++++++++++++ .../partials/_thirdparty/comment/utterances.html | 4 +++- 5 files changed, 28 insertions(+), 7 deletions(-) diff --git a/assets/css/_common/components/third-party/utterances.scss b/assets/css/_common/components/third-party/utterances.scss index d324d55..114be85 100644 --- a/assets/css/_common/components/third-party/utterances.scss +++ b/assets/css/_common/components/third-party/utterances.scss @@ -1,5 +1,6 @@ @if $utterances_enable { .utterances { - max-width: unset; + //max-width: unset; + min-height: 300px; } } diff --git a/assets/css/_common/scaffolding/comments.scss b/assets/css/_common/scaffolding/comments.scss index a0402cd..6c651b0 100644 --- a/assets/css/_common/scaffolding/comments.scss +++ b/assets/css/_common/scaffolding/comments.scss @@ -67,10 +67,6 @@ .first-comment { color: $first_comment_color; - - @if $two_comments_actived==$first_comment_name { - font-weight: bold; - } } .second-comment { @@ -82,6 +78,7 @@ } $switch_btn_bg_color: $first_comment_color; + $switch_btn_move_bc: $second_comment_color; .switch-btn { position: relative; @@ -100,6 +97,7 @@ @if $two_comments_actived==$second_comment_name { $switch_btn_bg_color: $second_comment_color; + $switch_btn_move_bc: $first_comment_color; } background-color: $switch_btn_bg_color; @@ -120,7 +118,11 @@ transition: .4s } - &.move:before { + &.move { + background-color: $switch_btn_move_bc; + } + + &.move:before { -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); @@ -129,6 +131,7 @@ } } } + } } diff --git a/assets/js/next-boot.js b/assets/js/next-boot.js index 0c27ed1..b070bf1 100644 --- a/assets/js/next-boot.js +++ b/assets/js/next-boot.js @@ -50,6 +50,7 @@ NexT.boot.refresh = function() { NexT.utils.registerLangSelect();*/ NexT.utils.registerSidebarTOC(); NexT.utils.registerPostReward(); + NexT.utils.registerCommonSwitch(); NexT.utils.wrapTableWithBox(); NexT.utils.registerVideoIframe(); }; diff --git a/assets/js/utils.js b/assets/js/utils.js index 7c18011..435c783 100644 --- a/assets/js/utils.js +++ b/assets/js/utils.js @@ -243,6 +243,20 @@ NexT.utils = { }); }, + registerCommonSwitch: function() { + const button = document.querySelector('.comment-switch .switch-btn'); + if (!button) return; + const cwrap = document.querySelector('.comment-wrap'); + button.addEventListener('click', () => { + button.classList.toggle('move'); + const comms = document.querySelectorAll('.comment-wrap > div'); + let len = comms.length; + while(len--){ + cwrap.appendChild(comms[len]); + } + }); + }, + activateNavByIndex: function(index) { const target = document.querySelectorAll('.post-toc li a.nav-link')[index]; if (!target || target.classList.contains('active-current')) return; diff --git a/layouts/partials/_thirdparty/comment/utterances.html b/layouts/partials/_thirdparty/comment/utterances.html index 757bd02..571b0a5 100644 --- a/layouts/partials/_thirdparty/comment/utterances.html +++ b/layouts/partials/_thirdparty/comment/utterances.html @@ -1,5 +1,6 @@ {{- with .Site.Params.utterances }} - {{- end }} +{{- end }} From f0ae8343748c28f735d359f5756bc358fd2f8206 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= Date: Sun, 19 Jun 2022 22:30:17 +0800 Subject: [PATCH 06/30] :bug: Fixed the utterances script reference source. --- layouts/partials/_thirdparty/comment/utterances.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/partials/_thirdparty/comment/utterances.html b/layouts/partials/_thirdparty/comment/utterances.html index 571b0a5..5c1ae99 100644 --- a/layouts/partials/_thirdparty/comment/utterances.html +++ b/layouts/partials/_thirdparty/comment/utterances.html @@ -1,6 +1,6 @@ {{- with .Site.Params.utterances }} {{- if .enable }} - {{- end }} \ No newline at end of file diff --git a/layouts/partials/comments.html b/layouts/partials/comments.html index 694a149..3626216 100644 --- a/layouts/partials/comments.html +++ b/layouts/partials/comments.html @@ -28,11 +28,15 @@ {{- if $tc }} {{- range $sn }}
+ {{- partial "_thirdparty/comment/comm_loading.html" . }} {{- partial (printf $cp (lower .name)) $root }}
{{- end }} {{- else }} -
{{- partial (printf $cp $fc) $root }}
+
+ {{- partial "_thirdparty/comment/comm_loading.html" . }} + {{- partial (printf $cp $fc) $root }} +
{{- end }} From 8948151b058e918c81302d4ccaf0fe5af6074e2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= Date: Mon, 20 Jun 2022 11:24:48 +0800 Subject: [PATCH 09/30] :lipstick: :bug: Fixed the loading style in mobile driver. --- assets/css/_common/scaffolding/comments.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/assets/css/_common/scaffolding/comments.scss b/assets/css/_common/scaffolding/comments.scss index e8f9403..3891762 100644 --- a/assets/css/_common/scaffolding/comments.scss +++ b/assets/css/_common/scaffolding/comments.scss @@ -61,6 +61,12 @@ margin-top: 100px; text-align: center; font-size: 2em; + + @include tablet-mobile() { + padding-left: 0; + padding-right: 0; + width: auto; + } } .comment-head { From 26f36810c9423d3f50d4a6129fa047e4370a27c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= Date: Mon, 20 Jun 2022 16:07:50 +0800 Subject: [PATCH 10/30] :lipstick: :bug: Fixed the comment component animation style. --- .../_common/scaffolding/animation/hover.scss | 0 .../_common/scaffolding/animation/index.scss | 2 + .../_common/scaffolding/animation/show.scss | 65 +++++++++++++++++++ assets/css/_common/scaffolding/index.scss | 1 + assets/js/utils.js | 9 ++- layouts/partials/head/style.html | 1 - 6 files changed, 72 insertions(+), 6 deletions(-) rename static/css/hover.css => assets/css/_common/scaffolding/animation/hover.scss (100%) create mode 100644 assets/css/_common/scaffolding/animation/index.scss create mode 100644 assets/css/_common/scaffolding/animation/show.scss diff --git a/static/css/hover.css b/assets/css/_common/scaffolding/animation/hover.scss similarity index 100% rename from static/css/hover.css rename to assets/css/_common/scaffolding/animation/hover.scss diff --git a/assets/css/_common/scaffolding/animation/index.scss b/assets/css/_common/scaffolding/animation/index.scss new file mode 100644 index 0000000..ab096bc --- /dev/null +++ b/assets/css/_common/scaffolding/animation/index.scss @@ -0,0 +1,2 @@ +@import 'show'; +@import 'hover'; \ No newline at end of file diff --git a/assets/css/_common/scaffolding/animation/show.scss b/assets/css/_common/scaffolding/animation/show.scss new file mode 100644 index 0000000..4c0fd6b --- /dev/null +++ b/assets/css/_common/scaffolding/animation/show.scss @@ -0,0 +1,65 @@ +// tabshow animation +@-moz-keyframes tabshow { + 0% { + -webkit-transform: translateY(15px); + -moz-transform: translateY(15px); + -o-transform: translateY(15px); + -ms-transform: translateY(15px); + transform: translateY(15px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-webkit-keyframes tabshow { + 0% { + -webkit-transform: translateY(15px); + -moz-transform: translateY(15px); + -o-transform: translateY(15px); + -ms-transform: translateY(15px); + transform: translateY(15px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-o-keyframes tabshow { + 0% { + -webkit-transform: translateY(15px); + -moz-transform: translateY(15px); + -o-transform: translateY(15px); + -ms-transform: translateY(15px); + transform: translateY(15px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes tabshow { + 0% { + -webkit-transform: translateY(15px); + -moz-transform: translateY(15px); + -o-transform: translateY(15px); + -ms-transform: translateY(15px); + transform: translateY(15px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} \ No newline at end of file diff --git a/assets/css/_common/scaffolding/index.scss b/assets/css/_common/scaffolding/index.scss index 5cd24ed..2fb5cb7 100644 --- a/assets/css/_common/scaffolding/index.scss +++ b/assets/css/_common/scaffolding/index.scss @@ -11,3 +11,4 @@ @import 'pagination'; @import 'comments'; @import 'fontawesome'; +@import 'animation'; diff --git a/assets/js/utils.js b/assets/js/utils.js index abc0f0d..b71651e 100644 --- a/assets/js/utils.js +++ b/assets/js/utils.js @@ -258,12 +258,11 @@ NexT.utils = { const comms = document.querySelectorAll('.comment-wrap > div'); button.addEventListener('click', () => { button.classList.toggle('move'); - comms.forEach(function(item){ - item.style.display = item.style.display === 'none' ? 'block' : 'none'; - if (item.style.display === 'block') { - item.style.animation = "0.8s ease 0s 1 normal none running tabshow"; + comms.forEach(function(item){ + if (item.style.display === 'none') { + item.style.cssText = "display: block; animation: tabshow .8s"; } else { - item.style.removeProperty('animation'); + item.style.cssText = "display: none;" } }); }); diff --git a/layouts/partials/head/style.html b/layouts/partials/head/style.html index 7b54c39..f2f8889 100644 --- a/layouts/partials/head/style.html +++ b/layouts/partials/head/style.html @@ -22,7 +22,6 @@ {{- $scss = $scss | resources.ExecuteAsTemplate "main.scss" . }} {{- $css := $scss | toCSS (dict "targetPath" "/css/main.css" "outputStyle" "expanded") }} - {{- if .IsPage }}