Merge pull request #303 from chengzhongxue/main

解决内置代码块自动识别语言,添加首页第一屏,整理代码目录

settings.yaml

@@ -76,6 +76,35 @@ spec:
     - group: top
       label: 顶部
       formSchema:
+        - $formkit: group
+          name: above
+          label: 首页第一屏
+          value:
+            bannersBackground:
+            bannersTitleBig:
+          children:
+            - $formkit: radio
+              name: enable_above
+              key: enable_above
+              id: enable_above
+              value: false
+              options:
+                - label: 显示
+                  value: true
+                - label: 隐藏
+                  value: false
+            - $formkit: attachment
+              name: index_img
+              if: $get(enable_above).value
+              label: PC背景图
+              placeholder: 请填写背景图地址
+              value: https://rp.realxlfd.cloud/alist
+            - $formkit: attachment
+              name: phone_index_img
+              if: $get(enable_above).value
+              label: 移动端背景图
+              placeholder: 请填写移动端背景图地址
+              value: https://imgapi.kouseki.cn/random?sort=mp
         - $formkit: radio
           name: moment
           label: 瞬间说说
@@ -1733,7 +1762,7 @@ spec:
           key: enable
           label: 启用代码块
           help: 如果安装代码块插件，可关闭此功能
-          value: true
+          value: false
           options:
             - label: 启用
               value: true

templates/assets/css/fullPage.css

@@ -0,0 +1,135 @@
+
+:root {
+
+    --light-grey:rgba(255,255,255,0.7);
+    --white: rgba(255,255,255,0.9);
+}
+
+@media screen and (max-width: 768px) {
+    #page-header #nav {
+        background: 0%;
+        transition: 0s;
+    }
+
+}
+
+
+.back-home-button{
+    color: rgba(255,255,255,0.7);
+}
+#nav #site-name{
+    color: var(--light-grey);
+}
+#nav .site-page{
+    color: rgba(255,255,255,0.7);
+}
+
+#page-header.full_page {
+    height: 100vh;
+    background-attachment: fixed;
+    border-radius: 0;
+}
+#page-header.full_page #site-info {
+    position: absolute;
+    top: 43%;
+    padding: 0 10px;
+    width: 100%;
+}
+#page-header #scroll-down {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    cursor: pointer;
+    z-index: 1;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: box;
+    display: flex;
+    -webkit-box-align: center;
+    -moz-box-align: center;
+    -o-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -moz-box-pack: center;
+    -o-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+}
+#page-header #scroll-down .scroll-down-effects {
+    position: relative;
+    width: 100%;
+    color: var(--light-grey);
+    font-size: 30px;
+}
+
+/* 首页头图加载 */
+.pl-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    will-change: transform;
+    /* 添加性能优化 */
+    animation: blur-to-clear 2s cubic-bezier(.62, .21, .25, 1) 0s 1 normal backwards running, scale 1.5s cubic-bezier(.62, .21, .25, 1) 0s 1 both;
+}
+
+.pl-img {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    opacity: 0;
+    transition: opacity 1s;
+}
+
+@keyframes blur-to-clear {
+    0% {
+        filter: blur(50px);
+        opacity: 1;
+    }
+
+    100% {
+        filter: blur(0);
+        opacity: 1;
+    }
+}
+
+@keyframes scale {
+    0% {
+        transform: scale(1.5) translateZ(0);
+        opacity: 0;
+    }
+
+    to {
+        transform: scale(1) translateZ(0);
+        opacity: 1;
+    }
+}
+
+.pl-visible {
+    opacity: 1;
+}
+
+/* 为首页图片加上遮罩 */
+.video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: 0;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=);
+}
+
+.pl-blur {
+    /* 小图锯齿多，增加高斯模糊 */
+    filter: blur(50px);
+}

templates/assets/js/main.js

@@ -71,8 +71,10 @@ document.addEventListener('DOMContentLoaded', function () {
      */
     const scrollDownInIndex = () => {
         const $scrollDownEle = document.getElementById('scroll-down')
+        const $homeTop = document.getElementById('home_top')
         $scrollDownEle && $scrollDownEle.addEventListener('click', function () {
-            btf.scrollToDest(document.getElementById('content-inner').offsetTop, 300)
+            $homeTop &&  btf.scrollToDest($homeTop.offsetTop, 300)
+
         })
     }
 

templates/assets/zhheo/zhheoblog.css

@@ -2659,22 +2659,11 @@ blockquote footer cite::before {
     transition: all 0.5s ease 0s;
 }
 
-#page-header.full_page {
-    height: 20rem;
-    background-attachment: fixed;
-}
-
-#page-header.full_page #site-info {
-    position: absolute;
-    top: 7.8rem;
-    padding: 0px 0.5rem;
-    width: 100%;
-}
-
 #page-header #scroll-down .scroll-down-effects,
 #page-header #site-subtitle,
 #page-header #site-title {
     text-align: center;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.15);
     line-height: 1.5;
 }
 
