【Hexo&11ty】pugでのOGPテンプレート
いつも忘れるので
Hexoの場合
サイトの_config.ymlにツイッターアカウントとサイトタイトルを設定している前提です。
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 meta(property="og:url" content=full_url_for(page.path)) meta(property="og:title" content=pageTitle) - var page_type = "website" if is_post - page_type = "article" meta(property="og:type" content=page_type) - var page_description = config.description if page.more - page_description = strip_html(page.excerpt) meta(property="og:description" content=page_description) meta(property="name" content=truncate(page_description,{length: 90})) - var ogp_img = null if theme.logo - ogp_img = theme.logo if theme.ogp - ogp_img = theme.ogp if page.cover - ogp_img = page.cover if page.ogp - ogp_img = page.ogp meta(property="og:image" content=full_url_for(ogp_img)) meta(name="twitter:card" content="summary_large_image") meta(name="twitter:site" content="@" + config.twitter) meta(property="og:site_name" content=config.title) meta(property="og:locale" content="ja_JP")
11tyの場合
_dataフォルダ内のsite.yamlにベースURLとサイトタイトルとtwitterIDを書いている想定です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 - var path = page.outputPath - path = path.split("/") - path.shift() - path = path.join("/") if description meta(name="description", content=description) meta(property='og:description' content=description) meta(property='og:url' content=site.baseURL + path) - var ogtitle = "" if title - ogtitle += title - ogtitle += site.title meta(property='og:title' content=ogtitle) meta(property='og:type' content='website') if cover meta(property='og:image' content=site.baseURL + filters.url(cover)) else meta(property='og:image' content=site.baseURL + "imgs/OGP.webp") meta(name='twitter:card' content='summary') meta(name='twitter:site' content=site.twitter_id) meta(property='og:site_name' content=site.title) meta(property='og:locale' content='ja_JP')
おまけ
Hexoのscriptsもさらしときます。
画像をglihtbox に対応させるやつ。
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 hexo.extend .filter .register ('after_post_render' , function (data ){ const imgRegex = /<img(?:.|\n)*?>/g ; const contentWithImg = data.content ; const contentWithATags = contentWithImg.replace (imgRegex, (imgTag ) => { const srcRegex = /src="([^"]+)"/ ; const altRegex = /alt="([^"]+)"/ ; let srcMatch = imgTag.match (srcRegex); const altMatch = imgTag.match (altRegex); imgTag = imgTag.replace (".png" ,".webp" ) if (srcMatch ) { const src = srcMatch[1 ].replace (".png" ,".webp" ); const alt = altMatch && altMatch[1 ] ? altMatch[1 ] : '' ; return `<a href="${src} " title="${alt} " class="glightbox" data-gallery="postImg">${imgTag} </a>` ; } else { return imgTag; } }); data.content = contentWithATags; return data; },2 );
11tyの設定ファイルもさらしときます。
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 27 28 29 30 31 32 33 34 35 const markdownIt = require("markdown-it" ); const yaml = require("js-yaml" ); const eleventySass = require("eleventy-sass" ); const watchFolder = [ "imgs" , "css" , "js" ] module.exports = function (eleventyConfig) { let pug = require("pug" ); global.filters = eleventyConfig.javascriptFunctions; eleventyConfig.addPlugin(eleventySass); eleventyConfig.setLibrary('pug', pug); watchFolder.forEach(element => { eleventyConfig.addPassthroughCopy("src/" + element + "/" ); eleventyConfig.addWatchTarget("src/" + element + "/" ); console.log(element) } ); eleventyConfig.addDataExtension("yaml" , (contents) => yaml.load(contents)); let options = { html: true , breaks: true , linkify: true , } ; eleventyConfig.setPugOptions({ filters: global.filters } ) eleventyConfig.setLibrary("md" , markdownIt(options)); return { dir: { input: "src" , } } }
参考: