Hom's Blog


Gist介绍与用法

Gist https://gist.github.com/ 是Github的一个子服务. 最简单的功能就是分享代码片段,例如把一些小型脚本放到Gist方便分享和管理. 不同于大型项目使用repository进行管理, Gist就是小型代码片段的分享. 类似的服务还有如 PastebinPastie, 但明显出生于Github的Gist更有优势了.

但是gist提供的功能不仅限于此 1

  • gist能无限制的免费创建私有代码片段, 而不被搜索, 只有通过浏览器输入其URL才能看见.
  • 匿名张贴. 您不需要拥有Github账号就可以使用Gist。
  • gist具有版本管理功能, 像Github一样包括历史.
  • 可以使用嵌入网页代码功能, 会获得一个相应js地址, 然后如gist显示一样显示出内容到网页中!Wordpress可以用oEmbed Gist插件和短代码实现.
  • gist随同github提供了api开发接口,可以在本地创建gist, 可以使用Git进行操作.
  • gist提供了包括markdown语法在内的大多数“写作风格”, 可以把Gist作为一个写作平台使用. 使用MD书写后然后用http://roughdraft.io/ 可以进行独立网页发布.
  • 可以作为网页收藏夹或者作为云笔记使用. 在chrome里搜索插件Gistbox, 然后就可以像云笔记网页剪切一样收藏网页, 也可以添加标注和标签便于查找.
  • 托管一个简单的页面在Gist上, 例如用纯文本把HTML-CSS-JS的代码写为index.html (不能是md文件), 然后用 bl.ocks服务将页面渲染出来显示. 例如,这个页面 托管出来是这样的. 当然也可以使用Google Drive服务2了.
  • 可以通过工具在桌面端管理Gist. 例如, Gisto是一个能让您在浏览器之外管理Gist的桌面应用。您可以对Gist进行搜索、编辑、查看历史和分享。 此应用可运行于苹果、微软和linux系统。 当然您也可以用GistBox这个web应用替代它。
  • 制造任务列表, 例如3. 只有本人或有权限的人可修改.
  • 测试访问量.因为Gist纯文本中不允许运行js代码,所以可以用GA Beacon来记录实时访问Gist的情况。把如下代码添加到Gist中,用markdown格式保存,这样就在这个Gist中添加了一个透明追踪图像了。Analytics.

使用

可以参考4. 最基础和简单就是点上方的Gist进入Gist, 然后写出描述Gist的描述, 文件名(支持md), 然后相应代码, 最后创建即可. 点上面的Github即可切回Github.

创建新Gist, 编辑修改Gist

  • 跑到https://gist.github.com/ 直接填写内容或者在自己的Gist 右上角上点击 New gist即可
  • 可以一个Gist多个文件, 使用 Add file 添加即可.
  • 可以设置indent为空格space还是tab, tab长度, 是否行缩进.
  • Create secret gist 创建私有代码, Create public gist 创建开放的gist. 前者可以不被搜索到.
  • 创建Gist后,点选自己的某个Gist, 进去后右上角可进行网上的编辑/修改: Edit, 编辑; Delete, 删除; Star, 标星. 旁边还有举报 2333. 修改后下方的Update public/secret gist即可保存修改.
  • 编辑时上方的Make Secret可以转为私有库.

浏览Gist

  • 左上角可以看到列出自己最近的gist, 右上角See all of your gists可以查看所有自己的Gist.私有gist会显示SECRET标签.
  • 搜索框可以进行代码搜索(开放gist), 可能搜出相关的代码片段
  • All Gists可以到Discover gists模式, 查看最近发布或被fork的gists(或者别的排序方式). 参考意义不大.
  • 在浏览Gist时点击右上GithubGist图标或者左上头像选Your Gists即可返回
  • 在浏览Gist文件时, 点Raw可以看文字的纯代码.

分享

点击一个gist进去, , 在 Edit菜单下方有几个选项: 分享 (可选方式框,代码/地址, 复制到黏贴板), 下载下来使用Github Desktop打开管理, Download Zip(下载全部内容并打包). 主要介绍分享.

分享方式暂有4种: Embed 是HTML嵌入代码, Share是分享链接, Clone via HTTPSClone via SSH是将Gist像repository一样clone. 主要介绍分享式代码.


对于嵌入式代码, 实际上加载一段js. 例如以下:

<script src="https://gist.github.com/platinhom/319495d57c7923106414.js"></script> (这是个私有库哦~私有库也能通过网络地址分享)

效果:

该段js将加载显示该Gist内容(如Gist.Github中的方式). 他将构造一个 class=”gist” 的div. 里面包含一个或多个 gist-file 类的div,对应Gist内多个文件. 再里面是 gist-datagist-meta 类(次要)的两个div. 再里面通过几层div以后, 通过table方式显示代码.

table (class="highlight tab-size js-file-line-container") -> tbody->tr->td(class="blob-num js-line-number")td(class="blob-code blob-code-inner js-file-line"). 这是显示的一个文件的实际组成. 其中,每个tr元素对应每一行. 两个td单元格对应前者是行号, 后者是代码内容 (内容通过span控制代码式样). 有class名/id名的通过js内载入css来将代码显示成Github样式.

  • 注意, 其中 tbodytr 是没有在gist定义式样的, 会被网页的默认css所影响, 所以最好自己控制控制. 例如代码每行都有框, 可以通过 .gist tr{border:0} 来去除边框式样. 但很多时候css还是被本站自己的css所覆盖了…

  • 可以发现嵌入的Gist是所有的文件. 只要嵌入一个文件怎么办? 就是在后面加入?file=filename,可参考5讨论. 但注意这里filename不像前面所述需要特殊处理. 例如

<script src="https://gist.github.com/platinhom/319495d57c7923106414.js?file=0-memo.md"></script>

如果要嵌入一个文件的部分代码行, 可以参考 6:

技巧

  • 多文件时排序按文件名ascii顺序排, 数字 优先于 大写 优先于 小写. Gist显示的名字将是第一个文件的名字. 多文件名的Gist可以第一个用, Readme.md, 0-Gistname.md 这样文件来定序.
  • 在多文件时的首个介绍文件中, 可以作文件简介, 使用Markdown编辑(要求文件名.md结尾). 然后filename 即可作Gist页内跳转.注意锚中filename大写会换为小写, .,空格等字符会变成-, 否则链接跳转失效.
  • 编辑时可以像Sublime一样操作! 用Ctrl或者Cmd按着鼠标多处点击进行多选!用中键或者alt进行拖动实现拉选!


◆ 本文地址: http://platinhom.github.io/2015/11/26/gist/, 转载请注明 ◆

前一篇: Schrodinger操作小分子和entries
后一篇: Sublime:sidebar和tab增强


Contact: Hom / 已阅读()
Source 类别: IT  标签: Git