给Typecho的文章链接添加新窗口跳转

in Tutorials with 10 comments

我网上搜了一下关于给typecho文章内链接新窗口打开的方法都是老旧得不要不要的

方法二修改的代码是基于2017年02月14日的Typecho最后一次Github更新

下面是我给大家提供两种解决方法三种解决方法

方法一

在前端,通过Vanilla JS解决

逻辑是查找某个标签的id下所有的a标签,然后给每个添加属性,如下

var pageAnchors = document.getElementById('post-content').getElementsByTagName('a');
for (var i=0; i<pageAnchors.length; i++){
    pageAnchors[i].setAttribute('target', '_blank');
}

这样的是不可靠,在没有某个标签的id的情况下浏览器会报错,一报错,我就不舒服,解决如下

if(document.getElementById('post-content')){
    var pageAnchors = document.getElementById('post-content').getElementsByTagName('a');
    for (var i=0; i<pageAnchors.length; i++){
        pageAnchors[i].setAttribute('target', '_blank');
    }
}

套个方法,美化一下,如下

var pageTagretBlank = function(pageId) {
    if(document.getElementById(pageId)){
        var pageAnchors = document.getElementById(pageId).getElementsByTagName('a');
        for (var i=0; i<pageAnchors.length; i++){
            pageAnchors[i].setAttribute('target', '_blank');
        }
    }
};
pageTagretBlank('post-content');

如果我还需要添加rel=nofollow,则如下

var pageTagretBlank = function(pageId) {
    if(document.getElementById(pageId)){
        var pageAnchors = document.getElementById(pageId).getElementsByTagName('a');
        for (var i=0; i<pageAnchors.length; i++){
            pageAnchors[i].setAttribute('target', '_blank');
            postAnchors[i].setAttribute('rel', 'nofollow');
        }
    }
};
pageTagretBlank('post-content');

代码一般放在主题的footer.php就可以了

方法二

修改Typecho系统代码

找到var\Markdown.php这个文件

self::$parser->hook('afterParseCode', array('Markdown', 'transerCodeClass'));后面,添加下面代码

self::$parser->hook('afterParseInline', array('Markdown', 'addLinkTargetBlank'));

然后在public static function transerCodeClass($html){}这个代码块后面,添加下面代码

/**
 * addLinkTargetBlank
 * 
 * @param string $html
 * @return string
 */
public static function addLinkTargetBlank($html)
{
    return preg_replace("/<a href=\"([^\"]*)\">/i", "<a href=\"\\1\" target=\"_blank\">", $html);
}

如果需要添加rel=nofollow,则如下

/**
 * addLinkTargetBlank
 * 
 * @param string $html
 * @return string
 */
public static function addLinkTargetBlank($html)
{
    return preg_replace("/<a href=\"([^\"]*)\">/i", "<a href=\"\\1\" target=\"_blank\" rel=\"nofollow\">", $html);
}

方法三

感谢评论的人提醒,一种更好的方法,可以实现直接在主题里集成文章链接新窗口跳转

目前这个支持pinghsu主题,在function.phpparseContent()里,修改为

function parseContent($obj){
    $options = Typecho_Widget::widget('Widget_Options');
    if(!empty($options->src_add) && !empty($options->cdn_add)){
        $obj->content = str_ireplace($options->src_add,$options->cdn_add,$obj->content);
    }
    $obj->content = preg_replace("/<a href=\"([^\"]*)\">/i", "<a href=\"\\1\" target=\"_blank\">", $obj->content);
    echo trim($obj->content);
}

如果需要添加rel=nofollow,则如下

function parseContent($obj){
    $options = Typecho_Widget::widget('Widget_Options');
    if(!empty($options->src_add) && !empty($options->cdn_add)){
        $obj->content = str_ireplace($options->src_add,$options->cdn_add,$obj->content);
    }
    $obj->content = preg_replace("/<a href=\"([^\"]*)\">/i", "<a href=\"\\1\" target=\"_blank\" rel=\"nofollow\">", $obj->content);
    echo trim($obj->content);
}

这个方法就是将方法二放到了主题里集成,好用好用···

保存即可···

我的选择

目前我对高性能的JavaScript编程还处于学习中,方法一针对主题通过js实现链接新窗口跳转,对于我这种对每ms的加载性能看得很过分的人来说,是不可取的,但一般来说,其实已经非常够用的

大家看看有没有什么方法可以给这段js提高性能,我记得什么innerHTML,正则什么的好像也是很高效,DOMContentLoaded也是可以的

方法二是我目前采用的,用的是没有rel=nofollow的那段代码。为什么?因为直接就是高性能了,加上我简单阅读过Typecho源码,拿捏起来很容易,所以就用了方法二

我现在用方法三!用的是没有rel=nofollow的那段代码。

好了,我再次强调一下,转载请注明出处,写分享文章你以为很容易啊~

Responses
  1. https://github.com/benzBrake/ShortLinks 我选择插件实现

    Reply
    1. @benzBrake

      其实我也想过,但我无插件实现了友链,外链重定向跳转就违背了友链的目的了。我这样这样不就省了两个插件,虽然理论上对seo可能有点不好,但😝我感觉谷歌收录得挺好的
      还有你博客没有做http重定向都https

      Reply
      1. @Chakhsu

        添加到你的parseContent里也行啊,这样就不用插件

        Reply
        1. @女王推拿

          可以可以,搞掂了~

          Reply
        2. @女王推拿

          可以可以,我去试一下

          Reply
  2. 博主觉得有没有可能可以 实现文章内的链接重定向,就是重定向到一个页面,在由那个页面跳转。(不用动源码 不用插件),已经有插件实现了,可是在PHP7下不兼容

    Reply
    1. @拾叁

      完全可能的啊,function.php就是个插件,在里面怎么花俏怎么写

      Reply
  3. 韩小七

    新主题什么时候发布呢?我已经迫不及待了。

    Reply
    1. @韩小七

      发布了,看下面链接😝
      https://www.linpx.com/p/pinghsu-a-typecho-theme.html

      Reply
  4. 叔坚强

    这个这个~😝

    Reply