前言：写这个仅用于自己写文章时，方便直接拿来使用。插件的原理就是封装好了短代码，但是最终呈现还是以HTML来展示的。个人觉得插件有插件的好处，手搓有手搓的好处。手搓意味着不依赖插件，文章跨平台迁移更方便，不用担心文章样式失效。
以下组件均已集成到主题的 CSS 中，可直接在文章中使用对应的 HTML 代码。
一. 展开关闭盒子
这是一个可折叠的内容区域，默认可以设置为关闭或打开状态。
代码
默认关闭:
1
2
3
4
5
6
7
8
9
| <details>
<summary>点击查看更多</summary>
这里是默认关闭时显示的内容。可以是任何 HTML，比如段落、列表、图片等。
<p>例如，这是一个段落。</p>
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
</ul>
</details>
|
默认打开:
1
2
3
4
| <details open>
<summary>点击收起</summary>
这里是默认打开时显示的内容。
</details>
|
预览
默认关闭:
点击查看更多
这里是默认关闭时显示的内容。可以是任何 HTML，比如段落、列表、图片等。
例如，这是一个段落。
默认打开:
点击收起
这里是默认打开时显示的内容。
二. 引用文章链接
用于以卡片形式引用外部文章链接。
代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <div class="tab-item-content active" id="link-3">
<a class="tag-link" href="https://blog.deepsea.xin/posts/6050.html" target="_blank">
<div class="tag-link-tips">
引用文章链接
</div>
<div class="tag-link-bottom">
<div class="tag-link-left">
<i class="solitude fas fa-link"></i>
</div>
<div class="tag-link-right">
<div class="tag-link-title">
白衣博客
</div>
<div class="tag-link-sitename">
基于lua简单实现APP的远程更新
</div>
</div>
<i class="solitude fas fa-chevron-right"></i>
</div>
</a>
</div>
|
预览
三. 行内代码
用于在段落中突出显示一小段代码。
代码
1
| <span class="inline-code">文本内容</span>
|
预览
这是一段普通的文字，其中包含了一个 <span class="inline-code">行内代码</span> 的示例。
四. 选项卡 (主题自带)
此功能为主题自带的标签插件（Tag Plugin），并非纯 HTML/CSS 组件。它通过特定的标签语法在文章中创建选项卡，主题会自动将其渲染成相应的 HTML 和样式。
代码
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
26
27
28
29
30
31
32
33
| {% tabs 选项卡示例 %}
<!-- tab 选项一 -->
选项一文本内容
<!-- endtab -->
<!-- tab 选项二 -->
选项二文本内容
<!-- endtab -->
<!-- tab 选项三 -->
选项三文本内容
<!-- endtab -->
{% endtabs %}
---
### 五. 复制提示与尾随文本
以下功能可以增强用户复制文章内容时的交互体验，并添加版权信息。
#### 一. Layer 样式提示 (推荐)
这是一种轻量级的、非侵入式的提示，当用户复制内容时，会在页面某个位置（通常是右下角或中央）短暂显示一个提示框。
**实现方法：**
将以下代码添加到主题的页脚模板文件中（例如 `themes/hexo-theme-solitude/layout/includes/inject/body.pug`）。
```html
<!-- 引入layer.js-->
<script src="https://cdn.staticfile.org/layer/3.1.1/layer.js"></script>
<!-- 复制提醒 -->
<script>document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接！');};</script>
|
预览:
当用户复制页面内容时，会看到一个优雅的提示框，例如：“复制成功,若要转载请务必保留原文链接！”。
二. SweetAlert 样式提示
这是一种弹窗式的提示，会中断用户的操作，直到用户点击确认。
实现方法：
将以下代码添加到主题的页脚模板文件中。
1
2
3
4
5
6
7
8
9
|
<link rel="stylesheet" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" />
<script type="text/javascript" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
<script>
document.body.oncopy = function() {
swal("复制成功！", "您的博客名称提醒您：若要转载请保留原文链接！", "success");
};
</script>
|
预览:
当用户复制页面内容时，会弹出一个模态对话框，显示复制成功的消息。
三. 尾随文本
此功能会在用户复制的内容末尾自动追加一段文本，例如原文链接和版权声明。
实现方法：
将以下代码添加到主题的页脚模板文件中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <script>
document.addEventListener("copy",function(e){
e.preventDefault();
var copyTxt = `${window.getSelection(0).toString()}\n————————————————\n原文链接：${window.location.href}\n您的博客名称：https://your-blog-url.com，如若转载请附上原文链接`;
if(e.clipboardData) {
e.clipboardData.setData('text/plain', copyTxt);
}
else if(window.clipboardData){
return window.clipboardData.setData("text", copyTxt);
}
})
</script>
|
预览:
当用户复制一段文字并粘贴到其他地方时，粘贴的内容会自动变成：
1
2
3
4
| [用户复制的原始文本]
————————————————
原文链接：[当前文章的URL]
您的博客名称：https://your-blog-url.com，如若转载请附上原文链接
|
个人推荐：第一种 layer.js 样式，高端大气上档次，用户体验好；第二种 sweetalert 是弹窗，感觉入侵感比较强，不如第一种顺眼。第三种尾随文本可以有效保护版权，可以与第一种或第二种结合使用。
#### 预览
{% tabs 选项卡示例 %}
选项一文本内容
选项二文本内容
选项三文本内容
{% endtabs %}