@@ -2722,14 +2711,6 @@ blockquote footer cite::before {
     cursor: pointer;
 }
 
-#page-header #scroll-down {
-    position: absolute;
-    bottom: 0px;
-    width: 100%;
-    cursor: pointer;
-    display: none;
-}
-
 #page-header #scroll-down .scroll-down-effects {
     position: relative;
     width: 100%;
@@ -8126,60 +8107,6 @@ span.fund_name {
     background: var(--heo-red);
 }
 
-/* 加载页
----------------------------------------------------------------- */
-
-/* 已经写在loading.pug中了 */
-
-/* #loading-box .loading-bg{
-  display: flex;
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  background: var(--heo-card-bg);
-  z-index: 99999;
-  opacity: 1;
-  transition: 0.3s;
-  pointer-events: all;
-}
-
-#loading-box.loaded .loading-bg{
-  opacity: 0;
-  pointer-events: none;
-}
-
-#loading-box .loading-img{
-  width: 100px;
-  margin: auto;
-  animation-duration: 0.3s;
-  animation-name: loadingAction;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
-@keyframes loadingAction {
-  from {
-    opacity: 1;
-  }
-
-  to {
-   opacity: 0.4;
- }
-} */
-
-/* 主页
----------------------------------------------------------------- */
-
-/* 主页顶部封面 */
-#page-header.full_page {
-    height: 2rem;
-    background-image: none !important;
-    background-color: var(--heo-none);
-}
-
-#page-header.full_page #site-info {
-    display: none;
-}
 
 /* 主页导航栏让位偏移 */
 /* .layout_page .recent-posts{

templates/index.html

@@ -6,8 +6,11 @@
     <div class="page" id="body-wrap">
         <!-- 头部导航栏 -->
 
-        <header class="not-top-img" id="page-header">
+        <header th:class="${theme.config.top.above.enable_above ? 'full_page' : 'not-top-img'}" id="page-header">
             <nav th:replace="~{modules/nav :: nav(title = null)}"></nav>
+
+            <!-- 第一屏 -->
+            <th:block th:replace="~{modules/header/index-img :: index-img}"></th:block>
         </header>
         <div id="home_top">
             <!-- 每日说说 -->

templates/modules/comment.html

@@ -3,7 +3,7 @@
 <th:block th:fragment="comment(group, kind, name)">
     <th:block
             th:if="${theme.config.comments.twikooEnable && #strings.equals(theme.config.comments.use, 'Twikoo') && not #strings.isEmpty(theme.config.comments.twikoos.envId)}">
-        <div th:replace="~{modules/twikoo :: twikoo}"></div>
+        <div th:replace="~{modules/comment/twikoo :: twikoo}"></div>
     </th:block>
     <!-- 已知问题 PJAX 下，comment 首次请求会出错。当前的临时解决办法是使用 js 重试 -->
     <div id="post-comment"

templates/modules/common/51-la.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<!-- 51统计 -->
+<th:block th:fragment="51-la">
+    <script th:if="${ not #strings.isEmpty(theme.config.about.LingQueMonitorID)}">
+        !function (p) {
+            "use strict";
+            !function (t) {
+                var s = window
+                    , e = document
+                    , i = p
+                    , c = "".concat("https:" === e.location.protocol ? "https://" : "http://", "sdk.51.la/js-sdk-pro.min.js")
+                    , n = e.createElement("script")
+                    , r = e.getElementsByTagName("script")[0];
+                n.type = "text/javascript",
+                    n.setAttribute("charset", "UTF-8"),
+                    n.async = !0,
+                    n.src = c,
+                    n.id = "LA_COLLECT",
+                    i.d = n;
+                var o = function () {
+                    s.LA.ids.push(i)
+                };
+                s.LA ? s.LA.ids && o() : (s.LA = p,
+                    s.LA.ids = [],
+                    o()),
+                    r.parentNode.insertBefore(n, r)
+            }()
+        }({
+            id: "[[${theme.config.about.LingQueMonitorID}]]",
+            ck: "[[${theme.config.about.LingQueMonitorID}]]",
+            hashMode: true
+        });
+    </script>
+</th:block>
+
+
+
+</html>

templates/modules/common/code.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<th:block th:fragment="code">
+    <!-- 解决 pjax问题  自动识别语言-->
+    <th:block th:if="${pluginFinder.available('PluginPrismJS')}">
+        <script src="/plugins/PluginPrismJS/assets/static/highlight.js/highlight.min.js"></script>
+
+
+        <script>
+            document.addEventListener("pjax:complete", function () {
+                hljs.highlightAll()
+            })
+        </script>
+
+        <script data-pjax
+                src="/plugins/PluginPrismJS/assets/static/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
+
+    </th:block>
+
+    <!-- 自动识别语言 -->
+    <th:block th:if="${theme.config.code.enable}">
+        <script th:src="${assets_link+'/libs/prism/highlight.min.js'}"></script>
+
+
+        <script>
+            document.addEventListener("pjax:complete", function () {
+                hljs.highlightAll()
+            })
+            document.addEventListener("DOMContentLoaded", function () {
+                hljs.highlightAll()
+            })
+        </script>
+
+    </th:block>
+
+</th:block>
+
+</html>

templates/modules/common/common-script.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<!-- 公共js -->
+<script th:fragment="common-script">
+    if(GLOBAL_CONFIG.isFriendLinksInFooter){
+        var link = {
+            // 页脚友链
+            addFriendLinksInFooter: function () {
+
+                var linksUrl = '[[${theme.config.link.linksUrl}]]'
+                var fetchUrl = [[${theme.config.footer.footer_group.fetchUrl}]]
+                fetch(fetchUrl)
+                    .then(res => res.json())
+                    .then(json => {
+                        var randomFriendLinks = getArrayItems(json, 3);
+
+                        var htmlText = '';
+                        for (let i = 0; i < randomFriendLinks.length; ++i) {
+                            var item = randomFriendLinks[i]
+                            htmlText += `<a class='footer-item' href='${item.link}'  target="_blank" rel="noopener nofollow">${item.name}</a>`;
+                        }
+                        htmlText += `<a class='footer-item' href='${linksUrl}'>更多</a>`
+                        document.getElementById("friend-links-in-footer").innerHTML = htmlText;
+                    })
+            }
+        }
+    }
+</script>
+</html>

templates/modules/common/diytitle.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<!-- 动态标题 -->
+<script th:fragment="diytitle"
+        th:if="${theme.config.other.diytitle.diytitleEnable}">
+    let leaveTitle = '[[${theme.config.other.diytitle.leaveTitle}]]';
+    let backTitle = '[[${theme.config.other.diytitle.backTitle}]]';
+    let OriginTitile = document.title
+    let titleTime
+    document.addEventListener('visibilitychange', function () {
+        if (document.hidden) {
+            //离开当前页面时标签显示内容
+            document.title = leaveTitle
+            clearTimeout(titleTime)
+        } else {
+            //返回当前页面时标签显示内容
+            document.title = backTitle + OriginTitile
+            //两秒后变回正常标题
+            titleTime = setTimeout(function () {
+                document.title = OriginTitile
+            }, 2000)
+        }
+    })
+</script>
+</html>

templates/modules/common/footer-style-one.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+
+<th:block th:fragment="footer-style-one">
+
+    <script th:if="${theme.config.footer.footerContent.footerStyle == 'one'}" async="async">(function () {
+        var grt = new Date("[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[1]}]]/[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[2]}]]/[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[0]}]] 00:00:00"); //设置网站上线时间
+        var now = new Date();
+        var dnum;
+        var hnum;
+        var mnum;
+        var snum;
+        var nowHour;
+        var t;
+        var n;
+
+        // 计算并更新天数、小时数、分钟数和秒数
+        function updateTime() {
+            now = new Date(); // 更新 now 的值
+            nowHour = now.getHours(); // 更新 nowHour 的值
+            var days = (now - grt) / 1000 / 60 / 60 / 24;
+            dnum = Math.floor(days);
+            var hours = (now - grt) / 1000 / 60 / 60 - 24 * dnum;
+            hnum = Math.floor(hours);
+            if (String(hnum).length == 1) {
+                hnum = "0" + hnum;
+            }
+            var minutes = (now - grt) / 1000 / 60 - 24 * 60 * dnum - 60 * hnum;
+            mnum = Math.floor(minutes);
+            if (String(mnum).length == 1) {
+                mnum = "0" + mnum;
+            }
+            var seconds = (now - grt) / 1000 - 24 * 60 * 60 * dnum - 60 * 60 * hnum - 60 * mnum;
+            snum = Math.round(seconds);
+            if (String(snum).length == 1) {
+                snum = "0" + snum;
+            }
+            t = Math.trunc(234e8 + (now - grt) / 1e3 * 17)
+            n = (t / 1496e5).toFixed(6)
+        }
+
+        // 更新网页中显示的网站运行时间
+        function updateHtml() {
+            const footer = document.getElementById("footer");
+            if (!footer) return
+            let currentTimeHtml = "";
+            if (nowHour < 18 && nowHour >= 9) {
+                // 如果是上班时间，默认就是"困困鱼-上班摸鱼中.svg"图片，不需要更改
+                currentTimeHtml = `本站居然运行了 ${dnum} 天<span id='runtime'> ${hnum} 小时 ${mnum} 分 ${snum} 秒 </span><i class='haofont hao-icon-heartbeat' style='color:red'></i> <br> 旅行者 1 号当前距离地球 ${t} 千米，约为 ${n} 个天文单位 🚀`;
+            } else {
+                // 如果是下班时间，插入"困困鱼-下班啦.svg"图片
+                let img = document.querySelector("#workboard .workSituationImg");
+                img.src = "[[${theme.config.footer.footerContent.style_one.offduty_img}]]";
+                img.title = "[[${theme.config.footer.footerContent.style_one.offduty_description}]]";
+                img.alt = "[[${theme.config.footer.footerContent.style_one.offduty_description}]]";
+
+                currentTimeHtml = `本站居然运行了 ${dnum} 天<span id='runtime'> ${hnum} 小时 ${mnum} 分 ${snum} 秒 </span><i class='haofont hao-icon-heartbeat' style='color:red'></i> <br> 旅行者 1 号当前距离地球 ${t} 千米，约为 ${n} 个天文单位 🚀`;
+            }
+
+            if (document.getElementById("runtimeTextTip")) {
+                document.getElementById("runtimeTextTip").innerHTML = currentTimeHtml;
+            }
+        }
+
+        setInterval(() => {
+            updateTime();
+            updateHtml();
+        }, 1000);
+    })();</script>
+
+</th:block>
+
+</html>

templates/modules/common/toc-bot.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<!-- Tocbot 目录生成 start -->
+<th:block th:fragment="toc-bot">
+    <script th:src="${assets_link + '/libs/tocbot/4.18.2/tocbot.min.js'}"></script>
+    <link th:href="${assets_link + '/libs/tocbot/4.18.2/tocbot.css'}" rel="stylesheet">
+
+    <script>
+        document.addEventListener("DOMContentLoaded",  function() {
+
+            const postContent = document.querySelector('.post-content');
+
+            if (postContent == null) return;
+
+            const headers = postContent.querySelectorAll('h1,h2,h3,h4,h5,h6');
+            // 没有 toc 目录，则直接移除
+            if (headers.length === 0) {
+                document.getElementById("card-toc").remove();
+            } else {
+                tocbot.init({
+                    tocSelector: '.toc-content',
+                    contentSelector: '.post-content',
+                    headingSelector: 'h1,h2,h3,h4,h5,h6',
+                    hasInnerContainers: true
+                });
+
+            }
+        })
+        document.addEventListener('pjax:complete', function () {
+
+            const postContent = document.querySelector('.post-content');
+
+            if (postContent == null) return;
+
+            const headers = postContent.querySelectorAll('h1,h2,h3,h4,h5,h6');
+            // 没有 toc 目录，则直接移除
+            if (headers.length === 0) {
+                document.getElementById("card-toc").remove();
+            } else {
+                tocbot.init({
+                    tocSelector: '.toc-content',
+                    contentSelector: '.post-content',
+                    headingSelector: 'h1,h2,h3,h4,h5,h6',
+                    hasInnerContainers: true
+                });
+
+            }
+        })
+    </script>
+</th:block>
+
+
+
+</html>

templates/modules/head.html

@@ -42,74 +42,12 @@
     <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.2.0/css/all.min.css" media="all" onload="this.media='all'">
 
 
-   <!--  代码块-->
+    <!--  代码块-->
     <th:block th:replace="~{macro/prism-code :: prism-code}"/>
 
-    <script th:if="${theme.config.footer.footerContent.footerStyle == 'one'}" async="async">(function () {
-        var grt = new Date("[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[1]}]]/[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[2]}]]/[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[0]}]] 00:00:00"); //设置网站上线时间
-        var now = new Date();
-        var dnum;
-        var hnum;
-        var mnum;
-        var snum;
-        var nowHour;
-        var t;
-        var n;
-
-        // 计算并更新天数、小时数、分钟数和秒数
-        function updateTime() {
-            now = new Date(); // 更新 now 的值
-            nowHour = now.getHours(); // 更新 nowHour 的值
-            var days = (now - grt) / 1000 / 60 / 60 / 24;
-            dnum = Math.floor(days);
-            var hours = (now - grt) / 1000 / 60 / 60 - 24 * dnum;
-            hnum = Math.floor(hours);
-            if (String(hnum).length == 1) {
-                hnum = "0" + hnum;
-            }
-            var minutes = (now - grt) / 1000 / 60 - 24 * 60 * dnum - 60 * hnum;
-            mnum = Math.floor(minutes);
-            if (String(mnum).length == 1) {
-                mnum = "0" + mnum;
-            }
-            var seconds = (now - grt) / 1000 - 24 * 60 * 60 * dnum - 60 * 60 * hnum - 60 * mnum;
-            snum = Math.round(seconds);
-            if (String(snum).length == 1) {
-                snum = "0" + snum;
-            }
-            t = Math.trunc(234e8 + (now - grt) / 1e3 * 17)
-            n = (t / 1496e5).toFixed(6)
-        }
-
-        // 更新网页中显示的网站运行时间
-        function updateHtml() {
-            const footer = document.getElementById("footer");
-            if (!footer) return
-            let currentTimeHtml = "";
-            if (nowHour < 18 && nowHour >= 9) {
-                // 如果是上班时间，默认就是"困困鱼-上班摸鱼中.svg"图片，不需要更改
-                currentTimeHtml = `本站居然运行了 ${dnum} 天<span id='runtime'> ${hnum} 小时 ${mnum} 分 ${snum} 秒 </span><i class='haofont hao-icon-heartbeat' style='color:red'></i> <br> 旅行者 1 号当前距离地球 ${t} 千米，约为 ${n} 个天文单位 🚀`;
-            } else {
-                // 如果是下班时间，插入"困困鱼-下班啦.svg"图片
-                let img = document.querySelector("#workboard .workSituationImg");
-                img.src = "[[${theme.config.footer.footerContent.style_one.work_img}]]";
-                img.title = "[[${theme.config.footer.footerContent.style_one.work_description}]]";
-                img.alt = "[[${theme.config.footer.footerContent.style_one.work_description}]]";
-
-                currentTimeHtml = `本站居然运行了 ${dnum} 天<span id='runtime'> ${hnum} 小时 ${mnum} 分 ${snum} 秒 </span><i class='haofont hao-icon-heartbeat' style='color:red'></i> <br> 旅行者 1 号当前距离地球 ${t} 千米，约为 ${n} 个天文单位 🚀`;
-            }
-
-            if (document.getElementById("runtimeTextTip")) {
-                document.getElementById("runtimeTextTip").innerHTML = currentTimeHtml;
-            }
-        }
-
-        setInterval(() => {
-            updateTime();
-            updateHtml();
-        }, 1000);
-    })();</script>
 
+    <!-- 页脚内容-样式一 -->
+    <th:block th:replace="~{modules/common/footer-style-one :: footer-style-one}"/>
 
     <script>
         (win => {
@@ -207,7 +145,7 @@
 
     <!-- 动态加载条 -->
     <script data-pace-options='{ "restartOnRequestAfter":false,"eventLag":false}'
-            src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/pace/1.2.4/pace.min.js"
+            th:src="${assets_link + '/libs/pace/pace.min.js'}"
             th:if="${theme.config.other.loadingBoxs.loadProgressBar}">
     </script>
 
@@ -229,6 +167,10 @@
     <!-- icon图标 -->
     <link rel="stylesheet" th:href="'https://npm.elemecdn.com/hao-theme-static@'+${theme.spec.version}+'/icon/iconfont.css'">
 
+
+    <!-- 代码块自动识别语言 -->
+    <th:block th:replace="~{modules/common/code :: code}"/>
+
     <!-- 声明一些公共信息 -->
     <script id="site-config" th:inline="javascript">
         var GLOBAL_CONFIG = {

templates/modules/header/index-img.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<!-- 第一屏 -->
+<th:block th:fragment="index-img">
+    <th:block th:if="${theme.config.top.above.enable_above}">
+        <div class="pl-container">
+            <div class="pl-img pl-blur pl-visible"></div>
+            <div class="pl-img pl-visible"></div>
+            <video class="video"></video>
+        </div>
+
+        <div id="site-info">
+            <h1 id="site-title">[[${site.title}]]</h1>
+        </div>
+        <div id="scroll-down"><i class="haofont hao-icon-angle-down scroll-down-effects"></i></div>
+
+        <link rel="stylesheet" th:href="${assets_link + '/css/fullPage.css'}">
+
+        <style>
+            .pl-img {
+                background-image: url([[${theme.config.top.above.index_img}]]);
+
+            }
+
+            @media screen and (max-width: 768px) {
+                .pl-img {
+                    background-image: url([[${theme.config.top.above.phone_index_img}]]);
+                }
+            }
+        </style>
+
+    </th:block>
+</th:block>
+
+</html>

templates/modules/layouts/layout.html

@@ -27,7 +27,7 @@
 
 <!-- 左下角音乐 -->
 <th:block th:if="${theme.config.tool.nav_music.nav_musicEnable}" >
-    <div  th:replace="~{modules/nav-music :: nav-music}"></div>
+    <div  th:replace="~{modules/widgets/nav-music :: nav-music}"></div>
 </th:block>
 
 <!-- 内容 -->
@@ -80,7 +80,6 @@
 
     <script th:src="${assets_link + '/libs/view-image/view-image.min.js'}"></script>
 
-
     <!--左下角音乐-->
     <script>var meting_api = '[[${theme.config.tool.nav_music.meting_api}]]'; </script>
 
@@ -90,146 +89,25 @@
 
     <script th:src="${assets_link + '/libs/aplayer/Meting2.min.js'}"></script>
 
-
-
     <script th:src="${assets_link + '/libs/pjax/pjax.min.js'}"></script>
 
     <!-- swiper 在瞬间滚动时会使用 -->
     <script data-pjax  src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.js"></script>
 
     <!-- 评论弹幕 -->
-    <script th:replace="~{modules/commentBarrage :: commentBarrage}"></script>
+    <script th:replace="~{modules/comment/commentBarrage :: commentBarrage}"></script>
 
     <!-- Tocbot 目录生成 start -->
-    <script th:src="${assets_link + '/libs/tocbot/4.18.2/tocbot.min.js'}"></script>
+    <th:block th:replace="~{modules/common/toc-bot :: toc-bot}"></th:block>
-    <link th:href="${assets_link + '/libs/tocbot/4.18.2/tocbot.css'}" rel="stylesheet">
 
-    <script>
+    <!-- 51统计 -->
-        document.addEventListener("DOMContentLoaded",  function() {
+    <th:block th:replace="~{modules/common/51-la :: 51-la}"></th:block>
 
-            const postContent = document.querySelector('.post-content');
+    <!-- 动态标题 -->
+    <script th:replace="~{modules/common/diytitle :: diytitle}"></script>
 
-            if (postContent == null) return;
+    <!-- 公共js -->
-
+    <script th:replace="~{modules/common/common-script :: common-script}"></script>
-            const headers = postContent.querySelectorAll('h1,h2,h3,h4,h5,h6');
-            // 没有 toc 目录，则直接移除
-            if (headers.length === 0) {
-                document.getElementById("card-toc").remove();
-            } else {
-                tocbot.init({
-                    tocSelector: '.toc-content',
-                    contentSelector: '.post-content',
-                    headingSelector: 'h1,h2,h3,h4,h5,h6',
-                    hasInnerContainers: true
-                });
-
-            }
-        })
-        document.addEventListener('pjax:complete', function () {
-
-            const postContent = document.querySelector('.post-content');
-
-            if (postContent == null) return;
-
-            const headers = postContent.querySelectorAll('h1,h2,h3,h4,h5,h6');
-            // 没有 toc 目录，则直接移除
-            if (headers.length === 0) {
-                document.getElementById("card-toc").remove();
-            } else {
-                tocbot.init({
-                    tocSelector: '.toc-content',
-                    contentSelector: '.post-content',
-                    headingSelector: 'h1,h2,h3,h4,h5,h6',
-                    hasInnerContainers: true
-                });
-
-            }
-        })
-    </script>
-
-    <!-- Tocbot 目录生成 end -->
-
-
-
-    <script>
-        !function(p) {
-            "use strict";
-            !function(t) {
-                var s = window
-                    , e = document
-                    , i = p
-                    , c = "".concat("https:" === e.location.protocol ? "https://" : "http://", "sdk.51.la/js-sdk-pro.min.js")
-                    , n = e.createElement("script")
-                    , r = e.getElementsByTagName("script")[0];
-                n.type = "text/javascript",
-                    n.setAttribute("charset", "UTF-8"),
-                    n.async = !0,
-                    n.src = c,
-                    n.id = "LA_COLLECT",
-                    i.d = n;
-                var o = function() {
-                    s.LA.ids.push(i)
-                };
-                s.LA ? s.LA.ids && o() : (s.LA = p,
-                    s.LA.ids = [],
-                    o()),
-                    r.parentNode.insertBefore(n, r)
-            }()
-        }({
-            id: "[[${theme.config.about.LingQueMonitorID}]]",
-            ck: "[[${theme.config.about.LingQueMonitorID}]]",
-            hashMode: true
-        });
-    </script>
-
-
-    <script th:if="${theme.config.other.diytitle.diytitleEnable}">//动态标题
-    let leaveTitle = '[[${theme.config.other.diytitle.leaveTitle}]]';
-    let backTitle = '[[${theme.config.other.diytitle.backTitle}]]';
-    let OriginTitile = document.title
-    let titleTime
-    document.addEventListener('visibilitychange', function () {
-        if (document.hidden) {
-            //离开当前页面时标签显示内容
-            document.title = leaveTitle
-            clearTimeout(titleTime)
-        } else {
-            //返回当前页面时标签显示内容
-            document.title = backTitle + OriginTitile
-            //两秒后变回正常标题
-            titleTime = setTimeout(function () {
-                document.title = OriginTitile
-            }, 2000)
-        }
-    })
-    </script>
-
-
-    <script >
-        if(GLOBAL_CONFIG.isFriendLinksInFooter){
-            var link = {
-                // 页脚友链
-                addFriendLinksInFooter: function () {
-
-                    var linksUrl = '[[${theme.config.link.linksUrl}]]'
-                    var fetchUrl = [[${theme.config.footer.footer_group.fetchUrl}]]
-                    fetch(fetchUrl)
-                        .then(res => res.json())
-                        .then(json => {
-                            var randomFriendLinks = getArrayItems(json, 3);
-
-                            var htmlText = '';
-                            for (let i = 0; i < randomFriendLinks.length; ++i) {
-                                var item = randomFriendLinks[i]
-                                htmlText += `<a class='footer-item' href='${item.link}'  target="_blank" rel="noopener nofollow">${item.name}</a>`;
-                            }
-                            htmlText += `<a class='footer-item' href='${linksUrl}'>更多</a>`
-                            document.getElementById("friend-links-in-footer").innerHTML = htmlText;
-                        })
-                }
-            }
-        }
-    </script>
 
     <div id="js-pjax"></div>
 

templates/page.html

@@ -11,7 +11,9 @@
         </header>
         <main class="layout hide-aside" id="content-inner">
             <div id="page">
-                <div  id="article-container" th:utext="${singlePage.content.content}"></div>
+                <div  id="article-container"
+                      th:class="${ theme.config.code.enable_line || pluginFinder.available('PluginPrismJS') ? 'line-numbers' : ''}"
+                      th:utext="${singlePage.content.content}"></div>
                 <hr>
                 <!--/* 评论组件 */-->
                 <th:block

templates/post.html

@@ -119,7 +119,7 @@
                 </div>
 
                 <!-- 文章内容 -->
-                <article th:class="'post-content  '+${ theme.config.code.enable_line ? 'line-numbers' : ''}" id="article-container" th:utext="${post.content.content}">
+                <article th:class="'post-content  '+${ theme.config.code.enable_line || pluginFinder.available('PluginPrismJS') ? 'line-numbers' : ''}" id="article-container" th:utext="${post.content.content}">
                 </article>