Merge pull request #512 from chengzhongxue/main

解决 katex pjax问题，添加爱发电赞助，优化右侧公众号

settings.yaml

@@ -556,7 +556,7 @@ spec:
         - $formkit: group
           name: widgetss
           label: 侧边栏内容
-          help: 目前提供的小部件有：profile（站点资料）, wechat（微信）, welcome（小板报）, steam（Steam卡片）, music（音乐卡片）, friend-link（通讯录）, recent-posts（近期文章）, comments（最新评论）, categories（文章分类）, tags（文章标签）, stat（统计）, tags-stat（标签&归档&统计）, adbox（广告区域）。你可以随意组合或排序，以逗号隔开。
+          help: 目前提供的小部件有：profile（站点资料）, wechat（微信）, power（爱发电赞助）, welcome（小板报）, steam（Steam卡片）, music（音乐卡片）, friend-link（通讯录）, recent-posts（近期文章）, comments（最新评论）, categories（文章分类）, tags（文章标签）, stat（统计）, tags-stat（标签&归档&统计）, adbox（广告区域）。你可以随意组合或排序，以逗号隔开。
           value:
             indexWidgets: profile,wechat,comments,recent-posts,categories,tags-stat
             postWidgets: profile,wechat,toc,comments,recent-posts,categories,tags-stat
@@ -646,14 +646,54 @@ spec:
           value:
             wechatImgFace:
             wechatImgBack:
+            color: "#07C160"
+            wechatImg: "/themes/theme-hao/assets/images/gzh_cover.png"
+            url: "/wechat"
           children:
+            - $formkit: color
+              name: color
+              label: 背景颜色
+              value: "#07C160"
+            - $formkit: attachment
+              name: wechatImg
+              label: 背景图
+            - $formkit: url
+              name: url
+              label: 链接
             - $formkit: attachment
               name: wechatImgFace
-              placeholder: 公众号正面图
+              label: 公众号正面图
             - $formkit: attachment
               name: wechatImgBack
-              placeholder: 公众号背面图
+              label: 公众号背面图
               help: 图片可以从公众号后台下载物料或者自制
+        - $formkit: group
+          name: power
+          label: 爱发电赞助
+          value:
+            powerLink: /
+            list:
+          children:
+            - $formkit: url
+              name: powerLink
+              label: 赞助地址
+            - $formkit: repeater
+              name: list
+              label: 爱发电赞助列表
+              value: [ ]
+              children:
+                - $formkit: attachment
+                  name: avatar
+                  label: 头像
+                - $formkit: text
+                  name: name
+                  label: 名称
+                - $formkit: url
+                  name: link
+                  label: 链接
+                - $formkit: text
+                  name: descr
+                  label: 描述
         - $formkit: group
           name: welcome
           label: 小板报

templates/assets/js/heo.js

@@ -531,6 +531,27 @@ var heo = {
         input.setSelectionRange(-1, -1);
     },
 
