这篇文章最后修改于 2021-02-02 日,距今已有 96 天,请注意甄别内容是否已经过时!
最近频繁更新 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其实支持直接写入HTML代码!

然而这种写法十分的繁琐,并且可读性、重用性都不是很好,所以我在新版本的 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]
带标题的DIV包装
内部的内容,支持多行
支持 MarkdownUBB


不带标题和Class的DIV包装
支持 MarkdownUBB


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 的开发与更新!

下一页显示预设置风格