Blog 文章封面產生器

malagege included in Blog

2022-10-20 179 words One minute

https://user-images.githubusercontent.com/6058558/196946963-ea34e3e0-844d-404e-946f-a685b5aa3f2b.png

Contents

最近看 LoveIt 主題內容，文章可以放個預覽圖，我就想嘗試看看，找了一些有用工具試試。

Coverview

Coverview - Creating cover images for your blogs is now super easy

來源Coverview - 部落格文章封面圖片產生器，自訂標題作者與背景顏色圖片，免費下載 PNG 格式封面縮圖 - TechMoon 科技月球這篇文章。

這個是免費開源的工具，簡單就能做，裡面有很多程式 Icon，還滿適合寫程式 Blog用，缺點功能還滿一般，不太能自定排版，但我覺得利大於弊。這篇文章就是用這個產生器。

專案原始碼在這rutikwankhade/CoverView: 🛠 Create awesome cover images for your blog posts quickly.，假如之後網站掛點也能自己架設。

這篇文章就是用這個做。

Adobe Spark

上篇文章有用這個，上面介紹 Coverview 像我前面有用到這個。hexo,hugo這兩個東西很難用 Coverview 來特別設置工具。所以我就嘗試用這個，不過大多圖片都是付費才能用，在使用圖片上建議還是小心使用。

也有其他工具，可參考這篇免費設計工具：製作簡報、影片、社交媒體 | Canva

製作心得

因為主要我用在 Blog 上面，我 Blog 使用 LoveIt 主題，他有提供文章預覽圖方法。最近就想使用看看。~~雖然都是品質不佳文章。~~

預覽圖可以用兩張，假如懶得化可以用一張圖。但需要注意重點文字需要靠中間。

首頁顯示文章會是這樣。

我發現文章放圖，就不會注意標題文字，這個容易吸引到使用者瀏覽清單，快速看到文章標題，可以快速近來，所以文章標題應該要放大顯示。

LoveIt 官方預覽圖設定

看官方某篇文張看到圖片竟然有不會至中，我很好奇是怎麼做到的，我這篇簡單看一下。

結果是用兩張圖用的。可以參考範例 Github 目錄。LoveIt/exampleSite/content/posts/theme-documentation-extended-shortcodes at master · dillonzq/LoveIt

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


---
weight: 4
title: "Theme Documentation - Extended Shortcodes"
date: 2020-03-03T16:29:41+08:00
lastmod: 2020-06-12T10:10:13+03:00
draft: false
author: "Dillon"
authorLink: "https://dillonzq.com"
description: "LoveIt theme provides multiple shortcodes on top of built-in ones in Hugo."
images: []
resources:
- name: "featured-image"
  src: "featured-image.jpg"
- name: "featured-image-preview"
  src: "featured-image-preview.jpg"