Icarus用户指南 - CDN提供商

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

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

内置CDN提供商

目前,Icarus提供如下的内置CDN服务提供商:

  • JavaScript库CDN
    • cdnjs.com (cdnjs)
    • jsDelivr (jsdelivr)
    • UNPKG (unpkg)
    • loli.net (loli)
  • Web字体CDN
    • Google Fonts (google)
    • loli.net (loli)
  • FontAwesome图标CDN
    • FontAwesome 5 (fontawesome)
    • loli.net (loli)

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

_config.icarus.yml
1
2
3
4
providers:
cdn: jsdelivr
fontcdn: google
iconcdn: fontawesome

自定义CDN提供商

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

JavaScript库CDN

CDN URL模板
1
https://some.cdn.domain.name/${package}/${version}/${filename}

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

UNPKG CDN URL示例
1
https://unpkg.com/d3@5.7.0/dist/d3.min.js

可以被概括成:

UNPKG CDN URL模板
1
https://unpkg.com/${package}@${version}/${filename}

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

CDN.js CDN URL示例
1
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js

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

UNPKG CDN URL示例
1
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模板
1
'[cdnjs]https://some.cdn.domain.name/${package}/${version}/${filename}'

Web字体CDN

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

Webfont CDN URL模板
1
https://some.google.font.mirror/${type}?family=${fontname}

FontAwesome图标CDN

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

Icon Font CDN URL模板
1
https://custom.fontawesome.mirror/some.stylesheet.css

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

_config.icarus.yml
1
2
3
4
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.

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

PPOffice

发布于

2016-01-01

许可协议

CC BY-NC-SA 4.0

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×