QuartzでAutoCardLinkTitleをレンダリングできるプラグインつくった！

はじめに

こんにちは、Rerurateと申します。

最近Quartzを使用してCloudflareのホスティングで静的サイトを公開するメモでサイトを公開してみています。
これが結構体験がよくて、ずっとサイトのカスタマイズに没頭しています。

ただ、一つだけ問題があって、https://github.com/nekoshita/obsidian-auto-card-link で書かれたリンクがレンダリングされないという問題がありました。
こういうやつ

```cardlink
url: https://phibr0.medium.com/how-to-create-your-own-obsidian-plugin-53f2d5d44046
title: "How to create your own Obsidian Plugin"
description: "In this Post we will be recreating one of my first Obsidian Plugins, Cycle through Panes."
host: phibr0.medium.com
favicon: https://miro.medium.com/v2/1*m-R_BkNf1Qjr1YbyOIJY2w.png
image: https://miro.medium.com/v2/resize:fit:960/1*zZWfQg49TnqCqlmOrsi7Eg.png
```

これをどうしてもレンダリングできないか、探っていたところ、どうやら自分でレンダリングプラグインをつくればよいという考えに至りました！！！

作成したものがこちらになります。

GitHub - Rerurate514/AutoCardLinkRenderer

Contribute to Rerurate514/AutoCardLinkRenderer development by creating an account on GitHub.

github.com

使い方

このPluginを使用するには、以下のコマンドをQuartzプロジェクトのルートディレクトリで実行します。

npx create-quartz-autocardlinkrenderer@latest

このコマンドを実行すると

• quartz/components/style/autoCardLink.inline.scss
• quartz/plugins/transformers/aslr.ts
  にそれぞれファイルが生成されます。

そして、生成されたquartz/plugins/transformers/aslr.tsをquartz/plugins/transformers/index.tsにインポートします。

export { AutoCardLinkRenderer } from "./aclr"

さらに、quartz.config.tsのtransformersセクションにこれを挿入します。

Plugin.AutoCardLinkRenderer(),

これで完成です！！

顔たち

色合いをめっちゃカスタマイズしているので、そこのところが変わります。

• 通常時

  

• hover時

  

おわり

コードの説明まではしません（長いので）

めっちゃサイトが華やかになってうれしい👍