利用 Collapsible Elements 实现文章内容折叠效果
icon
password
tags
date
type
category
status
summary
slug
有些时候，你可能不得不在文章中添加一些图片、Flash 或视频文件，但当此篇文章位于博客首页且你不愿意使用 more 标签时，你会发现，你的博客首页打开速度变慢了，某篇关于网页打开速度的心理学中提到：…
有些时候，你可能不得不在文章中添加一些图片、Flash 或视频文件，但当此篇文章位于博客首页且你不愿意使用 more 标签时，你会发现，你的博客首页打开速度变慢了，某篇关于网页打开速度的心理学中提到：_用户最满意的打开网页时间，是在 2 秒以下；用户能够忍受的最长等待时间的中位数，在 6～8 秒之间，这就是说，8 秒是一个临界值，如果你的网站打开速度在 8 秒以上，那么很可能，大部分访问者最终都会离你而去；如果等待 12 秒以后，网页还是没有载入，那么 99% 以上的用户会关闭这个网页，不再等待。_可见，加快博客首页的打开速度对提高用户体验是非常重要的。
记得以前见过一个叫 AnyPlayer 的 WordPress 播放器插件，它能把在文章中的播放器折叠起来，并且设置了一个点击打开播放器的按钮，这个功能十分让我喜欢，但无奈它只能针对视频及音乐文件，经过一番搜索后，我发现了 Collapsible Elements 这个在国内不怎么被提起的插件，经过一番本地测试后，它完美的实现了我所需要的功能。
后台设置：安装都会，就不说了，安装激活以后，进入后台在工具选项下面找到 XCollapse 选项点击进去，在 Choose a container: 后面有三个选项，分别是 TABLE、SPAN、DIV，这三个标签相信大家都不陌生，它们在这个插件里是用于定义文章内折叠区域的，按照喜好，我选择了 DIV；在下一栏 Update CSS Style: 里用于定义折叠区域 CSS 样式的，为了配合主题，我写的是：
background: #f6f6f6; padding-left:15px; border:1px solid #8aab46;至此，插件的设置就完成了，需要注意的是，写 CSS 时，必须写成一行，不能分行，否则会出各种莫名其妙的问题，且推荐先写 CSS 然后再选择上面的 DIV 再点 Update Options，因为此页面每刷新一次，无论你选或者是没选，它会自作主张的把 Choose a container: 设为第一个选项。
使用方法：按照一般套路进入后台选择添加新文章，在编辑器为 HTML 模式下你会发现多出一个名为 XCollapse 的标签，点它一下，出现了一个类似于下面的代码：
<a href="#" onclick="xcollapse('X1898');return false;"> REPLACE WITH LINK ELEMENT HERE... </a> <br /> <div> REPLACE WITH COLLAPSIBLE ELEMENT HERE... </div>其中红色部分你可以改为诸如点击打开之类的话（如果你嫌每次编辑麻烦，你可以利用 CTRL+F 修改插件
collapsible-elements.php 的相关位置），蓝色的部分就是给你写入需要折叠内容的区域。下面的是演示：
文本演示
>>原链接已跑路几百年，2023/10迁移博客时注 😂
Hello! World
图片演示
视频演示
>>原链接已跑路几百年，2023/10迁移博客时注 😂
OK，介绍结束，希望能对您有帮助。