【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);
// Set directories to pass through to the _site folder

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",
}
}
}

参考: