Home Astro Astro 架設筆記(4) - 支援 Emoji

Astro 架設筆記(4) - 支援 Emoji

Edit

在撰寫文章的時候，有時候會用到一些表情符號，使用 md、mdx 撰寫文章，可以安裝 remark-emoji 來輔助，唯一的缺點就是不支援 .astro 。

封面圖

  1. 安裝套件
    npm install remark-emoji

  2. 設定
    import remarkEmoji from 'remark-emoji';

export default defineConfig({
	site: 'https://rojerchen.github.io',
	base: '/',
	integrations: [
    ...
	],
	markdown: {
      remarkPlugins: [
        remarkEmoji,
      ],
  },
});
這樣只要在文章輸入:heart: 就可以直接轉換了。

如果想要支援 .astro 就必須要額外安裝別的套件才有辦法
  1. 安裝套件
    npm install node-emoji
  2. astro.config.mjs設定
    import remarkEmoji from 'remark-emoji';

export default defineConfig({
  ...
  vite: {
    resolve: {
      alias: {
        "@emoji": new URL("./src/utils/emoji.ts", import.meta.url).pathname,
      },
    },
  },  
});

  3. 新增 src/utils/emoji.ts
    import { get, emojify } from "node-emoji";

// 取得單一 emoji
export function emoji(name: string): string {
  return get(name) || name;
}

// 把字串裡的 :smile: 自動轉換
export function emojifyText(text: string): string {
  return emojify(text);
}
  4. 啟用方式
    import { emojifyText } from "@emoji";

{emojifyText(":date:")}
這樣就可以讓 .astro 支援 Emoji 了。

※延伸閱讀

    Blogger Comment

0 意見:

張貼留言

訂閱： 張貼留言 ( Atom )