前言:
有幸使用Lopwon制作的typecho图片主题。
这个一个非常棒的图片展示主图,就鄙人而言,无论是图片的加载还是UI界面的布局,都是很令人满意和为之雀跃的。
用图片来记录自己漫长一生行走在人世间的丝丝缕缕。当夕阳西下,健壮的身姿变得佝偻,明亮光洁的姿容变得鹤发鸡皮令人生畏,当回忆往昔的时候难免是需要一些承载记忆的寄托的。
在自己琢磨自定义添加视频的功能过程中,网站数据库建立删除多次,折腾两三天最后在多次请教@主题作者以及@波妞并参阅文档以及主题评论之后,耗费了一些时间多次尝试最后终于成功显示。在次总结一下修改的步骤方便有此尝试想法的仁兄。谨以此记。
内容主要分类为:使用外链和添加视屏功能。修改文档内容行数均指原主题文档行数,注意备份做对比。
主题内容在执行修改之前最好先备份一下原主题以及网站和数据库。这是有血的教训的!!!
本人环境:
- PHP版本: PHP-74
- 数据库: MySql5.7
- 系统配置: 阿里云 4核-8G-2M Windows Server 2019
- typecho版本: v1.1-17.10.30(目前最新版本,修改与版本无关)
链接导航:
图片加载慢问题:
受限于部署网站服务器的资源带宽等限制,直接请求网站中图片的话,响应速度是很慢的,让人看得着急。于是想到以前使用对象存储OSS的时候,访问速度还是比较可观的,如果再加上cdn为OSS加速的话,那么速度一定快的飞起。所以最后决定用cdn+对象存储OSS模式来做网站资源的源。
cdn+oss的配置官方有文档,参考即会。
我测试了一下云服务器、云服务器+cdn、对象存储、对象存储+cdn四种访问模式的响应速度,最后选择了cdn+OSS模式。以下是响应速度测试的结果。业余测试可能不专业,仅供参考。
- 测试内容:10.7M的一张.jpg格式图片
- 测试次数:10
- 测试环境:OSS、云服务器(4核-8G-2M)
请求次数 | 云服务器(s) | 云服务器+CDN加速(s) | OSS对象存储(s) | OSS对象存储+CDN加速(s) |
---|---|---|---|---|
第一次 | 37.64 | 3.01 | 6.80 | 2.48 |
第二次 | 36.93 | 2.59 | 7.25 | 2.17 |
第三次 | 37.09 | 2.73 | 7.06 | 2.24 |
第四次 | 37.39 | 2.49 | 6.86 | 2.26 |
第五次 | 36.70 | 3.26 | 7.27 | 2.14 |
第六次 | 36.94 | 2.52 | 7.09 | 2.25 |
第七次 | 37.42 | 3.01 | 7.59 | 2.21 |
第八次 | 36.81 | 2.67 | 7.33 | 2.26 |
第九次 | 37.58 | 2.56 | 7.22 | 2.22 |
第十次 | 37.52 | 2.54 | 7.08 | 2.24 |
平均响应 | 37.202 | 2.738 | 7.155 | 2.247 |
添加图片外链功能:
function support_url_pic($content) {
preg_match_all("/\<img.*?src\=\"(.*?)\"[^>]*>/i", $content, $theurl);
$img_src = $theurl[1];
return $img_src;
}
{/timeline-item}
{timeline-item color="#ed4014"}
第二步:打开主题下的index.php,删除86至95行内容,替换为以下代码,需注意php开始和结束标记:
<?php
$funcpicurl = support_url_pic($this->content);
foreach ($funcpicurl as $picurl) {
echo '<div class="pic-'.$this->cid.'"><a class="grid__link fancybox-buttons" href="'.$picurl.'" data-fancybox-group="gallery-'.$this->cid.'"><img class="lazy grid__img" src="/usr/themes/SnapicPlus/img/loading.gif" data-original="'.$picurl.'" /></a></div>';
}
?>
{/timeline-item}
添加视频播放功能:
所需的文件我已上传至GitHub,下载SnapicPlus主题额外文件之后,内部有css、js、img、fonts四个文件夹。将css、js、img文件夹中的文件拷贝到SnapicPlus主题目录下对应名字的文件夹中。将fonts文件夹整个拷贝到SnapicPlus主题文件夹下。
{/timeline-item}
{timeline-item color="#ed4014"}
修改SnapicPlus主题下footer.php文件:
在第16行