{"id":1401,"date":"2024-06-02T22:44:55","date_gmt":"2024-06-02T22:44:55","guid":{"rendered":""},"modified":"2024-06-05T06:12:19","modified_gmt":"2024-06-04T22:12:19","slug":"%e6%90%ad%e5%bb%ba-vuepress-%e5%8d%9a%e5%ae%a2%ef%bc%8c%e4%bd%a0%e5%8f%af%e8%83%bd%e4%bc%9a%e7%94%a8%e5%88%b0%e7%9a%84%e4%b8%80%e4%ba%9b%e6%8f%92%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/www.lccc.top\/?p=1401","title":{"rendered":"\u642d\u5efa VuePress \u535a\u5ba2\uff0c\u4f60\u53ef\u80fd\u4f1a\u7528\u5230\u7684\u4e00\u4e9b\u63d2\u4ef6"},"content":{"rendered":"\n

\u524d\u8a00<\/h2>\n

\u5728 \u300a\u4e00\u7bc7\u5e26\u4f60\u7528 VuePress + Github Pages \u642d\u5efa\u535a\u5ba2\u300b<\/a>\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528 VuePress \u642d\u5efa\u4e86\u4e00\u4e2a\u535a\u5ba2\uff0c\u6700\u7ec8\u7684\u6548\u679c\u67e5\u770b\uff1aTypeScript \u4e2d\u6587\u6587\u6863<\/a>\u3002<\/p>\n

\u4e3a\u4e86\u4e30\u5bcc\u7ad9\u70b9\u7684\u529f\u80fd\uff0c\u6211\u4eec\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u4e00\u4e9b\u73b0\u6709\u7684\u63d2\u4ef6\uff0c\u672c\u7bc7\u6211\u4eec\u8bb2\u8bb2\u4e00\u4e9b\u5e38\u7528\u7684\u63d2\u4ef6\u3002<\/p>\n

1. \u516c\u544a\u680f\u5f39\u7a97<\/h2>\n

\u63d2\u4ef6\u5730\u5740\uff1ahttps:\/\/vuepress-theme-reco.recoluan.com\/views\/plugins\/bulletinPopover.html<\/a><\/p>\n

\u5b89\u88c5\uff1a<\/p>\n

\n
yarn add @vuepress-reco\/vuepress-plugin-bulletin-popover -D<\/pre>\n<\/div>\n
\u4f7f\u7528\uff1a<\/p>\n
<\/p>\n
plugins: [<\/span>\n  [<\/span>'@vuepress-reco\/vuepress-plugin-bulletin-popover'<\/span>,<\/span> {<\/span>\n    width<\/span>: '300px'<\/span>,<\/span> \/\/ \u9ed8\u8ba4 260px<\/span>\n    title<\/span>: '\u6d88\u606f\u63d0\u793a'<\/span>,<\/span>\n    body<\/span>: [<\/span>\n      {<\/span>\n        type<\/span>: 'title'<\/span>,<\/span>\n        content<\/span>: '\u6dfb\u52a0\u51b4\u7fbd\u597d\u53cb\u5165\u524d\u7aef\u4ea4\u6d41\u7fa4'<\/span>,<\/span>\n        style<\/span>: 'text-aligin: center;'<\/span>\n      }<\/span>,<\/span>\n      {<\/span>\n        type<\/span>: 'image'<\/span>,<\/span>\n        src<\/span>: 'https:\/\/cdn.jsdelivr.net\/gh\/mqyqingfeng\/picture\/IMG_3516.JPG'<\/span>\n      }<\/span>\n    ]<\/span>,<\/span>\n    footer<\/span>: [<\/span>\n      {<\/span>\n        type<\/span>: 'button'<\/span>,<\/span>\n        text<\/span>: '\u6253\u8d4f'<\/span>,<\/span>\n        link<\/span>: '\/donate'<\/span>\n      }<\/span>\u00a0\n    ]<\/span>\n  }<\/span>]<\/span>\n]<\/span><\/pre>\n<\/div>\n
\u6548\u679c\u622a\u56fe\uff1a<\/p>\n
\"\"<\/a><\/p>\n
\u6ce8\u610f\u4e8b\u9879\uff1a<\/p>\n
\u67e5\u770b\u63d2\u4ef6\u6e90\u7801\u53ef\u4ee5\u5f97\u77e5\uff0c\u516c\u544a\u680f\u5f39\u7a97\u662f\u4f7f\u7528 sessionStorage<\/code> \u63a7\u5236\u7684\u5c55\u793a\u9891\u6b21\uff0c\u5728\u672c\u5730\u6d4b\u8bd5\u65f6\uff0c\u5982\u679c\u5173\u95ed\u4e86\uff0c\u53ef\u4ee5\u901a\u8fc7\u6e05\u9664 sessionStorage<\/code> \u518d\u6b21\u5c55\u793a\u51fa\u6765\u3002<\/p>\n
<\/p>\n
\/\/ \u6240\u5728\u76ee\u5f55\uff1anode_modules\/@vuepress-reco\/vuepress-plugin-bulletin-popover\/bin\/Bulletin.vue<\/span>\n\nmounted<\/span> (<\/span>)<\/span> {<\/span>\n    const<\/span> closeNote<\/span> =<\/span> sessionStorage<\/span>.<\/span>getItem<\/span>(<\/span>'closeNote'<\/span>)<\/span>\n    this<\/span>.<\/span>visible<\/span> =<\/span> closeNote<\/span> !==<\/span> 'true'<\/span>\n}<\/span><\/pre>\n<\/div>\n
2. \u4ee3\u7801\u590d\u5236<\/h2>\n
\u63d2\u4ef6\u5730\u5740\uff1ahttps:\/\/www.npmjs.com\/package\/vuepress-plugin-nuggets-style-copy<\/a><\/p>\n
\u5b89\u88c5\uff1a<\/p>\n
\n
yarn add vuepress-plugin-nuggets-style-copy -D<\/pre>\n<\/div>\n
\u4f7f\u7528\uff1a<\/p>\n
<\/p>\n
plugins: [<\/span>\n\t[<\/span>\"vuepress-plugin-nuggets-style-copy\"<\/span>,<\/span> {<\/span>\n      copyText<\/span>: \"\u590d\u5236\u4ee3\u7801\"<\/span>,<\/span>\n      tip<\/span>: {<\/span>\n          content<\/span>: \"\u590d\u5236\u6210\u529f\"<\/span>\n      }<\/span>\n   }<\/span>]<\/span>\n]<\/span><\/pre>\n<\/div>\n
\u6548\u679c\u7c7b\u4f3c\u4e8e\u6398\u91d1\u7684\u4ee3\u7801\u590d\u5236\uff1a<\/p>\n
\"\"<\/a><\/p>\n
\u5176\u4ed6\u6837\u5f0f\u7684\u4ee3\u7801\u590d\u5236\u63d2\u4ef6\u8fd8\u6709\uff1a<\/p>\n
    \n
  1. https:\/\/github.com\/znicholasbrown\/vuepress-plugin-code-copy<\/a><\/li>\n
  2. https:\/\/snippetors.github.io\/plugins\/vuepress-plugin-code-copy.html<\/a><\/li>\n<\/ol>\n
    3. \u6dfb\u52a0\u8457\u4f5c\u6743\u4fe1\u606f<\/h2>\n
    \u4f7f\u7528 vuepress-plugin-copyright<\/code>\u53ef\u4ee5\u7981\u7528\u6587\u5b57\u590d\u5236\u6216\u8005\u5728\u590d\u5236\u65f6\u6dfb\u52a0\u8457\u4f5c\u6743\u4fe1\u606f\u3002<\/p>\n
    \u63d2\u4ef6\u5730\u5740\uff1ahttps:\/\/vuepress-community.netlify.app\/zh\/plugins\/copyright<\/a><\/p>\n
    \u5b89\u88c5\uff1a<\/p>\n
    \n
    yarn add vuepress-plugin-copyright -D<\/pre>\n<\/div>\n
    \u4f7f\u7528\uff1a<\/p>\n
    <\/p>\n
    plugins: [<\/span>\n  [<\/span>\n    'copyright'<\/span>,<\/span>\n    {<\/span>\n      authorName<\/span>: '\u51b4\u7fbd'<\/span>,<\/span> \/\/ \u9009\u4e2d\u7684\u6587\u5b57\u5c06\u65e0\u6cd5\u88ab\u590d\u5236<\/span>\n      minLength<\/span>: 30<\/span>,<\/span> \/\/ \u5982\u679c\u957f\u5ea6\u8d85\u8fc7  30 \u4e2a\u5b57\u7b26<\/span>\n    }<\/span>,<\/span>\n  ]<\/span>\n]<\/span><\/pre>\n<\/div>\n
    \u5f53\u4f60\u590d\u5236\u8d85\u8fc7 30 \u4e2a\u5b57\u7b26\u7684\u65f6\u5019\uff0c\u5c31\u4f1a\u51fa\u73b0\uff1a<\/p>\n
    <\/p>\n
    \u8457\u4f5c\u6743\u5f52\u51b4\u7fbd\u6240\u6709\u3002\n\u94fe\u63a5\uff1ahttp:\/\/localhost:8080\/learn-typescript\/handbook\/Basic.html\n\nJavaScript \u7684\u6bcf\u4e2a\u503c\u6267\u884c\u4e0d\u540c\u7684\u64cd\u4f5c\u65f6\u4f1a\u6709\u4e0d\u540c\u7684\u884c\u4e3a\u3002\u8fd9\u542c\u8d77\u6765\u6709\u70b9\u62bd\u8c61\uff0c\u6240\u4ee5\u8ba9\u6211\u4eec\u4e3e\u4e2a\u4f8b\u5b50\uff0c\u5047\u8bbe\u6211\u4eec\u6709\u4e00\u4e2a\u540d\u4e3a message \u7684\u53d8\u91cf\uff0c\u8bd5\u60f3\u6211\u4eec\u53ef\u4ee5\u505a\u54ea\u4e9b\u64cd\u4f5c\uff1a \n<\/code><\/pre>\n<\/div>\n
    4. \u80cc\u666f\u97f3\u4e50<\/h2>\n
    \u63d2\u4ef6\u5730\u5740\uff1ahttps:\/\/vuepress-theme-reco.recoluan.com\/views\/plugins\/bgmPlayer.html<\/a><\/p>\n
    \u5b89\u88c5\uff1a<\/p>\n
    \n
    yarn add @vuepress-reco\/vuepress-plugin-bgm-player -D<\/pre>\n<\/div>\n
    \u4f7f\u7528\uff1a<\/p>\n
    <\/p>\n
    plugins: [<\/span>\n  [<\/span>\n    '@vuepress-reco\/vuepress-plugin-bgm-player'<\/span>,<\/span>\n    {<\/span>\n      audios<\/span>: [<\/span>\n        {<\/span>\n          name<\/span>: 'LOSER'<\/span>,<\/span>\n          artist<\/span>: '\u7c73\u6d25\u7384\u5e2b'<\/span>,<\/span>\n          url<\/span>: 'https:\/\/www.ytmp3.cn\/down\/73654.mp3'<\/span>,<\/span>\n          cover<\/span>: 'https:\/\/p1.music.126.net\/qTSIZ27qiFvRoKj-P30BiA==\/109951165895951287.jpg?param=200y200'<\/span>\n        }<\/span>\n      ]<\/span> ,<\/span>\n      \/\/ \u662f\u5426\u9ed8\u8ba4\u7f29\u5c0f<\/span>\n      autoShrink<\/span>: true<\/span> ,<\/span>\n      \/\/ \u7f29\u5c0f\u65f6\u7f29\u4e3a\u54ea\u79cd\u6a21\u5f0f<\/span>\n      shrinkMode<\/span>: 'float'<\/span>,<\/span>\n      \/\/ \u60ac\u6d6e\u7a97\u6837\u5f0f<\/span>\n      floatStyle<\/span>:{<\/span> bottom<\/span>: '10px'<\/span>,<\/span> 'z-index'<\/span>: '999999'<\/span> }<\/span>\n    }<\/span>\n  ]<\/span>\n]<\/span><\/pre>\n<\/div>\n
    \u6548\u679c\u622a\u56fe\uff1a<\/p>\n
    \"1.gif\"<\/a><\/p>\n
    \u5176\u4ed6\u97f3\u4e50\u63d2\u4ef6\uff1a<\/p>\n
      \n
    1. https:\/\/github.com\/moefyit\/vuepress-plugin-meting<\/a><\/li>\n
    2. https:\/\/juejin.cn\/post\/7045944008190722079<\/a><\/li>\n<\/ol>\n
      5. \u770b\u677f\u5a18<\/h2>\n
      \u63d2\u4ef6\u5730\u5740\uff1ahttps:\/\/vuepress-theme-reco.recoluan.com\/views\/plugins\/kanbanniang.html<\/a><\/p>\n
      \u5b89\u88c5\uff1a<\/p>\n
      \n
      yarn add @vuepress-reco\/vuepress-plugin-kan-ban-niang -D<\/pre>\n<\/div>\n
      \u4f7f\u7528\uff1a<\/p>\n
      <\/p>\n
      plugins: [<\/span>\n  [<\/span>\n    '@vuepress-reco\/vuepress-plugin-kan-ban-niang'<\/span>,<\/span>\n    {<\/span>\n      theme<\/span>: [<\/span>'blackCat'<\/span>,<\/span> 'whiteCat'<\/span>,<\/span> 'haru1'<\/span>,<\/span> 'haru2'<\/span>,<\/span> 'haruto'<\/span>,<\/span> 'koharu'<\/span>,<\/span> 'izumi'<\/span>,<\/span> 'shizuku'<\/span>,<\/span> 'wanko'<\/span>,<\/span> 'miku'<\/span>,<\/span> 'z16'<\/span>]<\/span>\n    }<\/span>\n  ]<\/span>\n]<\/span><\/pre>\n<\/div>\n
      \u6548\u679c\u622a\u56fe\uff1a<\/p>\n
      \"2.gif\"<\/a><\/p>\n
      \u5176\u4ed6\u770b\u677f\u5a18\u63d2\u4ef6\uff1a<\/p>\n
        \n
      1. https:\/\/github.com\/yanjun0501\/vuepress-plugin-live2d<\/a><\/li>\n<\/ol>\n
        6. \u4fee\u6539\u5149\u6807\u6548\u679c<\/h2>\n
        \u63d2\u4ef6\u5730\u5740\uff1ahttps:\/\/github.com\/moefyit\/vuepress-plugin-cursor-effects<\/a><\/p>\n
        \u5b89\u88c5\uff1a<\/p>\n
        \n
        yarn add vuepress-plugin-cursor-effects -D<\/pre>\n<\/div>\n
        \u4f7f\u7528\uff1a<\/p>\n
        <\/p>\n
        plugins: [<\/span>\n  [<\/span>'cursor-effects'<\/span>,<\/span> {<\/span>\n    size<\/span>: 2<\/span>,<\/span> \/\/ size of the particle, default: 2<\/span>\n    shape<\/span>: 'star'<\/span>,<\/span> \/\/ ['star' | 'circle'], \/\/ shape of the particle, default: 'star'<\/span>\n    zIndex<\/span>: 999999999<\/span>,<\/span> \/\/ z-index property of the canvas, default: 999999999<\/span>\n\t}<\/span>]<\/span>\n]<\/span><\/pre>\n<\/div>\n
        \u6548\u679c\u622a\u56fe\uff1a<\/p>\n
        \"3.gif\"<\/a><\/p>\n
        7. \u52a8\u6001\u6807\u9898\u5c55\u793a<\/h2>\n
        \u63d2\u4ef6\u5730\u5740\uff1ahttps:\/\/github.com\/moefyit\/vuepress-plugin-dynamic-title<\/a><\/p>\n
        \u5b89\u88c5\uff1a<\/p>\n
        \n
        yarn add vuepress-plugin-cursor-effects -D<\/pre>\n<\/div>\n
        \u4f7f\u7528\uff1a<\/p>\n
        <\/p>\n
        plugins: [<\/span>\n  [<\/span>'dynamic-title'<\/span>,<\/span> {<\/span>\n     showIcon<\/span>: 'https:\/\/www.typescriptlang.org\/favicon-32x32.png?v=8944a05a8b601855de116c8a56d3b3ae'<\/span>,<\/span>\n     showText<\/span>: '\u5ba2\u5b98\u6b22\u8fce\u56de\u6765~'<\/span>,<\/span>\n     hideIcon<\/span>: 'https:\/\/www.typescriptlang.org\/favicon-32x32.png?v=8944a05a8b601855de116c8a56d3b3ae'<\/span>,<\/span>\n     hideText<\/span>: '\u5ba2\u5b98\u4e0d\u8981\u8d70\u561b~'<\/span>,<\/span>\n     recoverTime<\/span>: 2000<\/span>,<\/span>\n\t}<\/span>]<\/span>\n]<\/span>  <\/pre>\n<\/div>\n
        \u6548\u679c\u622a\u56fe\uff1a<\/p>\n
        \"4.gif\"<\/a><\/p>\n
        8. \u4f18\u5316\u4ee3\u7801\u5c55\u793a<\/h2>\n
        \u63d2\u4ef6\u5730\u5740\uff1ahttps:\/\/vuepress-theme-reco.recoluan.com\/views\/plugins\/extractCode.html<\/a><\/p>\n
        \u5b89\u88c5\uff1a<\/p>\n
        \n
        yarn add @vuepress-reco\/vuepress-plugin-extract-code -D<\/pre>\n<\/div>\n
        \u4f7f\u7528\uff1a<\/p>\n
        <\/p>\n
        plugins: [<\/span>\n    '@vuepress-reco\/extract-code'<\/span>\n  ]<\/span><\/pre>\n<\/div>\n
        \u6548\u679c\u622a\u56fe\uff1a<\/p>\n
        \"5.gif\"<\/a><\/p>\n
        \u5f53\u4f60\u9700\u8981\u4f7f\u7528\u8fd9\u79cd\u65b9\u5f0f\u5c55\u793a\u4ee3\u7801\u7684\u65f6\u5019\uff0c\u4f60\u9700\u8981\u5728 md \u6587\u4ef6\u4e2d\u6dfb\u52a0\uff1a<\/p>\n
        <\/p>\n
        <<\/span>RecoDemo<\/span> :collapse<\/span>=<\/span>\"true\"<\/span>><\/span>\n  <<\/span>template<\/span> slot<\/span>=<\/span>\"code-bash\"<\/span>><\/span>\n    <<\/span><<<\/span> @\/<\/span>docs<\/span>\/<\/span>handbook<\/span>\/<\/span>demo<\/span>\/<\/span>index<\/span>.<\/span>sh<\/span><\/span>\n  <<\/span>\/<\/span>template<\/span>><\/span>\n  <<\/span>template<\/span> slot<\/span>=<\/span>\"code-js\"<\/span>><\/span>\n    <<\/span><<<\/span> @\/<\/span>docs<\/span>\/<\/span>handbook<\/span>\/<\/span>demo<\/span>\/<\/span>index<\/span>.<\/span>js<\/span><\/span>\n  <<\/span>\/<\/span>template<\/span>><\/span>\n  <<\/span>img<\/span> src<\/span>=<\/span>\".\/demo\/index.gif\"<\/span> slot<\/span>=<\/span>\"demo\"<\/span> \/<\/span>><\/span>\n<<\/span>\/<\/span>RecoDemo<\/span>><\/span><\/pre>\n<\/div>\n
        \u5176\u4e2d\u7684@<\/code>\u8868\u793a\u5f53\u524d\u9879\u76ee\u76ee\u5f55\u7684\u522b\u540d\uff0c\u5373\u6e90\u7801\u7684\u6839\u76ee\u5f55\uff0c\u800c\u975edocs<\/code>\u6216\u8005 .vuepress<\/code><\/p>\n
        \u66f4\u591a\u63d2\u4ef6\u5bfb\u627e<\/h2>\n
          \n
        1. https:\/\/github.com\/vuepress\/awesome-vuepress<\/a><\/li>\n
        2. https:\/\/vuepress-community.netlify.app\/zh\/<\/a><\/li>\n
        3. https:\/\/vuepress-theme-reco.recoluan.com\/views\/plugins\/<\/a><\/li>\n
        4. https:\/\/v1.vuepress.vuejs.org\/zh\/plugin\/official\/plugin-active-header-links.html<\/a><\/li>\n
        5. npm \u641c vuepress-plugin \u5173\u952e\u5b57<\/li>\n
        6. github \u641c vuepress-plugin \u5173\u952e\u5b57<\/li>\n<\/ol>\n
          \u7cfb\u5217\u6587\u7ae0<\/h2>\n
          \u535a\u5ba2\u642d\u5efa\u7cfb\u5217\uff0c\u8bb2\u89e3\u5982\u4f55\u4f7f\u7528 VuePress \u642d\u5efa\u3001\u4f18\u5316\u535a\u5ba2\uff0c\u5e76\u90e8\u7f72\u5230 GitHub\u3001Gitee\u3001\u79c1\u6709\u670d\u52a1\u5668\u7b49\u5e73\u53f0\u3002\u7cfb\u5217\u9884\u8ba1 20 \u7bc7\u5de6\u53f3\uff0c\u672c\u7bc7\u4e3a\u7b2c 21 \u7bc7\uff0c\u5168\u7cfb\u5217\u6587\u7ae0\u5730\u5740\uff1ahttps:\/\/github.com\/mqyqingfeng\/Blog<\/a><\/p>\n
          \u5fae\u4fe1\uff1a\u300cmqyqingfeng\u300d\uff0c\u52a0\u51b4\u7fbd\u597d\u53cb\uff0c\u8fdb\u4e00\u4e2a\u795e\u5947\u7684\u524d\u7aef\u5b66\u4e60\u4ea4\u6d41\u7fa4\u3002<\/p>\n<\/td>\n
          \u6587\u7ae0\u8f6c\u8f7d\u81eahttps:\/\/github.com\/mqyqingfeng\/Blog\/issues\/261<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
          \u524d\u8a00 \u5728 \u300a\u4e00\u7bc7\u5e26\u4f60\u7528 VuePress + Github Pages \u642d\u5efa\u535a\u5ba2\u300b\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528 VuePress \u642d\u5efa\u4e86\u4e00\u4e2a\u535a\u5ba2\uff0c\u6700\u7ec8\u7684\u6548\u679c\u67e5\u770b\uff1aTypeScr…<\/p>\n
           Read More  Read More<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1401","post","type-post","status-publish","format-standard","hentry","category-learn"],"_links":{"self":[{"href":"https:\/\/www.lccc.top\/index.php?rest_route=\/wp\/v2\/posts\/1401"}],"collection":[{"href":"https:\/\/www.lccc.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lccc.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lccc.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lccc.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1401"}],"version-history":[{"count":1,"href":"https:\/\/www.lccc.top\/index.php?rest_route=\/wp\/v2\/posts\/1401\/revisions"}],"predecessor-version":[{"id":2393,"href":"https:\/\/www.lccc.top\/index.php?rest_route=\/wp\/v2\/posts\/1401\/revisions\/2393"}],"wp:attachment":[{"href":"https:\/\/www.lccc.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lccc.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lccc.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}