chore(docs): reflect changes in Icarus 4.1.0

pull/832/head
ppoffice 2020-10-04 11:57:21 -04:00
parent ded2413886
commit b16c2869f9
No known key found for this signature in database
GPG Key ID: B33335481CC0D498
14 changed files with 368 additions and 0 deletions

View File

@ -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.

View File

@ -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**

View File

@ -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?

View File

@ -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:

View File

@ -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。

View File

@ -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)
**安装指南**

View File

@ -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>提交修改。

View File

@ -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`

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB