圆弧派博客 - 专注于网络技术 - PHP

为自己博客or网页加上鼠标流光背景JS特效

2023-07-02T16:06:00+08:00

鼠标流光背景特效（乱起的名别太在意 :@(献花) ），canvas画布配合JS即可实现，这个版本是我从一个人单页里面抄下来的，顺便优化了一下后将其加入到了本站夜间模式{card-default label="快速实现" width=""}

{/card-default}将特效设为博客夜间模式1.先在body写入

2.更改css属性display为none（日间模式不显示该元素）.sbcanvas{ display: none; position: fixed; top: 0; z-index: -9; } 3.在joe.mode.css文件夹最下面加入以下代码html[data-night='night'] .sbcanvas{display:block;}完成以上操作即可大功告成，快去开启夜间模式试一下吧

为typecho joe添加评论区语录

2023-05-14T14:58:00+08:00

前言博客之前经常有人回复一些无意义的内容，导致很多垃圾评论所以我在想既然很多游客喜欢回复一些垃圾评论，不如我直接设置一个随机一言，让他们省去了垃圾评论的打字时间，同时又能让我的评论区少一些无意义的评论而且那些真正认真回复的人只需要一键删除即可，也不会很影响评论体验，所以就给自己的评论框添加了随机一言效果展示先来一波效果展示本教程仅以Joe主题为例，其他主题可自行发挥能力，如有技术问题，博主可提供简单的指导教程开始一、添加后台控制在 Joe/functions.php内添加以下代码// 评论框随机语录功能 $Comment_Citation = new Typecho_Widget_Helper_Form_Element_Select( 'Comment_Citation', array('off' => '关闭（默认）', 'on' => '开启'), 'off', '是否开启评论框随机语录功能', '介绍：开启后，评论框自动随机填充随机语录' ); $Comment_Citation->setAttribute('class', 'joe_content joe_other'); $form->addInput($Comment_Citation->multiMode()); //评论框随机语录链接/文字 $Comment_Citation__text = new Typecho_Widget_Helper_Form_Element_Textarea( 'Comment_Citation__text', NULL, "https://api.vvhan.com/api/ian", '评论框随机语录', '介绍：用于修改评论框随机语录（可以为api地址）
格式：一行一个，可以为api地址，也可为文字，可以填写多个API地址
注意：必须填写JSON格式的API，API需要开启跨域权限才能调取，否则会调取失败！
如果为api地址可在前台按钮刷新内容，如果为文字只能刷新页面来刷新内容（建议使用api地址）
推荐API：https://api.vvhan.com/api/ian' ); $Comment_Citation__text->setAttribute('class', 'joe_content joe_other'); $form->addInput($Comment_Citation__text);二、添加刷新按钮（可省略）在 Joe/public/comment.php 添加以下代码，不添加则不设置刷新按钮{tabs-pane label="添加位置"}{/tabs-pane}{tabs-pane label="添加代码"}options->Comment_Citation !== "off") : ?>

语录

{/tabs-pane}三、添加内容获取1、添加后端获取在 Joe/core/function.php 添加以下代码{tabs-pane label="添加位置"}{/tabs-pane}{tabs-pane label="添加代码"}/* 获取评论框随机语录 */ function _getComment_Citation() { $CitationRandom = explode("\r\n", Helper::options()->Comment_Citation__text); echo $CitationRandom[array_rand($CitationRandom)]; }{/tabs-pane}2、添加前端获取在 Joe/public/config.php 添加以下代码{tabs-pane label="添加位置"}{/tabs-pane}{tabs-pane label="添加代码"}CITATION: ``, // 评论随机语录{/tabs-pane}四、添加核心代码{hide}在 Joe/assets/js/joe.global.min.js 添加以下代码if ($(".Comment_Citation").length) {function e() {let e = Joe.CITATION,t = /(https?:\/\/[^\s]+)/g;t.test(e)? $.ajax({url: e,dataType: "text",success: (e) => $(".joe_comment__respond-form .body textarea").val(e),}) : $(".joe_comment__respond-form .body textarea").val(e);}e(),$(".Comment_Citation").click(function () { e(); });}{/hide}五、添加刷新按钮样式（可省略）这是刷新按钮样式，如果前面没添加刷新按钮，可跳过此步骤在 Joe/assets/css/joe.global.min.css添加以下代码.joe_owo__contain { position: static; .box { position: absolute; bottom: 100%; margin-bottom: 6px; left: 0px; padding-top: 5px; border: 1px solid rgba(0, 0, 0, 0.15); border-color: transparent; box-shadow: 0 0 10px 8px rgb(116 116 116 / 8%); } } .comment_box { cursor: pointer; text-align: center; color: var(--routine); height: 26px; line-height: 26px; background: var(--background); opacity: 0.85; border-radius: 13px; width: 70px; margin-left: 5px; &:hover { background: var(--theme); color: #fff; }}结语教程稍有点复杂，但其实是沿用侧栏随机一言的方法，所以如果你能看懂核心js的话，可以仅修改第四步中ajax的 url 来实现，那样会简单很多很多