+    //爱发电赞助
+    addPowerLinksInPostRightSide: async function() {
+        const image = document.getElementById("power-star-image")
+            , star = document.getElementById("power-star")
+            , title = document.getElementById("power-star-title")
+            , desc = document.getElementById("power-star-desc");
+        if (image && star && title && desc)
+            try {
+                const list = GLOBAL_CONFIG.source.power.list
+                    , i = heo.getRandomInt(0, list.length)
+                    , power = list[i].realNode;
+                image.style.backgroundImage = `url(${power.avatar})`,
+                    star.href = power.link,
+                    title.innerText = power.name,
+                    desc.innerText = power.descr
+            } catch (e) {}
+    },
+    getRandomInt: function(e, t) {
+        return Math.floor(Math.random() * (t - e)) + e
+    },
+
     //初始化console图标
     initConsoleState: function() {
         document.documentElement.classList.contains("hide-aside") ? document.querySelector("#consoleHideAside").classList.add("on") : document.querySelector("#consoleHideAside").classList.remove("on")
@@ -599,6 +620,10 @@ $(document).ready((function() {
     }
 )),
 document.addEventListener("pjax:complete", (function() {
-         initBlog()
+        initBlog();
+        // 解决 katex pjax问题
+        if((GLOBAL_CONFIG.htmlType == 'post' || GLOBAL_CONFIG.htmlType == 'page') && typeof window.renderKaTex != 'undefined'){
+            window.renderKaTex();
+        }
      }
 ));

templates/assets/zhheo/blogex.js

@@ -645,6 +645,7 @@ function initBlog() {
     //右下角 snackbar 弹窗
     GLOBAL_CONFIG.source.tool.switch && heo.hidecookie(),
     heo.stopImgRightDrag(),
+    heo.addPowerLinksInPostRightSide(),
     heo.onlyHome(),
     heo.addNavBackgroundInit(),
     heo.darkModeStatus(),

templates/assets/zhheo/zhheoblog.css

@@ -2021,15 +2021,6 @@ blockquote footer cite::before {
     padding-left: 0.5rem;
 }
 
-#aside-content .item-headline {
-    padding-bottom: 0.3rem;
-    font-size: 1.2em;
-}
-
-#aside-content .item-headline span {
-    margin-left: 0.5rem;
-}
-
 @media screen and (min-width: 900px) {
     #aside-content .sticky_layout {
         position: sticky;
@@ -7388,7 +7379,6 @@ span.fund_name {
 }
 
 /* 微信公众号翻转 */
-
 #flip-wrapper {
     position: relative;
     width: 235px;
@@ -7436,6 +7426,103 @@ span.fund_name {
     background-size: 100%;
 }
 
+/* 爱发电赞助 */
+#aside-content .card-widget.card-power {
+    padding: .4rem .6rem!important
+}
+
+#aside-content .card-widget.card-power .power-charge {
+    margin-left: auto;
+    color: var(--heo-secondtext);
+    font-size: 14px;
+    line-height: 1
+}
+
+#aside-content .card-widget.card-power .power-charge:hover {
+    color: var(--heo-lighttext)
+}
+
+.power-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 0 -4px
+}
+
+.power-list .power-item .power-item-link a {
+    padding: 2px 4px;
+    border-radius: 4px;
+    margin-left: 8px
+}
+
+.power-list .power-item .power-item-link a:hover {
+    background: var(--heo-lighttext);
+    color: var(--heo-card-bg)
+}
+
+#aside-content .power-item-body {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap
+}
+
+#power-star-image {
+    width: 60px;
+    height: 60px;
+    border-radius: 8px;
+    background-size: cover;
+    margin-right: 12px;
+    border: var(--style-border-always)
+}
+
+a#power-star {
+    display: flex;
+    padding: 8px;
+    border: var(--style-border-always);
+    border-radius: 8px;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    position: relative;
+    margin: 12px 0;
+    background: var(--heo-secondbg)
+}
+
+a#power-star:hover {
+    background: var(--heo-lighttext);
+    color: var(--heo-card-bg)
+}
+
+div#power-star-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 1;
+    margin-bottom: 8px
+}
+
+#power-star-desc {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    font-size: 12px;
+    max-width: 100%;
+    line-height: 1.2
+}
+
+.power-star-body {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    position: relative;
+    width: calc(100% - 68px);
+    justify-content: center
+}
+
 /* 商务广告-设计周刊 */
 #card-vip-designweekly.card-widget {
     display: flex !important;
@@ -10023,7 +10110,13 @@ div#author-info__sayhi:hover {
     padding-bottom: 0;
     margin-left: 8px;
     font-size: 1em;
-    font-weight: bold;
+    font-weight: 700;
+    display: flex;
+    align-items: center
+}
+
+#aside-content .item-headline span {
+    margin-left: 4px;
 }
 
 #aside-content .item-headline i {

templates/modules/layouts/layout.html

@@ -15,6 +15,8 @@
     <link th:if="${#strings.equals(theme.config.comments.use, 'Waline')
     && not #strings.isEmpty(theme.config.comments.walines.serverURL)}"
       rel="stylesheet" th:href="${not #strings.isEmpty(theme.config.comments.walines.walinesCss) ? theme.config.comments.walines.walinesCss : 'https://cdn.cbd.int/@waline/client@2.15.7/dist/waline.css' }">
