Typecho文章内超链接改造

遇到つ 2020-07-19 AM 5236℃ 2条

新开```Typecho```博客，用的```Echo```主题，使用后发现文章内页的超链接跟文章内容样式很接近，不细看都不知道哪些是链接，哪些是文章。寻思着要改造改造，加个```SVG```小图标在链接后面效果应该还不错，搞起。

前期想着用插件来实现，想在```$this->content```输出内容之前处理一下```a链接```，瞄了一圈发现没现成的轮子，自己撸一个吧，觉得麻烦（主要还是懒:smirk:）。正好发现一个插件叫```CustomCssAndJs```，自己动手改改css和js不就完事了，何必那么费力呢。安装插件，启用插件，分析了下```Echo```主题的结构，只需要改造文章页```.text p a```的样式就好了。

**1.js添加可爱的小箭头**
思路是用svg小图标添加到链接后面，区分文章和超链接，在```CustomCssAndJs```设置中找到```自定义JS脚本```加入如下代码，当然如何改造链接根据自己的页面结构来调整。

```
$(function(){
    $(".text p a").each(function(){
        $(this).append('<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
    })
);
```

**2.调整css样式**
在```CustomCssAndJs```设置中找到```自定义CSS```加入如下代码

```
.text p a {
    border-bottom: 1px solid #999;
}
.text p a svg {
    width: 13px;
    height: 13px;
    vertical-align: -1px;
    margin-left: 3px;
}
```

搞定，给a链接加个小箭头，加个下划线，妥妥的。

**展示一下成果**
插件下载地址：【[CustomCssAndJs](https://github.com/kyuuseiryuu/typecho-plugin-custom-css-js "CustomCssAndJs")】

标签: Typecho

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://itcats.me/typecho/8.html

上一篇欢迎使用 Typecho

下一篇 gitignore文件中忽略项不起作用的解决方法

取消回复

评论啦~

已有 2 条评论

madlifer Google Chrome 80.0.3987.163 Windows 10

博主，代码高亮跟边框怎么搞的？
回复 2020-10-28 19:13
1. 遇到つ博主 Edge 86.0.622.43 Mac OS X 10.14.6
  @madlifer
  
  你F12看属性，都是扒过来的，改了模板文件，可以自取。
  回复 2020-10-30 08:49

续费了一波，感觉啥也不是啊，一年多没写东西了，今年大事就是多了个可爱的宝宝。2022年08月17日 21:26:36
抽空看了下百度收录，发现还可以啊，页面都收进去了，nice！2021年03月05日 16:40:37
官方bug，最为致命~~~phpstorm 2020.1.3 右键不能用的原因是官方写出bug了，用jetbrainsToolbox升级到2020.1.4RC版本暂时解决一下。🙈🙈2020年07月22日 11:53:22
炸了炸了，phpstorm右键不能用，死活搞不好，恢复了下设置。坑爹呢，主题，插件，统统都没了，我要吐了，精心配置的主题没了，找都找不回来。。🤮🤮🤮2020年07月21日 19:07:08
获得了Github的Arctic Code Vault Contributor 勋章，不管写的好不好，这代码怕是要流传下来了。2020年07月20日 00:16:31
来吧，展示~重新起航，记录生活，记录日常开发问题~😘😘😘2020年07月18日 00:26:15

gitignore 闲言碎语 SecureCRT Typecho 生活 git

Typecho文章内超链接改造

评论啦~

已有 2 条评论

栏目分类

博主动态 ~

标签云

Typecho文章内超链接改造

 评论啦~

已有 2 条评论

 栏目分类

博主动态 ~

标签云

评论啦~

栏目分类

博主动态 ~

标签云