终于搞懂vuepress自定义插槽啦，一定要打开主题自定义开关

itwangtian · Oct 18, 2023 · c675dcc · c675dcc
1 parent 29d3d9f
commit c675dcc
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@elog/cli": "0.7.3-beta.1",
+    "@vuepress/plugin-blog": "^1.9.4",
     "pnpm": "^8.7.6",
     "vuepress-plugin-search-pro": "2.0.0-beta.237"
   }

diff --git a/src/.vuepress/client.js b/src/.vuepress/client.js
@@ -20,8 +20,10 @@
 //   };
 
 import { defineClientConfig } from "@vuepress/client";
-console.log('路由守卫了')
+
+
 export default defineClientConfig({
+
   enhance({ router }) {
       router.beforeEach((to, from, next) => {
       console.log("切换路由", to.fullPath, from.fullPath);

diff --git a/src/.vuepress/components/NormalPage.vue b/src/.vuepress/components/NormalPage.vue
@@ -0,0 +1,27 @@
+
+
+<template>
+  <NormalPage >
+    <!-- 使用 bottom 插槽引入评论组件 -->
+    <template #contentAfter>
+     <div class="theme-hope-content">
+      <hr>
+      <p>  读者朋友好呀，我是王天~</p>
+
+      <p> 尝试做过很多事情，汽修专业肄业生，半路出道的野生程序员、前端讲师、新手作者，最终还是喜欢写代码、乐于用文字记录热衷分享~</p>
+
+        <p> 如文章有错误或者不严谨的地方，期待给于指正，万分感谢。</p>
+
+          <p> 如果喜欢或者 有所启发，欢迎 star，对作者也是一种鼓励。</p>
+
+            <p>  微信：「wangtian3111」，加我进王天唯一的读者群。</p>
+
+              <p> 个人博客：https://itwangtian.com</p>
+     </div>
+    </template>
+  </NormalPage >
+</template>
+
+<script setup lang="ts">
+import NormalPage  from "vuepress-theme-hope/components/NormalPage";
+</script>
diff --git a/src/.vuepress/config.ts b/src/.vuepress/config.ts
@@ -3,9 +3,20 @@ import theme from "./theme.js";
 import { searchProPlugin } from "vuepress-plugin-search-pro";
 // 百度站点推送
 import { searchConsolePlugin } from 'vuepress-plugin-china-search-console'
+import { getDirname, path } from "@vuepress/utils";
+const __dirname = getDirname(import.meta.url);
 
 // 这里使用的是 vuepress主题 配置项
 export default defineUserConfig({
+  theme,
+  alias: {
+    // 你可以在这里将别名定向到自己的组件
+    // 比如这里我们将主题的主页组件改为用户 .vuepress/components 下的 HomePage.vue
+    "@theme-hope/components/NormalPage": path.resolve(
+      __dirname,
+      "./components/NormalPage.vue",
+    ),
+  },
    // 配置百度统计脚本，最终以script标签 插入header中
   head: [
     [
@@ -25,16 +36,10 @@ export default defineUserConfig({
   lang: "zh-CN",
   title: "王天的web进阶之路",
   description: "前端编程技术分享！ itwangtian",
-  theme, 
+
 
-  plugins: [
-    searchConsolePlugin({
-        options:{
-          baiduId:'ff5e95667789a353e9be4e467e13ff3a',
-          autoPushBaiduSwitch:true,
-          toutiaoAutoPushId: '021f3494cf7ec341c55b86f960d03bb13390792034b53ef0a4afbae14f863531fd5c4a3974f9cd3eeb674bde712b4782cc4f323247d55c2ed2efd47b7c83521adc648ee828d46e7d3689a9c59fd080f6'
-        }
-    }),
+  plugins: [  
+
     searchProPlugin({
       // 索引全部内容
       indexContent: true,
@@ -50,6 +55,13 @@ export default defineUserConfig({
         },
       ],
     }),
+    searchConsolePlugin({
+      options:{
+        baiduId:'ff5e95667789a353e9be4e467e13ff3a',
+        autoPushBaiduSwitch:true,
+        toutiaoAutoPushId: '021f3494cf7ec341c55b86f960d03bb13390792034b53ef0a4afbae14f863531fd5c4a3974f9cd3eeb674bde712b4782cc4f323247d55c2ed2efd47b7c83521adc648ee828d46e7d3689a9c59fd080f6'
+      }
+  }),
   ],
 });
 
diff --git a/src/.vuepress/theme.ts b/src/.vuepress/theme.ts
@@ -1,6 +1,8 @@
 import { hopeTheme } from "vuepress-theme-hope";
 import navbar from "./navbar.js";
 import sidebar from "./sidebar.js";
+import { getDirname, path } from "@vuepress/utils";
+ const __dirname = getDirname(import.meta.url);
 
 const MR_HOPE_AVATAR =
   '<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient gradientTransform="matrix(.2478 .78133 -2.54797 .63622 910.35 281.58)" gradientUnits="userSpaceOnUse" id="a" x1="37.827" x2="159.988" y1="272.916" y2="274.63"><stop offset=".75" stop-color="#e33939"/><stop offset=".998" stop-color="#fff"/></linearGradient><linearGradient gradientTransform="matrix(.13814 .80797 2.55599 -.6032 34.087 494.369)" gradientUnits="userSpaceOnUse" id="b" x1="37.827" x2="159.988" y1="272.916" y2="274.63"><stop offset=".815" stop-color="#e33939"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><path d="M135.637 588.067c-48.891-201.334 74.605-404.162 275.837-453.028 201.233-48.866 403.998 74.734 452.889 276.068 48.892 201.335-74.606 404.162-275.838 453.029-201.233 48.866-403.997-74.734-452.888-276.069Z" fill="#fde68a" fill-rule="evenodd" stroke="#d08819" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/><path d="M596.076 197.044c-3.342-56.09 56.897-77.831 89.017-51.361m-410.65 128.819c-22.753-51.377-86.256-43.07-102.659-4.816" fill="none" stroke="#6d5e56" stroke-linecap="round" stroke-linejoin="round" stroke-width="11"/><path d="M833.568 288.02c.05 18.046-12.584 30.699-21.346 32.211-8.762 1.512-17.031-1.099-18.584-1.341 0 0-61.363-6.103-105.627 6.921-44.265 13.026-87.04 47.387-94.637 51.892-6.627 3.928-29.112 7.697-44.462-12.938-15.351-20.636.024-41.526.024-41.526s12.685-18.279 40.771-35.123c28.088-16.844 24.624-13.226 52.326-25.696 15.247-6.865 43.319-14.186 67.429-17.069 25.193-3.011 46.348-1.384 57.673.769 22.165 4.212 28.632 5.93 39.169 9.229 12.451 3.898 27.214 14.516 27.264 32.671Z" fill="#fff" fill-rule="evenodd" stroke="#d08819" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/><path d="M558.351 345.632c-3.458-14.237 5.214-28.566 19.367-32.003 14.154-3.437 28.43 5.32 31.887 19.557 3.458 14.238-5.212 28.567-19.367 32.004-14.152 3.437-28.43-5.319-31.887-19.558Z" fill="#6d5e56" fill-rule="evenodd" stroke="#6d5e56" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.268"/><path d="M220.249 483.416c46.81-11.689 91.323-.467 99.42 25.064 8.098 25.532-23.286 55.706-70.097 67.393-46.811 11.689-91.323.467-99.42-25.064-8.097-25.532 23.286-55.706 70.097-67.393Z" fill="url(#a)" fill-rule="evenodd" opacity=".261"/><path d="M739.9 357.226c-46.959 11.082-81.367 41.469-76.853 67.871 4.514 26.402 46.241 38.821 93.198 27.738 46.958-11.081 81.366-41.467 76.853-67.869-4.514-26.403-46.241-38.821-93.198-27.74Z" fill="url(#b)" fill-rule="evenodd" opacity=".261"/><path d="M400.934 398.917c-.599 18.034-13.681 30.218-22.494 31.409-8.812 1.192-16.982-1.716-18.526-2.014 0 0-61.109-8.334-105.819 3.07-44.709 11.404-88.696 44.181-96.452 48.406-6.763 3.683-29.372 6.632-43.972-14.546-14.6-21.18 1.519-41.494 1.519-41.494s13.335-17.803 42.013-33.612c28.677-15.809 25.085-12.319 53.222-23.772 15.484-6.304 43.803-12.598 68.005-14.6 25.288-2.093 46.373.305 57.616 2.867 22 5.016 28.401 6.968 38.813 10.649 12.304 4.348 26.677 15.496 26.075 33.637Z" fill="#fff" fill-rule="evenodd" stroke="#d08819" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/><path d="M129.05 445.546c-3.458-14.239 5.213-28.566 19.367-32.003 14.153-3.437 28.429 5.318 31.887 19.557 3.458 14.238-5.213 28.566-19.367 32.003-14.153 3.437-28.43-5.318-31.887-19.557Z" fill="#6d5e56" fill-rule="evenodd" stroke="#6d5e56" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.268"/><path d="M424.381 696.386s64.427 13.646 101.996 5.757C640.653 678.146 690.8 521.894 690.8 521.894" fill="none" stroke="#d08819" stroke-linecap="round" stroke-linejoin="round" stroke-width="11"/><path d="M796.04 666.774s-10.734-44.165-41.405-11.348c-9.681 10.359-10.438 40.604-28.217 81.89-15.942 37.02-39.564 60.728-42.938 76.063-3.374 15.335.451 35.992 26.352 41.537 25.902 5.545 41.967-23.381 41.967-23.381l44.241-164.761Z" fill="#fde68a" fill-rule="evenodd" stroke="#d08819" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/><path d="M793.337 664.734c-37.075 160.045-51.73 163.145-40.343 184.845 11.387 21.701 51.417 33.716 71.876-7.313 6.734-13.505-1.31-43.317-1.511-78.077-.307-53.06 16.865-86.111 10.403-98.1-15.332-28.452-39.377-5.875-40.425-1.355Z" fill="#fde68a" fill-rule="evenodd" stroke="#d08819" stroke-linecap="round" stroke-linejoin="round" stroke-width="10"/></svg>';
@@ -66,16 +68,17 @@ export default hopeTheme({
   },
 
   plugins: {
+
     blog: true,
 
     comment: {
       // You should generate and use your own comment service
-      // provider: "Giscus",
-      // repo:"itwangtian/itwangtian",
-      // repoId:'R_kgDOKEL72Q',
-      // category:'announcements',
-      // categoryId:'DIC_kwDOKEL72c4CZVpN',
-      // mapping:'og:title'
+      provider: "Giscus",
+      repo:"itwangtian/itwangtian",
+      repoId:'R_kgDOKEL72Q',
+      category:'announcements',
+      categoryId:'DIC_kwDOKEL72c4CZVpN',
+      mapping:'og:title'
       // serverURL: "https://waline-comment.vuejs.press",
     },
 
@@ -177,4 +180,4 @@ export default hopeTheme({
       },
     },
   },
-});
+}, { custom: true });