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/

效果

用法

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: [email protected]

🤝 貢獻

如果你想貢獻自己的一份力量,歡迎提交 Issues 或者 Pull Request 請求!

支持

如果本項目對你有所幫助,歡迎 ⭐️ gitbook-plugin-favicon-absolute 項目,感謝你的支持與認可!

📝 版權

Copyright © 2019 snowdreams1006.

This project is MIT licensed.

如果本文對你有所幫助,不用讚賞,點贊鼓勵一下就是最大的認可,順便也可以關注下微信公衆號「 雪之夢技術驛站 」喲!