这是一篇过期文章 241124

我们有很多种方式美化我们文章中的链接。在有些情况下，我们可能需要为文章中的外部链接和内部链接进行区分，分别设置它们的样式。

插件介绍

markdown-it-external-links 是一款 Markdown 渲染插件，为不同类型的链接增加 CSS class。

例如，你的文章中的链接：

1
2
3
4
5
6
7
- [Internal Link A](/)
- [Internal Link B](//example.org)
- [Internal Link C](http://example.org)
- [Internal Link D](other-page.html)
- [Internal Link E](.././other-page.html)
- [External Link A](//example.com)
- [External Link B](http://example.com)

将会被渲染为：

1
2
3
4
5
6
7
8
9
<ul>
  <li><a href="/" class="internal-link">Internal Link A</a></li>
  <li><a href="//example.org" class="internal-link">Internal Link B</a></li>
  <li><a href="http://example.org" class="internal-link">Internal Link C</a></li>
  <li><a href="other-page.html" class="internal-link">Internal Link D</a></li>
  <li><a href=".././other-page.html" class="internal-link">Internal Link E</a></li>
  <li><a href="//example.com" class="external-link">External Link A</a></li>
  <li><a href="http://example.com" class="external-link">External Link B</a></li>
</ul>

使用

在博客项目中安装插件：

1
npm install --save markdown-it-external-links

如果你的 Markdown 渲染引擎为 hexo-renderer-markdown-it 或 hexo-renderer-markdown-it-plus [1]，则在配置文件 _config.yml 中对应的地方引入该插件。

1
2
3
4
5
6
7
8
9
10
11
# markdown_it_plus 语法渲染插件选项
markdown_it_plus:
	plugins:
		# markdown-it-external-links 外部链接
		- plugin:
			name: markdown-it-external-links
			enable: true
			options:
			# this is plugin option
			externalClassName: link-external
			# internalClassName:

externalClassName 则允许我们自定义外部链接采用的样式名，这里为 link-external。

这里我以 CodePen 项目 Awesome link underlines 为例，将下面的 CSS 引入主题中，注意 CSS 选择器要重命名：

1
2
3
4
5
6
7
8
9
10
11
.link-external {
	color: black;
	border-bottom: 0.1em solid #669900;
	outline: 1em solid rgba(255, 215, 0, 0);
	text-decoration: none;
	transition: all 0.3s ease;
}
.link-external:hover, .link-external:focus, .link-external:active {
	background: #b5ca4226;
	outline: 0.1em solid #b5ca4226;
}

Butterfly 的引入方法为：

  1. 打开主题配置文件（butterfly.yml）
  2. 定位搜索 inject
  3. 其中 head 是用来引入 css 的
1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="your css">
  bottom:
    - <script src="your js"></script>

效果预览

demo

当然，我选的这个项目比较简单，你可以设置更复杂的样式分别对两种链接进行美化。

后续改进

  • 由于我的博客写作使用 Obsidian，内部链接一般使用双向链接的双中括号语法，这个插件暂时还识别不出。后续有时间改进一下。截至目前，双中括号语法已写新插件，这个问题有望解决：站内文章Hexo 博客适配 Obsidian 新语法。241124 问题已经解决

  1. 关于这两款插件的介绍可以参考：站内文章Hexo 博客适配 Obsidian 新语法 中的第一部分 ↩︎