perf: don't fetch hitokoto util hovering avatar

Renovamen · Mar 29, 2022 · 487c439 · 487c439
1 parent f9187c2
commit 487c439
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
@@ -68,7 +68,7 @@ export default defineUserConfig<GungnirThemeOptions>({
     repo: "Renovamen/vuepress-theme-gungnir",
     docsDir: "docs",
 
-    hitokoto: "https://v1.hitokoto.cn?c=d&c=i", // enable hitokoto (一言) or not?
+    hitokoto: "https://v1.hitokoto.cn?c=i", // enable hitokoto (一言) or not?
 
     // personal information
     personalInfo: {

diff --git a/packages/theme/src/client/components/Home.vue b/packages/theme/src/client/components/Home.vue
@@ -14,11 +14,12 @@
           class="hero-avatar hide-on-mobile"
           :src="$withBase(personalInfo.avatar)"
           alt="hero"
+          @mouseover="fetchHitokoto"
         />
 
         <div v-if="hitokotoAPI" class="hero-bubble">
           <div class="hero-bubble__body">
-            <p id="hitokoto">正在加载一言...</p>
+            <p>{{ hitokotoText }}</p>
           </div>
           <div class="hero-bubble__tile" />
         </div>
@@ -73,24 +74,26 @@ const scrollToPost = () => {
 
 // -------- Hitokoto --------
 const hitokotoAPI = themeLocale.value.hitokoto;
+const hitokotoText = ref("正在加载一言...");
+let hasFetchedHitokoto = false;
 
 const fetchHitokoto = () => {
+  if (!hitokotoAPI || hasFetchedHitokoto) return;
+
+  hasFetchedHitokoto = true;
+
   let api = hitokotoAPI;
   api = typeof api === "string" ? api : "https://v1.hitokoto.cn";
 
   fetch(api)
     .then((response) => response.json())
-    .then((data) => {
-      const hitokoto = document.querySelector("#hitokoto") as HTMLElement;
-      hitokoto.innerHTML = data.hitokoto;
-    })
+    .then((data) => (hitokotoText.value = data.hitokoto))
     .catch((error) => {
       console.log(`Get ${api} error: `, error);
     });
 };
 
 onMounted(() => {
-  if (hitokotoAPI) fetchHitokoto();
   if (bgImages && bgImages.length > 0)
     bgImageID.value = Math.floor(Math.random() * bgImages.length);
 });