Hexo_Fluid文章头图定位

涉及文件和修改

hexo-theme-fluid\layout\_partials\header\banner.ejs

在banner.ejs文件中，我们定义一个变量banner_position。

var banner_position = page.banner_position || 'center center'

这段代码表示，如果文章的头部信息中设置了banner_position字段，那么就使用该字段的值作为图片的定位；如果不想定位图片，就无需在文章头部信息中添加banner_position字段，将默认使用center center作为图片的定位。

---

接着在 banner.ejs 文件中进行相应的修改，找到这部分内容。

style="background: url('<%- url_for(banner_img) %>') no-repeat center center

将 center center 改为变量 <%= banner_position %>

style="background: url('<%- url_for(banner_img) %>') no-repeat <%= banner_position %>

使用方法

文章的头部信息就是 Hexo 写文章时最上面的部分，大致如下，在里面添加一个 banner_position 字段来单独控制图片的定位。下面示例的 left center 代表让图片靠左且图片高度居中。

---
title: 
permalink: 
banner_img: //test.jpg
banner_position: left center
---

当然你还可以用百分比来定位，具体可以参考这篇教程：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position