从零构建Hugo主题 - III

<div class="darkmode-toggle flex flex-none ml-2">
  <label class="flex items-center px-3 cursor-pointer rounded-full bg-gray-100 dark:bg-gray-600">
    <input type="checkbox" class="sr-only peer">
    <div class="group flex flex-row gap-1 justify-center h-8 px-1 rounded-full bg-white dark:bg-gray-700">
      <i class="h-6 w-6 flex-none rounded-full bg-yellow-400 place-self-center peer-checked:group-[]:invisible">
        {{ partial "icon" "brightness-down" }}
      </i>
      <i class="h-6 w-6 flex-none rounded-full place-self-center invisible peer-checked:group-[]:visible">
        {{ partial "icon" "moon-stars" }}
      </i>
    </div>
  </label>
</div>

const themeToggle = document.querySelector('.darkmode-toggle input');

themeToggle.addEventListener('change', function () {
  if (this.checked) {
    localStorage.theme = dark;
    document.documentElement.classList.add(dark);
  } else {
    localStorage.theme = light;
    document.documentElement.classList.remove(dark);
  }
});

index ad2e93f..e5b7d76 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -15,9 +15,9 @@

   <div class="flex flex-col w-full max-w-4xl lg:max-w-5xl relative">
     <div class="flex flex-row">
-      <section class="flex flex-col w-2/3">
+      <section class="flex flex-col w-full md:w-2/3">
         {{ range (.Paginate $pages).Pages }}
-          <article class="flex flex-col gap-y-3 p-6 mt-6 rounded-lg shadow-md bg-white dark:bg-gray-700">
+          <article class="flex flex-col gap-y-3 p-6 mt-6 mx-2 md:mx-0 rounded-lg shadow-md bg-white dark:bg-gray-700">
             <h2 class="text-4xl font-semibold text-slate-800 dark:text-slate-200">
               <a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
             </h2>
@@ -40,7 +40,7 @@
           </article>
         {{ end }}
       </section>
-      <aside class="flex flex-col w-1/3 mx-3 top-0 sticky self-start">
+      <aside class="hidden md:flex flex-col md:w-1/3 mx-3 top-0 sticky self-start">
         {{ partial "sidebar.html" . }}
       </aside>
     </div>

[en]
  languageCode = 'en-US'
  languageDirection = 'ltr'
  languageName = 'English'
  weight = 1
  [en.menu]
  [[en.menu.main]]
    identifier = "post"
    name = "Post"
    pageRef = "post"
    weight = 10

  [[en.menu.main]]
    identifier = "about"
    name = "About"
    pageRef = "about"
    weight = 20

[zh-cn]
  languageCode = 'zh-CN'
  languageDirection = 'ltr'
  languageName = '中文'
  weight = 2
  [zh-cn.menu]
  [[zh-cn.menu.main]]
    identifier = "post"
    name = "文章"
    pageRef = "post"
    weight = 10

  [[zh-cn.menu.main]]
    identifier = "about"
    name = "关于"
    pageRef = "about"
    weight = 20

diff --git a/layouts/404.html b/layouts/404.html
index 77d8885..32ec853 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -2,11 +2,11 @@
   <main class="grid place-items-center w-full min-h-full max-w-4xl lg:max-w-5xl px-6 py-24">
     <div class="text-center w-full">
       <p class="text-base font-semibold text-indigo-600 dark:text-indigo-300">404</p>
-      <h1 class="mt-4 text-3xl font-bold tracking-tight text-slate-800 dark:text-slate-200 sm:text-5xl">Page not found</h1>
-      <p class="mt-6 text-base leading-7 text-slate-400">Sorry, we couldn't find the page you're looking for.</p>
+      <h1 class="mt-4 text-3xl font-bold tracking-tight text-slate-800 dark:text-slate-200 sm:text-5xl">{{ T "404.page_not_found" }}</h1>
+      <p class="mt-6 text-base leading-7 text-slate-400">{{ T "404.sorry" }}</p>
       <div class="mt-10 flex items-center justify-center gap-x-6">
         <a href="/" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
