hexo butterfly搭建博客时标签页面无top_img

img

img

img


很奇怪，代码都一样的，但是archive归档页面有，就tag没

我改了下配置项，尝试运行下


top_img:
  # The banner image of home page
  index: https://www.ryanieeee.cc/img/xt_1.jpg
  # If the banner of page not setting, it will show the top img
  default: https://www.ryanieeee.cc/img/xt_1.jpg
  # The banner image of archive page
  archive: https://www.ryanieeee.cc/img/xt_1.jpg
  
tag_per_img:
  # The banner image of tag page
  - tag_name: xxxxx
    img: https://www.ryanieeee.cc/img/xt_1.jpg
    
category_img: 
  # The banner image of category page
  category_name: xxxxx
  img: https://www.ryanieeee.cc/img/xt_1.jpg

img

多了一个空格？

F12看日志图片报什么错

github+hexo+butterfly 搭建个人博客
可以参考下，非常详细


Hexo Butterfly主题页面美化_butterfly主题美化_Sady.的博客-CSDN博客 找个文件粘贴进去就行了（简单粗暴，但是要在主题配置里确定引用了的） ↓波浪特效找到文件粘贴进去（看自己喜好调整）（要确定被引用） ↓把这段粘贴到主题配置文件选项里面去 ↓透明特效首页部分方法一把横幅图片与背景图设置成一样的 ↓方法二找个文件放进去各有不同！\页脚部分在（位置直接搜索）里的里加一句话 ↓其他页面头部首先在主题配置文件里全部把这些页面的图片值改为如：然后在里把..._butterfly主题美化 https://blog.csdn.net/qq_30141543/article/details/125576174

首先，让我们了解一下Hexo Butterfly主题的标签页，它可以让你在博客中轻松地按照标签对文章进行分类。但是，在有些情况下，标签页可能会出现top_img内容不存在的问题。这通常会在你在标签页上设置了带有特色图片的文章时发生。

这个问题的原因可能是因为你在Hexo配置文件（_config.yml）中没有正确设置文章的特色图片。要解决这个问题，你需要按照以下步骤进行操作：

步骤1：确认是否存在top_img

首先，你需要确认一下你的文章是否包含了特色图片。在Hexo中，你可以使用Markdown语法添加图片，例如：

![特色图片](/images/featured-image.jpg)

确保你在文章的头部使用了这个语法来添加图片，否则标签页就无法正确显示特色图片。

步骤2：确认是否在Hexo配置文件中设置了特色图片

如果你的文章确实包含有特色图片，但仍然无法在标签页上显示，那么你需要检查一下你在Hexo配置文件中的设置是否正确。在这里，你需要设置每个文章的默认特色图片。你可以在_config.yml文件中找到下面的设置：

default_cover_image: /images/default-cover-image.jpg

确保你正确地设置了默认的特色图片，并且图片的路径是正确的。这个路径应该是相对于你的Hexo根目录的。

步骤3：生成并部署你的网站

如果你已经检查了上述两个步骤，但是仍然没有在标签页上看到特色图片，那么你可能需要重新生成和部署你的Hexo网站。在终端中，你可以依次执行下面的命令：

hexo clean
hexo generate
hexo deploy

这些命令将会清除你的Hexo网站，并重新生成它。最后，你可以使用deploy命令将你的网站部署到你的服务器或者GitHub Pages上。

总结

如果你使用Hexo Butterfly主题搭建博客时遇到了标签页无法显示特色图片的问题，那么你可以按照上述步骤进行操作。首先，你需要确认你的文章是否包含特色图片。然后，你需要检查一下你在Hexo配置文件中的设置是否正确。最后，你需要重新生成和部署你的Hexo网站。如果你按照这些步骤操作仍然无法解决问题，那么你可以尝试在Hexo官方网站或GitHub上查找更多有关Hexo Butterfly主题的支持和文档。

