fix: blog preview image not shown

maicss · Mar 13, 2024 · bf0d9bc · bf0d9bc
1 parent 8ef1753
commit bf0d9bc
Show file tree

Hide file tree

Showing 8 changed files with 1,262 additions and 1,746 deletions.
diff --git a/.vitepress/beforeBuild.mjs b/.vitepress/beforeBuild.mjs
@@ -84,7 +84,7 @@ readdir(folder)
       items.map((item) => writeFile(resolve(folder, item.file), buildFrontMatter(item) + '\r\n' + item.content))
     ).then(() => {
       if (breakBuildInfo.length) {
-        console.error(`WARNING: [${breakBuildInfo}] build failed, exiting.`)
+        console.error(`ERROR: [${breakBuildInfo}] build failed, exiting.`)
         exit(1)
       }
     })

diff --git a/.vitepress/config.mts b/.vitepress/config.mts
@@ -1,21 +1,25 @@
 /// <reference types="vite-svg-loader" />
-import { defineConfig } from "vitepress"
+import { defineConfig, type HeadConfig } from "vitepress"
 import svgLoader from 'vite-svg-loader'
 
 // https://vitepress.dev/reference/site-config
-export default defineConfig({
-  title: "Maicss",
-  description: "Miacss' website pyqt 中文 教程 pyqt5 pyqt6",
-  head: [
-    ["link", { rel: "icon", href: "/favicon.ico" }],
-    ["link", { rel: "manifest", href: "/site.webmanifest" }],
+
+const head:HeadConfig[] = [
+  ["link", { rel: "icon", href: "/favicon.ico" }],
+  ["link", { rel: "manifest", href: "/site.webmanifest" }],
+]
+
+if (process.env.NODE_ENV === 'production') {
+  head.push(
     [
       "script",
       {
         async: "",
         src: "https://www.googletagmanager.com/gtag/js?id=G-7KBNJR8LJ3",
       },
     ],
+  )
+  head.push(
     [
       "script",
       {},
@@ -24,6 +28,9 @@ export default defineConfig({
       gtag('js', new Date());
       gtag('config', 'G-7KBNJR8LJ3');`,
     ],
+  )
+
+  head.push(
     [
       "script",
       {},
@@ -35,7 +42,13 @@ export default defineConfig({
       s.parentNode.insertBefore(hm, s);
     })();`,
     ],
-  ],
+  )
+}
+
+export default defineConfig({
+  title: "Maicss",
+  description: "Miacss' website pyqt 中文 教程 pyqt5 pyqt6",
+  head,
   srcDir: "./pages",
   lang: "zh-CN",
   cleanUrls: true,
@@ -125,10 +138,22 @@ export default defineConfig({
   sitemap: {
     hostname: "https://maicss.com",
   },
+  markdown: {
+    image: {
+      lazyLoading: true
+    }
+  },
   vite: {
     plugins: [svgLoader({
       defaultImport: 'component'
-    })]
+    })],
+    build: {
+      rollupOptions: {
+        output: {
+          assetFileNames: `assets/[name].[ext]`
+        }
+      }
+    }
   },
   // buildEnd: genFeed
 });
diff --git a/.vitepress/theme/BlogIndex.vue b/.vitepress/theme/BlogIndex.vue
@@ -34,7 +34,7 @@ const changePage = (page:number|'prev'|'next') => {
       <ul>
         <li v-for="item in currentPagePosts" :key="item.url" class="mb-4 hover:scale-105 cursor-pointer overflow-hidden duration-150">
           <a :href="item.url" class="flex gap-x-4 h-44 rounded-lg border overflow-hidden blog-index-list-item line-clamp-6 no-underline">
-            <img :src="'./images/' + item.image" alt="" class="flex-[1_4] object-center object-cover">
+            <img :src="item.image.startsWith('http') ? item.image : ('/assets/' + item.image)" alt="" class="flex-[1_4] object-center object-cover">
             <div v-html="item.excerpt" class="prose dark:prose-invert flex-[3_4] py-2 pr-2 h-full overflow-hidden"></div>
           </a>
         </li>

diff --git a/.vitepress/theme/GiscusLayout.vue b/.vitepress/theme/GiscusLayout.vue
@@ -162,16 +162,10 @@ const handleCommentComponent = () => {
 
 router.onAfterRouteChanged = () => {
   foldCode()
-  console.log(2222)
   handleCommentComponent()
   changeCommentPluginTheme()
 }
 
-watch([() => route.path], () => {
-  console.log(1111)
-})
-
-
 const unwatchTheme = watch([isDark], () => {
   changeCommentPluginTheme()
 })

diff --git a/package.json b/package.json
@@ -4,17 +4,20 @@
     "build": "vitepress build",
     "preview": "vitepress preview",
     "lint": "zhlint pages/**/*.md --fix && node ./.vitepress/beforeBuild.mjs",
+    "build:blogIndex": "node ./.vitepress/beforeBuild.mjs",
     "bp": "vitepress build && vitepress preview"
   },
   "type": "module",
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",
+    "@types/node": "^20.11.26",
     "gray-matter": "^4.0.3",
     "husky": "^8.0.3",
-    "tailwindcss": "^3.3.5",
+    "prettier": "3.2.5",
+    "tailwindcss": "^3.4.1",
     "vite-svg-loader": "^4.0.0",
-    "vitepress": "1.0.0-rc.28",
-    "zhlint": "^0.7.1"
+    "vitepress": "1.0.0-rc.45",
+    "zhlint": "^0.8.1"
   },
   "pnpm": {
     "peerDependencyRules": {
@@ -26,7 +29,7 @@
   },
   "dependencies": {
     "feed": "^4.2.2",
-    "giscus": "^1.3.0"
+    "giscus": "^1.5.0"
   },
   "prettier": {
     "trailingComma": "es5",

diff --git a/pages/blog/promise-pool.md b/pages/blog/promise-pool.md
@@ -10,7 +10,7 @@ next:
   link: /blog/
 ---
 
-# javascript promise pool
+# Javascript promise pool
 
 在日常搬砖中或者面试题都遇到过异步控制的需求，简单的比如直接处理成二维数组和 `Promise.all` 就完事了。
 但是更好的方法是创建一个异步池效率会更佳，下面这个图片更加形象的说明了异步池和 `Promise.all` 分批的区别：