ゴモクマ書跡

参考URL

astro-notion-blogでサイトマップに対応する - Suzu Mono-gram | すずモノぐらむ

astro-notion-blogをサイトマップに対応させました。インテグレーションも@astrojs/sitemapも使わず、TypeScriptのみでの実装です。

https://suzu-mono-gram.com

ほぼこのページの手順通りでできた。

ポイント

1. generate-sitemap.tsは/src/lib/配下に
2. sitemap.xml.tsは/src/pages/配下に

自分のURLを書き込むのを忘れずに。
よく見りゃちゃんと書いてある。ちゃんと読もう(自戒)

サイトマップ(sitemap.xml)は問題なく吐かれてるけど、いざGoogle Search Consoleに登録してみたら自分の独自ドメインと違うURL吐いててエラーと言われる時。

こんな感じ。

要するに、サイトマップ生成時にURLがカスタムドメインになってなかったというだけの話だった。

src/server-constants.tsの中にカスタムドメインを入れる欄がちゃんとある。

自分のドメインを入れて解決。ちゃんと読もう(自戒)

雑多な記事のデータベースは据え置きにしつつ、そこから一部の記事だけを抽出した別サイトをつくりたくなった。

今ここ(ゴモクマ書跡)は手術の体験談からゲームの感想までノンカテゴリーだが、この中から感想の記事だけを取り出して本棚のように並べたくなったのだ。

やってみたら意外と難しくなかった。

1. 自分のastro-notion-blogのリポジトリをもうひとつ作る。
   この時、設定するNotionAPIキーやデータベースIDは今までと同じものを使う
2. lib>notion>client.tsファイル内の72行目あたりに以下のようなフィルターの記述があるので、好きな条件を付け加える。
   条件の書き方は自分もよくわからないので調べよう。

  const params: requestParams.QueryDatabase = {
    database_id: DATABASE_ID,
    filter: {
      and: [
        {
          property: 'Published',
          checkbox: {
            equals: true,
          },
        },
        {
          property: 'Date',
          date: {
            on_or_before: new Date().toISOString(),
          },
        },
      ],
    },

自分はとりあえず、元のデータベースに新しいチェックボックスのプロパティ(英字で指定する。とりあえずExampleとした)をつくり、Publishedの形式を真似て足したらうまくいった。

  const params: requestParams.QueryDatabase = {
    database_id: DATABASE_ID,
    filter: {
      and: [
        {
          property: 'Published',
          checkbox: {
            equals: true,
          },
        },
        {
          property: 'Date',
          date: {
            on_or_before: new Date().toISOString(),
          },
        },
        {
          property: 'Example',
          checkbox: {
            equals: true,
          },
        },
      ],
    },

Exampleにチェックが入っている記事は、元サイトにも、新しいサイトにも表示されるという寸法だ。
更新する時は、今まで通りNotionのページをつくればいい。

運用とカスタマイズでつまずいたら随時更新。

タグで記事を管理していると、こういう雑多なブログは文字通り雑多になっていく。
Notionに大カテゴリーのプロパティを増やして反映させたくなった。

一度、勉強も兼ねてAstroでサイトを作って理解も深まったので、挑戦してみたら意外にあっさりとうまくいった。

似た事例

astro-notion-blogに下書き表示用プロパティを実装する - Suzu Mono-gram | すずモノぐらむ

astro-notion-blogで”Published”のチェックボックスとは別に、開発環境で下書きページを表示して確認するための追加プロパティを実装しました。

https://suzu-mono-gram.com

いつもお世話になってます。

今回は、Notionで「Tags」とは別にマルチセレクトのプロパティを増やし、記事カテゴリーとして表示するのが目標。

1. Notion上で新しいプロパティを作る
   既に使っているデータベースに、マルチセレクトの「category」プロパティを作成。恐らく英字が無難。
2. interfaces.tsをいじる
   lib>interface.ts 8行目あたりにNotionのプロパティと連携する記載があるので、ここに作成したプロパティを追記。
   マルチセレクトではない場合は、追加したプロパティのデータ形式に合わせて追記する。ハズ。
   (Notion APIのドキュメント辺りに記載がありそうだが未確認)
   Copy

   export interface Post {
     PageId: string
     Title: string
     Icon: FileObject | Emoji | null
     Cover: FileObject | null
     Slug: string
     Date: string
     Tags: SelectProperty[]
     Excerpt: string
     FeaturedImage: FileObject | null
     Rank: number
     Catergory: SelectProperty[]
   }

3. 既存のコンポーネントを改変して追加したプロパティ用の部品にする
   今回は似た表示の「記事タグ」を表示している部品を流用して、Categoryプロパティの表示部品にする。
   タグを表示しているコンポーネント、src>components>PostTags.astroをコピーして、名前を変更。
   今回はPostCategory.astroとする。
   
   下線を引いてあるTagの部分を、すべてCategoryに書き換えたら、使いたいページでPostCategory.astroをインポートすればOK。
   Copy

   ---
   import type { Post, SelectProperty } from '../lib/interfaces.ts'
   import { getTagLink } from '../lib/blog-helpers.ts'
   import '../styles/notion-color.css'
   
   export interface Props {
     post: Post
     enableLink: boolean
   }
   
   const { post, enableLink = true } = Astro.props
   ---
   
   <div class="post-tags">
     {
       post.Tags &&
         post.Tags.length > 0 &&
         post.Tags.map((tag: SelectProperty) => {
           if (enableLink) {
             return (
               <a href={getTagLink(tag.name)} class={`tag ${tag.color}`}>
                 {tag.name}
               </a>
             )
           }
           return <span class={`tag ${tag.color}`}>{tag.name}</span>
         })
     }
   </div>

4. ※追加したプロパティの一覧URLが必要な時
   URLを生成しておく必要があるので、もう一箇所いじる。
   lib>blog-helpers.tsを開く。
   自分のわかりやすいところに以下を追記する。(自分は一番下にした)
   これでPostCategory.astroでつくられる部品にも、一覧ページのリンクが生成可能になった。
   Copy

   export const getCategoryLink = (Category: string) => {
     return pathJoin(BASE_PATH, `/posts/tag/${encodeURIComponent(Category)}`)
   }

もしURLを/posts/category/などとしたい場合。

上記blog-helpers.tsの記述をそのように書き換えた上で、pages>postsフォルダ内にcategoryフォルダをつくること。
Astroのドキュメントに則ってフォルダ内に[ ]つきのフォルダやページを用意することも忘れずに。

ルーティング

Astroのルーティングの紹介

https://docs.astro.build

このあたりになってくるともうastro-notion-blog関係なくAstroの話な気がするが、まあいいや。