Skip to content
🍁A beautiful blog theme for Ghost
CSS JavaScript HTML
Branch: v1.x
Clone or download
Latest commit 6628354 May 24, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets 组织结构调整 May 16, 2018
partials 主题样式升级 May 16, 2018
src/assets 组织结构调整 May 16, 2018
LICENSE Initial commit Mar 31, 2017
README.md update README.md May 24, 2018
author.hbs 主题样式升级 May 16, 2018
default.hbs
gulpfile.js 组织结构调整 May 16, 2018
index.hbs 使用gulp重新构建项目 Jul 29, 2017
package.json 组织结构调整 May 16, 2018
page-tag_cloud.hbs
post.hbs 主题样式升级 May 16, 2018
tag.hbs 升级到Ghost v1.x Feb 18, 2018

README.md

maple

maple宣传文案.jpg-283.6kB

基于 Medium design 的一个 Ghost 主题

Maple 主题简单美观,基于 Medium Design 现代化设计,采用响应式布局,能很好地适配不同的设备。对于文章页面,支持 TOC 文章目录和代码高亮、复制,对技术工作者比较友好。

📝 TOC 目录

🏷️ 特性

  • Medium Design ,专注于内容
  • 响应式布局
  • 代码高亮,文章目录支持
  • 标签云页面
  • 关于我页面个性化设计
  • 个性化配置
  • 自定义社会化 icon
  • Markdown 样式重新设计

image_1ce828agq1gra23ji9d1gd8105u15.png-1325.4kB

⚙️ 安装

使用 Git

  1. 进入到你的主题文件夹目录ghost/content/themes
  2. 使用下面的命令克隆主题仓库
    $ git clone https://github.com/KINGMJ/maple.git
    
  3. 重启 Ghost 并进入后台管理系统
  4. 进入Design页面,选择maple主题,点击ACTIVE

Image 2.png-10.5kB

直接下载

  1. 进入 Releases 页面,选择最新的版本,下载zip文件 image_1ce6jo1ndma73bl1nmlht71c8f9.png-49.9kB
  2. 解压到你的主题文件夹目录ghost/content/themes
  3. 重启 Ghost 并进入后台管理系统
  4. 进入Design页面,选择maple主题,点击ACTIVE Image 2.png-10.5kB

✍️ 配置

标签云页面

image_1ce6m6g5kds08141dlsf0c13erm.png-1850.6kB ghost 默认是没有标签云页面的,在 Maple 主题中是通过将文章设置为独立页面完成的。

  1. 进入 ghost 后台管理系统,新建一篇文章,标题为tag_cloud

  2. 点击文章设置,Post URL填写tag_cloud

    image_1ce6mfc4r5mi1a0k1dmu1f0f6m113.png-10.9kB

  3. 设置这篇文章为独立页面

    image_1ce6mhl6r14a2103m1p8n8t7em92g.png-18.6kB

友链及社会化 icon 配置

社会化 icon 会显示在主页的 header 和 footer 里,以及文章详情页的作者介绍里面。为了让主题使用者修改方便,在 Maple 主题的资源文件中,我专门建立了一个custom文件夹来放一些配置相关的内容。

image_1ce6n0t2niumh093991s2l1j4h2t.png-7.6kB

  1. 进入主题 maple/partials/custom文件夹
  2. 编辑social-icon.hbs,将里面的链接和图标替换成你自己的图标和地址。注:图标使用的是 font-awesome
  3. 编辑friend-link.hbs,将里面的地址替换成你自己的友链

主页封面配置

在 Maple 主题中,为了使主页更加个性化,我设置了一个开关,可以选择是否使用固定的封面或随机图片封面。

  1. 进入主题 maple/partials/custom文件夹
  2. 编辑config.hbs,修改var enableRandomCover = true;使用随机图片封面;修改var enableRandomCover = false;使用固定的博客封面

PS:封面图片存放在maple/assets/images/30+wallpaper文件夹里,你可以替换里面的图片,但请保持图片的名称不变

copyright 信息设置

使用 Maple 主题后,请将网页底部的 copyright 信息修改为你自己的。只需修改博客名称备案号信息,请保留博客发版信息及主题作者信息,谢谢合作!

image_1ce6nvgdm17ib1p0h1k6p16391co13q.png-11kB

  1. 进入主题maple/partials文件夹
  2. 编辑copyright.hbs,修改博客名及备案信息

google 分析设置

Maple 主题目前使用 Google Analytics 作为网站的统计分析工具,你需要修改UA标识为你自己的。

  1. 编辑default.hbs文件
  2. 修改ga('create', 'UA-83412029-1', 'auto');里面的UA标识

PS:如果你没有使用Google Analytics,请将这部分代码注释掉。后面考虑通过config配置更多的分析工具

每页显示文章设置

Ghost1.x 的版本,将后台修改每页显示文章数功能挪到了主题配置中,所以需要修改主题配置文件才能更改。

  1. 编辑package.json文件
  2. 找到下面这段代码,将posts_per_page的值修改为你每页需要显示的文章数
    "config": {
    "posts_per_page": 8
    },
    

PS:主题所有的修改,都需要重启Ghost才生效,不要忘记了

🏎️ Roadmap

Maple 主题会持续进行更新,这里会列出一些未来将要实现的功能

  • 文章分享功能
  • 社会化评论功能
  • 移动端响应式页面设计

©️ Copyright & License

Copyright (C) 2016-2018 Jerry Mei - Released under the MIT License.

You can’t perform that action at this time.