chore(docs): reflect changes in Icarus 4.1.0
parent
ded2413886
commit
b16c2869f9
|
@ -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.
|
||||
|
|
|
@ -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**
|
||||
|
|
|
@ -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?
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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。
|
||||
|
|
|
@ -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)
|
||||
|
||||
**安装指南**
|
||||
|
|
|
@ -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>提交修改。
|
||||
|
|
|
@ -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 |
Loading…
Reference in New Issue