feat(doc): add follow.it widget documentation

_config.icarus.yml

@@ -283,6 +283,16 @@ widgets:
     #     client_id: ''
     #     # AdSense AD unit ID
     #     slot_id: ''
+    # Follow.it email subscription widget configurations
+    # -
+    #     # Where should the widget be placed, left sidebar or right sidebar
+    #     position: left
+    #     type: followit
+    #     # Hint text under the email input
+    #     description: 
+    #     action_url: ''
+    #     # Feed claiming verification code
+    #     verification_code: ''
 # Plugin configurations
 # https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/
 plugins:

_config.yml

@@ -12,7 +12,7 @@ timezone:
 
 # URL
 ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
-url: http://blog.zhangruipeng.me/hexo-theme-icarus/
+url: http://ppoffice.github.io/hexo-theme-icarus/
 root: /hexo-theme-icarus/
 permalink: :category/:post_title/
 permalink_defaults:

package.json

@@ -12,6 +12,7 @@
     "hexo-deployer-git": "^2.0.0",
     "hexo-filter-github-emojis": "^2.1.0",
     "hexo-generator-archive": "^1.0.0",
+    "hexo-generator-feed": "^3.0.0",
     "hexo-generator-index": "^2.0.0",
     "hexo-generator-tag": "^1.0.0",
     "hexo-renderer-inferno": "^0.1.3",
@@ -20,4 +21,4 @@
     "hexo-server": "^2.0.0",
     "hexo-theme-icarus": "^4.3.0"
   }
-}
+}

source/_posts/en/Widgets.md

@@ -32,9 +32,10 @@ widgets:
         type: tags
     -
         position: left
-        type: subscribe_email
+        type: followit
         description: Subscribe to get the lastest update!
-        feedburner_id: ''
+        action_url: https://api.follow.it/subscription-form/ajQrZUVYeDgrSHY3R1FiQjVQSno2OWpFRjQwT2tzWkQyRURmNEVpVm9WSUVJY2U1RVNQNldPTzYwdFRZK0YzNFZVakRhMVJqZXRsdHlZKzNXd05pelhPQ0haMFdiVFpiTFB6ZzcwM0lQbTZmVExyL1BDTHJETE42M1BWZGR0blh8enN6Mjgrc1RQSFVpZm8wRC9HQVFmWURESkNONmlWUzF2azlYRkpFaTA2dz0=/8
+        verification_code: KdjLnnKMYJEQSXnzvGXM
     -
         position: right
         type: profile
@@ -236,10 +237,15 @@ widgets:
 {% endcodeblock %}
 
 
-## Subscribe Email
+## Google Feedburner
 
-The email subscription feature of Icarus is provided by Google Feedburner.
-To enable this widget, take the following steps:
+<article class="message message-immersive is-danger">
+<div class="message-body">
+<i class="fas fa-exclamation-triangle mr-2"></i><a href="https://support.google.com/feedburner/answer/10483501" target="_blank">Google is shutting down the email subscription feature of Feedburner.</a> You can switch to <a href="#follow-it">the follow.it widget</a> or other email subscription services.
+</div>
+</article>
+
+To enable Google Feedburner email subscription widget, take the following steps:
 
 1. First, you need to generate the RSS feed of your Hexo site using a Hexo plugin like
    [hexo-generator-feed](https://github.com/hexojs/hexo-generator-feed).
@@ -309,6 +315,77 @@ widgets:
 {% endcodeblock %}
 
 
+## follow.it
+
+To enable [follow.it](https://follow.it) email subscription widget, take the following steps:
+
+1. First, you need to generate the RSS feed of your Hexo site using a Hexo plugin like
+   [hexo-generator-feed](https://github.com/hexojs/hexo-generator-feed).
+
+2. Go to [follow.it](https://follow.it/ni) and enter the URL to your RSS feed file in the text input under
+   "Add the follow feature to your site", e.g., `http://example.com/atom.xml`.
+   Then, click "Next".
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-enter-feed-url.png 360 '"Enter Feed URL - follow.it" "Enter Feed URL - follow.it"' %}
+   <br>
+
+3. Click the "Continue" button on the "Define the follow form’s design" page.
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-create-form.png 360 '"Create Form - follow.it" "Create Form - follow.it"' %}
+   <br>
+
+4. Search for `action=` and copy the link between double quotes after `action=`.
+   Paste the action link you copied to the `action_url` setting of the widget configuration.
+   After that, click "Done".
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-copy-code.png 360 '"Copy Action URL - follow.it" "Copy Action URL - follow.it"' %}
+   <br>
+
+   {% codeblock _config.icarus.yml lang:yaml %}
+   widgets:
+       -
+           position: left
+           type: followit
+           description: 
+           action_url: https://api.follow.it/******
+           verification_code: ''
+   {% endcodeblock %}
+
+5. Click the "Continue" button or the "Skip this" link to skip the "Pick the Follow icons you want" page and 
+   "Show a pop-up for maximum conversion" page.
+
+6. At the "Connect your feed to a follow.it account" page, enter your email address that you will use to create a follow.it
+   account and manage followers in the text input.
+   Then, click "Start".
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-connect-account.png 360 '"Connect Account - follow.it" "Connect Account - follow.it"' %}
+   <br>
+
+7. You will then receive an email from follow.it.
+   In that email, search for `<meta name="follow_it-verification-code" content="******"/>` and copy the `content` value
+   between double quotes after `content=`.
+   Paste the content value you copied to the `verification_code` setting of the widget configuration.
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-copy-verification-code.png 360 '"Copy Verification Code - follow.it" "Copy Verification Code - follow.it"' %}
+   <br>
+
+   {% codeblock _config.icarus.yml lang:yaml %}
+   widgets:
+       -
+           position: left
+           type: followit
+           description: 
+           action_url: https://api.follow.it/******
+           verification_code: ******
+   {% endcodeblock %}
+
+8. Go back to follow.it and register an account using your email.
+
+9. Go back to the first email you receive and click on the "Click here to claim it" link to claim your feed.
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-verify-claim.png 360 '"Verify Claim - follow.it" "Verify Claim - follow.it"' %}
+   <br>
+
 <article class="message message-immersive is-warning">
 <div class="message-body">
 <i class="fas fa-question-circle mr-2"></i>Something wrong with this article? 

