add language navigator and fix some styles

.github/workflows/site.yml

@@ -30,4 +30,4 @@ jobs:
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./exampleSite/public
-          cname: h.xjj.pub
+          # cname: h.xjj.pub

Makefile

@@ -4,7 +4,6 @@ themeDir=../..
 .PHONY: dev, build, clean
 
 dev:
-	-rm -r exampleSite/resources
 	hugo server -D -s $(source) --themesDir $(themeDir) --disableFastRender
 
 build:
@@ -12,3 +11,4 @@ build:
 
 clean:
 	rm -r $(source)/public
+	rm -r exampleSite/resources

assets/sass/atom.scss

@@ -110,13 +110,15 @@ $screens: (
   }
 }
 
-@include style_with_prefix("");
 @each $screen, $size in $screens {
   @media (max-width: $size) {
     @include style_with_prefix($screen);
   }
 }
 
+@include style_with_prefix("");
+
+
 // border width
 .bw-0 {
   border-width: 0;
@@ -148,3 +150,37 @@ $screens: (
     margin-left: 0.75rem;
   }
 }
+
+
+/* font weight */
+.font-thin {
+  font-weight: 100;
+}
+
+.font-extralight {
+  font-weight: 200;
+}
+
+.font-light {
+  font-weight: 300;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.text-left {
+  text-align: left;
+}

assets/sass/main.scss

@@ -4,38 +4,36 @@
 @import "toc.scss";
 
 :root {
-  --pm: #0fa0ce;
+  --prime: #0fa0ce;
-  --bd: #e1e1e1;
+  --grid: #e1e1e1;
-  --bg: #fff;
+  --back: #fff;
-  --ft: #222;
+  --text: #222;
   --tag: #333;
 
-  --w-mobile: 640px;
+  --mobile-w: 640px;
 
   --global-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 html.dark {
-  --bg: #181818;
+  --back: #181818;
-  --ft: silver;
+  --text: silver;
-  --bd: #555;
+  --grid: #555;
   --tag: #999;
 
-  --ovo-ft: var(--ft);
+  --ovo-ft: var(--text);
-  --ovo-bdr: var(--bd);
+  --ovo-bdr: var(--grid);
-  --ovo-bg: var(--bg);
+  --ovo-bg: var(--back);
   --ovo-bg-hvr: #555;
   --ovo-tag: #30363d;
 }
 
 body {
-  max-width: var(--w-mobile);
-  margin: 3rem auto 0;
   font-family: var(--global-font-family);
   font-size: 16px;
   font-weight: 400;
-  color: var(--ft);
+  color: var(--text);
-  background-color: var(--bg);
+  background-color: var(--back);
   transition-property: background-color, border-color, color;
   transition-duration: 0.5s;
 }
@@ -45,8 +43,6 @@ h2,
 h3,
 h4,
 h5 {
-  font-family: "Noto Serif SC", 'Times New Roman', Times, sans-serif;
-  font-weight: 700;
   line-height: 1.5;
 }
 
@@ -57,7 +53,40 @@ p {
 
 hr {
   border-width: 0;
-  border-top: 1px solid var(--bd);
+  border-top: 1px solid var(--grid);
+}
+
+a {
+  line-height: 1.5;
+  text-decoration: none;
+  color: inherit;
+}
+
+a:hover {
+  color: var(--prime);
+}
+
+main {
+  animation: showup 0.7s;
+}
+
+p a {
+  // font-style: italic;
+  text-decoration: underline;
+}
+
+footer a {
+  font-style: unset;
+  text-decoration: none;
+}
+
+header nav {
+  color: var(--tag);
+}
+
+header ul {
+  padding: 0;
+  list-style: none;
 }
 
 pre,
@@ -70,39 +99,11 @@ code {
 
 .minima-tag,
 p code {
-  background-color: var(--bd);
+  background-color: var(--grid);
   padding: 0.2em 0.4em;
   border-radius: 1px;
 }
 
-a {
-  line-height: 1.5;
-  text-decoration: none;
-  color: inherit;
-}
-
-a:hover {
-  color: var(--pm);
-}
-
-main {
-  animation: showup 0.7s;
-}
-
-p a {
-  font-style: italic;
-  text-decoration: underline;
-}
-
-footer a {
-  font-style: unset;
-  text-decoration: none;
-}
-
-header nav {
-  color: var(--tag);
-}
-
 ::-webkit-scrollbar {
   width: 4px;
   height: 4px;
@@ -140,3 +141,8 @@ nav::-webkit-scrollbar {
 .home-intro {
   line-height: 1.65;
 }
+
+.container {
+  max-width: var(--mobile-w);
+  margin: 0 auto;
+}

assets/sass/markdown.scss

@@ -1,7 +1,7 @@
 .md blockquote {
   background-color: rgba(148, 148, 149, 0.08) ;
   padding: 1px 1rem;
-  border-left: 4px solid var(--pm);
+  border-left: 4px solid var(--prime);
   font-style: italic;
 }
 
@@ -16,12 +16,12 @@
 }
 
 .md table thead {
-  border-top: 2px solid var(--ft);
+  border-top: 2px solid var(--text);
-  border-bottom: 1px solid var(--ft);
+  border-bottom: 1px solid var(--text);
 }
 
 .md table tbody {
-  border-bottom: 2px solid var(--ft);
+  border-bottom: 2px solid var(--text);
 }
 
 .md table th, 

assets/sass/toc.scss

@@ -1,7 +1,7 @@
 details.toc {
   position: sticky;
   top: 0;
-  background-color: var(--bg);
+  background-color: var(--back);
   transition: .5s all;
 }
 
@@ -9,12 +9,12 @@ details.toc summary {
   position: relative;
   width: fit-content;
   cursor: pointer;
-  background-color: var(--bg);
+  background-color: var(--back);
   transition: .5s all;
 }
 
 details.toc div {
-  background-color: var(--bg);
+  background-color: var(--back);
   transition: .5s all;
 }
 
@@ -49,7 +49,7 @@ details.toc-bar {
   & div {
     top: -1em;
     padding-top: 2em;
-    background-color: var(--bg);
+    background-color: var(--back);
   }
 
   & summary {
@@ -59,8 +59,8 @@ details.toc-bar {
     height: var(--toc-bar-ht);
     margin-left: calc(50% - var(--toc-bar-wd) / 2);
     border-radius: calc(var(--toc-bar-ht) / 2);
-    background-color: var(--ft);
+    background-color: var(--text);
-    box-shadow: var(--bg) 0 0 8px 8px;
+    box-shadow: var(--back) 0 0 8px 8px;
   }
 }
 

data/svg.toml

@@ -2,4 +2,4 @@ github = '<svg fill="#63636f" width="18" role="img" viewBox="0 0 24 24" xmlns="h
 linkedin = '<svg fill="#0073b1" width="18" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>'
 twitter = '<svg fill="#1da1f2" width="18" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>'
 rss = '<svg fill="#63636f" t="1626591563876" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1984" width="18" height="16"><path d="M128 768a128 128 0 1 0 0 256 128 128 0 0 0 0-256zM0 368v176c265.104 0 480 214.912 480 480h176c0-362.32-293.696-656-656-656zM0 0v176c468.336 0 848 379.664 848 848h176C1024 458.464 565.536 0 0 0z" p-id="1985"></path></svg>'
-toc = '<svg fill="var(--ft)" width="22" height="22" t="1628036980313" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1020"><path d="M811.6 264.1H378.2c-19.8 0-36-16.2-36-36s16.2-36 36-36h433.5c19.8 0 36 16.2 36 36-0.1 19.8-16.3 36-36.1 36zM811.6 522.1H378.2c-19.8 0-36-16.2-36-36s16.2-36 36-36h433.5c19.8 0 36 16.2 36 36-0.1 19.8-16.3 36-36.1 36zM811.6 780.1H378.2c-19.8 0-36-16.2-36-36s16.2-36 36-36h433.5c19.8 0 36 16.2 36 36-0.1 19.8-16.3 36-36.1 36z" p-id="1021"></path><path d="M210.2 229m-37.9 0a37.9 37.9 0 1 0 75.8 0 37.9 37.9 0 1 0-75.8 0Z" p-id="1022"></path><path d="M210.2 487m-37.9 0a37.9 37.9 0 1 0 75.8 0 37.9 37.9 0 1 0-75.8 0Z" p-id="1023"></path><path d="M210.2 745m-37.9 0a37.9 37.9 0 1 0 75.8 0 37.9 37.9 0 1 0-75.8 0Z" p-id="1024"></path></svg>'
+toc = '<svg fill="var(--text)" width="22" height="22" t="1628036980313" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1020"><path d="M811.6 264.1H378.2c-19.8 0-36-16.2-36-36s16.2-36 36-36h433.5c19.8 0 36 16.2 36 36-0.1 19.8-16.3 36-36.1 36zM811.6 522.1H378.2c-19.8 0-36-16.2-36-36s16.2-36 36-36h433.5c19.8 0 36 16.2 36 36-0.1 19.8-16.3 36-36.1 36zM811.6 780.1H378.2c-19.8 0-36-16.2-36-36s16.2-36 36-36h433.5c19.8 0 36 16.2 36 36-0.1 19.8-16.3 36-36.1 36z" p-id="1021"></path><path d="M210.2 229m-37.9 0a37.9 37.9 0 1 0 75.8 0 37.9 37.9 0 1 0-75.8 0Z" p-id="1022"></path><path d="M210.2 487m-37.9 0a37.9 37.9 0 1 0 75.8 0 37.9 37.9 0 1 0-75.8 0Z" p-id="1023"></path><path d="M210.2 745m-37.9 0a37.9 37.9 0 1 0 75.8 0 37.9 37.9 0 1 0-75.8 0Z" p-id="1024"></path></svg>'

exampleSite/config.toml

@@ -1,7 +1,7 @@
-baseURL = "http://h.xjj.pub"
+baseURL = "https://mivinci.github.io/hugo-theme-minima"
 languageCode = "en-us"
 title = "Hi Folks"
-copyright = "© XJJ 2022"
+copyright = "© 2022 Mivinci"
 googleAnalytics = ""
 
 # paginate decides the number of the newest posts
@@ -15,7 +15,7 @@ theme = "hugo-theme-minima"
 
 # Author has some of your information to be shown on the home page.
 [author]
-name = "XJJ"
+name = "Mivinci"
 slogon = "A tech lover from Earth 🌍"
 description = "This is Minima, a clean and minimal Hugo theme porting from the [Hexo Minima](https://github.com/adisaktijrs/hexo-theme-minima). Except for everything from Hexo Minima like dark/light mode, Hugo Minima supports KaTeX, Mermaid, comments and some taxonomies like categories, series and tags. I created this using SASS, VanillaJS and the most importantly, Hugo. 😁"
 
@@ -43,7 +43,7 @@ selectable = true
 # on texts in some special positions like on titles
 globalFontFamily = ""
 # If set true, all your posts will use the chosen comment plugin
-# except those with a `comment: false` in their front-matter
+# except those with a `comment: false` specified in their front-matter
 commentOnAllPosts = true
 # toc decides the shape of the toc button. e.g. default, lines, bar
 toc = "lines"
@@ -94,7 +94,7 @@ url = "https://linkedin/in/leonard-mivinci-63895317a"
 svg = ""
 [[params.social]]
 name = "twitter"
-url = "https://twitter.com/Leonard14733745"
+url = "https://twitter.com/realmivinci"
 svg = ""
 [[params.social]]
 name = "rss"
@@ -106,7 +106,7 @@ svg = ""
 # providers have to make their 'Access-Control-Allow-Origin' contain
 # your domain, otherwise the feeds cannot be fetched.
 [params.friends]
-feeds = ["https://h.xjj.pub/index.xml"]
+feeds = []
 topk = 3
 title = "Friends' Posts"
 proxy = "" # reserved
@@ -119,8 +119,8 @@ name = "Home"
 url = "/"
 weight = 1
 [[menu.main]]
-name = "Categories"
+name = "Tags"
-url = "/categories"
+url = "/tags"
 weight = 2
 [[menu.main]]
 name = "Series"
@@ -149,3 +149,12 @@ series = "series"
 [markup.highlight]
 lineNos = true
 noClasses = false
+
+
+defaultContentLanguage = "en"
+[languages.en]
+languageName = "EN"
+weight = 1
+[languages.zh]
+languageName = "ZH"
+weight = 2

exampleSite/content/instruction.md

@@ -1,5 +1,5 @@
 ---
-author: Hugo Authors
+author: Mivinci
 title: Instruction
 date: 2021-07-19T10:52:59+08:00
 description: A Clean and minimal Hugo theme porting from the [Hexo Minima](https://github.com/adisaktijrs/hexo-theme-minima). [Click me](https://h.xjj.pub/) to take a look.

exampleSite/content/instruction.zh.md

@@ -0,0 +1,10 @@
+---
+author: Hugo Authors
+title: 使用说明
+date: 2021-07-19T10:52:59+08:00
+description: 
+math: true
+comment: true
+---
+
+你好

layouts/_default/baseof.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 {{ partial "head.html" . }}
+
 <body class="sm:mx-5 sm:my-0">
   {{ partial "header.html" . }}
 
@@ -8,4 +9,5 @@
 
   {{ partial "footer.html" . }}
 </body>
+
 </html>

layouts/_default/list.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-<main>
+<main class="container">
 	{{ if isset .Data "Term" }}
 	<h2 class="my-8">{{ .Data.Singular | title }} - "{{ .Data.Term }}"</h2>
 	{{ else }}

layouts/_default/single.html

@@ -1,4 +1,5 @@
 {{ define "main" }}
+<div class="container">
   {{ if .Params.toc }}
   {{ partial "toc.html" . }}
   {{ end }}
@@ -49,4 +50,5 @@
   {{ partial "utterances.html" . }}
   {{ end }}
   {{ end }}
+</div>
 {{ end }}

layouts/_default/terms.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-<main>
+<main class="container">
   <h2>{{ .Title }}</h2>
   <nav class="flex flex-col">
     {{ $data := .Data }}

layouts/index.html

@@ -1,12 +1,12 @@
 {{ define "main" }}
-	<main>
+<main class="container">
   <h2 class="mt-8 mb-1">{{ .Site.Params.iam }} {{ .Site.Author.name }}</h2>
   <p class="my-0">{{ .Site.Author.slogon }}</p>
   <p class="my-3 home-intro">{{ .Site.Author.description | markdownify | safeHTML }}</p>
   {{ if eq .Paginator.PageNumber 1 }}
-		<h3 class="my-6">{{ .Site.Params.recent }}</h3>
+  <h3 class="mt-6 mb-4">{{ .Site.Params.recent }}</h3>
   {{ else }}
-		<h3 class="my-6">{{ .Site.Params.older }}</h3>
+  <h3 class="mt-6 mb-4">{{ .Site.Params.older }}</h3>
   {{ end }}
   <div>
     {{ $paginator := .Paginate (where .Site.RegularPages "Kind" "page") }}

layouts/partials/footer.html

@@ -1,4 +1,5 @@
-<footer class="mt-8 flex sm:flex-col-reverse justify-between items-center">
+<footer class="mt-8">
+  <div class="container mt-8 flex sm:flex-col-reverse justify-between items-center">
     <p class="mt-0 text-sm">
       {{ .Site.Copyright }} |
       <a href="https://gohugo.io" target="_blank" rel="noopener noreferrer">Hugo</a> on
@@ -15,4 +16,5 @@
         </a>
       {{ end }}
     </p>
+  </div>
 </footer>

layouts/partials/head.html

@@ -15,18 +15,18 @@
   </title>
   {{ $favicon := "favicon.ico" }}
   <link rel="shortcut icon" href="{{ $favicon | relURL }}" type="image/x-icon" />
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap"
-    rel="stylesheet">
   {{ $hash := now.Unix }}
   {{ $options := (dict "targetPath" (printf `minima.%d.css` $hash) "outputStyle" "compressed" "enableSourceMap" true) }}
   {{ $style := resources.Get "sass/main.scss" | resources.ToCSS $options }}
   <link rel="stylesheet" href="{{ $style.RelPermalink }}">
-
   {{ $options = (dict "targetPath" (printf `minima.%d.js` $hash) "minify" true) }}
   {{ $js := resources.Get "js/main.js" | js.Build $options | resources.ExecuteAsTemplate (printf `minima.%d.js` $hash) . }}
   <script defer type="text/javascript" src="{{ $js.RelPermalink }}"></script>
+  {{ if .IsTranslated }}
+	{{ range .Translations }}
+	<link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}" title="{{ .Language.LanguageName }}">
+	{{ end }}
+{{ end }}
 </head>
 <script>
   // We will default to system theme color if no choice was made.

layouts/partials/header.html

@@ -1,14 +1,23 @@
-<header class="flex justify-between items-center mb-6 sm:my-3">
+<header class="sm:my-3 my-6">
+  <div class="container">
+    <nav class="flex justify-between items-center">
       <div class="flex items-center">
         {{ if .Site.Params.brand }}
         <div class="mr-3 text-3xl"><a href="/">{{ .Site.Params.brand }}</a></div>
         {{ end }}
-    <div id="theme-switcher" class="text-4xl cursor-pointer">{{ index .Site.Params.switch 1 }}</div>
+        <div id="theme-switcher" class="text-left text-4xl cursor-pointer">{{ index .Site.Params.switch 1 }}</div>
       </div>
-  <nav class="flex items-center
+      <ul class="flex items-center font-medium
         whitespace-nowrap overflow-x-auto overflow-y-hidden">
         {{ range .Site.Menus.main }}
-    <a class="ml-5" href="{{ .URL | absLangURL }}">{{ .Name }}</a>
+        <li class="mx-2"><a href="{{ .URL | absLangURL }}">{{ .Name }}</a></li>
         {{ end }}
+      </ul>
+      <ul class="flex item-center text-sm font-bold">
+        {{ range $.Site.Home.AllTranslations }}
+        <li class="ml-3"><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
+        {{ end}}
+      </ul>
     </nav>
+  </div>
 </header>

layouts/partials/list.html

@@ -1,10 +1,10 @@
-<div class="flex justify-between sm:flex-col-reverse my-3 sm:mb-6 sm:mt-3">
+<div class="flex justify-between sm:flex-col my-3 sm:mb-4 sm:mt-3">
 {{ if .Page.Params.link }}
 <a class="" href="{{ .Page.Params.link }}">{{ .Title }}</a>
 {{ else }}
 <a class="" href="{{ .RelPermalink }}">{{ .Title }}</a>
 {{ end }}
 {{ if .Site.Params.displayDate }}
-  <div class="sm:mb-1 sm:text-xs">{{ dateFormat .Site.Params.timeformat .Date }}</div>
+  <div class="sm:mt-1 sm:text-xs">{{ dateFormat .Site.Params.timeformat .Date }}</div>
 {{ end }}
 </div>

layouts/partials/paginator.html

@@ -1,6 +1,6 @@
 {{ $page := $.Paginator }}
 {{ if gt $page.TotalPages 1 }}
-<div class="my-8 flex justify-between">
+<div class="mt-6 flex justify-between font-semibold">
   {{ if $page.HasPrev }}
   <a href="{{ $page.Prev.URL }}">← Newer</a>
   {{ end }}

theme.toml

@@ -11,8 +11,8 @@ features = ["Dark mode", "KaTeX", "Mermaid", "VSCode-style code highlighting", "
 min_version = "0.41.0"
 
 [author]
-  name = "XJJ"
+name = "Mivinci"
-  homepage = "https://xjj.pub"
+homepage = "https://mivinci.github.io/hugo-theme-minima"
 
 # If porting an existing theme
 [original]