关于博客Read More按钮的改进

最新推荐文章于 2022-09-26 11:14:53 发布
最新推荐文章于 2022-09-26 11:14:53 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： Web-Design 文章标签： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/The_MADAO/article/details/52298859
版权

关于博客Read More按钮的改进

先说一点题外话

这篇文章是针对我利用github page搭建的博客所写的，附上博客链接： Yuuki_Dach’s Blog

最近一段时间临近开学，要处理的事情很多，更新博客的速度也慢了下来，开学以后也大概就是这个速度了吧。

关于这个博客的建立过程，我还是想稍微再提一下。从一开始的landscape到icarus主题，再回到默认的landscape，中间还是发生了许多事情。主要的一个原因还是landscape给我们展示文章的空间更大一些，方便阅读。而且自己修改起来也比较方便。

至于主色调。因为自己经常长时间看着屏幕，所以希望能看到比较缓和一点的颜色，没有那么刺眼。因此选中了黑色。在自己改变了几处地方之后，意外的发现和 Morris’s Blog 很相似。鉴于自己在网页设计这方面基础近乎为0，后来的一些更新，或多或少都有借鉴他的一些东西，包括这里要提到的文章栏里Read More这个按钮。

下面还是快点进入正题吧。

这个按钮是我学习jQuery的一个开端，或者说，是起因。

那么什么是jQuery呢？

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document trave

