update:重构侧边栏设置

settings.yaml

@@ -652,12 +652,6 @@ spec:
                   label: 图片地址
                   value: ""
                   validation: "required"
-
-
-
-
-
-
         - $formkit: radio
           name: banner_direction
           id: banner_direction
@@ -1531,14 +1525,16 @@ spec:
               name: template_aside
               id: template_aside
               label: "侧边栏模块"
-              value: "enable_lifetime"
+              value: "none"
               options:
+                - value: "none"
+                  label: 无
                 - value: "enable_blogger"
                   label: 博主信息
                 - value: "enable_notice"
                   label: 网站公告
-                - value: "enable_qrcode"
-                  label: 二维码
+                - value: "enable_picture"
+                  label: 图片
                 - value: "enable_music_player"
                   label: 音乐播放器
                 - value: "enable_newest_post"
@@ -1551,63 +1547,128 @@ spec:
                   label: 标签云
                 - value: "enable_ads_aside"
                   label: 侧边栏广告
-        - $formkit: code
-#          if: "$get(template_aside).value === 'enable_notice'"
-          name: site_notice
-          label: 网站公告
-          value: "这是你的公告"
-          help: "网站公告信息，将展示在页面右侧，尽量简洁明了，不填不展示该模块（需要先在 “侧边栏” 中开启公告模块）,支持html代码"
-          language: html
-        - $formkit: attachment
-#          if: "$get(template_aside).value === 'enable_qrcode'"
-          name: qrcode_url
-          label: 二维码图片
-          value: ""
-        - $formkit: text
-#          if: "$get(enable_qrcode).value === true"
-          name: qrcode_title
-          label: 二维码标题
-          value: "我的二维码"
-        - $formkit: textarea
-#          if: "$get(template_aside).value === 'enable_qrcode'"
-          name: qrcode_description
-          label: 二维码描述
-          value: ""
-        - $formkit: text
-#          if: "$get(template_aside).value === 'enable_music_player'"
-          name: music_id
-          label: 歌单ID
-          help: "为音乐播放器配置歌单ID，大家在网页歌单页直接复制地址栏id参数后面那串数字即可，不填或填错将不会展示播放器（注意：仅支持网易云歌单ID，且不支持私密歌单）"
-          value: ""
-        - $formkit: number
-#          if: "$get(template_aside).value === 'show_newreply'"
-          name: show_newreply_num
-          label: 展示最新评论
-          value: 3
-          help: "在侧边栏展示最新评论的数量"
-        - $formkit: select
-#          if: "$get(template_aside).value === 'enable_tag_cloud'"
-          name: tag_cloud_type
-          id: tag_cloud_type
-          label: 标签云类型
-          value: "3d"
-          help: "设置标签云的展示形式，默认为 “3D标签云”，标签太多或卡顿时建议限制展示的标签数量使用列表形式"
-          options:
-            - value: 3d
-              label: 3D标签云
-            - value: list
-              label: 标签列表
-        - $formkit: select
-#          if: "$get(template_aside).value === 'enable_tag_cloud'"
-          name: tag_cloud_width
-          id: tag_cloud_width
-          label: 标签宽度
-          value: "static"
-          options:
-            - value: static
-              label: 固定宽度
-            - value: responsive
-              label: 自适应宽度
+            - $formkit: group
+              if: $value.template_aside === 'enable_notice'
+              name: aside_notice
+              label: 网站公告
+              value: [ ]
+              children:
+                - $formkit: text
+                  name: notice_title
+                  label: 公告标题
+                  value: "网站公告"
+                  help: "公告标题，留空则不显示"
+                - $formkit: code
+                  name: site_notice
+                  label: 网站公告内容
+                  value: "这是你的公告"
+                  help: "支持html代码"
+                  language: html
+            - $formkit: group
+              if: $value.template_aside === 'enable_picture'
+              name: aside_picture
+              label: 图片
+              value: [ ]
+              children:
+                - $formkit: attachment
+                  name: qrcode_url
+                  label: 图片链接
+                  value: ""
+                - $formkit: text
+                  name: qrcode_title
+                  label: 图片标题
+                  value: "我的二维码"
+                - $formkit: textarea
+                  name: qrcode_description
+                  label: 图片描述
+                  value: ""
+            - $formkit: group
+              if: $value.template_aside === 'enable_music_player'
+              name: aside_music_player
+              label: 音乐播放器
+              value: [ ]
+              children:
+                - $formkit: text
+                  name: music_id
+                  label: 歌单ID
+                  help: "为音乐播放器配置歌单ID，大家在网页歌单页直接复制地址栏id参数后面那串数字即可，不填或填错将不会展示播放器（注意：仅支持网易云歌单ID，且不支持私密歌单）"
+                  value: ""
+            - $formkit: group
+              if: $value.template_aside === 'show_newreply'
+              name: aside_newreply
+              label: 最新评论
+              value: [ ]
+              children:
+                - $formkit: number
+                  name: show_newreply_num
+                  label: 展示最新评论
+                  value: 3
+                  help: "在侧边栏展示最新评论的数量"
+            - $formkit: group
+              if: $value.template_aside === 'enable_tag_cloud'
+              name: aside_tag_cloud
+              label: 标签云
+              value: [ ]
+              children:
+                - $formkit: select
+                  name: tag_cloud_type
+                  id: tag_cloud_type
+                  label: 标签云类型
+                  value: "3d"
+                  help: "设置标签云的展示形式，默认为 “3D标签云”，标签太多或卡顿时建议限制展示的标签数量使用列表形式"
+                  options:
+                    - value: 3d
+                      label: 3D标签云
+                    - value: list
+                      label: 标签列表
+                - $formkit: select
+                  name: tag_cloud_width
+                  id: tag_cloud_width
+                  label: 标签宽度
+                  value: "static"
+                  options:
+                    - value: static
+                      label: 固定宽度
+                    - value: responsive
+                      label: 自适应宽度
+            - $formkit: group
+              if: $value.template_aside === 'enable_ads_aside'
+              name: aside_ads
+              label: 侧边栏广告
+              value: [ ]
+              children:
+                - $formkit: radio
+                  name: aside_ads_type
+                  id: aside_ads_type
+                  label: 广告数据
+                  value: ""
+                  help: "广告类型，支持图片和自定义代码"
+                  options:
+                    - value: img
+                      label: 图片
+                    - value: code
+                      label: 自定义代码
+                - $formkit: attachment
+                  if: $value.aside_ads_type === 'img'
+                  name: aside_ads_img
+                  label: 侧边栏广告图片
+                  value: ""
+                  help: "侧边栏广告图片链接"
+                - $formkit: text
+                  if: $value.aside_ads_type === 'img'
+                  name: aside_ads_url
+                  label: 广告链接
+                  value: ""
+                  help: "广告跳转链接"
+                - $formkit: code
+                  if: $value.aside_ads_type === 'code'
+                  name: aside_ads_code
+                  label: 自定义代码
+                  value: ""
+                  help: "支持html代码"
+                  language: html
+
+
 #
     - group: post
       label: 文章页