-          Go back home
+          {{ T "404.go_back_home" }}
         </a>
       </div>
     </div>

import google.generativeai as genai

# get key from https://makersuite.google.com/app/apikey
GOOGLE_API_KEY = 'YOUR_GOOGLE_API_KEY'
genai.configure(api_key=GOOGLE_API_KEY)
model = genai.GenerativeModel('gemini-pro')

prompt_template = '''You are a translator and your task is to translate l10n file to different languages.
The l10n file is provided in TOML format. The file contains {{ KEY }} for variables and use
`one` for singular and `other` for plural.

The TOML file is quoted in triple backtick. Please translate the content to {lang}
and keep the original content structure, also remove triple backtick in output:

```toml
{en_file_content}
```
'''

en_file_content = ''
with open('./en.toml', 'r') as f:
    en_file_content = f.read()

prompt = prompt_template.format(lang='Chinese', en_file_content=en_file_content)

response = model.generate_content(prompt)
print(response.text)

table_of_contents = "目录"
open_main_menu = "打开主菜单"
open_lang_switcher = "打开语言切换器"
[reading_time]
  one = "阅读时长一分钟"
  other = "阅读时长{{ .Count }}分钟"

[header]
darkmode_toggle = "切换深色模式"

[404]
go_back_home = "返回主页"
sorry = "抱歉，找不到您要查找的页面。"
page_not_found = "页面未找到"

[footer]
powered_by = "由{{ .Generator }} {{ .Heart }} {{ .Theme }}提供支持"
copyright_with_since ="{{ .CopyrightSign }} {{ .SinceYear }} - {{ .CurrentYear}} {{ .Copyright }}"
copyright_wo_since ="{{ .CopyrightSign }} {{ .CurrentYear}} {{ .Copyright }}"

[paginator]
newer_posts = "较新的文章"
older_posts = "较早的文章"

[taxonomies]
categories = "分类"
tags = "标签"
series = "系列"

{{ $id := .Get 0 }}

<script async id="asciicast-{{ $id }}" src="https://asciinema.org/a/{{ $id }}.js"></script>

{{< asciinema 239367 >}}

<a href="{{ .Destination | safeURL }}"{{ with .Title }} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>

[markup.highlight]
  noClasses = false

hugo gen chromastyles --style=solarized-light
hugo gen chromastyles --style=solarized-dark

/* fix highlight with line number */
.highlight .chroma .lntable {
  margin: 1.7142857em 0;
  padding: 0.8571429em 1.1428571em;
  border-radius: 0.375rem;
  overflow: hidden;
}

.highlight .chroma .lntable pre {
  margin: 0;
  padding: 0.8571429em 0;
  border-radius: 0;
}

/* https://caniuse.com/css-has */
.highlight .chroma:has(table) {
  background-color: transparent;
}

.highlight .lntable tr {
  display: flex;
}

.highlight .lntable tr .lntd:last-child {
  flex-grow: 1;
}

<!-- Theme CSS (/static/main.css) -->
<link rel="stylesheet" href="{{ "main.css" | relURL }}" />

{{- $styles := resources.Get "css/index.css" -}}
{{- $env := getenv "HUGO_THEME_DEVELOPMENT" -}}

{{- if eq $env "true" }}
  {{- $styles = resources.Get "css/main.css" | postCSS (dict "config" "./postcss.config.js") -}}
{{ end -}}

{{- if hugo.IsDevelopment }}
  {{- $styles = $styles | resources.ExecuteAsTemplate (printf "css/main.dev.%v.css" now.UnixMilli) . -}}
{{ else }}
  {{- $styles = $styles | minify | fingerprint -}}
{{ end -}}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}">

{{- $jsCopy := resources.Get "js/code-copy.js" | js.Build "code-copy.js" -}}
{{- if not hugo.IsDevelopment }}
  {{- $jsCopy = $jsCopy | minify | fingerprint -}}
{{ end -}}
<script src="{{ $jsCopy.RelPermalink }}"></script>