Hexo Next为每篇文章设置自定义的banner图片

最新推荐文章于 2024-06-20 17:18:04 发布

王文珏

最新推荐文章于 2024-06-20 17:18:04 发布

阅读量4.7k

点赞数 2

分类专栏：前端文章标签： hexo next 博客

本文链接：https://blog.csdn.net/hhh132/article/details/97029059

版权

本文介绍如何在Hexo Next主题中为每篇文章设置自定义的banner图片。通过修改swig模板并在文章目录下放置图片，实现文章页打开时优先使用本地图片，否则使用默认背景。解决方案包括在全局布局文件中插入JavaScript代码，检查文章目录是否存在特定图片，以动态更改banner的背景图像。

摘要由CSDN通过智能技术生成

Post页

title: Hexo Next为每篇文章设置自定义的banner图片
date: 2019-07-23 13:17:46
tags:
categories:

想完成这样一个功能：

顶部banner默认读取images/background.jpg。当进入文章页面的时候，判断文件夹内是否存在header-banner.jpg图片存在，有就优先使用它，否则使用images/background.jpg。

之前静态改变banner图是直接在custom.styl里改变.header-inner里的background属性的。

现在要动态改banner图，当然要在javascript中改。

首先我找到了整个宏观布局定义的代码在themes\next\layout\_layout.swig。swig其实可以看做是html的超集（类似于ejs），可以使用各种html属性，当然也就可以在里面插入js代码了。于是我试着往header那一端里面插入：

<script type="text/javascript">
console.log(window.location);
</script>

重启hexo服务器之后可以顺利地在控制台看到输出。

知道了可以直接改动swig文件来往html中插入js之后，一切就都明了了。下面是最终的解决方案。

我们看到post.swig第一句，说明它扩展于_layout.swig，仔细看_layout.swig里面header一段，可以看到它又include了_partials/header.swig，这就说明了我们改了_layout.swig就可以覆盖到每种情况了。

首先在class="header-inner"前面加上id。

<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
    <!-- 添加了id，后面改变css样式用 -->

关注

专栏目录