最近频繁更新 Typecho Plus，而在 0.6.0 版中我添加了一个新的块级标签DIV，和一个普通标签SPAN。
看名字就知道，这两个标签是对于HTML的DIV与SPAN的包装，它们会将内容包装成一个可扩展的、简单的Div与Span元素。
既然它们只是简单的包装，那我为何要添加这两个标签呢？它们又有什么“神奇”的效果呢？

目录 - Table of Contents

为什么要有包装？

在Typecho中，如果你想要嵌入HTML代码，可以直接在行内使用，比如下面的代码：
<a href="javascript:alert('hello')" style="color:blue">可执行 <b>JS 脚本</b> 的链接</a>

可执行 JS 脚本 的链接

稍微复杂一点的代码，比如多行代码、脚本、风格，则可以使用Typecho的魔术方法 !!! 来进行包裹：

!!!
<div>
<style>
#test_div_tag {font-style:italic}
</style>
<div id="test_div_tag">Typecho其实支持直接写入HTML代码！</div>
<script>
test_div_tag.style.color = "red";
</script>
</div>
!!!

---

然而这种写法十分的繁琐，并且可读性、重用性都不是很好，所以我在新版本的 Typecho-Plus 中加入了DIV与SPAN包装。

如何应用Div与Span包装？

Typecho-Plus 的DIV包装拥有两种模式，一种带标题、一种不含标题，使用区别只是在参数中是否添加标题参数而已。

使用DIV包装其实很简单：
参数1=自定义的CSS类名，你可以添加空格来指定多个类名，如 class1 class2 ...
参数2=标题，如果为空则解析出的内容不包含标题块

[div=ClassName,带标题的DIV包装]
内部的内容，支持多行
支持 **Markdown** 与 [red]UBB[/red]
[/div]

[div]
不带标题和Class的DIV包装
支持 **Markdown** 与 [red]UBB[/red]
[/div]

Typecho-Plus 的 DIV 包装会解析为如下结构：

<div class="tplus-div ClassName">
  <div class="tplus-div-title">标题</div>
  <div class="tplus-div-content">
    内部的内容
  </div>
</div>

<div class="tplus-div">
  <div class="tplus-div-content">
    不带标题的内容
  </div>
</div>

---

至于 SPAN 标签，则更加简单：
参数1=类名

一个行内的 [span=ClassName]SPAN包装内容[/span]，没什么特别的

一个行内的 SPAN包装内容，没什么特别的

它将解析为：

一个行内的 <span class="tplus-span ClassName">SPAN包装内容</span>，没什么特别的

如何自定义风格与脚本？

在 Typecho Plus 的块级标签中，拥有 [Notify]、[Hide] 这两个提示类的块级元素，然而为了编写它们，我只能将它们设计为解析器的最高优先级别，只因为它们占用了多行的内容。
如果将来我还想要添加其他的“美化”、“提示”类的元素，难不成还得添加更多的块级标签吗？
为此，我一开脑洞，便直接添加了一个新的 [div] 块级元素，将一个较为通用的格式结构包装为标签，用以解决将来的扩展与自定义问题。

通过引用类名来模拟 Notify

首先，我们来学习如何用自定义 DIV 来模拟 Typecho Plus 的 Notify 标签：

[notify=通知标题]
通知内部的内容
[/notify]

!!!
<style>
.tplus-notify .tplus-div-title{
  text-align: center;
  color: #901bca;
  font-size: 1.5em;
  font-weight: bold;
  text-shadow: #ff37a6 2px 2px 5px;
}
.tplus-notify .tplus-div-content{
}
</style>
!!!

[div=tplus-notify,模拟的通知标题]
模拟的通知内部内容
[/div]