phpMySQL添加自增值和新表单元格无法编辑解决方法

2023-05-07T20:21:00+08:00

在刚创建数据表后，想用phpMyAdmin编辑表的时候，有没有遇到phpMyAdmin提示’当前所选内容没有包含唯一字段。单元格编辑、复选框、编辑、复制和删除无法正常使用’呢？这是表里面没有设置主键的原因已有的mysql数据表，希望增加一个自增的字段，并设置新数据的初始值，实际上不复杂，只是做个备忘。新表设置主键我们先添加一个int自增值字段，比如，我在表A里新增一个字段名为id、数据类型为INT的字段并将其设置为主键，所执行的SQL语句为：alter table A add column id int auto_increment primary key;语法格式如下：alter table 表名 add column 字段名数据类型 auto_increment primary key;设置主键到’结构’选项卡，选中刚才添加的字段，选择’主键’，然后点确定就好了回到浏览，即可看到，已经可以进行编辑phpmysql给字段增加自增属性在mysql中，可以通过给字段添加“AUTO_INCREMENT”属性来给字段增加自增属性，语法“alter table 表名 add column 字段名数据类型 AUTO_INCREMENT;”通过给字段添加 AUTO_INCREMENT 属性来实现字段自增长。语法格式如下：字段名数据类型 AUTO_INCREMENT默认情况下，AUTO_INCREMENT 的初始值是 1，每新增一条记录，字段值自动加 1。一个表中只能有一个字段使用 AUTO_INCREMENT 约束，且该字段必须有唯一索引，以避免序号重复（即为主键或主键的一部分）。AUTO_INCREMENT 约束的字段必须具备 NOT NULL 属性。AUTO_INCREMENT 约束的字段只能是整数类型（TINYINT、SMALLINT、INT、BIGINT 等）。AUTO_INCREMENT 约束字段的最大值受该字段的数据类型约束，如果达到上限，AUTO_INCREMENT 就会失效。自增字段一般用于主键中。当主键定义为自增长后，这个主键的值就不再需要用户输入数据了，而由数据库系统根据定义自动赋值。每增加一条记录，主键会自动以相同的步长进行增长。

360壁纸Api接口文档

2023-04-04T15:04:00+08:00

