Merge pull request #512 from chengzhongxue/main

解决 katex pjax问题，添加爱发电赞助，优化右侧公众号
2023-10-09 00:30:43 +08:00 · 2023-10-09 00:30:43 +08:00 · 0db71a0b4d
parent d4a55dc4a7 e013b959d7
commit 0db71a0b4d
10 changed files with 234 additions and 17 deletions
--- a/settings.yaml
+++ b/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: 小板报
--- a/templates/assets/images/gzh_cover.png
+++ b/templates/assets/images/gzh_cover.png
--- a/templates/assets/js/heo.js
+++ b/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();
+        }
     }
 ));
--- a/templates/assets/zhheo/blogex.js
+++ b/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(),
--- a/templates/assets/zhheo/zhheoblog.css
+++ b/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 {
--- a/templates/modules/layouts/layout.html
+++ b/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>
--- a/templates/modules/variables/site-config.html
+++ b/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}]],
--- a/templates/modules/widgets/aside/contain/stat-contain.html
+++ b/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>
--- a/templates/modules/widgets/aside/power.html
+++ b/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>
--- a/templates/modules/widgets/aside/wechat.html
+++ b/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>