hexo个人博客优化实现vuePress插件external-link-icon(超链接末尾小图标)

🙂前言

阅读前端vue文档时,小波发现文章内超链接末尾都有个小图标,一个不错的提升用户体验小功能,实现来自vuePress自带插件external-link-icon[1]

小波打算借鉴下思路给hexo驱动的廿壴博客优化下,但是hexo没有类似的博客插件,于是小波自己动手通过background引入svg,改造下样式来实现external-link-icon这个小功能。


😍成品效果

小波前端分享:hexo实现vuePress插件external-link-icon(超链接末尾小图标)


🧐改造思路

  1. 根据代码大概理解插件是直接在a标签中插入了svg图标

    1
    2
    3
    4
    5
    6
    7
    <a href="https://console.leancloud.app/login" target="_blank" rel="noopener noreferrer">
    登录
    <span>
    <svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
    <span class="external-link-icon-sr-only">open in new window</span>
    </span>
    </a>
  2. 百度hexo是否有相关插件

    hexo有个同名插件,但是封装其他功能太多是小波不需要的,因为外链安全跳转功能小波自己已经封装了相关插件来实现,所以这里只想搞个简单的美化功能

  3. 思考seo和改造工作量

    seo:dom规模大小

    如图,廿壴博客dom树规模挺大了,不想再绑个插件来实现,同时小波已经发了很多文章,也不想再改文章代码,so,简单粗暴点直接修改markdown内容中所有a标签样式来实现,再排除其他类型的超链接


😚最终实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.markdown-body
// 排除目录链接,图片盒子,脚注链接
a:not(.anchorjs-link):not(.headerlink):not(.fancybox):not([rel='footnote'])
position relative
padding-right 18px
display inline-block
margin 0 3px

&:before
content ''
display inline-block
position absolute
width 18px
height 18px
right 0
top 3px
background url('data:image/svg+xml;base64,PHN2ZyBjbGFzcz0nZXh0ZXJuYWwtbGluay1pY29uJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGFyaWEtaGlkZGVuPSd0cnVlJyBmb2N1c2FibGU9J2ZhbHNlJyB4PScwcHgnIHk9JzBweCcgdmlld0JveD0nMCAwIDEwMCAxMDAnIHdpZHRoPScxNScgaGVpZ2h0PScxNScgc3R5bGU9J2ZpbGw6Y3VycmVudENvbG9yOyBjb2xvcjogZ3JheTsnPjxwYXRoIGZpbGw9J2N1cnJlbnRDb2xvcicgZD0nTTE4LjgsODUuMWg1NmwwLDBjMi4yLDAsNC0xLjgsNC00di0zMmgtOHYyOGgtNDh2LTQ4aDI4di04aC0zMmwwLDBjLTIuMiwwLTQsMS44LTQsNHY1NkMxNC44LDgzLjMsMTYuNiw4NS4xLDE4LjgsODUuMXonPjwvcGF0aD48cG9seWdvbiBmaWxsPSdjdXJyZW50Q29sb3InIHBvaW50cz0nNDUuNyw0OC43IDUxLjMsNTQuMyA3Ny4yLDI4LjUgNzcuMiwzNy4yIDg1LjIsMzcuMiA4NS4yLDE0LjkgNjIuOCwxNC45IDYyLjgsMjIuOSA3MS41LDIyLjknPjwvcG9seWdvbj48L3N2Zz4=') no-repeat center bottom

// 脚注链接去除样式
.footnote-text
a
padding-right 0 !important

&:before
display none !important

😫实现过程遇见的问题

  1. a链接的伪元素:beforecontent无法插入svg

  2. background属性url引入svg但是无法用css定义样式,因为css选择器必须是dom树节点

  3. 百度了相关资料用utf8格式引入,把双引号改成单引号,然后直接修改svg的style='fill:currentColor; color: gray;'

    1
    2
    3
    &:before
    ...
    background url("data:image/svg+xml;utf8,<svg class='external-link-icon' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' x='0px' y='0px' viewBox='0 0 100 100' width='15' height='15' style='fill:currentColor; color: gray;'><path fill='currentColor' d='M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z'></path><polygon fill='currentColor' points='45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9'></polygon></svg>") no-repeat center bottom
  4. 但是由于stylus的vscode插件,每次格式化又把单双引号还原,最后灵机一动再用window.btoa('string'),在浏览器F12的控制台把svg转成base64格式搞定(现在小图片类常规思路都应该转成base64格式)


🙂hexo个人博客优化实现超链接末尾小图标相关链接

关注廿壴(GANXB2)微信公众号

『旅行者』,帮小波关注一波公众号吧。

小波需要100位关注者才能申请红包封面设计资格,万分感谢!

关注后可微信小波,前66的童鞋可以申请专属红包封面设计。

THE END
作者
chopin gump chopin gump
小尾巴
Stay Hungry, Stay Foolish「求知若饥, 虚心若愚」 — 廿壴(GANXB2)
许可协议
hexo个人博客优化实现vuePress插件external-link-icon(超链接末尾小图标)
https://blog.ganxb2.com/11388.html
微信

微信

支付宝

支付宝

- ( ゜- ゜)つロ 填写QQ邮箱自动获取头像亦更快获得回复通知
评论区显示“刷新”,多点几下或过会儿再来康康 _(≧∇≦」∠)_