hexo-theme-icarus

4.8 KiB

Raw Blame History

title: Icarus用户指南 - CDN提供商 date: 2016-01-01 categories:

Configuration tags:
Icarus用户指南 language: zh-CN toc: true providers: cdn: loli fontcdn: loli iconcdn: loli

选择合适的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)
FontAwesome图标CDN
- FontAwesome 5 (fontawesome)
- loli.net (loli)

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

{% codeblock _config.icarus.yml lang:yaml %} providers: cdn: jsdelivr fontcdn: google iconcdn: fontawesome {% endcodeblock %}

自定义CDN提供商

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

JavaScript库CDN

{% codeblock "CDN URL模板" %} https://some.cdn.domain.name/{package}/{version}/${filename} {% endcodeblock %}

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

{% codeblock "UNPKG CDN URL示例" %} https://unpkg.com/d3@5.7.0/dist/d3.min.js {% endcodeblock %}

可以被概括成：

{% codeblock "UNPKG CDN URL模板" %} https://unpkg.com/{package}@{version}/${filename} {% endcodeblock %}

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

{% codeblock "CDN.js CDN URL示例" %} https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js {% endcodeblock %}

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

{% codeblock "UNPKG CDN URL示例" %} https://unpkg.com/moment@2.22.2/min/moment.min.js {% endcodeblock %}

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

{% codeblock "CDN.js-style URL模板" %} [cdnjs]https://some.cdn.domain.name/{package}/{version}/${filename} {% endcodeblock %}

Web字体CDN

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

{% codeblock "Webfont CDN URL模板" %} https://some.google.font.mirror/{type}?family={fontname} {% endcodeblock %}

FontAwesome图标CDN

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

{% codeblock "Icon Font CDN URL模板" %} https://custom.fontawesome.mirror/some.stylesheet.css {% endcodeblock %}

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

{% codeblock _config.icarus.yml lang:yaml %} 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' {% endcodeblock %}

CDN工具函数

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

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

4.8 KiB Raw Blame History Unescape Escape