Icarus用户指南 - CDN提供商

选择合适的CDN提供商可以大幅度减少网站访客的网页加载时间。 Icarus为你提供了几种内置的CDN提供商来承载Icaurs所用到的第三方库和资源文件的加载。

本文同时提供以下语言的翻译：English。

下面的CDN功能由ppoffice/hexo-component-inferno提供，完整的支持提供商列表和配置详情以其为准。

内置CDN提供商

目前，Icarus提供如下的内置CDN服务提供商：

• JavaScript库CDN
  • cdnjs.com (cdnjs)
  • jsDelivr (jsdelivr)
  • UNPKG (unpkg)
  • loli.net (loli)
• Web字体CDN
  • Google Fonts (google)
  • loli.net (loli)
  • font.im (fontim)
  • 中国科学技术大学 (ustc)
• FontAwesome图标CDN
  • FontAwesome 5 (fontawesome)
  • loli.net (loli)

默认的CDN服务提供商配置为：

_config.icarus.yml

providers:
    cdn: jsdelivr
    fontcdn: google
    iconcdn: fontawesome

自定义CDN提供商

除此之外，你还可以通过URL模板来自定义CDN提供商。 每种类别提供商的模板格式如下所示：

JavaScript库CDN

CDN URL模板

https://some.cdn.domain.name/${package}/${version}/${filename}

你需要将实际的包名称，包版本号，和文件相对路径替换为${package}， ${version}，和${filename}占位符。 例如，如下JavaScript库的URL地址：

UNPKG CDN URL示例

https://unpkg.com/d3@5.7.0/dist/d3.min.js

可以被概括成：

UNPKG CDN URL模板

https://unpkg.com/${package}@${version}/${filename}

一些CDN提供商可能采用不同的URL形式。 例如，moment.js库在CDN.js上有着如下的URL形式：

CDN.js CDN URL示例

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js

但在UNPKG上有着这样的URL形式：

UNPKG CDN URL示例

https://unpkg.com/moment@2.22.2/min/moment.min.js

因此，你需要注意你的自定义CDN提供商的URL格式。 默认情况下，Icarus向URL模板中传入的参数采用npm的包名称和文件相对路径（例如moment@2.22.2/min/moment.min.js）。 jsDelivr和UNPKG就采用这种npm形式。 否则，如果你采用如CDN.js这样的CDN提供商，请在URL模板前加上[cdnjs]：

CDN.js-style URL模板

'[cdnjs]https://some.cdn.domain.name/${package}/${version}/${filename}'

Web字体CDN

你可以参入Google字体镜像站的URL或是与其兼容的网络字体CDN。 Icarus依赖Ubuntu，Oxanium，和Source Code Pro这三种字体，所以确保你使用的CDN提供这些字体。 自定义的URL模板需包含字体类型type（图标icon或是字体font）和字体名称fontname两个占位符：

Webfont CDN URL模板

https://some.google.font.mirror/${type}?family=${fontname}

FontAwesome图标CDN

你可以传入自定义的FontAwesome CDN提供商的URL。 URL中不需要包含占位符。 本主题用到了一些FontAwesome 5图标，所以自定义的提供商需要至少提供它们。

Icon Font CDN URL模板

https://custom.fontawesome.mirror/some.stylesheet.css

以上自定义配置需放到主题配置中的providers部分：

_config.icarus.yml

providers:
    cdn: 'https://some.cdn.domain.name/${package}/${version}/${filename}'
    fontcdn: 'https://some.google.font.mirror/${type}?family=${fontname}'
    iconcdn: 'https://custom.fontawesome.mirror/some.stylesheet.css'

CDN工具函数

本主题定义了三个工具函数来帮助主题开发者轻松使用自定义CDN来引用第三方的前端资源。 详情请参见ppoffice/hexo-component-inferno.

文章内容有误？请点击此处提交修改。