本站管理

# 本站管理

📰

评论管理

🔨

图床管理

💻

百度统计

✍🏻

发布文章

- name: 📰
  desc: 评论管理
  link: https://console.leancloud.cn/apps/kSuYQbsktbororUwyB5jrkWR-gzGzoHsz/storage/data/Comment
  bgColor: 'pink' 
  textColor: '#6854A1'
- name: 🔨
  desc: 图床管理
  link: https://picx.xpoet.cn/#/management
  bgColor: '#718971'
  textColor: '#fff'
- name: 💻
  desc: 百度统计
  link: https://tongji.baidu.com/web/10000436108/homepage/index
  bgColor: 'skyblue'
  textColor: '#333'
- name: ✍🏻
  desc: 发布文章
  link: https://github.com/foreverRuns/vuepress-vdoing-blog/tree/main/docs
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
# - name: 👀
#   desc: 阅读文章
#   link: https://runs11.gitee.io/blog/categories/
#   bgColor: 'pink'
#   textColor: '#A05F2C'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 评论管理

本站目前使用的是 Valine (opens new window) 评论系统，基于 LeanCloud (opens new window) 实现的。

评论就存储在 LeanCloud (opens new window) 应用的 数据存储/结构化数据/Comment 中：

lc2

点击去管理 (opens new window)

# 图床搭建

# 前言

写博客文章时，图片的上传和存放是一个问题，如果把图片放到和博客同一个仓库当中，使用相对路径来引用，这样后期维护起来会比较麻烦。比如在不同的平台发布同一篇文章，这样一来每个平台都要上传图片。

为了解决这些问题，比较推荐的做法是把图片统一上传到一个在线的第三方静态资源库中，我们把这个资源库称为图床，其返回一个图片的 URL。文章中通过引用图片的 url 方式，一次编写，到处使用。

特意花钱租云服务器托管图片，太贵划不来，而且上传配置好繁琐。推荐使用 GitHub (opens new window) 作为图床，特点是免费、稳定，缺点是国内访问速度慢，不过没关系，可以使用 jsDeliv r免费 CDN 加速。

jsDelivr (opens new window) 是国外的一家优秀的公共 CDN 服务提供商，该平台是首个「打通中国大陆与海外的免费CDN服务」，无须担心中国防火墙问题而影响使用。

# 搭建

本站使用 PicX (opens new window) 来搭建图床，是一款基于 GitHub API & jsDelivr 开发的具有 CDN 加速功能的图床工具。无需下载！无需安装！打开网站即用！免费！极速！稳定！

创建一个用来存储图片的 GitHub 仓库，仓库属性必须选 Public，点击这里去创建 (opens new window)。
创建一个有 repo 权限的 GitHub Token，点击这里去创建 (opens new window)。
进入 PicX 图床配置 (opens new window)，填写申请的 GitHub Token 以及选择存放图片的仓库

picx

提示

新建目录：需手动输入一个新目录。
根目录：图片将直接存储在仓库根目录下。
自动目录：自动生成日期格式 YYYYMMDD 的目录。例如：20200909
选择仓库目录：自动获取仓库下所有目录，选择一个即可。

进入 PicX 设置 (opens new window)，根据自己要求进行设置
进入 PicX 上传图片 (opens new window)，直接 拖拽图片 到上传区域就可以上传图片到仓库
图片上传成功后，就可以选择 GitHub 图片外链 或者 CDN 图片外链 格式，还可以直接生成对应的 Markdown 格式

点击去管理 (opens new window)

# 百度统计

安装 vuepress-plugin-baidu-tongji 插件：

yarn add -D vuepress-plugin-baidu-tongji

docs/.vuepress/config/plugins.js 下配置插件：

module.exports = [
  ...,
  [
    'vuepress-plugin-baidu-tongji',
    {
      hm: 'bf6cfed288efb307d9ceb444ec379bf3', // 百度统计上获取
    },
  ],
]

1
2
3
4
5
6
7
8
9

前往百度统计 (opens new window)，添加网站，然后在 管理/网站列表/ 下对应的选项 获取代码，拿到 code 填到上面配置中

点击去管理 (opens new window)

# 发布文章