360壁纸Api接口文档分类接口接口地址：http://wp.birdpaper.com.cn/intf/getCategory 返回格式：JSON 请求方式：GET 请求示例：http://wp.birdpaper.com.cn/intf/getCategory 请求参数说明：直接请求返回参数说明：名称类型必填说明 old_id String 是分类id category String 是分类名称 position String 否总张数 hot_tag String 否二级分类返回示例： { errno: 0, msg: "", data: [ { category: "4K专区", show_name: "4K", position: "100", hot_tag: [], old_id: "36" }, { category: "美女模特", show_name: "美女", position: "99", hot_tag: [ { tag: "清纯", show_tag: "清纯" }, { tag: "YOU物馆", show_tag: "YOU物馆" }, { tag: "性感女神", show_tag: "性感女神" }, { tag: "文艺古风", show_tag: "文艺古风" } ], old_id: "6" }, ] } 分类详情接口地址：http://wp.birdpaper.com.cn/intf/GetListByCategory?cids=分类ID&pageno=1&count=10 返回格式：JSON 请求方式：GET 请求示例：http://wp.birdpaper.com.cn/intf/GetListByCategory?cids=36&pageno=1&count=10 请求参数说明：名称类型必填说明 cids Number 是分类id pageno Number 是分页 count Number 是加载数量返回参数说明：名称类型必填说明 id String 是唯一id url String 是图片地址 category String 是所属分类 category String 否描述【关键字】示例代码： { errno: 0, msg: "", data: { total_count: 2000, total_page: 200, pageno: 1, count: 10, list: [ { id: "2023166", category: "4K专区", tag: "战斗机,飞机,跑道", url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202007/3650801a856228d3997177edb8a1af85--2407623804.jpg", status: "1", live_open: false, class_id: "36" }, { id: "2023154", category: "4K专区", tag: "春意盎然,草原,牧场,辽阔", url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202007/1d14e3582128cc37c000732f978e8f1f--367037341.jpg", status: "1", live_open: false, class_id: "36" }, { id: "2023151", category: "4K专区", tag: "春意盎然,草原,蓝天,云朵,护眼", url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202007/041032637716209918e845fa5ad71f84--3089467778.jpg", status: "1", live_open: false, class_id: "36" }, { id: "2022431", category: "4K专区", tag: "国漫,鬼刀,冰公主", url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202006/475b89875e937bd2b3c66ab671399629--4138468370.jpg", status: "1", live_open: false, class_id: "36" }, { id: "2022428", category: "4K专区", tag: "护眼壁纸,蒲公英", url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202006/b53b176f0834948e28180a23512aa2b2--694726005.jpg", status: "1", live_open: false, class_id: "36" }, { id: "2021933", category: "4K专区", tag: "夏威夷海滩,,黄昏,,", url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202006/e567cb40c5774304783516299e518be4--1848356019.jpg", status: "1", live_open: false, class_id: "36" }, { id: "2021927", category: "4K专区", tag: "夏威夷,,海滩,,航拍", url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202006/c2a52d1c2fc64ab43e4b1308cb200645--2561210487.jpg", status: "1", live_open: false, class_id: "36" }, { id: "2021917", category: "4K专区", tag: "绿巨人,漫威,钢铁侠", url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202006/98dc794cf51b17a81972be1b119bae09--605464834.jpg", status: "1", live_open: false, class_id: "36" }, { id: "2021811", category: "4K专区", tag: "金发,美女,精灵,兽耳", url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202006/2a2ffaeeddfcedeabe6cbd6568b75cd9--2249190785.jpg", status: "1", live_open: false, class_id: "36" }, { id: "2021810", category: "4K专区", tag: "森林,丛林,河流,航拍", url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202006/682e17b213552fc3083e393b5da4b4b6--2092649417.jpg", status: "1", live_open: false, class_id: "36" } ] } } 搜索功能接口地址：http://wp.birdpaper.com.cn/intf/search?content=搜索关键字&pageno=1&count=10 返回格式：JSON 请求方式：GET 请求示例：http://wp.birdpaper.com.cn/intf/search?content=模特&pageno=1&count=10 请求参数说明：名称类型必填说明 content Number 是关键字 pageno Number 是分页 count Number 是加载数量返回参数说明：名称类型必填说明 id String 是唯一id url String 是图片地址 category String 是所属分类 tag String 否描述【关键字】示例代码： { errno: 0, msg: "", data: { total_count: 2000, total_page: 200, pageno: 1, count: 10, list: [ { id: "324680", tag: "美女模特", category: "美女模特", url: "http://cdn-ali-img-staticbz.shanhutech.cn/bizhi/staticwp/201903/761350b68e44fca315cff737d409b19f.jpg", class_id: "6" }, { id: "324678", tag: "美女模特", category: "美女模特", url: "http://cdn-ali-img-staticbz.shanhutech.cn/bizhi/staticwp/201903/e83a9930f71dc0d9cb0d184a9027c7f2.jpg", class_id: "6" } ] } } 最新壁纸接口地址：http://wp.birdpaper.com.cn/intf/newestList?pageno=1&count=10 返回格式：JSON 请求方式：GET 请求示例：http://wp.birdpaper.com.cn/intf/newestList?pageno=1&count=10 请求参数说明：名称类型必填说明 pageno Number 是分页 count Number 是加载数量返回参数说明：名称类型必填说明 total_count String 否总条数 total_page String 否总页数 pageno String 是当前页数 count String 是当前条数 list Array 否数据数组 category String 否所属分类 url String 是地址 tag String 否描述【关键字】示例代码： { errno: 0, msg: "", data: { total_count: 180, total_page: 18, pageno: 1, count: 10, list: [ { id: "2022854", category: "动漫卡通", tag: "二次元,教室,桌椅,黑板", url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202007/d675b9065438991b26f1b842824c49a8--1570210833.jpg", status: "1", live_open: false, class_id: "26" }, { id: "2022848", category: "风景大片", tag: "油菜花,平原,田野,广阔", url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202007/f2e18b5f43f5a2a4e8ba826e58cd3bdd--774278070.jpg", status: "1", live_open: false, class_id: "9" }, { id: "2022845", category: "风景大片", tag: "自然风光,山顶,雾,群山", url: "http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202007/9b8ad17988a067f2af48dfbd1403a88a--2871356798.jpg", status: "1", live_open: false, class_id: "9" }, ] } } 备注名称类型必填说明 total_count String 否总条数 total_page String 否总页数 pageno String 是当前页数 count String 是当前条数壁纸下载站：戳我前往

