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

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

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

プロフィールページのデータ構造を改築しました。

サイト改善記録 #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/chihiro_aisaka">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": "chihiro_aisaka",
            "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" . }}

かなりいい感じになりました。読者のかたにはあまり影響ありませんが、データを持つ側でかなり整理できました、という話でした。

Written by Dev. Team
Copyright LagonGlaner and Author