如何为MkDocs中的外部超链接设置差异化主题？

要实现类似维基百科的外部链接图标效果，直接用Material主题支持的自定义CSS就能搞定，步骤很简单：

1. 创建自定义CSS文件
   在你的docs目录下新建stylesheets文件夹，里面创建extra.css文件（如果已经有就直接用）。

2. 添加外部链接样式代码
   把下面的CSS代码复制进去，记得把your-site-domain替换成你自己网站的域名（比如example.com），这样能排除指向自己站点的绝对路径链接：

/* 给外部链接添加跳转图标 */
a[href^="http"]:not([href*="your-site-domain"]):not([href^="mailto:"]):not([href^="tel:"])::after {
  content: "open_in_new";
  font-family: "Material Icons";
  font-size: 0.8em;
  vertical-align: middle;
  margin-left: 4px;
  opacity: 0.7;
}

这段代码会给所有以http开头、但不包含你的域名、也不是邮件/电话链接的a标签，在后面加上Material主题内置的open_in_new图标，样式和主题风格统一。

3. 在mkdocs.yml中启用自定义CSS
   打开你的mkdocs.yml配置文件，添加或修改extra_css项，指向刚才的CSS文件：

extra_css:
  - stylesheets/extra.css

4. 测试效果
   重新运行mkdocs serve，打开预览页面就能看到：所有外部链接后面都多了一个小图标，内部链接则保持原有样式，用户一眼就能区分。

如果需要调整图标大小、间距或者颜色，直接修改CSS里的font-size、margin-left、opacity这些属性就行。

内容的提问来源于stack exchange，提问作者sorin