gitbook 入门教程之一招彻底解决 favicon 图标失效问题
程序员文章站
2024-02-15 10:51:28
...
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/
效果
用法
Step #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 设备触摸时自定义尺寸高亮显示图标"
}
上述图标位置建议直接放在根目录下,这样就会以绝对路径形式访问,解决相对路径可能设置无效的问题.
Step #2 - 运行 gitbook 相关命令
- 运行
gitbook install
命令安装到本地项目
$ gitbook install
或者
npm install gitbook-plugin-favicon-absolute
- 运行
gitbook build
命令构建本地项目或者gitbook serve
启动本地服务.
$ gitbook build
或者
$ gitbook serve
示例
不仅 gitbook-plugin-favicon-absolute 官方文档已整合 favicon-absolute
版权保护插件,此外还提供了示例项目,详情参考 example
目录.
{
"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"
}
}
}
}
{
"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"
}
}
}
作者
???? snowdreams1006
- Github: @snowdreams1006
- Email: [email protected]
???? 贡献
如果你想贡献自己的一份力量,欢迎提交 Issues
或者 Pull Request
请求!
支持
如果本项目对你有所帮助,欢迎 ⭐️ gitbook-plugin-favicon-absolute 项目,感谢你的支持与认可!
???? 版权
Copyright © 2019 snowdreams1006.
This project is MIT licensed.
如果你觉得本文对你有所帮助,请随手点个赞再走呗或者关注下公众号「雪之梦技术驿站」定期更新优质文章哟!
下一篇: Spring-boot学习起步