chore(doc): update zh-CN share button doc

2020-05-15 20:34:56 -04:00 · 2020-05-15 20:34:56 -04:00 · e90bd3fc19
parent 53f6e0ee09
commit e90bd3fc19
4 changed files with 140 additions and 83 deletions
--- a/source/_posts/en/CDN-Providers.md
+++ b/source/_posts/en/CDN-Providers.md
@ -67,13 +67,13 @@ https://some.cdn.domain.name/${package}/${version}/${filename}

 You need to replace the actual package name, version of the package, and relative file path with `${package}`, 
 `${version}`, and `${filename}` placeholders.
-For example, a JavaScript library with the following URL
+For example, a JavaScript library with the following URL:

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

-can be generalized to this
+can be generalized to this:

 {% codeblock "UNPKG CDN URL Template" %}
 https://unpkg.com/${package}@${version}/${filename}
@ -93,7 +93,7 @@ https://unpkg.com/moment@2.22.2/min/moment.min.js
 {% endcodeblock %}

 Therefore, you should be aware of the URL format of your custom CDN provider.
-By default, Icarus will try to pass in the parameter just like they would be for an npm repository 
+By default, Icarus will try to pass in the parameter using npm package name and relative file path 
 (e.g., `moment@2.22.2/min/moment.min.js`). 
 This npm scheme is used by jsDelivr and UNPKG. 
 Otherwise, if you are using a CDN.js like provider, please prepend `[cdnjs]` to its URL template:
--- a/source/_posts/en/Share-Buttons.md
+++ b/source/_posts/en/Share-Buttons.md
@ -113,7 +113,7 @@ Take the following steps if you want to customize the share buttons:

 4. Since the share buttons of Icarus is provided by 
   [ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno),
