gitbook 入门教程之一招彻底解决 favicon 图标失效问题技术頭條網

gitbook 入门教程之一招彻底解决 favicon 图标失效问题

favicon-absolute 是什么

favicon-absolute

favicon-absolute 插件采用绝对路径设置网站 favicon 图标,相对于相对路径来说更加简单方便.

Github : https://snowdreams1006.github.io/gitbook-plugin-favicon-absolute/
Gitee : https://snowdreams1006.gitee.io/gitbook-plugin-favicon-absolute/
GitLab: https://snowdreams1006.gitlab.io/gitbook-plugin-favicon-absolute/

效果

用法

1 - 更新 book.json 配置文件

在 book.json 配置文件中,添加 favicon-absolute 到 plugins 列表.
在 book.json 配置文件中,配置 pluginsConfig 节点的 favicon-absolute 对象.

{
 "plugins": ["favicon-absolute"],
 "pluginsConfig": {
 "favicon-absolute":{
 "favicon": "/favicon.ico",
 "appleTouchIconPrecomposed152": "/apple-touch-icon-precomposed-152.png"
 }
 }
}

其中,配置参数含义如下:

"favicon": {
 "type": "string",
 "required": true,
 "default": "/favicon.ico",
 "title": "网页图标",
 "description": "网页打开时显示图标"
},
"bookmark": {
 "type": "string",
 "required": false,
 "title": "收藏夹图标",
 "description": "网页被收藏时显示图标"
},
"appleTouchIcon152": {
 "type": "string",
 "required": false,
 "title": "Apple 设备152*152触摸图标",
 "description": "Apple 设备触摸时152*152触摸显示图标" 

},
"appleTouchIconPrecomposed152": {
 "type": "string",
 "required": true,
 "default": "/apple-touch-icon-precomposed-152.png",
 "title": "Apple 设备152*152触摸高亮图标",
 "description": "Apple 设备触摸时152*152高亮显示图标"
},
"appleTouchIconMore": {
 "type": "object",
 "required": false,
 "title": "Apple 设备自定义尺寸触摸图标",
 "description": "Apple 设备触摸时自定义尺寸触摸显示图标"
},
"appleTouchIconPrecomposedMore": {
 "type": "object",
 "required": false,
 "title": "Apple 设备自定义尺寸触摸高亮图标",
 "description": "Apple 设备触摸时自定义尺寸高亮显示图标"
}

上述图标位置建议直接放在根目录下,这样就会以绝对路径形式访问,解决相对路径可能设置无效的问题.

2 - 运行 gitbook 相关命令

运行 gitbook install 命令安装到本地项目

$ gitbook install

或者

npm install gitbook-plugin-favicon-absolute

运行 gitbook build 命令构建本地项目或者 gitbook serve 启动本地服务.

$ gitbook build

或者

$ gitbook serve

示例

不仅 https://github.com/snowdreams1006/gitbook-plugin-favicon-absolute 官方文档已整合 favicon-absolute 版权保护插件,此外还提供了示例项目,详情参考 example 目录.

https://github.com/snowdreams1006/gitbook-plugin-favicon-absolute/tree/master/docs

{
 "title": "favicon-absolute 插件官方文档",
 "author": "snowdreams1006",
 "description": "gitbook-plugin-favicon-absolute 插件官方文档",
 "plugins": [
 "favicon-absolute"
 ],
 "pluginsConfig": {
 "favicon-absolute":{
 "favicon": "/favicon.ico",
 "bookmark": "/bookmark.ico",
 "appleTouchIcon152": "/apple-touch-icon-152.png",
 "appleTouchIconPrecomposed152": "/apple-touch-icon-precomposed-152.png",
 "appleTouchIconMore": {
 "120x120": "/apple-touch-icon-120.png",
 "180x180": "/apple-touch-icon-180.png"
 },
 "appleTouchIconPrecomposedMore": {
 "120x120": "/apple-touch-icon-precomposed-120.png",
 "180x180": "/apple-touch-icon-precomposed-180.png"
 }
 } 

 }
}

https://github.com/snowdreams1006/gitbook-plugin-favicon-absolute/tree/master/example

{
 "title": "favicon-absolute 插件官方简单示例",
 "author": "snowdreams1006",
 "description": "gitbook-plugin-favicon-absolute 插件官方简单示例",
 "plugins": [
 "favicon-absolute"
 ],
 "pluginsConfig":{
 "favicon-absolute":{
 "favicon": "favicon.ico",
 "appleTouchIconPrecomposed152": "apple-touch-icon-precomposed-152.png"
 }
 }
}