事前に準備しておくこと
ローカル環境にNodeをインストールしておく必要があります。Macの場合は次の記事などを参考にnodeが使える環境を構築しましょう。ターミナルで node -v を実行してバージョンが表示される状態にしましょう。
パッケージをインストール
Frontmatter CMSを利用しているプロジェクトに以下のようにパッケージをインストールします。
Terminal
pnpm add -D @frontmatter/extensibilityスクリプトを作成
以下のようなスクリプトを作成します。
.frontmatter/scripts/emoji-field.script.mjs
import { FieldAction } from '@frontmatter/extensibility';
(async () => {
const value = makeRandomEmoji();
FieldAction.update(value);
})();
function isEmoji(value) {
const emojiRegex =
/\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?|\p{Emoji_Presentation}|\p{Emoji}\uFE0F/u;
return emojiRegex.test(value);
}
function getRandomRange() {
const emojiRanges = [
{ start: 0x1f600, end: 0x1f64f },
{ start: 0x1f300, end: 0x1f5ff },
{ start: 0x1f680, end: 0x1f6ff },
];
const randomIndex = Math.floor(Math.random() * emojiRanges.length);
return emojiRanges[randomIndex];
}
function getRandomValue(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function makeRandomEmoji() {
let emoji = '';
do {
const randomRange = getRandomRange();
const randomCodePoint = getRandomValue(randomRange.start, randomRange.end);
emoji = String.fromCodePoint(randomCodePoint);
} while (!isEmoji(emoji));
return emoji;
}Frontmatter CMSの設定ファイルを修正
以下のハイライトしている行のように actions を設定することで、スクリプトを実行してフィールドに値を入力できるようになります。script にはスクリプトを作成で作成したスクリプトのパスを設定しています。
frontmatter.json
{
"frontMatter.taxonomy.contentTypes": [
{
"name": "default",
"pageBundle": false,
"previewPath": null,
"fields": [
{
"title": "Emoji",
"name": "emoji",
"type": "string",
"single": true,
"encodeEmoji": false,
"actions": [
{
"title": "Make random emoji",
"script": ".frontmatter/scripts/emoji-field.script.mjs",
"command": "node"
}
]
}
]
}
]
}参考
Field actions | Front Matter
Learn how you can add your custom field actions to populate the field with a specific value.
frontmatter.codes
