💄 更新主题至 4.3.0-b4

降级speak至4.2.0
分类和归档切换回时间轴布局

Author: CCKNBC

_config.butterfly.yml

@@ -603,7 +603,7 @@ index_top_img_height:
 # The user interface setting of category and tag page (category和tag頁的UI設置)
 # index - same as Homepage UI (index 值代表 UI將與首頁的UI一樣)
 # default - same as archives UI 默認跟archives頁面UI一樣
-category_ui: index # 留空或 index
+category_ui:  # 留空或 index
 tag_ui: index # 留空或 index
 
 # Website Background (設置網站背景)
@@ -746,7 +746,10 @@ aside:
   button: true
   mobile: true # display on mobile
   position: right # left or right
-  archives: false
+  display:
+    archive: false
+    tag: false
+    category: false
   card_author:
     enable: true
     description: ''
@@ -854,8 +857,8 @@ darkmode:
 # Don't repeat 不要重複
 rightside_item_order:
   enable: true
-  hide: hideAside,chat
-  show: toc,translate,readmode,darkmode,comment
+  hide: hideAside,readmode,translate,darkmode,chat
+  show: toc,comment
 
 # Lightbox (圖片大圖查看模式)
 # --------------------------------------

source/blogroll/index.md

@@ -20,7 +20,7 @@ xkFriend.init({
     'https://blogroll.ccknbc.vercel.app/blogroll.json'
   ], // 你的json链接列表，可以是多个。
   loading_img: 'https://cdn.jsdelivr.net/gh/ccknbc-backup/photos/blog/2021-03-08~15-13-15.gif', // 加载中的图片
-  fail_img: 'https://cdn.jsdelivr.net/gh/ccknbc-backup/photos/blog/2021-03-08~15-13-15.gif' // // 加载失败的图片
+  fail_img: 'https://cdn.jsdelivr.net/gh/ccknbc-backup/photos/blog/2021-03-08~15-13-15.gif' // 加载失败的图片
 })
 </script>
 

source/essay/index.md

@@ -8,41 +8,6 @@ translate_title: essay
 aside: false
 description: CC的部落格 即刻短文页面
 ---
-
-<!-- <div id="daodao"></div>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ccknbc-backup/cdn@latest/css/daodao.min.css">
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/ccknbc-backup/cdn@latest/js/daodao.min.js" ></script> -->
-
-<!-- <div id="bber"></div>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ccknbc-backup/cdn@latest/css/newbber.min.css">
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/ccknbc-backup/cdn@latest/js/newbber.min.js" ></script> -->
-
-<!-- <div id='speak'></speak> -->
-<!-- 使用markdown渲染 -->
-<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ispeak-bber/ispeak-bber-md.min.js" charset="utf-8" ></script> -->
-<!-- 不使用markdown渲染 -->
-<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ispeak-bber/ispeak-bber.min.js" charset="utf-8" ></script> -->
-<!-- 解析微信表情（参考：https://github.com/buddys/qq-wechat-emotion-parser） -->
-<!-- <script src="https://cdn.jsdelivr.net/gh/buddys/qq-wechat-emotion-parser@master/dist/qq-wechat-emotion-parser.min.js"></script>
-<script>
-ispeakBber
-    .init({
-      el: '#speak', // 容器选择器
-      name: 'CC 😊', // 显示的昵称
-      envId: 'ccknbc-154167', // 环境id
-      region: 'ap-shanghai', // 腾讯云地址，默认为上海
-      limit: 10, // 每次加载的条数，默认为5
-      avatar: 'https://cdn.jsdelivr.net/gh/ccknbc-backup/cdn@latest/logo/logo.png',
-      fromColor:'rgb(245, 150, 170)', // 下方标签背景颜色 默认 rgb(245, 150, 170)
-      loadingImg: 'https://cdn.jsdelivr.net/gh/ccknbc-backup/photos/blog/2021-03-08~15-13-15.gif', // 自定义loading的图片，示例值为默认值
-      dbName:'talks' // 数据的名称，默认talks，避免有人的命名不是这个，所以加入此配置字段。
-    })
-    .then(function() {
-      // 哔哔加载完成后的回调函数，你可以写你自己的功能
-      console.log('哔哔 加载完成')
-    })
-</script> -->
-
 <div id="tip" style="text-align:center;">ipseak加载中</div>
 <div id="ispeak"></div>
 <link
@@ -51,7 +16,7 @@ ispeakBber
 />
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/ispeak/style.css"
+  href="https://cdn.jsdelivr.net/npm/ispeak@4.2.0/style.css"
 />
 
 <style>
@@ -65,7 +30,7 @@ ispeakBber
 <script src="https://cdn.staticfile.org/highlight.js/10.6.0/highlight.min.js"></script>
 <script src="https://cdn.staticfile.org/marked/2.0.0/marked.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/discuss/dist/Discuss.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/ispeak/ispeak.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/ispeak@4.2.0/ispeak.umd.js"></script>
 <script>
   var head = document.getElementsByTagName('head')[0]
   var meta = document.createElement('meta')