我们通过DIV的参数1将 notify 的CSS样式tplus-notify赋予给 DIV，这样DIV就可以直接套用 notify 的外层样式。
然而DIV的标题类名为tplus-div-title，notify的为tplus-notify-title，因此DIV无法直接套用Notify的标题样式，我们就需要使用各种方式自定义tplus-div-title的样式。（在示例中我使用了Typecho的魔术方式直接将CSS代码插入到了页面当中）
最后，notify的内容部分tplus-notify-content并没有CSS样式，所以我们的tplus-div-content也不需要设置样式。

如此一来，我们就通过DIV实现了notify的功能，是不是非常的简单？！

完全自定义CSS、JS来实现 Hide

接下来，我们通过完全自定义样式、脚本的方法，来模拟Hide的功能：

[hide=隐藏栏标题]
隐藏的内容
[/hide]

---

!!!
<style>
.test-hide {
    background-color: #fdf1ff;
    padding: 5px;
    border: 1px dashed #f01666;
    border-radius: 3px;
    margin: 1em 0;
}
.test-hide .tplus-div-title {
    color: #f44336 !important;
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    border: none !important;
    cursor: pointer;
}
.test-hide .tplus-div-content{
    display:none;
}
</style>
!!!

[div=test-hide,模拟的隐藏栏标题]
模拟的隐藏内容
[/div]

<script>$(".test-hide .tplus-div-title").click(function(){$(this.nextSibling).toggle(300);});</script>

在这个示例中，我们为DIV定义了一个test-hide类名，并模拟了Hide的CSS样式。
而在这个类名之下，定义了.test-hide .tplus-div-title标题的样式、.test-hide .tplus-div-content内容的样式。
为了模仿隐藏栏，内容栏必须一开始就为display:none隐藏状态。

设置完样式之后，还需要设置点击标题栏后切换内容的显示、隐藏状态，这点就交给JS代码来完成：
<script>$(".test-hide .tplus-div-title").click(function(){$(this.nextSibling).toggle(300);});</script>
注意，JS代码必须要在DIV内容之后执行。

如此一来，我们就完全通过自己的代码，实现了 Typecho-Plus 的[Hide]标签功能！

Span包装的应用

与DIV不同，SPAN是行内元素，一般用在突出词组或者某个整句。
通过之前的示例，想必大家已经了解如何利用已有的、或者内嵌的CSS和脚本来定义DIV包装。
而下面的示例中，我将使用 Typecho-Plus 内置的样式和脚本，来模拟黑幕、自动选择、模糊文本！

!@@黑幕内容@@
[span=tplus-heimu]黑幕内容[/span]

!%%自动选择内容%%
[span=tplus-select]自动选择内容[/span]

!**模糊内容**
[span=tplus-spoiler]模糊内容[/span]

黑幕内容
黑幕内容

自动选择内容
自动选择内容

模糊内容
模糊内容

上面的CSS类名都是由 Typecho-Plus 自带、并实现脚本化的。

---

最后，我再来实现一个自我删除的脚本，并应用到自定义SPAN包装中：

<style>.test-del{border:1px solid #ccc;font-weight:bold;}</style>

当你点击 [span=test-del]这里的文字[/span] 时，它将会自我删除！

<script>$(".test-del").click(function(){$(this).remove();});</script>

当你点击 这里的文字 时，它将会自我删除！

---

总结

总算是将DIV与SPAN包装的教程写完了，内容可能有点冗长，我不过是想将DIV包装的详细用法与设计想法介绍给大家，这也将是 Typecho-Plus 未来的更新与维护思路。
也就是说，我可能不会再在 Typecho-Plus 中添加形式化的块级标签了，更多的功能可能会通过自定义CSS风格、JS脚本来添加！
关于 0.6.1 版的更新，我将会优化 Typecho-Plus 的内置CSS与JS，同时添加自定义 tpluscustom.css tpluscustom.js 两个文件，用来给用户自己添加CSS和JS脚本，而这两个文件不会因为更新升级被覆盖，可以更方便用户自定义自己的风格！

有任何疑问或者建议，可以留言提出，也欢迎您 捐助作者 来支持 Typecho-Plus 的开发与更新！

---