image-20190508201458964

自己动手制作博客主题应该是每个设计师的心愿,别人的模板总是不太满意,趁着春节放假折腾一下,顺便学习一下网页编程的技术:pug模板语言,scss 语言,flex 布局,以及响应式的编程等等。这里记录一下开发过程中的要点和心得。

博客基于hexo搭建,可以把很方便的将Markdown的文章转换成博客页面,以前写过hexo的搭建笔记,可以看这里 :有度博客诞生记

主题设计

本主题在maupassant-hexo 的基础上进行开发和重新设计,主要修改如下:

  1. 主页布局由列表改成缩略图宫格显示,展示图片和文章内容;
  2. 精简版面,去掉侧栏的搜索、分类、标签等目前用处不大的东西;
  3. 顶栏导航直接显示文章分类;
  4. 响应式布局,适配桌面和移动设备屏幕;
  5. 细节的设计优化

下面总结一下主题定制过程中用到的关键技术要点

主页缩略图布局

布局结构

通过flex实现宫格平铺布局:

1
2
3
4
5
6
7
8
9
10
11
12
13
//父级
.content-list {
display: flex;
flex-wrap: wrap;
}
//子级
.content-list .post-list {
padding: 20px;
flex: 0 0 33.333333333333336%; //实现横向3等分
display: flex;
flex-direction: column; //卡片中的内容纵向排布
overflow: hidden; //使下方溢出的摘要文字隐藏
}

图片自适应裁剪

在浏览器宽度变化时,图片需要对应缩放,同时需要保证图片比例不变。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//父级
.thumb-wrap {
display: block;
position: relative;
//实现等比例缩放:padding的百分比基于宽度,表示高度是宽度的56%
padding: 56% 0 0;
}
//子级
.thumb-wrap .thumb {
position: absolute;
object-fit: cover; //让图片居中充满边框
width: 100%;
height: 100%;
left: 0;
top: 0;
}

缩略图的显示

本来想直接取文章的第一张图片作为首页缩略图,不过考虑到第一张图片不一定好看,所以采用在文章的配置信息(Front-matter)中指定缩略图的方式

可在markdown文件的头部使用yaml语言编写配置信息,下面的thumbnail就是缩略图的链接,在代码中使用post.thumbnail引用:

1
2
3
4
5
6
title: 笔记名称
date: 2019-02-08 09:25:14
category: 分类
tags: 标签
thumbnail: http://ovapng3dw.bkt.clouddn.com/hexo主题定义笔记/image.jpg
description: "文章摘要"

配置信息的变量名称可自行定义,都可使用post.varName 引用。

文章摘要

文章摘要可在正文中添加<!--more-->标记,代码中通过post.excerpt变量引用;或者在文章的配置信息中增加description字段。

导航栏自适应

为了适配不同的屏幕宽度,导航栏有以下3种状态

1.桌面大屏:导航栏与内容等宽居中,而不是logo和标签跑到屏幕两侧;

2.平板中屏:导航栏跟随屏幕缩小;

3.手机小屏:导航栏的logo和标签分2行居中显示;

Untitled

实现方式:

在header中增加一层来限制logo和标签栏的距离,通过flex-basis属性来设定基础宽度,当小于该宽度时,会自动缩小两者之间的距离;

1
2
3
4
5
6
7
8
9
10
11
#header {
display: flex;
justify-content: center; //使下面的子级居中显示;
padding: 15px 40px 0;
border-bottom: 1px solid #ddd;
}
#header .header-limit {
display: flex;
justify-content: space-between; //使logo和标签栏分居两侧
flex-basis: 1130px; //限制logo和标签栏的距离
}

下面整理了hexo的常用变量形式,后续陆续增添。

hexo 变量

post.excerpt

在文中添加<!--more-->标记后,在标记前的部分就post.excerpt ,作为的文章摘要;page.more是标记后的部分;

文章Front-matter变量

可在markdown文件的头部使用yaml语言编写配置信息:

1
2
3
4
5
6
7
8
9
---
title: 笔记名称
date: 2019-02-08 09:25:14
category: 分类
tags: 标签
thumbnail: http://ovapng3dw.bkt.clouddn.com/hexo主题定义笔记/image.jpg
description: "文章摘要"

---

使用post.varName 引用,如 post.description

_config.yml中的变量

主题的根目录中包含_config.yml配置文件,可在其中定义变量进行引用,如

1
default_thumb: images/default.jpg  # source中的相对路径