在Freemind主题中开启图片阴影

添加图片阴影

hexo-theme-freemind主题中，默认没有开启图片阴影。当图片的背景和文章的背景是同色的时候，有时会造成混淆，看不清楚哪部分是图片，哪部分是文章。

打开源码看了一下，发现其实hexo-theme-freemind本身就已经支持图片shadow了。只是默认没有开启，而且也没有在README.md中提及。

在hexo-theme-freemind/layout/_partial/article.ejs文件中有如下代码

1
2
3
4
5
6
7
8
9

<% if (item.shadow ) { %>
   <style type="text/css">
           img, video {
                -webkit-box-shadow:0 0 10px rgba(0, 0, 0, .5);
                -moz-box-shadow:0 0 10px rgba(0, 0, 0, .5);
                box-shadow:0 0 10px rgba(0, 0, 0, .5);
           }
   </style>
<% } %>

因此，只要在每个Post的front-matter中，添加shadow: true,就可以开启图片阴影了, 如果觉得默认的阴影不明显，也可以修改上面的数值，使得阴影看上去更明显一点。

修改post和draft脚手架

最后添加shadow: true到hexo的scaffolds/post.md和scaffolds/draft.md中，这样在生成post或者draft的时候就可以自动添加上图片阴影了。

1
2
3
4
5
6
7
8
9
10

---
title: {{ title }}
date: {{ date }}
categories:
tags:
description:
feature:
toc: true
shadow: true
---