source/_posts/zh-CN/Widgets.md

@@ -235,10 +235,15 @@ widgets:
 {% endcodeblock %}
 
 
-## 邮件订阅
+## Google Feedburner
 
-Icarus的邮件订阅功能由Google Feedburner提供。
-按照如下步骤即可启用此插件：
+<article class="message message-immersive is-danger">
+<div class="message-body">
+<i class="fas fa-exclamation-triangle mr-2"></i><a href="https://support.google.com/feedburner/answer/10483501" target="_blank">Google即将关闭Feedburner的邮件订阅功能。</a> 你可以切换到<a href="#follow-it">follow.it挂件</a>或者其他邮件订阅服务。
+</div>
+</article>
+
+按照如下步骤即可启用Google Feedburner插件：
 
 1. 首先，使用诸如[hexo-generator-feed](https://github.com/hexojs/hexo-generator-feed)此类的Hexo插件生成
    你的Hexo网站的RSS源。
@@ -305,6 +310,78 @@ widgets:
 {% endcodeblock %}
 
 
+## follow.it
+
+
+按照如下步骤即可启用[follow.it](https://follow.it)邮件订阅插件：
+
+1. 首先，使用诸如[hexo-generator-feed](https://github.com/hexojs/hexo-generator-feed)此类的Hexo插件生成
+   你的Hexo网站的RSS源。
+
+2. 访问[follow.it](https://follow.it/ni)并在“向你的站点添加关注功能”(Add the follow feature to your site)下方的
+   输入框中填写RSS源的文件地址，例如`http://example.com/atom.xml`。
+   然后，点击“下一步”(Next)。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-enter-feed-url.png 360 '"输入订阅源URL - follow.it" "输入订阅源URL - follow.it"' %}
+   <br>
+
+3. 点击“定义关注表单设计”(Define the follow form’s design)页面上的“继续”(Continue)按钮。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-create-form.png 360 '"创建表单 - follow.it" "创建表单 - follow.it"' %}
+   <br>
+
+4. 搜索`action=`并复制`action=`后双引号中的链接。
+   把你复制的action链接粘贴到挂件配置中的`action_url`设置项。
+   在那之后，点击“完成”(Done)。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-copy-code.png 360 '"复制Action链接 - follow.it" "复制Action链接 - follow.it"' %}
+   <br>
+
+   {% codeblock _config.icarus.yml lang:yaml %}
+   widgets:
+       -
+           position: left
+           type: followit
+           description: 
+           action_url: https://api.follow.it/******
+           verification_code: ''
+   {% endcodeblock %}
+
+5. 点击“继续”(Continue)按钮或者“跳过此步”(Skip this)链接来跳过“选择你想要的关注按钮”(Pick the Follow icons you want)和
+   ”显示弹窗来最大化交流“(Show a pop-up for maximum conversion)页面。
+
+6. 在”连接你的源到follow.it账户“(Connect your feed to a follow.it account)页面上，在输入框中填入你将要用来注册follow.it账户
+   和管理订阅者的邮箱地址。
+   然后，点击”开始“(Start)。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-connect-account.png 360 '"连接账户 - follow.it" "连接账户 - follow.it"' %}
+   <br>
+
+7. 你会收到一封来自follow.it的邮件。
+   在那封邮件中搜索`<meta name="follow_it-verification-code" content="******"/>`并复制`content=`后双引号中的`content`的值。
+   将你复制的值粘贴到挂件设置中的`verification_code`设置项。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-copy-verification-code.png 360 '"复制验证码 - follow.it" "复制验证码 - follow.it"' %}
+   <br>
+
+   {% codeblock _config.icarus.yml lang:yaml %}
+   widgets:
+       -
+           position: left
+           type: followit
+           description: 
+           action_url: https://api.follow.it/******
+           verification_code: ******
+   {% endcodeblock %}
+
+8. 回到follow.it并用你的邮箱地址注册一个账户。
+
+9. 回到你收到的第一封邮件并点击”点击这里来认领“(Click here to claim it)链接来认领你的订阅源。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/follow-it-verify-claim.png 360 '"验证认领 - follow.it" "验证认领 - follow.it"' %}
+   <br>
+
+
 <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/Widgets.md">此处</a>提交修改。

source/about/index.md

@@ -163,7 +163,7 @@ If you feel like to help us build a better Icarus, you can
 
 :black_nib: [Submit a tutorial](https://github.com/ppoffice/hexo-theme-icarus/new/site/source/_posts) |
 :earth_asia: [Add a translation](https://github.com/ppoffice/hexo-theme-icarus/tree/master/languages) |
-:triangular_flag_on_post: [Report a bug](https://github.com/ppoffice/hexo-theme-icarus/issues/new) |
+:triangular_flag_on_post: [Report a bug](https://github.com/ppoffice/hexo-theme-icarus/issues) |
 :electric_plug: [Suggest a new feature](https://github.com/ppoffice/hexo-theme-icarus/pulls)
 
 ## :memo: License