├── LICENSE.txt ├── README.md ├── assets ├── _sass │ ├── _animation.scss │ ├── _nprogress.scss │ ├── _prism.scss │ └── style.scss ├── css │ └── style.css ├── font │ ├── config.json │ ├── fontello.eot │ ├── fontello.svg │ ├── fontello.ttf │ └── fontello.woff ├── img │ ├── avatar.png │ └── avatar@2X.png └── js │ ├── jquery-2.0.3.min.js │ ├── jquery.pjax.js │ ├── nprogress.js │ ├── prism.js │ └── script.js ├── default.hbs ├── index.hbs └── post.hbs /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013 Peiwen Lu - Released under The MIT License. 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 3-Ghost Theme 2 | 3 | DEMO: [http://peiwen.lu](http://peiwen.lu) 4 | 5 | 欢迎任何改进建议,请直接[提交 issues](https://github.com/P233/3-Ghost/issues/new),感谢。 6 | 7 | ## 主要功能 8 | 9 | * 不支持 IE9 及以下浏览器。 10 | * 三列布局,最左侧是博客的 Tags 列表(需手动配置),点击后过滤相关文章,一篇文章可以给多个 tags 不会影响。 11 | * 使用 [prism.js](http://prismjs.com) 代码高亮。 12 | * 支持插入 Codepen。 13 | * Lazy-load Disqus。 14 | * 自动生成文章目录列表(h1-h3),鼠标移动到浏览器右侧边缘自动滑出,目前对中文支持不好(详见已知问题 #2)。 15 | * 支持移动设备,文章目录在移动设备上不显示。 16 | 17 | 同时制作了一份 Jekyll 版本,请查看:[https://github.com/P233/3-Jekyll](https://github.com/P233/3-Jekyll),你也可以移植给其他 Blog 平台,需遵守 MIT License。 18 | 19 | **安装后需要做一些简单配置才可使用,请仔细阅读下面的说明:** 20 | 21 | ## 配置模板 22 | 23 | 首先,启用这款模板后请务必在 Ghost 后台 `/ghost/settings/general/` 页面将 “Posts per page” 设置为 `999` 或 `9999`。 24 | 25 | ### 模板文件 26 | 27 | `default.hbs` 包含整个页面框架,以及左侧 sidebar 部分;`index.hbs` 仅包含首页内容;`post.hbs` 包含文章内容,分享按钮,以及评论等等。 28 | 29 | ### 设置标签 30 | 31 | 这是修改模板最关键的一步。 32 | 33 | 1. 打开 `default.hbs` 文件找到 `` 部分,将 `place_your_tag_display_name_here` 替换成 Tag 显示名称,别忘记修改 ID 顺序,完毕之后记录 tags 顺序以及总数。 34 | 2. 打开 `/assets/js/script.js` 找到 `// Variables` 部分,将 `place_your_tag_name_here` 替换成 tag 名称,这个名称需要与 Ghost 编辑文章时输入的 tag 一模一样,同时也需要满足 CSS 的 class 命名规则(不得已会影响命名 tag 的方式),顺序要与第一步匹配。 35 | 3. 在 js 文件中继续寻找 `// Tags switcher` 注释后面跟着的 `for` 循环,将 `i <= 6` 换成 tags 总数 + 1 (因为 No.1 是全部分类)。 36 | 37 | ### 搜索功能 38 | 39 | 搜索框目前只是摆设,请等待 Ghost 加入搜索功能,或者使用 [Google Custom Search Engine](https://www.google.com/cse/)。 40 | 41 | ### 修改头像 42 | 43 | 没有用到 Ghost 后台的头像上传功能,需替换 `/assets/img/` 中的头像图片,`100px * 100px` 用于普通屏幕, `200px * 200px` 用于 Retina Display。 44 | 45 | ### 修改邮箱 46 | 47 | 很抱歉也没使用 Ghost 的后台邮箱地址,而是通过 [Stop Link Spam Bots](http://www.safeemail.org/) 编辑了一下手动粘贴,希望能防 spam。 48 | 49 | ### Icon-font 50 | 51 | 使用了 [Fontello icon fonts generator](http://fontello.com),并附上了 config 文件放置在 `/assets/font/` 中,方便替换图标。 52 | 53 | ### 代码高亮 54 | 55 | 代码高亮使用的是 [prism.js](http://prismjs.com)。js 放在 `/assets/js/prism.js` 中,已包含的语言包有 `Markup` `CSS` `CSS Extras` `C-like` `JavaScript` `SCSS` 以及 `Bash`,如果需要支持其他语言请直接替换这个文件。模板使用的是修改过的 COY,放在 `/assets/_sass/_prism.scss` 中。 56 | 57 | 补充一点 Ghost 中使用 prism 高亮代码的方法,输入代码时在 ` ``` ` 后紧跟 `language-*`。Ghost 会自动将后者添加给 `
` 标签作为 classname,如下图
 58 | 
 59 | ![](http://peiwen.lu/content/images/2013/Dec/mdhl.gif)
 60 | 
 61 | ### Embedding Codepen
 62 | 
 63 | 如果需要插入 Codepen,只需将 embed code 中的 `

` 标签粘贴在正文中,而不必粘贴 ` 64 | 65 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /index.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | 3 |

4 |

Welcome

5 |
-------------------------------------------------------------------------------- /post.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | 3 | {{#post}} 4 |
5 |

{{title}}

6 | {{content}} 7 |
8 | 9 |
10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | Loading Disqus comments... 18 |
19 | {{/post}} 20 | 21 | --------------------------------------------------------------------------------