『ラゴン・ジュルナル』に来てくださってありがとうございます!

「JavascriptをOn」にしていない端末やブラウザで閲覧しているかたに、このアラートが表示されるようになっております。Javascriptを許可してからおたのしみくださいませ。

Chrome「設定」→「詳細設定」→「プライバシーとセキュリティー」→「サイトの設定」→「Javascript」を許可 iPhone「設定」→「Safari」→「セキュリティ」→「Javascript」をオン iPad「設定」→「Safari」→「詳細」→「Javascript」をオン Android「メニュー」→「設定」→「高度な設定」→「Javascriptを有効」など

データ構造改築にともなって設定ファイルをスリムにしました。

サイト改善記録 #26

サイト

Lagon Journal

なにをどうしたか

データ構造改築にともなって設定ファイルをスリムにしました。

具体的な変更

ラゴンジュルナルの設定ファイルは記事ごとにこのようになっていました。

---
title: "タリーズで初めてグランデサイズを頼んだ、度胸と解放"
subtitle: ""
englishtitle: "Tully's Grande Leads to Where"
description: "タリーズで初めてグランデを注文しました。頼めなかったじぶんから、頼めるじぶんに変わってゆくのがたのしいですね。"
copy: "新しいことに挑んでみると、そのプロセスで度胸が出てくる。"
date: 2020-01-31
slug: tullys-grande
draft: false
categories:  [""]
eyecatch: "/images/post/tullys-grande.jpg"
author: Aisaka, Chihiro
authoricon: aisaka
writer: "逢坂千紘"
posts: "aisaka-chihiro"
image: "アイキャッチ:Mae Mu, 文中:逢坂千紘(iPhoneSEで撮影)"
model: ""
designer: ""
textmaintainer: ""
birthplace: ""
length: "966"
noindex:
---

前回つくったデータベースから「author: Aisaka, Chihiro」と「authoricon: aisaka」が引っ張ってこられるので、記事ごとの設定ファイルとconfig.tomlから一気に削除しました。それにともなって「with .Params.author」と「with .Params.authoricon」で呼び出していたところが空いてしまったので、データベースとひもづけしなおす作業がありました。

考えかたとしては、ラゴンジュルナルでは著者名がユニーク(一意)なので、設定ファイルの著者名(writer: “逢坂千紘”)と、データベース側の「”Name”: “逢坂千紘”」をマッチさせれば、データが拾ってこられるという感じです。

まずはもとのかたち。

<div class="eyecatch-list">
      <a href="{{ .Permalink }}">
         <img class="header-eyecatch-img-list" src="{{ $eyecatch_data.eyecatch.Permalink }}">
         {{ with .Params.authoricon }}
         <div class="author-profile-avatar-list">
            <img src="images/icon/{{ . }}.jpg">
         </div>
         {{ end }}
      </a>
</div>

これを以下のように変えました。

<div class="eyecatch-list">
   <a href="{{ .Permalink }}">
      <img class="header-eyecatch-img-list" src="{{ $eyecatch_data.eyecatch.Permalink }}">
      {{ with .Params.writer }}
      {{ $writername := . }}
      {{ range where $.Site.Data.author "Author.Name" $writername }}
      <div class="author-profile-avatar-list">
         <img src="images/icon/{{ .Author.Iconurl }}.jpg">
      </div>
      {{ end }}
      {{ end }}
   </a>
</div>

まずは「with .Params.writer」で記事の設定ファイルから著者名をとってきます。それをてきとうな変数の「$ writername」に代入して、「where」の条件文でマッチさせます。具体的には「.Site.Data.author」でauthor.jsonと連絡して著者名(Author.Name)をとります。それと記事の設定ファイルを代入した「$ writername」をマッチさせています。

これでデータベースにつながったので、「.Author.Iconurl」でアイコンのパスをとってきています。

同様の考えかたで記事ヘッダーの著者欄も更新しました。

<!--著者欄-->
{{ with .Params.writer }}
{{ $writername := . }}
{{ range where $.Site.Data.author "Author.Name" $writername }}
<div class="author-profile">
   <div class="author-profile-avatar">
         <img src="images/icon/{{ .Author.Iconurl }}.jpg">
   </div>

   <div class="author-profile-meta">
         <a rel=noreferrer href="/posts/{{ .Author.Posturl }}">
            <div class="author-profile-name">{{ .Author.Name }}</div>
         </a>
   </div>
</div>
{{ end }}
{{ end }}

Written by Dev. Team
Copyright LagonGlaner and Author