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

favicon-absolute 项目

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

🏠 主页

• Github : snowdreams1006.github.io/gitbook-plu…
• Gitee : snowdreams1006.gitee.io/gitbook-plu…
• GitLab: snowdreams1006.gitlab.io/gitbook-plu…

效果

用法

Step #1 - 更新 book.json 配置文件

1. 在 book.json 配置文件中,添加 favicon-absolute 到 plugins 列表.
2. 在 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: snowdreams1006@163.com

🤝 贡献

若是你想贡献本身的一份力量,欢迎提交 Issues 或者 Pull Request 请求!

支持

若是本项目对你有所帮助,欢迎 ⭐️ gitbook-plugin-favicon-absolute 项目,感谢你的支持与承认!

📝 版权

Copyright © 2019 snowdreams1006.

This project is MIT licensed.

若是你以为本文对你有所帮助,欢迎点赞留言告诉我,你的鼓励是我继续创做的动力,不妨顺便关注下我的公众号「雪之梦技术驿站」,按期更新优质文章哟!