2018年11月16

firekylin二次开发之修改超链接打开方式

对于网页中的超链接打开方式,我个人比较倾向大部分使用当前标签页,但文章内,比如一些参考链接或其他链接,觉得还是新开标签比较好,也许新开的页面和本页面有需要做比较的地方,这种情况,个人觉得,有必要做成新开窗口。

依赖

本篇文章依赖上一篇文章:firekylin二次开发之自定义主题

调试

用Google浏览器随便访问一个基于firekylin搭建的博客文章详情页,例如:https://imjiaolong.cn/post/webpack-sharing.html,然后点击此篇文章下方的参考链接,还是在当前页打开。

现在打开控制台,在console标签页复制以下内容过去回车:

var post = document.querySelector('.entry-content');
if (post) {
    var as = post.querySelectorAll('a');
    if (as && as.length) {
        for (var i = 0; i < as.length; i++) {
            if(as[i].href.indexOf('#') === -1) {
                as[i].setAttribute('target', '_blank');
            }
        }
    }
}

复制完之后,直接再点击此篇文章下方的参考链接,就是新打开一个标签,且文章最上方的toc目录点击还是当前页,这是故意为之,具体逻辑需求,完全可以按照自己的意愿随便修改。

实践

在新主题下目录下res/js/v2.js中写入以下内容:

(function (win, doc) {
    win.onload=function () {
        var post = doc.querySelector('.article-content-markdown');
        if (post) {
            var as = post.querySelectorAll('a');
            if (as && as.length) {
                for (var i = 0; i < as.length; i++) {
                    if(as[i].href.indexOf('#') === -1) {
                        as[i].setAttribute('target', '_blank');
                    }
                }
            }
        }
    }
})(window, document);

上面代码中用的classarticle-content-markdown而不是entry-conent,这是因为有很多页面都用了entry-content这个类,为防止冲突,我自定义一个特殊的类,修改方式如下:

打开新主题目录下的post.htmlpage.html,里面有个article标签,在此标签新增article-content-markdown类即可。

疑问

如果你此时在访问我的博客,你可能已经看出来,我的文章详情页中的toc样式不同,其实这也是简单的修改样式,再加一点点js就完了。

本文链接:https://yaimeet.com/post/firekylin-development-update-href-target.html

-- EOF --

Comments