@@ -80,6 +45,8 @@ ispeakBber
         author: '621cd42048c49d6f96787626',
         pageSize: 10,
         loading_img: 'https://cdn.jsdelivr.net/gh/ccknbc-backup/photos/blog/2021-03-08~15-13-15.gif',
+        speakPage: '/essay', // 例如 ‘/speak’
+        githubClientId: 'Iv1.f333c02f5f6676e8', // 通过创建GitHub app获取
         initCommentName: 'Discuss',
         initCommentOptions: {
           serverURLs: 'https://discuss.ccknbc.vercel.app/'
@@ -93,67 +60,3 @@ ispeakBber
     document.getElementById('tip').innerHTML = 'ipseak依赖加载失败！'
   }
 </script>
-
-
-<!-- ## 哔哔 CloudBase 版本(林木木) -->
-
-<!-- <div id="bber"></div>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ccknbc-backup/cdn@latest/css/bber.min.css">
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js" ></script>
-<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js" ></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/TencentCloudBase/tcb-js-sdk@master/tcbjs/1.10.10/tcb.min.js" >
-</script><script src="https://cdn.jsdelivr.net/gh/buddys/qq-wechat-emotion-parser@master/dist/qq-wechat-emotion-parser.min.js" 
-></script>
-<script>
-const app = tcb.init({
-  env: 'ccknbc-154167'
-  })
-</script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/ccknbc-backup/cdn@latest/js/bber.min.js" ></script> -->
-
-<!-- ## 哔哔 CloudBase 版本(Heo) -->
-
-<!-- <div id="bber"></div>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ccknbc-backup/cdn@latest/css/newbber.min.css">
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/ccknbc-backup/cdn@latest/js/newbber.min.js" ></script> -->
-
-<!-- ## 说说(Artitalk) -->
-
-<!-- <div id="artitalk_main"></div>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/artitalk"></script>
-<script>
-new Artitalk({
-  appId: 'pvExDcJ4o0gsrOI1G1eGO01H-MdYXbMMI',
-  appKey: 'D4V4sTiVUkTmOqyVyBN79iDB',
-  atComment: false
-})
-</script> -->
-
-<!-- ## hpptalk(CYFan) -->
-
-<!-- <div id="hpp_talk"></div>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HexoPlusPlus/HexoPlusPlus/talk.css" /> 
-<script src="https://cdn.jsdelivr.net/gh/HexoPlusPlus/HexoPlusPlus/talk_user.js"></script>
-<script>
-new hpp_talk({
-id:"hpp_talk",
-domain: "blog.ccknbc.workers.dev",
-limit: 10,
-start: 0,
-themecss: "https://cdn.jsdelivr.net/gh/HexoPlusPlus/cdn/plugin/theme/hpp_user_talk/bfonion.css" 
-});
-</script> -->
-
-<!-- ## 哔哔 LeanCloud 版本(黑石) -->
-
-<!-- <div id="bbtalk"></div>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bbtalk.min.js"></script>
-<script>
-bbtalk.init({
-  appId: "MH2fWakWlJvGxqbMLX6itMJL-MdYXbMMI",
-  appKey: "V5akWNoPYoo3595zOEw2XX5e",
-  serverURLs: 'https://mh2fwakw.api.lncldglobal.com'
-})
-</script> -->
-
-<!-- ## 求新版本啊啊啊 -->

source/offline/index.md

@@ -1,5 +1,5 @@
 ---
-title: offline
+title: CC的部落格 离线页面
 top_img: false
 comments: false
 aside: false
@@ -10,10 +10,10 @@ subtitle: Ur Offline
 description: CC的部落格 离线页面
 ---
 
-CC的部落格暂时无法访问，因此跳转到离线页面
+很抱歉，您暂时无法访问CC的部落格，因此跳转到离线页面
 
 这有可能是CC的主站服务器全部炸裂，当然，更有可能的是您网络丢失，或者至少您与CC的服务器之间失去了联系。
 
