在前端开发中,文档是非常重要的,而 gitbook 是一个很好的文档写作工具,它可以方便地将 markdown 格式的文档转换成静态 HTML 页面。当然,为了让文档更加专业化和美观,我们需要自定义一些样式。那么,如何在 gitbook 中使用图片来自定义样式呢?答案是使用 npm 包 gitbook-plugin-insert-logo-link。
安装
在开始使用之前,我们需要先安装这个 npm 包。打开终端并执行以下命令:
--- ------- -------------------------------
安装完成之后,我们需要在 gitbook 的配置文件 book.json 中启用插件。在 book.json 文件中添加以下内容:
- ---------- -------------------- -
添加图片链接
现在,我们可以在 markdown 内容中添加图片链接了。比如我们要在文章中添加一个 logo,代码如下:
-- -------- ----- ------ ------------------ ----------------------------
这段代码会生成一个链接,点击链接会跳转到 https://www.example.com/,同时图片链接指向 path/to/logo.png。
需要注意的是,这里使用了特殊的语法 {% logoLink %}
。这是 gitbook-plugin-insert-logo-link 定义的语法。在生成 HTML 页面时,这个语法会被转换成合适的 HTML 代码。
示例代码
以下是一个完整的例子。在这个例子中,我们添加了一个 logo 和一个链接到 gitbook 官方网站。
-- -------- --------- --------------------- ---------------------------
这段代码会生成如下 HTML 代码:
-- -------------------------------- ---- ------------------------- -------------- ----
做一个独一无二的文档
有了 gitbook-plugin-insert-logo-link,我们可以方便地添加图片链接到 gitbook 中,从而做出更加独一无二的文档效果。相信大家都有很多灵感,可以用这个插件实现很多个性化的效果。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005720f81e8991b448e84ba