三、Ghost主题详解—ghostium

上篇文章中,我们讲到了怎样给你的博客更换一款漂亮的主题。想必大家都换上了新主题吧,但是这样就结束了,是不是觉得缺点什么。手痒的同学肯定想修修改改了,看哪里不爽改哪里,反正我是改了不少,可以看看我的主页

所以今天就带大家解析一下这款主题吧,看完之后大家就可以在这基础上自定义主题了。

文件结构介绍

首先看下文件目录,这是一个典型的Grunt构建的前端工程。熟悉Grunt的同学就爽了,看一下Gruntfile.js就知道怎么玩了,就不用继续往下读了。如果你没接触过工程化的前端项目,那怎么办呢?

其实,一个前端项目就是由htmljscss和一些其它资源组成,所以我们可以无视它是怎样构建的。

QQ截图20160916144753.png-61.1kB
QQ截图20160916144753.png-61.1kB

精简后的项目结构如下:

  • assets里面存放着jscssfont文件
  • partials是Ghost特殊的目录,包含整个博客范围内使用的模板文件
  • src是开发环境目录
  • package.json是项目的描述文件,之前介绍过
QQ截图20160916150634.png-28.3kB
QQ截图20160916150634.png-28.3kB

default.hbs文件详解

这是一个基础模板,包含了所有需要出现在每个页面的HTML代码 <html><head><body> 标签,伴随着 {{ghost_head}}{{ghost_foot}},同样还有组成了博客重复的头部和尾部的HTML。

默认模板包含了hanglebars表达式 {{{body}}} 来表示那些继承了默认模板的模板的内容。

页面模板使用 {{!< default}} 作为第一行来表明他们继承了默认的模板,这样一来他们的内容就被放置于默认模板中 {{{body}}} 定义的地方了。

我们从上往下逐步地讲解一下:

{{> custom/meta this}}

引入了partials/custom/meta.hbs文件,我们打开这个文件看看里面的内容,都是一些社交<meta>标签,感觉没什么必要性,所以我删掉了这句。最后一句是修改Android浏览器状态栏颜色,content里面可填写你需要改变的颜色代码。

{{! Android Lolipop Theme Color }}
<meta name="theme-color" content="">

接着往下看,这个我就不解释了,由于天朝的网络环境,果断删掉。

<link href="//fonts.googleapis.com/" rel="dns-prefetch">
<link href="//fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic|Open+Sans:700,400&subset=latin,latin-ext" rel="stylesheet">

引入压缩版的css文件,整个项目的css都压缩在这个文件里。如果我们需要修改css,改这个文件肯定是不好的。接下来会教大家将压缩版的替换成独立的文件

<link rel="stylesheet" href="{{asset 'css/main.min.css'}}"/>

引入jquery文件,同样由于网络环境受限,换成了BootCDN提供的CDN服务

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

引入压缩版的js文件,同样要替换成独立的js

 <script src="{{asset 'js/head-scripts.min.js'}}"></script>

页面底部js,同样替换成独立的js文件

 <script src="{{asset 'js/foot-scripts.min.js'}}"></script>

替换压缩版的js、css文件

assets里面的css和js都是经过处理压缩后的文件,如果我们想修改的话,改这里肯定是不行的。上面讲到,项目里面有个src目录,是开发环境目录。

进入到开发环境目录,我们打开里面的default.hbs文件,可以看到引入的都是些独立的css和js文件。但是发现assets里面有些文件并没有,比如:<link href="/assets/css/style.css">,assets里面并没有css文件夹,还有很多js也没有。

之前在Github上issue了一下,也没得到回应,作者好像没在维护了。但这并不能阻挡我们前进的步伐。

好在这些缺少的js文件都是些开源的js插件,我们可以在BootCDN上面搜到;style.css没有也不用着急,src里面是有个_scss文件夹,里面存放的是项目的sass文件,我们可以转换成css文件。

1.替换css文件

我们可以看到src目录下的default.hbs里面引入了哪些css

<!-- build:css({src,.tmp}) /assets/css/main.min.css -->
<link href="/assets/_components/font-awesome/css/font-awesome.css">
<link href="/assets/_components/prism/themes/prism.css">
<link href="/assets/_components/prism/plugins/autolinker/prism-autolinker.css">
<link href="/assets/_components/pace/themes/pace-theme-minimal.css">
<link href="/assets/css/style.css">
<!-- endbuild -->

除了style.css外,其他的都是开源的插件,我们可以直接搜索引入即可。所以我们的任务就是怎么得到style.css,我们需要编译assets/_scss里面的scss文件,可以参考:sass安装和编译教程

2.替换js文件

替换js文件就简单了,直接去BootCDN去搜就可以了。

改造后的default.hbs文件,大家可以参考一下:点击下载

其他文件说明

介绍我们需要修改的一些文件:

  1. page.hbs,首页右边的文章列表
  2. post.hbs,文章详细页
  3. tag.hbs,标签页面,点击文章所属标签可进入
  4. config.hbs,设置Google分析,Disqus评论和Pjax的,没有的话可以不管,Pjax默认是开启的,不需要可以设置成false
  5. navigation.hbs,侧边栏的一些导航
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,378评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,356评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,702评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,259评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,263评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,036评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,349评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,979评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,469评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,703评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,257评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2 345

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,028评论 0 21
  • Webpack学习总结 此文只是自己学习webpack的一些总结,方便自己查阅,阅读不变,非常抱歉!! 下载安装:...
    Lxs_597阅读 936评论 0 0
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,431评论 1 32
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,140评论 7 35