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"
}
}
}
作者
snowdreams1006
- Github: https://github.com/snowdreams1006
- Email: mailto:[email protected]
貢獻
如果你想貢獻自己的一份力量,歡迎提交 https://github.com/snowdreams1006/gitbook-plugin-favicon-absolute/issues 或者 Pull Request 請求!
支持
如果本項目對你有所幫助,歡迎 ⭐️ https://github.com/snowdreams1006/gitbook-plugin-favicon-absolute 項目,感謝你的支持與認可!
Copyright © 2019 https://github.com/snowdreams1006.
This project is https://github.com/snowdreams1006/gitbook-plugin-favicon-absolute/blob/master/LICENSE licensed.
如果你覺得本文對你有所幫助,歡迎點贊評論和轉發,來一波素質三連吧! 偷偷告訴你,點擊瞭解更多可以獲得最佳閱讀體驗喲!
閱讀更多 雪之夢技術驛站 的文章