Hexo是一个基于Node.js的静态博客框架，它可以快速搭建出一个简单、易于管理的个人博客。在Hexo中，标签(Tag)是一种重要的内容分类方式，通过标签分类可以方便地查找和管理博客文章。但是有时候在使用Hexo的Butterfly主题搭建博客时，标签页面会出现无top_img内容的问题，这可能会影响博客的美观度和用户体验，需要进行修复。

首先，我们需要了解Butterfly主题中标签页面的结构。在Butterfly主题中，标签页面使用了指定的模板文件tag.ejs来渲染页面。在这个模板中，由于我们需要在标签页面中显示每个标签的封面图片，所以使用了一个变量top_img来表示该标签的封面图片。但是，有时候top_img变量的值为空，导致标签页面无法正常显示封面图片。

接下来，我们需要找到问题的原因。在Hexo中，标签页面的封面图片通常是从博客文章的front-matter中获取的。在文章的front-matter中，我们可以通过设置cover属性来指定文章的封面图片。但是，在标签页面中，需要显示的是该标签下所有文章的封面图片，而不是单篇文章的封面图片。所以，我们需要找到一种新的方法来获取标签页面的封面图片。

一种解决方案是使用Hexo的标签数据API。标签数据API可以让我们方便地获取每个标签下的所有文章信息，包括每篇文章的front-matter信息。通过遍历每篇文章的front-matter信息，我们可以获取到该标签下所有文章的封面图片信息。然后，我们可以选择一个默认封面图片，当该标签下没有文章设置封面图片时，就显示默认封面图片。这种解决方案可以避免top_img变量为空的问题，让标签页面的显示更加完整和美观。

下面是具体的解决步骤：

  1. 在根目录下的_config.yml文件中添加以下配置：
# hexo-generator-json-content配置
jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: true
    tags: true
    categories: false
    cover: true
    author: true
    comments: true

这个配置可以让我们在生成JSON格式的文章数据时，包含每篇文章的封面图片信息。

  1. 在根目录下执行以下命令：
$ hexo generate --json

这个命令可以生成JSON格式的文章数据文件，在Hexo中会生成一个json目录，里面包含了所有文章的JSON数据文件。

  1. 修改tag.ejs模板：

修改tag.ejs模板，使用以下代码来获取该标签下所有文章的封面图片信息：

<% var tag_cover = null %>
<% for (var i = 0; i < locals.posts.length; i++) { %>
  <% var post = locals.posts[i] %>
  <% if (post.tags.indexOf(page.tag) !== -1) { %>
    <% if (tag_cover === null && post.cover != null) { %>
      <% tag_cover = post.cover %>
    <% } %>
  <% } %>
<% } %>
<% if (tag_cover === null) { %>
  <% tag_cover = '/assets/images/default_cover.jpg' %>
<% } %>

这段代码中，我们使用locals.posts来获取所有文章的JSON数据，在循环遍历每篇文章时，判断该文章是否包含当前标签，如果包含则从该文章的JSON数据中获取封面图片信息，并将其赋值给tag_cover变量。如果该标签下的所有文章都没有设置封面图片，则使用默认封面图片。

  1. 在主题的languages目录下的zh-CN.yml文件中添加以下翻译：
tag_cover: 封面图片

这个翻译可以让我们在标签页面中显示封面图片的中文名称。

  1. 修改tag.ejs模板中封面图片的显示：
<div class="block-header" <% if (tag_cover != null) { %>style="background-image: url(<%- tag_cover %>);" <% } %>></div>

这个代码中，我们使用了背景图片的方式来显示封面图片。如果tag_cover变量不为空，则将其作为背景图片显示；如果tag_cover变量为空，则不显示背景图片，保留默认样式。

经过以上修改，标签页面就可以正常显示封面图片了。通过使用Hexo的标签数据API，我们可以方便地获取标签下所有文章的封面图片信息，并在标签页面中显示。这种解决方案避免了top_img变量为空的问题，让标签页面的显示更加完整和美观。