将在线链接升级成可以预览网页图标的样子~

quartz 主题中，展示链接的插件是Plugin.CrawlLinks()，文档中介绍了现有的几种常用的设置，本文尝试将其拓展，增加一个showLinkFavicon属性：

1
Plugin.CrawlLinks({
2
  markdownLinkResolution: "shortest",
3
  openLinksInNewTab: true,
4
  lazyLoad: true,
5
  externalLinkIcon: true,
6
  showLinkFavicon: true,
7
}),

定义字段

在quartz\plugins\transformers\links.ts中，添加字段定义：

1
const defaultOptions: Options = {
2
  markdownLinkResolution: "absolute",
3
  prettyLinks: true,
4
  openLinksInNewTab: false,
5
  lazyLoad: false,
6
  externalLinkIcon: true,
7
  showLinkFavicon: true,
8
};

在CrawlLinks定义中添加实现：

1
export const CrawlLinks: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
2
  const opts = { ...defaultOptions, ...userOpts }
3
  return {
4
    name: "LinkProcessing",
5
    htmlPlugins(ctx) {
6
      return [
7
        () => {
8
          return (tree: Root, file) => {
9
            const curSlug = simplifySlug(file.data.slug!)
10
            const outgoing: Set<SimpleSlug> = new Set()
11

12
            const transformOptions: TransformOptions = {
13
              strategy: opts.markdownLinkResolution,
14
              allSlugs: ctx.allSlugs,
15
            }
16

17
            visit(tree, "element", (node, _index, _parent) => {
18

19
            // ...
20

21
                if (isExternal && opts.showLinkFavicon) {
22
                  const domain = new URL(node.properties.href).hostname
23
                  if (domain) {
24
                    node.children.unshift({
25
                      type: "element",
26
                      tagName: "img",
27
                      properties: {
28
                        src: `https://s2.googleusercontent.com/s2/favicons?domain_url==${domain}`,
29
                        alt: "",
30
                        style: "width: 1em; height: auto; margin-left: 4px; margin-right: 4px; vertical-align: middle;",
31
                      },
32
                      children: [],
33
                    })
34
                  }
35
                }
36
            // ...

实现思路

直接使用 favicon 默认路径

大多数网站在根目录下有 favicon.ico 文件，可以通过示例中的方法捕获：

1
function getDefaultFaviconUrl(url: string): string {
2
  const domain = new URL(url).origin;
3
  return `${domain}/favicon.ico`;
4
}
5

6
// 使用示例
7
const faviconUrl = getDefaultFaviconUrl("https://example.com");
8
console.log("Default favicon URL:", faviconUrl);

但是 favicon.ico 并不是每个网站都设置在同样的路径下，其格式也不一定都是.ico。

使用 Google Favicon 服务

调用 Google favicon API，这个 api 可以仅通过网站域名即可抓取网站的 favicon，使用方法如下：

1
https://s2.googleusercontent.com/s2/favicons?domain_url=目标网站域名

还可以通过sz属性指定获取的 icon 的大小（如果访问的网站有这样的尺寸），sz属性的单位是px，默认值是 16：

1
https://s2.googleusercontent.com/s2/favicons?domain_url=example.com&sz=大小

1
async function getFaviconUrl(url: string): Promise<string | null> {
2
  try {
3
    // 提取域名
4
    const domain = new URL(url).hostname;
5
    return `https://s2.googleusercontent.com/s2/favicons?domain_url=${domain}`;
6
  } catch (error) {
7
    console.error("Error getting favicon:", error);
8
    return null;
9
  }
10
}
11

12
// 使用示例
13
getFaviconUrl("https://example.com").then((faviconUrl) => {
14
  console.log("Favicon URL:", faviconUrl);
15
});