+    <!--  解决 katex pjax问题 -->
+    <script th:if="${pluginFinder.available('plugin-katex')}" defer="" src="/plugins/plugin-katex/assets/static/katex.min.js"></script>
 </head>
 
 <body>

templates/modules/variables/site-config.html

@@ -55,6 +55,9 @@
                     enable_height_limit: [[${theme.config.code.enable_height_limit}]]
             },
             source: {
+                power:{
+                    list:[[${theme.config.sidebar.power.list}]]
+                },
                 links: {
                     linksUrl: [[${ theme.config.link.linksUrl }]],
                     linksNum: [[${theme.config.footer.footer_group.num}]],

templates/modules/widgets/aside/contain/stat-contain.html

@@ -4,7 +4,7 @@
 
 <th:block th:fragment="stat-contain" th:with="stats = ${siteStatsFinder.getStats()}">
 
-    <div class="item-headline"><i class="haofont icon-icon-sidebar-scxmtj"></i><span>统计</span></div>
+<!--    <div class="item-headline"><i class="haofont icon-icon-sidebar-scxmtj"></i><span>统计</span></div>-->
     <div class="webinfo">
         <div class="webinfo-item">
             <div class="webinfo-item-title"><i class="haofont hao-icon-file-lines"></i>

templates/modules/widgets/aside/power.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<!-- 爱发电赞助 -->
+<div th:fragment="power">
+
+    <div class="card-widget card-power">
+        <div class="item-headline"><i class="haofont hao-icon-aifadian-line"></i><span>爱发电赞助</span>
+            <a class="power-charge" th:href="${theme.config.sidebar.power.powerLink}" target="_blank" title="赞助博主">赞助
+            </a>
+        </div>
+        <th:block th:if="${not #lists.isEmpty(theme.config.sidebar.power.list)}" th:with="powerList = ${theme.config.sidebar.power.list}">
+            <a id="power-star"
+               th:href="${powerList[0].link}" rel="external nofollow" target="_blank" title="推荐博主">
+                <div id="power-star-image"
+                     th:style="'background-image: url('+${powerList[0].avatar}+')'">
+                </div>
+                <div class="power-star-body">
+                    <div id="power-star-title">[[${powerList[0].name}]]</div>
+                    <div id="power-star-desc">[[${powerList[0].descr}]]</div>
+                </div>
+            </a>
+            <div class="power-list">
+                <div class="power-item">
+                    <div class="power-item-body" >
+                        <div class="power-item-link"  th:each="power : ${powerList}">
+                            <a th:href="${power.link}" rel="external nofollow" target="_blank" th:title="${power.name}">[[${power.name}]]</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </th:block>
+
+    </div>
+</div>
+
+
+</html>

templates/modules/widgets/aside/wechat.html

@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <div class="card-widget heo-right-widget" id="card-wechat" th:fragment="wechat"
-th:with="faceImg = ${theme.config.sidebar.wechat.wechatImgFace}, backImg=${theme.config.sidebar.wechat.wechatImgBack}">
+th:with="faceImg = ${theme.config.sidebar.wechat.wechatImgFace}, backImg=${theme.config.sidebar.wechat.wechatImgBack}"
+     th:attr="onclick='javascript:window.open(\''+ ${theme.config.sidebar.wechat.url} +'\')'">
     <div id="flip-wrapper">
         <div id="flip-content">
             <div class="face"
@@ -10,5 +11,20 @@ th:with="faceImg = ${theme.config.sidebar.wechat.wechatImgFace}, backImg=${theme
                  th:style="'background: url('+ @{${#strings.isEmpty(backImg) ?  assets_link + '/images/wechat/wechat2.png' : backImg }} +') center center / 100% no-repeat;'"></div>
         </div>
     </div>
+
+    <style>
+        #aside-content .card-widget#card-wechat {
+            background: [(${theme.config.sidebar.wechat.color})];
+        }
+        #aside-content .card-widget#card-wechat::before {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            top: 0;
+            background: url([[${theme.config.sidebar.wechat.wechatImg}]]) center center no-repeat;
+            content: '';
+        }
+    </style>
 </div>
 </html>