feat(moments): 适配瞬间插件

settings.yaml

@@ -828,6 +828,33 @@ spec:
               label:  开启
             - value: false
               label:  关闭
+        - $formkit: text
+          name: journals_fold_height
+          label:  日志页面-动态内容折叠
+          placeholder: '请输入高度数值（px）'
+          help: '动态内容高度超出指定高度后默认进行折叠，指定的高度需大于等于 260px。'
+        - $formkit: radio
+          name: enable_journals_comment
+          label:  日志页面-开启评论区
+          value: true
+          options:
+            - value: true
+              label:  开启
+            - value: false
+              label:  关闭
+        - $formkit: radio
+          name: enable_journals_share
+          label:  日志页面-开启日志分享
+          value: true
+          options:
+            - value: true
+              label:  开启
+            - value: false
+              label:  关闭
+        - $formkit: attachment
+          name: journals_share_image
+          label: 日志页面-日志分享背景图
+          placeholder: '请输入/选择图片路径'
     - group: enhance
       label: '增强功能'
       formSchema:

src/js/common.js

@@ -405,17 +405,23 @@ const commonContext = {
   },
   /* 初始化评论区 */
   initComment() {
-    const $mainContent = $('.main-content')
-    window.CommentWidget && CommentWidget.init(
-      '#comment',
-      '/plugins/PluginCommentWidget/assets/static/style.css',
-      {
-        group: 'content.halo.run',
-        kind: $mainContent.attr('data-target'),
-        name: $mainContent.attr('data-id'),
-        colorScheme: window.dataTheme
-      }
-    )
+    if (!window.CommentWidget) {
+      return
+    }
+    $('.widget-comment').each(function (index, item) {
+      let target = $(this).attr('data-target')
+      let id = $(this).attr('data-id')
+      CommentWidget.init(
+        `.widget-comment[data-id=${id}][data-target=${target}]`,
+        '/plugins/PluginCommentWidget/assets/static/style.css',
+        {
+          group: 'content.halo.run',
+          kind: target,
+          name: id,
+          colorScheme: window.dataTheme
+        }
+      )
+    })
   },
   /* 初始化特效，只需要初始化一次，移动端设备不初始化 */
   initEffects() {

src/js/journals.js

@@ -0,0 +1,58 @@
+let journalContextInitial = false
+const journalContext = {
+  /* 初始化事件 */
+  initEvent() {
+    if (journalContextInitial) return
+    let $body = $('body')
+    // 展开和关闭评论区事件
+    $body.on('click', '.journal .comment', function () {
+      $(this).parent().parent().siblings('.journal-comment').stop().slideToggle(200)
+    })
+    // 折叠日志区域
+    $body.on('click', '.journal-content>.expand-done', function () {
+      Utils.foldBlock($(this).parent())
+    })
+    $body.on('click', '.journal-operation-item>.share', function () {
+      let $journal = $(this).parents('.journal')
+      let title = '动态: ' + $journal.find('.journal-date>em').text()
+      let desc = $journal.children('.journal-content').children('.main-content').text()
+      DShare.sharePoster({
+        image: DreamConfig.journals_share_image,
+        title: title,
+        description: desc.length > 220 ? desc.substring(0, 220) + '...' :desc
+      })
+    })
+    Utils.initLikeEvent('.journal .like', 'Moment', ($elem) => $elem.next())
+    journalContextInitial = true
+  },
+  /* 点赞 */
+  initLike() {
+    Utils.initLikeButton('.journal .like', 'Moment')
+  },
+  /* 折叠日志区域 */
+  foldJournals() {
+    const $journals = $('.journal .journal-content')
+    $journals.each(function () {
+      const $this = $(this)
+      if (this.scrollHeight >= DreamConfig.journals_fold_height) {
+        $this.append('<div class="expand-done"><i class="fa fa-angle-double-up"></i></div>')
+      } else {
+        $this.removeClass('fold')
+      }
+    })
+  },
+}
+window.journalPjax = function (serialNumber) {
+  if ($('.card.journal').length === 0) return
+  Object.keys(journalContext).forEach(
+    (c) => window.pjaxSerialNumber === serialNumber && journalContext[c]()
+  )
+}
+!(function () {
+  !window.pjaxSerialNumber && journalContext.initEvent()
+  !window.pjaxSerialNumber && journalContext.initLike()
+
+  document.addEventListener('DOMContentLoaded', function () {
+    !window.pjaxSerialNumber && journalContext.foldJournals()
+  })
+})()

src/js/pjax.js

@@ -165,6 +165,8 @@ $(document).on('pjax:success', async function (event, data, status, xhr, options
   }
   console.log('全部处理完成')
   if (window.pjaxSerialNumber !== serialNumber) return
+  /* 初始化日志界面 */
+  window.journalPjax && window.journalPjax(serialNumber)
   /* 初始化文章界面 */
   window.postPjax && window.postPjax(serialNumber)
   /* 初始化评论 */

templates/assets/js/pjax.min.js

@@ -1 +1 @@
-(()=>{const c=new Set($('link[href*=".css"]').map((o,e)=>$(e).attr("href")).get()),l=new Set($('script[src*=".js"]').map((o,e)=>$(e).attr("src")).get()),e=()=>{var o=(new Date).getTime();return window.pjaxSerialNumber=o,console.log("sn = "+o),o},i=(e,n,t)=>{if(n>=e.length)t&&t();else{let o=$(e[n]).attr("src");l.has(o)?i(e,n+1,t):(console.log((t?"同步":"异步")+"顺序加载js "+o),Utils.cachedScript(o).done(function(){console.log((t?"同步":"异步")+"顺序加载js完成 "+o),l.add(o),window.DProgress&&DProgress.inc(),i(e,n+1,t)}).fail(function(){console.log((t?"同步":"异步")+"顺序加载js失败 "+o),i(e,n+1,t)}))}};$(document).on("click","a[target!=_blank][href]:not(data-not-pjax)",o=>{$.pjax.click(o,".column-main",{scrollTo:"/"!==o.currentTarget.pathname&&0!==$(".banner").length?window.innerHeight/4:0,fragment:".column-main",serialNumber:e(),timeout:8e3})}),$(document).on("submit","form[data-pjax]",function(o){$.pjax.submit(o,".column-main",{scrollTo:0,fragment:".column-main",serialNumber:e(),timeout:8e3})}),$(document).on("pjax:click",function(o,e){console.log("------------------------"),console.log("pjax:click sn = "+e.serialNumber)}),$(document).on("pjax:beforeSend",function(o,e,n){console.log("pjax:beforeSend sn = "+n.serialNumber),$("html").addClass("pjax-loading")}),$(document).on("pjax:start",function(o,e,n){console.log("pjax:start sn = "+n.serialNumber),window.DProgress&&DProgress.start(),$(".pjax-close").remove()}),$(document).on("pjax:send",function(o,e,n){console.log("pjax:send sn = "+n.serialNumber)}),$(document).on("pjax:clicked",function(o,e){console.log("pjax:clicked sn = "+e.serialNumber)}),$(document).on("pjax:beforeReplace",function(o,e,n){console.log("pjax:beforeReplace sn = "+n.serialNumber),$(".navbar-nav .current,.panel-side-menu .current").removeClass("current"),commonContext.initNavbar(),0<$("html.disable-scroll").length&&$(".navbar-mask").trigger("click")}),$(document).on("pjax:success",async function(o,e,n,t,s){s=s.serialNumber;if(console.log("pjax:success sn = "+s),window.pjaxSerialNumber===s){commonContext.initGallery(),commonContext.initTocAndNotice(),$("html").removeClass("pjax-loading");const a=$($.parseHTML(e,document,!0)),r=$("head");r.find("meta").remove(),r.append(a.filter("meta")),a.filter("link[data-pjax]").each(function(){let o=$(this).attr("href");c.has(o)||(r.append($(this)),console.log("加载css "+$(this).attr("href")),this.onload=function(){c.add(o),window.DProgress&&DProgress.inc(),console.log("加载css完成 "+$(this).attr("href"))})});let o=a.filter("script[data-pjax]");if(0<o.length){o.filter("[async]").each(function(){let o=$(this).attr("src");l.has(o)||(console.log("异步无序加载js "+o),Utils.cachedScript(o).done(function(){console.log("异步无序js完成 "+o),window.DProgress&&DProgress.inc(),l.add(o)}).fail(function(){console.log("异步无序js失败 "+o)}))}),new Promise(()=>{i(o.filter("[defer]"),0)});let e=o.filter(":not([async]):not([defer])");0<e.length&&await new Promise(o=>{i(e,0,o)})}console.log("全部处理完成"),window.pjaxSerialNumber===s&&(window.postPjax&&window.postPjax(s),commonContext.initComment(),commonContext.initCarousel(),commonContext.loadMaintain(),window.DProgress)&&DProgress.done()}}),$(document).on("pjax:timeout",function(o,e,n){console.log("pjax:timeout sn = "+n.serialNumber)}),$(document).on("pjax:error",function(o,e,n,t,s){console.log(`pjax:error sn = ${s.serialNumber} error `+t)}),$(document).on("pjax:complete",function(o,e,n,t){console.log("pjax:complete sn = "+t.serialNumber)}),$(document).on("pjax:end",function(o,e,n){console.log("pjax:end sn = "+n.serialNumber),null==e&&(commonContext.initTocAndNotice(),commonContext.initCarousel(),window.DProgress&&DProgress.done(),$("html").removeClass("pjax-loading"))}),$(document).on("pjax:popstate",function(){console.log("pjax:popstate")})})();
+(()=>{const l=new Set($('link[href*=".css"]').map((o,e)=>$(e).attr("href")).get()),c=new Set($('script[src*=".js"]').map((o,e)=>$(e).attr("src")).get()),e=()=>{var o=(new Date).getTime();return window.pjaxSerialNumber=o,console.log("sn = "+o),o},i=(e,n,t)=>{if(n>=e.length)t&&t();else{let o=$(e[n]).attr("src");c.has(o)?i(e,n+1,t):(console.log((t?"同步":"异步")+"顺序加载js "+o),Utils.cachedScript(o).done(function(){console.log((t?"同步":"异步")+"顺序加载js完成 "+o),c.add(o),window.DProgress&&DProgress.inc(),i(e,n+1,t)}).fail(function(){console.log((t?"同步":"异步")+"顺序加载js失败 "+o),i(e,n+1,t)}))}};$(document).on("click","a[target!=_blank][href]:not(data-not-pjax)",o=>{$.pjax.click(o,".column-main",{scrollTo:"/"!==o.currentTarget.pathname&&0!==$(".banner").length?window.innerHeight/4:0,fragment:".column-main",serialNumber:e(),timeout:8e3})}),$(document).on("submit","form[data-pjax]",function(o){$.pjax.submit(o,".column-main",{scrollTo:0,fragment:".column-main",serialNumber:e(),timeout:8e3})}),$(document).on("pjax:click",function(o,e){console.log("------------------------"),console.log("pjax:click sn = "+e.serialNumber)}),$(document).on("pjax:beforeSend",function(o,e,n){console.log("pjax:beforeSend sn = "+n.serialNumber),$("html").addClass("pjax-loading")}),$(document).on("pjax:start",function(o,e,n){console.log("pjax:start sn = "+n.serialNumber),window.DProgress&&DProgress.start(),$(".pjax-close").remove()}),$(document).on("pjax:send",function(o,e,n){console.log("pjax:send sn = "+n.serialNumber)}),$(document).on("pjax:clicked",function(o,e){console.log("pjax:clicked sn = "+e.serialNumber)}),$(document).on("pjax:beforeReplace",function(o,e,n){console.log("pjax:beforeReplace sn = "+n.serialNumber),$(".navbar-nav .current,.panel-side-menu .current").removeClass("current"),commonContext.initNavbar(),0<$("html.disable-scroll").length&&$(".navbar-mask").trigger("click")}),$(document).on("pjax:success",async function(o,e,n,t,a){a=a.serialNumber;if(console.log("pjax:success sn = "+a),window.pjaxSerialNumber===a){commonContext.initGallery(),commonContext.initTocAndNotice(),$("html").removeClass("pjax-loading");const s=$($.parseHTML(e,document,!0)),r=$("head");r.find("meta").remove(),r.append(s.filter("meta")),s.filter("link[data-pjax]").each(function(){let o=$(this).attr("href");l.has(o)||(r.append($(this)),console.log("加载css "+$(this).attr("href")),this.onload=function(){l.add(o),window.DProgress&&DProgress.inc(),console.log("加载css完成 "+$(this).attr("href"))})});let o=s.filter("script[data-pjax]");if(0<o.length){o.filter("[async]").each(function(){let o=$(this).attr("src");c.has(o)||(console.log("异步无序加载js "+o),Utils.cachedScript(o).done(function(){console.log("异步无序js完成 "+o),window.DProgress&&DProgress.inc(),c.add(o)}).fail(function(){console.log("异步无序js失败 "+o)}))}),new Promise(()=>{i(o.filter("[defer]"),0)});let e=o.filter(":not([async]):not([defer])");0<e.length&&await new Promise(o=>{i(e,0,o)})}console.log("全部处理完成"),window.pjaxSerialNumber===a&&(window.journalPjax&&window.journalPjax(a),window.postPjax&&window.postPjax(a),commonContext.initComment(),commonContext.initCarousel(),commonContext.loadMaintain(),window.DProgress)&&DProgress.done()}}),$(document).on("pjax:timeout",function(o,e,n){console.log("pjax:timeout sn = "+n.serialNumber)}),$(document).on("pjax:error",function(o,e,n,t,a){console.log(`pjax:error sn = ${a.serialNumber} error `+t)}),$(document).on("pjax:complete",function(o,e,n,t){console.log("pjax:complete sn = "+t.serialNumber)}),$(document).on("pjax:end",function(o,e,n){console.log("pjax:end sn = "+n.serialNumber),null==e&&(commonContext.initTocAndNotice(),commonContext.initCarousel(),window.DProgress&&DProgress.done(),$("html").removeClass("pjax-loading"))}),$(document).on("pjax:popstate",function(){console.log("pjax:popstate")})})();

templates/common/config.html

@@ -72,6 +72,7 @@
       [(${(theme.config.sidebar.enable_color_character && !#strings.isEmpty(theme.config.sidebar.color_character))? 'DreamConfig["spark_input_content"] = ["' + #strings.escapeJavaScript(theme.config.sidebar.color_character).replace('\\n', '","') + '"]' : ''})]
       DreamConfig["notice_show_mode"] = '[(${theme.config.basic_info.notice_show_mode})]';
       [(${(!#strings.isEmpty(theme.config.post.img_fold_height) && #numbers.sequence(theme.config.post.img_fold_height,theme.config.post.img_fold_height)[0] >= 400)?'DreamConfig["img_fold_height"] = ' + theme.config.post.img_fold_height + ';': ''})]
+      [(${(!#strings.isEmpty(theme.config.page_config.journals_fold_height) && #numbers.sequence(theme.config.page_config.journals_fold_height,theme.config.page_config.journals_fold_height)[0] >= 260)?'DreamConfig["journals_fold_height"] = ' + theme.config.page_config.journals_fold_height + ';': ''})]
       [(${theme.config.enhance.cursor_move != 'none'?'DreamConfig["cursor_move"] = "' + theme.config.enhance.cursor_move + '";': ''})]
       [(${theme.config.enhance.cursor_click != 'none'?'DreamConfig["cursor_click"] = "' + theme.config.enhance.cursor_click + '";': ''})]
       [(${theme.config.enhance.effects_sakura_mode != 'none'?'DreamConfig["effects_sakura_mode"] = "' + theme.config.enhance.effects_sakura_mode + '";': ''})]
@@ -80,6 +81,7 @@
       [(${theme.config.enhance.enable_baidu_push?'DreamConfig["enable_baidu_push"] = true;': ''})]
       [(${theme.config.enhance.enable_toutiao_push?'DreamConfig["enable_toutiao_push"] = true;': ''})]
       [(${theme.config.basic_style.load_progress != 'none'?'DreamConfig["load_progress"] = "' + theme.config.basic_style.load_progress + '";': ''})]
+      [(${!#strings.isEmpty(theme.config.page_config.journals_share_image)?'DreamConfig["journals_share_image"] = "' + theme.config.page_config.journals_share_image + '";': ''})]
       [(${!#strings.isEmpty(theme.config.sidebar.meting_api)?'var meting_api = "' + theme.config.sidebar.meting_api + '";': ''})]
 
     /** 配置主题模式 */

templates/common/scripts.html

@@ -10,6 +10,7 @@
         <script th:if="${isPost}" data-pjax th:src="@{/assets/lib/clipboard@2.0.10/clipboard.min.js}"></script>
         <script th:if="${enableShare}" data-pjax th:src="@{/assets/js/dshare.min.js(mew=${theme.spec.version})}"></script>
         <script th:if="${isPost}" data-pjax th:src="@{/assets/js/post.min.js(mew=${theme.spec.version})}"></script>
+        <script th:if="${isJournals}" data-pjax th:src="@{/assets/js/journals.min.js(mew=${theme.spec.version})}"></script>
     </th:block>
     <th:block th:if="${isPost || enableComment != null}">
         <script th:if="${pluginFinder.available('PluginCommentWidget') && (post != null || singlePage != null || enableComment != null)}" data-pjax src="/plugins/PluginCommentWidget/assets/static/comment-widget.iife.js"></script>

templates/main/article.html

@@ -91,6 +91,6 @@
 
     <div class="card card-content" id="comment-wrapper" th:if="${pluginFinder.available('PluginCommentWidget')}">
         <h3 class="comment-title">评论</h3>
-        <div id="comment"></div>
+        <div class="widget-comment" th:data-id="${post.metadata.name}" th:data-target="${type}"></div>
     </div>
 </th:block>

templates/moments.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<th:block
+  th:insert="~{common/layout :: layout (title = '瞬间 - ' + ${site.title}, canonical = @{/moments}, content = ~{::content}, isPost = true)}"
+  th:with="isJournals = true, enableShare = ${theme.config.post.enable_post_share}, enableComment = ${theme.config.page_config.enable_journals_comment}"
+  xmlns:th="https://www.thymeleaf.org">
+  <th:block th:fragment="content">
+    <div class="card card-content journal" th:each="moment : ${moments.items}">
+      <p class="journal-date">
+        <i class="fa fa-paper-plane-o"></i>
+        <em th:text="${#dates.format(moment.spec.releaseTime,'yyyy年MM月dd日 HH:mm:ss')}"></em>
+      </p>
+      <div class="journal-content fold">
+        <div class="main-content not-toc" data-target="Moment" th:data-id="${moment.metadata.name}">
+          [(${moment.spec.content.html})]
+          <mew-photos th:if="${!#lists.isEmpty(moment.spec.content.medium)}" th:each="momentItem : ${moment.spec.content.medium}">
+            <img th:if="${momentItem.type.name == 'PHOTO'}" th:src="${momentItem.url}" />
+          </mew-photos>
+          <th:block th:if="${!#lists.isEmpty(moment.spec.content.medium)}" th:each="momentItem : ${moment.spec.content.medium}">
+            <mew-video th:if="${momentItem.type.name == 'VIDEO'}" th:src="${momentItem.url}"></mew-video>
+          </th:block>
+        </div>
+      </div>
+      <div class="journal-operation">
+        <span class="journal-operation-item">
+          <a class="like" th:data-id="${moment.metadata.name}" th:data-likes="${moment.stats.upvote}">
+            <i class="fa fa-heart-o"></i>
+            <em th:text="${(moment.stats.upvote != 0)? moment.stats.upvote : '喜欢'}"></em>
+          </a>
+        </span>
+        <span class="journal-operation-item" th:if="${enableComment}">
+          <a class="comment">
+            <i class="fa fa-commenting-o"></i>
+            <em th:text="${(moment.stats.approvedComment != 0)? moment.stats.approvedComment : '评论'}"></em>
+          </a>
+        </span>
+        <span class="journal-operation-item" th:if="${enableShare}">
+          <a class="share"><i class="fa fa-share"></i><em>分享</em></a>
+        </span>
+      </div>
+      <div class="journal-comment" th:if="${enableComment && pluginFinder.available('PluginCommentWidget')}">
+        <div class="widget-comment" data-target="Moment" th:data-id="${moment.metadata.name}"></div>
+      </div>
+    </div>
+    <th:block th:replace="~{main/pagination :: pagination (${moments}, '/moments')}"/>
+  </th:block>
+</th:block>