hexo+github搭建个人博客主题篇

上期我们讲了hexo搭建博客的基础篇,将一个博客从无到有搭建出来并部署到github上。但是hexo有个重点部分没有讲到,那就是主题。hexo允许你定制自己的主题,这就是为什么hexo可以做出丰富的界面效果。因为主题是十分重要的一部分,所以单独拿来讲讲。

hexo的主题放在themes文件夹下,一个主题就是一个文件夹,hexo的默认主题是landscape。这里有一些好的主题推荐,传送门都是github上比较火的,第一个都到8000多star了。

修改主题:

修改_config.yml文件 里的主题配置,找到文件里的theme字段,将landscape改为你要使用的主题。

主题相关配置主要是修改主题文件下的_config.yml文件配置,配置详情请查阅相关主题文档。好看实用的主题有很多,每个人的爱好也不同,可以去看看各种主题,选择自己喜欢的主题。
今天我要讲的是一个我非常喜欢的主题hexo-theme-yilia。该主题简洁漂亮,并且提供了我非常喜欢的相册模块。github地址,作者的文档写的很详细,我这里就不啰嗦了。

注意:在主题theme同目录的_config.yml文件中要加入如下字段:

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true                  // 放在配置文件的最下方。

如果配置中有什么问题可以看作者博客的备份文件传送门,虽然下载的主题文件没有相册模块,但是作者提供的备份文件中有相册模块。于是拿来分析一波,发现改一下配置,我也能使用相册功能。

1、修改source/photos文件夹下index.ejs

作者相册里有两块,一块是Ins,一块是摄影。摄影是个独立的项目,我这里只是把Ins这块留下了。

删除这段代码

<div class="photos-btn-wrap">
    <a class="photos-btn active" href="javascript:void(0)">Ins</a>
    <a class="photos-btn" target="_blank" href="http://litten.me/gallery/">摄影</a>
</div>
<a href="https://www.instagram.com/litten225/" target="_blank" class="open-ins">图片来自instagram,正在加载中…</a>            
// 去掉href 、target属性,将提示文字改为你自己提示如:图片加载中。。。。

2、接下来修改source/photos文件夹下ins.js

当时查看作者ins模块下的图片,发现这个模块的文件都来自http://litten.me这个域名下。于是在photos文件夹下文件中搜索这个域名,就在ins.js中大约119行找到了域名。看了一下正好是作者的图片配置信息。作者图片都放在http://litten.me/域名对应服务器的ins-min和ins文件夹下。ins-min是小图,ins对于的是大图。

如果我们把图片的链接地址换成我们的链接地址,不久可以使用相册模块了。我们虽然没有服务器,但是图片也可以放在github上啊。于是我在github建了个picture的项目,在项目下建了个picture文件夹,传了几张图片上去了。打开图片后,只是在页面中看到图片,并不是图片的连接,右键在新标签中代开图片,这时就能获取到图片的链接地址了。

如:https://raw.githubusercontent.com/keenjaan/pictrue/master/picture/1.jpg

keenjaan改为你的github名称

第一个picture改为你的仓库名称

第二个picture改为你的文件夹名称。

1.jpg几位图片名称

修改这段代码

var minSrc = 'http://litten.me/ins-min/' + data.link[i] + '.min.jpg';
          var src = 'http://litten.me/ins/' + data.link[i];
          
 修改为:
var minSrc = 'https://raw.githubusercontent.com/github名称/仓库名称/master/文件夹名称/' + data.link[i] + '.jpg';
          var src = 'https://raw.githubusercontent.com/github名称/仓库名称/master/文件夹名称/' + data.link[i];

作者这里用了大图和小图,你也可以学作者一样建两个文件夹,分别放不同尺寸图片。我这里只使用一种图片。

3、最后修改source/photos文件夹下ins.json

"list": [{
        "date": "2017-07",
        "arr": {
            "year": 2017,
            "month": 7,
            "src": ["", ""],
            "link": ["1", "2"],
            "text": ["picture1", "picture2"],
            "type": ["image", "image"]
        }
    }]

数据是按时间分的,按月份来划分。

date 代表时间

year 年份

month 月份

src  可以填空""

link代表图片的名字

text 图片底下的文字

type 文件格式,image和video代表图片和视频。

如果是视频的话,要在图片文件夹里放一个视频文件和一个同名的jpg缩略图。如果分大小图的话,缩略图放小图文件夹,视频放大图文件夹。

到此一个相册功能就改好了,你现在也拥有自己的相册了,快去试试吧。

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

推荐阅读更多精彩内容