cover image

ページタイトル下にページの作成日時・更新日時を表示できるようになりました。

全ページで日時表示ができるようになりました。
 
タイトル下に以下のHTMLを追加しました。
<div class="pageDatetime">
  <p class="pageDatetime__created">
    <span class="pageDatetime__created__day">2020/7/1</span>
    <span class="pageDatetime__created__time"> 1:45</span>
  </p>
  <p class="pageDatetime__edited">
    <span class="pageDatetime__edited__day">2020/10/29</span>
    <span class="pageDatetime__edited__time"> 11:49</span>
  </p>
</div>
HTML
 
既存サイトへ影響が起きないように標準ではCSSで非表示にしてありますので、表示したい場合にはCSS編集で以下を追加してください。
.pageDatetime {
  display: flex;
}
CSS
 
以下のように記事の作成日時、更新日時 の順序で表示されます。
notion image
 
 
表示方法などをカスタマイズする方法を順番に記述していきます。
今後実際にCSSを書かなくとも管理画面でこのあたりのカスタマイズはできるようにする予定はありますが、今はまだそういった機能がないので、申し訳ありませんが今はCSSでのカスタマイズをお願いします。
 
もし指定方法・カスタマイズ方法がよくわからない場合にはお気軽にDiscordやメール、TwitterDMなどでも可能ですので、運営にお問い合わせください!
こちらにお問い合わせ先を記載しています。
 

作成日時だけを表示したい場合

以下をCSSへ追加して、更新日時を非表示にしてください。
.pageDatetime {
  display: flex;
}
.pageDatetime__edited {
  display: none;
}
CSS
 

日付だけを表示したい場合

以下をCSSへ追加して、時間を非表示にしてください。
.pageDatetime {
  display: flex;
}
.pageDatetime__created__time {
  display: none;
}
.pageDatetime__edited__time {
  display: none;
}
CSS
 

日付に絵文字を追加したい場合

次のCSSを追加にすると次の様な表示を実現できます。
 
notion image
.pageDatetime {
  display: flex;
}
.pageDatetime__created::before {
  content: "📅";
}
.pageDatetime__created__time {
  display: none;
}
.pageDatetime__edited {
  display: none;
}
CSS
 
以上が更新内容と、表示でのカスタマイズ方法になります。
 
次に表示非表示を切り替えたい場合の方法を記述していきます。

表示非表示を切り替えたい場合の処理

CSSを指定するために、ページの親要素には次のようなクラスを追加してあります。
 
  • トップページ : .page-top
  • ページIDが1234567890abcdefg の場合 : .page-1234567890abcdefg
 
  • トップページ > ページIDが1234567890abcdefg の場合のページ : .pageMap-top-1234567890abcdefg
  • トップページ > ページIDが1234567890abcdefg の記事 > ページID hijklnm123456 の記事の場合: .pageMap-top-1234567890abcdefg-hijklnm123456
  • トップページ > パーマリンクblog のさらに下の記事 hijklnm123456 の場合: .pageMap-top-blog-hijklnm123456
 

トップページでは非表示したい場合(トップページ以外で表示したい場合)

.pageDatetime {
  display: flex;
}
.page-top .pageDatetime {
  display: none;
}
CSS
 

特定ページ配下のページでのみ表示したい場合

「トップページ > ブログ記事一覧 > ブログ記事」
のような構成の際に、ブログ記事のみで表示したい場合は次のようなCSSを指定してください。
 
  • ブログ記事一覧のページIDが 1234567890abcdefg の場合
.page[class*="pageMap-top-1234567890abcdefg-"] .pageDatetime {
  display: flex;
}
CSS
 
  • ブログ記事一覧のパーマリンク設定をしており指定URLが blog の場合
.page[class*="pageMap-top-blog-"] .pageDatetime {
  display: flex;
}
CSS
 
以上は日付の表示及びカスタマイズ方法になります。
今後実際にCSSを書かなくとも管理画面でこのあたりのカスタマイズはできるようにする予定はありますが、今のところはこちらのCSSを追加して表示をお願いします。
 
もし指定方法・カスタマイズ方法がよくわからない場合にはお気軽にDiscordやメール、TwitterDMなどでも可能ですので、運営にお問い合わせください!
こちらにお問い合わせ先を記載しています。
 
今後もAnotionをよろしくお願いします。