增加 Hexo 的 RSS, ATOM, JSON Feed 訂閱功能

RSS(Really Simple Syndication) 是用 xml 定義的標準格式，用來把新聞、部落格文章或是 Podcast 更新資訊彙整到一個地方

衍生出的格式有 Atom, Json Feed 等格式

既然都做部落格了，當然要提供訂閱功能。(加減多點流量)

在 Hexo 內可以使用 Hexo-Feed 插件幫我們產生 RSS, Atom 還有 Json Feed 的檔案

Hexo-feed GitHub

安裝

需要版本

Hexo 4.X+
NodeJS 12+

安裝指令

>_ terminal

1

npm install hexo-feed --save-dev

製作模板檔案

新增對應的模板檔案

RSS: themes/layout/template/rss.ejs

</> html 📄 rss.ejs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


<?xml version="1.0"?>
<rss version="2.0">
    <channel>
        <title><%= config.title %><%= tag ? ` • Posts by "${tag}" tag` : '' %><%= category ? ` • Posts by "${category}" category` : '' %></title>
        <link><%= config.url %></link>
        <description><%= config.description %></description>
        <language><%= config.language %></language>
        <pubDate><%= moment(lastBuildDate).locale('en').format('ddd, DD MMM YYYY HH:mm:ss ZZ') %></pubDate>
        <lastBuildDate><%= moment(lastBuildDate).locale('en').format('ddd, DD MMM YYYY HH:mm:ss ZZ') %></lastBuildDate>
        <%_ for (const { name } of (tags || [])) { _%>
        <category><%= name %></category>
        <%_ } _%>
        <%_ for (const post of posts) { _%>
        <item>
            <guid isPermalink="true"><%= post.permalink %></guid>
            <title><%= post.title %></title>
            <link><%= post.permalink %></link>
            <%_ for (const tag of (post.tags ? post.tags.toArray() : [])) { _%>
            <category><%= tag.name %></category>
            <%_ } _%>
            <pubDate><%= moment(post.date).locale('en').format('ddd, DD MMM YYYY HH:mm:ss ZZ') %></pubDate>
            <description><![CDATA[ <%= post.content %> ]]></description>
        </item>
        <%_ } _%>
    </channel>
</rss>

ATOM: themes/layout/template/atom.ejs

</> html 📄 atom.ejs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id><%= config.url %></id>
    <title><%= config.title %><%= tag ? ` • Posts by "${tag}" tag` : '' %><%= category ? ` • Posts by "${category}" category` : '' %></title>
    <link href="<%= config.url %>" />
    <updated><%= moment(lastBuildDate).toISOString() %></updated>
    <%_ for (const { name } of (tags || [])) { _%>
    <category term="<%= name %>" />
    <%_ } _%>
    <%_ for (const post of posts) { _%>
    <entry>
        <id><%= post.permalink %></id>
        <title><%= post.title %></title>
        <link rel="alternate" href="<%= post.permalink %>"/>
        <content type="html"><%= post.content %></content>
        <%_ for (const { name } of (post.tags ? post.tags.toArray() : [])) { _%>
        <category term="<%= name %>" />
        <%_ } _%>
        <updated><%= moment(post.date).toISOString() %></updated>
    </entry>
    <%_ } _%>
</feed>

Json Feed: themes/layout/template/json.ejs

</> html 📄 json.ejs

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


<%- JSON.stringify({
  version: 'https://jsonfeed.org/version/1',
  title: config.title + (tag ? ` • All posts by "${tag}" tag` : '') + (category ? ` • All posts by "${category}" category` : ''),
  description: config.description,
  home_page_url: config.url,
  items: posts.map(post => ({
      id: post.permalink,
      url: post.permalink,
      title: post.title,
      date_published: moment(post.date).toISOString(),
      content_html: post.content || '',
      tags:  (post.tags ? post.tags.toArray() : []).map(({ name }) => name)
  }))
}, null, 4) _%>

設定

修改 Heox 設定檔 _config.yml 新增 feed 設定

</> yaml 📄 _config.yml

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


feed:
    limit: 20
    order_by: "-date"
    tag_dir: "tag"
    category_dir: "category"
    rss:
        enable: true
        template: "themes/layout/template/rss.ejs"
        output: "rss.xml"
    atom:
        enable: true
        template: "themes/layout/template/atom.ejs"
        output: "atom.xml"
    jsonFeed:
        enable: true
        template: "themes/layout/template/json.ejs"
        output: "feed.json"

詳細設定參考 GitHub

完成

接下來只要重新佈署 hexo 即可

>_ terminal

1

hexo server

檢查這些網址看是否安裝成功

http://localhost:4000/rss.xml

http://localhost:4000/atom.xml

http://localhost:4000/feed.json

Photo by Mediamodifier on Unsplash