246 lines
14 KiB
HTML
246 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-cn">
|
||
|
|
|
||
|
|
<head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
|
|
<title>让typecho支持webp格式的图片，告别阿里云oss和腾讯云cos被恶意刷流量的风险</title>
|
||
|
|
<link rel='stylesheet' href='/css/light.css'>
|
||
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||
|
|
<link rel="stylesheet" href="/css/normalize.css">
|
||
|
|
<link rel="stylesheet" href="/css/remixicon.css">
|
||
|
|
<link rel="stylesheet" href="/css/uikit.min.css">
|
||
|
|
<link rel="stylesheet" href="/css/nprogress.min.css">
|
||
|
|
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
|
||
|
|
<link rel="stylesheet" href="https://usj.cc/usr/themes/Ying/css/barrager.css">
|
||
|
|
<script src="/js/jquery.min.js"></script>
|
||
|
|
<script src="https://usj.cc/usr/themes/Ying/js/jquery.barrager.js"></script>
|
||
|
|
<script src="/js/jquery.scrollUp.min.js"></script>
|
||
|
|
<script src="/js/pjax.js"></script>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
|
||
|
|
|
||
|
|
<script>console.log("\n %c Amigo Theme %c https://usj.cc \n", "color: #fadfa3; background: #030307; padding:3px; font-size:12px;", "color: #ffffff;background: #16171a; padding: 3px; font-size: 12px;");</script>
|
||
|
|
<meta name="keywords" content="大学,教程,blog,优世界,优设计,博客,大学生博客,生活,文案," />
|
||
|
|
<meta name="template" content="Ying" />
|
||
|
|
</head>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="main">
|
||
|
|
<div class="container">
|
||
|
|
<div class="header">
|
||
|
|
<div class="head_author_img load-memos-editor">
|
||
|
|
<img src="https://avatars.githubusercontent.com/u/94612053" class="blog-img" width="80" height="80" alt="小赵同学的博客" />
|
||
|
|
</div>
|
||
|
|
<div class="site-description">
|
||
|
|
<h2><span class="uk-invisible">风吹云散，云卷云舒</span></h2>
|
||
|
|
<nav class="nav social uk-visible@m">
|
||
|
|
<ul class="flat">
|
||
|
|
|
||
|
|
|
||
|
|
<a href="https://pan.usj.cc" title="GitHub" target="_blank"><i class="ri-cloudy-2-line"></i></a>
|
||
|
|
|
||
|
|
<a href="https://space.bilibili.com/525472039" title="Twitter" target="_blank"><i class="ri-bilibili-line"></i></a>
|
||
|
|
|
||
|
|
<a href="https://github.com/imzql" title="LinkedIn" target="_blank"><i class="ri-github-fill"></i></a>
|
||
|
|
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
<div class="yiyandes">风吹云散，云卷云舒</div>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
<nav class="nav">
|
||
|
|
<ul class="flat">
|
||
|
|
<li class="active"><a href="http://localhost:1313/">首页</a></li>
|
||
|
|
<li class="active"><a href="http://localhost:1313//about">关于</a></li>
|
||
|
|
<li class="active"><a href="http://localhost:1313//says">留言</a></li>
|
||
|
|
<li class="active"><a href="http://localhost:1313//archives">归档</a></li>
|
||
|
|
<li class="active"><a href="http://localhost:1313//links">友链</a></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div id="pjax-container">
|
||
|
|
<article style="margin-bottom: 3.5em;">
|
||
|
|
<h1 class="post-title" itemprop="name headline">让typecho支持webp格式的图片，告别阿里云oss和腾讯云cos被恶意刷流量的风险</h1>
|
||
|
|
<div class="meta">
|
||
|
|
作者: 小赵同学 浏览: 字数: 119 分类:
|
||
|
|
|
||
|
|
<a href="%e6%95%99%e7%a8%8b">教程</a>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="post-content" itemprop="articleBody">
|
||
|
|
<p>如题，今天没有生活分享，这篇文章我主要科普一下webp图片格式</p>
|
||
|
|
<p>首先让typecho支持webp格式图片这个标题说法是不准确的</p>
|
||
|
|
<p>因为typecho只是将图片上传显示，并没有对图片做各种的图片格式转换</p>
|
||
|
|
<p>还记得当初使用WordPress博客系统的时候，基本上写文章都喜欢用webp格式的图片</p>
|
||
|
|
<p>webp格式图片的优点就是体积小，图片清晰度高，在写文章的时候使用webp格式可以大大的提高用户体验</p>
|
||
|
|
<p>但是typecho的官方版本，是不支持webp格式的图片的，所以就要对官方程序包加一些小改动</p>
|
||
|
|
<p>我们打开typecho管理后台可以看到这个地方，是显示不支持webp图片的，但是没关系，我们可以自己加</p>
|
||
|
|
<p><img src="https://usj.cc/usr/uploads/2021/10/562038999.png" alt=""></p>
|
||
|
|
<p>对代码修改的地方也是不是很多，我来详细给大家说一下</p>
|
||
|
|
<p>找到typecho的程序包的这个位置</p>
|
||
|
|
<p>var/Widget/Themes/List.php，差不多是70多行</p>
|
||
|
|
<p><img src="https://usj.cc/usr/uploads/2021/10/814315235.png" alt=""></p>
|
||
|
|
<p>图片显示的代码是我修改之后的，你只需要将</p>
|
||
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>return preg_match("/screenshot\.(jpg|png|gif|bmp|jpeg)/i",path);
|
||
|
|
</span></span></code></pre></div><p>改为</p>
|
||
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>return preg_match("/screenshot\.(jpg|png|gif|bmp|jpeg|webp)/i",path);
|
||
|
|
</span></span></code></pre></div><p>然后找到</p>
|
||
|
|
<p>typecho的var/Widget/Abstract/Contents.php</p>
|
||
|
|
<p>差不多是686行</p>
|
||
|
|
<p><img src="https://usj.cc/usr/uploads/2021/10/402523352.png" alt=""></p>
|
||
|
|
<p>然后将</p>
|
||
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>$value['attachment']->isImage = in_array($content['type'], array('jpg', 'jpeg', 'gif', 'png', 'tiff', 'bmp'));
|
||
|
|
</span></span></code></pre></div><p>改为</p>
|
||
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>$value['attachment']->isImage = in_array($content['type'], array('jpg', 'jpeg', 'gif', 'png', 'tiff', 'bmp', 'webp'));
|
||
|
|
</span></span></code></pre></div><p>然后找到var/Typecho/Common.php，差不多是1399行，我们这里多加一行代码</p>
|
||
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>'webp' => 'image/webp',
|
||
|
|
</span></span></code></pre></div><p>然后去typecho的后台，找到设置-基本，这个地方在其他文件加入webp，然后博客就可以完美支持webp格式图片了</p>
|
||
|
|
<p><img src="https://usj.cc/usr/uploads/2021/10/46607755.png" alt=""></p>
|
||
|
|
<h2 id="为什么推荐使用webp格式图片">为什么推荐使用webp格式图片</h2>
|
||
|
|
<p>作为一个生活博主，具有随拍的习惯，喜欢用相机记录生活，这就意味着我有时候在写文章要上传很多图片</p>
|
||
|
|
<p>对我来说写博客最大的痛点就是，我希望我能上传更大分辨率，更清晰的图片上来</p>
|
||
|
|
<p>如果发原图在博客，有时候图片真的是很大，对访客阅读体验十分差，因为自己的服务器带宽也不是很大</p>
|
||
|
|
<p>很尴尬的事就是可能有时候访客已经把你文章的文字都读完了，图片还没加载出来</p>
|
||
|
|
<p>然后最简单解决方法就是文章少传图片，或者压缩一下图片再传，我实在是不想少传图片，或者传不清晰的图片</p>
|
||
|
|
<p>在有篇文章，因为原图很大，所以不得不对图片进行压缩处理，否则图片半天都没加载出来</p>
|
||
|
|
<p>被吾柯大佬吐槽是不是用座机拍的，哈哈哈，我也是很无奈，当然也有博友建议我使用速度很快的图床</p>
|
||
|
|
<p>用图床确实是一个可以解决这个烦恼的方法，但是不建议使用</p>
|
||
|
|
<p>曾经用WordPress的时候，喜欢使用图床存图片，但是现实是往往不幸的，我曾经使用过的图床，图床站长因为个人原因不得不被迫关停，自己博客文章一夜间接近丢失了500多张图片</p>
|
||
|
|
<p>想对比webp格式图片的优势就显现出来了，具有体积小和清晰的优点，完美的解决了我的烦恼</p>
|
||
|
|
<h2 id="避免使用cos和oss储存图片">避免使用cos和oss储存图片</h2>
|
||
|
|
<p>相信觉得大多数博主喜欢使用oss和cos储存图片，即使图片很大，也可以很快的加载出来</p>
|
||
|
|
<p>作为一个记录生活的博主，使用oss和cos就意味着成本增加，自己的博客本来就不怎么盈利，还要为图片增加额外支出</p>
|
||
|
|
<p>是一个不太明智的选择，cos和oss还会被一些不法之徒恶意刷流量，可能导致几千块钱的支出，相信各位站长也不乏有所听闻</p>
|
||
|
|
<p>某某站长因为cos，oss，cdn被刷5000块钱的情况，也不足为奇</p>
|
||
|
|
<p>不要认为自己是小站没人打，现实中确实不乏很无聊的人，有时候时不时给你来点攻击</p>
|
||
|
|
<h2 id="怎样转换webp格式的图片">怎样转换webp格式的图片</h2>
|
||
|
|
<p>今天跟悟空博客的站长曾聊到这个问题，怎么把图片转为webp格式呢</p>
|
||
|
|
<p>这里我推荐几个在线转换的网站和工具</p>
|
||
|
|
<p>腾讯智图，提供离线转换webp图片</p>
|
||
|
|
<blockquote>
|
||
|
|
<p><a href="https://zhitu.isux.us">https://zhitu.isux.us</a></p>
|
||
|
|
</blockquote>
|
||
|
|
<p>squoosh，一个可以在线转换webp格式图片的网站</p>
|
||
|
|
<blockquote>
|
||
|
|
<p><a href="https://squoosh.app">https://squoosh.app</a></p>
|
||
|
|
</blockquote>
|
||
|
|
<p>可以选择一个适合自己的工具，但是建议第一个智图，在线转换网站不可能一直公益给我们使用</p>
|
||
|
|
<h2 id="让wordpress支持webp格式图片">让WordPress支持webp格式图片</h2>
|
||
|
|
<p>因为我之前使用的博客系统是WordPress，当然也有让WordPress支持webp格式图片的方法</p>
|
||
|
|
<p>直接在自己的主题文件的function.php里面加入下面代码即可完美支持webp格式图片</p>
|
||
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>//下方一段为webp格式图片支持代码 function bzg_filter_mime_types( $array ) { $array['webp'] = 'image/webp'; return $array; } add_filter( 'mime_types', 'bzg_filter_mime_types', 10, 1 );
|
||
|
|
</span></span><span style="display:flex;"><span>//下方为webp格式图片在媒体库预览图像支持代码 function bzg_file_is_displayable_image($result, $path) { $info = @getimagesize( $path ); if($info['mime'] == 'image/webp') { $result = true; } return $result; } add_filter( 'file_is_displayable_image', 'bzg_file_is_displayable_image', 10, 2 );
|
||
|
|
</span></span></code></pre></div><p>基本上就分享这么多，晚安，我的朋友们</p>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="post-tags" style="margin-top: -30px;">
|
||
|
|
<nav class="nav tags">
|
||
|
|
<ul class="flat">
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<hr class="uk-divider-icon">
|
||
|
|
<div id="comments" class="comments-area">
|
||
|
|
|
||
|
|
|
||
|
|
<link
|
||
|
|
rel="stylesheet"
|
||
|
|
href="https://unpkg.com/@waline/client@v3/dist/waline.css"
|
||
|
|
/>
|
||
|
|
<div id="waline"></div>
|
||
|
|
<script type="module">
|
||
|
|
import { init as walineInit } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
|
||
|
|
|
||
|
|
window.walineInit = walineInit;
|
||
|
|
|
||
|
|
window.initWaline = function() {
|
||
|
|
walineInit({
|
||
|
|
el: '#waline',
|
||
|
|
serverURL: 'https://waline.usj.cc',
|
||
|
|
lang:"zh-cn",
|
||
|
|
imageUploader:false,
|
||
|
|
search:false,
|
||
|
|
copyright:false
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
window.initWaline();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(document).ready(function () {
|
||
|
|
|
||
|
|
var currentPath = "\/post\/20\/";
|
||
|
|
console.log(currentPath);
|
||
|
|
|
||
|
|
fetchCommentsAndCreateBarrager(currentPath, {
|
||
|
|
looper_time: 3000,
|
||
|
|
defaultAvatar: 'static/default-avatar.png',
|
||
|
|
defaultInfo: 'No comment',
|
||
|
|
defaultLink: '#',
|
||
|
|
close: true,
|
||
|
|
speed: 6,
|
||
|
|
color: '#fff',
|
||
|
|
old_ie_color: '#000000'
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="footer">
|
||
|
|
<nav class="nav" style="clear: both;">
|
||
|
|
© 2019 - 2024
|
||
|
|
<br>
|
||
|
|
<a href="https://beian.miit.gov.cn/" target="_blank"><span style="color:#999999;">鄂ICP备2022015735号-1</span></a>
|
||
|
|
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script src="/js/iconfont.js"></script>
|
||
|
|
<script src="/js/lightgallery.umd.min.js"></script>
|
||
|
|
<script src="/js/uikit.min.js"></script>
|
||
|
|
<script src="/js/EasyLazyload.min.js"></script>
|
||
|
|
<script src="/js/view-image.min.js"></script>
|
||
|
|
<script src="/js/main.js"></script>
|
||
|
|
<script src="/js/mypjax.js"></script>
|
||
|
|
<script src="/js/nprogress.js"></script>
|
||
|
|
<script type="module">
|
||
|
|
import { init as walineInit } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
|
||
|
|
|
||
|
|
window.walineInit = walineInit;
|
||
|
|
|
||
|
|
window.initWaline = function() {
|
||
|
|
walineInit({
|
||
|
|
el: '#waline',
|
||
|
|
serverURL: 'https://waline.usj.cc',
|
||
|
|
lang:"zh-cn",
|
||
|
|
imageUploader:false,
|
||
|
|
search:false,
|
||
|
|
copyright:false
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
window.initWaline();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|
||
|
|
|