Nofated095
/
blog
mirror of https://github.com/Nofated095/blog
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update Friends.md

This commit is contained in:
Nofated095 2022-05-30 11:37:31 +08:00
parent e011ece12a
commit d8815dcf30
2 changed files with 88 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
source/_posts/Build-Vuepress.md
View File

@ -1,24 +1,34 @@
--- ---
title: 构建 Vuepress 2.0.0 并部署到 Vercel title: 构建 VuePress 2.0.0 并部署到 Vercel
date: 2022-01-31 10:00:00 date: 2022-01-31
cover: https://pic.rmb.bdstatic.com/bjh/0bcca2ae4fb6934fb9390def048d4740.png cover: https://pic.rmb.bdstatic.com/bjh/0bcca2ae4fb6934fb9390def048d4740.png
tags: tags:
- Vuepress - VuePress
- Vercel - Vercel
categories: categories:
- 写BUG日常 - 写BUG日常
- 野生技术协会 - 野生技术协会
--- ---
帮助每一个懒得跑 vuepress build docs 的人。 云端跑构建，改完就跑路（
<!--more--> <!--more-->
前段时间[主页](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 ### 构建 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 ``` json package.json
{ {
"name": "vuepress_example", "name": "VuePress_example",
"version": "1.0.0", "version": "1.0.0",
"description": "An example of Vuepress", "description": "An example of VuePress",
"main": "index.ts", "main": "index.ts",
"scripts": { "scripts": {
"docs:dev": "vuepress dev docs", "docs:dev": "VuePress dev docs",
"docs:build": "vuepress build docs" "docs:build": "VuePress build docs"
}, },
"keywords": [], "keywords": [],
"author": "Your Name Here", "author": "Your Name Here",
"license": "CC BY-NC-SA 4.0", "license": "CC BY-NC-SA 4.0",
"devDependencies": { "devDependencies": {
"vuepress": "^2.0.0-beta.35" "VuePress": "^2.0.0-beta.35"
} }
} }
``` ```
这里面只安装了 Vuepress 的 2.0.0 版本，没有任何额外的插件和主题。 这里面只安装了 VuePress 的 2.0.0 版本，没有任何额外的插件和主题。
### 构建 Vuepress 目录 ### 构建 VuePress 目录
最基本的网站肯定不够我们玩，所以下面我们可以来自定义。请按照下图构建目录和文件。 最基本的网站肯定不够我们玩，所以下面我们可以来自定义。请按照下图构建目录和文件。
``` ```
├─ docs ├─ docs
│ ├─ .vuepress │ ├─ .VuePress
│ │ └─ config.ts │ │ └─ config.ts
│ └─ README.md │ └─ README.md
├─ .gitignore ├─ .gitignore
@ -60,11 +70,11 @@ categories:
### 自定义文档 ### 自定义文档
编辑 `/docs/.vuepress/config.ts` 编辑 `/docs/.VuePress/config.ts`
``` typescript /docs/.vuepress/config.ts ``` typescript /docs/.VuePress/config.ts
import { defineUserConfig } from 'vuepress' import { defineUserConfig } from 'VuePress'
import type { DefaultThemeOptions } from 'vuepress' import type { DefaultThemeOptions } from 'VuePress'
export default defineUserConfig<DefaultThemeOptions>({ export default defineUserConfig<DefaultThemeOptions>({
// 站点配置 // 站点配置
@ -73,7 +83,7 @@ export default defineUserConfig<DefaultThemeOptions>({
description: 'Just playing around', description: 'Just playing around',
// 主题和它的配置 // 主题和它的配置
theme: '@vuepress/theme-default', theme: '@VuePress/theme-default',
themeConfig: { themeConfig: {
logo: 'https://vuejs.org/images/logo.png', logo: 'https://vuejs.org/images/logo.png',
}, },
@ -82,9 +92,9 @@ export default defineUserConfig<DefaultThemeOptions>({
当然你也可以使用 JavaScript，但是按官网说法，TypeScript 可以让 VuePress 配置得到更好的类型提示。 当然你也可以使用 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) [Nofated095/docs](https://github.com/Nofated095/docs)
@ -92,7 +102,7 @@ export default defineUserConfig<DefaultThemeOptions>({
``` ```
├─ docs ├─ docs
│ ├─ .vuepress │ ├─ .VuePress
│ │ └─ config.ts │ │ └─ config.ts
│ ├─ category │ ├─ category
│ │ └─ README.md │ │ └─ README.md
@ -103,20 +113,20 @@ export default defineUserConfig<DefaultThemeOptions>({
└─ package.json └─ package.json
``` ```
就可以像这样编辑 `/docs/.vuepress/config.ts` 加上 Navbar 和 Side 就可以像这样编辑 `/docs/.VuePress/config.ts` 加上 Navbar 和 Side
``` typescript /docs/.vuepress/config.ts ``` typescript /docs/.VuePress/config.ts
import { defineUserConfig } from ’vuepress‘ import { defineUserConfig } from ’VuePress‘
import type { DefaultThemeOptions } from ’vuepress‘ import type { DefaultThemeOptions } from ’VuePress‘
export default defineUserConfig<DefaultThemeOptions>({ export default defineUserConfig<DefaultThemeOptions>({
// 站点配置 // 站点配置
lang: ’zh-CN‘, lang: ’zh-CN‘,
title: ’A Vuepress Example‘, title: ’A VuePress Example‘,
description: ’The Description‘, description: ’The Description‘,
// 主题和它的配置 // 主题和它的配置
theme: ’@vuepress/theme-default‘, theme: ’@VuePress/theme-default‘,
themeConfig: { themeConfig: {
logo: ’https://pic.rmb.bdstatic.com/bjh/2d44fc3e673283cbbd6f8f97974c0340.png‘, logo: ’https://pic.rmb.bdstatic.com/bjh/2d44fc3e673283cbbd6f8f97974c0340.png‘,
head: [ head: [
@ -146,11 +156,11 @@ export default defineUserConfig<DefaultThemeOptions>({
}) })
``` ```
更多配置详情还请参考 [Vuepress 官方文档](https://v2.vuepress.vuejs.org/zh/guide/configuration.html)，文章里说的仅仅是 Vuepress 中极小的一部分。 更多配置详情还请参考 [VuePress 官方文档](https://v2.VuePress.vuejs.org/zh/guide/configuration.html)，文章里说的仅仅是 VuePress 中极小的一部分。
## 部署到 Vercel ## 部署到 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」。 [新建 Vercel 项目](https://vercel.com/new)，Import 你刚刚的仓库，但在 「Configure Project」 中要修改 「Build and Output Settings」。

63
source/friends.md
View File

@ -26,7 +26,8 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
<script src="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"></script--> <script src="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"></script-->
<div class="columns is-multiline"> <div class="columns is-multiline">
<div class="card column is-half"> <div class="column is-half">
<div class="card">
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
@ -45,7 +46,9 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
<a href="https://xiaojin233.cn" class="card-footer-item">Home Page</a> <a href="https://xiaojin233.cn" class="card-footer-item">Home Page</a>
</footer> </footer>
</div> </div>
<div class="card column is-half"> </div>
<div class="column is-half">
<div class="card">
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
@ -64,7 +67,9 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
<a href="https://blog.restent.win/" class="card-footer-item">Blog</a> <a href="https://blog.restent.win/" class="card-footer-item">Blog</a>
</footer> </footer>
</div> </div>
<div class="card column is-half"> </div>
<div class="column is-half">
<div class="card">
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
@ -83,7 +88,9 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
<a href="https://www.cubik65536.top" class="card-footer-item">Home Page</a> <a href="https://www.cubik65536.top" class="card-footer-item">Home Page</a>
</footer> </footer>
</div> </div>
<div class="card column is-half"> </div>
<div class="column is-half">
<div class="card">
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
@ -102,7 +109,9 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
<a href="https://mashirl.com/" class="card-footer-item">Blog</a> <a href="https://mashirl.com/" class="card-footer-item">Blog</a>
</footer> </footer>
</div> </div>
<div class="card column is-half"> </div>
<div class="column is-half">
<div class="card">
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
@ -121,7 +130,9 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
<a href="https://bigcake.cakemc.top" class="card-footer-item">Blog</a> <a href="https://bigcake.cakemc.top" class="card-footer-item">Blog</a>
</footer> </footer>
</div> </div>
<div class="card column is-half"> </div>
<div class="column is-half">
<div class="card">
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
@ -140,7 +151,9 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
<a href="https://blog.charlie.moe" class="card-footer-item">Blog</a> <a href="https://blog.charlie.moe" class="card-footer-item">Blog</a>
</footer> </footer>
</div> </div>
<div class="card column is-half"> </div>
<div class="column is-half">
<div class="card">
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
@ -159,7 +172,9 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
<a href="https://blog.smallxu.com/" class="card-footer-item">Blog</a> <a href="https://blog.smallxu.com/" class="card-footer-item">Blog</a>
</footer> </footer>
</div> </div>
<div class="card column is-half"> </div>
<div class="column is-half">
<div class="card">
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
@ -178,7 +193,9 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
<a href="https://blog.skk.moe/" class="card-footer-item">Blog</a> <a href="https://blog.skk.moe/" class="card-footer-item">Blog</a>
</footer> </footer>
</div> </div>
<div class="card column is-half"> </div>
<div class="column is-half">
<div class="card">
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
@ -197,7 +214,9 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
<a href="https://blog.moeworld.tech/" class="card-footer-item">Blog</a> <a href="https://blog.moeworld.tech/" class="card-footer-item">Blog</a>
</footer> </footer>
</div> </div>
<div class="card column is-half"> </div>
<div class="column is-half">
<div class="card">
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
@ -216,7 +235,9 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
<a href="https://ivampiresp.com/" class="card-footer-item">Blog</a> <a href="https://ivampiresp.com/" class="card-footer-item">Blog</a>
</footer> </footer>
</div> </div>
<div class="card column is-half"> </div>
<div class="column is-half">
<div class="card">
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
@ -235,7 +256,9 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
<a href="https://www.littleqiu.net/" class="card-footer-item">Blog</a> <a href="https://www.littleqiu.net/" class="card-footer-item">Blog</a>
</footer> </footer>
</div> </div>
<div class="card column is-half"> </div>
<div class="column is-half">
<div class="card">
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
@ -254,7 +277,9 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
<a href="https://www.feizhuqwq.com/" class="card-footer-item">Home Page</a> <a href="https://www.feizhuqwq.com/" class="card-footer-item">Home Page</a>
</footer> </footer>
</div> </div>
<div class="card column is-half"> </div>
<div class="column is-half">
<div class="card">
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
@ -273,7 +298,9 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
<a href="https://blog.becomingcelia.com/" class="card-footer-item">Blog</a> <a href="https://blog.becomingcelia.com/" class="card-footer-item">Blog</a>
</footer> </footer>
</div> </div>
<div class="card column is-half"> </div>
<div class="column is-half">
<div class="card">
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
@ -292,7 +319,9 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
<a href="http://wc215.byethost10.com/" class="card-footer-item">Blog</a> <a href="http://wc215.byethost10.com/" class="card-footer-item">Blog</a>
</footer> </footer>
</div> </div>
<div class="card column is-half"> </div>
<div class="column is-half">
<div class="card">
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
@ -311,7 +340,9 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
<a href="https://shuiyunxc.github.io/" class="card-footer-item">Blog</a> <a href="https://shuiyunxc.github.io/" class="card-footer-item">Blog</a>
</footer> </footer>
</div> </div>
<div class="card column is-half"> </div>
<div class="column is-half">
<div class="card">
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">