docs: update doc
This commit is contained in:
pengzhanbo
parent
1e6ec5e624
commit
de4f84bd63
@ -50,7 +50,7 @@ export const zhNotes = definePlumeNotesConfig({
|
||||
icon: 'lucide:box',
|
||||
collapsed: false,
|
||||
dir: '功能',
|
||||
items: ['代码复制', '内容搜索', '评论', '加密', '组件', '友情链接页', 'seo', 'sitemap'],
|
||||
items: ['代码复制', '内容搜索', '评论', '加密', '组件', '文章水印', '友情链接页', 'seo', 'sitemap'],
|
||||
},
|
||||
{
|
||||
text: '自定义',
|
||||
|
||||
@ -41,6 +41,11 @@ export const theme: Theme = themePlume({
|
||||
{ icon: 'xbox', link: 'https://pengzhanbo.cn' },
|
||||
],
|
||||
|
||||
watermark: {
|
||||
global: false,
|
||||
content: 'VuePress Plume',
|
||||
},
|
||||
|
||||
footer: { copyright: 'Copyright © 2021-present pengzhanbo' },
|
||||
|
||||
locales: {
|
||||
|
||||
@ -16,11 +16,14 @@ Markdown 的目标是实现「易读易写」。
|
||||
|
||||
## 概述
|
||||
|
||||
不过最需要强调的便是它的可读性。一份使用 Markdown 格式撰写的文件应该可以直接以纯文字发佈，并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响，包括 [Setext][1]、[atx][2]、[Textile][3]、[reStructuredText][4]、[Grutatext][5] 和 [EtText][6]，然而最大灵感来源其实是纯文字的电子邮件格式。
|
||||
不过最需要强调的便是它的可读性。一份使用 Markdown 格式撰写的文件应该可以直接以纯文字发佈，并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响，
|
||||
包括 [Setext][1]、[atx][2]、[Textile][3]、[reStructuredText][4]、[Grutatext][5] 和 [EtText][6]，然而最大灵感来源其实是纯文字的电子邮件格式。
|
||||
|
||||
因此 Markdown 的语法全由标点符号所组成，并经过严谨慎选，是为了让它们看起来就像所要表达的意思。像是在文字两旁加上星号，看起来就像\*强调\*。Markdown 的列表看起来，嗯，就是列表。假如你有使用过电子邮件，引言写法看起来就真的像是引用一段文字。
|
||||
|
||||
Markdown 具有一系列衍生版本，用于扩展 Markdown 的功能 (如表格、脚注、内嵌 HTML 等等) ，这些功能原初的 Markdown 尚不具备，它们能让 Markdown 转换成更多的格式，例如 LaTeX，Docbook。Markdown 增强版中比较有名的有 Markdown Extra、MultiMarkdown、 Maruku 等。这些衍生版本要么基于工具，如 Pandoc；要么基于网站，如 GitHub 和 Wikipedia，在语法上基本兼容，但在一些语法和渲染效果上有改动。
|
||||
Markdown 具有一系列衍生版本，用于扩展 Markdown 的功能 (如表格、脚注、内嵌 HTML 等等) ，
|
||||
这些功能原初的 Markdown 尚不具备，它们能让 Markdown 转换成更多的格式，例如 LaTeX，Docbook。
|
||||
Markdown 增强版中比较有名的有 Markdown Extra、MultiMarkdown、 Maruku 等。这些衍生版本要么基于工具，如 Pandoc；要么基于网站，如 GitHub 和 Wikipedia，在语法上基本兼容，但在一些语法和渲染效果上有改动。
|
||||
|
||||
## 用途
|
||||
|
||||
@ -36,7 +39,8 @@ Markdown 的语法简洁明了、学习容易，而且功能比纯文本更强
|
||||
|
||||
不在 Markdown 涵盖范围之外的标签，都可以直接在文件里面用 HTML 撰写。不需要额外标注这是 HTML 或是 Markdown；只要直接加标签就可以了。
|
||||
|
||||
只有块元素 ── 比如 `<div>`、`<table>`、`<pre>`、`<p>` 等标签，必须在前后加上空行，以利与内容区隔。而且这些 (元素) 的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 的解析器有智慧型判断，可以避免在块标签前后加上没有必要的 `<p>` 标签。
|
||||
只有块元素 ── 比如 `<div>`、`<table>`、`<pre>`、`<p>` 等标签，必须在前后加上空行，以利与内容区隔。
|
||||
而且这些 (元素) 的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 的解析器有智慧型判断，可以避免在块标签前后加上没有必要的 `<p>` 标签。
|
||||
|
||||
举例来说，在 Markdown 文件里加上一段 HTML 表格:
|
||||
|
||||
@ -98,7 +102,9 @@ Markdown 将会把它转换为:
|
||||
4 < 5
|
||||
```
|
||||
|
||||
不过需要注意的是，code 范围内，不论是行内还是块， `<` 和 `&` 两个符号都*一定*会被转换成 HTML 实体，这项特性让你可以很容易地用 Markdown 写 HTML code (和 HTML 相对而言， HTML 语法中，你要把所有的 `<` 和 `&` 都转换为 HTML 实体，才能在 HTML 文件里面写出 HTML code。)
|
||||
不过需要注意的是，code 范围内，不论是行内还是块， `<` 和 `&` 两个符号都*一定*会被转换成 HTML 实体，
|
||||
这项特性让你可以很容易地用 Markdown 写 HTML code (和 HTML 相对而言， HTML 语法中，
|
||||
你要把所有的 `<` 和 `&` 都转换为 HTML 实体，才能在 HTML 文件里面写出 HTML code。)
|
||||
|
||||
---
|
||||
|
||||
@ -108,7 +114,9 @@ Markdown 将会把它转换为:
|
||||
|
||||
一个段落是由一个以上相连接的行句组成，而一个以上的空行则会切分出不同的段落 (空行的定义是显示上看起来像是空行，便会被视为空行。比方说，若某一行只包含空白和 tab，则该行也会被视为空行) ，一般的段落不需要用空白或断行缩进。
|
||||
|
||||
「一个以上相连接的行句组成」这句话其实暗示了 Markdown 允许段落内的强迫断行，这个特性和其他大部分的 text-to-HTML 格式不一样 (包括 MovableType 的「Convert Line Breaks」选项) ，其它的格式会把每个断行都转成 `<br />` 标签。
|
||||
「一个以上相连接的行句组成」这句话其实暗示了 Markdown 允许段落内的强迫断行，
|
||||
这个特性和其他大部分的 text-to-HTML 格式不一样 (包括 MovableType 的「Convert Line Breaks」选项) ，
|
||||
其它的格式会把每个断行都转成 `<br />` 标签。
|
||||
|
||||
<!-- markdownlint-disable MD038 -->
|
||||
|
||||
|
||||
108
docs/1.示例/全屏水印.md
Normal file
108
docs/1.示例/全屏水印.md
Normal file
@ -0,0 +1,108 @@
|
||||
---
|
||||
title: 全屏水印
|
||||
author: Plume Theme
|
||||
createTime: 2024/04/10 20:28:18
|
||||
permalink: /article/97s6ha1e/
|
||||
watermark:
|
||||
fullPage: true
|
||||
width: 150
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
不过最需要强调的便是它的可读性。一份使用 Markdown 格式撰写的文件应该可以直接以纯文字发佈，并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响，
|
||||
包括 [Setext][1]、[atx][2]、[Textile][3]、[reStructuredText][4]、[Grutatext][5] 和 [EtText][6]，然而最大灵感来源其实是纯文字的电子邮件格式。
|
||||
|
||||
因此 Markdown 的语法全由标点符号所组成，并经过严谨慎选，是为了让它们看起来就像所要表达的意思。像是在文字两旁加上星号，看起来就像\*强调\*。Markdown 的列表看起来，嗯，就是列表。假如你有使用过电子邮件，引言写法看起来就真的像是引用一段文字。
|
||||
|
||||
Markdown 具有一系列衍生版本，用于扩展 Markdown 的功能 (如表格、脚注、内嵌 HTML 等等) ，
|
||||
这些功能原初的 Markdown 尚不具备，它们能让 Markdown 转换成更多的格式，例如 LaTeX，Docbook。
|
||||
Markdown 增强版中比较有名的有 Markdown Extra、MultiMarkdown、 Maruku 等。这些衍生版本要么基于工具，如 Pandoc；要么基于网站，如 GitHub 和 Wikipedia，在语法上基本兼容，但在一些语法和渲染效果上有改动。
|
||||
|
||||
## 用途
|
||||
|
||||
Markdown 的语法有个主要的目的: 用来作为一种网络内容的*写作*用语言。Markdown 的重点在于，它能让文件更容易阅读、编写。因此，Markdown 的格式语法只涵盖纯文字可以涵盖的范围。
|
||||
|
||||
Markdown 的语法简洁明了、学习容易，而且功能比纯文本更强，因此有很多人用它写博客。世界上最流行的博客平台 WordPress 能很好的支持 Markdown。
|
||||
|
||||
用于编写说明文档，并且以 `README.md` 的文件名保存在软件的目录下面。
|
||||
|
||||
除此之外，我们还可以快速将 Markdown 转化为演讲 PPT、Word 产品文档、LaTex 论文甚至是用非常少量的代码完成最小可用原型。在数据科学领域，Markdown 已经广泛使用，极大地推进了动态可重复性研究的历史进程。
|
||||
|
||||
### 行内 HTML
|
||||
|
||||
不在 Markdown 涵盖范围之外的标签，都可以直接在文件里面用 HTML 撰写。不需要额外标注这是 HTML 或是 Markdown；只要直接加标签就可以了。
|
||||
|
||||
只有块元素 ── 比如 `<div>`、`<table>`、`<pre>`、`<p>` 等标签，必须在前后加上空行，以利与内容区隔。
|
||||
而且这些 (元素) 的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 的解析器有智慧型判断，可以避免在块标签前后加上没有必要的 `<p>` 标签。
|
||||
|
||||
举例来说，在 Markdown 文件里加上一段 HTML 表格:
|
||||
|
||||
```md
|
||||
This is a regular paragraph.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>Foo</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
This is another regular paragraph.
|
||||
```
|
||||
|
||||
请注意，Markdown 语法在 HTML 块标签中将不会被进行处理。例如，你无法在 HTML 块内使用 Markdown 形式的 `*强调*`。
|
||||
|
||||
### 特殊字元自动转换
|
||||
|
||||
在 HTML 文件中，有两个字元需要特殊处理: `<` 和 `&` 。 `<` 符号用于起始标签，`&` 符号则用于标记 HTML 实体，如果你只是想要使用这些符号，你必须要使用实体的形式，像是 `<` 和 `&`。
|
||||
|
||||
`&` 符号其实很容易让写作网络文件的人感到困扰，如果你要打「AT&T」 ，你必须要写成「`AT&T`」 ，还得转换网址内的 `&` 符号，如果你要链接到 `http://images.google.com/images?num=30&q=larry+bird`
|
||||
|
||||
你必须要把网址转成:
|
||||
|
||||
```html
|
||||
http://images.google.com/images?num=30&q=larry+bird
|
||||
```
|
||||
|
||||
才能放到链接标签的 `href` 属性里。不用说也知道这很容易忘记，这也可能是 HTML 标准检查所检查到的错误中，数量最多的。
|
||||
|
||||
Markdown 允许你直接使用这些符号，但是你要小心跳脱字元的使用，如果你是在 HTML 实体中使用 `&` 符号的话，它不会被转换，而在其它情形下，它则会被转换成 `&`。所以你如果要在文件中插入一个著作权的符号，你可以这样写:
|
||||
|
||||
```md
|
||||
©
|
||||
```
|
||||
|
||||
Markdown 将不会对这段文字做修改，但是如果你这样写:
|
||||
|
||||
```md
|
||||
AT&T
|
||||
```
|
||||
|
||||
Markdown 就会将它转为:
|
||||
|
||||
```html
|
||||
AT&T
|
||||
```
|
||||
|
||||
类似的状况也会发生在 `<` 符号上，因为 Markdown 支持 [行内 HTML](#行内-html) ，如果你是使用 `<` 符号作为 HTML 标签使用，那 Markdown 也不会对它做任何转换，但是如果你是写:
|
||||
|
||||
```md
|
||||
4 < 5
|
||||
```
|
||||
|
||||
Markdown 将会把它转换为:
|
||||
|
||||
```html
|
||||
4 < 5
|
||||
```
|
||||
|
||||
不过需要注意的是，code 范围内，不论是行内还是块， `<` 和 `&` 两个符号都*一定*会被转换成 HTML 实体，
|
||||
这项特性让你可以很容易地用 Markdown 写 HTML code (和 HTML 相对而言， HTML 语法中，
|
||||
你要把所有的 `<` 和 `&` 都转换为 HTML 实体，才能在 HTML 文件里面写出 HTML code。)
|
||||
|
||||
[1]: http://docutils.sourceforge.net/mirror/setext.html
|
||||
[2]: http://www.aaronsw.com/2002/atx/
|
||||
[3]: http://textism.com/tools/textile/
|
||||
[4]: http://docutils.sourceforge.net/rst.html
|
||||
[5]: http://www.triptico.com/software/grutatxt.html
|
||||
[6]: http://ettext.taint.org/doc/
|
||||
108
docs/1.示例/内容水印.md
Normal file
108
docs/1.示例/内容水印.md
Normal file
@ -0,0 +1,108 @@
|
||||
---
|
||||
title: 内容水印
|
||||
author: Plume Theme
|
||||
createTime: 2024/04/10 20:28:32
|
||||
permalink: /article/2z59hh8g/
|
||||
watermark:
|
||||
fullPage: false
|
||||
width: 150
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
不过最需要强调的便是它的可读性。一份使用 Markdown 格式撰写的文件应该可以直接以纯文字发佈，并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响，
|
||||
包括 [Setext][1]、[atx][2]、[Textile][3]、[reStructuredText][4]、[Grutatext][5] 和 [EtText][6]，然而最大灵感来源其实是纯文字的电子邮件格式。
|
||||
|
||||
因此 Markdown 的语法全由标点符号所组成，并经过严谨慎选，是为了让它们看起来就像所要表达的意思。像是在文字两旁加上星号，看起来就像\*强调\*。Markdown 的列表看起来，嗯，就是列表。假如你有使用过电子邮件，引言写法看起来就真的像是引用一段文字。
|
||||
|
||||
Markdown 具有一系列衍生版本，用于扩展 Markdown 的功能 (如表格、脚注、内嵌 HTML 等等) ，
|
||||
这些功能原初的 Markdown 尚不具备，它们能让 Markdown 转换成更多的格式，例如 LaTeX，Docbook。
|
||||
Markdown 增强版中比较有名的有 Markdown Extra、MultiMarkdown、 Maruku 等。这些衍生版本要么基于工具，如 Pandoc；要么基于网站，如 GitHub 和 Wikipedia，在语法上基本兼容，但在一些语法和渲染效果上有改动。
|
||||
|
||||
## 用途
|
||||
|
||||
Markdown 的语法有个主要的目的: 用来作为一种网络内容的*写作*用语言。Markdown 的重点在于，它能让文件更容易阅读、编写。因此，Markdown 的格式语法只涵盖纯文字可以涵盖的范围。
|
||||
|
||||
Markdown 的语法简洁明了、学习容易，而且功能比纯文本更强，因此有很多人用它写博客。世界上最流行的博客平台 WordPress 能很好的支持 Markdown。
|
||||
|
||||
用于编写说明文档，并且以 `README.md` 的文件名保存在软件的目录下面。
|
||||
|
||||
除此之外，我们还可以快速将 Markdown 转化为演讲 PPT、Word 产品文档、LaTex 论文甚至是用非常少量的代码完成最小可用原型。在数据科学领域，Markdown 已经广泛使用，极大地推进了动态可重复性研究的历史进程。
|
||||
|
||||
### 行内 HTML
|
||||
|
||||
不在 Markdown 涵盖范围之外的标签，都可以直接在文件里面用 HTML 撰写。不需要额外标注这是 HTML 或是 Markdown；只要直接加标签就可以了。
|
||||
|
||||
只有块元素 ── 比如 `<div>`、`<table>`、`<pre>`、`<p>` 等标签，必须在前后加上空行，以利与内容区隔。
|
||||
而且这些 (元素) 的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 的解析器有智慧型判断，可以避免在块标签前后加上没有必要的 `<p>` 标签。
|
||||
|
||||
举例来说，在 Markdown 文件里加上一段 HTML 表格:
|
||||
|
||||
```md
|
||||
This is a regular paragraph.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>Foo</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
This is another regular paragraph.
|
||||
```
|
||||
|
||||
请注意，Markdown 语法在 HTML 块标签中将不会被进行处理。例如，你无法在 HTML 块内使用 Markdown 形式的 `*强调*`。
|
||||
|
||||
### 特殊字元自动转换
|
||||
|
||||
在 HTML 文件中，有两个字元需要特殊处理: `<` 和 `&` 。 `<` 符号用于起始标签，`&` 符号则用于标记 HTML 实体，如果你只是想要使用这些符号，你必须要使用实体的形式，像是 `<` 和 `&`。
|
||||
|
||||
`&` 符号其实很容易让写作网络文件的人感到困扰，如果你要打「AT&T」 ，你必须要写成「`AT&T`」 ，还得转换网址内的 `&` 符号，如果你要链接到 `http://images.google.com/images?num=30&q=larry+bird`
|
||||
|
||||
你必须要把网址转成:
|
||||
|
||||
```html
|
||||
http://images.google.com/images?num=30&q=larry+bird
|
||||
```
|
||||
|
||||
才能放到链接标签的 `href` 属性里。不用说也知道这很容易忘记，这也可能是 HTML 标准检查所检查到的错误中，数量最多的。
|
||||
|
||||
Markdown 允许你直接使用这些符号，但是你要小心跳脱字元的使用，如果你是在 HTML 实体中使用 `&` 符号的话，它不会被转换，而在其它情形下，它则会被转换成 `&`。所以你如果要在文件中插入一个著作权的符号，你可以这样写:
|
||||
|
||||
```md
|
||||
©
|
||||
```
|
||||
|
||||
Markdown 将不会对这段文字做修改，但是如果你这样写:
|
||||
|
||||
```md
|
||||
AT&T
|
||||
```
|
||||
|
||||
Markdown 就会将它转为:
|
||||
|
||||
```html
|
||||
AT&T
|
||||
```
|
||||
|
||||
类似的状况也会发生在 `<` 符号上，因为 Markdown 支持 [行内 HTML](#行内-html) ，如果你是使用 `<` 符号作为 HTML 标签使用，那 Markdown 也不会对它做任何转换，但是如果你是写:
|
||||
|
||||
```md
|
||||
4 < 5
|
||||
```
|
||||
|
||||
Markdown 将会把它转换为:
|
||||
|
||||
```html
|
||||
4 < 5
|
||||
```
|
||||
|
||||
不过需要注意的是，code 范围内，不论是行内还是块， `<` 和 `&` 两个符号都*一定*会被转换成 HTML 实体，
|
||||
这项特性让你可以很容易地用 Markdown 写 HTML code (和 HTML 相对而言， HTML 语法中，
|
||||
你要把所有的 `<` 和 `&` 都转换为 HTML 实体，才能在 HTML 文件里面写出 HTML code。)
|
||||
|
||||
[1]: http://docutils.sourceforge.net/mirror/setext.html
|
||||
[2]: http://www.aaronsw.com/2002/atx/
|
||||
[3]: http://textism.com/tools/textile/
|
||||
[4]: http://docutils.sourceforge.net/rst.html
|
||||
[5]: http://www.triptico.com/software/grutatxt.html
|
||||
[6]: http://ettext.taint.org/doc/
|
||||
108
docs/1.示例/图片水印.md
Normal file
108
docs/1.示例/图片水印.md
Normal file
@ -0,0 +1,108 @@
|
||||
---
|
||||
title: 图片水印
|
||||
author: Plume Theme
|
||||
createTime: 2024/04/11 06:07:50
|
||||
permalink: /article/i4cuuonn/
|
||||
watermark:
|
||||
fullPage: true
|
||||
image: /plume.png
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
不过最需要强调的便是它的可读性。一份使用 Markdown 格式撰写的文件应该可以直接以纯文字发佈，并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响，
|
||||
包括 [Setext][1]、[atx][2]、[Textile][3]、[reStructuredText][4]、[Grutatext][5] 和 [EtText][6]，然而最大灵感来源其实是纯文字的电子邮件格式。
|
||||
|
||||
因此 Markdown 的语法全由标点符号所组成，并经过严谨慎选，是为了让它们看起来就像所要表达的意思。像是在文字两旁加上星号，看起来就像\*强调\*。Markdown 的列表看起来，嗯，就是列表。假如你有使用过电子邮件，引言写法看起来就真的像是引用一段文字。
|
||||
|
||||
Markdown 具有一系列衍生版本，用于扩展 Markdown 的功能 (如表格、脚注、内嵌 HTML 等等) ，
|
||||
这些功能原初的 Markdown 尚不具备，它们能让 Markdown 转换成更多的格式，例如 LaTeX，Docbook。
|
||||
Markdown 增强版中比较有名的有 Markdown Extra、MultiMarkdown、 Maruku 等。这些衍生版本要么基于工具，如 Pandoc；要么基于网站，如 GitHub 和 Wikipedia，在语法上基本兼容，但在一些语法和渲染效果上有改动。
|
||||
|
||||
## 用途
|
||||
|
||||
Markdown 的语法有个主要的目的: 用来作为一种网络内容的*写作*用语言。Markdown 的重点在于，它能让文件更容易阅读、编写。因此，Markdown 的格式语法只涵盖纯文字可以涵盖的范围。
|
||||
|
||||
Markdown 的语法简洁明了、学习容易，而且功能比纯文本更强，因此有很多人用它写博客。世界上最流行的博客平台 WordPress 能很好的支持 Markdown。
|
||||
|
||||
用于编写说明文档，并且以 `README.md` 的文件名保存在软件的目录下面。
|
||||
|
||||
除此之外，我们还可以快速将 Markdown 转化为演讲 PPT、Word 产品文档、LaTex 论文甚至是用非常少量的代码完成最小可用原型。在数据科学领域，Markdown 已经广泛使用，极大地推进了动态可重复性研究的历史进程。
|
||||
|
||||
### 行内 HTML
|
||||
|
||||
不在 Markdown 涵盖范围之外的标签，都可以直接在文件里面用 HTML 撰写。不需要额外标注这是 HTML 或是 Markdown；只要直接加标签就可以了。
|
||||
|
||||
只有块元素 ── 比如 `<div>`、`<table>`、`<pre>`、`<p>` 等标签，必须在前后加上空行，以利与内容区隔。
|
||||
而且这些 (元素) 的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 的解析器有智慧型判断，可以避免在块标签前后加上没有必要的 `<p>` 标签。
|
||||
|
||||
举例来说，在 Markdown 文件里加上一段 HTML 表格:
|
||||
|
||||
```md
|
||||
This is a regular paragraph.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>Foo</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
This is another regular paragraph.
|
||||
```
|
||||
|
||||
请注意，Markdown 语法在 HTML 块标签中将不会被进行处理。例如，你无法在 HTML 块内使用 Markdown 形式的 `*强调*`。
|
||||
|
||||
### 特殊字元自动转换
|
||||
|
||||
在 HTML 文件中，有两个字元需要特殊处理: `<` 和 `&` 。 `<` 符号用于起始标签，`&` 符号则用于标记 HTML 实体，如果你只是想要使用这些符号，你必须要使用实体的形式，像是 `<` 和 `&`。
|
||||
|
||||
`&` 符号其实很容易让写作网络文件的人感到困扰，如果你要打「AT&T」 ，你必须要写成「`AT&T`」 ，还得转换网址内的 `&` 符号，如果你要链接到 `http://images.google.com/images?num=30&q=larry+bird`
|
||||
|
||||
你必须要把网址转成:
|
||||
|
||||
```html
|
||||
http://images.google.com/images?num=30&q=larry+bird
|
||||
```
|
||||
|
||||
才能放到链接标签的 `href` 属性里。不用说也知道这很容易忘记，这也可能是 HTML 标准检查所检查到的错误中，数量最多的。
|
||||
|
||||
Markdown 允许你直接使用这些符号，但是你要小心跳脱字元的使用，如果你是在 HTML 实体中使用 `&` 符号的话，它不会被转换，而在其它情形下，它则会被转换成 `&`。所以你如果要在文件中插入一个著作权的符号，你可以这样写:
|
||||
|
||||
```md
|
||||
©
|
||||
```
|
||||
|
||||
Markdown 将不会对这段文字做修改，但是如果你这样写:
|
||||
|
||||
```md
|
||||
AT&T
|
||||
```
|
||||
|
||||
Markdown 就会将它转为:
|
||||
|
||||
```html
|
||||
AT&T
|
||||
```
|
||||
|
||||
类似的状况也会发生在 `<` 符号上，因为 Markdown 支持 [行内 HTML](#行内-html) ，如果你是使用 `<` 符号作为 HTML 标签使用，那 Markdown 也不会对它做任何转换，但是如果你是写:
|
||||
|
||||
```md
|
||||
4 < 5
|
||||
```
|
||||
|
||||
Markdown 将会把它转换为:
|
||||
|
||||
```html
|
||||
4 < 5
|
||||
```
|
||||
|
||||
不过需要注意的是，code 范围内，不论是行内还是块， `<` 和 `&` 两个符号都*一定*会被转换成 HTML 实体，
|
||||
这项特性让你可以很容易地用 Markdown 写 HTML code (和 HTML 相对而言， HTML 语法中，
|
||||
你要把所有的 `<` 和 `&` 都转换为 HTML 实体，才能在 HTML 文件里面写出 HTML code。)
|
||||
|
||||
[1]: http://docutils.sourceforge.net/mirror/setext.html
|
||||
[2]: http://www.aaronsw.com/2002/atx/
|
||||
[3]: http://textism.com/tools/textile/
|
||||
[4]: http://docutils.sourceforge.net/rst.html
|
||||
[5]: http://www.triptico.com/software/grutatxt.html
|
||||
[6]: http://ettext.taint.org/doc/
|
||||
@ -8,7 +8,7 @@ config:
|
||||
background: filter-blur
|
||||
hero:
|
||||
name: Theme Plume
|
||||
tagline: Vuepress Next Theme
|
||||
tagline: VuePress Next Theme
|
||||
text: 一个简约的，功能丰富的 vuepress 文档&博客 主题
|
||||
actions:
|
||||
-
|
||||
|
||||
@ -124,3 +124,26 @@ permalink: /config/frontmatter/basic/
|
||||
- 默认值： `true`
|
||||
|
||||
当前文章是否 显示 文章编辑 按钮。
|
||||
|
||||
### watermark
|
||||
|
||||
- 类型： `boolean | WatermarkConfig`
|
||||
- 默认值： `undefined` 主题不启用水印，或不启用全局水印时，默认值为 `false`，启用全局水印则为 `true`。
|
||||
|
||||
配置当前文章 水印。
|
||||
|
||||
```ts
|
||||
interface WatermarkConfig {
|
||||
content?: string // 水印文字内容，可传入 html 内容
|
||||
textColor?: string // 水印文本颜色
|
||||
image?: string // 水印图片路径，优先于 content
|
||||
opacity?: number // 水印透明度
|
||||
rotate?: number // 水印旋转角度
|
||||
width?: number // 水印宽度
|
||||
height?: number // 水印高度
|
||||
gapX?: number // 水印横向间距
|
||||
gapY?: number // 水印纵向间距
|
||||
fullPage?: boolean // 是否全屏
|
||||
onlyPrint?: boolean // 是否仅在打印时显示
|
||||
}
|
||||
```
|
||||
|
||||
@ -501,3 +501,78 @@ interface NotFound {
|
||||
linkText?: string
|
||||
}
|
||||
```
|
||||
|
||||
### watermark
|
||||
|
||||
- 类型： `boolean | WatermarkOptions`
|
||||
- 默认值： `false`
|
||||
- 详情： 文章水印配置
|
||||
|
||||
```ts
|
||||
interface WatermarkOptions {
|
||||
/**
|
||||
* 是否全局启用, 在不全局启用时，可以通过 `frontmatter.watermark` 为当前页面启用
|
||||
* @default false
|
||||
*/
|
||||
global?: boolean
|
||||
/**
|
||||
* 非全局启用时，可以通过该字段根据文件路径或页面链接 进行匹配， 来启用水印。
|
||||
* 以 `^` 的将被认为为类似于正则表达式进行匹配。
|
||||
*/
|
||||
matches?: string | string[]
|
||||
/**
|
||||
* 水印之间的水平间隔
|
||||
* @default 0
|
||||
*/
|
||||
gapX?: number
|
||||
/**
|
||||
* 水印之间的垂直间隔
|
||||
* @default 0
|
||||
*/
|
||||
gapY?: number
|
||||
|
||||
/**
|
||||
* 图片水印的内容，如果与 content 同时传入，优先使用图片水印
|
||||
*/
|
||||
image?: PlumeThemeImage
|
||||
/**
|
||||
* 水印宽度
|
||||
* @default 100
|
||||
*/
|
||||
width?: number
|
||||
/**
|
||||
* 水印高度
|
||||
* @default 100
|
||||
*/
|
||||
height?: number
|
||||
/**
|
||||
* 水印旋转角度
|
||||
* @default -22
|
||||
*/
|
||||
rotate?: number
|
||||
/**
|
||||
* 水印的内容，如果与 image 同时传入，优先使用图片水印
|
||||
*/
|
||||
content?: string
|
||||
/**
|
||||
* 水印是否全屏显示
|
||||
*/
|
||||
fullPage?: boolean
|
||||
/**
|
||||
* 水印透明度
|
||||
* @default 0.1
|
||||
*/
|
||||
opacity?: number
|
||||
|
||||
/**
|
||||
* 水印的文本颜色
|
||||
*/
|
||||
textColor?: string | { dark: string, light: string }
|
||||
|
||||
/**
|
||||
* 是否只在打印时显示
|
||||
* @default false
|
||||
*/
|
||||
onlyPrint?: boolean
|
||||
}
|
||||
```
|
||||
|
||||
173
docs/notes/theme/guide/功能/文章水印.md
Normal file
173
docs/notes/theme/guide/功能/文章水印.md
Normal file
@ -0,0 +1,173 @@
|
||||
---
|
||||
title: 文章水印
|
||||
author: pengzhanbo
|
||||
icon: material-symbols-light:branding-watermark-outline
|
||||
createTime: 2024/04/10 20:14:57
|
||||
permalink: /guide/features/watermark/
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
主题支持在文章中添加水印。支持 全屏水印 和 内容水印，同时还支持 图片水印 和 文字水印 。
|
||||
|
||||
水印 仅在 文章页面 生效。如首页、博客页等其他页面不会注入水印。
|
||||
|
||||
## 启用水印
|
||||
|
||||
主题默认不启用水印功能。你需要在主题配置中开启。
|
||||
|
||||
::: code-tabs
|
||||
@tab .vuepress/config.ts
|
||||
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
// watermark: true, // 使用默认配置的水印
|
||||
watermark: {
|
||||
global: true, // 全局开启水印
|
||||
image: '/images/watermark.png', // 水印图片
|
||||
content: 'vuepress plume', // 水印内容， 如果配置了 image, 则优先使用 image
|
||||
opacity: 0.1, // 透明度
|
||||
rotate: -22, // 旋转角度
|
||||
width: 100, // 水印宽度
|
||||
height: 100, // 水印高度
|
||||
textColor: '#fff', // 文字颜色
|
||||
fullPage: true, // 是否全屏, 非全屏时水印仅覆盖文章内容
|
||||
gapX: 20, // 水印横向间距
|
||||
gapY: 20, // 水印纵向间距
|
||||
onlyPrint: true, // 只在打印时生效
|
||||
matches: ['/article/xxx', '^/note/', 'notes/guide/xx.md'], // 非全局启用时，匹配页面路径或文件路径来启用水印
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 全局启用
|
||||
|
||||
当 `watermark` 配置为 `true` 时， 主题全局开启水印。还可以通过 `watermark.global` 配置是否开启全局水印。
|
||||
|
||||
### 部分页面启用
|
||||
|
||||
当 `watermark.global` 为 `false` 时，主题虽然启用了水印功能，但是需要自行控制哪些页面显示水印。
|
||||
|
||||
主题提供了两种方式来控制水印的显示:
|
||||
|
||||
#### watermark.matches
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
// watermark: true, // 使用默认配置的水印
|
||||
watermark: {
|
||||
global: false,
|
||||
matches: [
|
||||
// 可以是 md 文件的相对路径
|
||||
'notes/guide/xx.md',
|
||||
// 可以是 文件夹的路径
|
||||
'/notes/vuepress-theme-plume/',
|
||||
// 可以是 访问地址的请求路径，对该访问路径下所有文章 都生效
|
||||
'/vuepress-theme-plume/',
|
||||
// 可以是 具体的某个页面的请求路径
|
||||
'/article/f8dnci3/',
|
||||
// 如果是 `^` 开头，则匹配该正则表达式的页面
|
||||
'^/(a|b)/',
|
||||
],
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
#### frontmatter.watermark
|
||||
|
||||
在 md 文件中添加 `frontmatter.watermark` 为 `true` ：
|
||||
|
||||
```md
|
||||
---
|
||||
watermark: true
|
||||
---
|
||||
```
|
||||
|
||||
还可以个性化配置当前页面的水印：
|
||||
|
||||
```md
|
||||
---
|
||||
watermark:
|
||||
content: My Custom Content
|
||||
opacity: 0.2
|
||||
rotate: 45
|
||||
---
|
||||
```
|
||||
|
||||
## 图片水印
|
||||
|
||||
主题支持使用 图片 作为水印。
|
||||
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
watermark: {
|
||||
image: '/images/watermark.png', // 水印图片
|
||||
width: 100, // 水印宽度
|
||||
height: 100, // 水印高度
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
也可以在 md 文件中添加配置，为当前页面设置水印：
|
||||
|
||||
```md
|
||||
---
|
||||
watermark:
|
||||
image: /images/watermark.png
|
||||
width: 100
|
||||
height: 100
|
||||
---
|
||||
```
|
||||
|
||||
### 示例
|
||||
|
||||
[图片水印](/article/i4cuuonn/)
|
||||
|
||||
## 文字水印
|
||||
|
||||
主题支持使用 图片 作为水印。
|
||||
|
||||
```ts
|
||||
import { defineUserConfig } from 'vuepress'
|
||||
import { plumeTheme } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
watermark: {
|
||||
content: '自定义文字',
|
||||
textColor: '#fff', // 文字颜色
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
也可以在 md 文件中添加配置，为当前页面设置水印：
|
||||
|
||||
```md
|
||||
---
|
||||
watermark:
|
||||
content: 自定义文字
|
||||
textColor: #fff
|
||||
---
|
||||
```
|
||||
|
||||
当同时设置了 `image` 和 `content` 时， `image` 优先于 `content`。
|
||||
|
||||
## 示例
|
||||
|
||||
- [内容水印](/article/2z59hh8g/)
|
||||
- [全屏水印](/article/97s6ha1e/)
|
||||
Loading…
x
Reference in New Issue
Block a user