「公益」MetingApi接口（可解网易云音乐黑胶歌曲）

2023-02-05T21:12:00+08:00

我们都是苦旅人，因为一点善念、一丝感动、一处荫蔽走在山水间，也曾发宏愿把世界走遍，却止步于尘烟。2023年应是改变的一年，势必遇见新的自己！给各位拜个晚年,元宵节快乐!Github开源地址:https://github.com/metowolf/MetingMeting自带的接口目前无法解析网易云黑胶音乐了（只能放40秒），所以圆弧免费为广大站长提供一个能解析网易云黑胶和QQ音乐VIP歌曲的MetingApi接口：https://v.iarc.top/在Meting.js文件里第40行左右的API替换成上面的即可再附上一个第三方接口:https://api.mizore.cn/meting/api.php第个直接请求会403，并非接口失效，带上参数请求即可，例：https://api.mizore.cn/meting/api.php?server=netease&type=playlist&id=7783760543&r=:r 参数默认描述 id require 歌曲 ID / 播放列表 ID / 专辑 ID / 搜索关键字 server require 音乐平台: netease, tencent, kugou, xiami, baidu type require song, playlist, album, search, artist auto options 音乐链接，支持： netease, tencent, xiami fixed false 固定模式 mini false 迷你模式 autoplay false 自动播放 theme #2980b9 主题色 loop all 播放器循环播放，值： 'all', 'one', 'none' order list 播放顺序: 'list', 'random' preload auto 预加载值: 'none', 'metadata', 'auto' volume 0.7 默认音量，注意播放器会记住用户设置，用户自己设置音量后默认音量将不起作用 mutex true 防止同时播放，当这个播放开始时暂停其他播放 lrc-type 0 歌词类型 list-folded false 指示列表是否应该首先折叠 list-max-height 340px 列出最大高度 storage-name metingjs 存储播放器设置的 localStorage 键 {abtn icon="fa-bandcamp" color="#ff6800" href="https://www.iarc.top/57.html" radius="17.5px" content="Meting使用方法"/}该解析接口的网易云黑胶不会到期。绿钻到期了，QQ音乐只能解析非会员音乐了。

phpMyAdmin高级功能未激活解决方法、以及设置定时执行SQL语句

2023-01-19T01:15:00+08:00

