chore(docs): reflect changes in Icarus 4.1.0

source/_posts/en/Configuring-Theme.md

@@ -73,6 +73,46 @@ head:
     favicon: /img/favicon.svg
 {% endcodeblock %}
 
+### Web App Manifest
+
+Icarus supports basic PWA `manifest.json` generation and meta tags.
+To enable web app manifest, use the following configuration in your theme configuration file.
+You can also refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/Manifest) for details
+on each manifest configuration setting.
+
+{% codeblock _config.icarus.yml lang:yaml >folded %}
+manifest:
+    # Name of the web application (default to the site title)
+    name: Icaurs - Hexo Theme
+    # The displayed name of the web application
+    # when there is not enough space to display full name
+    short_name: Icarus
+    # The start URL of the web application
+    start_url: https://ppoffice.github.io/
+    # The default theme color for the application
+    theme_color: "#3273dc"
+    # A placeholder background color for the application page to display
+    # before its stylesheet is loaded
+    background_color: "#3273dc"
+    # The preferred display mode for the website
+    display: standalone
+    # Image files that can serve as application icons for different contexts
+    icons:
+        -
+            # The path to the image file
+            src: icons/touch-icon-iphone.png
+            # A string containing space-separated image dimensions
+            sizes: 144x144
+            # A hint as to the media type of the image (optional)
+            type: image/png
+        -
+            src: icons/touch-icon-ipad.png
+            sizes: 152x152
+        -
+            src: icon/logo.ico
+            sizes: 72x72 96x96 128x128 256x256
+{% endcodeblock %}
+
 ### Open Graph
 
 You can set up Open Graph in the `head` section.

source/_posts/en/Other-Plugins.md

@@ -10,6 +10,12 @@ toc: true
 plugins:
     animejs: true
     back_to_top: true
+    cookie_consent:
+        type: info
+        theme: classic
+        static: false
+        position: bottom
+        policyLink: 'https://www.cookiesandyou.com/'
     gallery: true
     google_analytics:
         tracking_id: UA-72437521-5
