we new

【转】Blog摘要配图

主要实现的就是在标题和摘要中间,插进一张Logo图片,而当点击进入后,就不会再显示这个logo图片了。原文地址:Hexo主题的数据封装,样式渲染和扩展实例

css样式

  • hexo/themes/next/source/css/: 是next主题的样式文件,决定主题的外观。
  • hexo/themes/next/source/css/main.styl:汇总css文件夹中所有的样式。
  • hexo/themes/next/source/css/ _custom/custom.styl:是空的,专门让开发者扩展。

需要在custom.styl里为图片设计一个专用容器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//图片外部的容器方框
.out-img-topic {
display: block;
max-height:300px;
margin-bottom: 24px;
overflow: hidden;
}
//图片
img.img-topic {
display: block ;
margin-left: .7em;
margin-right: .7em;
padding: 0;
float: right;
clear: right;
}

这里图片外部的容器用来限制图片显示的大小,最大的高度为300px,overflow: hidden;让多余部分隐藏。margin-bottom: 24px;确保图片和文章摘要部分空出一定空间。

渲染

修改 /themes/next/layout/ _macro/post.swig ,在 if is_index 与 if post.description and theme.excerpt_description 之间添加以下代码

1
2
3
4
5
{% if post.images %}
<div class="out-img-topic">
<img src={{ post.images }} class="img-topic">
</div>
{% endif %}

模板

在 /scaffolds/post.md ,加一个images字段,那么在创建新的文章时,填的图片地址就会一直作为文章的一个属性被传递。

1
2
3
4
5
title: {{ title }}
date: {{ date }}
categories:
tags:
images: "/images/摘要配图/"

我在images下新建一个摘要配图的文件夹专门用来放入这些图片。如果不想在摘要加入图片,images里面不填写路径就可以了。(p.s. 在写这篇的时候,用codeblock代码块崩了,提示Template render error,之后改成```来引用代码ok了~~)


声明: 本文转载前需与作者联系并标明出处
分享到: