An elegant & interesting ghost theme.
Clone or download

README.md

Moegi「萌黄」 - 一个优雅有趣的Ghost主题

博客介绍页

陆陆续续跟风玩过不少的博客= =...从 Wordpress 转到 Typecho 再到现在的 Ghost.. 试过 Ghost 之后发现嗯,好,是我想要的,于是就这么留下来了...

Ghost 0.x版本默认的 Casper 十分好看,可惜1.0版本之后就改成 cms 样式了... 所以抽了点时间自己写了一套,起名为 Moegi 。

介绍

特性

  • 丰富的自定义配置(详见 主题配置)
  • 标签云
  • 归档页
  • 文章目录
  • 评论功能
  • 按标题搜索
  • 主题色更改

Features Todo List

Screenshot & Demo

index article

本站准备了一篇主题样式测试的文章,展示了长文排版、文字样式等效果,欢迎访问

主题样式测试
博客Demo

更新日志

  • 2017.10.02 v1.0.0 Moegi主题完成
  • 2018.02.16 v1.1.0 添加代码高亮
  • 2018.05.23 v1.2.0 使用Typo.css重构了页面的行距等样式;代码高亮更换为Highlight.js;背景改为#ffffff;超链接、强调色、引用等其他样式更改
  • 2018.05.24 v1.3.0 添加归档页;细节优化
  • 2018.05.24 v1.4.0 添加文章目录
  • 2018.05.25 v1.4.1 标签云支持显示为独立页面
  • 2018.05.26 v1.4.2 添加404页面
  • 2018.05.26 v1.5.0 添加评论功能
  • 2018.05.27 v1.5.1 修复在非https站下无法加载库文件的bug
  • 2018.05.28 v1.6.0 添加文章搜索功能;新增多个配置项以控制功能的开启
  • 2018.05.30 v1.7.0 支持显示作者信息,默认隐藏;完善作者页面
  • 2018.07.13 v1.7.1 增加针对首页标签云的配置项(#5);支持footer第二行的自定义,请在Code injection中配置
  • 2018.07.27 v1.7.2 修正针对 Valine 的 CSS 样式
  • 2018.08.07 v1.8.0 主色调支持在Code injection中配置;修改了超链接部分的样式
  • 2018.08.08 v1.9.0 增加网页加载进度条;修复文章目录console报错的问题(#3);修复上一版本带来的bug
  • 2018.08.23 v1.9.1 适配 Ghost 2.0
  • 2018.09.13 v1.9.2 更改 js 加载结构
  • 2018.09.28 v1.9.3 样式微调
  • 2018.09.30 v1.9.4 fix #8
  • 2018.10.02 v1.9.5 取消依赖 BootCDN 公共库
  • 2018.10.09 v1.9.6 修改 figcaption 样式 (#9)

下载与使用

主题下载

Github下载zip后,上传到Ghost后台即可。

主题配置

搜索、作者、评论与目录功能

本主题使用 Valine 作为评论系统。要开启评论功能,请参照 这篇教程 注册 LeanCloud 并获取 appId 和 appKey(注意配置好安全域名)。

然后进入 Ghost 后台 - Code injection,在Blog Header中插入以下代码:

<script>
    var main_color = '#86B81B'; //主色调,默认为#86B81B
    var show_search = true; //是否开启搜索功能,默认为true
    var show_toc = true; //是否开启文章目录,默认为true
    var show_valine = true; //是否开启评论功能,默认为true
    var show_author = false; //是否开启文章底部作者信息,默认为false
    var show_index_tag = true; //是否开启首页底部标签云,默认为true
    
    //要开启评论功能需正确填写lc_appId与lc_appKey,并保证show_valine为true
    var lc_appId = '这里填上面获得的appid';
    var lc_appKey = '这里填上面获得的appkey';

    //footer相关
    var footer_text = ''; //自定义footer第二行文字,默认为空
</script>

搜索、评论、文章目等功能均可以通过修改上述配置项进行开启与关闭。

开启作者信息时,建议在后台-Team处自定义作者头像与信息,否则将显示默认信息。

注:搜索功能目前仅支持标题搜索

归档页

在 Ghost 后台新建独立页面(勾选Turn this post into a page),标题随意(如归档),页面地址为archives,在设置中添加指向该地址的菜单即可。

标签云

默认显示在首页底部。如要做成单独页面方法同上,在 后台新建独立页面,页面地址为tags,最后修改菜单即可。

注意事项

  1. 该主题仅适用于 Ghost 1.0 及以上版本,0.x版本不支持。
  2. 欢迎 Fork 本项目并修改成自己喜欢的样子。欢迎提 issue。

其他

致谢

该主题在Casper基础上修改,并引用了如下代码及框架:

  • Typo.css:中文网页重设与排版,构建最适合中文阅读的网页排版。
  • Highlight.js:一个出色的代码高亮插件。
  • Moment.js:js时间处理插件,用于归档页面。
  • jQuery:最流行的JavaScript工具库。
  • @ldsun:归档页实现灵感来源。
  • jquery.tocify.js:快速生成动态文章目录,并且有scrollspy功能。
  • Valine:一款快速、简洁且高效的无后端评论系统。
  • NProgress:方便、可自定义的网页加载进度条插件。

License

MIT