astro-notion-blogカスタマイズメモ

ネットワークを勉強するならマスタリングTCP/IP がおすすめです

#show run

カスタマイズメモページの移行のためにリダイレクトを記載しておくpublic配下に設置ついでにrobot.txtも設置配置を自分好みに.サイドバーを右側に変更.各種ボーダーラインを入れる表題の右にタグを表示させる

カスタマイズメモ

ページの移行のためにリダイレクトを記載しておくpublic配下に設置

public/_redirects

[source] [destination] [code?]

Redirects | Cloudflare Pages docs

To use redirects on Cloudflare Pages, declare your redirects in a plain text file called _redirects without a file extension, in the output folder of your project. The build output folder is project-specific, so the _redirects file should not always be in the root directory of the repository. Change…

https://developers.cloudflare.com

ついでにrobot.txtも設置

public/robots.txt

User-agent: *
Allow: /

Sitemap: https://smithlabo.com/sitemap.xml

配置を自分好みに.

上部の画像位置をタイトルの直下に移動.これでサイドバーが上から下に100%となる.

src/layouts/Layout.astro　右のコードを左の位置に移動

  <body>
    <GoogleAnalytics trackingId={PUBLIC_GA_TRACKING_ID} />
    <div class="container">
-      <header>
-        {
-          coverImageURL && (
-            <div class="cover">
-              <img src={coverImageURL} alt="Site cover image" loading="lazy" />
-            </div>
-          )
-        }
-      </header>

            <header>
              <h1>
                <a href={getNavLink('/')}>
                  {
                    database.Icon && database.Icon.Type === 'emoji' ? (
                      <>
                        <span>{database.Icon.Emoji}</span>
                        {database.Title}
                      </>
                    ) : database.Icon && database.Icon.Type === 'external' ? (
                      <>
                        <img src={database.Icon.Url} alt="Site icon image" />
                        {database.Title}
                      </>
                    ) : database.Icon && database.Icon.Type === 'file' ? (
                      <>
                        <img
                          src={customIconURL}
                          class="custom-icon"
                          alt="Site icon image"
                        />
                        {database.Title}
                      </>
                    ) : (
                      database.Title
                    )
                  }
                </a>
              </h1>
+              <header>
+                {
+                  coverImageURL && (
+                    <div class="cover">
+                      <img src={coverImageURL} alt="Site cover image" loading="lazy" />
+                    </div>
+                  )
+                }
+              </header>

              <div class="description">
                {database.Description}
              </div>
            </header>

サイドバーを右側に変更.

src/layouts/Layout.astro

  aside {
-    order: 1;
+    order: 2;

各種ボーダーラインを入れる

サイドバーの表題の下やトップページの各投稿の間などにボーダーラインを入れる.

border-bottom: 1px dashed #c8c2be;

表題の右にタグを表示させる

表示数を増やしたかったので,各投稿はなるべくシンプルに表示させる.

まずはそれぞれのパーツ部分を修正.

src/components/PostTags.astro

src/components/PostTitle.astro

+ <div class="post-tags-div">
<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>
+ </div>

<style>
+  .post-tags-div {
+    margin-left: 12px;
+    display: inline-block;
+    _display: inline;
+  }

<style>
  .post-title {
    margin: 0;
    padding: 0.2rem 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: px;
+    display: inline-block;
+    _display: inline;
  }

次に,表示順を変更.　どのページを実施するかは自分好みで.

以下のようにPostTitleの次にPostTagsが来るように変更.

src/pages/index.astro

src/pages/posts/[slug].astro

src/pages/posts/page/[page].astro

src/pages/posts/tag/[tag].astro

src/pages/posts/tag/[tag]/page/[page].astro

       posts.map((post) => (
          <div class={styles.post} key={post.Slug}>
            <!-- <PostDate post={post} /> -->
            <PostTitle post={post} />
            <PostTitle post={post} /><PostTags post={post} />
            <PostFeaturedImage post={post} />
            <PostExcerpt post={post} />
            <PostTags post={post} />
            <ReadMoreLink post={post} />
          </div>
        ))