整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
Visual Studio Code
EditPlus
Sublime Text
Emacs
Atom
PSPad编辑器
件没有什么逻辑顺序,大家可以按照目录大纲直接定位到感兴趣的插件部分阅读即可.
更多插件正在陆续更新中,敬请期待...
最新更新插件
gitalk 评论插件并不是 gitbook 插件,因而集成方式和一般的插件安装方式不同!
tbfed-pagefooter 版权页脚插件
如果希望将网页源码暴露出去并接受公众的监督校准的话,使用edit-link插件可以直接链接到源码文件.
链接地址: https://plugins.gitbook.com/plugin/tbfed-pagefooter
gitbook-plugin-tbfed-pagefooter-preview.png
激活插件配置
在 book.json 中配置 tbfed-pagefooter 插件,详细说明请参考 tbfed-pagefooter 插件.
示例:
安装 tbfed-pagefooter 插件
示例:
$ gitbook install
测试 tbfed-pagefooter 插件
启动本地服务后,每个页面的页脚处都会自动生成版权信息以及当前文件的最后更新时间.
功能慎用: 如果文档频繁更新适合生成最后更新时间,如果长时间不更新文档,岂不是最后更新时间还是几年前,给读者的感觉像是不再维护了一样!
示例:
$ gitbook serve
gitbook-plugin-tbfed-pagefooter-preview.png
disqus 评论插件
discus 是一款集成评论的插件,可以为静态网站添加动态评论,让你的网站动起来!
gitbook-plugin-disqus-success-with-FQ.png
遗憾的是,discus 插件只有 FQ 才能正常使用,暂时没找到其他较好的替代方案.
注册 disqus.com 账号
gitbook 集成 disqus 插件中最重要的配置项就是注册 disqus.com 网站唯一标识.
gitbook-plugin-disqus-preview.png
注册并绑定域名
如果没有注册账号请先注册,否则直接登录,当然也支持第三方账号登录(我使用的是谷歌账号).
gitbook-plugin-disqus-login.png
人机验证时,选出符合条件的全部图形,直到没有新的图形为止,这一点和国内的静态图片验证是不同的!
选择安装 disqus 插件(I want to install Disqus on my site),接下来会绑定集成网站的域名.
gitbook-plugin-disqus-goal.png
接下来设置网站的相关信息,其中网站名称(snodreams1006)是唯一标示,接下来集成到 gitbook 用的就是这个简短名称,而分类和语言按照实际情况选择即可.
gitbook-plugin-disqus-create-site.png
选择服务类型
disqus 网站提供的服务类型,有基础班(basic),加强版(plus),专业版(pro)和免费版(free).
每个版本计划有不同的收费标准以及相应的服务,可以根据实际情况选择适合自己的服务类型.
gitbook-plugin-disqus-select-plan.png
接下来以免费版为例进行有关演示
gitbook-plugin-disqus-free-selected.png
安装并配置 disqus 到网站
估计是这些网站提供了默认的集成方式,这里并没看到 gitbook 相关的网站,因此选择最后一个自定义网站.
gitbook-plugin-disqus-install-website.png
填写网站的基本信息,其中网站缩写名称仍然是 snowdreams1006,网址填写 https://snowdreams1006.github.io/ ,至于其他信息根据实际情况填写即可.
gitbook-plugin-disqus-config-site.png
至此 disqus.com 网站配置完成,接下来我们配置 gitbook 集成 disqus 插件.
gitbook-plugin-disqus-complete.png
安装并配置 disqus 插件
上一步我们已经获取到唯一的标识: snowdreams1006 ,接下来可以继续配置 disqus插件了.
链接地址: https://plugins.gitbook.com/plugin/disqus
激活插件配置
在 book.json 中配置 disqus 插件,根据实际情况修改成自己的缩写名称(shortName).
示例:
安装 disqus 插件
示例:
$ gitbook install
测试 disqus 插件
示例:
$ gitbook serve
正常情况下(FQ),disqus 插件已经成功集成到 gitbook 网站了,因此推送到实际服务器上时看到的效果是这样的.
gitbook-plugin-disqus-success-with-FQ.png
如果你不具备条件(FQ),那么你看到的仍然是这样的.
gitbook-plugin-disqus-success-without-FQ.png
gitalk 评论插件
本篇文章发表在开源中国后得到网友 @八一菜刀 的评论,让我推荐了gitalk 评论插件,初始使用了一下,确实不错,因此在这里更新下.
上述 disqus 评论插件虽然比较好用,但是注册是在 disqus.com 官网,需要特殊手段才能访问,即便成功配置了国内一般也是访问不到的,因此功能相当鸡肋.
gitalk 评论插件解决了这一痛点,利用 github 的开发者接口授权,将讨论区的 issue 变成评论区,和 github 结合的如此紧密,适合用源码托管到 github 这类情况.
先混个脸熟,看一下 gitalk 官网 是如何介绍自己的呢.
gitbook-plugin-gitalk-preview.png
看着效果确实不错,并且评论区的内容直接作为 github 仓库的 issue,这么好的想法我咋没想到呢!
好了,现在让我们开始集成到我们自己的项目中,遇到新鲜事物,当然先要参考官网介绍了.
申请 GitHub Application 授权
登录 github 账号,点击 在线申请 授权应用.
看到这一步,想必读者已经有个大概印象了,gitalk 插件是利用 github 的开发者服务,进行授权进而调用 issue 相关接口从而显示评论功能.
这种由官网提供的开发者服务还是比较好的,至少感觉比手动模拟提交要靠谱些,更何况走的是 OAuth 授权模式.
比如第三方应用提供微信登录,走的也是 OAuth 协议,这里的第三方应用当然就是现在说的 Gitalk
插件,微信就是我们的 github .
新建应用,首页 url 和授权回调 url 填写相同的首页链接即可,其他情况自定义填写.
gitbook-plugin-gitalk-register-application.png
应用登记成功后会生成 token 令牌,clientId 和 clientSecret 需要重点保存下来,待会需要用到.
gitbook-plugin-gitalk-generate-token.png
安装并集成到网站
在需要添加评论的页面,添加下述内容引入 gitalk 插件,其中参数来自我们上一步获取的 clientId 和 clientSecret .
默认应该添加到 .html 页面,当然也可以添加到 .md 页面,毕竟 markdown语法也支持 html 标签.
稍微解释下参数的含义:
上述配置只是最简配置,如果想要了解更多高级配置,请参考 官方文档
测试集成效果
按照上述安装步骤,将代码复制到首页(README.md)文件中,然后推送到 github ,体验下集成效果.
注意: 这里必须推送到服务器,因为申请应用时填写的域名是线上地址,因而本地测试是不会成功的,会报错,这一点和微信支付的回调地址类似.
示例:
上述参数仅供参考,实际使用中请替换成自己的配置,不然你也没有我仓库的权限,肯定会报错的啊!
gitbook-plugin-gitalk-init-issue.png
心心相念的 gitalk 评论区呢?是不是哪里配置错了,为啥没有出来?
别急,要淡定,看一下提示说"未找到的 Issue 进行评论,请联系 @snowdreams1006 初始化创建",既然如此,那我们就操作一下吧!
点击下方的按钮 使用 Github登录 ,会跳转到相应的仓库,然后按照提示确定.
再次返回首页,刷新一下看看发生什么神奇的事情了?
gitbook-plugin-gitalk-index-success.png
终于集成了评论功能,而且还支持 markdown 格式的评论呢!
进一步思考
确实不错,心中自然是欣喜万分,但别高兴太早了,因为你会发现其他页面并没有评论区,也很好理解,我们目前仅仅在首页(README.md) 集成了 gitalk 插件,也就是说使用 gitbook build 输出的 index.html 首页才支持评论区,其他页面没有插入上述代码,自然是没有评论区功能的啊!
那如果想要实现全网站的所有页面都集成评论区功能,应该怎么办呢?
百度搜索了一下,并没有找到优雅的解决方案,如果有人能够提供更好的解决方案,还望不吝赐教,在此谢过.
既然网上找不到优雅的解决方案,那寻求专业人士的帮助也是一种好办法,我去哪找 gitalk 的使用者呢?
聪明的你或许已经想到了,解铃还须系铃人,当然是向推荐给我插件的大牛提问了!
他确实提供了一种思路,以下是网友@八一菜刀原话:
文档里面我用的是tbfed-pagefooter插件，不过我是在本地使用gitbook install后重写了该插件的js，无非就是在js里面加一段Gitalk的调用代码，这样使用gitbook build命令的时候，所有的页面都会有Gitalk的评论调用
人家既然已经提供了思路,不太好意思继续麻烦人家要源码,既然如此,那就自己动手吧!
tbfed-pagefooter 插件很熟悉,一般是用于注明版权以及文章的修订时间的,而且作用于每个页面,这一点就满足了集成 gitalk 相关代码的基本要求.
大体方向确定后,目前就是解决如何在 tbfed-pagefooter 插件构建的相关生命周期内顺便执行我们的代码?
正常当前项目安装 tbfed-pagefooter 插件后应该存放于 /node_modules/gitbook-plugin-tbfed-pagefooter 目录,大致看一下插件的项目结构.
为了基本看懂项目文件作用,特意去看了下 gitbook 插件开发文档,目标锁定在 index.js .
截取重要片段,原来是电子书构建前动态增加了 html 片段啊,这就好办了!
看懂基本原理后顺便修改了版权说明以及修订时间格式,然后追加了集成 gitalk的相关代码.
这里为了方便修改 gitalk 配置,特意将相关配置项单独托管到 github 专门的 gitalk-config.js 文件.
至于配置文件的内容,并没什么特殊之处,还是顺便贴一下吧!
至此,之后再本地构建电子书时(gitbook build),gitbook-plugin-tbfed-pagefooter 自然会顺便帮我们运行集成 gitalk 的相关代码,这才是相对来说比较优雅的做法.
当然也不一定非要借助 gitbook-plugin-tbfed-pagefooter 插件帮忙,也可以借助别的插件进行集成,甚至自己写个更好的插件.
小结
gitalk 插件相对 disqus 插件来说,更符合基本国情,只不过默认的集成方式只能一个页面一个页面去集成,当数量比较多时,工作量不敢想象.
因此,通过 gitbook 插件开发的方式,在源码文件输出为目标文件时加入相关集成代码,相当于手写100条输出语句和循环写100条输出语句.
其实本质上并没有改变什么,仍然是集成到每个页面中,但是简化了人工操作的工作量就是效率的提升.
如果有更高效更优雅的集成方式,欢迎大家一起探讨.
edit-link 编辑链接插件
如果希望将网页源码暴露出去并接受公众的监督校准的话,使用edit-link插件可以直接链接到源码文件.
链接地址: https://plugins.gitbook.com/plugin/edit-link
gitbook-plugin-edit-link-preview.gif
激活插件配置
在 book.json 中配置 edit-link 插件,详细说明请参考 edit-link 插件.
示例:
安装 edit-link 插件
示例:
$ gitbook install
测试 edit-link 插件
如果不能正常跳转到源码文件,多次试验后重新更改 edit-link.base 节点内容,重新 gitbook serve 即可正常跳转源码文件.
示例:
$ gitbook serve
gitbook-plugin-edit-link-preview.png
github 插件
添加 github 图标链接,方便直接跳转到 github 指定仓库.
链接地址: https://plugins.gitbook.com/plugin/github
gitbook-plugin-github-preview.png
激活插件配置
在 book.json 中配置 github 插件,详细说明请参考 github 插件.
示例:
安装 github 插件
示例:
$ gitbook install
测试 github 插件
示例:
$ gitbook serve
gitbook-plugin-github-preview.png
search-plus 中文搜索插件
默认的 search 搜索插件是不支持中文搜索的,而 search-plus 则功能更强大些,两者不能共存,需要禁用或移除 search 插件.
链接地址: https://plugins.gitbook.com/plugin/search-plus
gitbook-plugin-search-plus-preview.png
家好，我是 Echa。
今天来分享 50 个超实用的 Chrome 浏览器扩展！
JSON Viewer Pro 用于可视化JSON文件。其核心功能包括：
输入界面如下：
格式化之后：
JSONVue 是一个JSON数据查看器，主要用来格式化JSON数据：
Library Sniffer 是一款给开发者使用的工具，能够探测当前网页所使用的类库、框架和服务器环境，为开发者提供了方便。
Wappalyzer 扩展可以用来识别网站背后的底层技术。通过此扩展，可以了解特定应用程序是否是用 React、Vue、Angular、PHP等编写的。还可以访问有关 Web 服务器、编程语言、框架、内容管理系统、分析的信息工具、数据库等。
WhatRuns 扩展程序只需单击一下即可找到任何网站上使用的技术。
使用PerfectPixel插件可以将设计图加载至网页中，与已成型的网页进行重叠对比，以帮助开发和设计人员规范网页像素精度。这是一款可以优化前端页面显示的Chrome插件。
可以使用此扩展程序快速清除缓存，无需任何确认对话框、弹出窗口等。可以在选项页面上自定义要清除的数据和数量，包括：应用程序缓存、缓存、Cookie、下载、文件系统、表单数据、历史记录、索引数据库、本地存储、插件数据、密码和 WebSQL。
VisBug 是一个使用 JavaScript 构建的开源网页设计调试工具，它可以让用户使用点击式和拖放式界面来查看网站的元素。
Debug CSS 是一个帮助调试CSS的插件。他可以显示出页面元素的轮播，按住Ctrl，并将鼠标悬浮在元素上，即可查看其信息：
CSS Viewer 是一款适用于 Web 开发人员的高效 Chrome 扩展。顾名思义，CSS 查看器可以显示将鼠标悬停在任何网页上的元素的 CSS 属性。
EditThisCookie 是一个 cookie 管理器。可以添加，删除，编辑，搜索，锁定和屏蔽cookies。
React Developer Tools 是开源 JavaScript 库 React 的 Chrome DevTools 扩展。它允许我们在 Chrome 开发者工具中检查 React 组件层次结构。安装此插件之后，将在 Chrome DevTools 中获得两个新选项卡："?? Components" 和 "?? Profiler"：
Vue.js devtools 是一款基于chrome浏览器的用于调试Vue.js应用程序的插件，可以使得开发人员大大提高调试效率。支持用户对DOM结构数据结构进行解析和调试功能。
Augury 可以帮助开发人员在 Google Chrome 浏览器中调试和分析 Angular 应用程序。
Firebug Lite是火狐浏览器中著名的开发者工具firebug插件移植到Chrome中的插件，在Chrome中安装了Firebug Lite插件以后，开发人员可以像在火狐浏览器中使用firebug一样熟悉的方式来调试网页内容，其包含了基本的HTML、CSS以及Javascript的调试功能，用于帮助网页前端开发工程师快速地调试网页，以便及时地找到网页中的BUG并及时修复。
HTML Validator 在 Chrome 的开发者工具中添加了 HTML Validator。HTML 页面的错误数通过浏览器状态栏中的图标显示，详细信息可以在浏览器的开发者工具中查看。
Web Developer 扩展为带有各种 Web 开发工具的浏览器添加了一个工具栏按钮。该扩展适用于 Chrome 和 Firefox，并且可以在这些浏览器支持的任何平台上运行，包括 Windows、macOS 和 Linux。
Requestly 是一款Chrome和Firefox浏览器插件，提供URL转发、修改HTTP请求和结果、插入脚本等功能。
Window Resizer 主要用来调整浏览器窗口的大小以模拟各种屏幕分辨率。
Responsive Viewer 是在一个视图中显示多个屏幕的 Chrome 扩展程序。该扩展将帮助前端开发人员在开发响应式网站/应用程序时测试多个屏幕。
此插件允许直接从浏览器发送跨域请求，而不会收到跨域错误。可以使用此插件覆盖 Request Origin 标头，并将 Access-Control-Allow-Origin 设置为 *.
ColorPick Eyedropper 是一个放大的吸管和颜色选择器工具，可让从网页等中选择颜色值。
CSS Peeper 用于检查和复制元素样式的优秀工具，使用 CSSPeeper 可以将鼠标悬停在网页中的任何元素上，然后单击鼠标即可复制元素的样式。
24. Dimensions
Dimensions是一款能帮助使用者对网页上各种元素属性之间的距离进行测量的Chrome页面元素测量插件，该插件在点击启动插件图标后，可以对页面中图像、输入字段、按钮以及视频等页面元素之间上下左右的方位尺寸进行测量，同时还可以通过使用快捷键来快速启用或关闭该插件的功能，简单实用。
Site Palette 用于生成调色板。设计师和前端开发人员必备的工具。可以通过这款插件轻松获取网站的配色方案。
ColorZilla 是一款功能强大地提取网页色彩的工具；也是个快速的对颜色进行调节的Chrome插件，许多的用户将这款软件称呼为颜色吸取插件，它提取的颜色是非常的多样化，还可生产css颜色的代码等。
当我们想查看网页中文字的字体时，最常用的方法就是在控制台查看文字的字体样式。那还有没有更简单的方法呢？WhatFont 就是一个查看网页字体的Chrome扩展。只需要的点击扩展图标，再点需要查看为文字即可：
Fonts Ninja 可以从任何网站识别字体、添加书签、试用并购买它们。
使用 BrowserStack 快速启动扩展在任何浏览器中启动一个新的测试会话。最多可设置 12 个浏览器以实现快速访问并最大限度地减少切换浏览器所花费的时间。
Toby 是一款 Chrome 新标签页工具，能够将未读的标签页分组显示在新标签页中，这样就能把所有未看完的标签页都关闭了。分组相当于多个 Chrome 窗口，将你的标签页都拖进 Toby 中，就不需要实时开着占地方了。
该扩展提供了每日热门开发者新闻，不需要再浪费时间搜索高质量的文章了。
Momentum 拥有漂亮的新标签页面，每日更新精彩背景壁纸图片，可设置每日新鲜事焦点以及跟踪待办事项，无广告，无弹窗。
The Great Suspender 是一个轻量级的扩展用来减少 Chrome 的内存占用。如果同时打开许多选项卡，在可配置的时间之后未查看的选项卡将在后台自动挂起，从而释放该选项卡消耗的内存和 CPU。
Session Buddy是一个可以帮助用户查看、新增、编辑当前网站Session状态的Chrome插件。用户可以利用该插件保存网站当前的状态以便在关闭Chrome或关闭计算机后恢复，从而达到节省内存的作用。
Octotree 旨在让 GitHub 体验更好。通常，为了检查 Github 中的子文件夹，需要手动单击文件夹并导航。Octotree 扩展解决了这个问题。此扩展在项目的左侧显示存储库的目录结构，这有助于更好地理解文件夹结构。
1_EKF88oqIyX6FzgueCKdtXg.gif
File Icons for GitHub and GitLab 可以将 GitHub 和 GitLab 上的原始文件图标替换为特定文件类型的图标。
ax DevTools 是一个快速、轻量级但功能强大的测试工具，由 Deque 开发的世界上最值得信赖的可访问性测试引擎 axe-core 驱动。使用 ax DevTools 在网站开发过程中查找并修复更多可访问性问题。
OctoLinker 可以将特定语言的语句（如 include、require 或 import）转换为链接。当打开一个包含多个导入语句的文件并且想要快速打开它时，只需将鼠标悬停在链接的文件上并单击即可打开。
此扩展可帮助 Web 开发人员分析网页是否违反最佳实践。
Check My Links 是一个链接检查器，它可以抓取网页并查找损坏的链接。
Checkbot 是用于验证一组HTML页面上的链接的工具。Checkbot可以检查一个或多个服务器上的单个文档或一组文档。它会创建一个报告，该报告汇总了引起某种警告或错误的所有链接。
Google Page Speed Insighs 是一款旨在优化所有设备上的网页、提高网页加载速度的工具。
META SEO inspector是一款可以帮助用户分析网页的meta信息并得到SEO评估的谷歌浏览器插件。
Ghostery 是强大的隐私保护扩展程序。其主要有以下功能：
AdBlock 用来在YouTube、Facebook、Twitch和其他你喜爱的网站上拦截广告和弹窗。
番茄工作法（Pomodoro?）时间管理助理。? 长短两种休息时间 ? 带有倒计时显示的工具栏图标 ? 追踪Pomodoro历史和统计讯息 ? 可配置的长休间隔 ? 可配置的定时器时长 ? 桌面与新标签页通知 ? 超过20种音效可选的声音通知 ? 计时器秒针走动音效
Loom 可以用来快速录制视频，并且能够将录制的视频上传到指定的网页中，Loom还支持在用户点击启动插件时，立即捕捉屏幕图像，同时开始视频录制操作，还可以将录制好的视频复制到粘贴板中存储。
GoFullPage 是一款全屏截图插件（整个网页截图），完整捕获您当前页面的屏幕，进行滚动截图，而无需任何额外的权限。单击扩展程序图标，然后将其传输到屏幕快照的新标签页中，可以在其中将其下载为图像或PDF，甚至只需拖动即可，保存到桌面。
BetterViewer 可以提供更好的图像查看体验，旨在替代基于 Chrome 浏览器中内置的图像查看模式。使用时，只需在页面右键点击图片，选择“在新标签页中打开图片”即可。
svg-grabber 是一个快速预览并从网站获取所有 svg 的工具。可以用来预览、下载和复制网站中所有 SVG 图标和插图的代码。
*请认真填写需求信息，我们会在24小时内与您取得联系。
