Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >gitbook 入门教程之一招彻底解决 favicon 图标失效问题

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

作者头像
雪之梦技术驿站
发布于 2019-11-23 13:38:26
发布于 2019-11-23 13:38:26
91800
代码可运行
举报
运行总次数:0
代码可运行

favicon-absolute 项目

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

? 主页

效果

用法

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

  1. book.json 配置文件中,添加 favicon-absoluteplugins 列表.
  2. book.json 配置文件中,配置 pluginsConfig 节点的 favicon-absolute 对象.
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "plugins": ["favicon-absolute"],
    "pluginsConfig": {
    	"favicon-absolute":{
            "favicon": "/favicon.ico",
            "appleTouchIconPrecomposed152": "/apple-touch-icon-precomposed-152.png"
        }
    }
}

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"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 命令安装到本地项目
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ gitbook install

或者

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install gitbook-plugin-favicon-absolute
  • 运行 gitbook build 命令构建本地项目或者 gitbook serve 启动本地服务.
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ gitbook build

或者

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ gitbook serve

示例

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "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"
            }
        }
    }
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "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"
        }
    }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
gitbook 入门教程之使用 gitbook-cli 开发电子书
本文主要讲解第一种 gitbook-cli 命令行操作流程,其他两种见另外两篇教程.
雪之梦技术驿站
2019/04/17
2.8K0
gitbook 入门教程之使用 gitbook-cli 开发电子书
gitbook 入门教程之自定义不一样的多语言首页插件
或者您可以运行 npm install gitbook-plugin-multilingual-index 来本地安装。
雪之梦技术驿站
2019/12/12
1.4K0
gitbook 入门教程之自定义不一样的多语言首页插件
gitbook 入门教程之增强版 edit-link-plus 编辑此页插件
In addition, the supported configuration options are as follows :
雪之梦技术驿站
2019/12/12
1.1K0
gitbook 入门教程之增强版 edit-link-plus 编辑此页插件
gitbook 入门教程之实用插件(持续更新)
discus 是一款集成评论的插件,可以为静态网站添加动态评论,让你的网站动起来!
雪之梦技术驿站
2019/04/17
1.2K0
gitbook 入门教程之实用插件(持续更新)
[Skill]GitBook搭建
从https://nodejs.org/en/下载并安装Nodejs,安装完后可通过终端命令node -v检验是否安装成功。
TOMOCAT
2021/12/16
2.2K0
[Skill]GitBook搭建
gitbook 入门教程之比较代码块差异 diff 插件
在您的 gitbook 的 book.json 文件中,将 diff 添加到 plugins 列表中.
雪之梦技术驿站
2020/03/23
1.1K0
gitbook 入门教程之还在搞公众号互推涨粉?gitbook 集成导流工具,轻轻松松躺增粉丝!
相信大多数博客作者都或多或少有过这样想法: 现在各种平台这么多,想要实现全平台发布就要到处复制粘贴,等我有空一定做统一平台一次性全部解决!
雪之梦技术驿站
2019/10/01
6910
gitbook 入门教程之超高颜值的思维导图simple-mind-map插件
在您的 gitbook 的 book.json 文件中,将 simple-mind-map 添加到 plugins 列表中.
雪之梦技术驿站
2020/03/18
1.6K0
gitbook 入门教程之超高颜值的思维导图simple-mind-map插件
favicon优化
现代浏览器会自动识别favicon,只要放到网站根目录就OK,但是完美一点的话就参考以下代码:
老高的技术博客
2022/12/27
2960
自定义地址栏与收藏夹中的图标
favicon 在英文中有几个别名,叫做 shortcut icon,website icon,tab icon,URL icon,bookmark icon,对应中文来说也叫作网页小图标、网站缩略图或收藏夹图标、书签图标。这实际上就是与某个网站或地址关联的图标文件。如果网站上传了这个图标文件,用户使用浏览器(仅限于支持这个功能的浏览器)浏览时,就可以把图标显示在浏览器的地址栏中(有时也会显示在历史记录中),如果添加了收藏则收藏夹中也可以看到图标。现在支持标签页的浏览器,会将图标显示在标签上。对于移动终端,如果在系统中建立了网站的快捷方式,则可以使用图标来作为系统桌面的图标。
大江小浪
2018/07/24
2.1K0
Gitbook安装使用笔记(二)实用配置和插件
介绍一下gitbook中book.json的一些实用配置和插件,详细可直接拉到底查看参考资料
公爵
2022/09/28
1.1K0
gitbook 入门教程之小白都能看懂的 Gitbook 插件开发全流程
只要是 Gitbook 默认没有提供的功能,基于插件机制都可以自行扩展,是插件让 Gitbook 变得更加强大.
雪之梦技术驿站
2019/10/04
1.9K0
Elasticsearch进阶教程:生成离线官方文档
Elastic stack产品相关的文档是由专门的文档团队维护的,内容详实、更新及时,几乎能够通过查找文档的方式解决大部分平时使用上的问题,如此优秀的文档,可以被认为是业内的标杆。我的日常工作中,就需要非常频繁的访问官方文档。
点火三周
2022/07/28
3.8K1
Elasticsearch进阶教程:生成离线官方文档
建站小技巧|如何安装favicon.ico
睡觉,第一次失败,应该是ps导出的ico文件有问题。当时用baidu的favicon.ico是可以的
烟雨平生
2023/03/07
1.2K0
建站小技巧|如何安装favicon.ico
gitbook 入门教程之快速体验 原
本文主要介绍三种使用 gitbook 的方式,分别是 gitbook 命令行工具,Gitbook Editor 官方编辑器和 gitbook.com 官网.
雪之梦技术驿站
2019/04/03
6560
gitbook 入门教程之快速体验
                                                                            原
HTML head 头标签 总结
HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代,head 头部结构,移动端的 meta 元素,显得更为重要。了解每个标签的意义,写出满足自己需求的 head 头标签,是本文的目的。本篇以一丝的文章为基础,进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用场景。 DOCTYPE DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 h
前朝楚水
2018/04/02
2K0
gitbook 入门教程之解决windows热加载失败问题
gitbook 是一款文档编写利器,可以方便地 markdown 输出成美观优雅的 html ,gitbook serve 启动服务器后,原来相貌平平的 markdown 丑小鸭摇身一变就成了倾国倾城的 html 绝色佳人.
雪之梦技术驿站
2019/05/15
2.9K0
gitbook 入门教程之解决windows热加载失败问题
html头部meta属性大全——各种奇葩属性设置大归类
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
周陆军博客
2023/05/07
1.4K0
html头部meta属性大全
常用通用属性: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!--设置屏幕缩放--> <link rel="dns-prefetch" href="//www.zhoulujun.cn"> <!--设置dns缓存--> <meta name="applicable-device" content="pc,mobile"> <!--设置支持终端-
IT架构圈
2018/06/01
2K0
HTML5中meta属性的使用详解
meta属性在HTML中占据了很重要的位置。如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等。虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能够熟练使用它们。 1、声明文档使用的字符编码
业余草
2019/01/21
3.1K0
相关推荐
gitbook 入门教程之使用 gitbook-cli 开发电子书
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验