Skip to content

Commit

Permalink
docs: update some of the advance files
Browse files Browse the repository at this point in the history
  • Loading branch information
Mister-Hope committed Feb 28, 2023
1 parent 05b1fc8 commit 75e585f
Show file tree
Hide file tree
Showing 11 changed files with 64 additions and 65 deletions.
13 changes: 7 additions & 6 deletions docs/feature/advance/backup.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,20 @@
title: 导入导出
---

::: info 备份与迁移
除了这种方式外,更推荐的无感迁移/备份方式请移步: [备份与迁移](/guide/backup.md)
::: tip 备份与迁移

除了这种方式外,更推荐的无感迁移/备份方式请移步: [备份与迁移](../../guide/backup.md)

:::

`vanBlog`支持数据的导入和导出。点击后台 `站点管理/系统设置/备份恢复`,点击按钮即可导入导出全部站点信息。
VanBlog 支持数据的导入和导出。点击后台 `站点管理/系统设置/备份恢复`,点击按钮即可导入导出全部站点信息。

需要注意的是,导入导出并不会实际导出图床中的图片本身,而是导入导出其图片记录以便检索。本地图床时可参考下面的导出全部图片进行导出备份。

![](https://www.mereith.com/static/img/917addce2307bc0e470883de035472f5.clipboard-2022-09-01.png)
![导入/导出](https://www.mereith.com/static/img/917addce2307bc0e470883de035472f5.clipboard-2022-09-01.png)

## 导出全部图片

`VanBlog` 支持导出全部`本地图床图片`为一个压缩包,你可以在后台中的图片设置中点击按钮来导出全部本地图床图片!(oss 图床暂不支持全部导出,因为已经在 oss 中了,完全可以通过 oss 控制台批量导出,而且备份意义不大)
VanBlog 支持导出全部 `本地图床图片` 为一个压缩包,你可以在后台中的图片设置中点击按钮来导出全部本地图床图片!(OSS 图床暂不支持全部导出,因为已经在 OSS 中了,完全可以通过 OSS 控制台批量导出,而且备份意义不大)

![](https://www.mereith.com/static/img/dd5f0f0a1ff61a1a5d22c09fcaa8178c.clipboard-2022-09-01.png)
![导出全部图片](https://www.mereith.com/static/img/dd5f0f0a1ff61a1a5d22c09fcaa8178c.clipboard-2022-09-01.png)
6 changes: 3 additions & 3 deletions docs/feature/advance/collaborator.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: 协作者

`vanBlog` 支持添加自定义权限的协作者用户。具体在 `站点管理/系统设置/用户设置` 中:

![](https://www.mereith.com/static/img/726f7b197b240a923b8473106d3d1200.clipboard-2022-09-03.png)
![用户设置](https://www.mereith.com/static/img/726f7b197b240a923b8473106d3d1200.clipboard-2022-09-03.png)

协作者账户默认**只具有以下权限**

Expand All @@ -23,11 +23,11 @@ title: 协作者
- 删除-图片
- 所有权限

![](https://www.mereith.com/static/img/73ef0844436b7eee71d41b4b0c2033d2.clipboard-2022-09-03.png)
![权限授予](https://www.mereith.com/static/img/73ef0844436b7eee71d41b4b0c2033d2.clipboard-2022-09-03.png)

除了拥有 `所有权限` 的协作者外,登录后都将看到精简的 UI:

![](https://www.mereith.com/static/img/bbb3252731394960a7b307248a28a107.clipboard-2022-09-03.png)
![协作模式](https://www.mereith.com/static/img/bbb3252731394960a7b307248a28a107.clipboard-2022-09-03.png)

### 作者问题

Expand Down
4 changes: 2 additions & 2 deletions docs/feature/advance/customNav.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
title: 自定义导航栏
---

`vanBlog` 支持自定义导航栏菜单(只支持添加新的菜单)。
VanBlog 支持自定义导航栏菜单(只支持添加新的菜单)。

在后台前往 `站点管理/数据管理/导航配置` 即可按需设置,目前最大只支持二级菜单。

![](https://www.mereith.com/static/img/2201020740e3de301b7e388fbaa84b78.clipboard-2022-09-10.png)
![导航配置](https://www.mereith.com/static/img/2201020740e3de301b7e388fbaa84b78.clipboard-2022-09-10.png)
38 changes: 18 additions & 20 deletions docs/feature/advance/customPage.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
title: 自定义页面
---

`VanBlog` 支持自定义页面,但首先请您明确自己的需求。
VanBlog 支持自定义页面,但首先请您明确自己的需求。

## 自定义带有默认布局的页面

如果要自定义带有布局的页面,通俗的理解就是替换掉文章页面中文章卡片的内容。您可以通过以下操作实现:

- 新建文章,在文章内可直接写 html 代码
- 设置文章为隐藏
- 在后台布局设置中开启`通过 URL 访问隐藏文章`
- 在后台布局设置中开启 `通过 URL 访问隐藏文章`
- 在后台自定义导航栏中添加这篇文章
- 或者在客制化中,嵌入自己的代码把这篇文章的 URL 嵌入到合适的位置

Expand All @@ -25,52 +25,50 @@ title: 自定义页面

在后台的 `站点管理/自定义页面` 中可以找到功能入口:

![](https://pic.mereith.com/img/125f158afebb4fd85d5aa81b5d8c6bd7.clipboard-2023-02-01.png)
![自定义页面](https://pic.mereith.com/img/125f158afebb4fd85d5aa81b5d8c6bd7.clipboard-2023-02-01.png)

### 新建页面

您可以新建自定义页面:

![](https://pic.mereith.com/img/0540fdf061d9106f11470cf5ed65e9d2.clipboard-2023-02-01.png)
![新建页面](https://pic.mereith.com/img/0540fdf061d9106f11470cf5ed65e9d2.clipboard-2023-02-01.png)

PS: 路径必须以 `/` 开头,实际的访问路径会在前面加上 `/c`。比如我定义了自定义页面路径为 `/door`,实际我可以通过 `/c/door` 来访问此页面。
PS:路径必须以 `/` 开头,实际的访问路径会在前面加上 `/c`。比如我定义了自定义页面路径为 `/door`,实际我可以通过 `/c/door` 来访问此页面。

### 编辑页面

创建完毕后,点击列表页的 `编辑内容``文件管理` ,即可跳转到代码(文件)编辑器进行编辑。

#### 多文件页面的编辑器
![](https://pic.mereith.com/img/6d3daf7daf9a093d42e9ed34a77f0ed3.clipboard-2023-02-01.png)

首次使用,需要先上传文件或文件夹。

当前目录定义:左侧文件列表中,如果有选中的文件/文件夹,当前目录就是选中的文件所在目录,或者所选文件夹的目录。如果未选中,就是根目录。
![页面编辑](https://pic.mereith.com/img/6d3daf7daf9a093d42e9ed34a77f0ed3.clipboard-2023-02-01.png)

上传文件夹会上传文件夹内所有文件到当前目录,保留层级关系
首次使用,需要先上传文件或文件夹

上传文件会上传所选文件到当前目录。
- 当前目录:左侧文件列表中,如果有选中的文件/文件夹,当前目录就是选中的文件所在目录,或者所选文件夹的目录。如果未选中,就是根目录。
- 上传文件夹会上传文件夹内所有文件到当前目录,保留层级关系。
- 上传文件会上传所选文件到当前目录。

例如我上传了一整个番茄钟项目文件夹:

![](https://pic.mereith.com/img/34a75bdd21513d1a234807efc979bef4.clipboard-2023-02-01.png)
![上传文件夹](https://pic.mereith.com/img/34a75bdd21513d1a234807efc979bef4.clipboard-2023-02-01.png)

![](https://pic.mereith.com/img/42fea40c53a918deea6bac25d2b75ecf.clipboard-2023-02-01.png)
![上传结果](https://pic.mereith.com/img/42fea40c53a918deea6bac25d2b75ecf.clipboard-2023-02-01.png)

上传完毕后,我可以点击左侧文件列表中的某些文件,在右面的编辑器修改他们,修改后点击操作/保存,就可以保存更改了
上传完毕后,我可以点击左侧文件列表中的某些文件,在右面的编辑器修改它们,并点击 `操作/保存` 以保存更改

![](https://pic.mereith.com/img/b28a1b636bc952b0e90ef8f0963a4fee.clipboard-2023-02-01.png)
![修改文件](https://pic.mereith.com/img/b28a1b636bc952b0e90ef8f0963a4fee.clipboard-2023-02-01.png)

效果如图:

![](https://pic.mereith.com/img/bc999b2826d07e0e8e22183243c38c4c.clipboard-2023-02-01.png)
![设置效果](https://pic.mereith.com/img/bc999b2826d07e0e8e22183243c38c4c.clipboard-2023-02-01.png)

#### 单文件页面的代码编辑器

![](https://pic.mereith.com/img/25cc8ff491606f819cc50ecedbc7018c.clipboard-2023-02-01.png)

![单文件编辑](https://pic.mereith.com/img/25cc8ff491606f819cc50ecedbc7018c.clipboard-2023-02-01.png)

效果如图:

![](https://pic.mereith.com/img/3797fa90700decd37cab3983c8eac867.clipboard-2023-02-01.png)
![设置效果](https://pic.mereith.com/img/3797fa90700decd37cab3983c8eac867.clipboard-2023-02-01.png)

我可以在编辑器修改他们,修改完毕后点击操作/保存,就可以保存更改了
可以在编辑器修改它们,并点击 `操作/保存` 以保存更改
26 changes: 13 additions & 13 deletions docs/feature/advance/customizing.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
title: 客制化(嵌入自定义 HTML、CSS、JS)
---

`vanBlog` 客制化,也就是可以在页面嵌入自己的 `js 脚本``html``css`
VanBlog 客制化,也就是可以在页面嵌入自己的 HTML、CSS、JS 片段

具体在 `站点管理/系统设置/客制化` 选项卡:

![](https://www.mereith.com/static/img/9489039722c6c97a5232fad790356d9c.clipboard-2022-09-02.png)
![客制化](https://www.mereith.com/static/img/9489039722c6c97a5232fad790356d9c.clipboard-2022-09-02.png)

默认客制化功能是开启的,你也可以在布局设置中关闭它。这样即便设置了客制化相关的代码,也不会生效。

Expand All @@ -18,14 +18,14 @@ PS: 我很自豪地用了 vscode 同款的代码编辑器,带有代码自动

下面是一些内置的选择器,可能对你有帮助(更多的就不列举了):

| 选择器 | 作用组件 |
| -------------- | ------------------ |
| #nav | 导航栏 |
| #nav-mobile | 移动端的抽屉导航栏 |
| .markdown-body | 文章主题内容 |
| #post-card | 文章卡片 |
| #author-card | 作者卡片 |
| #toc-card | 目录卡片 |
| 选择器 | 作用组件 |
| ---------------- | ------------------ |
| `#nav` | 导航栏 |
| `#nav-mobile` | 移动端的抽屉导航栏 |
| `.markdown-body` | 文章主题内容 |
| `#post-card` | 文章卡片 |
| `#author-card` | 作者卡片 |
| `#toc-card` | 目录卡片 |

## 自定义 Script

Expand All @@ -41,15 +41,15 @@ window.onload = () => {

## 自定义 HTML

自定义的 html 代码将被插入到每个前台页面布局组件的最下方。
自定义的 HTML 代码将被插入到每个前台页面布局组件的最下方。

## 有啥用?

可以实现很多好玩的功能,比如最近我发现了一个项目: [Sakana! Widget](https://github.com/dsrkafuu/sakana-widget)

就完全可以通过客制化来自己加个小挂件。

![](https://www.mereith.com/static/img/d2964344217c8db07f80e3e9350495c3.clipboard-2022-09-02.png)
![配置展示](https://www.mereith.com/static/img/d2964344217c8db07f80e3e9350495c3.clipboard-2022-09-02.png)

```html
<div id="sakana-widget" style="position: fixed;bottom: 20px;right:40px;"></div>
Expand All @@ -69,4 +69,4 @@ window.onload = () => {

效果:

![](https://www.mereith.com/static/img/1490762740df7e864117dfd46a66470e.clipboard-2022-09-02.png)
![设置效果](https://www.mereith.com/static/img/1490762740df7e864117dfd46a66470e.clipboard-2022-09-02.png)
10 changes: 5 additions & 5 deletions docs/feature/advance/dark-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
title: 黑暗模式与响应式
---

`vanBlog` 的前后台都支持黑暗模式和自动切换。并且都适配了从移动端到 PC 端的各种尺寸布局。
VanBlog 的前后台都支持黑暗模式和自动切换。并且都适配了从移动端到 PC 端的各种尺寸布局。

## 暗色模式

你可以在页面右上角找到主题切换 `logo` 点击后就可以切换主题了。默认为自动模式。

![](https://pic.mereith.com/img/0d46e2d13a493cc16ddba9d98e67d743.clipboard-2022-08-16.png)
![切换按钮](https://pic.mereith.com/img/0d46e2d13a493cc16ddba9d98e67d743.clipboard-2022-08-16.png)

- 自动模式:会先匹配系统的颜色模式,如果没有设置或者也为自动,就会匹配当前时间,如果为下午 6 点到早上 8 点直接,就会切换到暗色模式,其他时间为亮色模式。并维护一个自动模式主题切换定时器,以便在系统设置更改或时间变化时自动切换主题。

## 响应式

`vanBlog` 前后台都支持屏幕尺寸自适应,需要注意的是:
VanBlog 前后台都支持屏幕尺寸自适应,需要注意的是:

- 后台的`文章管理``草稿管理`中的列表会根据`屏幕尺寸大小`灵活显示不同数量的列。
- 后台的`图床管理` 目前是通过鼠标右键触发高级操作的,移动端不支持。
- 后台的 `文章管理``草稿管理` 中的列表会根据 `屏幕尺寸大小` 灵活显示不同数量的列。
- 后台的 `图床管理` 目前是通过鼠标右键触发高级操作的,移动端不支持。
4 changes: 2 additions & 2 deletions docs/feature/advance/donate.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ title: 捐赠管理

`vanBlog` 支持 `捐赠信息` 展示,会展示在关于页面的最下方(前提是至少有一个捐赠条目并在`站点管理/系统设置/站点配置/布局设置`中开启了`显示捐赠信息`的选项)

![](https://pic.mereith.com/img/664c4ed0eb81788bae4500a962b88a87.clipboard-2022-08-15.png)
![显示捐赠](https://pic.mereith.com/img/664c4ed0eb81788bae4500a962b88a87.clipboard-2022-08-15.png)

## 增删改查

进入后台 `站点管理/数据管理/捐赠管理` 即可,需要注意的是不同捐赠者的名字必须不同,相同的话会覆盖掉之前的条目。

![](https://pic.mereith.com/img/c7f3b30cdf2e454f508201d723f4b359.clipboard-2022-08-23.png)
![修改捐赠](https://pic.mereith.com/img/c7f3b30cdf2e454f508201d723f4b359.clipboard-2022-08-23.png)
6 changes: 3 additions & 3 deletions docs/feature/advance/hidden.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
title: 隐藏文章
---

`vanBlog` 支持对文章进行 `隐藏`。选择隐藏后,前台将不会该显示文章的所有信息,该文章也不会计入总字数、标签、分类数量统计或者出现在时间线界面。但后台将正常显示该文章,并可以取消隐藏状态。
VanBlog 支持对文章进行 `隐藏`。选择隐藏后,前台将不会该显示文章的所有信息,该文章也不会计入总字数、标签、分类数量统计或者出现在时间线界面。但后台将正常显示该文章,并可以取消隐藏状态。

默认情况下,隐藏文章无法通过 URL 访问(会出现 404),但你可以手动在后台的`站点管理/系统设置/站点配置/布局设置`中开启`隐藏文章通过URL访问`,这可以在某种程度上实现自定义页面的效果。
默认情况下,隐藏文章无法通过 URL 访问(会出现 404),但你可以手动在后台的 `站点管理/系统设置/站点配置/布局设置` 中开启 `隐藏文章通过URL访问`,这可以在某种程度上实现自定义页面的效果。

## 隐藏方法

- 在创建文章时勾选隐藏
- 在编辑器页面点击`修改信息`,勾选隐藏
- 在编辑器页面点击 `修改信息`,勾选隐藏
- 在发布草稿时勾选隐藏
10 changes: 5 additions & 5 deletions docs/feature/advance/https.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,17 @@ order: -3

无论 `HTTPS 自动重定向` 是否开启,都暂不支持通过 `https + ip 地址` 来访问。

需要 ip 访问请用 `http` 协议并关闭 `https 自动重定向`
需要 IP 访问请用 `http` 协议并关闭 `https 自动重定向`

:::

`VanBlog` 镜像内采用了 `Caddy` 作为反向代理,并支持全自动按需 HTTPS 证书申请配置。
VanBlog 镜像内采用了 `Caddy` 作为反向代理,并支持全自动按需 HTTPS 证书申请配置。

[Caddy](https://caddyserver.com/) 是一款默认开启并支持自动 `https` 、证书申请续期的 web 服务器

首次运行时默认关闭了 `https 自动重定向` ,请在初始化后进入后台的 `站点管理/系统设置/ HTTPS` 中设置确认 `https` 状态后再按需开启 `https 自动重定向`

![](https://pic.mereith.com/img/d1e7b502279f0bd8225dfaedf89a5140.clipboard-2022-08-23.png)
![HTTPS 重定向](https://pic.mereith.com/img/d1e7b502279f0bd8225dfaedf89a5140.clipboard-2022-08-23.png)

## 自动 HTTPS 要求

Expand All @@ -36,7 +36,7 @@ order: -3

注意的是只有域名可以,通过 `ip` 访问是不会触发自动申请证书的。

![](https://pic.mereith.com/img/8383fb4f32144be26cb134c2390d6d10.clipboard-2022-08-23.png)
![证书申请](https://pic.mereith.com/img/8383fb4f32144be26cb134c2390d6d10.clipboard-2022-08-23.png)

## https 自动重定向

Expand All @@ -48,7 +48,7 @@ order: -3

## 原理

`VanBlog` 通过 `Caddy``API` 在运行时动态修改配置来开关 `https` 自动重定向。
VanBlog 通过 `Caddy``API` 在运行时动态修改配置来开关 `https` 自动重定向。

全自动按需申请证书可以参考 [on-demand-tls](https://caddyserver.com/docs/automatic-https#on-demand-tls)

Expand Down
6 changes: 3 additions & 3 deletions docs/feature/advance/isr.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ title: 静态页面更新策略

您可以在后台的 `系统设置/高级设置` 中更改静态页面更新策略或者强制触发静态页面更新:

![](https://pic.mereith.com/img/7bb50e93e1ef869b6117cd88c92ebb72.clipboard-2023-02-01.png)
![更新策略设置](https://pic.mereith.com/img/7bb50e93e1ef869b6117cd88c92ebb72.clipboard-2023-02-01.png)

### 静态页面更新策略

有两种:延时自动、按需自动

- 延时自动: 使用 nextjs 内置的静态增量再生,可以设置重新尝试生成静态页面的时间。实时性略低。
- 延时自动: 使用 Next.js 内置的静态增量再生,可以设置重新尝试生成静态页面的时间。实时性略低。
- 按需自动: 每当后台有数据更改时,按需触发静态渲染。实时性高,可能需要更多性能。

### 强制触发静态页面更新

点此按钮可强制出发静态页面的渲染更新,无论设置何种更新策略。
点此按钮可强制触发静态页面的渲染更新,无论设置何种更新策略。
6 changes: 3 additions & 3 deletions docs/feature/advance/links.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
title: 友情链接
---

`vanBlog` 支持 `友情链接` 展示,(前提是在`站点管理/系统设置/站点配置/布局设置`中开启了`显示友情链接`的选项)
VanBlog 支持 `友情链接` 展示,(前提是在 `站点管理/系统设置/站点配置/布局设置` 中开启了 `显示友情链接` 的选项)

![](https://pic.mereith.com/img/8daaa28eeac7e3a3de0e4717026f54ab.clipboard-2022-08-15.png)
![友情链接展示](https://pic.mereith.com/img/8daaa28eeac7e3a3de0e4717026f54ab.clipboard-2022-08-15.png)

## 增删改查

进入后台 `站点管理/数据管理/友情链接` 即可,需要注意的是不同友链的名字必须不同,相同的话会覆盖掉之前的条目。

![](https://pic.mereith.com/img/e813908214b86a200c272243b7b1cb03.clipboard-2022-08-23.png)
![修改友情链接](https://pic.mereith.com/img/e813908214b86a200c272243b7b1cb03.clipboard-2022-08-23.png)

0 comments on commit 75e585f

Please sign in to comment.