Hexo框架(十五):代码块折叠效果

实现一个小的代码块折叠的功能,示例如下

屠龙宝刀点击就送我系渣渣辉,是兄弟就添加友链!

实现方法:

1
2
3
4
<details>
<summary>屠龙宝刀点击就送</summary>
我系渣渣辉,是兄弟就添加友链!
</details>

原理:这是采用了HTML5中的新标签。

<summary>标签包含 details 元素的标题,”details” 元素用于描述有关文档或文档片段的详细信息。

<details>一起使用。标题是可见的,当用户点击标题时会显示出详细信息。

“summary” 元素应该是 “details” 元素的第一个子元素。

缺点:兼容性不好,只有 Chrome 以及 Safari 6 支持 <summary> 标签。

------ 本文结束  感谢阅读 ------