Merge branch 'master' into categories

2025-04-29 12:03:31 +08:00 · 2022-03-03 23:39:29 +01:00 · 2022-03-03 23:39:29 +01:00 · 08ca525c41
commit 08ca525c41
parent f12ff29f82 d806226ec8
33 changed files with 352 additions and 361 deletions
--- a/assets/icons/language.svg
+++ b/assets/icons/language.svg
@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-language" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M4 5h7" />
+  <path d="M9 3v2c0 4.418 -2.239 8 -5 8" />
+  <path d="M5 9c-.003 2.144 2.952 3.908 6.7 4" />
+  <path d="M12 20l4 -9l4 9" />
+  <path d="M19.1 18h-6.2" />
+</svg>
+
+
--- a/assets/scss/grid.scss
+++ b/assets/scss/grid.scss
@ -11,7 +11,7 @@

        /// Display right sidebar when min-width: lg
        @include respond(lg) {
-            display: block;
+            display: flex;
        }
    }

@ -67,24 +67,6 @@
        }
    }

-    &.align-items--flex-start {
-        align-items: flex-start;
-    }
-
-    .grow {
-        flex-grow: 1;
-    }
-
-    .do-not-shrink {
-        flex-shrink: 0;
-    }
-
-    .do-not-overflow {
-        min-width: 0;
-        flex-shrink: 1;
-        max-width: 100%;
-    }
-
    .full-width {
        width: 100%;
    }
