テンプレートの変更

- DOCTYPEをXHTMLからHTMLに変更 - ヘッダーとフッターのアイコンとリンクを調整 - ページの一覧を共通化 - コードブロックのスタイルを移動 - "container"を"header"に統合
2022-05-29 15:24:23 +09:00 · 2022-05-29 15:24:23 +09:00 · 639f2932ca
--- a/1
+++ b/1
@ -19,7 +19,6 @@ blog/**/*.md:
 	ext .html
 	directorify
 	template tag
-	markdown chroma=emacs
 	template page

 blog.atom: blog/**/*.md
--- a/site.tmpl
+++ b/site.tmpl
@ -1,70 +1,75 @@
-{{ define "header" }}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
+{{ define "header" }}<!DOCTYPE html>
+<html lang="ja">
 <head>
-  <meta content="text/html; charset=utf-8" http-equiv="content-type" />
+  <meta charset="utf-8" />
  <meta name="author" content="{{ html .Site.Other.Author }}" />
  <meta name="description" content="デジタル自主のロリ神様" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="alternate" type="application/atom+xml" title="{{ html .Site.Other.Title }} feed" href="/blog.atom" />
  <title>{{ .Site.Other.Title }}{{ if .Title }}: {{ .Title }}{{ end }}</title>
  <link rel="stylesheet" type="text/css" href="/static/style.css" />
 </head>
 <body>
-  <div class="jswarning" id="jswarning">注意：JavsScriptはONです。安全・安心の為、JavaScriptをOFFにしてお願い致します。</div>
-  <script type="text/javascript">
-    document.getElementById('jswarning').style.display = 'block';
-  </script>
-{{ end }}
-
-{{ define "container" }}  <div class="container">
+  <div id="jswarning">JavaScriptが有効です。安全・安心の為、JavaScriptを無効にしてください。</div>
+  <script>document.getElementById('jswarning').style.display = 'block';</script>
+  <div class="container">
    <img src="/static/Eqjk_WgVQAE2psn-new.jpeg" class="header-img" alt="ヘッダー" />
 {{ end }}

-{{ define "footer" }}
-    <hr />
-    <a href="https://github.com/piranha/gostatic">gostatic</a>で創作しました。<a href="https://git.076.ne.jp/TechnicalSuwako/StaticSuwako"><img src="/static/git.png" alt="Git" /></a>
-    <a href="https://validator.w3.org/check?uri=https%3A%2F%2Ftechnicalsuwako.moe%2F">
-      <img src="/static/valid-xhtml11.png" alt="Valid XHTML 1.1" height="31" width="88" />
-    </a>
-    <a href="https://jigsaw.w3.org/css-validator/validator?lang=ja&amp;profile=none&amp;uri=https%3A%2F%2Ftechnicalsuwako.moe%2F&amp;usermedium=all&amp;vextwarning=&amp;warning=1">
-      <img style="border:0;width:88px;height:31px" src="/static/valid-css.png" alt="正当なCSSです!" />
-    </a>
-    <a href="https://anybrowser.org/campaign/images/button_enhanced.gif">
-      <img style="border:0;width:88px;height:31px" src="/static/any1.gif" alt="どっちでもブラウザで表示出来ます！" />
-    </a>
-    <a href="http://www.catb.org/hacker-emblem/">
-      <img src="/static/hacker.png" alt="hacker emblem" />
-    </a>
+{{ define "footer" }}    <hr />
+    <a href="https://github.com/piranha/gostatic">gostatic</a>で創作しました。
+    <a href="https://git.076.ne.jp/TechnicalSuwako/StaticSuwako">ページの<span class="icon git-icon">Git</span>リポジトリ</a>
+    <div class="emblems">
+      <a href="https://validator.w3.org/check?uri=https%3A%2F%2Ftechnicalsuwako.moe%2F">
+        <img src="/static/valid-xhtml11.png" alt="Valid XHTML 1.1" height="31" width="88" />
+      </a>
+      <a href="https://jigsaw.w3.org/css-validator/validator?lang=ja&amp;profile=none&amp;uri=https%3A%2F%2Ftechnicalsuwako.moe%2F&amp;usermedium=all&amp;vextwarning=&amp;warning=1">
+        <img style="border:0;width:88px;height:31px" src="/static/valid-css.png" alt="正当なCSSです！" />
+      </a>
+      <a href="https://anybrowser.org/campaign/images/button_enhanced.gif">
+        <img style="border:0;width:88px;height:31px" src="/static/any1.gif" alt="どのブラウザでも表示出来ます！" />
+      </a>
+      <a href="http://www.catb.org/hacker-emblem/">
+        <img src="/static/hacker.png" alt="hacker emblem" />
+      </a>
+    </div>
  </div>
 </body>
 </html>
 {{ end }}

