对首页部分链接增加 pjax 的功能,完善部分功能

Author: LIlGG

src/css/common/outline/header/brand.css

@@ -8,7 +8,7 @@
     margin: 0;
 
     & a {
-      color: #464646;
+      color: var(--body-color);
       font-weight: 400;
 
       &:hover {

src/css/theme/tag/header.css

@@ -5,7 +5,7 @@
         display: inline-block;
         font-size: 25px;
         font-weight: 400;
-        color: #666;
+        color: var(--color);
 
         &::before {
           content: "";

src/libs/pjax.ts

@@ -25,7 +25,7 @@ import NProgress from "nprogress";
 
 NProgress.configure({ trickle: false });
 
-new Pjax({
+const pjax = new Pjax({
   elements: "a[data-pjax]",
   selectors: ["head title", ".wrapper", ".pjax"],
   switches: {
@@ -36,6 +36,9 @@ new Pjax({
   debug: import.meta.env.MODE === "development" ? true : false,
 });
 
+// 挂载 pjax 实例至全局
+sakura.mountGlobalProperty("pjax", pjax);
+
 window.addEventListener("pjax:send", () => {
   NProgress.start();
 });

src/main.ts

@@ -23,6 +23,7 @@ interface Sakura {
   registerDocumentFunction(documentFunction: DocumentFunction): void;
   translate(key: String, defaultValue: string, options?: TOptions): string;
   getPageConfig(key: string): any | undefined;
+  mountGlobalProperty(key: string, value: any): void;
 }
 
 declare var Sakura: {
@@ -231,6 +232,23 @@ export class SakuraApp implements Sakura {
     this.finishRefresh();
   }
 
+  /**
+   * 挂载全局属性至 sakura 中
+   */
+  public mountGlobalProperty(key: string, value: any) {
+    const descriptor = Object.getOwnPropertyDescriptor(sakura, `$${key}`);
+    if (descriptor) {
+      return;
+    }
+    Object.defineProperty(sakura, `$${key}`, {
+      value: value,
+      writable: false,
+      enumerable: false,
+      configurable: false,
+    });
+    // TODO 触发属性挂载完成事件
+  }
+
   protected mountGlobalFunction() {
     // 注册sakura toast 组件
     const isToast = sakura.getThemeConfig("toast", "open_toast", Boolean)?.valueOf();
@@ -312,7 +330,7 @@ export class SakuraApp implements Sakura {
                           hour: "numeric",
                           minute: "numeric",
                           second: "numeric",
-                        }
+                        };
                         break;
                       case "date":
                       default:

src/module/utils.ts

@@ -141,6 +141,8 @@ export class Utils {
             colorScheme: 'light'
           }
         );
+        // 注入样式
+        this.injectCommentStyle();
         resolve("success");
       });
     }

src/page/tags.ts

@@ -1,4 +1,4 @@
-import { documentFunction } from "../main";
+import { documentFunction, sakura } from "../main";
 // @ts-ignore
 import cloneDeep from "lodash.clonedeep";
 // @ts-ignore
@@ -17,6 +17,13 @@ export default class Tags {
     });
   }
 
+  /**
+   * 
+   * 注册标签云
+   * 
+   * @description 生成标签云
+   * @see https://github.com/jasondavies/d3-cloud
+   */
   @documentFunction()
   public async registerTagsWordCloud() {
     const wordCloudElement = document.getElementById("tag-wordcloud");
@@ -50,6 +57,7 @@ export default class Tags {
           .attr("xlink:href", function (d: any) {
             return d.link;
           })
+          .attr("data-pjax", "")
           .append("text")
           .style("font-size", function (d: any) {
             return d.size;
@@ -67,6 +75,11 @@ export default class Tags {
           .text(function (d: any) {
             return d.text;
           });
+          // 如果存在 pjax，则刷新 wordCloudElement
+          if (sakura.$pjax) {
+            // TODO 虽然添加上了，但似乎没生效
+            sakura.$pjax.refresh(wordCloudElement);
+          }
       });
     layout.start();
   }