@@ -2280,26 +2341,7 @@ spec:
     - group: ads
       label: 广告
       formSchema:
-        - $formkit: radio
-          name: enable_aside_ads
-          label: 是否启用侧边栏广告
-          value: false
-          help: "启用后需要再到侧边栏添加组件"
-          options:
-            - value: true
-              label: 是
-            - value: false
-              label: 否
-        - $formkit: attachment
-          name: aside_ads_img
-          label: 侧边栏广告图片
-          value: ""
-          help: "侧边栏广告图片链接"
-        - $formkit: text
-          name: aside_ads_url
-          label: 广告链接
-          value: ""
-          help: "广告跳转链接"
+
         - $formkit: radio
           name: enable_post_ads_top
           label: 是否启用文章顶部广告

templates/assets/js/common.js

@@ -172,7 +172,8 @@ const commonContext = {
 				}
 				// 代码复制
 				if (ThemeConfig.enable_code_copy) {
-					const text = $item.find("code[class*='language-']").text();
+					const text = $item.find("code[class='language-none'], code[class*='language-']").text();
+					console.log('text:'+text);
 					const span = $(
 						"<span class=\"copy-button\"><i class=\"joe-font joe-icon-copy\" title=\"复制代码\"></i></span>"
 					);
@@ -527,6 +528,7 @@ const commonContext = {
 	},
 	/* 初始化3D标签云 */
 	init3dTag() {
+		ThemeConfig.tag_cloud_type = document.getElementById('tags-3d') ? '3d' : 'list'
 		ThemeConfig.enable_tag_cloud=document.querySelector('.joe_aside__item.tags-cloud') !== null
 		// console.log(ThemeConfig.enable_tag_cloud)
 		if (

templates/modules/ads/ads_aside.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="https://www.thymeleaf.org">
-<th:block th:fragment="ads_aside(ads_url, ads_img)">
+<th:block th:fragment="ads_aside_img(ads_url, ads_img)">
   <section class="joe_aside__item advert">
     <a class="joe_advert" target="_blank" rel="noopener noreferrer nofollow" th:href="${ads_url}" title="广告">
       <img class="omit lazyload" width="100%" th:data-src="${ads_img}" th:src="${theme.config.home.lazyload_thumbnail}" alt="广告"/>
@@ -8,4 +8,9 @@
     </a>
   </section>
 </th:block>
+<th:block th:fragment="ads_aside_code(ads_code)">
+  <section class="joe_aside__item advert" th:utext="${ads_code}">
+
+  </section>
+</th:block>
 </html>

templates/modules/common/aside.html

@@ -4,7 +4,45 @@
   <aside class="joe_aside"
   th:classappend="${theme.config.aside.aside_position == 'left' ? 'pos_left':''}">
   <th:block th:each="aside : ${theme.config.aside.enable_outpost_aside}">
-    <th:block th:replace="~{modules/widgets/asideWidget :: ${aside.template_aside}}" />
+    <th:block th:switch="${aside.template_aside}">
+      <th:block th:case="'enable_blogger'">
+<!--        博主信息-->
+        <th:block th:include="~{modules/widgets/asideWidget :: enable_blogger}" />
+      </th:block>
+      <th:block th:case="'enable_notice'">
+<!--        公告-->
+        <th:block th:include="~{modules/widgets/asideWidget :: enable_notice(notice_data = ${aside.aside_notice})}" />
+      </th:block>
+      <th:block th:case="'enable_picture'">
+<!--        图片-->
+        <th:block th:include="~{modules/widgets/asideWidget :: enable_picture(pic_data = ${aside.aside_picture})}" />
+      </th:block>
+      <th:block th:case="'enable_music_player'">
+<!--        音乐播放器-->
+        <th:block th:include="~{modules/widgets/asideWidget :: enable_music_player(music_data = ${aside.aside_music_player})}" />
+      </th:block>
+      <th:block th:case="'enable_newest_post'">
+<!--        最新文章-->
+        <th:block th:include="~{modules/widgets/asideWidget :: enable_newest_post}" />
+      </th:block>
+      <th:block th:case="'enable_lifetime'">
+<!--        人生倒计时-->
+          <th:block th:include="~{modules/widgets/asideWidget :: enable_lifetime}" />
+      </th:block>
+      <th:block th:case="'show_newreply'">
+<!--        最新评论-->
+        <th:block th:include="~{modules/widgets/asideWidget :: show_newreply(new_reply_data = ${aside.aside_newreply})}" />
+      </th:block>
+      <th:block th:case="'enable_tag_cloud'">
+<!--        标签云-->
+          <th:block th:include="~{modules/widgets/asideWidget :: enable_tag_cloud(tag_cloud_data = ${aside.aside_tag_cloud})}" />
+      </th:block>
+      <th:block th:case="'enable_ads_aside'">
+        <!--        侧边栏广告-->
+          <th:block th:include="~{modules/widgets/asideWidget :: enable_ads_aside(ads_data = ${aside.aside_ads})}" />
+      </th:block>
+
+    </th:block>
 
   </th:block>
 

templates/modules/themeSettingVariable.html

@@ -15,7 +15,7 @@
        weather_key : /*[[${theme.config.blogger.weather_key}]]*/ '',
        link_behavior : /*[[${theme.config.theme.link_behavior}]]*/ 'default',
        enable_tag_cloud : true,
-       tag_cloud_type : /*[[${theme.config.aside.tag_cloud_type}]]*/ '3d',
+       tag_cloud_type : document.getElementById('tags-3d') ? '3d' : 'list',
        enable_fixed_header : /*[[${theme.config.navbar.enable_fixed_header}]]*/ true,
        enable_clean_mode : /*[[${theme.config.other.enable_clean_mode}]]*/ false,
        cursor_effect : /*[[${theme.config.theme.cursor_effect}]]*/ 'off',

templates/modules/widgets/asideWidget.html

@@ -3,40 +3,40 @@
 <th:block th:fragment="enable_blogger">
     <th:block th:replace="~{modules/common/blogger :: blogger}" />
 </th:block>
-<th:block th:fragment="enable_notice">
+<th:block th:fragment="enable_notice(notice_data)">
     <section class="joe_aside__item notice">
         <div class="joe_aside__item-title">
             <!--      <#&#45;&#45;  <i class="joe-font joe-icon-speaker"></i>  &ndash;&gt;-->
             <th:block th:replace="~{modules/macro/speaker :: speaker}" />
-            <span class="text">公告信息</span>
+            <span class="text">[[${notice_data.notice_title}]]</span>
         </div>
         <div class="joe_aside__item-contain">
-            <div class="notice_content" th:utext="${theme.config.aside.site_notice}"></div>
+            <div class="notice_content" th:utext="${notice_data.site_notice}"></div>
         </div>
     </section>
 </th:block>
-<th:block th:fragment="enable_qrcode">
+<th:block th:fragment="enable_picture(pic_data)">
     <section class="joe_aside__item qrcode">
         <div class="joe_aside__item-title">
             <i class="joe-font joe-icon-qrcode"></i>
-            <span class="text">[[${theme.config.aside.qrcode_title}]]</span>
+            <span class="text">[[${pic_data.qrcode_title}]]</span>
         </div>
         <div class="joe_aside__item-contain">
-            <img class="qrcode_img lazyload" th:src="${theme.config.aside.qrcode_url}" th:data-src="${theme.config.aside.qrcode_url}" alt="二维码"/>
-            <th:block th:if="${theme.config.aside.qrcode_description != ''}">
-                <p class="qrcode_description">[[${theme.config.aside.qrcode_description}]]</p>
+            <img class="qrcode_img lazyload" th:src="${pic_data.qrcode_url}" th:data-src="${pic_data.qrcode_url}" th:alt="${pic_data.qrcode_title}"/>
+            <th:block th:if="${pic_data.qrcode_description != ''}">
+                <p class="qrcode_description">[[${pic_data.qrcode_description}]]</p>
             </th:block>
         </div>
     </section>
 </th:block>
-<th:block th:fragment="enable_music_player">
-<th:block th:if="${theme.config.aside.music_id != ''}">
+<th:block th:fragment="enable_music_player(music_data)">
+<th:block th:if="${music_data.music_id != ''}">
     <section class="joe_aside__item timelife">
         <div class="joe_aside__item-title">
             <i class="joe-font joe-icon-yinfu"></i>
             <span class="text">我的歌单</span>
         </div>
-        <div id="aplayer" class="aplayer" th:data-id="${theme.config.aside.music_id}" list-max-height="20px" data-server="netease" data-type="playlist" data-fixed="false" data-listfolded="true" data-order="random"  data-mode="#f3f3f7"></div>
+        <div id="aplayer" class="aplayer" th:data-id="${music_data.music_id}" list-max-height="20px" data-server="netease" data-type="playlist" data-fixed="false" data-listfolded="true" data-order="random"  data-mode="#f3f3f7"></div>
     </section>
 </th:block>
 </th:block>
@@ -52,7 +52,7 @@
         <div class="joe_aside__item-contain"></div>
     </section>
 </th:block>
-<th:block th:fragment="show_newreply">
+<th:block th:fragment="show_newreply(new_reply_data)">
 <th:block th:if="${theme.config.other.enable_clean_mode !=true}">
     <section class="joe_aside__item newreply">
         <div class="joe_aside__item-title">
@@ -63,7 +63,7 @@
         <ul class="joe_aside__item-contain"
             th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}">
             <th:block th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}"
-                    th:each="result : ${commentFinder.list(null,1,theme.config.aside.show_newreply_num)}">
+                    th:each="result : ${commentFinder.list(null,1,new_reply_data.show_newreply_num)}">
                 <li class="item">
                     <div class="user">
                         <img width="35" height="35" class="avatar lazyload" th:data-src="${result.owner.avatar ?: '/themes/theme-Joe3/assets/img/peeps-avatar.png'} " th:src="${theme.config.blogger.lazyload_avatar}"  alt="头像">
@@ -123,9 +123,9 @@
 
                 RecentComments({
                     serverURL: /*[[${theme.config.basic.waline_serverURL}]]*/'',
-                    count: /*[[${theme.config.aside.show_newreply_num}]]*/5,
+                    count: /*[[${new_reply_data.show_newreply_num}]]*/5,
                 }).then(({ comments }) => {
-                    document.getElementById('waline-recent').innerHTML = comments.data.map(
+                    document.getElementById('waline-recent').innerHTML = comments.map(
                         (comment) =>{
                             const commentContent = document.createElement('div');
                             let commentText =''
@@ -171,7 +171,7 @@
     </section>
 </th:block>
 </th:block>
-<th:block th:fragment="enable_tag_cloud">
+<th:block th:fragment="enable_tag_cloud(tag_cloud_data)">
     <section class="joe_aside__item tags-cloud" id="tags-cloud">
         <div class="joe_aside__item-title">
             <i class="joe-font joe-icon-tag"></i>
@@ -182,7 +182,7 @@
         </div>
         <div class="joe_aside__item-contain">
 
-            <div th:class="'tags-cloud-list '+${theme.config.aside.tag_cloud_width =='responsive' ? 'responsive':'static'}" th:style="${theme.config.aside.tag_cloud_type == '3d' ? 'display:none':''}">
+            <div th:class="'tags-cloud-list '+${tag_cloud_data.tag_cloud_width =='responsive' ? 'responsive':'static'}" th:style="${tag_cloud_data.tag_cloud_type == '3d' ? 'display:none':''}">
                 <th:block th:with="tags = ${tagFinder.listAll()}">
 
                     <a th:each="tag : ${tags}"
@@ -190,7 +190,7 @@
                 </th:block>
 
             </div>
-            <th:block th:if="${theme.config.aside.tag_cloud_type == '3d'}">
+            <th:block th:if="${tag_cloud_data.tag_cloud_type == '3d'}">
                 <div id="tags-3d">
                     <div class="empty">加载中…</div>
                 </div>
@@ -202,9 +202,18 @@
         <!--</@tagTag>-->
     </section>
 </th:block>
-<th:block th:fragment="enable_ads_aside">
-    <th:block th:if="${theme.config.ads.enable_aside_ads} and ${#strings.trim(theme.config.ads.aside_ads_img) !=''}">
-        <th:block th:replace="~{modules/ads/ads_aside :: ads_aside(ads_url=${theme.config.ads.aside_ads_url}, ads_img=${theme.config.ads.aside_ads_img})}" />
+<th:block th:fragment="enable_ads_aside(ads_data)">
+    <th:block th:switch="${ads_data.aside_ads_type}">
+        <th:block th:case="'img'">
+            <th:block th:if="${#strings.trim(ads_data.aside_ads_img) !=''}">
+                <th:block th:replace="~{modules/ads/ads_aside :: ads_aside_img(ads_url=${ads_data.aside_ads_url}, ads_img=${ads_data.aside_ads_img})}" />
+            </th:block>
+        </th:block>
+        <th:block th:case="'code'">
+                <th:block th:replace="~{modules/ads/ads_aside :: ads_aside_code(ads_code = ${ads_data.aside_ads_code})}" />
+        </th:block>
+
     </th:block>
+
 </th:block>
 </html>