最低0.47元/天 解锁文章
Yuukidach
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp中用uview的u-read-more遍历显示一个数组的内容，每个数组中的内容占用一行，使用模板字符串渲染...
weixin_42587866的博客
01-18 725
在uniapp中使用uview的u-read-more组件遍历显示一个数组的内容，每个数组中的内容占用一行，可以使用v-for指令来遍历数组中的每个元素。在模板中使用模板字符串来渲染每一行的内容。例如： <template> <div> <u-read-more v-for="item in items" :key="item.id" :text="ite...
前端基础代码
inexaustible的博客
04-18 1157
1、字符串+值 < ... :placeholder=" '回复用户id为' + item.uid "/> 2、ReadMore 展开阅读更多 <template> <u-read-more show-height="250"text-indent="0" :toggle="true" close-text="点击展开详情"> // 内容 <view> ...... </view> &...
通过css控制div内容展开更多/收起效果
铁锤妹妹的博客
09-26 5104
需要设置一个变量控制展开 / 收起效果
vue使用弹出框时u-editor组件的下拉被遮盖
青春不打烊的博客
06-20 362
在组件中添加：zIndex: 99999,
Jquery阅读全文(readmore.js)效果
极客神殿
01-20 4304
jQuery点击阅读全文展开查看全部内容 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <title>&lt...
唯美绿色树叶漂亮的博客CSS模板_唯美绿色树叶小清新企业整站导航按钮漂亮.rar
最新发布
09-12
6. **阅读相关元素**：read_more.gif 和 reading.gif 可能是“阅读更多”按钮和文章阅读状态的图形表示，这些元素的CSS样式可以调整它们在页面上的位置和交互效果。 7. **标题样式**：h2_img.gif 通常用于装饰二级...
canyuegongzi.github.io:博客
03-30
例如，`document.querySelector('.read-more').addEventListener('click', showDetails)` 会在点击“阅读更多”按钮时触发显示文章详情的函数。 总的来说，canyuegongzi.github.io 博客的源代码是一个学习 HTML ...
BlogWebsite:这是我的第一个博客网站
03-19
当您单击readmore按钮时，每个博客都会显示在单独的页面上。 所有博客均以滑动格式显示。 依赖 正文解析器：^ 1.19.0 ejs：^ 3.1.6 快递：^ 4.17.1 lodash：^ 4.17.21 链接到本网站的模板 如何操作此博客平台 克隆...
英文简单的CSS博客模板下载_英文简单博客简洁清爽.rar
09-12
- read_more.gif可能是一个“阅读更多”按钮的图形。 - search.gif可能是搜索框的图标。 - r_menu.gif、l_menu.gif可能代表右侧和左侧的菜单栏图标。 - logo.gif可能是博客的标志或LOGO。 - banner.gif可能作为...
个性花纹背景CSS模板_个性花纹企业博客.rar
09-11
9. `read_more.gif` - 通常是一个“阅读更多”按钮的图形，用于引导用户点击进入详细内容。 10. `index.html` - 这是网站的主页面，包含了整个网页的HTML结构和内容，与CSS文件一起构成一个完整的工作页面。 综合...
Jquery阅读全文
极客神殿
12-06 234
<!DOCTYPE html> <html class="hb-loaded"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <title></t...
js——文本超过三行查看更多
qq_43201350的博客
10-28 1522
wxml文件 <view class='{{readmore.status ? "hide" : ""}}'> 昆明菌子极多。雨季逛菜市场，随时可以看到各种菌子。最多，也最便宜的是牛肝菌。牛肝菌下来的时候，家家饭馆卖炒牛肝菌，连西南联大食堂的桌子上都可以有一碗。牛肝菌色如牛肝，滑，嫩，鲜，香，很好吃。炒牛肝菌须多放蒜，否则容易使人晕倒。青头菌比牛肝菌略贵。这种菌子炒熟了也还是浅绿色的，格调比牛肝菌高。菌中之王是鸡枞，味道鲜浓，无可方比。鸡枞是名贵的山珍，但并不真的贵得惊人。一盘红烧鸡枞的
html 单击readmore 无效,jQuery 显示与隐藏更多内容插件 readmore.js
weixin_34072296的博客
06-03 240
开发一个 WordPress 文章筛选功能时，因为选项较多，默认只显示一行，可通过更多与关闭按钮来切换内容，使用到强大实用且轻巧的 jQuery readmore.js插件，可显示与隐藏更多内容，自动添加“更多”和“关闭”链接，这些都是可以自定义。readmore.js使用非常简单，无需复杂的格式或编码的类名，只需调用.readmore()包含文本块的元素和readmore.js即可完成剩下的工作...
jQuery Readmore 很简单的阅读更多，可以关闭
freejs
07-21 716
jQuery Readmore 很简单的阅读更多，可以关闭  在js文件中设置好默认显示高度，超过的会隐藏 演示     JavaScript Code &lt;script&gt;       $('article').readmore({maxHeight: 216});     &lt;/script&gt;     JavaScript ...
html鼠标点击之后隐藏,鼠标点击显示与隐藏更多内容 readmore.js
weixin_30280267的博客
06-03 1254
readmore.js使用非常简单，无需复杂的格式或编码的类名，只需调用.readmore()包含文本块的元素和readmore.js即可完成剩下的工作。注意：Readmore.js与jquery版本大于1.7.0，浏览器版本尽量使用更高的，低版本的也支持，但是体验效果不好。一、使用方法1、添加到网站中2、使用$('article').readmore();就是这么简单。你可以改变动画的速度，崩溃...
clamp.js用法初窥
热门推荐
站起来，离天空就近了。
10-17 1万+
众所周知，要实现文本溢出显示省略号可以用text-overflow:ellipsis;但是只能显示单行文本； 多行文本可以用-webkit-line-clamp:n;但是这是webkit的私有属性，只有在webkit浏览器或移动端浏览器（大部分是webkit内核）可以发挥作用； 为了兼容各浏览器，可以使用::after选择器模拟省略号，但是此方案有一个缺点：及时没有溢出是省略号也存在。 经过
hexo发布html,教你定制Hexo的landscape打造自己的主题_html/css_WEB-ITnose
weixin_29304021的博客
06-22 656
我敢肯定大家不仅想拥有自己的博客，还想有一套自己的主题。目前Hexo的主题多数都是从官方主题landscape修改而成的，然而别人能修改，你也可以修改，就算你不会编程，不会web前端，跟着我做你一样可以做出自己想要的主题样式，打造属于你自己的主题。ps:我也是一点一点摸索的，参考了很多教程。我的博客地址(http://www.codertian/com)我会把博文先发到这里，请大家多多支持。有问题...
Hexo博客首页自动添加Read More标记-不在首页显示全部文章全部内容
广志大兄弟的博客
03-10 7001
原文来自背景 解决过程 原文代码 处理方法 注意 背景hexo 在写作的时候，如果在文中添加(解决过程在 hexo 的 github 上看到有人说是跟主题有关，费死八难找到了代码的关键部分： 文件/themes/[主题名]/layout/_partial/article.ejs其中有一段为： 原文代码无论是哪个主题，都有这个文件，请寻找以<div class="article-entry" ……
ReadMore 之 cnblogs 博客园使用指南
技术宅，专注云原生、Go、Linux、Java等技术分享，原创文章、效率工具、实战解决方案！关注我，了解互联网动态，学 IT 不迷路
10-17 3798
readmore来源于：https://openwrite.cn/openwrite/openwrite-readmore/ 博客园接入 readmore 很简单，三步走，2 分钟搞定！ 在 OpenWrite 生成 readmore 脚本 微信公众号设置关键词回复 在博客园设置中添加脚本 第一步， 在 OpenWrite 生成 readmore 脚本 在 OpenWrite 后台，增长工...
uview u-read-more的使用
03-24
uview u-read-more 是一个用于展开和收起长文本的组件，可以在小程序中使用。使用方法如下： 1. 在需要展开和收起的文本区域中，使用 u-read-more 组件包裹起来。 2. 在 u-read-more 组件中，使用 slot="content" 插槽来放置需要展开和收起的文本内容。 3. 在 u-read-more 组件中，使用 slot="more" 插槽来放置展开和收起按钮的文本内容。 4. 在 u-read-more 组件中，使用 v-model 来绑定展开和收起的状态。 完整代码如下： <template> <view> <u-read-more v-model="isExpanded"> <view slot="content"> 这是一段需要展开和收起的长文本，可以放置任何文本内容。 </view> <view slot="more"> {{ isExpanded ? '收起' : '展开' }} </view> </u-read-more> </view> </template> <script> export default { data() { return { isExpanded: false } } } </script> 关于 uview 的使用，可以参考官方文档：https://www.uviewui.com/components/readmore.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值