解决phpMyAdmin高级功能尚未完全设置,部分功能未激活，这是我们登录到phpMyAdmin经常见到的问题，But要是有对高级功能（如定时事件）有需要了，那就不得不去将它激活了。PHPMyAdmin激活高级功能版本phpMyAdmin：4.9前期准备将phpMyAdmin文件夹中（你的phpMyAdmin安装路径，宝塔面板一般是在www/server中）/phpMyAdmin/sql/中的create_tables.sql下载到本地！第一步将create_tables.sql导入到phpMyAdmin导入后可能会报一下错，不过这并不影响第二步打开phpmyadmin文件夹下的“config.sample.inc.php”文件并复制，重命名为“config.inc.php”（如果已经有“config.inc.php”文件，直接修改即可）第三步将“config.inc.php”文件中的/ Storage database and tables /到/* End of servers configuration */之间的代码全部删除注释即可第四步注销phpmyadmin之后并重新登录。大功告成！这时再去看数据库工具栏里就多出来“事件、程序、设计器等功能”定时执行SQL语句1、首先查看计划事件是否开启：在phpmyadmin的SQL查询框中填入“show variables like '%scheduler%';”并执行当显示event_scheduler的“Value”为“ON”时，表示计划事件已开启；当显示event_scheduler的“Value”为“OFF”时，表示计划事件未开启。2、如果计划事件未开启，可按以下操作开启：到mysql配置文件my.cnf新增一项，在mysqld后面添加event_scheduler = on（或是event_scheduler = 1），保存后重启mysql服务器即可。在phpmyadmin的“事件”功能里，“事件计划状态”显示为“开”即计划事件已正常开启。3、添加定时任务在phpmyadmin的“事件”功能里，点击“新建”下的“添加事件”根据弹窗填写表格其中状态“ENABLED”为“启用”“DISABLED”为“不启用”“SLAVESIDE_DISABLED“为“在从库上不启用该事件“事件类型"RECURRING"为“循环执行”"ONE TIME"为“只执行一次”运行周期即根据需要选择执行的周期时间起始时间即开始执行的时间终止时间即结束时间，留空表示一直执行下去定义即执行的SQL语句用户按"数据库用户名@数据库地址"的格式填写最后点击"执行"即创建定时任务完成。最后这里记录下防以后踩坑！

phpmysql复制一列到另一列的方法

2023-01-17T22:04:00+08:00

mysql复制一列到另一列方法归类，方便使用的时候查找UPDATE 表名 SET B列名=A列名需求：把一个表某个字段内容复制到另一张表的某个字段。实现sql语句1:代码如下:UPDATE file_manager_folder f1 LEFT OUTER JOIN file_manager_folder f2 ON f1.name = f2.name AND f2.parentId = 54 SET f1.parentId = 54 WHERE f2.name IS NULL AND f1.id IN (1,2,3);实现sql语句2:代码如下:update B set extra = A.extra from A join B on (A.id = B.id);实现sql语句3:代码如下:update b set b.sms = (select a.sms from a where a.id = b.id)需要确定两张表中的id都是主键或者唯一实现sql语句4:代码如下:UPDATE A SET A.SMS = (SELECT B.SMS FROM B WHERE A.ID = B.ID) WHERE EXISTS (SELECT 1 FROM B WHERE A.ID = B.ID);实现sql语句5:复制一个表字段数据到另外一个表的字段，可以这么写：实现sql语句5:代码如下:UPDATE tb_1 INNER JOIN tb_2 ON tb_1.tid = tb_2.tid SET tb_1.tcontent = tb_2.tcontent附：同表复制需求：把同一张表的一个字段内的内容复制到另一个字段里例1：我想把article表中A字段的内容复制到article表中B字段里面sql语句为：代码如下:update article set B=A;例2：有时候，我们需要复制某个字段一整列的数据到另外一个新的字段中，这很简单，SQL可以这么写：代码如下:UPDATE tb_1 SET content_target = content_source;大概写法如下：代码如下:Update {your_table} set {source_field} = {object_field} WHERE cause现有表A和表B，希望更新A表，当 A.bid = B.id时，a.x = b.x, a.y=b.y：update a inner join b on a.bid=b.id set a.x=b.x,a.y=b.y;

为网站添加个新年灯笼提前增点喜庆

2022-12-23T22:14:00+08:00