-   You need to copy the layout file 
+   you need to copy the layout file 
   ([src/view/share/addtoany.jsx](https://github.com/ppoffice/hexo-component-inferno/blob/0.2.2/src/view/share/addtoany.jsx)) 
   of AddToAny from this repository
   to `themes/icarus/layout/share/addtoany.jsx`.
@ -133,7 +133,7 @@ Take the following steps if you want to customize the share buttons:
    <!-- AddToAny END -->
    {% endcodeblock %}

-    You should make the following changes to `addtoany.jsx`:
+    then you should make the following changes to `addtoany.jsx`:

    {% codeblock themes/icarus/layout/share/addtoany.jsx lang:diff >folded %}
    const { Component, Fragment } = require('inferno');
--- a/source/_posts/zh-CN/CDN-Providers.md
+++ b/source/_posts/zh-CN/CDN-Providers.md
@ -12,32 +12,33 @@ providers:
    iconcdn: loli
 ---

-<div class="notification is-success is-size-6">
-本文同时提供以下语言的翻译：<a href="{% post_path en/CDN-Providers %}">English</a>。
-</div>
-
 选择合适的CDN提供商可以大幅度减少网站访客的网页加载时间。
-Icarus为你提供了多种内置的CDN提供商来加快主题所用到的前端资源的加载。
+Icarus为你提供了几种内置的CDN提供商来承载Icaurs所用到的第三方库和资源文件的加载。
+
+<article class="message message-immersive is-primary">
+<div class="message-body">
+<i class="fas fa-globe-americas mr-2"></i>本文同时提供以下语言的翻译：<a href="{% post_path en/CDN-Providers %}">English</a>。
+</div>
+</article>

 <!-- more -->

-<div class="notification is-link is-size-6">
-
-Icarus的CDN相关功能由[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno)
-提供，具体提供的CDN提供商种类与配置以其为准。
-
+<article class="message message-immersive is-primary">
+<div class="message-body">
+<i class="fas fa-info-circle mr-2"></i>下面的CDN功能由<a href="https://github.com/ppoffice/hexo-component-inferno">ppoffice/hexo-component-inferno</a>提供，完整的支持提供商列表和配置详情以其为准。
 </div>
+</article>

 ## 内置CDN提供商

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

 - **JavaScript库CDN**
    - cdnjs.com (`cdnjs`)
    - jsDelivr (`jsdelivr`)
    - UNPKG (`unpkg`)
    - loli.net (`loli`)
- **网络字体CDN**
+- **Web字体CDN**
    - Google Fonts (`google`)
    - loli.net (`loli`)
 - **FontAwesome图标CDN**
@ -55,8 +56,8 @@ providers:

 ## 自定义CDN提供商

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

 ### JavaScript库CDN

@ -64,47 +65,45 @@ providers:
 https://some.cdn.domain.name/${package}/${version}/${filename}
 {% endcodeblock %}

-你需要将CDN URL中的包名称，版本号，和文件相对路径替换为`${package}`， `${version}`，和`${filename}`占位符来获取
-CDN的URL模板。
-例如，如下JavaScript的在UNPKG CDN上的URL地址
+你需要将实际的包名称，包版本号，和文件相对路径替换为`${package}`， `${version}`，和`${filename}`占位符。
+例如，如下JavaScript库的URL地址：

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

-改写成的URL模板为
+可以被概括成：

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

-一些CDN提供商可能采用不同的URL形式，而在这些CDN上包名称或文件相对路径与其他CDN会有所不同。
+一些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形式
+但在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`）。
+默认情况下，Icarus向URL模板中传入的参数采用npm的包名称和文件相对路径（例如`moment@2.22.2/min/moment.min.js`）。
 jsDelivr和UNPKG就采用这种npm形式。
-另外，如果你使用的CDN采用如CDN.js这样的URL形式，请在URL模板前加上`[cdnjs]`前缀。
+否则，如果你采用如CDN.js这样的CDN提供商，请在URL模板前加上`[cdnjs]`：

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

-### 网络字体CDN
+### Web字体CDN

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

 {% codeblock "Webfont CDN URL模板" %}
@ -113,15 +112,15 @@ https://some.google.font.mirror/${type}?family=${fontname}

 ### FontAwesome图标CDN

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

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

-以上自定义配置可以放到主题配置文件中的`providers`部分：
+以上自定义配置需放到主题配置中的`providers`部分：

 {% codeblock themes/icarus/_config.yml lang:yaml %}
 providers:
@ -132,10 +131,12 @@ providers:

 ## CDN工具函数

-本主题提供了三个工具函数来帮助主题开发者轻松引用第三方的前端资源。
+本主题定义了三个工具函数来帮助主题开发者轻松使用自定义CDN来引用第三方的前端资源。
 详情请参见[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno/blob/0.2.3/src/hexo/helper/cdn.js).


-<div class="notification is-warning is-size-6">
-文章内容有误？请点击<a href="https://github.com/ppoffice/hexo-theme-icarus/edit/site/source/_posts/zh-CN/CDN-Providers.md">此处</a>提交修改。
+<article class="message message-immersive is-warning">
+<div class="message-body">
+<i class="fas fa-question-circle mr-2"></i>文章内容有误？请点击<a href="https://github.com/ppoffice/hexo-theme-icarus/edit/site/source/_posts/zh-CN/CDN-Providers.md">此处</a>提交修改。
 </div>
+</article>
--- a/source/_posts/zh-CN/Share-Buttons.md
+++ b/source/_posts/zh-CN/Share-Buttons.md
@ -16,21 +16,21 @@ providers:
    iconcdn: loli
 ---

-<div class="notification is-success is-size-6">
-本文同时提供以下语言的翻译：<a href="{% post_path en/Share-Buttons %}">English</a>。
-</div>
+本文介绍Icarus 3支持的分享按钮的安装配置。

-本文介绍Icarus 3支持的一些分享按钮的安装配置。
+<article class="message message-immersive is-primary">
+<div class="message-body">
+<i class="fas fa-globe-americas mr-2"></i>本文同时提供以下语言的翻译：<a href="{% post_path en/Share-Buttons %}">English</a>。
+</div>
+</article>

 <!-- more -->

-
-<div class="notification is-link is-size-6">
-
-Icarus的分享按钮由[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno)
-提供，具体提供的按钮种类与配置以其为准。
-
+<article class="message message-immersive is-primary">
+<div class="message-body">
+<i class="fas fa-info-circle mr-2"></i>下面的分享按钮由<a href="https://github.com/ppoffice/hexo-component-inferno">ppoffice/hexo-component-inferno</a>提供，完整的支持按钮列表和配置详情以其为准。
 </div>
+</article>

 <style>
 .content ol:not([type]) {
@ -41,29 +41,46 @@ Icarus的分享按钮由[ppoffice/hexo-component-inferno](https://github.com/ppo

 ## AddThis

-<div class="notification is-warning is-size-6">
-此分享按钮可能会被部分广告拦截浏览器扩展拦截，请酌情使用。
+<article class="message message-immersive is-danger">
+<div class="message-body">
+<i class="fas fa-exclamation-triangle mr-2"></i>此分享按钮可能会被部分广告拦截浏览器扩展拦截，请酌情使用。
 </div>
+</article>

 <div>
 <strong>安装指南</strong>
 <a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/AddThis %}">在线预览</a>
 </div>

-1. 注册[AddThis](https://www.addthis.com/)。在首次注册时的“选择工具”(Select a Tool)页面选择“分享按钮”(Share Buttons)。
+1. 注册[AddThis](https://www.addthis.com/)。
+   在提交注册表单后的“选择工具”(Select a Tool)页面选择“分享按钮”(Share Buttons)。

-2. 在“选择工具类型”(Select a Tool Type)界面选择分享按钮的展示样式，点击“继续”(Continue)。
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/addthis-select-tool.png 360 '"选择工具 - AddThis" "选择工具 - AddThis"' %}
+   <br>

-3. 在下一步的页面中按照需要进一步自定义分享按钮的样式与行为，完成时点击“激活工具”(Activate Tool)按钮。
+2. 在“选择工具类型”(Select a Tool Type)界面选择样式和按钮，点击“继续”(Continue)。

-4. 在获取代码界面找到分享按钮的HTML代码，复制其中的`src`地址并填入相应的主题配置中，例如下面的AddThis代码
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/addthis-select-tool-type.png 360 '"选择工具类型 Type - AddThis" "选择工具类型 Type - AddThis"' %}
+   <br>
+
+3. 在下一页面中进一步自定义分享按钮，完成时点击“激活工具”(Activate Tool)按钮。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/addthis-customize-share.png 360 '"自定义分享按钮 - AddThis" "自定义分享按钮 - AddThis"' %}
+   <br>
+
+4. 在”获取代码“(Get The Code)页面找到HTML代码，复制`src`属性值中的URL地址并填入分享按钮配置中。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/addthis-get-code.png 360 '"获取代码 - AddThis" "获取代码 - AddThis"' %}
+   <br>
+
+   例如，下面AddThis代码中的URL：

    {% codeblock AddThis代码 lang:html %}
    <!-- Go to www.addthis.com/dashboard to customize your tools -->
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxx"></script>
    {% endcodeblock %}

-    对应的主题配置为
+    对应如下的主题配置：

    {% codeblock themes/icarus/_config.yml lang:yaml %}
    share:
@ -79,18 +96,35 @@ Icarus的分享按钮由[ppoffice/hexo-component-inferno](https://github.com/ppo
 <a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/AddToAny %}">在线预览</a>
 </div>

-1. 无需注册步骤，直接修改主题配置来启用AddToAny：
+1. 你可以启用AddToAny而无需注册用户。
+   仅需将下面的代码放到你的主题配置中：

    {% codeblock themes/icarus/_config.yml lang:yaml %}
    share:
        type: addtoany
    {% endcodeblock %}

-2. (可选)若你需要对分享按钮进行进一步的个性化配置，请打开[AddToAny](https://www.addtoany.com/)官网，点击“获取分享按钮”
-   (Get the Share Button)，然后选择“任意网站”(Any Website)。在页面中完成配置后点击“获取按钮代码”(Get Button Code)。
-   例如，下面是获得的默认代码：
+如果你想自定义分享按钮，请采用如下步骤：

-    {% codeblock AddToAny代码 lang:html %}
+1. 访问[AddToAny](https://www.addtoany.com/)官网并点击“获取分享按钮”(Get the Share Button)。
+
+2. 然后，选择“任意网站”(Any Website)并完成按钮的配置。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/addtoany-select-platform.png 360 '"选择平台 - AddToAny" "选择平台 - AddToAny"' %}
+   <br>
+
+3. 完成后点击“获取按钮代码”(Get Button Code)。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/addtoany-get-code.png 360 '"获取代码 - AddToAny" "获取代码 - AddToAny"' %}
+   <br>
+
+4. 由于分享按钮是由[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno)
+   提供，你需要将AddToAny的布局文件[src/view/share/addtoany.jsx](https://github.com/ppoffice/hexo-component-inferno/blob/0.2.2/src/view/share/addtoany.jsx)从这个仓库中复制到`themes/icarus/layout/share/addtoany.jsx`。
+   然后，替换`addtoany.jsx`中AddToAny代码并修正文件头部的包引用。
+   
+   例如，假设下面的代码是你从上一步获得的代码：
+
+    {% codeblock AddToAny代码 lang:html >folded %}
    <!-- AddToAny BEGIN -->
    <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
    <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
@ -102,12 +136,9 @@ Icarus的分享按钮由[ppoffice/hexo-component-inferno](https://github.com/ppo
    <!-- AddToAny END -->
    {% endcodeblock %}

-    由于本Hexo主题的分享按钮由[ppoffice/hexo-component-inferno](https://github.com/ppoffice/hexo-component-inferno)
-    提供，若要对其中的分享按钮代码进行修改，需首先复制其中的文件到主题相应的目录下。例如，这里我们复制
-    [src/view/share/addtoany.jsx](https://github.com/ppoffice/hexo-component-inferno/blob/0.2.2/src/view/share/addtoany.jsx)到`themes/icarus/layout/share/`目录下。然后修改其中的`require`路径为正确的路径，并将上面的AddToAny的HTML代码替换
-    到文件的相应位置中即可。
+    那么你需要对`addtoany.jsx`做出如下修改：

-    {% codeblock themes/icarus/layout/share/addtoany.jsx lang:diff %}
+    {% codeblock themes/icarus/layout/share/addtoany.jsx lang:diff >folded %}
    const { Component, Fragment } = require('inferno');
    - const { cacheComponent } = require('../../util/cache');
    + const { cacheComponent } = require('hexo-component-inferno/lib/util/cache');
@ -137,20 +168,25 @@ Icarus的分享按钮由[ppoffice/hexo-component-inferno](https://github.com/ppo

 ## 百度分享

-<div class="notification is-warning is-size-6">
-此分享按钮可能会被部分广告拦截浏览器扩展拦截，请酌情使用。
+<article class="message message-immersive is-danger">
+<div class="message-body">
+<i class="fas fa-exclamation-triangle mr-2"></i>此分享按钮可能会被部分广告拦截浏览器扩展拦截，请酌情使用。
 </div>
+</article>

-<div class="notification is-warning is-size-6">
-百度分享按钮服务似乎已下线，建议使用其他分享按钮服务作为替代。
+<article class="message message-immersive is-danger">
+<div class="message-body">
+<i class="fas fa-exclamation-triangle mr-2"></i>百度分享按钮服务似乎已下线，建议使用其他分享按钮服务作为替代。
 </div>
+</article>

 <div>
 <strong>安装指南</strong>
 <a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/BaiduShare %}">在线预览</a>
 </div>

-1. 无需注册步骤，直接修改主题配置来启用百度分享：
+1. 你可以启用百度分享按钮而无需注册用户。
+   直接将下面的代码添加到你的主题配置中：

    {% codeblock themes/icarus/_config.yml lang:yaml %}
    share:
@ -160,24 +196,27 @@ Icarus的分享按钮由[ppoffice/hexo-component-inferno](https://github.com/ppo

 ## Share.js

-<div class="notification is-warning is-size-6">
-Share.js服务已停止维护，建议使用其他分享按钮服务作为替代。
+<article class="message message-immersive is-danger">
+<div class="message-body">
+<i class="fas fa-exclamation-triangle mr-2"></i>Share.js服务已停止维护，建议使用其他分享按钮服务作为替代。
 </div>
+</article>

 <div>
 <strong>安装指南</strong>
 <a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/Sharejs %}">在线预览</a>
 </div>

-1. 无需注册步骤，直接修改主题配置来启用Share.js：
+1. 你可以启用百度分享按钮而无需用户注册。
+   直接将下面代码添加到主题配置中：

    {% codeblock themes/icarus/_config.yml lang:yaml %}
    share:
        type: sharejs
    {% endcodeblock %}

-2. (可选)如果你需要自定义分享按钮，请参照[AddToAny](#AddToAny)中的第二步与[share.js主页](https://github.com/overtrue/share.js)
-   的相关信息。
+2. (可选)请参照[AddToAny](#AddToAny)部分的个性化步骤与[share.js主页](https://github.com/overtrue/share.js)
+   来了解更多关于自定义分享按钮的信息。


 ## ShareThis
@ -187,20 +226,35 @@ Share.js服务已停止维护，建议使用其他分享按钮服务作为替代
 <a class="tag is-success" style="margin-left:.8em" href="{% post_path demo/share/ShareThis %}">在线预览</a>
 </div>

-1. 打开[ShareThis官网](https://sharethis.com/)，点击页面上的“从分享按钮开始”(Start with Share Buttons)按钮。
+1. 访问[ShareThis](https://sharethis.com/)并点击页面上的“从分享按钮开始”(Start with Share Buttons)按钮。

-2. 在“选择分享按钮类型”(Choose type of sharing button)选择需要的按钮类型，如有需要的话可点击下方的“自定义你的分享按钮”
-   (Customize your share buttons)链接进行进一步配置。完成后点击“下一步”(Next)。
+2. 在“选择分享按钮类型”(Choose type of sharing button)页面选择你需要的按钮类型。
+   不要启用”GDPR规范工具“，否则可能会导致一些问题。
+   你也可以点击“自定义你的分享按钮”(Customize your share buttons)链接来进行按钮的进一步配置。
+   完成后点击“下一步”(Next)。

-3. 在“注册并获取代码”(Register and get the code!)界面点击HTML和“下一步”(Next)按钮。然后输入邮箱和密码完成ShareThis的注册。
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/sharethis-choose-button-type.png 360 '"选择按钮类型 - ShareThis" "选择按钮类型 - ShareThis"' %}
+   <br>

-4. 最后，复制代码获取界面中的`src`地址并填入相应的主题配置中，例如下面的ShareThis代码
+3. 在”选择你的CMS平台“(Choose your CMS platform)页面选择”HTML“并点击”下一步“(Next)。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/sharethis-choose-platform.png 360 '"选择平台 - ShareThis" "选择平台 - ShareThis"' %}
+   <br>
+
+3. 在“注册并获取代码”(Register and get the code!)页面输入邮箱和密码完成ShareThis的注册。
+
+4. 最后，从HTML代码段中复制`src`中的URL地址到分享按钮配置中。
+   
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/sharethis-get-code.png 360 '"获取代码 - ShareThis" "获取代码 - ShareThis"' %}
+   <br>
+
+   例如，下面的ShareThis代码：

    {% codeblock AddThis代码 lang:html %}
    <script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxxxxxx&product=inline-share-buttons" async="async"></script>
    {% endcodeblock %}

-    对应的主题配置为
+    对应下面的主题配置：

    {% codeblock themes/icarus/_config.yml lang:yaml %}
    share:
@ -209,6 +263,8 @@ Share.js服务已停止维护，建议使用其他分享按钮服务作为替代
    {% endcodeblock %}


-<div class="notification is-warning is-size-6">
-文章内容有误？请点击<a href="https://github.com/ppoffice/hexo-theme-icarus/edit/site/source/_posts/zh-CN/Share-Buttons.md">此处</a>提交修改。
+<article class="message message-immersive is-warning">
+<div class="message-body">
+<i class="fas fa-question-circle mr-2"></i>文章内容有误？请点击<a href="https://github.com/ppoffice/hexo-theme-icarus/edit/site/source/_posts/zh-CN/Share-Buttons.md">此处</a>提交修改。
 </div>
+</article>