首先是创建 .md 文件，如果在 结构化目录 下则需要添加相应的序号，在 碎片化博文目录_posts 下不需要添加序号，文件名填写文章的标题。
文件头部的 front matter，在运行开发服务 yarn dev 或打包 yarn build 时将自动为你生成这些数据，你也可以自己手动设置这些数据，当你手动设置之后，相应的数据就不会再自动生成。

---
title: 文章标题
date: 2022-02-27 16:18:27
permalink: /pages/7d0e93/
categories: 
  - 分类1
tags: 
  - 标签1
  - 标签2
---

1
2
3
4
5
6
7
8
9
10

根据需求手动指定文章的分类、标签

关于一级标题，即 markdown 中的一级标题(# 标题)，你可以写也可以不写，在页面中实际显示的文章标题是取自 front matter 中的 title，然后把一级标题隐藏了。
关于文章摘要，你想在首先文章列表中显示摘要时可以在合适的位置添加一个  注释，注释前面的内容将会暴露在摘要中。如本站在 分类 列表显示的摘要：

zhaiyao1

最后，就可以正式开始写作啦。

# 在线编辑和新增文章

每篇文章页面左下角都会有一个 编辑此页 按钮，点击即可跳到 Github 在线编辑，编辑完成后提交就会自动触发 GitHub Actions 自动部署。
在 Github 博客源码仓库相应的文章目录下，新建 .md 文件，编辑好文章并提交后会触发 GitHub Actions 自动部署。

提示：当使用过在线编辑或新增文章后，下次在本地编辑之前先 pull 拉取代码。

# 禁用相关功能

通过在头部的 front matter 设置相应字段，可禁用相关功能，默认都是开启的。

禁用侧边栏

---
sidebar: false
---

1
2
3

禁用评论

---
comment: false
---

1
2
3

禁用在线编辑

---
editLink: false
---

1
2
3

# 写作技巧

本站使用 Markdown 格式来编写文章，不了解 Markdown 先看一下本站的 Markdown入门教程。

VuePress 官网：

Vdoing 官网：

# 信息框容器

输入：

::: tip
这是一个提示
:::

::: warning
这是一个警告
:::

::: danger
这是一个危险警告
:::

::: note
这是一条笔记，在 `"v1.5.0 +` 版本才支持
:::

::: details
这是一个详情块，在 IE / Edge 中不生效
:::

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

输出：

提示

这是一个提示

注意

这是一个警告

警告

这是一个危险警告

笔记

这是一条笔记，在 v1.5.0 + 版本才支持

点击查看

这是一个详情块，在 IE / Edge 中不生效

标题可以自定义，直接在后面加上即可。

::: danger STOP
危险区域，禁止通行
:::

1
2
3

STOP

危险区域，禁止通行

# 布局容器

v1.3.3 + 版本才支持

输入：

::: center
#### 居中的标题
![居中的图片](https://gitee.com/static/images/logo-black.svg?t=158106664)
:::

::: right
右浮动的内容
:::

::: theorem 能量守恒定律
能量既不会凭空产生，也不会凭空消失，它只会从一种形式转化为另一种形式，或者从一个物体转移到其它物体，而能量的总量保持不变。
::: right
来自 [百度百科](https://baike.baidu.com/item/%E8%83%BD%E9%87%8F%E5%AE%88%E6%81%92%E5%AE%9A%E5%BE%8B/339215)
:::

1
2
3
4
5
6
7
8
9
10
11
12
13
14

输出：

# 居中的标题

右浮动的内容

能量守恒定律

能量既不会凭空产生，也不会凭空消失，它只会从一种形式转化为另一种形式，或者从一个物体转移到其它物体，而能量的总量保持不变。

来自百度百科 (opens new window)

完整是这样

:::: theorem 能量守恒定律
能量既不会凭空产生，也不会凭空消失，它只会从一种形式转化为另一种形式，或者从一个物体转移到其它物体，而能量的总量保持不变。
::: right
来自 [百度百科](https://baike.baidu.com/item/%E8%83%BD%E9%87%8F%E5%AE%88%E6%81%92%E5%AE%9A%E5%BE%8B/339215)
:::
::::

1
2
3
4
5
6

# 普通卡片列表容器

普通卡片列表容器，可用于友情链接、项目推荐、诗词展示等。

语法

::: cardList <每行显示数量>
```yaml
- name: 名称
  desc: 描述
  avatar: https://xxx.jpg # 头像，可选
  link: https://xxx/ # 链接，可选
  target: _self # 链接的打开方式，默认_blank 新窗口打开
  bgColor: '#CBEAFA' # 背景色，可选，默认var(--bodyBg)。颜色值有#号时请添加引号
  textColor: '#6854A1' # 文本色，可选，默认var(--textColor)
```
:::

1
2
3
4
5
6
7
8
9
10
11

输入：

::: cardList 2 
```yaml
- name: Evan's blog # 昵称
  desc: 积跬步以至千里，喜欢学习喜欢你。 # 介绍
  avatar: https://cdn.staticaly.com/gh/xugaoyi/image_store/blog/20200103123203.jpg # 头像
  link: https://xugaoyi.com/  # 链接

- name: 樱花动漫
  desc: 免费分享，支持正版。
  avatar: https://api.yimian.xyz/img?type=head
  link: https://www.yhdmp.net/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
```
:::

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

输出：

Evan's blog

积跬步以至千里，喜欢学习喜欢你。

樱花动漫

免费分享，支持正版。

- name: Evan's blog # 昵称
  desc: 积跬步以至千里，喜欢学习喜欢你。 # 介绍
  avatar: https://cdn.staticaly.com/gh/xugaoyi/image_store/blog/20200103123203.jpg # 头像
  link: https://xugaoyi.com/  # 链接

- name: 樱花动漫
  desc: 免费分享，支持正版。
  avatar: https://api.yimian.xyz/img?type=head # 可选
  link: https://www.yhdmp.net/ # 可选
  bgColor: '#FCDBA0' # 可选，默认 var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#A05F2C' # 可选，默认 var(--textColor)

1
2
3
4
5
6
7
8
9
10
11

# 图文卡片列表容器

图文卡片列表容器，可用于项目展示、产品展示等。

语法

::: cardImgList <每行显示数量>
```yaml
- img: https://xxx.jpg # 图片地址
  imgHeight: 20px # 图片高度，默认 auto
  objectFit: fill # 图片的填充方式，默认 cover  (填充，会裁剪)
  link: https://xxx.com # 链接地址
  name: 标题
  desc: 描述 # 可选
  author: 作者名称 # 可选
  avatar: https://xxx.jpg # 作者头像，可选
```
:::

1
2
3
4
5
6
7
8
9
10
11
12

输入：

::: cardImgList
```yaml
- img: https://cdn.staticaly.com/gh/xugaoyi/image_store/blog/20200530100256.jpg
  link: https://runss.top/
  name: 拼搏
  desc: 战胜敌人一万次，不如战胜自己一次。
  author: RunSS11
  avatar: https://himg.bdimg.com/sys/portrait/item/public.1.35a71237.Sb6VXHfMGY8yEnCqC9iMhA.jpg
```
:::

1
2
3
4
5
6
7
8
9
10

输出：

拼搏

战胜敌人一万次，不如战胜自己一次

RunSS11

- img: https://cdn.staticaly.com/gh/xugaoyi/image_store/blog/20200530100256.jpg
  link: https://runss.top/
  name: 拼搏
  desc: 战胜敌人一万次，不如战胜自己一次
  author: RunSS11
  avatar: https://himg.bdimg.com/sys/portrait/item/public.1.35a71237.Sb6VXHfMGY8yEnCqC9iMhA.jpg

1
2
3
4
5
6

# Vue 组件

所有在 .vuepress/components 中找到的 *.vue 文件将会自动地被注册为全局的异步组件，你可以直接使用这些组件在任意的 Markdown 文件中（组件名是通过文件名取到的）。

你可以自定义组件，也可以直接使用主题的内置组件。

# 标记组件

Props:
- test -string
- type -string，可选值："tip"|"warning"|"error"；默认值："tip"
- vertical -string，可选值："top"|"middle"，默认值是："top"
Usage:
- VuePress v1.9.7+
- Badge 默认主题

VuePress <Badge text="v1.9.7+"/>  
Badge <Badge text="默认主题" type="warning"/>

1
2

# 代码块选项卡组件

在 <code-group> 中嵌套 <code-block> 来配合使用。

Props:
- title -string，指定 tab 标题
- active -boolean，指定当前激活的 tab
Usage:

yarn add vuepress-theme-vdoing -D

npm install vuepress-theme-vdoing -D

// Make sure to add code blocks to your code group

<code-group>
  <code-block title="YARN" active>
  ```bash
  yarn add vuepress-theme-vdoing -D
  ```
  </code-block>

  <code-block title="NPM">
  ```bash
  npm install vuepress-theme-vdoing -D
  ```
  </code-block>
</code-group>

1
2
3
4
5
6
7
8
9
10
11
12
13

# Vue 模板语法

输入：

{{ $page.title }}  

26 + 43 = {{ 26 + 43 }} 

<span v-for="i in 3"> {{ i }} </span>

<div class="view">
    <iframe src="https://vuepress.vuejs.org/zh/" frameborder="0"></iframe>
</div>

<style>
  .view {
      height: 70vh;
      margin: 10px auto;
      box-shadow: darkgrey 10px 10px 30px 5px;
  }
  iframe {
      width: 100%;
      height: 100%;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

输出：

本站管理

26 + 43 = 69

1 2 3

# 显示 Vue 语法

默认情况下，块级 (block) 的代码块将会被自动包裹在 v-pre 中。如果你想要在内联 (inline) 的代码块或者普通文本中显示原始的大括号，或者一些 Vue 特定的语法，你需要使用自定义容器 v-pre 来包裹：

输入：

::: v-pre
`{{ This will be displayed as-is }}`
:::

1
2
3

输出：

{{ This will be displayed as-is }}

# 代码块行高亮

使用 {} 包裹要高亮的行号，连续行中间用 - 连接，不连续的中间用 , 分隔，, 后面不可以加空格。

输入：

```js {1-2,4}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```

1
2
3
4
5
6
7
8
9

输出：

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

1
2
3
4
5
6
7

# 文本高亮

使用 <mark> </mark> 标签包裹让文本高亮

我是 <mark>**高亮并且加粗**</mark> 的文本

我是 高亮并且加粗 的文本

# 表格

GitHub 风格的表格

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

1
2
3
4
5

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

# Emoji

Emoji表情英文名的前后加上冒号 :

:smirk:
:kiss:
:smile_cat::sunny:

1
2
3

😏 💋 😸☀️

表情包查询 (opens new window)

# 徽章

前往本站 Markdown入门教程 高级篇 (opens new window) 查看

# 嵌入外部网页

通过 <iframe> 标签可以嵌入其他任何外部网页，如在线流程图思维导图、视频、地图等。

ProcessOn (opens new window) 在线流程图思维导图：

<div class="view1">
  <iframe src="https://www.processon.com/view/link/621edca7e401fd5a68a9bc8f" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
</div>

<style>
  .view1 {
    width: 100%;
    height: 650px;
    /* margin: 10px auto; */
    /* border:1px solid #AAA; */
    box-shadow: darkgrey 10px 10px 30px 5px;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13

输出：

# 批量操作 Front Matter

本站提供了批量操作 front matter 的工具，可对 front matter 字段进行添加、修改、删除。

在 utils/config.yml 配置要批量操作的文件夹和要编辑的字段，示例：

# utils/config.yml
# 批量添加和修改、删除 front matter 配置文件

# 需要批量处理的路径，docs/文件夹/<文件夹>。(数组。映射路径：docs/arr[1]/arr[2] ... )
path:
  - docs # 第一个成员必须是docs
  - 02.专栏
  - 01.Markdown入门教程

# 要删除的字段 (数组)
delete:  
  - article

 # 要添加、修改 front matter 的数据 （front matter 中没有的数据则添加，已有的数据则覆盖）
data:
  sidebar: false
  author:
    name: Runs
    link: https://github.com/foreverRuns

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

操作的文件夹路径是 docs/02.专栏/01.Markdown入门教程
删除字段 article
添加作者信息 author 字段数据和隐藏侧边栏 sidebar 字段

path 数组的第一个成员必须是 docs，如果你想操作 docs 下除了首页之外所有的 .md 文件，只需保留第一个成员 docs 即可。

执行 yarn efm 命令，为了防止误操作，会有一个询问过程。

yarn efm
# 会有如下提示，输入 Y 执行操作
$ node utils/editFrontmatter.js
? 批量操作frontmatter有修改数据的风险，确定要继续吗？(Y/n)

1
2
3
4

编辑此页

#本站 #VuePress

上次更新: 2023/02/02, 14:58:40

← 本站部署 webAuthn→