@ -94,15 +76,22 @@ main.main {
    min-width: 0;
    max-width: 100%;
    flex-grow: 1;
-    padding-top: var(--main-top-padding);
+    display: flex;
+    flex-direction: column;
+    gap: var(--section-separation);
+
+    @include respond(md) {
+        padding-top: var(--main-top-padding);
+    }
 }

 .main-container {
    min-height: 100vh;
    align-items: flex-start;
    padding: 0 15px;
-    column-gap: var(--section-separation);
-
+    gap: var(--section-separation);
+    padding-top: var(--main-top-padding);
+    
    @include respond(md) {
        padding: 0 20px;
    }
--- a/assets/scss/partials/article.scss
+++ b/assets/scss/partials/article.scss
@ -2,6 +2,7 @@
 .article-list {
    display: flex;
    flex-direction: column;
+    gap: var(--section-separation);

    article {
        display: flex;
@ -17,10 +18,6 @@
            box-shadow: var(--shadow-l2);
        }

-        &:not(:last-of-type) {
-            margin-bottom: var(--section-separation);
-        }
-
        .article-image {
            img {
                width: 100%;
@ -52,13 +49,13 @@
    display: flex;
    flex-direction: column;
    justify-content: center;
-
    padding: var(--card-padding);
+    gap: 15px;
 }

 .article-title {
    font-weight: 600;
-    margin: 10px 0;
+    margin: 0;
    color: var(--card-text-color-main);
    font-size: 2.2rem;

@ -73,52 +70,58 @@
            color: var(--card-text-color-main);
        }
    }
-
-    & + .article-subtitle {
-        margin-top: 0;
-    }
 }

 .article-subtitle {
    font-weight: normal;
    color: var(--card-text-color-secondary);
-    margin: 5px 0;
    line-height: 1.5;
-
+    margin: 0;
    font-size: 1.75rem;
    @include respond(xl) {
        font-size: 2rem;
    }
 }

-.article-time {
+.article-title-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.article-time,
+.article-translations {
    display: flex;
    align-items: center;
    color: var(--card-text-color-tertiary);
    gap: 15px;
-    margin-top: 10px;
    flex-wrap: wrap;

    svg {
        vertical-align: middle;
-        margin-right: 15px;
        width: 20px;
        height: 20px;
        stroke-width: 1.33;
    }

-    time {
+    time,
+    a {
        font-size: 1.4rem;
+        color: var(--card-text-color-tertiary);
    }

    & > div {
        display: inline-flex;
        align-items: center;
+        gap: 15px;
    }
 }

 .article-category,
 .article-tags {
+    display: flex;
+    gap: 10px;
+
    a {
        color: var(--accent-color-text);
        background-color: var(--accent-color);
@ -126,8 +129,6 @@
        border-radius: var(--tag-border-radius);
        display: inline-block;
        font-size: 1.4rem;
-        margin-right: 10px;
-        margin-bottom: 10px;
        transition: background-color 0.5s ease;

        &:hover {
@ -148,15 +149,12 @@
        --image-size: 60px;
    }

-    & + .pagination {
-        margin-top: var(--section-separation);
-    }
-
    article {
        & > a {
            display: flex;
            align-items: center;
            padding: var(--small-card-padding);
+            gap: 15px;
        }

        &:not(:last-of-type) {
@ -166,8 +164,8 @@
        .article-details {
            flex-grow: 1;
            padding: 0;
-            padding-right: 15px;
            min-height: var(--image-size);
+            gap: 10px;
        }

        .article-title {
--- a/assets/scss/partials/footer.scss
+++ b/assets/scss/partials/footer.scss
@ -2,7 +2,6 @@ footer.site-footer {
    padding: 20px 0 var(--section-separation) 0;
    font-size: 1.4rem;
    line-height: 1.75;
-    margin-top: var(--section-separation);

    &:before {
        content: "";
--- a/assets/scss/partials/layout/archives.scss
+++ b/assets/scss/partials/layout/archives.scss
@ -1,3 +0,0 @@
-.archives-group {
-    margin-bottom: var(--section-separation);
-}
--- a/assets/scss/partials/layout/article.scss
+++ b/assets/scss/partials/layout/article.scss
@ -13,10 +13,6 @@
        box-shadow: var(--shadow-l1);
        overflow: hidden;

-        &.main-article {
-            margin-bottom: var(--section-separation);
-        }
-
        .article-header {
            .article-image {
                img {
@ -57,11 +53,11 @@
                display: flex;
                align-items: center;
                font-size: 1.4rem;
+                gap: 15px;

                svg {
                    width: 20px;
                    height: 20px;
-                    margin-right: 15px;
                    stroke-width: 1.33;
                }
            }
@ -122,67 +118,6 @@
    }
 }

-.article-page.has-toc {
-    .left-sidebar {
-        display: none;
-    }
-
-    .right-sidebar {
-        width: 100%;
-        padding: 0;
-        display: none;
-
-        @include respond(xl) {
-            display: block;
-            top: var(--main-top-padding);
-        }
-    }
-
-    #article-toolbar {
-        display: block;
-
-        @include respond(md) {
-            padding: 0;
-        }
-
-        @include respond(xl) {
-            margin-top: 0;
-            position: sticky;
-            top: var(--main-top-padding);
-            flex-shrink: 1;
-
-            a {
-                background: transparent;
-                box-shadow: none;
-                border: 1px solid var(--body-text-color);
-                width: 100%;
-                margin-right: 0;
-
-                svg {
-                    flex-shrink: 0;
-                }
-            }
-        }
-    }
-
-    .main-container {
-        align-items: start;
-        flex-direction: column;
-
-        @include respond(xl) {
-            flex-direction: row;
-        }
-    }
-
-    .main {
-        padding-top: 0;
-
-        @include respond(xl) {
-            padding-top: var(--main-top-padding);
-        }
-    }
-}
-
 .widget--toc {
    background-color: var(--card-background);
    border-radius: var(--card-border-radius);
@ -272,10 +207,6 @@
    }
 }

-.related-contents--wrapper {
-    margin-bottom: var(--section-separation);
-}
-
 .related-contents {
    overflow-x: auto;
    padding-bottom: 15px;
@ -366,13 +297,10 @@
        flex-direction: row;
        justify-content: center;
        margin: 1.5em 0;
+        gap: 10px;

        figure {
            margin: 0;
-
-            & + figure {
-                margin-left: 10px;
-            }
        }
    }

--- a/assets/scss/partials/layout/list.scss
+++ b/assets/scss/partials/layout/list.scss
@ -3,21 +3,16 @@
    background-color: var(--card-background);
    padding: var(--small-card-padding);
    box-shadow: var(--shadow-l1);
-    margin-bottom: var(--section-separation);
    display: flex;
    align-items: center;
+    gap: 20px;

    --separation: 15px;

    .section-term {
        font-size: 2.2rem;
        margin: 0;
-        margin-top: calc(var(--separation) / 2);
        color: var(--card-text-color-main);
-
-        & + .section-description {
-            margin-top: var(--separation);
-        }
    }

    .section-description {
@ -29,7 +24,9 @@

    .section-details {
        flex-grow: 1;
-        margin-right: 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
    }

    .section-image {
@ -49,7 +46,6 @@
 }

 .subsection-list {
-    margin-bottom: var(--section-separation);
    overflow-x: auto;

    .article-list--tile {
--- a/assets/scss/partials/layout/search.scss
+++ b/assets/scss/partials/layout/search.scss
@ -1,5 +1,4 @@
 .search-form {
-    margin-bottom: var(--section-separation);
    position: relative;
    --button-size: 80px;

--- a/assets/scss/partials/menu.scss
+++ b/assets/scss/partials/menu.scss
@ -101,11 +101,16 @@
    background: none;
    border: none;
    position: absolute;
-    right: 30px;
-    top: 30px;
+    right: 0;
+    top: 0;
    z-index: 2;
    cursor: pointer;

+    [dir="rtl"] & {
+        left: 0;
+        right: auto;
+    }
+
    @include respond(md) {
        display: none;
    }
@ -125,7 +130,6 @@
 .menu {
    padding-left: 0;
    list-style: none;
-    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-grow: 1;
@ -136,10 +140,18 @@
    box-shadow: var(--shadow-l1);
    display: none;

-    margin: 0 -15px;
+    margin: 0 calc(var(--container-padding) * -1);
+
+    &,
+    .menu-bottom-section {
+        gap: 15px;
+        @include respond(xl) {
+            gap: 20px;
+        }
+    }

    &.show {
-        display: block;
+        display: flex;
    }

    @include respond(md) {
@ -149,11 +161,6 @@
        padding: 0;
        box-shadow: none;
        margin: 0;
-        margin-top: var(--sidebar-element-separation);
-    }
-
-    @include respond(xl) {
-        margin-top: 30px;
    }

    li {
@ -161,14 +168,6 @@
        vertical-align: middle;
        padding: 10px 30px;

-        &:not(:last-of-type) {
-            margin-bottom: 15px;
-
-            @include respond(xl) {
-                margin-bottom: 20px;
-            }
-        }
-
        @include respond(md) {
            width: 100%;
            padding: 10px 0;
@ -176,7 +175,6 @@

        svg {
            stroke-width: 1.33;
-            margin-right: 40px;

            width: 20px;
            height: 20px;
@ -187,6 +185,7 @@
            display: inline-flex;
            align-items: center;
            color: var(--body-text-color);
+            gap: var(--menu-icon-separation);
        }

        span {
@ -200,11 +199,19 @@
            }
        }
    }
+
+    .menu-bottom-section {
+        margin-top: auto;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
 }

 .social-menu {
    list-style: none;
-    padding: 0%;
+    padding: 0;
+    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 10px;
--- a/assets/scss/partials/pagination.scss
+++ b/assets/scss/partials/pagination.scss
@ -5,7 +5,6 @@
    border-radius: var(--card-border-radius);
    overflow: hidden;
    flex-wrap: wrap;
-    margin: var(--section-separation) 0;

    .page-link {
        padding: 16px 32px;
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@ -11,11 +11,13 @@
    flex-direction: column;
    flex-shrink: 0;
    align-self: stretch;
+    gap: var(--sidebar-element-separation);

    width: 100%;
-    padding: 30px 0 15px 0;
    max-width: none;

+    position: relative;
+
    --sidebar-avatar-size: 120px;
    --sidebar-element-separation: 20px;

@ -37,8 +39,10 @@
 }

 .right-sidebar {
-    flex-shrink: 0;
+    width: 100%;
    display: none;
+    flex-direction: column;
+    gap: var(--widget-separation);

    &.sticky {
        top: 0;
@ -49,11 +53,12 @@
    }
 }

-.site-info {
+.sidebar header {
    z-index: 1;
    transition: box-shadow 0.5s ease;
-
-    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--sidebar-element-separation);

    @include respond(md) {
        padding: 0;
@ -65,8 +70,6 @@
        width: var(--sidebar-avatar-size);
        height: var(--sidebar-avatar-size);

-        margin-bottom: var(--sidebar-element-separation);
-
        .site-logo {
            width: 100%;
            height: 100%;
@ -95,6 +98,12 @@
        }
    }

+    .site-meta {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
    .site-name {
        color: var(--accent-color);
        margin: 0;
@ -108,7 +117,7 @@
    .site-description {
        color: var(--body-text-color);
        font-weight: normal;
-        margin: 10px 0;
+        margin: 0;
        font-size: 1.6rem;

        @include respond(2xl) {
@ -117,21 +126,6 @@
    }
 }

-.sidebar {
-    .widget {
-        margin-bottom: var(--section-separation);
-
-        &:not(:last-of-type):after {
-            content: "";
-            width: 100px;
-            height: 2px;
-            background-color: var(--body-text-color);
-            display: block;
-            margin-top: var(--section-separation);
-        }
-    }
-}
-
 [data-scheme="dark"] {
    #dark-mode-toggle {
        color: var(--accent-color);
@ -153,8 +147,27 @@
    display: flex;
    align-items: center;
    cursor: pointer;
+    gap: var(--menu-icon-separation);

    .icon-tabler-toggle-right {
        display: none;
    }
 }
+
+#i18n-switch {
+    color: var(--body-text-color);
+    display: inline-flex;
+    align-content: center;
+    gap: var(--menu-icon-separation);
+
+    select {
+        border: 0;
+        background-color: transparent;
+        color: var(--body-text-color);
+
+        option {
+            color: var(--card-text-color-main);
+            background-color: var(--card-background);
+        }
+    }
+}
--- a/assets/scss/partials/widgets.scss
+++ b/assets/scss/partials/widgets.scss
@ -1,4 +1,7 @@
 .widget {
+    display: flex;
+    flex-direction: column;
+
    .widget-icon {
        svg {
            width: 32px;
@ -14,16 +17,14 @@
    .tagCloud-tags {
        display: flex;
        flex-wrap: wrap;
+        gap: 10px;

        a {
            background: var(--card-background);
            box-shadow: var(--shadow-l1);
            border-radius: var(--tag-border-radius);
            padding: 8px 20px;
-
            color: var(--card-text-color-main);
-            margin-bottom: 10px;
-            margin-right: 5px;
            font-size: 1.4rem;
            transition: box-shadow 0.3s ease;

--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@ -19,7 +19,6 @@
@import "partials/pagination.scss";
@import "partials/sidebar.scss";
@import "partials/base.scss";
-@import "partials/layout/archives.scss";
@import "partials/layout/article.scss";
@import "partials/layout/list.scss";
@import "partials/layout/404.scss";
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@ -5,9 +5,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 *   Global style
 */
 :root {
-    @include respond(md) {
-        --main-top-padding: 35px;
-    }
+    --main-top-padding: 35px;

    @include respond(xl) {
        --main-top-padding: 50px;
@ -159,3 +157,9 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
    --pre-background-color: #272822;
    @import "partials/highlight/dark.scss";
 }
+
+:root {
+    --menu-icon-separation: 40px;
+    --container-padding: 15px;
+    --widget-separation: var(--section-separation);
+}
--- a/config.yaml
+++ b/config.yaml
@ -95,6 +95,7 @@ params:
            darkTheme:
            reactionsEnabled: 1
            emitMetadata: 0
+            lang:

        gitalk:
            owner:
@ -108,16 +109,8 @@ params:
            id:

    widgets:
-        enabled:
-            - search
-            - archives
-            - tag-cloud
-
-        archives:
-            limit: 5
-
-        tagCloud:
-            limit: 10
+        homepage: []
+        page: []

    opengraph:
        twitter:
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@ -4,6 +4,16 @@ theme: hugo-theme-stack
 paginate: 5
 title: Example Site

+languages:
+    en:
+        languageName: English
+        title: Example Site
+        weight: 1
+    cn:
+        languageName: 中文
+        title: 演示站点
+        weight: 2
+
 # Change it to your Disqus shortname before using
 disqusShortname: hugo-theme-stack

@ -132,16 +142,16 @@ params:
            host:
            id:
    widgets:
-        enabled:
-            - search
-            - archives
-            - tag-cloud
-
-        archives:
-            limit: 5
-
-        tagCloud:
-            limit: 10
+        homepage:
+            - type: search
+            - type: archives
+              params:
+                  limit: 5
+            - type: tag-cloud
+              params:
+                  limit: 10
+        page:
+            - type: toc

    opengraph:
        twitter:
--- a/exampleSite/content/page/about/index.cn.md
+++ b/exampleSite/content/page/about/index.cn.md
@ -0,0 +1,5 @@
+---
+title: 关于
+---
+
+This is a test page for i18n support.
--- a/layouts/_default/archives.html
+++ b/layouts/_default/archives.html
@ -1,17 +1,19 @@
 {{ define "body-class" }}template-archives{{ end }}
 {{ define "main" }}
-    {{- $taxonomy := $.Site.GetPage "taxonomyTerm" "categories" -}}
-    {{- $terms := $taxonomy.Pages -}}
-    {{ if $terms }}
-    <h2 class="section-title">{{ $taxonomy.Title }}</h2>
-    <div class="subsection-list">
-        <div class="article-list--tile">
-            {{ range $terms }}
-                {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }}
-            {{ end }}
+    <header>
+        {{- $taxonomy := $.Site.GetPage "taxonomyTerm" "categories" -}}
+        {{- $terms := $taxonomy.Pages -}}
+        {{ if $terms }}
+        <h2 class="section-title">{{ $taxonomy.Title }}</h2>
+        <div class="subsection-list">
+            <div class="article-list--tile">
+                {{ range $terms }}
+                    {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }}
+                {{ end }}
+            </div>
        </div>
-    </div>
-    {{ end }}
+        {{ end }}
+    </header>

    {{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
    {{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -6,7 +6,8 @@
    </head>
    <body class="{{ block `body-class` . }}{{ end }}">
        {{- partial "head/colorScheme" . -}}
-        <div class="container main-container flex {{ block `container-class` . }}on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }}{{ end }}">
+        {{- $hasWidget := default (gt (len .Site.Params.widgets.homepage) 0) (.Scratch.Get "hasWidget") -}}
+        <div class="container main-container flex on-phone--column {{ if $hasWidget }}extended{{ else }}compact{{ end }}">
            {{- block "left-sidebar" . -}}
                {{ partial "sidebar/left.html" . }}
            {{- end -}}
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@ -1,46 +1,48 @@
 {{ define "main" }}
-    <h3 class="section-title">
-        {{ if eq .Parent (.GetPage "/") }}
-            {{ T "list.section" }}
-        {{ else }}
-            {{ .Parent.Title }}
-        {{ end }}
-    </h3>
-
-    <div class="section-card">
-        <div class="section-details">
-            <h3 class="section-count">{{ T "list.page" (len .Pages) }}</h3>
-            <h1 class="section-term">{{ .Title }}</h1>
-            {{ with .Params.description }}
-                <h2 class="section-description">{{ . }}</h2>
+    <header>
+        <h3 class="section-title">
+            {{ if eq .Parent (.GetPage "/") }}
+                {{ T "list.section" }}
+            {{ else }}
+                {{ .Parent.Title }}
            {{ end }}
-        </div>
+        </h3>

-        {{- $image := partialCached "helper/image" (dict "Context" . "Type" "section") .RelPermalink "section" -}}
-        {{ if $image.exists }}
-            <div class="section-image">
-                {{ if $image.resource }}
-                    {{- $Permalink := $image.resource.RelPermalink -}}
-                    {{- $Width := $image.resource.Width -}}
-                    {{- $Height := $image.resource.Height -}}
-
-                    {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
-                        {{- $thumbnail := $image.resource.Fill "120x120" -}}
-                        {{- $Permalink = $thumbnail.RelPermalink -}}
-                        {{- $Width = $thumbnail.Width -}}
-                        {{- $Height = $thumbnail.Height -}}
-                    {{- end -}}
-                    
-                    <img src="{{ $Permalink }}" 
-                        width="{{ $Width }}"
-                        height="{{ $Height }}" 
-                        loading="lazy">
-                {{ else }}
-                    <img src="{{ $image.permalink }}" loading="lazy" />
+        <div class="section-card">
+            <div class="section-details">
+                <h3 class="section-count">{{ T "list.page" (len .Pages) }}</h3>
+                <h1 class="section-term">{{ .Title }}</h1>
+                {{ with .Params.description }}
+                    <h2 class="section-description">{{ . }}</h2>
                {{ end }}
            </div>
-        {{ end }}
-    </div>
+    
+            {{- $image := partialCached "helper/image" (dict "Context" . "Type" "section") .RelPermalink "section" -}}
+            {{ if $image.exists }}
+                <div class="section-image">
+                    {{ if $image.resource }}
+                        {{- $Permalink := $image.resource.RelPermalink -}}
+                        {{- $Width := $image.resource.Width -}}
+                        {{- $Height := $image.resource.Height -}}
+    
+                        {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
+                            {{- $thumbnail := $image.resource.Fill "120x120" -}}
+                            {{- $Permalink = $thumbnail.RelPermalink -}}
+                            {{- $Width = $thumbnail.Width -}}
+                            {{- $Height = $thumbnail.Height -}}
+                        {{- end -}}
+                        
+                        <img src="{{ $Permalink }}" 
+                            width="{{ $Width }}"
+                            height="{{ $Height }}" 
+                            loading="lazy">
+                    {{ else }}
+                        <img src="{{ $image.permalink }}" loading="lazy" />
+                    {{ end }}
+                </div>
+            {{ end }}
+        </div>
+    </header>

    {{- $subsections := .Sections -}}
    {{- $pages := .Pages | complement $subsections -}}
@ -53,14 +55,16 @@
    {{- end -}}

    {{- with $subsections -}}
-        <h2 class="section-title">{{ T "list.subsection" (len $subsections) }}</h2>
-        <div class="subsection-list">
-            <div class="article-list--tile">
-                {{ range . }}
-                    {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "section") }}
-                {{ end }}
+        <aside>
+            <h2 class="section-title">{{ T "list.subsection" (len $subsections) }}</h2>
+            <div class="subsection-list">
+                <div class="article-list--tile">
+                    {{ range . }}
+                        {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "section") }}
+                    {{ end }}
+                </div>
            </div>
-        </div>
+        </aside>
    {{- end -}}
    
    {{/* List only pages that are not a subsection */}}
@ -77,5 +81,5 @@
 {{ end }}

 {{ define "right-sidebar" }}
-    {{ partialCached "sidebar/right.html" . }}
+    {{ partial "sidebar/right.html" (dict "Context" . "Scope" "homepage") }}
 {{ end }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -1,15 +1,26 @@
 {{ define "body-class" }}
-    {{ $TOCEnabled := default (default false .Site.Params.article.toc) .Params.toc }}
-    {{- .Scratch.Set "hasTOC" (and (ge (len .TableOfContents) 100) $TOCEnabled) -}}
-    article-page {{ if (.Scratch.Get "hasTOC") }}has-toc{{ end }}
-{{ end }}
+    article-page
+    {{/* 
+        Enable the right sidebar if
+            - Widget different from 'TOC' is enabled
+            - TOC is enabled and not empty
+    */}}
+    {{- $HasWidgetNotTOC := false -}}
+    {{- $TOCWidgetEnabled := false -}}
+    {{- range .Site.Params.widgets.page -}}
+        {{- if ne .type "toc" -}}
+            {{ $HasWidgetNotTOC = true -}}
+        {{- else -}}
+            {{ $TOCWidgetEnabled = true -}}
+        {{- end -}}
+    {{- end -}}

-{{ define "container-class" }}
-    {{ if (.Scratch.Get "hasTOC") }}
-        extended
-    {{ else }}
-        on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }}
-    {{ end }}
+    {{- $TOCManuallyDisabled := eq .Params.toc false -}}
+    {{- $TOCEnabled := and (not $TOCManuallyDisabled) $TOCWidgetEnabled -}}
+    {{- $hasTOC := ge (len .TableOfContents) 100 -}}
+    {{- .Scratch.Set "TOCEnabled" (and $TOCEnabled $hasTOC) -}}
+    
+    {{- .Scratch.Set "hasWidget" (or $HasWidgetNotTOC (and $TOCEnabled $hasTOC)) -}}
 {{ end }}

 {{ define "main" }}
@ -30,32 +41,6 @@
    {{ partialCached "article/components/photoswipe" . }}
 {{ end }}

-{{ define "left-sidebar" }}
-    {{ if (.Scratch.Get "hasTOC") }}
-        <div id="article-toolbar">
-            <a href="{{ .Site.BaseURL | relLangURL }}" class="back-home">
-                {{ (resources.Get "icons/back.svg").Content | safeHTML }}
-                <span>{{ T "article.back" }}</span>
-            </a>
-        </div>
-    {{ else }}
-        {{ partial "sidebar/left.html" . }}
-    {{ end }}
-{{ end }}
-
 {{ define "right-sidebar" }}
-    {{ if (.Scratch.Get "hasTOC") }}
-        <aside class="sidebar right-sidebar sticky">
-            <section class="widget archives">
-                <div class="widget-icon">
-                    {{ partial "helper/icon" "hash" }}
-                </div>
-                <h2 class="widget-title section-title">{{ T "article.tableOfContents" }}</h2>
-                
-                <div class="widget--toc">
-                    {{ .TableOfContents }}
-                </div>
-            </section>
-        </aside>
-    {{ end }}
+    {{ if .Scratch.Get "hasWidget" }}{{ partial "sidebar/right.html" (dict "Context" . "Scope" "page") }}{{ end}}
 {{ end }}
--- a/layouts/index.html
+++ b/layouts/index.html
@ -15,5 +15,5 @@
 {{ end }}

 {{ define "right-sidebar" }}
-    {{ partial "sidebar/right.html" . }}
+    {{ partial "sidebar/right.html" (dict "Context" . "Scope" "homepage") }}
 {{ end }}
--- a/layouts/page/search.html
+++ b/layouts/page/search.html
@ -16,8 +16,10 @@
    </button>
 </form>

-<h3 class="search-result--title section-title"></h3>
-<div class="search-result--list article-list--compact"></div>
+<div class="search-result">
+    <h3 class="search-result--title section-title"></h3>
+    <div class="search-result--list article-list--compact"></div>
+</div>

 <script>
    window.searchResultTitleTemplate = "{{ T `search.resultTitle` }}"
--- a/layouts/partials/article/components/details.html
+++ b/layouts/partials/article/components/details.html
@ -9,17 +9,19 @@
    </header>
    {{ end }}

-    <h2 class="article-title">
-        <a href="{{ .RelPermalink }}">
-            {{- .Title -}}
-        </a>
-    </h2>
-
-    {{ with .Params.description }}
-    <h3 class="article-subtitle">
-        {{ . }}
-    </h3>
-    {{ end }}
+    <div class="article-title-wrapper">
+        <h2 class="article-title">
+            <a href="{{ .RelPermalink }}">
+                {{- .Title -}}
+            </a>
+        </h2>
+    
+        {{ with .Params.description }}
+        <h3 class="article-subtitle">
+            {{ . }}
+        </h3>
+        {{ end }}
+    </div>

    {{ if or (not .Date.IsZero) (.Site.Params.article.readingTime) }}
    <footer class="article-time">
@ -42,4 +44,15 @@
        {{ end }}
    </footer>
    {{ end }}
+
+    {{ if .IsTranslated }}
+        <footer class="article-translations">
+            {{ partial "helper/icon" "language" }}
+            <div>
+                {{ range .Translations }}
+                    <a href="{{ .Permalink }}" class="link">{{ .Language.LanguageName }}</a>
+                {{ end }}
+            </div>
+        </footer>
+    {{ end }}
 </div>
--- a/layouts/partials/article/components/related-contents.html
+++ b/layouts/partials/article/components/related-contents.html
@ -1,13 +1,13 @@
+{{ $related := (where (.Site.RegularPages.Related .) "Params.hidden" "!=" true) | first 5 }}
+{{ with $related }}
 <aside class="related-contents--wrapper">
-    {{ $related := (where (.Site.RegularPages.Related .) "Params.hidden" "!=" true) | first 5 }}
-    {{ with $related }}
-        <h2 class="section-title">{{ T "article.relatedContents" }}</h2>
-        <div class="related-contents">
-            <div class="flex article-list--tile">
-                {{ range . }}
-                    {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "articleList") }}
-                {{ end }}
-            </div>
+    <h2 class="section-title">{{ T "article.relatedContents" }}</h2>
+    <div class="related-contents">
+        <div class="flex article-list--tile">
+            {{ range . }}
+                {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "articleList") }}
+            {{ end }}
        </div>
-    {{ end }}
+    </div>
 </aside>
+{{ end }}
--- a/layouts/partials/comments/provider/giscus.html
+++ b/layouts/partials/comments/provider/giscus.html
@ -9,41 +9,41 @@
    data-reactions-enabled="{{- default 1 .reactionsEnabled -}}"
    data-emit-metadata="{{- default 0 .emitMetadata -}}"
    data-theme="{{- default `light` .lightTheme -}}"
+    data-lang="{{- default `en` .lang -}}"
    crossorigin="anonymous"
    async
 ></script>
 <script>
    function setGiscusTheme(theme) {
-        let giscus = document.querySelector('iframe.giscus-frame');
+        let giscus = document.querySelector("iframe.giscus-frame");
        if (giscus) {
            giscus.contentWindow.postMessage(
-                { 
+                {
                    giscus: {
-                        setConfig: { 
-                            theme: theme 
-                        }
-                    }
+                        setConfig: {
+                            theme: theme,
+                        },
+                    },
                },
                "https://giscus.app"
            );
-        };
-    };
+        }
+    }

-    (function(){
-        addEventListener('message', (e) => {
-            if (event.origin !== 'https://giscus.app') return;
-            handler()
+    (function () {
+        addEventListener("message", (e) => {
+            if (event.origin !== "https://giscus.app") return;
+            handler();
        });
-        window.addEventListener('onColorSchemeChange', handler);
+        window.addEventListener("onColorSchemeChange", handler);

        function handler() {
            if (document.documentElement.dataset.scheme === "light") {
                setGiscusTheme('{{- default "light" .lightTheme -}}');
            } else {
                setGiscusTheme('{{- default "dark_dimmed" .darkTheme -}}');
-            };
-        };
-    }());
+            }
+        }
+    })();
 </script>
 {{- end -}}
-
--- a/layouts/partials/comments/provider/twikoo.html
+++ b/layouts/partials/comments/provider/twikoo.html
@ -1,4 +1,4 @@
-<script src="//cdn.jsdelivr.net/npm/twikoo@1.4.15/dist/twikoo.all.min.js"></script>
+<script src="//cdn.jsdelivr.net/npm/twikoo@1.4.18/dist/twikoo.all.min.js"></script>
 <div id="tcomment"></div>
 <style>
    .twikoo {
--- a/layouts/partials/sidebar/left.html
+++ b/layouts/partials/sidebar/left.html
@ -5,7 +5,7 @@
        </span>
    </button>

-    <header class="site-info">
+    <header>
        {{ with .Site.Params.sidebar.avatar }}
            {{ if (default true .enabled) }}
            <figure class="site-avatar">
@ -31,8 +31,10 @@
            {{ end }}
        {{ end }}
        
-        <h1 class="site-name"><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title }}</a></h1>
-        <h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
+        <div class="site-meta">
+            <h1 class="site-name"><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title }}</a></h1>
+            <h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
+        </div>

        {{- with .Site.Menus.social -}}
            <ol class="social-menu">
@ -73,12 +75,26 @@
        </li>
        {{ end }}

-        {{ if (default false .Site.Params.colorScheme.toggle) }}
-            <li id="dark-mode-toggle">
-                {{ partial "helper/icon" "toggle-left" }}
-                {{ partial "helper/icon" "toggle-right" }}
-                <span>{{ T "darkMode" }}</span>
-            </li>
-        {{ end }}
+        <div class="menu-bottom-section">
+            {{- $currentLanguageCode := .Language.Lang -}}
+            {{ with .Site.Home.AllTranslations }}
+                <li id="i18n-switch">  
+                    {{ partial "helper/icon" "language" }}
+                    <select name="language" onchange="window.location.href = this.selectedOptions[0].value">
+                        {{ range . }}
+                            <option value="{{ .Permalink }}" {{ if eq .Language.Lang $currentLanguageCode }}selected{{ end }}>{{ .Language.LanguageName }}</option>
+                        {{ end }}
+                    </select>
+                </li>
+            {{ end }}
+            
+            {{ if (default false .Site.Params.colorScheme.toggle) }}
+                <li id="dark-mode-toggle">
+                    {{ partial "helper/icon" "toggle-left" }}
+                    {{ partial "helper/icon" "toggle-right" }}
+                    <span>{{ T "darkMode" }}</span>
+                </li>
+            {{ end }}
+        </div>
    </ol>
 </aside>
--- a/layouts/partials/sidebar/right.html
+++ b/layouts/partials/sidebar/right.html
@ -1,8 +1,13 @@
-{{ if .Site.Params.widgets.enabled }}
-    {{ $context := . }}
+{{- $scope := default "homepage" .Scope -}}
+{{- $context := .Context -}}
+{{- with (index .Context.Site.Params.widgets $scope) -}}
    <aside class="sidebar right-sidebar sticky">
-        {{ range $widget := .Site.Params.widgets.enabled }}
-            {{ partial (printf "widget/%s" $widget) $context }}
+        {{ range $widget := . }}
+            {{ if templates.Exists (printf "partials/widget/%s.html" .type) }}
+                {{ partial (printf "widget/%s" .type) (dict "Context" $context "Params" .params) }}
+            {{ else }}
+                {{ warnf "Widget %s not found" .type }}
+            {{ end }}
        {{ end }}
    </aside>
 {{ end }}
--- a/layouts/partials/widget/archives.html
+++ b/layouts/partials/widget/archives.html
@ -1,4 +1,6 @@
-{{- $query := first 1 (where .Site.Pages "Layout" "==" "archives") -}}
+{{- $query := first 1 (where .Context.Site.Pages "Layout" "==" "archives") -}}
+{{- $context := .Context -}}
+{{- $limit := default 5 .Params.limit -}}
 {{- if $query -}}
    {{- $archivesPage := index $query 0 -}}
    <section class="widget archives">
@ -7,17 +9,17 @@
        </div>
        <h2 class="widget-title section-title">{{ T "widget.archives.title" }}</h2>

-        {{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
-        {{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
+        {{ $pages := where $context.Site.RegularPages "Type" "in" $context.Site.Params.mainSections }}
+        {{ $notHidden := where $context.Site.RegularPages "Params.hidden" "!=" true }}
        {{ $filtered := ($pages | intersect $notHidden) }}
        {{ $archives := $filtered.GroupByDate "2006" }}
        
        <div class="widget-archive--list">
-            {{ range $index, $item := first (add .Site.Params.widgets.archives.limit 1) ($archives) }}
+            {{ range $index, $item := first (add $limit 1) ($archives) }}
                {{- $id := lower (replace $item.Key " " "-") -}}
                <div class="archives-year">
                    <a href="{{ $archivesPage.RelPermalink }}#{{ $id }}">
-                        {{ if eq $index $.Site.Params.widgets.archives.limit }}
+                        {{ if eq $index $limit }}
                            <span class="year">{{ T "widget.archives.more" }}</span>
                        {{ else }}
                            <span class="year">{{ .Key }}</span>
--- a/layouts/partials/widget/search.html
+++ b/layouts/partials/widget/search.html
@ -1,4 +1,4 @@
-{{- $query := first 1 (where .Site.Pages "Layout" "==" "search") -}}
+{{- $query := first 1 (where .Context.Site.Pages "Layout" "==" "search") -}}
 {{- if $query -}}
    {{- $searchPage := index $query 0 -}}
    <form action="{{ $searchPage.RelPermalink }}" class="search-form widget" {{ with .OutputFormats.Get "json" -}}data-json="{{ .Permalink }}" {{- end }}>
--- a/layouts/partials/widget/tag-cloud.html
+++ b/layouts/partials/widget/tag-cloud.html
@ -1,3 +1,5 @@
+{{- $context := .Context -}}
+{{- $limit := default 10 .Params.limit -}}
 <section class="widget tagCloud">
    <div class="widget-icon">
        {{ partial "helper/icon" "tag" }}
@ -5,7 +7,7 @@
    <h2 class="widget-title section-title">{{ T "widget.tagCloud.title" }}</h2>

    <div class="tagCloud-tags">
-        {{ range first .Site.Params.widgets.tagCloud.limit .Site.Taxonomies.tags.ByCount }}
+        {{ range first $limit $context.Site.Taxonomies.tags.ByCount }}
            <a href="{{ .Page.RelPermalink }}" class="font_size_{{ .Count }}">
                {{ .Page.Title }}
            </a>
--- a/layouts/partials/widget/toc.html
+++ b/layouts/partials/widget/toc.html
@ -0,0 +1,12 @@
+{{ if (.Context.Scratch.Get "TOCEnabled") }}
+    <section class="widget archives">
+        <div class="widget-icon">
+            {{ partial "helper/icon" "hash" }}
+        </div>
+        <h2 class="widget-title section-title">{{ T "article.tableOfContents" }}</h2>
+        
+        <div class="widget--toc">
+            {{ .Context.TableOfContents }}
+        </div>
+    </section>
+{{ end }}