为 Hexo 主题添加多种图片样式

为一篇博客添加相关的图片可以快速吸引读者的目光,也能帮助读者理解文章概要,尤其是在写技术博客或是某些很复杂的东西时。

然而,Hexo 主题一般只提供一种默认的图片样式,包括 Jacman。所以,我为 Jacman 实现了几种常见的图片样式。这里我会展示这几种图片样式以及其实现方法。

主题图片

我比较喜欢像36氪那样,一篇文章带一张相关图片。图片能传达的信息永远比文字丰富。当浏览文章列表时,除了标题最吸引人的自然就属文章主题图片了。

所以为了方便使用,我创建了一个图片样式叫img-topic,大概是长这样子的。

/themes/jacman/source/css/_partial/index.styl
.img-topic
max-width: 300px;
max-height: 1800px;
display: block ;
margin-left: .7em;
margin-right: .7em;
padding: 0;
float: right;
clear: right;

在博客中,我更希望主题图片居右,并且点进文章正文后该图片不会显示。我们可以使用HTML语法插入图片。

<img src="图片路径" class="img-topic" />

这儿是一张使用img-topic样式后的效果图。

img-topic效果图img-topic效果图

Logo 图片

Logo 图片可以快速定义一篇文章的主题。与主题图片非常类似,只不过 Logo 图片放置的是 Logo ,而且一般比主题图片要小。类似的,Logo 图片也是居右,并且在文章正文中不会显示。

关于img-logo的样式如下

/themes/jacman/source/css/_partial/index.styl
.img-logo
max-width: 180px;
max-height: 96px;
display: block;
margin-right: .7em;
margin-left: .7em;
padding: 0;
float: right;
clear: right;

使用HTML语法插入图片

<img src="图片路径" class="img-logo" />

效果如下图:

img-logo效果图img-logo效果图

居中图片

有网友抱怨 Jacman 的图片只能居左,他喜欢让图片居中却不知道该怎么做。为此,我也创建了一个图片样式叫img-center,所需的代码很短。

/themes/jacman/source/css/_partial/article.styl
.img-center
display: block ;
margin: auto;

阴影图片

有时候添加的图片可能会与文章背景混淆,使得读者看不清到底哪部分是图片哪部分是文章。使用img-shadow为图片添加边角阴影可以更加凸显图片的位置,也能更美观。

/themes/jacman/source/css/_partial/article.styl
.img-shadow
box-shadow: 0 0 2px 3px #ddd;

使用HTML语法插入图片

<img src="http://ww1.sinaimg.cn/large/81b78497jw1enhkcat9mqj20go06g0sy.jpg" class="img-shadow" />

画廊图片

Hexo 中提供了一种文章类别叫photo,Jacman 也为这种文章设计了图片浏览方式。具体效果可以看这篇 Demophoto类文章的写法可以看 Demo Sample

photo文章效果图photo文章效果图

图片备注

Jacman 中可以方便地为图片提供备注。

![添加你的备注](http://ww1.sinaimg.cn/mw690/81b78497jw1emfgts2pt4j21hc0u0k1c.jpg)

效果就如下图,在图片左下方会显示关于图片的描述。

添加你的备注添加你的备注

OK,就这么多了,希望大家喜欢。如果嫌折腾麻烦,欢迎使用最新版的 Jacman,可以直接使用以上定义的样式!

PS:有任何关于 Hexo 的问题,欢迎来 Hexo 中文社区 咨询。