-{{define "date"}}{{ .Format "2006年01月02日" }}{{end}}
-
-{{ define "page" }}{{ template "header" . }}{{ template "container" . }}    <p>
-      <a href="/">トップ</a> |
-      <a href="/about/">自己紹介</a> |
-      <a href="/contact/">連絡先</a> |
-      <a href="/skill/">スキル</a> |
-      <a href="/portfolio/">ポートフォリオ</a> |
-      <a href="/service/">サービス</a> |
-      <a href="/webring/">リング</a> |
+{{ define "page" }}{{ template "header" . }}    <div class="header-links">
+      <a href="/">トップ</a>
+      <a href="/about/">自己紹介</a>
+      <a href="/contact/">連絡先</a>
+      <a href="/skill/">スキル</a>
+      <a href="/portfolio/">ポートフォリオ</a>
+      <a href="/service/">サービス</a>
+      <a href="/webring/">リング</a>
      <a href="/i2pabout/">I2Pについて</a>
-    </p>
-    <p>
-      <a href="/blog.atom"><img src="/static/rssa.png" alt="RSS" />で登録</a> |
-      <a href="https://social.076.ne.jp/TechnicalSuwako"><img src="/static/mastodon.png" alt="Mastodon" />/<img src="/static/pleroma.png" alt="Pleroma" />でフォロー</a> |
-      <a href="https://video.076.ne.jp/c/technicalsuwako"><img src="/static/peertube.png" alt="PeerTube" />で登録</a> |
-      <a href="https://technicalsuwako.moe/"><img src="/static/clearnet.png" alt="一般ネット" /></a> |
-      <a href="http://6qiatzlijtqo6giwvuhex5zgg3czzwrq5g6yick3stnn4xekw26zf7qd.onion/"><img src="/static/tor.png" alt="Tor" /></a> |
-      <a href="http://technicalsuwako.i2p/"><img src="/static/i2p.png" alt="I2P" /></a>
-    </p>
-    <p>
+    </div>
+    <div class="header-links">
+      <a href="/blog.atom"><span class="icon atom-icon">Atom</span>で登録</a>
+      <a href="https://social.076.ne.jp/TechnicalSuwako"><span class="icon mastodon-icon">Mastodon</span> / <span class="icon pleroma-icon">Pleroma</span>でフォロー</a>
+      <a href="https://video.076.ne.jp/c/technicalsuwako"><span class="icon peertube-icon">PeerTube</span>で登録</a>
+      <a href="https://technicalsuwako.moe/"><span class="icon clearnet-icon">一般ネット</span></a>
+      <a href="http://6qiatzlijtqo6giwvuhex5zgg3czzwrq5g6yick3stnn4xekw26zf7qd.onion/"><span class="icon tor-icon">Tor</span></a>
+      <a href="http://technicalsuwako.i2p/"><span class="icon i2p-icon">I2P</span></a>
+    </div>
+    <div>
      支援♡：
-      <a href="/support/monero/"><img src="/static/monero.png" alt="Monero" /></a>
-    </p>
+      <a href="/support/monero/"><span class="icon monero-icon">Monero</span></a>
+    </div>
    <hr />
-    {{ .Content }}    {{ template "footer" . }}{{ end }}
+{{ replace "<code>" "<code lang=\"\">" ( replace "<pre style=\"background-color:#f8f8f8;overflow-x: auto\">" "<pre>" .Content ) }}{{ template "footer" . }}{{ end }}
+
+{{ define "date" }}{{ .Format "2006年01月02日" }}{{ end }}
+
+{{ define "pagelist" }}{{ range . }}    <div class="mb5{{ if .Date.Year | changed "year" }} mt15{{ end }}">
+      <div>{{ template "date" .Date }}</div>
+      <div><a href="/{{ .Url }}">{{ .Title }}</a></div>
+    </div>
+{{ end }}{{ end }}

 {{ define "post" }}<div class="header">
      <h1>{{ .Title }}</h1>
