typecho (wiki).png

实现图片慢加载
原作者:https://www.nanlon.cn/typecho-add-jquery-lazyload.html
1、为<img>标签添加data-original自定义属性
在网站根目录下找到var\HyperDown.php

在HyperDown.php中找到第349行// image,本段代码如下:

// image
$text = preg_replace_callback(
    "/!\[((?:[^\]]|\\\\\]|\\\\\[)*?)\]\(((?:[^\)]|\\\\\)|\\\\\()+?)\)/",
    function ($matches) use ($self) {
        $escaped = htmlspecialchars($self->escapeBracket($matches[1]));
        $url = $self->escapeBracket($matches[2]);
        $url = $self->cleanUrl($url);
        return $self->makeHolder(
            "<img src=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\">"
        );
    },
    $text
);
将本段代码中以下一行:

"<img src=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\">"
修改为:

// 前面src中为占位图片(图片路径修改为自己的),data-original中为图片真实地址
"<img src=\"https://www.nanlon.cn/usr/uploads/loading.gif\" data-original=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\">"

2、在主题文件 footer.php 的 </body> 标签前添加如下代码:
这里主要是引入jquery.js和jquery.lazyload.js,并初始化lazyload的图片显示样式。

注意:因主题自带jquery.js,故这里未做引入!占位符图片请替换为你的gif图片地址。

//引入jquery.lazyload.js
<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
//js出始化lazyload并设置图片显示方式
<script>$(function() {$("img").lazyload({effect: "fadeIn", threshold: 200});});</script>
//pjax开启后的pjax回调
<script type="text/javascript">
$(document).on('pjax:complete', function() {
    $("img").lazyload({
    effect: "fadeIn",
    threshold: 200
    });
});
</script>

