{"componentChunkName":"component---src-templates-blog-post-js","path":"/2019-08-23-gridsome-custom-feed/","webpackCompilationHash":"da658d138a5c02dfedf3","result":{"data":{"site":{"siteMetadata":{"title":"八王子わんにゃんクラブ","author":"technology unit of JOHAQ.COM.","siteUrl":"https://svc-802-wannyan-club.johaq.com","keywords":["八王子わんにゃんクラブ"],"disqusShortname":"johaq-com"}},"markdownRemark":{"id":"a0036675-53f2-5e12-8d58-242da4788fa3","excerpt":"gridsomeにrss feedを追加する。 plugins 公式サイトには、以下の2つが紹介されている。利用実績はrssの方が多いが、実際にはfeedの方がいろいろ機能がたかそう。 複数のGraphQL Collectionに対応 rssのほかatom / json出力にも対応 gridsome-plugin…","timeToRead":2,"html":"<blockquote>\n<p>gridsomeにrss feedを追加する。</p>\n</blockquote>\n<h3 id=\"plugins\"><a href=\"#plugins\" aria-label=\"plugins permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>plugins</h3>\n<p>公式サイトには、以下の2つが紹介されている。利用実績はrssの方が多いが、実際にはfeedの方がいろいろ機能がたかそう。</p>\n<ul>\n<li>複数のGraphQL Collectionに対応</li>\n<li>rssのほかatom / json出力にも対応</li>\n</ul>\n<p>gridsome-plugin-feedを中心に紹介する。</p>\n<p><a href=\"https://gridsome.org/plugins/gridsome-plugin-rss\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">gridsome-plugin-rss</a>\n<a href=\"https://gridsome.org/plugins/gridsome-plugin-feed\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">gridsome-plugin-feed</a></p>\n<h3 id=\"install\"><a href=\"#install\" aria-label=\"install permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>install</h3>\n<blockquote>\n<p>yarn add gridsome-plugin-feed\nor\nnpm install gridsome-plugin-feed</p>\n</blockquote>\n<h3 id=\"設定\"><a href=\"#%E8%A8%AD%E5%AE%9A\" aria-label=\"設定 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>設定</h3>\n<p>gridsome.config.jsに設定する。</p>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-js line-numbers\"><code class=\"language-js\">module<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  plugins<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token punctuation\">{</span>\n      use<span class=\"token punctuation\">:</span> <span class=\"token string\">'gridsome-plugin-feed'</span><span class=\"token punctuation\">,</span>\n      options<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token comment\">// Required: array of `GraphQL` type names you wish to include</span>\n        contentTypes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'BlogPost'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'NewsPost'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n        <span class=\"token comment\">// Optional: any properties you wish to set for `Feed()` constructor</span>\n        <span class=\"token comment\">// See https://www.npmjs.com/package/feed#example for available properties</span>\n        feedOptions<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n          title<span class=\"token punctuation\">:</span> <span class=\"token string\">'My Awesome Blog Feed'</span><span class=\"token punctuation\">,</span>\n          description<span class=\"token punctuation\">:</span> <span class=\"token string\">'Best blog feed evah.'</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token comment\">// === All options after this point show their default values ===</span>\n        <span class=\"token comment\">// Optional; opt into which feeds you wish to generate, and set their output path</span>\n        rss<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n          enabled<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n          output<span class=\"token punctuation\">:</span> <span class=\"token string\">'/feed.xml'</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        atom<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n          enabled<span class=\"token punctuation\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n          output<span class=\"token punctuation\">:</span> <span class=\"token string\">'/feed.atom'</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        json<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n          enabled<span class=\"token punctuation\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n          output<span class=\"token punctuation\">:</span> <span class=\"token string\">'/feed.json'</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token comment\">// Optional: the maximum number of items to include in your feed</span>\n        maxItems<span class=\"token punctuation\">:</span> <span class=\"token number\">25</span><span class=\"token punctuation\">,</span>\n        <span class=\"token comment\">// Optional: an array of properties passed to `Feed.addItem()` that will be parsed for</span>\n        <span class=\"token comment\">// URLs in HTML (ensures that URLs are full `http` URLs rather than site-relative).</span>\n        <span class=\"token comment\">// To disable this functionality, set to `null`.</span>\n        htmlFields<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'description'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'content'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n        <span class=\"token comment\">// Optional: if you wish to enforce trailing slashes for site URLs</span>\n        enforceTrailingSlashes<span class=\"token punctuation\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n        <span class=\"token comment\">// Optional: a method that accepts a node and returns true (include) or false (exclude)</span>\n        <span class=\"token comment\">// Example: only past-dated nodes: `filterNodes: (node) => node.date &lt;= new Date()`</span>\n        <span class=\"token function-variable function\">filterNodes</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">node</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n        <span class=\"token comment\">// Optional: a method that accepts a node and returns an object for `Feed.addItem()`</span>\n        <span class=\"token comment\">// See https://www.npmjs.com/package/feed#example for available properties</span>\n        <span class=\"token comment\">// NOTE: `date` field MUST be a Javascript `Date` object</span>\n        <span class=\"token function-variable function\">nodeToFeedItem</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">node</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n          title<span class=\"token punctuation\">:</span> node<span class=\"token punctuation\">.</span>title<span class=\"token punctuation\">,</span>\n          date<span class=\"token punctuation\">:</span> node<span class=\"token punctuation\">.</span>date <span class=\"token operator\">||</span> node<span class=\"token punctuation\">.</span>fields<span class=\"token punctuation\">.</span>date<span class=\"token punctuation\">,</span>\n          content<span class=\"token punctuation\">:</span> node<span class=\"token punctuation\">.</span>content\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<h3 id=\"参考情報\"><a href=\"#%E5%8F%82%E8%80%83%E6%83%85%E5%A0%B1\" aria-label=\"参考情報 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>参考情報</h3>\n<ul>\n<li><a href=\"https://pensuke.work/posts/gridsome-rss-feed\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">GridsomeのブログでRSSフィードを設定する</a></li>\n</ul>","fields":{"slug":"/2019-08-23-gridsome-custom-feed/"},"frontmatter":{"title":"[gridsome] add rss feed","date":"August 23, 2019","published_time":"2019-08-23","description":"gridsomeにrss feedを追加する","tags":["software","plugin","gridsome","rss","gridsome-plugin-feed\"","draft"],"cover":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIDBAX/xAAWAQEBAQAAAAAAAAAAAAAAAAABAAL/2gAMAwEAAhADEAAAAZ05j2WMQP8A/8QAGxAAAgIDAQAAAAAAAAAAAAAAAQIABBAREhT/2gAIAQEAAQUCr3OEe62vU4iARsf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAbEAABBAMAAAAAAAAAAAAAAAABAAIQMREhQf/aAAgBAQAGPwIMcK6tYVmDH//EABsQAQACAgMAAAAAAAAAAAAAAAEAESExQXGR/9oACAEBAAE/IRsmnKKWDqah7zcogGyRn//aAAwDAQACAAMAAAAQBO//xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAwEBPxCn/8QAFhEBAQEAAAAAAAAAAAAAAAAAABEh/9oACAECAQE/ENV//8QAHBABAAMAAgMAAAAAAAAAAAAAAQARITFRQYGR/9oACAEBAAE/EEAtQ5bvDfEGGqUV36wv9s899xQpk7Lg4FjiFQF8T//Z","aspectRatio":2.3333333333333335,"src":"/static/b2ed1604fea9bd8ed8b04c003814e4b3/d0c15/blog_bg_4.jpg","srcSet":"/static/b2ed1604fea9bd8ed8b04c003814e4b3/74a6a/blog_bg_4.jpg 350w,\n/static/b2ed1604fea9bd8ed8b04c003814e4b3/047db/blog_bg_4.jpg 700w,\n/static/b2ed1604fea9bd8ed8b04c003814e4b3/d0c15/blog_bg_4.jpg 1024w","srcWebp":"/static/b2ed1604fea9bd8ed8b04c003814e4b3/22384/blog_bg_4.webp","srcSetWebp":"/static/b2ed1604fea9bd8ed8b04c003814e4b3/e5785/blog_bg_4.webp 350w,\n/static/b2ed1604fea9bd8ed8b04c003814e4b3/1b440/blog_bg_4.webp 700w,\n/static/b2ed1604fea9bd8ed8b04c003814e4b3/22384/blog_bg_4.webp 1024w","sizes":"(max-width: 1024px) 100vw, 1024px","presentationWidth":1024,"originalImg":"/static/b2ed1604fea9bd8ed8b04c003814e4b3/d0c15/blog_bg_4.jpg"}}}}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/2019-08-23-gridsome-custom-feed/","previous":{"fields":{"slug":"/2019-08-23-gridsome-customize/"},"frontmatter":{"title":"[gridsome] customize"}},"next":{"fields":{"slug":"/2019-08-23-graphql-subscription/"},"frontmatter":{"title":"[graphql] subscription"}}}}}