SnapicPlus主题添加视频功能以及使用外链详解、图片加载缓慢问题解决

• 前言：
• 本人环境：
• 链接导航：
• 图片加载慢问题：
• 添加图片外链功能：
• 添加视频播放功能：

前言：

有幸使用Lopwon制作的typecho图片主题 这个一个非常棒的图片展示主图，就鄙人而言，无论是图片的加载还是UI界面的布局，都是很令人满意和为之雀跃的 用图片来记录自己漫长一生行走在人世间的丝丝缕缕。当夕阳西下，健壮的身姿变得佝偻，明亮光洁的姿容变得鹤发鸡皮令人生畏，当回忆往昔的时候难免是需要一些承载记忆的寄托的 在自己琢磨自定义添加视频的功能过程中，网站数据库建立删除多次，折腾两三天最后在多次请教@主题作者以及@波妞并参阅文档以及主题评论之后，耗费了一些时间多次尝试最后终于成功显示。在次总结一下修改的步骤方便有此尝试想法的仁兄。谨以此记 内容主要分类为:使用外链和添加视屏功能。修改文档内容行数均指原主题文档行数，注意备份做对比 主题内容在执行修改之前最好先备份一下原主题以及网站和数据库。这是有血的教训的！！！

本人环境：

• PHP版本： PHP-74
• 数据库： MySql5.7
• 系统配置： 阿里云 4核-8G-2M Windows Server 2019
• typecho版本： v1.1-17.10.30(目前最新版本，修改与版本无关)

链接导航：

• 我的图片记录网站

• SnapicPlus主题购买地址

• SnapicPlus主题作者博客链

• SnapicPlus主题额外文件GitHub地址

• Ckin视频播放插件

• 其他参考：@海不眠 , @掌印豪杰

图片加载慢问题：

　　刚开始使用此主题的时候，就发现图片网站图片的加载速度是在是慢，小则1M以内，大则10M往上。等网站首页全部预览出来之后，已经过去半分钟多了，可能还没有加载完。如此，体验就非常糟糕。

　　受限于部署网站服务器的资源带宽等限制，直接请求网站中图片的话，响应速度是很慢的，让人看得着急。于是想到以前使用对象存储OSS的时候，访问速度还是比较可观的，如果再加上cdn为OSS加速的话，那么速度一定快的飞起。所以最后决定用cdn+对象存储OSS模式来做网站资源的源。

cdn+oss的配置官方有文档，参考即会。

　　我测试了一下云服务器、云服务器+cdn、对象存储、对象存储+cdn四种访问模式的响应速度，最后选择了cdn+OSS模式。以下是响应速度测试的结果。业余测试可能不专业，仅供参考。

• 测试内容：10.7M的一张.jpg格式图片
• 测试次数：10
• 测试环境：OSS、云服务器(4核-8G-2M)

添加图片外链功能：

第一步：打开主题文件夹下functions.php,删除63到78行的getAttachImg函数，然后在删除的位置添加如下代码：

function support_url_pic($content) {
   preg_match_all("/\<img.*?src\=\"(.*?)\"[^>]*>/i", $content, $theurl);
   $img_src = $theurl[1];
   return $img_src;
}

第二步：打开主题下的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>';
}
?>

添加视频播放功能：

文件添加：

所需的文件我已上传至GitHub,下载SnapicPlus主题额外文件之后，内部有css、js、img、fonts四个文件夹。将css、js、img文件夹中的文件拷贝到SnapicPlus主题目录下对应名字的文件夹中。将fonts文件夹整个拷贝到SnapicPlus主题文件夹下。

修改SnapicPlus主题下footer.php文件：

在第16行<script>之下增加ckin.js引入：

<script src="<?php $this->options->themeUrl('js/ckin.js'); ?>"></script>

修改SnapicPlus主题下functions.php文件：

51行修改为如下样式,可以看到正则匹配修改为https开头，尾缀增加mp4匹配。这一处修改非常重要，如此修改之后，网站置顶图必须使用https开头的，否则不会正常显示！！！

preg_match_all("/(https:\/\/)[^>]*?.(png|jpg|gif|jpeg|bmp|mp4)/i", $final['text'], $thumbUrl);

修改SnapicPlus主题下header.php文件：

在第18行<link>引入之后换行添加一个新的引入：

<link rel="stylesheet" href="<?php $this->options->themeUrl('css/ckin.css'); ?>" />

修改SnapicPlus主题下header.php文件：

在第28行<script>之后换行添加以下代码：

<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?5686ab48ae6d44e73281040b9067aff1";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>

修改SnapicPlus主题下index.php文件：

在第95行与96行之间添加以下代码：

<?php $tags=$this->tags;if($tags!=null&&in_array("vcr",$tags[0])){ ?>
<div class="grid__link">
<div class="lazy grid__img">
<video src="<?php echo img_thumb($this->cid); ?>" data-color="#fff000"></video>
</div>
</div>
<?php } ?>

修改网站根目录下/var/HyperDown.php文件(指typecho文件而非主题文件)：

编辑第17行，在最后字符串结尾处添加 “|video” ,修改之后代码如下：

public $_commonWhiteList = 'kbd|b|i|strong|em|sup|sub|br|code|del|a|hr|small|video';

typecho管理后台添加标签：

打开管理-->标签，添加一个标签：标签名称为“视频”;标签缩略名为“vcr”

typecho管理后台设置允许mp4文件格式上传，其他格式据实际情况添加：

设置-->基本-->允许上传的文件类型,在其他格式处添加“mp4”

尝试typecho管理后台添加视频内容：

管理-->文章-->新增，标签设置为“视频”，添加以下测试内容，视频源可用附件链接或者外链，自己更换即可：

视频添加测试
<video src="https://oss.sakurafly.com/image/view.com/483b55a67893a12b048f3e2c8bae4aec.mp4"></video>

配置结束