附:图片显示方式参数设置
$("img").lazyload({
    placeholder : "img/loading.gif", //用图片提前占位
    // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
    effect: "fadeIn", // 载入使用何种效果
    // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
    threshold: 200, // 提前开始加载
    // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
    event: 'click',  // 事件触发时才加载
    // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
    container: $("#container"),  // 对某容器中的图片实现效果
    // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
    failurelimit : 10 // 图片排序混乱时
    // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});
让文章缩略图均一显示
style="width:600px;height:350px;width:100%;max-width:100%;height:100%;max-height:100%;"
给博客添加随机喜欢音乐
<!-- 看什么看,没见过美女吗? -->
<script LANGUAGE="JavaScript">
 var musicx = new Array("https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/09/QQ图片20200815182041 (1).gif","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/08/QQ图片20200815184731.jpg","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/08/QQ图片20200822200753.jpg","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/08/QQ图片20200822200753.jpg");
 var musicid = new Array("https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/08/Capital Cities - Safe and Sound.mp3","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/09/AJR - Next Up Forever.mp3","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/09/Ashram - Rose and Air.mp3","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/09/DOUGHNUT,hololive IDOL PROJECT - 箱推.mp3","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/09/Ed Sheeran - I Will Take You Home.mp3","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/09/Ehrling - Blissful.mp3","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/09/Ehrling - Groove.mp3","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/09/ILLENIUM,Julien Marchal - Beautiful Creatures (Julien Marchal Piano Cover).mp3","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/09/Kevin Penkin - Florence.mp3","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/09/Persephone - Retro Funky (SUNDANCE remix).mp3","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/09/Racoon Racoon - Georgia.mp3","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/09/TheFatRat,Foster The People - Don't Stop (TheFatRat Remix).mp3","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/09/Wine-9 - The Chainsmokers - Closer(Tropical 民乐Remix)(Wine-9 remix).mp3","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/09/接个吻,开一枪,沈以诚,薛明媛 - 失眠飞行.mp3","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/09/千坂,逆时针向 - 逆时针向 - Forever 21 (千坂 Remix).mp3","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/09/桑子 - 一天一天(小清新钢琴纯音乐)(翻自 Various Artists).mp3","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/09/希林娜依·高,Ken Gao - Do You Think About Me (feat. Curley G).mp3","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/09/星夜,小狼 - 你的名字 - 黄昏之时(钢琴小提琴版).mp3","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/09/音阙诗听,赵方婧 - 芒种.mp3");
 var musicartist = new Array("Capital Cities","AJR","Ashram","DOUGHNUT,hololive IDOL PROJECT","Ed Sheeran","Ehrling","Ehrling","ILLENIUM,Julien Marchal","Kevin Penkin","Persephone","Racoon Racoon","TheFatRat","Wine-9 - The Chainsmokers","接个吻,开一枪,沈以诚,薛明媛","千坂,逆时针向","桑子","希林娜依·高,Ken Gao","星夜,小狼","音阙诗听,赵方婧");
 var musicname = new Array("Safe and Sound","Next Up Forever","Rose and Air","箱推","I Will Take You Home","Blissful","Groove","Beautiful Creatures","Florence","Retro Funky","Georgia","Don't Stop","Closer","失眠飞行","Forever 21 (千坂 Remix)","一天一天(小清新钢琴纯音乐)","Do You Think About Me","你的名字 - 黄昏之时","芒种");
var randomNumx = Math.floor((Math.random() * musicx.length));
var randomNumm = Math.floor((Math.random() * musicid.length));
document.getElementById('fuckyou').setAttribute("data-cover",musicx[randomNumx]); 
document.getElementById('fuckyou').setAttribute("data-url",musicid[randomNumm]); 
document.getElementById('fuckyou').setAttribute("data-name",musicname[randomNumm]); 
document.getElementById('fuckyou').setAttribute("data-artist",musicartist[randomNumm]); 
</script>
给博客添加随机缩略图
<script LANGUAGE="JavaScript">
 var myPix = new Array("https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/08/final_5f56cf80043aff00bcc0df7d_501337.gif","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/08/final_5f56cfd4d115cb003682daa7_135144.gif","https://wolflong.oss-cn-shanghai.aliyuncs.com/typecho/2020/09/08/final_5f56d013cfdd7200d260d7a0_69562.gif");
    var randomNum = Math.floor((Math.random() * myPix.length));
    document.getElementById("myPicture").src = myPix[randomNum];
</script>
Typecho默认的a标签是只有href属性的,也就是覆盖本页打开。但是大多数情况下我们都希望链接从新窗口或新标签页打开。

1.0版本可以直接更改typecho的php代码,修改/var/CommonMark/HtmlRenderer.php文件。但是1.1新版去掉了 /var/CommonMark/HtmlRenderer.php这个文件。

于是用了 https://minirizhi.com/30.html 这位兄台改的插件
下载地址:https://wolflong.oss-cn-shanghai.aliyuncs.com/%E7%B3%BB%E7%BB%9F%E8%BD%AF%E4%BB%B6/Typecho/MyBlank.zip
之前用的是 UTF-8 的编码,在 MySQL 中,UTF-8 只支持最多 3 个字节,而 emoji 是 4 个字节,所以就出现了像上面那种惨绝人寰的问题。
修改数据库 charset 为 utf8mb4:

alter table typecho_comments convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_contents convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_fields convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_metas convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_options convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_relationships convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_users convert to character set utf8mb4 collate utf8mb4_unicode_ci;
修改 Typecho 配置文件中数据库定义参数中的 charset 为 utf8mb4:

$db->addServer(array (
    'host'      =>  localhost,
    'user'      =>  'me',
    'password'  =>  'my_password',
    'charset'   =>  'utf8mb4', //修改这一行
    'port'      =>  3306,
    'database'  =>  '蛤?'
), Typecho_Db::READ | Typecho_Db::WRITE);

搞定~
啊对了,对于不支持 emoji 的设备上大概会显示为框框吧,但至少不会像之前直接毫无人性的砍掉 (Mysql 的锅) emoji 之后的内容要好上太多了。。。

标签: none

添加新评论