博客园美化相关模块
SimpleMemory风格化主题
https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/Docs/GettingStarted/install
详细教程可以看这个大佬的https://www.cnblogs.com/6b7b5fc3/p/12729633.html
=====更新
版本更新到v2了,地址变了,顺便放几张图在文章末尾,作为头图
https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2/
live2d小人
https://l2dwidget.js.org/docs/index.html
模型预览https://blog.csdn.net/wang_123_zy/article/details/87181892
可通过使用浏览器访问 https://unpkg.com/2D模型全名称@1.0.5/ 来查找对应的模型json地址,如https://unpkg.com/live2d-widget-model-chitose@1.0.5
https://blog.csdn.net/zadaya/article/details/105720645
使用总结https://www.freesion.com/article/8715586195/
使用文档,参数,API:(github的挂掉了) https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
====更新
最近发现小人不显示了,修改了一下配置,开头换成引用这两个js,第二个必须要引用,否则会报错“L2Dwidget is not defined”
input控件+CSS实现折叠文字内容
参考https://www.cnblogs.com/e0yu/p/10480216.html
通过label的for属性可以给label中的文字绑定一个有checked属性的input控件的状态(如checkbox、radio等),再通过css的~符号控制checked属性让指定样式切换。
其中需要隐藏的部分的id为hide_text,input控件的id为control,为了显示效果就把它隐藏掉了
#hide_text {display: none;} #control{display: none;} #control:checked ~ #hide_text {display: block;}
隐藏了input控件后为了提示读着这段文字可以点击,我们可以使用添加下划线和将文本加粗、改为蓝色等方法。
需要注意的是html中必须让input控件与要隐藏的文本内容处于同一个布局中,如果被<p>或者<div>这样的标志将其隔开,将实现不了效果
<html> <head></head> <body> <p style="margin-left: 30px"> <span style="text-decoration: underline"> <strong> <span style="color: rgba(51, 102, 255, 1)"> <label class="nav-btn" for="control">>>>点击查看更多:</label> </span> </strong> </span> </p> <div> <input id="control" class="nav-con" type="checkbox" name="" /> <ul id="hide_text"> <li>第一段内容 <ul> <li>启用活动页</li> <li>优化了等待时间</li> </ul> </li> <li>第二段内容 <ul> <li>我知道了</li> <li>进一步改进</li> </ul> </li> </ul> </div> </body> </html>
(持续更新..)