diff --git a/docs/.vuepress/notes.ts b/docs/.vuepress/notes.ts index fb958cae..46528174 100644 --- a/docs/.vuepress/notes.ts +++ b/docs/.vuepress/notes.ts @@ -50,7 +50,7 @@ export const zhNotes = definePlumeNotesConfig({ icon: 'lucide:box', collapsed: false, dir: '功能', - items: ['代码复制', '内容搜索', '评论', '加密', '组件', '友情链接页', 'seo', 'sitemap'], + items: ['代码复制', '内容搜索', '评论', '加密', '组件', '文章水印', '友情链接页', 'seo', 'sitemap'], }, { text: '自定义', diff --git a/docs/.vuepress/theme.ts b/docs/.vuepress/theme.ts index c784a3da..cb91c0da 100644 --- a/docs/.vuepress/theme.ts +++ b/docs/.vuepress/theme.ts @@ -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: { diff --git a/docs/1.示例/markdown基础.md b/docs/1.示例/markdown基础.md index df046f89..110cf4b0 100644 --- a/docs/1.示例/markdown基础.md +++ b/docs/1.示例/markdown基础.md @@ -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；只要直接加标签就可以了。 -只有块元素 ── 比如 `
`、``、`
`、`
` 等标签，必须在前后加上空行，以利与内容区隔。而且这些 (元素) 的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 的解析器有智慧型判断，可以避免在块标签前后加上没有必要的 `
` 标签。
+只有块元素 ── 比如 `
`、`
`、`
`、`
` 等标签，必须在前后加上空行，以利与内容区隔。
+而且这些 (元素) 的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 的解析器有智慧型判断，可以避免在块标签前后加上没有必要的 `
` 标签。
 
 举例来说，在 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」选项) ，其它的格式会把每个断行都转成 `
` 标签。
+「一个以上相连接的行句组成」这句话其实暗示了 Markdown 允许段落内的强迫断行，
+这个特性和其他大部分的 text-to-HTML 格式不一样 (包括 MovableType 的「Convert Line Breaks」选项) ，
+其它的格式会把每个断行都转成 `
` 标签。
 
 
 
diff --git a/docs/1.示例/全屏水印.md b/docs/1.示例/全屏水印.md
new file mode 100644
index 00000000..a38b84bd
--- /dev/null
+++ b/docs/1.示例/全屏水印.md
@@ -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；只要直接加标签就可以了。
+
+只有块元素 ── 比如 `
`、`
`、`
`、`
` 等标签，必须在前后加上空行，以利与内容区隔。
+而且这些 (元素) 的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 的解析器有智慧型判断，可以避免在块标签前后加上没有必要的 `
` 标签。
+
+举例来说，在 Markdown 文件里加上一段 HTML 表格:
+
+```md
+This is a regular paragraph.
+
+
+ + + +
Foo
+ +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/ diff --git a/docs/1.示例/内容水印.md b/docs/1.示例/内容水印.md new file mode 100644 index 00000000..87c22623 --- /dev/null +++ b/docs/1.示例/内容水印.md @@ -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；只要直接加标签就可以了。 + +只有块元素 ── 比如 `
`、``、`
`、`
` 等标签，必须在前后加上空行，以利与内容区隔。
+而且这些 (元素) 的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 的解析器有智慧型判断，可以避免在块标签前后加上没有必要的 `
` 标签。
+
+举例来说，在 Markdown 文件里加上一段 HTML 表格:
+
+```md
+This is a regular paragraph.
+
+
+ + + +
Foo
+ +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/ diff --git a/docs/1.示例/图片水印.md b/docs/1.示例/图片水印.md new file mode 100644 index 00000000..98f08667 --- /dev/null +++ b/docs/1.示例/图片水印.md @@ -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；只要直接加标签就可以了。 + +只有块元素 ── 比如 `
`、``、`
`、`
` 等标签，必须在前后加上空行，以利与内容区隔。
+而且这些 (元素) 的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 的解析器有智慧型判断，可以避免在块标签前后加上没有必要的 `
` 标签。
+
+举例来说，在 Markdown 文件里加上一段 HTML 表格:
+
+```md
+This is a regular paragraph.
+
+
+ + + +
Foo
+ +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/ diff --git a/docs/README.md b/docs/README.md index ca5ee5e8..577501c4 100644 --- a/docs/README.md +++ b/docs/README.md @@ -8,7 +8,7 @@ config: background: filter-blur hero: name: Theme Plume - tagline: Vuepress Next Theme + tagline: VuePress Next Theme text: 一个简约的，功能丰富的 vuepress 文档&博客 主题 actions: - diff --git a/docs/notes/theme/config/frontmatter/basic.md b/docs/notes/theme/config/frontmatter/basic.md index 19ab31d6..5f16c448 100644 --- a/docs/notes/theme/config/frontmatter/basic.md +++ b/docs/notes/theme/config/frontmatter/basic.md @@ -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 // 是否仅在打印时显示 +} +``` diff --git a/docs/notes/theme/config/主题配置.md b/docs/notes/theme/config/主题配置.md index 5f9f1e71..b09427c1 100644 --- a/docs/notes/theme/config/主题配置.md +++ b/docs/notes/theme/config/主题配置.md @@ -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 +} +``` diff --git a/docs/notes/theme/guide/功能/文章水印.md b/docs/notes/theme/guide/功能/文章水印.md new file mode 100644 index 00000000..c5ad10aa --- /dev/null +++ b/docs/notes/theme/guide/功能/文章水印.md @@ -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/)