@@ -347,6 +353,32 @@ and they are
 When \`a != 0\`, there are two solutions to \`ax^2 + bx + c = 0\` and they are <p style="text-align:center">\`x = (-b +- sqrt(b^2-4ac))/(2a)\`.</p>
 
 
+## Cookie Consent
+
+**Installation Guide**
+
+You can show a cookie consent dialog to your visitor by enabling the Cookie Consent plugin.
+Please refer to [Download Cookie Consent](https://www.osano.com/cookieconsent/download/) and 
+[Documentation for the Cookie Consent plugin](https://www.osano.com/cookieconsent/documentation/about-cookie-consent/)
+for details on each configuration setting.
+You can also disable the cookie consent dialog by commenting out the configurations.
+
+{% codeblock _config.icarus.yml lang:yaml %}
+plugins:
+    cookie_consent:
+        # The compliance type. Can be "info", "opt-in", or "opt-out"
+        type: info
+        # Theme of the popup. Can be "block", "edgeless", or "classic"
+        theme: edgeless
+        # Whether the popup should stay static regardless of the page scrolls
+        static: false
+        # Where on the screen the consent popup should display
+        position: bottom-left
+        # URL to your site's cookie policy
+        policyLink: 'https://www.cookiesandyou.com/'
+{% endcodeblock %}
+
+
 ## Outdated Browser
 
 **Installation Guide**

source/_posts/en/Web-Analytics-Plugins.md

@@ -76,6 +76,31 @@ Use them with caution.
     {% endcodeblock %}
 
 
+## Bing Webmaster Tools
+
+**Installation Guide**
+
+1. Log into [Bing - Webmaster Tools](https://www.bing.com/toolbox/webmaster/).
+   Then, choose "Add your site manually" and enter the URL to your site.
+   Click "Add" button to continue.
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/bing-webmaster-add-site.png 360 '"Add Site - Bing Webmaster Tools" "Add Site - Bing Webmaster Tools"' %}
+   <br>
+
+2. In the "Add & verify site" panel, select "HTML Meta Tag" method.
+   Copy value of the `content` attribute in the HTML meta tag to the `plugins` > `bing_webmaster` > `tracking_id`
+   in the theme configurations.
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/bing-webmaster-verify-site.png 360 '"Verify Site - Bing Webmaster Tools" "Verify Site - Bing Webmaster Tools"' %}
+   <br>
+
+    {% codeblock _config.icarus.yml lang:yaml %}
+    plugins:
+        bing_webmaster:
+            tracking_id: ABCDEFABCDEFABCDEFABCDEFABCDEFABCDEF
+    {% endcodeblock %}
+
+
 ## BuSuanZi Web Counter
 
 **Installation Guide**
@@ -186,6 +211,93 @@ Use them with caution.
     {% endcodeblock %}
 
 
+## Statcounter
+
+**Installation Guide**
+
+1. Log into [Statcounter](https://statcounter.com/).
+   Click "Add New Project" button in the "Projects" page.
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/statcounter-projects.png 360 '"Projects - Statcounter" "Projects - Statcounter"' %}
+   <br>
+
+2. Fill in the website URL and project title in the "Add Project" page.
+   Tweak rest of the project settings if you need to.
+   Then, click the "Add Project" button.
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/statcounter-add-project.png 360 '"Add Project - Statcounter" "Add Project - Statcounter"' %}
+   <br>
+
+3. Click "Continue to Default Installation" in the "Platform Check Complete" page.
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/statcounter-platform-check.png 360 '"Platform Check Complete - Statcounter" "Platform Check Complete - Statcounter"' %}
+   <br>
+
+4. Finally, in the "Insert the Code on Your Website" page, copy the value of `sc_project` and `sc_security` variable in the HTML snippet
+   to `plugins` > `statcounter` > `project` and `plugins` > `statcounter` > `security` in the theme configurations, respectively.
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/statcounter-insert-code.png 360 '"Insert Code - Statcounter" "Insert Code - Statcounter"' %}
+   <br>
+
+   For example, the following Statcounter code:
+
+   {% codeblock "Statcounter code" lang:html %}
+   <script type="text/javascript">
+   var sc_project=12345678; 
+   var sc_invisible=1; 
+   var sc_security="abcdef12"; 
+   var sc_https=1; 
+   </script>
+   <script type="text/javascript"
+   src="https://www.statcounter.com/counter/counter.js"
+   async></script>
+   ...
+   {% endcodeblock %}
+
+   maps to the following theme configuration:
+
+   {% codeblock _config.icarus.yml lang:yaml %}
+   plugins:
+      statcounter:
+         project: 12345678
+         security: abcdef12
+   {% endcodeblock %}
+
+
+## Twitter Conversion Tracking
+
+**Installation Guide**
+
+1. Follow [How to set up conversion tracking](https://business.twitter.com/en/help/campaign-measurement-and-analytics/conversion-tracking-for-websites.html) to enable universal website tag of Twitter conversion tracking.
+
+2. Find the `init` (Pixel ID) in your conversion tracking code. Copy its value to `plugins` > `twitter_conversion_tracking` > `pixel_id`
+   in the theme configurations.
+
+   For example, the following Twitter conversion tracking code:
+
+   {% codeblock "Twitter conversion tracking code" lang:html %}
+   <!-- Twitter universal website tag code -->
+   <script>
+   !function(e,n,u,a){e.twq||(a=e.twq=function(){a.exe?a.exe.apply(a,arguments):
+   a.queue.push(arguments);},a.version='1',a.queue=[],t=n.createElement(u),
+   t.async=!0,t.src='//static.ads-twitter.com/uwt.js',s=n.getElementsByTagName(u)[0],
+   s.parentNode.insertBefore(t,s))}(window,document,'script');
+   // Insert Twitter Pixel ID and Standard Event data below
+   twq('init','abcdef');
+   twq('track','PageView');
+   </script>
+   <!-- End Twitter universal website tag code -->
+   {% endcodeblock %}
+
+   maps to the following theme configuration:
+
+   {% codeblock _config.icarus.yml lang:yaml %}
+   plugins:
+      twitter_conversion_tracking:
+         pixel_id: abcdef
+   {% endcodeblock %}
+
+
 <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/en/Widgets.md

@@ -53,6 +53,7 @@ widgets:
     -
         position: right
         type: toc
+        index: false
 ---
 
 This article covers widgets supported by Icarus 3.
@@ -156,6 +157,8 @@ widgets:
     -
         type: toc
         position: left
+        # Whether to number each table of contents item
+        index: true
 {% endcodeblock %}
 
 Then, add `toc: true` to the front-matter of your post:

source/_posts/zh-CN/Configuring-Theme.md

@@ -80,6 +80,44 @@ head:
     favicon: /img/favicon.svg
 {% endcodeblock %}
 
+### Web App Manifest
+
+Icarus支持基本的PWA`manifest.json`的生成与Meta标签。
+要开启web app manifest，请再主题配置中使用如下的配置。
+你也可以参考[MDN](https://developer.mozilla.org/zh-CN/docs/Web/Manifest)来了解每个配置项的详情。
+
+{% codeblock _config.icarus.yml lang:yaml >folded %}
+manifest:
+    # Web应用的名称 (默认为站点标题)
+    name: Icaurs - Hexo Theme
+    # Web的显示名称
+    # 当没有空间显示全名时显示
+    short_name: Icarus
+    # Web应用的初始URL
+    start_url: https://ppoffice.github.io/
+    # 应用的默认主题颜色
+    theme_color: "#3273dc"
+    # 在应用的样式表加载之前显示的应用页默认占位背景颜色
+    background_color: "#3273dc"
+    # 网站首选的展示模式
+    display: standalone
+    # 在不同上下文下用作应用图标的图片文件
+    icons:
+        -
+            # 图片文件的路径
+            src: icons/touch-icon-iphone.png
+            # 空格分割的表示图标尺寸的字符串
+            sizes: 144x144
+            # 图片的媒体类型提示 (可选)
+            type: image/png
+        -
+            src: icons/touch-icon-ipad.png
+            sizes: 152x152
+        -
+            src: icon/logo.ico
+            sizes: 72x72 96x96 128x128 256x256
+{% endcodeblock %}
+
 ### Open Graph
 
 你可以在`head`配置中设置Open Graph。

source/_posts/zh-CN/Other-Plugins.md

@@ -10,6 +10,12 @@ toc: true
 plugins:
     animejs: true
     back_to_top: true
+    cookie_consent:
+        type: info
+        theme: classic
+        static: false
+        position: bottom
+        policyLink: 'https://www.cookiesandyou.com/'
     gallery: true
     google_analytics:
         tracking_id: UA-72437521-5
@@ -341,6 +347,30 @@ A =
 当\`a != 0\`，方程\`ax^2 + bx + c = 0\`有两个解，它们是<p style="text-align:center">\`x = (-b +- sqrt(b^2-4ac))/(2a)\`.</p>
 
 
+## Cookie同意提示
+
+**安装指南**
+
+你可以通过启用Cookie同意提示插件来向你的访客展示Cookie同意对话框。
+请参考[下载Cookie Consent](https://www.osano.com/cookieconsent/download/)和[Cookie Consent插件文档](https://www.osano.com/cookieconsent/documentation/about-cookie-consent/)来了解每个配置项的细节。
+你也可以通过注释掉配置的方式来禁用Cookie同意对话框。
+
+{% codeblock _config.icarus.yml lang:yaml %}
+plugins:
+    cookie_consent:
+        # 同意对话框类型。可以为"info"，"opt-in"，或"opt-out"
+        type: info
+        # 弹出框主题。可以为"block"，"edgeless"，或"classic"
+        theme: edgeless
+        # 是否使弹出框固定，不随页面滚动而滚动
+        static: false
+        # 弹出框在屏幕上的位置
+        position: bottom-left
+        # 你网站的Cookie协议的URL
+        policyLink: 'https://www.cookiesandyou.com/'
+{% endcodeblock %}
+
+
 ## 浏览器升级提醒 (Outdated Browser)
 
 **安装指南**

source/_posts/zh-CN/Web-Analytics-Plugins.md

@@ -75,6 +75,30 @@ providers:
     {% endcodeblock %}
 
 
+## Bing Webmaster Tools
+
+**安装指南**
+
+1. 登录[Bing - Webmaster Tools](https://www.bing.com/toolbox/webmaster/).
+   然后，选择“手动添加网站”(Add your site manually)并输入你网站的URL。
+   点击“添加”(Add)继续。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/bing-webmaster-add-site.png 360 '"添加网站 - Bing Webmaster Tools" "添加网站 - Bing Webmaster Tools"' %}
+   <br>
+
+2. 在“添加并验证网站”(Add & verify site)面板，选择“HTML Meta 标记”(HTML Meta Tag)方法。
+   复制HTML meta标签中`content`属性的值到主题配置中的`plugins` > `bing_webmaster` > `tracking_id`下。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/bing-webmaster-verify-site.png 360 '"验证网站 - Bing Webmaster Tools" "验证网站 - Bing Webmaster Tools"' %}
+   <br>
+
+    {% codeblock _config.icarus.yml lang:yaml %}
+    plugins:
+        bing_webmaster:
+            tracking_id: ABCDEFABCDEFABCDEFABCDEFABCDEFABCDEF
+    {% endcodeblock %}
+
+
 ## 不蒜子网页计数器
 
 **安装指南**
@@ -182,6 +206,92 @@ providers:
     {% endcodeblock %}
 
 
+## Statcounter
+
+**安装指南**
+
+1. 登录[Statcounter](https://statcounter.com/)。
+   点击“项目”(Projects)页面上的“添加新项目”(Add New Project)。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/statcounter-projects.png 360 '"项目 - Statcounter" "项目 - Statcounter"' %}
+   <br>
+
+2. 在“添加页面”(Add Project)页面上填写网站网址和项目标题。
+   如有需要，调整其他的项目设置。
+   然后，点击“添加项目”(Add Project)按钮。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/statcounter-add-project.png 360 '"添加项目 - Statcounter" "添加项目 - Statcounter"' %}
+   <br>
+
+3. 点击“完成平台检查”(Platform Check Complete)页面上的“继续默认安装”(Continue to Default Installation)按钮。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/statcounter-platform-check.png 360 '"完成平台检查 - Statcounter" "完成平台检查 - Statcounter"' %}
+   <br>
+
+4. 最终，在“在你的网站上插入代码”(Insert the Code on Your Website)页面，分别复制HTML代码片段中`sc_project`和`sc_security`变量的值
+   到主题配置中的`plugins` > `statcounter` > `project`和`plugins` > `statcounter` > `security`中。
+
+   {% img "box px-0 py-0 ml-auto mr-auto" /gallery/screenshots/statcounter-insert-code.png 360 '"插入代码 - Statcounter" "插入代码 - Statcounter"' %}
+   <br>
+
+   例如，下面的Statcounter代码：
+
+    {% codeblock "Statcounter code" lang:html %}
+    <script type="text/javascript">
+    var sc_project=12345678; 
+    var sc_invisible=1; 
+    var sc_security="abcdef12"; 
+    var sc_https=1; 
+    </script>
+    <script type="text/javascript"
+    src="https://www.statcounter.com/counter/counter.js"
+    async></script>
+    ...
+    {% endcodeblock %}
+
+    对应的主题配置为：
+
+    {% codeblock _config.icarus.yml lang:yaml %}
+    plugins:
+        statcounter:
+            project: 12345678
+            security: abcdef12
+    {% endcodeblock %}
+
+
+## Twitter转化跟踪
+
+**安装指南**
+
+1. 按照[如何设置转化跟踪](https://business.twitter.com/zh-cn/help/campaign-measurement-and-analytics/conversion-tracking-for-websites.html)启用Twitter转化追踪的通用网站标签(Universal website tag)。
+
+2. 在你的转化追踪代码中找到`init` (Pixel ID)。复制它的值到主题配置中的`plugins` > `twitter_conversion_tracking` > `pixel_id`。
+
+   例如，如下的Twitter追踪转化代码：
+
+   {% codeblock "Twitter追踪转化代码" lang:html %}
+   <!-- Twitter universal website tag code -->
+   <script>
+   !function(e,n,u,a){e.twq||(a=e.twq=function(){a.exe?a.exe.apply(a,arguments):
+   a.queue.push(arguments);},a.version='1',a.queue=[],t=n.createElement(u),
+   t.async=!0,t.src='//static.ads-twitter.com/uwt.js',s=n.getElementsByTagName(u)[0],
+   s.parentNode.insertBefore(t,s))}(window,document,'script');
+   // Insert Twitter Pixel ID and Standard Event data below
+   twq('init','abcdef');
+   twq('track','PageView');
+   </script>
+   <!-- End Twitter universal website tag code -->
+   {% endcodeblock %}
+
+    对应的主题配置为：
+
+   {% codeblock _config.icarus.yml lang:yaml %}
+   plugins:
+      twitter_conversion_tracking:
+         pixel_id: abcdef
+   {% endcodeblock %}
+
+
 <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/Web-Analytics-Plugins.md">此处</a>提交修改。

source/_posts/zh-CN/Widgets.md

@@ -53,6 +53,7 @@ widgets:
     -
         position: right
         type: toc
+        index: false
 providers:
     cdn: loli
     fontcdn: loli
@@ -155,6 +156,8 @@ widgets:
     -
         type: toc
         position: left
+        # 是否显示目录项目的序号
+        index: true
 {% endcodeblock %}
 
 然后，在需要开启目录的文章头部加入`toc: true`：