-可前往[**CC的状态页面**](https://cc.instatus.com/) 查看详情，考虑到请求及带宽原因，并未配置自动切换拉去镜像站内容我们无法从任何一个镜像站获取到最新的博客内容，但您可手动暂时访问下列镜像站点
+可前往[**CC的状态页面**](https://cc.instatus.com/) 查看故障详情或反馈，也可手动暂时访问下列镜像站点，感谢您的支持与理解！
 
 {% note success flat %} 以下排名不分先后，请选择适合自己访问较快的即可</br> **[GitHub](https://ccknbc.github.io) | [GitLab](https://ccknbc.gitlab.io) | [Gitee](https://ccknbc.gitee.io) | [Bitbucket](https://ccknbc.bitbucket.io) | [Vercel](https://ccknbc.vercel.app) | [Netlify](https://ccknbc.netlify.app) | [CloudFlare](https://ccknbc.pages.dev)** {% endnote %}

sw.js

@@ -6,40 +6,42 @@ if (workbox) {
     console.log('workbox加载失败😬');
 }
 
-// Force development builds
+// Force production builds 是否关闭控制台中的输出
 workbox.setConfig({
     debug: true,
 });
 
-// Force production builds 关闭控制台中的输出
-// workbox.setConfig({ debug: false });
-
 // self.__WB_DISABLE_DEV_LOGS = true;
 
 //设置缓存cachestorage的名称
 workbox.core.setCacheNameDetails({
     prefix: 'CC的部落格',
-    // suffix: 'v1',
-    precache: '预缓存',
-    runtime: '运行时间',
-    googleAnalytics: '谷歌分析'
+    suffix: '缓存',
+    precache: '离线后备',
+    runtime: '运行时',
+    // googleAnalytics: '谷歌分析'
 });
 
 //直接激活跳过等待阶段
 self.skipWaiting();
 workbox.core.clientsClaim();
+// self.clients.claim();
 
 // 预缓存
 workbox.precaching.precacheAndRoute(self.__WB_MANIFEST, {
     directoryIndex: null
 });
 
+workbox.precaching.cleanupOutdatedCaches();
+
+// 离线后备方式 1 需同步配置并开启预缓存且导航预加载并非所有浏览器支持 https://caniuse.com/mdn-api_navigationpreloadmanager_enable
 // Enable navigation preload.
 workbox.navigationPreload.enable();
 
 // The network-only callback should match navigation requests, and
 // the handler for the route should use the network-only strategy, but
 // fall back to a precached offline page in case the user is offline.
+
 const Offline = new workbox.routing.Route(({ request }) => {
     return request.mode === 'navigate';
 }, new workbox.strategies.NetworkOnly({
@@ -52,7 +54,65 @@ const Offline = new workbox.routing.Route(({ request }) => {
 
 workbox.routing.registerRoute(Offline);
 
-workbox.precaching.cleanupOutdatedCaches();
+// 离线后备方式 2 响应超时5秒后,跳转到离线页面
+
+// Hardcode the fallback cache name and the offline
+// HTML fallback's URL for failed responses
+
+// const FALLBACK_CACHE_NAME = '离线后备';
+// const FALLBACK_HTML = '/offline/index.html';
+
+// // Cache the fallback HTML during installation.
+
+// self.addEventListener('install', (event) => {
+//     event.waitUntil(
+//         caches.open(FALLBACK_CACHE_NAME).then((cache) => cache.add(FALLBACK_HTML)),
+//     );
+// });
+
+// Apply a network-only strategy to navigation requests.
+// If offline, or if more than five seconds pass before there's a
+// network response, fall back to the cached offline HTML.
+
+// const Timeout = new workbox.strategies.NetworkOnly({
+// //     networkTimeoutSeconds: 5,
+//     plugins: [
+//         {
+//             handlerDidError: async () => {
+//                 return await caches.match(FALLBACK_HTML, {
+//                     cacheName: FALLBACK_CACHE_NAME,
+//                 });
+//             },
+//         },
+//     ],
+// });
+
+// Register the route to handle all navigations.
+
+// workbox.routing.registerRoute(new workbox.routing.NavigationRoute(Timeout));
+
+// 离线后备方案 3 综合后备请参考https://developer.chrome.com/docs/workbox/managing-fallback-responses/
+// 如果您需要做的只是提供一个自定义的离线 HTML 页面，但别无其他，这里有一个您可以遵循的基准配置：
+// 其他缓存选项默认配置可参考 https://developer.chrome.com/docs/workbox/modules/workbox-recipes 可极大节省配置时间
+// 只需准备一个名为 offline.html 的离线 HTML 页面，并将其放置在网站根目录下。
+
+// workbox.routing.setDefaultHandler(new workbox.strategies.NetworkOnly());
+// workbox.recipes.offlineFallback();
+
+// 一些缓存小策略
+// workbox.recipes.pageCache();
+// workbox.recipes.googleFontsCache();
+// workbox.recipes.staticResourceCache();
+// workbox.recipes.imageCache();
+// workbox.recipes.offlineFallback();
+
+// 暖策略缓存
+// This can be any strategy, CacheFirst used as an example.
+
+// const strategy = new workbox.strategies.StaleWhileRevalidate();
+// const urls = ['/offline/index.html'];
+// workbox.recipes.warmStrategyCache({urls, strategy});
+
 
 // Images
 // workbox.routing.registerRoute(

themes/butterfly/_config.yml

@@ -628,7 +628,10 @@ aside:
   button: true
   mobile: true # display on mobile
   position: right # left or right
-  archives: true
+  display:
+    archive: true
+    tag: true
+    category: true
   card_author:
     enable: true
     description:

themes/butterfly/layout/archive.pug

@@ -3,6 +3,7 @@ extends includes/layout.pug
 block content
   include ./includes/mixins/article-sort.pug
   #archive
-    .article-sort-title= _p('page.articles') + ' - ' + site.posts.length
+    - const archiveLength = findArchiveLength(fragment_cache)
+    .article-sort-title= _p('page.articles') + ' - ' + archiveLength
     +articleSort(page.posts)
     include includes/pagination.pug