Giter VIP home page Giter VIP logo

maple's Introduction

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.

maple's People

Contributors

kavinbright avatar kingmj avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

maple's Issues

上传主题时出现的问题

大佬你好,
我上传你的主题时,ghost会报错
我用的是docker+官方镜像
请问该怎么解决比较好
image
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.