From d8815dcf30bf8225e59460723f732fb67f68345a Mon Sep 17 00:00:00 2001 From: Nofated095 Date: Mon, 30 May 2022 11:37:31 +0800 Subject: [PATCH] Update Friends.md --- source/_posts/Build-Vuepress.md | 72 +++++++++++++++++++-------------- source/friends.md | 63 +++++++++++++++++++++-------- 2 files changed, 88 insertions(+), 47 deletions(-) diff --git a/source/_posts/Build-Vuepress.md b/source/_posts/Build-Vuepress.md index 7a11282..da7d5d1 100644 --- a/source/_posts/Build-Vuepress.md +++ b/source/_posts/Build-Vuepress.md @@ -1,24 +1,34 @@ --- -title: 构建 Vuepress 2.0.0 并部署到 Vercel -date: 2022-01-31 10:00:00 +title: 构建 VuePress 2.0.0 并部署到 Vercel +date: 2022-01-31 cover: https://pic.rmb.bdstatic.com/bjh/0bcca2ae4fb6934fb9390def048d4740.png tags: -- Vuepress +- VuePress - Vercel categories: - 写BUG日常 - 野生技术协会 --- -帮助每一个懒得跑 vuepress build docs 的人。 +云端跑构建，改完就跑路（ -前段时间[主页](https://www.nofated.win)的 [REMS 的官网](https://rems.vercel.app)换到了基于 Vuepress 的页面，并且挂载到了 Vercel 部署，调教好了后终于可以在云端编辑并自动部署，再也不用费劲跑 build 再 deploy 啦！ +## 使用 vuepress-examples 来构建（推荐） -## 构建 Vuepress +得益于 Vercel，你只需要点点按钮，就可以直接构建出来一个带有基础功能的 VuePress 文档。 + +首先找到 [vuepress-examples](https://github.com/Nofated095/vuepress-examples)，拉到最后，你可以根据需要来选择构建方式，以及主题。 + +分为三个选项，保留 `docs` 目录的传统主题、 `theme-hope` 主题和无 `docs` 目录的选项，点击对应的按钮即可直接跳转到 Vercel 并构建。再根据后面的图片修改构建方式即可。 + +真的非常简单也非常方便，但是再 `config.ts` 提供的自定义参数并不多，你可以参考[文档](https://v2.vuepress.vuejs.org/zh/guide/getting-started.html)对构建出来的文档做更多的自定义优化。 + +这里是一个 [demo](https://vuepress-examples.9595095.xyz/)。 + +## 使用传统方式构建 VuePress ### 构建 package.json -有两种办法，一种比较方便的是按照官网跑一遍指令，再稍加修改，这种方法全程可以根据[文档](https://v2.vuepress.vuejs.org/zh/guide/getting-started.html)来安装 Vuepress。 +有两种办法，一种比较方便的是按照官网跑一遍指令，再稍加修改，这种方法全程可以根据[文档](https://v2.vuepress.vuejs.org/zh/guide/getting-started.html)来安装 VuePress。 当然第二种方法就是手搓。这里将详细介绍（ @@ -26,32 +36,32 @@ categories: ``` json package.json { - "name": "vuepress_example", + "name": "VuePress_example", "version": "1.0.0", - "description": "An example of Vuepress", + "description": "An example of VuePress", "main": "index.ts", "scripts": { - "docs:dev": "vuepress dev docs", - "docs:build": "vuepress build docs" + "docs:dev": "VuePress dev docs", + "docs:build": "VuePress build docs" }, "keywords": [], "author": "Your Name Here", "license": "CC BY-NC-SA 4.0", "devDependencies": { - "vuepress": "^2.0.0-beta.35" + "VuePress": "^2.0.0-beta.35" } } ``` -这里面只安装了 Vuepress 的 2.0.0 版本，没有任何额外的插件和主题。 +这里面只安装了 VuePress 的 2.0.0 版本，没有任何额外的插件和主题。 -### 构建 Vuepress 目录 +### 构建 VuePress 目录 最基本的网站肯定不够我们玩，所以下面我们可以来自定义。请按照下图构建目录和文件。 ``` ├─ docs -│ ├─ .vuepress +│ ├─ .VuePress │ │ └─ config.ts │ └─ README.md ├─ .gitignore @@ -60,11 +70,11 @@ categories: ### 自定义文档 -编辑 `/docs/.vuepress/config.ts` +编辑 `/docs/.VuePress/config.ts` -``` typescript /docs/.vuepress/config.ts -import { defineUserConfig } from 'vuepress' -import type { DefaultThemeOptions } from 'vuepress' +``` typescript /docs/.VuePress/config.ts +import { defineUserConfig } from 'VuePress' +import type { DefaultThemeOptions } from 'VuePress' export default defineUserConfig({ // 站点配置 @@ -73,7 +83,7 @@ export default defineUserConfig({ description: 'Just playing around', // 主题和它的配置 - theme: '@vuepress/theme-default', + theme: '@VuePress/theme-default', themeConfig: { logo: 'https://vuejs.org/images/logo.png', }, @@ -82,9 +92,9 @@ export default defineUserConfig({ 当然你也可以使用 JavaScript，但是按官网说法，TypeScript 可以让 VuePress 配置得到更好的类型提示。 -如上是一个比较基本的自定义配置，确实很基础，你可以在[官方文档](https://v2.vuepress.vuejs.org/zh/reference/default-theme/config.html)查看更多。 +如上是一个比较基本的自定义配置，确实很基础，你可以在[官方文档](https://v2.VuePress.vuejs.org/zh/reference/default-theme/config.html)查看更多。 -### 一些 Vuepress 实例 +### 一些 VuePress 实例 [Nofated095/docs](https://github.com/Nofated095/docs) @@ -92,7 +102,7 @@ export default defineUserConfig({ ``` ├─ docs -│ ├─ .vuepress +│ ├─ .VuePress │ │ └─ config.ts │ ├─ category │ │ └─ README.md @@ -103,20 +113,20 @@ export default defineUserConfig({ └─ package.json ``` -就可以像这样编辑 `/docs/.vuepress/config.ts` 加上 Navbar 和 Side +就可以像这样编辑 `/docs/.VuePress/config.ts` 加上 Navbar 和 Side -``` typescript /docs/.vuepress/config.ts -import { defineUserConfig } from ’vuepress‘ -import type { DefaultThemeOptions } from ’vuepress‘ +``` typescript /docs/.VuePress/config.ts +import { defineUserConfig } from ’VuePress‘ +import type { DefaultThemeOptions } from ’VuePress‘ export default defineUserConfig({ // 站点配置 lang: ’zh-CN‘, - title: ’A Vuepress Example‘, + title: ’A VuePress Example‘, description: ’The Description‘, // 主题和它的配置 - theme: ’@vuepress/theme-default‘, + theme: ’@VuePress/theme-default‘, themeConfig: { logo: ’https://pic.rmb.bdstatic.com/bjh/2d44fc3e673283cbbd6f8f97974c0340.png‘, head: [ @@ -146,11 +156,11 @@ export default defineUserConfig({ }) ``` -更多配置详情还请参考 [Vuepress 官方文档](https://v2.vuepress.vuejs.org/zh/guide/configuration.html)，文章里说的仅仅是 Vuepress 中极小的一部分。 +更多配置详情还请参考 [VuePress 官方文档](https://v2.VuePress.vuejs.org/zh/guide/configuration.html)，文章里说的仅仅是 VuePress 中极小的一部分。 ## 部署到 Vercel -[登录 Vercel](https://vercel.com/dashboard)，并把你上一步构建好的 Vuepress 上传到 Github 仓库中（如果一开始就在仓库中编辑则无需此操作） +[登录 Vercel](https://vercel.com/dashboard)，并把你上一步构建好的 VuePress 上传到 Github 仓库中（如果一开始就在仓库中编辑则无需此操作） [新建 Vercel 项目](https://vercel.com/new)，Import 你刚刚的仓库，但在 「Configure Project」 中要修改 「Build and Output Settings」。 diff --git a/source/friends.md b/source/friends.md index 4f663e7..b2d39a4 100644 --- a/source/friends.md +++ b/source/friends.md @@ -26,7 +26,8 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg