ok，上一篇文章已经对img标签下手了。这次更彻底点，给图片添加上灯箱效果

2020-01-02_215330.png

首先，引入相关js文件

<!--在header里添加这个-->
<link href="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">

<!--先加载jquery依赖-->
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<!--fancybox的js，还是bootcdn-->
<script src="//cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js"></script>

修改Typecho

首先找到HyperDown.php文件,在Typecho下的var目录里。

然后搜索img，一般在349行开始，修改img标签为

<a data-fancybox=\"gallery\" href=\"{$url}\"><img src=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\"></a>

HyperDown.php文件位置

正则替换，与上面方案任选其一

ps：这会导致 <!--more--> 无法正常截断文章。
2020-01-05 更新，修正 <!--more--> 无法正常截断文章的问题。
2020-02-09 跟新，正则表达式增加对atl和title属性的匹配。

首先在你的主题文件找到这个

<?php $this->content(); ?>

用正则修改img标签

<?php
    $pattern = '/\<img.*?src\=\"(.*?)\".*?alt\=\"(.*?)\".*?title\=\"(.*?)\"[^>]*>/i';
    $replacement = '<a href="$1" data-fancybox="gallery" /><img src="$1" alt="$2" title="$3"></a>';
    $content = preg_replace($pattern, $replacement, $this->content);

    //需要支持截断的添加下面两行
    $array=explode('<!--more-->', $content);
    $content=$array[0];

    echo $content;
?>

今天，处理站点地图的时候，发现有个PageSpeed Insights工具，可以测试网站打开速度并提供改进建议。

2020-01-02_205807.png

我这个网站的问题主要是图片太大，加载慢。

我觉得最可行的就是使用延迟加载（懒加载）的方式载入图片。

这次，我们使用基于jQuery的lazyload来实现懒加载。

注意：微信内X5内核加载失败！
2020-01-05 更新，代码问题修正，微信上生效需清理内置x5内核缓存

首先，引入相关js文件

<!--由于lazyload依赖于jquery所以要先加载-->
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<!--lazyload的js，由于我用的是bootstrap，所以就用他家的cdn了-->
<script src="//cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
<!--使用 '//' 可以自动选择使用http还是https加载-->

添加触发函数

<script type="text/javascript">
      $(function() {
          $("img").lazyload({ 
          placeholder : "/loading.gif",
                 effect: "fadeIn"
           });
      });
</script>

替换img标签

<img class="lazyload" src="/loading.gif" data-original="图片实际Url">

其他设置

//图片距离屏幕200px时提前加载
jQuery("img").lazyload({ threshold : 200 });

HTTP 使用统一资源标识符（Uniform Resource Identifiers, URI）来传输数据和建立连接。

HTTP 请求到服务器的请求消息包括以下格式：请求行（request line）、请求头部（header）、空行和请求数据四个部分组成。

HTTP1.0 定义了三种请求方法： GET , POST 和 HEAD 方法。
HTTP1.1 新增了五种请求方法：OPTIONS , PUT , DELETE , TRACE 和 CONNECT 方法。

• GET：请求指定的页面信息，并返回实体主体。
• HEAD：类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头
• POST：向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
• PUT：从客户端向服务器传送的数据取代指定的文档的内容。
• DELETE：请求服务器删除指定的页面。
• CONNECT：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
• OPTIONS：允许客户端查看服务器的性能。
• TRACE：回显服务器收到的请求，主要用于测试或诊断。

最近网站开始有一些奇怪的请求

出于安全考虑，决定只允许Get/Post请求。

在Nginx配置文件中添加任意一个即可：

#方法一
if ($request_method !~ ^(GET|POST)$ ){
    return 403;
}

#方法二
if ($request_method !~* GET|POST) {
    return 403;
}

#快速响应Head请求
if ($request_method ~ ^(HEAD)$ ) {
    return 200 "All OK";
}

下面是在Nginx配置网站HTTPS(ssl)的参数

请酌情修改使用。

注意：TLS 1.1 协议预计将2020年3月份正式“退役”，详情点击 这里 。

server
{
    #监听443端口、ssl、http2
    listen 443 ssl http2 ;
    
    #启用ssl
    ssl on;
    
    #证书配置
    ssl_certificate    /idzd.top.pem;
    ssl_certificate_key    /idzd.top.pem;
    
    #支持的协议
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    
    #支持的加密套件
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    
    #依赖SSLv3和TLSv1协议的服务器密码将优先于客户端密码
    ssl_prefer_server_ciphers on;
    
    #设置储存SSL会话的缓存类型和大小
    ssl_session_cache shared:SSL:10m;
    
    #客户端能够反复使用储存在缓存中的会话参数时间
    ssl_session_timeout 10m;

}