利用 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,介绍结束,希望能对您有帮助。
Loading...