效果图（与本篇文章上面一致）代码：将下面代码加在head标签或者body中即可年新乐快 .deng-box { position: fixed; top: -40px; right: 150px; z-index: 9999; pointer-events: none; } .deng-box1 { position: fixed; top: -30px; right: 10px; z-index: 9999; pointer-events: none } .deng-box2 { position: fixed; top: -40px; left: 150px; z-index: 9999; pointer-events: none } .deng-box3 { position: fixed; top: -30px; left: 10px; z-index: 9999; pointer-events: none } .deng-box1 .deng, .deng-box3 .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, .8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 5s infinite ease-in-out; box-shadow: -5px 5px 30px 4px #fc903d } .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, .8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 3s infinite ease-in-out; box-shadow: -5px 5px 50px 4px #fa6c00 } .deng-a { width: 100px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, .1); margin: 12px 8px 8px 8px; border-radius: 50% 50%; border: 2px solid #dc8f03 } .deng-b { width: 45px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, .1); margin: -4px 8px 8px 26px; border-radius: 50% 50%; border: 2px solid #dc8f03 } .xian { position: absolute; top: -20px; left: 60px; width: 2px; height: 20px; background: #dc8f03 } .shui-a { position: relative; width: 5px; height: 20px; margin: -5px 0 0 59px; -webkit-animation: swing 4s infinite ease-in-out; -webkit-transform-origin: 50% -45px; background: orange; border-radius: 0 0 5px 5px } .shui-b { position: absolute; top: 14px; left: -2px; width: 10px; height: 10px; background: #dc8f03; border-radius: 50% } .shui-c { position: absolute; top: 18px; left: -2px; width: 10px; height: 35px; background: orange; border-radius: 0 0 0 5px } .deng:before { position: absolute; top: -7px; left: 29px; height: 12px; width: 60px; content: " "; display: block; z-index: 999; border-radius: 5px 5px 0 0; border: solid 1px #dc8f03; background: orange; background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03) } .deng:after { position: absolute; bottom: -7px; left: 10px; height: 12px; width: 60px; content: " "; display: block; margin-left: 20px; border-radius: 0 0 5px 5px; border: solid 1px #dc8f03; background: orange; background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03) } .deng-t { font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif; font-size: 3.2rem; color: #dc8f03; font-weight: 700; line-height: 85px; text-align: center } .night .deng-box, .night .deng-box1, .night .deng-t { background: 0 0 !important } @-moz-keyframes swing { 0% { -moz-transform: rotate(-10deg) } 50% { -moz-transform: rotate(10deg) } 100% { -moz-transform: rotate(-10deg) } } @-webkit-keyframes swing { 0% { -webkit-transform: rotate(-10deg) } 50% { -webkit-transform: rotate(10deg) } 100% { -webkit-transform: rotate(-10deg) } }

年

新

乐

快

如何让css按钮居中&CSS小技巧

2022-12-23T14:20:00+08:00

margin：auto的用途水平垂直居中margin: auto;{margin-left:auto;margin-right:auto;}缩写形式为:{margin:0 auto;}0为上下边距，可按自己需要设置成不同的实现最高渲染性能的去除下边框cssdiv { 　border: 1px solid; 　border-bottom: 0 none; /**key code here**/}增加icon按钮点击区域点击区域大小从 16 × 16 一下子提升到 38 × 38.icon- clear { 　width: 16px; 　height: 16px; 　border: 11px solid transparent; 　 /**key code here**/}永远居中的dialog(可兼容到IE7)demotitle><style> .container { position: fixed; top:0; right: 0; left: 0; bottom: 0; background-color: rgba(0,0,0,.5); text-align: center; font-size: 0; white-space: nowrap; overflow: auto; } .container:after { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .content { width: 240px; height: 120px; padding: 20px; } .dialog { display: inline-block; vertical-align: middle; border-radius: 6px; background-color: #fff; font-size: 14px; white-space: normal; }style>head><body><div class="container"><div class="dialog"><div class="content">这dialog永远居中div>div>div>body>html>去除页面默认滚动条(PC端有效)/**good code**/html {overflow: hidden;}/**bad code**/html, body { overflow: hidden;} </article> <article> <h1>为Typecho Joe主题添加一个侧边栏文章导读！</h1> <p>2022-12-18T23:32:41+08:00</p> 效果图一、引用1个JS<script src="https://cdn.jsdelivr.net/gh/xh8039/static-assets/Joe/assets/js/joe.autoc.min.js?version=1.23"></script>二、添加一段css打开文件:/usr/themes/Joe/assets/css/joe.autoc.css在此文件最下方加入这一行代码即可：/*外部*/ .outline-outside { background: var(--background); } /*章节*/ .outline-chapter { font-size: 0.95rem; line-height: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .outline-subject { padding: 0 10px; } .outline-chapter-code { padding-right: 5px; } .outline-link:link, .outline-link:visited { color: var(--routine); text-decoration: none; transition: 0.15s; } .outline-link:hover { color: var(--theme); } </article> </main></body></html>