@ -72,17 +77,14 @@
      <div class="info">
        {{ .Other.Author }}、
        {{ template "date" .Date }} &mdash;
-        {{ range $i, $t := .Tags }}{{if $i}},{{end}}
+        {{ range $i, $t := .Tags }}{{ if $i }},{{ end }}
        <a href="/tags/{{ $t }}/">{{ $t }}</a>{{ end }}
      </div>
    </div>
    <hr />
    <div class="section">
-      {{ .Content }}    </div>{{ end }}
+{{ .Content }}    </div>
+{{ end }}

-{{define "tag"}}
-# {{ .Title }} でタグ付いているページ
-{{ range .Site.Pages.WithTag .Title }}
- [{{ .Title }}](../../{{ .Url }})
-{{ end }}
-{{ end }}
+{{ define "tag" }}    <h1>{{ .Title }} のタグが付いているページ</h1>
+{{ template "pagelist" .Site.Pages.WithTag .Title }}{{ end }}
--- a/src/index.html
+++ b/src/index.html
@ -1,9 +1,4 @@
 title: トップページ
 ----
-<p class="lead">
-      ようこそ、あたしのウェブページへ！諏訪子です。
-    </p>{{ range (((.Site.Pages.Children "blog/").Where "Url" "/$").WhereNot "Draft" "true") }}
-    <div class="mb5 {{ if .Date.Year | changed "year" }}mt15{{ end }}">
-      {{ template "date" .Date }}
-      <a href="{{ $.Rel .Url }}">{{ .Title }}</a>
-    </div>{{ end }}
+    <p class="lead">ようこそ、あたしのウェブページへ！諏訪子です。</p>
+{{ template "pagelist" (((.Site.Pages.Children "blog/").Where "Url" "/$").WhereNot "Draft" "true") }}
--- a/src/static/style.css
+++ b/src/static/style.css
@ -26,6 +26,7 @@ td, th {
  padding: 10px;
  border: 4px #dde22d ridge;
  margin: 0;
+  text-align: center;
 }

 .container {
@ -47,7 +48,6 @@ td, th {
 .header-img {
  display: block;
  max-width: 100%;
-  margin: 0 auto;
 }

 a {
@ -56,13 +56,18 @@ a {
 }

 pre {
-  background-color: #4b364b !important;
+  background-color: #4b364b;
  padding: 8px;
  border: 1px #ff61ff dashed;
+  overflow-x: auto;
+}
+
+pre, code {
+  font: 1rem monospace, monospace;
 }

 img {
-  max-width: 600px;
+  max-width: min(600px, 100%);
  max-height: 500px;
 }

@ -95,3 +100,78 @@ h1 {
 .danger {
  background-color: #da4453;
 }
+
+.mb5 {
+  margin-block: 0.5em;
+}
+
+.mb5 > div {
+  display: inline-block;
+}
+
+.header-links {
+  margin-block: 0.25em;
+}
+
+.header-links > a {
+  border-left: 1px solid #fcfcfc;
+  display: inline-block;
+  padding-left: 0.25em;
+}
+
+.header-links > a:first-of-type {
+  border-left: none;
+  padding-left: 0;
+}
+
+.icon::before {
+  content: '';
+  height: 1em;
+  width: 1em;
+  display: inline-block;
+  background-size: auto 1em;
+  background-repeat: no-repeat;
+  vertical-align: sub;
+  padding-right: 0.25em;
+}
+
+.atom-icon::before {
+  background-image: url('/static/rssa.png');
+}
+
+.mastodon-icon::before {
+  background-image: url('/static/mastodon.png');
+}
+
+.pleroma-icon::before {
+  background-image: url('/static/pleroma.png');
+  width: 0.65em;
+}
+
+.peertube-icon::before {
+  background-image: url('/static/peertube.png');
+}
+
+.clearnet-icon::before {
+  background-image: url('/static/clearnet.png');
+}
+
+.tor-icon::before {
+  background-image: url('/static/tor.png');
+}
+
+.i2p-icon::before {
+  background-image: url('/static/i2p.png');
+}
+
+.monero-icon::before {
+  background-image: url('/static/monero.png');
+}
+
+.git-icon:before {
+  background-image: url('/static/git.png');
+}
+
+.emblems {
+  float: right;
+}