
プロフィールページのデータ構造を改築しました。
サイト改善記録 #25
サイト
Lagon Journal
なにをどうしたか
プロフィールページのデータ構造を改築しました。
具体的な変更
もともとはこのようなかたちにしていました。
<nav class="toc">
<ul>
<li>
<a href="/litterateurs/#lv1-01">
逢坂千紘
</a>
</li>
</ul>
</nav>
<!--あいさかちひろ-->
<div id="lv1-01" class="litterateurs team">
<a href="https://lagon-journal.ink/posts/aisaka-chihiro/">
<div class="litterateurs-image margin-top-minus10">
<img src="/images/icon/aisaka.jpg">
</div>
</a>
<h2 class="litterateurs-name mincho">逢坂千紘</h2>
<span class="litterateurs-name-en opensans">
Aisaka, Chihiro
</span>
<span class="litterateurs-bio">
ラゴンジュルナルのオーガナイザー。最近読んだ本は、上妻世海『制作へ』。好きなことばは「懶惰」。つかってるスマホは「iPhoneSE」。収入で言えばエンジニアと校正者ですが、本人は作家のつもりです。ことばのジュークボックスになりたいです。
</span>
<span class="litterateurs-main-posts opensans">Editor's Select</span>
{{ with .Site.GetPage "/meet-vartist" }}
<a class="litterateurs-post-link" href="{{ .Permalink }}">
『{{ .Title }}』
</a>
{{ end }}
{{ with .Site.GetPage "/cherish-freelance" }}
<a class="litterateurs-post-link" href="{{ .Permalink }}">
『{{ .Title }}』
</a>
{{ end }}
{{ with .Site.GetPage "/jisui-costs" }}
<a class="litterateurs-post-link" href="{{ .Permalink }}">
『{{ .Title }}』
</a>
{{ end }}
<div class="button-flex">
<a class="litterateurs-twitter opensans" href="https://twitter.com/aisaka_phil">Twitter</a>
<a class="anchor-button" href="https://lagon-journal.ink/posts/aisaka-chihiro/">
<div class="opensans">Aisaka's Posts</div>
</a>
</div>
<span class="icon-by">YUtuKI</span>
</div>
人数が増えてきてファイルが煩雑になってきたので、データと構造を分けて記述することにしました。
まずはデータ。
[
{
"Author": {
"ID": "lv1-01",
"Name": "逢坂千紘",
"Team": "team",
"Ruby": "あいさかちひろ",
"Englishname": "Aisaka, Chihiro",
"Englishfirst": "Aisaka",
"IconUrl": "aisaka",
"Iconby": "YUtuKI",
"Profile": "ラゴンジュルナルのオーガナイザー。最近読んだ本は、上妻世海『制作へ』。好きなことばは「懶惰」。つかってるスマホは「iPhoneSE」。収入で言えばエンジニアと校正者ですが、本人は作家のつもりです。ことばのジュークボックスになりたいです。",
"SNS": {
"Twitter": "aisaka_phil",
"Instagram": "",
"Note": ""
},
"Homepage": {
"Class": "",
"Pageurl": "",
"Pagename": "",
"Logourl": ""
},
"Posturl": "aisaka-chihiro",
"Favoposturl1": "blog/such-days/meet-vartist",
"Favoposttitle1": "somunia『Dreamin' Tea time』『backword』 - 初めてVアーティストの楽曲を購入した",
"Favoposturl2": "one-shot-essay/cherish-freelance",
"Favoposttitle2": "フリーランスは労働観や人生観のグラデーション",
"Favoposturl3": "blog/in-thoughts/jisui-costs",
"Favoposttitle3": "自炊というものの射程を追って - サッポロ一番みそラーメンに食指が動くかどうかで一喜一憂したい"
}
}
]
そして構造はこちら。まずは目次の部分。
<nav class="toc">
{{ range .Site.Data.author }}
<ul>
<li>
<a href="/litterateurs/#{{ .Author.ID }}">
{{ .Author.Name }}
</a>
</li>
</ul>
{{ end }}
</nav>
そしてプロフィールリストの部分。
{{ range .Site.Data.author }}
<div id="{{ .Author.ID }}" class="litterateurs {{ with .Author.Team }}{{ . }}{{ end }}">
<a href="https://lagon-journal.ink/posts/{{ .Author.Posturl }}/">
<div class="litterateurs-image margin-top-minus10">
<img src="/images/icon/{{ .Author.IconUrl }}.jpg">
</div>
</a>
<h2 class="litterateurs-name mincho">{{ .Author.Name }}</h2>
{{ with .Author.Englishname }}
<span class="litterateurs-name-en opensans">
{{ . }}
</span>
{{ end }}
<span class="litterateurs-bio">
{{ .Author.Profile }}
</span>
<span class="litterateurs-main-posts opensans">Editor's Select</span>
{{ with .Author.Favoposturl1 }}
<a class="litterateurs-post-link" href="{{ . }}">
{{ end }}
{{ with .Author.Favoposttitle1 }}
『{{ .}}』
</a>
{{ end }}
{{ with .Author.Favoposturl2 }}
<a class="litterateurs-post-link" href="{{ . }}">
{{ end }}
{{ with .Author.Favoposttitle2 }}
『{{ .}}』
</a>
{{ end }}
{{ with .Author.Favoposturl3 }}
<a class="litterateurs-post-link" href="{{ . }}">
{{ end }}
{{ with .Author.Favoposttitle3 }}
『{{ .}}』
</a>
{{ end }}
<div class="button-flex">
{{ with .Author.Homepage.Flex }}
<div class="litterateurs-url-flex">
{{ end }}
{{ with .Author.SNS.Twitter }}
<a class="litterateurs-twitter opensans" href="https://twitter.com/{{ . }}">Twitter</a>
{{ else }}
<span class="background-gray litterateurs-twitter"></span>
{{ end }}
{{ with .Author.SNS.Note }}
<a class="litterateurs-note opensans" href="https://note.com/{{ . }}">note</a>
{{ end }}
{{ with .Author.SNS.Instagram }}
<a class="litterateurs-instagram opensans" href="https://www.instagram.com/{{ . }}">Instagram</a>
{{ end }}
{{ with .Author.Homepage }}
<a class="litterateurs-homepage {{ .Class }} opensans" href="{{ .Pageurl }}">
{{ with .Logourl }}<img src="images/icon/{{ . }}.png">
{{ else }}
<span>{{ .Pagename }}</span>
{{ end }}
</a>
{{ end }}
{{ with .Author.Homepage.Flex }}
</div>
{{ end }}
<a class="anchor-button" href="https://lagon-journal.ink/posts/{{ .Author.Posturl }}">
<div class="opensans">{{ .Author.Englishfirst }}'s Posts</div>
</a>
</div>
{{ with .Author.Iconby }}
<span class="icon-by">{{ . }}</span>
{{ end }}
</div>
{{ end }}
一部ちょっと下手くそな構造になっていますが、もとにあった表示を優先したぶぶんで無理している感じです。
本丸はこちら。すっきりしました。
<!--プロフィール目次-->
{{ partial "db/profile_index" . }}
<!--プロフィール-->
{{ partial "db/profile" . }}
かなりいい感じになりました。読者のかたにはあまり影響ありませんが、データを持つ側でかなり整理できました、という話でした。