設置文章封面圖片(文章內不顯示)

發表於 | 分類於 | |

在首頁會顯示文章摘要封面，進入 “閱讀全文” 後不會顯示這張圖片，很適合做為分類圖片

設定 Post.swig

修改 \themes\next\layout_macro\post.swing 文件，將下面程式碼複製：

{% if post.summary_img  %}
  <div class="out-img-topic">
    <img src={{ post.summary_img }} class="img-topic">
  </div>
{% endif %}

程式碼插入位置如下:

282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
    {# Append end tag for `post-gallery-row` when (photos size mod COLUMN_NUMBER) is less than COLUMN_NUMBER #}
    {% if post.photos.length % COLUMN_NUMBER > 0 %}</div>{% endif %}
  </div>
{% endif %}

{% if is_index %}

  <!-- 首頁文章摘要圖片設定 -->
  {% if post.summary_img  %}
    <div class="out-img-topic">
      <img src={{ post.summary_img }} class="img-topic">
    </div>
  {% endif %}
  <!-- 首頁文章摘要圖片設定 -->

  {% if post.description and theme.excerpt_description %}

設定 Front-atter 區域

在新建的文章 Front-matter 區域添加一个字段屬性 summary_img 如下:

---
title: 文章封面設置
tags:
categories:
summary_img: /images/cover.jpg # 不使用的話空著就好，Front-matter 模版不用修改
---

注意:

  1. 可使用網路圖片，但本地圖片要放在 images 目錄下
  2. 檔案名稱不可有空格如: cover 400x400.jpg 會導致圖檔無法讀取

參考資料
【目录】Hexo+NexT搭建博客拥抱舒爽 > 3.10 设置文章封面图片(文章内不显示)

0%