Typecho 添加图片灯箱

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

2020-01-02_215330.png2020-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文件位置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;
?>

CSDN阅读全文自动展开

CSDN最近越来越恶心人了

原来展开阅读全文,需要登录。行,很正常,我登录。

现在竟然得关注微信。呵呵


  • TampermonKey脚本 修改自永夜
// ==UserScript==
// @name         CSDN
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  CSDN 博客解除阅读更多限制
// @author       You
// @match        https://blog.csdn.net/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';
    var articleBox = $("div.article_content");
    articleBox.removeAttr("style");
    $(".btn-readmore").parent().remove();
})();
  • 效果