Merge pull request #4 from CaiJimmy/master

Update
2025-04-28 19:43:31 +08:00 · 2020-12-31 00:39:03 -03:00 · 2020-12-31 00:39:03 -03:00 · dd5b966a94
commit dd5b966a94
parent 899ac3cda1 3572fff280
71 changed files with 1200 additions and 910 deletions
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@ -1 +1 @@
-custom: ['https://www.buymeacoffee.com/jimmycai']
+ko_fi: jimmycai
--- a/.github/release-drafter.yml
+++ b/.github/release-drafter.yml
@ -1,31 +1,33 @@
-name-template: 'v$RESOLVED_VERSION 🌈'
-tag-template: 'v$RESOLVED_VERSION'
+name-template: "v$RESOLVED_VERSION 🌈"
+tag-template: "v$RESOLVED_VERSION"
 categories:
-  - title: '🚀 Features'
-    labels:
-      - 'feature'
-      - 'enhancement'
-  - title: '🐛 Bug Fixes'
-    labels:
-      - 'fix'
-      - 'bugfix'
-      - 'bug'
-  - title: '🧰 Maintenance'
-    label: 'chore'
-change-template: '- $TITLE @$AUTHOR (#$NUMBER)'
+    - title: "🚀 Features"
+      labels:
+          - "feature"
+          - "enhancement"
+    - title: "🐛 Bug Fixes"
+      labels:
+          - "fix"
+          - "bugfix"
+          - "bug"
+    - title: "🧰 Maintenance"
+      label: "chore"
+    - title: "♻️ Refactor"
+      label: refactor
+change-template: "- $TITLE @$AUTHOR (#$NUMBER)"
 change-title-escapes: '\<*_&' # You can add # and @ to disable mentions, and add ` to disable code blocks.
 version-resolver:
-  major:
-    labels:
-      - 'major'
-  minor:
-    labels:
-      - 'minor'
-  patch:
-    labels:
-      - 'patch'
-  default: patch
+    major:
+        labels:
+            - "major"
+    minor:
+        labels:
+            - "minor"
+    patch:
+        labels:
+            - "patch"
+    default: patch
 template: |
-  ## Changes
+    ## Changes

-  $CHANGES
+    $CHANGES
--- a/README.md
+++ b/README.md
@ -20,22 +20,19 @@ Stack is a simple card-style Hugo theme designed for bloggers, some of its featu
 - Responsive images support
 - Lazy load images
 - Dark mode
+- Local search
 - [PhotoSwipe](https://photoswipe.com/) integration
 - Archive page template
 - Full native JavaScript, no jQuery or any other frameworks are used
 - No CSS framework, keep it simple and minimal
- External dependencies (like PhotoSwipe's library) are being loaded selectively, or asynchronously
 - Properly cropped thumbnails
-
-The only JavaScript library being used is [node-vibrant](https://github.com/Vibrant-Colors/node-vibrant) for generating colour schemes for articles.
-
-![Page Insight](https://i.imgur.com/0hUWmMh.png)
+- Subsection support

 ## Requirements

-This theme uses SCSS and TypeScript. For that reason, it's necessary to use **Hugo ≥ 0.74.0**.
+It's necessary to use **Hugo ≥ 0.78.0**.

-Use Hugo Extended version if you want to:
+Use Hugo Extended version (recommended) if you want to:

 * Use the latest feature/fix from `master` branch
 * Edit SCSS files
@ -46,7 +43,7 @@ Use Hugo Extended version if you want to:

 Clone / Download this repository to `theme` folder, and edit your site config following `exampleSite/config.toml`.

-Check [documentation](https://www.notion.so/jimmycai/Hugo-Theme-Stack-511aec5b9ed845ce9b6e3ae0bf7fb6d4) for more details.
+Check [documentation](https://docs.stack.jimmycai.com/) for more details.

 ## Copyright

@ -58,9 +55,9 @@ If you want to port this theme to another blogging platform, please let me know

 ## Sponsoring

-If you like this theme, consider supporting its development:
+If you like this theme, give it a star, and consider supporting its development:

-<a href="https://www.buymeacoffee.com/jimmycai" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-green.png" alt="Buy Me A Coffee" height="60px" width="217px"></a>
+[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C0C530AXX)

 Your support is greatly appreciated :)

--- a/assets/icons/toggle-left.svg
+++ b/assets/icons/toggle-left.svg
@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-toggle-left" 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"/>
+  <circle cx="8" cy="12" r="2" />
+  <rect x="2" y="6" width="20" height="12" rx="6" />
+</svg>
+
+
--- a/assets/icons/toggle-right.svg
+++ b/assets/icons/toggle-right.svg
@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-toggle-right" 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"/>
+  <circle cx="16" cy="12" r="2" />
+  <rect x="2" y="6" width="20" height="12" rx="6" />
+</svg>
+
+
--- a/assets/jsconfig.json
+++ b/assets/jsconfig.json
@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "*": [
+                "*"
+            ]
+        },
+    }
+}
--- a/assets/scss/grid.scss
+++ b/assets/scss/grid.scss
@ -112,8 +112,6 @@ main.main {
    padding-top: var(--main-top-padding);
 }

-.main-grid {
-    @media (max-width: $on-phone) {
-        flex-direction: column;
-    }
-}
+.main-container {
+    min-height: 100vh;
+}
--- a/assets/scss/partials/article.scss
+++ b/assets/scss/partials/article.scss
@ -56,24 +56,6 @@
    padding: var(--card-padding);
 }

-.article-category {
-    margin-bottom: 10px;
-    a {
-        display: inline-block;
-        text-decoration: none;
-        padding: 8px 16px;
-        font-size: 1.4rem;
-        background: nth($defaultTagBackgrounds, 1);
-        color: nth($defaultTagColors, 1);
-        border-radius: var(--tag-border-radius);
-
-        @media (max-width: $on-phone) {
-            font-size: 1.25rem;
-            padding: 8px 14px;
-        }
-    }
-}
-
 .article-title {
    font-weight: 600;
    margin: 10px 0;
@ -128,11 +110,12 @@
    }
 }

+.article-category,
 .article-tags {
    a {
        color: var(--accent-color-text);
        background-color: var(--accent-color);
-        padding: 8px 18px;
+        padding: 8px 16px;
        border-radius: var(--tag-border-radius);
        display: inline-block;
        font-size: 1.4rem;
@ -193,6 +176,7 @@
            img {
                width: var(--image-size);
                height: var(--image-size);
+                object-fit: cover;
            }
        }

@ -200,7 +184,7 @@
            font-size: 1.4rem;
        }

-        .article-preview{
+        .article-preview {
            font-size: 1.4rem;
            color: var(--card-text-color-tertiary);
            margin-top: 10px;
--- a/assets/scss/partials/highlight/dark.scss
+++ b/assets/scss/partials/highlight/dark.scss
@ -3,11 +3,6 @@
 *   https://xyproto.github.io/splash/docs/monokai.html
 */

-:root {
-    --pre-text-color: #f8f8f2;
-    --pre-background-color: #272822;
-}
-
 /* Background */
 .chroma {
    color: #f8f8f2;
--- a/assets/scss/partials/highlight/light.scss
+++ b/assets/scss/partials/highlight/light.scss
@ -2,10 +2,6 @@
 *   Style: monokailight
 *   https://xyproto.github.io/splash/docs/monokailight.html
 */
-:root {
-    --pre-text-color: #272822;
-    --pre-background-color: #fafafa;
-}

 /* Background */
 .chroma {
--- a/assets/scss/partials/layout/archives.scss
+++ b/assets/scss/partials/layout/archives.scss
@ -1,31 +1,3 @@
 .archives-group {
    margin-bottom: var(--section-separation);
-}
-
-.template-archives {
-    .category-list {
-        margin-bottom: var(--section-separation);
-        overflow-x: auto;
-
-        .article-list--tile {
-            display: flex;
-            padding-bottom: 15px;
-
-            article {
-                width: 250px;
-                height: 150px;
-                margin-right: 20px;
-                flex-shrink: 0;
-
-                .article-title {
-                    margin: 0;
-                    font-size: 1.8rem;
-                }
-
-                .article-details {
-                    padding: 20px;
-                }
-            }
-        }
-    }
-}
+}
--- a/assets/scss/partials/layout/article.scss
+++ b/assets/scss/partials/layout/article.scss
@ -305,4 +305,8 @@
    tr:nth-child(even) {
        background-color: var(--tr-even-background-color);
    }
+
+    .twitter-tweet {
+        color: var(--card-text-color-main);
+    }
 }
--- a/assets/scss/partials/layout/taxonomy.scss
+++ b/assets/scss/partials/layout/taxonomy.scss
@ -1,4 +1,4 @@
-.taxonomy-card {
+.section-card {
    border-radius: var(--card-border-radius);
    background-color: var(--card-background);
    padding: var(--small-card-padding);
@ -9,37 +9,37 @@

    --separation: 15px;

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

-        & + .taxonomy-description {
+        & + .section-description {
            margin-top: var(--separation);
        }
    }

-    .taxonomy-description {
+    .section-description {
        font-weight: normal;
        color: var(--card-text-color-secondary);
        font-size: 1.6rem;
        margin: 0;
    }

-    .taxonomy-details {
+    .section-details {
        flex-grow: 1;
        margin-right: 20px;
    }

-    .taxonomy-image {
+    .section-image {
        img {
            width: 60px;
            height: 60px;
        }
    }

-    .taxonomy-count {
+    .section-count {
        color: var(--card-text-color-tertiary);
        font-size: 1.4rem;
        margin: 0;
@ -47,3 +47,29 @@
        text-transform: uppercase;
    }
 }
+
+.subsection-list {
+    margin-bottom: var(--section-separation);
+    overflow-x: auto;
+
+    .article-list--tile {
+        display: flex;
+        padding-bottom: 15px;
+
+        article {
+            width: 250px;
+            height: 150px;
+            margin-right: 20px;
+            flex-shrink: 0;
+
+            .article-title {
+                margin: 0;
+                font-size: 1.8rem;
+            }
+
+            .article-details {
+                padding: 20px;
+            }
+        }
+    }
+}
--- a/assets/scss/partials/menu.scss
+++ b/assets/scss/partials/menu.scss
@ -129,6 +129,8 @@
    margin-top: var(--sidebar-element-separation);
    margin-bottom: 0;
    overflow-y: auto;
+    flex-grow: 1;
+    font-size: 1.5rem;

    @media (min-width: $on-desktop-large) {
        margin-top: 30px;
@ -192,7 +194,6 @@
            display: inline-flex;
            align-items: center;
            color: var(--body-text-color);
-            font-size: 1.5rem;

            @media (max-width: $on-desktop-large) {
                font-size: 1.4rem;
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@ -134,3 +134,30 @@
        }
    }
 }
+
+[data-scheme="dark"] {
+    #dark-mode-toggle {
+        color: var(--accent-color);
+        font-weight: 700;
+
+        .icon-tabler-toggle-left {
+            display: none;
+        }
+
+        .icon-tabler-toggle-right {
+            display: unset;
+        }
+    }
+}
+
+#dark-mode-toggle {
+    margin-top: auto;
+    color: var(--body-text-color);
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .icon-tabler-toggle-right {
+        display: none;
+    }
+}
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@ -21,7 +21,7 @@
@import "partials/base.scss";
@import "partials/layout/archives.scss";
@import "partials/layout/article.scss";
-@import "partials/layout/taxonomy.scss";
+@import "partials/layout/list.scss";
@import "partials/layout/404.scss";
@import "partials/layout/search.scss";

--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@ -1,6 +1,18 @@
 $defaultTagBackgrounds: #8ea885, #df7988, #0177b8, #ffb900, #6b69d6;
 $defaultTagColors: #fff, #fff, #fff, #fff, #fff;

+[data-scheme="light"] {
+    --pre-text-color: #272822;
+    --pre-background-color: #fafafa;
+    @import "partials/highlight/light.scss";
+}
+
+[data-scheme="dark"] {
+    --pre-text-color: #f8f8f2;
+    --pre-background-color: #272822;
+    @import "partials/highlight/dark.scss";
+}
+
 /*
 *   Global style
 */
@ -13,7 +25,6 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
        --main-top-padding: 50px;
    }

-
    --body-background: #f5f5fa;

    --accent-color: #34495e;
@ -25,7 +36,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;

    --section-separation: 40px;

-    @media (prefers-color-scheme: dark) {
+    [data-scheme="dark"] {
        --body-background: #303030;
        --accent-color: #ecf0f1;
        --accent-color-darker: #bdc3c7;
@ -72,7 +83,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
        --small-card-padding: 25px 20px;
    }

-    @media (prefers-color-scheme: dark) {
+    [data-scheme="dark"] {
        --card-background: #424242;
        --card-background-selected: rgba(255, 255, 255, 0.16);
        --card-text-color-main: rgba(255, 255, 255, 0.9);
@ -116,7 +127,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
    --table-border-color: #dadada;
    --tr-even-background-color: #efefee;

-    @media (prefers-color-scheme: dark) {
+    [data-scheme="dark"] {
        --code-background-color: #272822;
        --code-text-color: rgba(255, 255, 255, 0.9);

--- a/assets/ts/colorScheme.ts
+++ b/assets/ts/colorScheme.ts
@ -0,0 +1,86 @@
+type colorScheme = 'light' | 'dark' | 'auto';
+
+class StackColorScheme {
+    private localStorageKey = 'StackColorScheme';
+    private currentScheme: colorScheme;
+    private systemPreferScheme: colorScheme;
+
+    constructor(toggleEl: HTMLElement) {
+        this.bindMatchMedia();
+        this.currentScheme = this.getSavedScheme();
+
+        if (toggleEl)
+            this.bindClick(toggleEl);
+
+        if (document.body.style.transition == '')
+            document.body.style.setProperty('transition', 'background-color .3s ease');
+    }
+
+    private saveScheme() {
+        localStorage.setItem(this.localStorageKey, this.currentScheme);
+    }
+
+    private bindClick(toggleEl) {
+        toggleEl.addEventListener('click', (e) => {
+            if (this.isDark()) {
+                /// Disable dark mode
+                this.currentScheme = 'light';
+            }
+            else {
+                this.currentScheme = 'dark';
+            }
+
+            this.setBodyClass();
+
+            if (this.currentScheme == this.systemPreferScheme) {
+                /// Set to auto
+                this.currentScheme = 'auto';
+            }
+
+            this.saveScheme();
+        })
+    }
+
+    private isDark() {
+        return (this.currentScheme == 'dark' || this.currentScheme == 'auto' && this.systemPreferScheme == 'dark');
+    }
+
+    private dispatchEvent(colorScheme: colorScheme) {
+        const event = new CustomEvent('onColorSchemeChange', {
+            detail: colorScheme
+        });
+        window.dispatchEvent(event);
+    }
+
+    private setBodyClass() {
+        if (this.isDark()) {
+            document.body.dataset.scheme = 'dark';
+        }
+        else {
+            document.body.dataset.scheme = 'light';
+        }
+
+        this.dispatchEvent(document.body.dataset.scheme as colorScheme);
+    }
+
+    private getSavedScheme(): colorScheme {
+        const savedScheme = localStorage.getItem(this.localStorageKey);
+
+        if (savedScheme == 'light' || savedScheme == 'dark' || savedScheme == 'auto') return savedScheme;
+        else return 'auto';
+    }
+
+    private bindMatchMedia() {
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+            if (e.matches) {
+                this.systemPreferScheme = 'dark';
+            }
+            else {
+                this.systemPreferScheme = 'light';
+            }
+            this.setBodyClass();
+        });
+    }
+}
+
+export default StackColorScheme;
--- a/assets/ts/gallery.ts
+++ b/assets/ts/gallery.ts
@ -1,287 +1,132 @@
-import { loadScript, loadStyle } from './utils';
+declare global {
+    interface Window {
+        PhotoSwipe: any;
+        PhotoSwipeUI_Default: any
+    }
+}

-/**
- * Init PhotoSwipe
- * From: https://photoswipe.com/documentation/getting-started.html
- * @param gallerySelector 
- */
-var initPhotoSwipeFromDOM = function (gallerySelector) {
+interface PhotoSwipeItem {
+    w: number;
+    h: number;
+    src: string;
+    msrc: string;
+    title?: string;
+    el: HTMLElement;
+}

-    // parse slide data (url, title, size ...) from DOM elements 
-    // (children of gallerySelector)
-    var parseThumbnailElements = function (el) {
-        var thumbElements = el.childNodes,
-            numNodes = thumbElements.length,
-            items = [],
-            figureEl,
-            linkEl,
-            size,
-            item;
+class StackGallery {
+    private galleryUID: number;
+    private items: PhotoSwipeItem[] = [];

-        for (var i = 0; i < numNodes; i++) {
-
-            figureEl = thumbElements[i]; // <figure> element
-
-            // include only element nodes 
-            if (figureEl.nodeType !== 1) {
-                continue;
-            }
-
-            linkEl = figureEl.children[0]; // <a> element
-
-            size = linkEl.getAttribute('data-size').split('x');
-
-            // create slide object
-            item = {
-                src: linkEl.getAttribute('href'),
-                w: parseInt(size[0], 10),
-                h: parseInt(size[1], 10)
-            };
-
-
-
-            if (figureEl.children.length > 1) {
-                // <figcaption> content
-                item.title = figureEl.children[1].innerHTML;
-            }
-
-            if (linkEl.children.length > 0) {
-                // <img> thumbnail element, retrieving thumbnail url
-                item.msrc = linkEl.children[0].getAttribute('src');
-            }
-
-            item.el = figureEl; // save link to element for getThumbBoundsFn
-            items.push(item);
-        }
-
-        return items;
-    };
-
-    // find nearest parent element
-    var closest = function closest(el, fn) {
-        return el && (fn(el) ? el : closest(el.parentNode, fn));
-    };
-
-    // triggers when user clicks on thumbnail
-    var onThumbnailsClick = function (e) {
-        e = e || window.event;
-        e.preventDefault ? e.preventDefault() : e.returnValue = false;
-
-        var eTarget = e.target || e.srcElement;
-
-        // find root element of slide
-        var clickedListItem = closest(eTarget, function (el) {
-            return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
-        });
-
-        if (!clickedListItem) {
+    constructor(container: HTMLElement, galleryUID = 1) {
+        if (window.PhotoSwipe == undefined || window.PhotoSwipeUI_Default == undefined) {
+            console.error("PhotoSwipe lib not loaded.");
            return;
        }

-        // find index of clicked item by looping through all child nodes
-        // alternatively, you may define index via data- attribute
-        var clickedGallery = clickedListItem.parentNode,
-            childNodes = clickedListItem.parentNode.childNodes,
-            numChildNodes = childNodes.length,
-            nodeIndex = 0,
-            index;
+        this.galleryUID = galleryUID;

-        for (var i = 0; i < numChildNodes; i++) {
-            if (childNodes[i].nodeType !== 1) {
-                continue;
+        StackGallery.createGallery(container);
+        this.loadItems(container);
+        this.bindClick();
+    }
+
+    private loadItems(container: HTMLElement) {
+        this.items = [];
+
+        const figures = container.querySelectorAll('figure');
+
+        for (const el of figures) {
+            const figcaption = el.querySelector('figcaption'),
+                img = el.querySelector('img');
+
+            let aux: PhotoSwipeItem = {
+                w: parseInt(img.getAttribute('width')),
+                h: parseInt(img.getAttribute('height')),
+                src: img.src,
+                msrc: img.getAttribute('data-thumb') || img.src,
+                el: el
            }

-            if (childNodes[i] === clickedListItem) {
-                index = nodeIndex;
-                break;
+            if (figcaption) {
+                aux.title = figcaption.innerHTML;
            }
-            nodeIndex++;
+
+            this.items.push(aux);
        }
+    }

-        if (index >= 0) {
-            // open PhotoSwipe if valid index found
-            openPhotoSwipe(index, clickedGallery);
-        }
-        return false;
-    };
+    public static createGallery(container: HTMLElement) {
+        const figuresEl = container.querySelectorAll('figure');

-    // parse picture index and gallery index from URL (#&pid=1&gid=2)
-    var photoswipeParseHash = function () {
-        var hash = window.location.hash.substring(1),
-            params = {};
+        let currentGallery = [];

-        if (hash.length < 5) {
-            return params;
-        }
-
-        var vars = hash.split('&');
-        for (var i = 0; i < vars.length; i++) {
-            if (!vars[i]) {
-                continue;
+        for (const figure of figuresEl) {
+            if (!currentGallery.length) {
+                /// First iteration
+                currentGallery = [figure];
            }
-            var pair = vars[i].split('=');
-            if (pair.length < 2) {
-                continue;
+            else if (figure.previousElementSibling === currentGallery[currentGallery.length - 1]) {
+                /// Adjacent figures
+                currentGallery.push(figure);
+            }
+            else if (currentGallery.length) {
+                /// End gallery
+                StackGallery.wrap(currentGallery);
+                currentGallery = [figure];
            }
-            params[pair[0]] = pair[1];
        }

-        if (params.gid) {
-            params.gid = parseInt(params.gid, 10);
+        if (currentGallery.length > 0) {
+            StackGallery.wrap(currentGallery);
        }
+    }

-        return params;
-    };
+    /**
+     * Wrap adjacent figure tags with div.gallery
+     * @param figures 
+     */
+    public static wrap(figures: HTMLElement[]) {
+        const galleryContainer = document.createElement('div');
+        galleryContainer.className = 'gallery';

-    var openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) {
-        var pswpElement = document.querySelectorAll('.pswp')[0],
-            gallery,
-            options,
-            items;
+        const parentNode = figures[0].parentNode,
+            first = figures[0];

-        items = parseThumbnailElements(galleryElement);
+        parentNode.insertBefore(galleryContainer, first)

-        // define options (if needed)
-        options = {
+        for (const figure of figures) {
+            galleryContainer.appendChild(figure);
+        }
+    }

-            // define gallery index (for URL)
-            galleryUID: galleryElement.getAttribute('data-pswp-uid'),
-
-            getThumbBoundsFn: function (index) {
-                // See Options -> getThumbBoundsFn section of documentation for more info
-                var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
+    public open(index: number) {
+        const pswp = document.querySelector('.pswp') as HTMLDivElement;
+        const ps = new window.PhotoSwipe(pswp, window.PhotoSwipeUI_Default, this.items, {
+            index: index,
+            galleryUID: this.galleryUID,
+            getThumbBoundsFn: (index) => {
+                const thumbnail = this.items[index].el.getElementsByTagName('img')[0],
                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                    rect = thumbnail.getBoundingClientRect();

                return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
            }
+        });

-        };
-
-        // PhotoSwipe opened from URL
-        if (fromURL) {
-            if (options.galleryPIDs) {
-                // parse real index when custom PIDs are used 
-                // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
-                for (var j = 0; j < items.length; j++) {
-                    if (items[j].pid == index) {
-                        options.index = j;
-                        break;
-                    }
-                }
-            } else {
-                // in URL indexes start from 1
-                options.index = parseInt(index, 10) - 1;
-            }
-        } else {
-            options.index = parseInt(index, 10);
-        }
-
-        // exit if index not found
-        if (isNaN(options.index)) {
-            return;
-        }
-
-        if (disableAnimation) {
-            options.showAnimationDuration = 0;
-        }
-
-        // Pass data to PhotoSwipe and initialize it
-        gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
-        gallery.init();
-    };
-
-    // loop through all gallery elements and bind events
-    var galleryElements = document.querySelectorAll(gallerySelector);
-
-    for (var i = 0, l = galleryElements.length; i < l; i++) {
-        galleryElements[i].setAttribute('data-pswp-uid', i + 1);
-        galleryElements[i].onclick = onThumbnailsClick;
+        ps.init();
    }

-    // Parse URL and open gallery if it contains #&pid=3&gid=1
-    var hashData = photoswipeParseHash();
-    if (hashData.pid && hashData.gid) {
-        openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
-    }
-};
+    private bindClick() {
+        for (const [index, item] of this.items.entries()) {
+            const a = item.el.querySelector('a');

-/**
- * Wrap adjacent figure tags with div.gallery, and append style
- * Reference: https://github.com/xieranmaya/blog/issues/6
- * @param gallery 
- */
-function wrap(gallery: HTMLElement[]) {
-    let galleryContainer = document.createElement('div');
-    galleryContainer.className = 'gallery';
-
-    let parentNode = gallery[0].parentNode,
-        first = gallery[0];
-
-    parentNode.insertBefore(galleryContainer, first)
-
-    for (let j = 0; j < gallery.length; ++j) {
-        const width = gallery[j].querySelector('img').width,
-            height = gallery[j].querySelector('img').height;
-
-        gallery[j].style.flexGrow = `${width * 100 / height}`;
-        gallery[j].style.flexBasis = `${width * 240 / height}px`;
-
-        galleryContainer.appendChild(gallery[j]);
+            a.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.open(index);
+            })
+        }
    }
 }

-/**
- * Load PhotoSwipe library dynamically
- */
-function loadPhotoSwipe() {
-    const tasks = [
-        loadScript("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"),
-        loadScript("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"),
-        loadStyle("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css"),
-        loadStyle("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.min.css")
-    ];
-
-    return Promise.all(tasks);
-}
-
-/**
- * Create gallery
- * @param selector 
- */
-function createGallery(selector: string) {
-    const figures = document.querySelector(selector).querySelectorAll('figure');
-
-    if (figures.length) {
-        let currentGallery = [figures[0]];
-        for (let i = 1; i < figures.length; ++i) {
-            if (figures[i].previousElementSibling === currentGallery[currentGallery.length - 1]) {
-                /* Adjacent */
-                currentGallery.push(figures[i]);
-            }
-            else {
-                /* End gallery */
-                wrap(currentGallery);
-                currentGallery = [figures[i]];
-            }
-        }
-
-        if (currentGallery.length > 0) {
-            wrap(currentGallery);
-        }
-
-        /**
-         * Load PhotoSwipe library, and then initialize
-         */
-        loadPhotoSwipe().then(() => {
-            const pswp = document.querySelector('.pswp') as HTMLDivElement;
-            pswp.style.removeProperty('display');
-
-            initPhotoSwipeFromDOM(`${selector} .gallery`);
-        })
-    }
-}
-
-export {
-    createGallery
-}
+export default StackGallery;
--- a/assets/ts/main.ts
+++ b/assets/ts/main.ts
@ -5,11 +5,11 @@
 *   @website: https://jimmycai.com
 *   @link: https://github.com/CaiJimmy/hugo-theme-stack
 */
-
-import { createGallery } from "./gallery"
-import { getColor } from './color';
-import menu from './menu';
-import createElement from './createElement';
+import StackGallery from "ts/gallery";
+import { getColor } from 'ts/color';
+import menu from 'ts/menu';
+import createElement from 'ts/createElement';
+import StackColorScheme from 'ts/colorScheme';

 let Stack = {
    init: () => {
@ -18,24 +18,11 @@ let Stack = {
         */
        menu();

-        if (document.querySelector('.article-content')) {
-            createGallery('.article-content');
+        const articleContent = document.querySelector('.article-content') as HTMLElement;
+        if (articleContent) {
+            new StackGallery(articleContent);
        }

-        /**
-         * Add color to tags
-         */
-        document.querySelectorAll('.color-tag').forEach(async (tag: HTMLLinkElement) => {
-            const imageURL = tag.getAttribute('data-image'),
-                key = tag.getAttribute('data-key'),
-                hash = tag.getAttribute('data-hash');
-
-            const colors = await getColor(key, hash, imageURL);
-
-            tag.style.color = colors.Vibrant.bodyTextColor;
-            tag.style.background = colors.Vibrant.hex;
-        })
-
        /**
         * Add linear gradient background to tile style article
         */
@ -66,6 +53,8 @@ let Stack = {

            observer.observe(articleTile)
        }
+
+        new StackColorScheme(document.getElementById('dark-mode-toggle'));
    }
 }

--- a/assets/ts/utils.ts
+++ b/assets/ts/utils.ts
@ -1,43 +0,0 @@
-/**
- * Load script asynchronous
- * @return {Promise}
- * @param url 
- */
-const loadScript = function (url) {
-    return new Promise(resolve => {
-        var scriptTag = document.createElement('script');
-        scriptTag.src = url;
-
-        scriptTag.onload = () => {
-            resolve();
-        };
-
-        document.head.appendChild(scriptTag);
-    })
-};
-
-/**
- * Load style asynchronous
- * @return {Promise}
- * @param url 
- */
-const loadStyle = function (url) {
-    return new Promise(resolve => {
-        var link = document.createElement('link');
-        link.href = url;
-
-        link.type = "text/css";
-        link.rel = "stylesheet";
-
-        link.onload = () => {
-            resolve();
-        };
-
-        document.head.appendChild(link);
-    });
-};
-
-export {
-    loadScript,
-    loadStyle
-}
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@ -1,103 +0,0 @@
-baseurl = "https://example.com"
-languageCode = "en-us"
-theme = "hugo-theme-stack"
-paginate = 5
-title = "Example Site"
-disqusShortname = "hugo-theme-stack"            # Change it to your Disqus shortname before using
-DefaultContentLanguage = "en"                   # Theme i18n support
-
-[permalinks]
-    post = "/p/:slug/"
-    page = "/:slug/"
-    
-[params]
-    mainSections = ["post"]
-    featuredImageField = "image"
-    rssFullContent = true
-    
-    [params.dateFormat]
-        published = "Jan 02, 2006"
-        lastUpdated = "Jan 02, 2006 15:04 MST"
-        
-    [params.sidebar]
-        emoji = "🍥"
-        avatar = "img/avatar.png"
-        subtitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-        
-    [params.article]
-        math = false
-        [params.article.license]
-            enabled = true 
-            default = "Licensed under CC BY-NC-SA 4.0"
-            
-    [params.comments]
-        enabled = true
-        provider = "disqus"         # Available: disqus, utterances    
-        [params.comments.utterances]
-            repo = ""
-            issueTerm = "pathname"
-            label = ""             # Optional
-            theme = "preferred-color-scheme"
-            
-    [params.widgets]
-        enabled = ['search', 'archives', 'tag-cloud']
-        [params.widgets.archives]
-            limit = 5
-            ### Archives page relative URL
-            path = "archives"       
-        [params.widgets.tagCloud]
-            limit = 10
-            
-    [params.opengraph]
-        [params.opengraph.twitter]
-            site = ""
-            card = "summary_large_image"
-            
-    [params.defaultImage]
-        [params.defaultImage.opengraph]
-            enabled = false
-            local = false
-            src = ""
-            
-[menu]
-    [[menu.main]]
-        identifier = "home"
-        name = "Home"
-        url = "/"
-        weight = -100
-        pre = "home"
-    [[menu.main]]
-        identifier = "about-cn"
-        name = "About"
-        url = "about"
-        weight = -90
-        pre = "user"
-    [[menu.main]]
-        identifier = "archives"
-        name = "Archives"
-        url = "archives"
-        weight = -70
-        pre = "archives"
-    [[menu.main]]
-        identifier = "search"
-        name = "Search"
-        url = "search"
-        weight = -60
-        pre = "search"
-
-[related]
-    includeNewer = true
-    threshold = 60
-    toLower = false
-
-    [[related.indices]]
-        name = "tags"
-        weight = 100
-
-    [[related.indices]]
-        name = "categories"
-        weight = 200
-
-[markup]
-    [markup.highlight]
-        noClasses = false
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@ -0,0 +1,134 @@
+baseurl: https://example.com
+languageCode: en-us
+theme: hugo-theme-stack
+paginate: 5
+title: Example Site
+
+# Change it to your Disqus shortname before using
+disqusShortname: hugo-theme-stack
+
+# Theme i18n support
+# Available values: en, fr, id, ja, ko, pt-br, zh-cn
+DefaultContentLanguage: en
+
+permalinks:
+    post: /p/:slug/
+    page: /:slug/
+
+params:
+    mainSections:
+        - post
+    featuredImageField: image
+    rssFullContent: true
+    favicon:
+
+    footer:
+        since: 2020
+        customText:
+
+    dateFormat:
+        published: Jan 02, 2006
+        lastUpdated: Jan 02, 2006 15:04 MST
+
+    sidebar:
+        emoji: 🍥
+        subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        avatar:
+            local: true
+            src: img/avatar.png
+
+    article:
+        math: false
+        license:
+            enabled: true
+            default: Licensed under CC BY-NC-SA 4.0
+
+    comments:
+        enabled: true
+        provider: disqus
+        utterances:
+            repo:
+            issueTerm: pathname
+            label:
+            theme: preferred-color-scheme
+
+    widgets:
+        enabled:
+            - search
+            - archives
+            - tag-cloud
+
+        archives:
+            limit: 5
+            path: archives
+
+        tagCloud:
+            limit: 10
+
+    opengraph:
+        twitter:
+            # Your Twitter username
+            site:
+
+            # Available values: summary, summary_large_image
+            card: summary_large_image
+
+    defaultImage:
+        opengraph:
+            enabled: false
+            local: false
+            src:
+
+    colorScheme:
+        # Display toggle
+        toggle: true
+        
+        # Available values: auto, light, dark
+        default: auto
+
+    imageProcessing:
+        cover:
+            enabled: true
+        content:
+            enabled: true
+
+menu:
+    main:
+        - identifier: home
+          name: Home
+          url: /
+          weight: -100
+          pre: home
+
+        - identifier: about
+          name: About
+          url: about
+          weight: -90
+          pre: user
+
+        - identifier: archives
+          name: Archives
+          url: archives
+          weight: -70
+          pre: archives
+
+        - identifier: search
+          name: Search
+          url: search
+          weight: -60
+          pre: search
+
+related:
+    includeNewer: true
+    threshold: 60
+    toLower: false
+    indices:
+        - name: tags
+          weight: 100
+
+        - name: categories
+          weight: 200
+
+markup:
+    highlight:
+        noClasses: false
--- a/exampleSite/content/categories/Test/_index.md
+++ b/exampleSite/content/categories/Test/_index.md
@ -3,4 +3,7 @@ title: "Test"
 description: "This is a example category"
 slug: "test"
 image: "hutomo-abrianto-l2jk-uxb1BY-unsplash.jpg"
+style:
+    background: "#2a9d8f"
+    color: "#fff"
 ---
--- a/i18n/en.toml
+++ b/i18n/en.toml
@ -1,41 +0,0 @@
-[toggleMenu]
-    other = "Toggle Menu"
-    
-[relatedContents]
-    other = "Related contents"
-
-[lastUpdatedOn]
-    other ="Last updated on"
-
-[widgetArchivesTitle]
-    other = "Archives"
-
-[widgetArchivesMore]
-    other = "More"
-
-[widgetTagCloudTitle]
-    other = "Tags"
-
-[categoriesTitle]
-    other = "Categories"
-
-[notFoundTitle]
-    other = "Not Found"
-
-[notFoundSubtitle]
-    other = "This page does not exist."
-
-[searchTitle]
-    other = "Search"
-
-[searchPlaceholder]
-    other = "Type something..."
-
-[searchResultTitle]
-    other = "#PAGES_COUNT pages (#TIME_SECONDS seconds)"
-
-[footerBuiltWith]
-    other = "Built with {{ .Generator }}"
-    
-[footerDesignedBy]
-    other = "Theme {{ .Theme }} designed by {{ .DesignedBy }}"
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@ -0,0 +1,57 @@
+toggleMenu:
+    other: Toggle Menu
+
+darkMode:
+    other: Dark Mode
+
+list:
+    page:
+        one: "{{ .Count }} page"
+        other: "{{ .Count }} pages"
+
+    section:
+        other: Section
+
+    subsection:
+        one: Subsection
+        other: Subsections
+
+archives:
+    categories:
+        other: Categories
+
+article:
+    relatedContents:
+        other: Related contents
+    lastUpdatedOn:
+        other: Last updated on
+
+notFound:
+    title:
+        other: Not Found
+    subtitle:
+        other: This page does not exist.
+
+widget:
+    archives:
+        title:
+            other: Archives
+        more:
+            other: More
+    tagCloud:
+        title:
+            other: Tags
+
+search:
+    title:
+        other: Search
+    placeholder:
+        other: Type something...
+    resultTitle:
+        other: "#PAGES_COUNT pages (#TIME_SECONDS seconds)"
+
+footer:
+    builtWith:
+        other: Built with {{ .Generator }}
+    designedBy:
+        other: Theme {{ .Theme }} designed by {{ .DesignedBy }}
--- a/i18n/fr.toml
+++ b/i18n/fr.toml
@ -1,38 +0,0 @@
-[toggleMenu]
-    other = "Afficher le menu"
-
-[relatedContents]
-    other = "Contenus liés"
-
-[lastUpdatedOn]
-    other = "Dernière mise à jour le"
-
-[widgetArchivesTitle]
-    other = "Archives"
-
-[widgetArchivesMore]
-    other = "Autres"
-
-[widgetTagCloudTitle]
-    other = "Mots clés"
-
-[notFoundTitle]
-    other = "Page non trouvée"
-
-[notFoundSubtitle]
-    other = "Cette page n'existe pas."
-
-[searchTitle]
-    other = "Rechercher"
-
-[searchPlaceholder]
-    other = "Cherchez un article, une publication, etc."
-
-[searchResultTitle]
-    other = "#PAGES_COUNT pages (#TIME_SECONDS secondes)" 
-
-[footerBuiltWith]
-    other = "Généré avec {{ .Generator }}"
-
-[footerDesignedBy]
-    other = "Thème {{ .Theme }} conçu par {{ .DesignedBy }}"
--- a/i18n/fr.yaml
+++ b/i18n/fr.yaml
@ -0,0 +1,38 @@
+toggleMenu:
+    other: Afficher le menu
+
+article:
+    relatedContents:
+        other: Contenus liés
+    lastUpdatedOn:
+        other: Dernière mise à jour le
+
+notFound:
+    title:
+        other: Page non trouvée
+    subtitle:
+        other: Cette page n'existe pas.
+
+widget:
+    archives:
+        title:
+            other: Archives
+        more:
+            other: Autres
+    tagCloud:
+        title:
+            other: Mots clés
+
+search:
+    title:
+        other: Rechercher
+    placeholder:
+        other: Cherchez un article, une publication, etc.
+    resultTitle:
+        other: "#PAGES_COUNT pages (#TIME_SECONDS secondes)"
+
+footer:
+    builtWith:
+        other: Généré avec {{ .Generator }}
+    designedBy:
+        other: Thème {{ .Theme }} conçu par {{ .DesignedBy }}
--- a/i18n/id.yaml
+++ b/i18n/id.yaml
@ -0,0 +1,38 @@
+toggleMenu:
+    other: Tampilkan Menu
+
+article:
+    relatedContents:
+        other: Konten terkait
+    lastUpdatedOn:
+        other: Terakhir diperbarui pada
+
+notFound:
+    title:
+        other: Not Found
+    subtitle:
+        other: Halaman ini tidak ada.
+
+widget:
+    archives:
+        title:
+            other: Arsip
+        more:
+            other: Lebih
+    tagCloud:
+        title:
+            other: Tag
+
+search:
+    title:
+        other: Cari
+    placeholder:
+        other: Ketik sesuatu...
+    resultTitle:
+        other: "#PAGES_COUNT halaman (#TIME_SECONDS detik)"
+
+footer:
+    builtWith:
+        other: Dibangun dengan {{ .Generator }}
+    designedBy:
+        other: Tema {{ .Theme }} dirancang oleh {{ .DesignedBy }}
--- a/i18n/ja.toml
+++ b/i18n/ja.toml
@ -1,23 +0,0 @@
-[toggleMenu]
-    other = "メニューを開く・閉じる"
-    
-[relatedContents]
-    other = "関連するコンテンツ"
-
-[lastUpdatedOn]
-    other = "最終更新"
-
-[widgetArchivesTitle]
-    other = "アーカイブ"
-
-[widgetArchivesMore]
-    other = "さらに見る"
-
-[widgetTagCloudTitle]
-    other = "タグ"
-
-[notFoundTitle]
-    other = "404 Not Found"
-
-[notFoundSubtitle]
-    other = "指定されたページは存在しません。"
--- a/i18n/ja.yaml
+++ b/i18n/ja.yaml
@ -0,0 +1,39 @@
+toggleMenu:
+    other: メニューを開く・閉じる
+
+darkMode:
+    other: ダークモード
+
+archives:
+    categories:
+        other: 分類
+
+article:
+    relatedContents:
+        other: 関連するコンテンツ
+    lastUpdatedOn:
+        other: 最終更新
+
+notFound:
+    title:
+        other: 404 Not Found
+    subtitle:
+        other: 指定されたページは存在しません。
+
+widget:
+    archives:
+        title:
+            other: アーカイブ
+        more:
+            other: さらに見る
+    tagCloud:
+        title:
+            other: タグ
+
+search:
+    title:
+        other: サーチ
+    placeholder:
+        other: 入力...
+    resultTitle:
+        other: "#PAGES_COUNT 件 （#TIME_SECONDS 秒）"
--- a/i18n/ko.toml
+++ b/i18n/ko.toml
@ -1,38 +0,0 @@
-[toggleMenu]
-    other = "메뉴 여닫기"
-    
-[relatedContents]
-    other = "관련 글"
-
-[lastUpdatedOn]
-    other ="마지막 수정: "
-
-[widgetArchivesTitle]
-    other = "보관함"
-
-[widgetArchivesMore]
-    other = "더보기"
-
-[widgetTagCloudTitle]
-    other = "태그"
-
-[notFoundTitle]
-    other = "찾을 수 없음"
-
-[notFoundSubtitle]
-    other = "페이지를 찾을 수 없습니다."
-
-[searchTitle]
-    other = "검색"
-
-[searchPlaceholder]
-    other = "검색어를 입력하세요..."
-
-[searchResultTitle]
-    other = "#PAGES_COUNT 페이지 (#TIME_SECONDS 초)"
-
-[footerBuiltWith]
-    other = "{{ .Generator }}로 만듦"
-    
-[footerDesignedBy]
-    other = "{{ .DesignedBy }}의 {{ .Theme }} 테마 사용 중"
--- a/i18n/ko.yaml
+++ b/i18n/ko.yaml
@ -0,0 +1,38 @@
+toggleMenu:
+    other: 메뉴 여닫기
+
+article:
+    relatedContents:
+        other: 관련 글
+    lastUpdatedOn:
+        other: "마지막 수정: "
+
+notFound:
+    title:
+        other: 찾을 수 없음
+    subtitle:
+        other: 페이지를 찾을 수 없습니다.
+
+widget:
+    archives:
+        title:
+            other: 보관함
+        more:
+            other: 더보기
+    tagCloud:
+        title:
+            other: 태그
+
+search:
+    title:
+        other: 검색
+    placeholder:
+        other: 검색어를 입력하세요...
+    resultTitle:
+        other: "#PAGES_COUNT 페이지 (#TIME_SECONDS 초)"
+
+footer:
+    builtWith:
+        other: "{{ .Generator }}로 만듦"
+    designedBy:
+        other: "{{ .DesignedBy }}의 {{ .Theme }} 테마 사용 중"
--- a/i18n/pt-BR.toml
+++ b/i18n/pt-BR.toml
@ -1,41 +0,0 @@
-[toggleMenu]
-    other = "Alternar Menu"
-    
-[relatedContents]
-    other = "Conteúdos Relacionados"
-
-[lastUpdatedOn]
-    other ="Última atualização em"
-
-[widgetArchivesTitle]
-    other = "Arquivos"
-
-[widgetArchivesMore]
-    other = "Mais"
-
-[widgetTagCloudTitle]
-    other = "Tags"
-
-[categoriesTitle]
-    other = "Categorias"
-
-[notFoundTitle]
-    other = "Não Encontrado"
-
-[notFoundSubtitle]
-    other = "Esta página não existe."
-
-[searchTitle]
-    other = "Busca"
-
-[searchPlaceholder]
-    other = "Digite algo..."
-
-[searchResultTitle]
-    other = "#PAGES_COUNT páginas (#TIME_SECONDS segundos)"
-
-[footerBuiltWith]
-    other = "Criado com {{ .Generator }}"
-
-[footerDesignedBy]
-    other = "Tema {{ .Theme }} desenvolvido por {{ .DesignedBy }}"
--- a/i18n/pt-BR.yaml
+++ b/i18n/pt-BR.yaml
@ -0,0 +1,42 @@
+toggleMenu:
+    other: Alternar Menu
+
+archives:
+    categories:
+        other: Categorias
+
+article:
+    relatedContents:
+        other: Conteúdos Relacionados
+    lastUpdatedOn:
+        other: Última atualização em
+
+notFound:
+    title:
+        other: Não Encontrado
+    subtitle:
+        other: Esta página não existe.
+
+widget:
+    archives:
+        title:
+            other: Arquivos
+        more:
+            other: Mais
+    tagCloud:
+        title:
+            other: Tags
+
+search:
+    title:
+        other: Busca
+    placeholder:
+        other: Digite algo...
+    resultTitle:
+        other: "#PAGES_COUNT páginas (#TIME_SECONDS segundos)"
+
+footer:
+    builtWith:
+        other: Criado com {{ .Generator }}
+    designedBy:
+        other: Tema {{ .Theme }} desenvolvido por {{ .DesignedBy }}
--- a/i18n/ru.yaml
+++ b/i18n/ru.yaml
@ -0,0 +1,61 @@
+toggleMenu:
+    other: Показать/скрыть меню
+
+darkMode:
+    other: Тёмный режим
+
+list:
+    page:
+        one: "{{ .Count }} страница"
+        few: "{{ .Count }} страницы"
+        many: "{{ .Count }} страниц"
+        other: "{{ .Count }} страниц"
+
+    section:
+        other: Разделы
+
+    subsection:
+        one: Подраздел
+        few: Подраздела
+        many: Подразделов
+        other: Подразделов
+
+archives:
+    categories:
+        other: Категории
+
+article:
+    relatedContents:
+        other: Также рекомендуем
+    lastUpdatedOn:
+        other: Обновлено
+
+notFound:
+    title:
+        other: Не найшено
+    subtitle:
+        other: Запрашиваемая страница не существует
+
+widget:
+    archives:
+        title:
+            other: Архивы
+        more:
+            other: Ещё
+    tagCloud:
+        title:
+            other: Теги
+
+search:
+    title:
+        other: Поиск
+    placeholder:
+        other: Введите что-нибудь...
+    resultTitle:
+        other: "Найдено #PAGES_COUNT страниц (за #TIME_SECONDS с.)"
+
+footer:
+    builtWith:
+        other: Создано при помощи {{ .Generator }}
+    designedBy:
+        other: Тема {{ .Theme }} дизайн {{ .DesignedBy }}
--- a/i18n/tr.yaml
+++ b/i18n/tr.yaml
@ -0,0 +1,57 @@
+toggleMenu:
+    other: Menüyü Gizle
+
+darkMode:
+    other: Koyu Mod
+
+list:
+    page:
+        one: "{{ .Count }} makale"
+        other: "{{ .Count }} makale"
+
+    section:
+        other: Bölüm
+
+    subsection:
+        one: Alt bölüm
+        other: Alt bölümler
+
+archives:
+    categories:
+        other: Kategoriler
+
+article:
+    relatedContents:
+        other: Alakalı içerikler
+    lastUpdatedOn:
+        other: Son güncelleme
+
+notFound:
+    title:
+        other: Bulunamadı
+    subtitle:
+        other: Aradığınız sayfa mevcut değil.
+
+widget:
+    archives:
+        title:
+            other: Arşiv
+        more:
+            other: Daha fazla
+    tagCloud:
+        title:
+            other: Etiketler
+
+search:
+    title:
+        other: Arama
+    placeholder:
+        other: Birşeyler yazın...
+    resultTitle:
+        other: "#PAGES_COUNT sayfa (#TIME_SECONDS saniye)"
+
+footer:
+    builtWith:
+        other: "{{ .Generator }} ile oluşturuldu."
+    designedBy:
+        other: "{{ .Theme }} teması {{ .DesignedBy }} tarafından tasarlandı"
--- a/i18n/zh-CN.toml
+++ b/i18n/zh-CN.toml
@ -1,32 +0,0 @@
-[toggleMenu]
-    other = "切换菜单"
-    
-[relatedContents]
-    other = "相关文章"
-
-[lastUpdatedOn]
-    other ="最后更新于"
-
-[widgetArchivesTitle]
-    other = "归档"
-
-[widgetArchivesMore]
-    other = "更多"
-
-[widgetTagCloudTitle]
-    other = "标签云"
-
-[notFoundTitle]
-    other = "404 错误"
-
-[notFoundSubtitle]
-    other = "页面不存在"
-
-[searchTitle]
-    other = "搜索"
-
-[searchPlaceholder]
-    other = "输入关键词..."
-
-[searchResultTitle]
-    other = "#PAGES_COUNT 个结果 （用时 #TIME_SECONDS 秒）"
--- a/i18n/zh-CN.yaml
+++ b/i18n/zh-CN.yaml
@ -0,0 +1,39 @@
+toggleMenu:
+    other: 切换菜单
+
+darkMode:
+    other: 暗色模式
+
+archives:
+    categories:
+        other: 分类
+
+article:
+    relatedContents:
+        other: 相关文章
+    lastUpdatedOn:
+        other: 最后更新于
+
+notFound:
+    title:
+        other: 404 错误
+    subtitle:
+        other: 页面不存在
+
+widget:
+    archives:
+        title:
+            other: 归档
+        more:
+            other: 更多
+    tagCloud:
+        title:
+            other: 标签云
+
+search:
+    title:
+        other: 搜索
+    placeholder:
+        other: 输入关键词...
+    resultTitle:
+        other: "#PAGES_COUNT 个结果 （用时 #TIME_SECONDS 秒）"
--- a/layouts/404.html
+++ b/layouts/404.html
@ -1,7 +1,7 @@
 {{ define "main" }}
    <div class="not-found-card">
-        <h1 class="article-title">{{ T "notFoundTitle" }}</h1>
-        <h2 class="article-subtitle">{{ T "notFoundSubtitle" }}</h2>
+        <h1 class="article-title">{{ T "notFound.title" }}</h1>
+        <h2 class="article-subtitle">{{ T "notFound.subtitle" }}</h2>
    </div>
    {{ partialCached "footer/footer" . }}
 {{ end }}
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@ -1,19 +1,27 @@
 {{- $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}}
 {{- if $image -}}
-	{{- $small := $image.Resize "480x" -}}
-	{{- $big := $image.Resize "1024x" -}}
 	{{- $alt := .PlainText | safeHTML -}}
-	{{- $caption := "" -}}
-	{{- with $alt -}}
-	{{- $caption = . | safeHTML -}}
-	{{- end -}}
-	<figure>
+	<figure style="flex-grow: {{ div (mul $image.Width 100) $image.Height }}; flex-basis: {{ div (mul $image.Width 240) $image.Height }}px">
 		<a href="{{ $image.RelPermalink }}" data-size="{{ $image.Width }}x{{ $image.Height }}">
-			<img srcset="{{ $small.RelPermalink }} 480w, {{ $big.RelPermalink }} 1024w"
-				src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy"
-				alt="{{ if $alt }}{{ $alt }}{{ else if $caption }}{{ $caption | markdownify | plainify }}{{ else }}&nbsp;{{ end }}">
+			{{- $Permalink := $image.RelPermalink -}}
+			{{- $Width := $image.Width -}}
+			{{- $Height := $image.Height -}}
+			{{- $Srcset := "" -}}
+
+			{{- if (default true .Page.Site.Params.imageProcessing.content.enabled) -}}
+				{{- $small := $image.Resize "480x" -}}
+				{{- $big := $image.Resize "1024x" -}}
+				{{- $Srcset = printf "%s 480w, %s 1024w" $small.RelPermalink $big.RelPermalink -}}
+			{{- end -}}
+			
+			<img src="{{ $Permalink }}"
+				{{ with $Srcset }}srcset="{{ . }}"{{ end }}
+				width="{{ $Width }}"
+				height="{{ $Height }}"
+				loading="lazy"
+				{{ with $alt }}alt="{{ . }}"{{ end }}>
 		</a>
-		{{ with $caption }}
+		{{ with $alt }}
 		<figcaption>{{ . | markdownify }}</figcaption>
 		{{ end }}
 	</figure>
--- a/layouts/_default/archives.html
+++ b/layouts/_default/archives.html
@ -2,8 +2,8 @@
 {{ define "main" }}
    {{ $categories := ($.Site.GetPage "taxonomyTerm" "categories").Pages }}
    {{ if $categories }}
-    <h2 class="section-title">{{ T "categoriesTitle" }}</h2>
-    <div class="category-list">
+    <h2 class="section-title">{{ T "archives.categories" }}</h2>
+    <div class="subsection-list">
        <div class="article-list--tile">
            {{ range $categories }}
                {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }}
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -5,7 +5,8 @@
        {{- block "head" . -}}{{ end }}
    </head>
    <body class="{{ block `body-class` . }}{{ end }}">
-        <div class="container flex on-phone--column align-items--flex-start {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }} {{ block `container-class` . }}{{end}}">
+        {{- partial "head/colorScheme" . -}}
+        <div class="container main-container flex on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }} {{ block `container-class` . }}{{end}}">
            {{ partial "sidebar/left.html" . }}
            <main class="main full-width">
                {{- block "main" . }}{{- end }}
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@ -1,10 +1,63 @@
 {{ define "main" }}
-    <div class="widget">
-        <h3 class="widget-title">{{ .Title }}</h3>
+    <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>
+            {{ 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>

+    {{ $subsections := .Sections }}
+    {{ 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 }}
+            </div>
+        </div>
+    {{ end }}
+    
+    {{/* List only pages that are not a subsection */}}
+    {{ $paginator := .Paginate (.Pages | complement $subsections) }}
    <section class="article-list--compact">
-        {{ range .Paginator.Pages }}
+        {{ range $paginator.Pages }}
            {{ partial "article-list/compact" . }}
        {{ end }}
    </section>
--- a/layouts/_default/term.html
+++ b/layouts/_default/term.html
@ -1,37 +0,0 @@
-{{ define "main" }}
-    <h3 class="taxonomy-type section-title">{{ .Type | singularize | humanize }}</h3>
-    <div class="taxonomy-card">
-        <div class="taxonomy-details">
-            <h3 class="taxonomy-count">{{ len .Pages }} post{{ if gt (len .Pages) 1 }}s{{ end }}</h3>
-            <h1 class="taxonomy-term">{{ .Title }}</h1>
-            {{ with .Params.description }}
-                <h2 class="taxonomy-description">{{ . }}</h2>
-            {{ end }}
-        </div>
-
-        {{- $image := partialCached "helper/image" (dict "Context" . "Type" "taxonomy") .RelPermalink "taxonomy" -}}
-        {{ if $image.exists }}
-            <div class="taxonomy-image">
-                {{ if $image.resource }}   
-                    {{- $thumbnail := $image.resource.Fill "120x120" -}}
-                    <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}"
-                        height="{{ $thumbnail.Height }}" loading="lazy">
-                {{ else }}
-                    <img src="{{ $image.permalink }}" loading="lazy">
-                {{ end }}
-            </div>
-        {{ end }}
-    </div>
-    
-    <section class="article-list--compact">
-        {{ $v2 := where .Pages "Params.hidden" "!=" true }}
-        {{ $pag := .Paginate (.Pages) }}
-        {{ range $pag.Pages }}
-            {{ partial "article-list/compact" . }}
-        {{ end }}
-    </section>
-    
-    {{- partial "pagination.html" . -}}
-
-    {{ partialCached "footer/footer" . }}
-{{ end }}
--- a/layouts/index.html
+++ b/layouts/index.html
@ -11,7 +11,7 @@
    </section>

    {{- partial "pagination.html" . -}}
-    {{ partialCached "footer/footer" . }}
+    {{- partial "footer/footer" . -}}
 {{ end }}

 {{ define "right-sidebar" }}
--- a/layouts/page/search.html
+++ b/layouts/page/search.html
@ -7,8 +7,8 @@
 {{ define "main" }}
 <form action="{{ .Permalink }}" class="search-form"{{ with .OutputFormats.Get "json" -}} data-json="{{ .Permalink }}"{{- end }}>
    <p>
-        <label>{{ T "searchTitle" }}</label>
-        <input name="keyword" placeholder="{{ T `searchPlaceholder` }}" />
+        <label>{{ T "search.title" }}</label>
+        <input name="keyword" placeholder="{{ T `search.placeholder` }}" />
    </p>

    <button title="Search">
@ -20,7 +20,7 @@
 <div class="search-result--list article-list--compact"></div>

 <script>
-    window.searchResultTitleTemplate = "{{ T `searchResultTitle` }}"
+    window.searchResultTitleTemplate = "{{ T `search.resultTitle` }}"
 </script>

 {{- $opts := dict "minify" hugo.IsProduction "JSXFactory" "createElement" -}}
--- a/layouts/page/search.json
+++ b/layouts/page/search.json
@ -8,11 +8,17 @@
    {{- $data := dict "title" .Title "date" .Date "permalink" .Permalink "content" (.Plain) -}}

    {{- $image := partialCached "helper/image" (dict "Context" . "Type" "articleList") .RelPermalink "articleList" -}}
-    {{- if and $image.exists $image.resource -}}
-        {{- $thumbnail := $image.resource.Fill "120x120" -}}
-        {{- $image := dict "image" (absURL $thumbnail.Permalink) -}}
-        {{- $data = merge $data $image -}}
-    {{ end }}
+    {{- if $image.exists -}}
+        {{- $imagePermalink := "" -}}
+        {{- if and $image.resource (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
+            {{- $thumbnail := $image.resource.Fill "120x120" -}}
+            {{- $imagePermalink = (absURL $thumbnail.Permalink) -}}
+        {{- else -}}
+            {{- $imagePermalink = $image.permalink -}}
+        {{- end -}}
+        
+        {{- $data = merge $data (dict "image" (absURL $imagePermalink)) -}}
+    {{- end -}}

    {{- $result = $result | append $data -}}
 {{- end -}}
--- a/layouts/partials/article-list/compact.html
+++ b/layouts/partials/article-list/compact.html
@ -15,9 +15,21 @@
        {{ if $image.exists }}
            <div class="article-image">
                {{ if $image.resource }}
-                    {{- $thumbnail := $image.resource.Fill "120x120" -}}
-                    <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}"
-                        height="{{ $thumbnail.Height }}" loading="lazy">
+                    {{- $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" alt="Featured image of post {{ .Title }}" />
                {{ end }}
--- a/layouts/partials/article-list/default.html
+++ b/layouts/partials/article-list/default.html
@ -1,22 +1,4 @@
 {{ $image := partialCached "helper/image" (dict "Context" . "Type" "articleList") .RelPermalink "articleList" }}
 <article class="{{ if $image.exists }}has-image{{ end }}">
-    {{ if $image.exists }}
-        <div class="article-image">
-            <a href="{{ .RelPermalink }}">
-                {{ if $image.resource }}
-                    {{- $thumbnail := $image.resource.Fill "800x250" -}}
-                    {{- $thumbnailRetina := $image.resource.Fill "1600x500" -}}
-
-                    <img src="{{ $thumbnail.RelPermalink }}" 
-                        srcset="{{ $thumbnail.RelPermalink }} 800w, {{ $thumbnailRetina.RelPermalink }} 1600w"
-                        width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}" loading="lazy"
-                        alt="Featured image of post {{ .Title }}" />
-                {{ else }}
-                    <img src="{{ $image.permalink }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
-                {{ end }}
-            </a>
-        </div>
-    {{ end }}
-
-    {{ partialCached "article/components/details" . .RelPermalink }}
+    {{ partial "article/components/header" . }}
 </article>
--- a/layouts/partials/article-list/tile.html
+++ b/layouts/partials/article-list/tile.html
@ -6,10 +6,23 @@
            <div class="article-image">
                {{ if $image.resource }}
                    {{- $imageRaw := $image.resource | resources.Fingerprint "md5" -}}
-                    {{- $thumbnail := $imageRaw.Fill .size -}}
+                    {{- $Permalink := $imageRaw.RelPermalink -}}
+                    {{- $Width := $imageRaw.Width -}}
+                    {{- $Height := $imageRaw.Height -}}

-                    <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}" 
-                        loading="lazy" data-key="{{ .context.Slug }}" data-hash="{{ $imageRaw.Data.Integrity }}">
+                    {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
+                        {{- $thumbnail := $imageRaw.Fill .size -}}
+                        {{- $Permalink = $thumbnail.RelPermalink -}}
+                        {{- $Width = $thumbnail.Width -}}
+                        {{- $Height = $thumbnail.Height -}}
+                    {{- end -}}
+                    
+                    <img src="{{ $Permalink }}" 
+                        width="{{ $Width }}" 
+                        height="{{ $Height }}" 
+                        loading="lazy" 
+                        data-key="{{ .context.Slug }}" 
+                        data-hash="{{ $imageRaw.Data.Integrity }}">
                {{ else }}
                    <img src="{{ $image.permalink }}" loading="lazy" data-key="{{ .context.Slug }}" data-hash="{{ $image.permalink }}"/>
                {{ end }}
--- a/layouts/partials/article/components/details.html
+++ b/layouts/partials/article/components/details.html
@ -1,22 +1,10 @@
-{{ $image := partialCached "helper/image" (dict "Context" . "Type" "article") .RelPermalink "article" }}
-{{- $context := . -}}
 <div class="article-details">
    {{ if .Params.categories }}
    <header class="article-category">
        {{ range (.GetTerms "categories") }}
-            {{ if and $image.exists $image.resource }}
-                {{- $imageRaw := $image.resource | resources.Fingerprint "md5"  -}}
-                {{- $20x := $imageRaw.Fill "20x20 smart"  -}}
-                <a href="{{ .RelPermalink }}" 
-                    class="color-tag"
-                    data-image="{{ $20x.RelPermalink }}" 
-                    data-key="{{ $context.Slug }}" 
-                    data-hash="{{ $imageRaw.Data.Integrity }}">
-                    {{ .LinkTitle }}
-                </a>
-            {{ else }}
-                <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
-            {{ end }}
+            <a href="{{ .RelPermalink }}" {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};"{{ end }}>
+                {{ .LinkTitle }}
+            </a>
        {{ end }}
    </header>
    {{ end }}
--- a/layouts/partials/article/components/footer.html
+++ b/layouts/partials/article/components/footer.html
@ -12,7 +12,7 @@
    <section class="article-time">
        {{ partial "helper/icon" "clock" }}
        <span class="article-time--modified">
-            {{ T "lastUpdatedOn" }} {{ .Lastmod.Format ( or .Site.Params.dateFormat.lastUpdated "Jan 02, 2006 15:04 MST" ) }}
+            {{ T "article.lastUpdatedOn" }} {{ .Lastmod.Format ( or .Site.Params.dateFormat.lastUpdated "Jan 02, 2006 15:04 MST" ) }}
        </span>
    </section>
    {{- end -}}
--- a/layouts/partials/article/components/header.html
+++ b/layouts/partials/article/components/header.html
@ -2,16 +2,32 @@
    {{- $image := partialCached "helper/image" (dict "Context" . "Type" "article") .RelPermalink "article" -}}
    {{ if $image.exists }}
        <div class="article-image">
-            {{ if $image.resource }}
-                {{- $tablet := $image.resource.Resize "1024x" -}}
-                {{- $desktop := $image.resource.Resize "2000x" -}}
+            <a href="{{ .RelPermalink }}">
+                {{ if $image.resource }}
+                    {{- $Permalink := $image.resource.RelPermalink -}}
+                    {{- $Width := $image.resource.Width -}}
+                    {{- $Height := $image.resource.Height -}}
+                    {{- $Srcset := "" -}}
+                    
+                    {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
+                        {{- $thumbnail := $image.resource.Resize "800x" -}}
+                        {{- $thumbnailRetina := $image.resource.Resize "1600x" -}}
+                        {{- $Srcset = printf "%s 800w, %s 1600w" $thumbnail.RelPermalink $thumbnailRetina.RelPermalink -}}
+                        {{- $Permalink = $thumbnail.RelPermalink -}}
+                        {{- $Width = $thumbnail.Width -}}
+                        {{- $Height = $thumbnail.Height -}}
+                    {{- end -}}

-                <img srcset="{{ $tablet.RelPermalink }} 1024w, {{ $desktop.RelPermalink }} 2000w"
-                    src="{{ $desktop.RelPermalink }}" width="{{ $image.resource.Width }}" height="{{ $image.resource.Height }}" loading="lazy"
-                    alt="Featured image of post {{ .Title }}" />
-            {{ else }}
-                <img src="{{ $image.permalink }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
-            {{ end }}
+                    <img src="{{ $Permalink }}"
+                        {{ with $Srcset }}srcset="{{ . }}"{{ end }}
+                        width="{{ $Width }}" 
+                        height="{{ $Height }}" 
+                        loading="lazy"
+                        alt="Featured image of post {{ .Title }}" />
+                {{ else }}
+                    <img src="{{ $image.permalink }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
+                {{ end }}
+            </a>
        </div>
    {{ end }}

--- a/layouts/partials/article/components/math.html
+++ b/layouts/partials/article/components/math.html
@ -5,4 +5,17 @@
    crossorigin="anonymous"></script>
 <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js"
    integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
-    onload="renderMathInElement(document.querySelector(`.article-content`));"></script>
+    onload="StackLaTeX()"></script>
+
+<script>
+    function StackLaTeX() {
+        renderMathInElement(document.querySelector(`.article-content`), {
+            delimiters: [
+                { left: "$$", right: "$$", display: true },
+                { left: "$", right: "$", display: false },
+                { left: "\\(", right: "\\)", display: false },
+                { left: "\\[", right: "\\]", display: true }
+            ]
+        });
+    }
+</script>
--- a/layouts/partials/article/components/photoswipe.html
+++ b/layouts/partials/article/components/photoswipe.html
@ -1,5 +1,5 @@
 <!-- Root element of PhotoSwipe. Must have class pswp. -->
-<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true" style="display:none">
+<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
@ -63,4 +63,10 @@

    </div>

-</div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.css">
--- a/layouts/partials/article/components/related-contents.html
+++ b/layouts/partials/article/components/related-contents.html
@ -1,7 +1,7 @@
 <aside class="related-contents--wrapper">
    {{ $related := (where (.Site.RegularPages.Related .) "Params.hidden" "!=" true) | first 5 }}
    {{ with $related }}
-        <h2 class="section-title">{{ T "relatedContents" }}</h2>
+        <h2 class="section-title">{{ T "article.relatedContents" }}</h2>
        <div class="related-contents">
            <div class="flex article-list--tile">
                {{ range . }}
--- a/layouts/partials/footer/components/highlight.html
+++ b/layouts/partials/footer/components/highlight.html
@ -1,4 +0,0 @@
-{{- $light := resources.Get "css/highlight/light.css" | minify -}}
-{{- $dark := resources.Get "css/highlight/dark.css" | minify -}}
-<link rel="stylesheet" href="{{ $light.RelPermalink }}" media="(prefers-color-scheme: light)">
-<link rel="stylesheet" href="{{ $dark.RelPermalink }}" media="(prefers-color-scheme: dark)">
--- a/layouts/partials/footer/footer.html
+++ b/layouts/partials/footer/footer.html
@ -1,12 +1,23 @@
-{{- $ThemeVersion := "1.1.0" -}}
+{{- $ThemeVersion := "2.0.1" -}}
 <footer class="site-footer">
-    <section class="copyright">&copy; {{ now.Format "2006" }} {{ .Site.Title }}</section>
+    <section class="copyright">
+        &copy; 
+        {{ if and (.Site.Params.footer.since) (ne .Site.Params.footer.since (int (now.Format "2006"))) }}
+            {{ .Site.Params.footer.since }} - 
+        {{ end }}
+        {{ now.Format "2006" }} {{ .Site.Title }}
+    </section>
+    
    <section class="powerby">
+        {{ with .Site.Params.footer.customText }}
+            {{ . | safeHTML }} <br/>
+        {{ end }}
+
        {{- $Generator := `<a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a>` -}}
        {{- $Theme := printf `<b><a href="https://github.com/CaiJimmy/hugo-theme-stack" target="_blank" rel="noopener" data-version="%s">Stack</a></b>` $ThemeVersion -}}
        {{- $DesignedBy := `<a href="https://jimmycai.com" target="_blank" rel="noopener">Jimmy</a>` -}}

-        {{ T "footerBuiltWith" (dict "Generator" $Generator) | safeHTML }} <br />
-        {{ T "footerDesignedBy" (dict "Theme" $Theme "DesignedBy" $DesignedBy) | safeHTML }}
+        {{ T "footer.builtWith" (dict "Generator" $Generator) | safeHTML }} <br />
+        {{ T "footer.designedBy" (dict "Theme" $Theme "DesignedBy" $DesignedBy) | safeHTML }}
    </section>
 </footer>
--- a/layouts/partials/footer/include.html
+++ b/layouts/partials/footer/include.html
@ -1,4 +1,3 @@
 {{ partialCached "footer/components/script.html" . }}
 {{ partialCached "footer/components/custom-font.html" . }}
-{{ partialCached "footer/components/highlight.html" . }}
 {{ partial "footer/custom.html" . }}
--- a/layouts/partials/head/colorScheme.html
+++ b/layouts/partials/head/colorScheme.html
@ -0,0 +1,39 @@
+{{- $defaultColorScheme := default "auto" .Site.Params.colorScheme.default -}}
+{{- if not (default false .Site.Params.colorScheme.toggle) -}}
+    {{/* If toggle is disabled, force default scheme */}}
+    <script>
+        (function() {
+            const colorSchemeKey = 'StackColorScheme';
+            localStorage.setItem(colorSchemeKey, "{{ $defaultColorScheme }}");
+        })();
+    </script>
+{{- else -}}
+    {{/* Otherwise set to default scheme only if no preference is set by user */}}
+    <script>
+        (function() {
+            const colorSchemeKey = 'StackColorScheme';
+            if(!localStorage.getItem(colorSchemeKey)){
+                localStorage.setItem(colorSchemeKey, "{{ $defaultColorScheme }}");
+            }
+        })();
+    </script>
+{{- end -}}
+
+<script>
+    (function() {
+        const colorSchemeKey = 'StackColorScheme';
+        const colorSchemeItem = localStorage.getItem(colorSchemeKey);
+        const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
+
+        if (colorSchemeItem == 'dark' || colorSchemeItem === 'auto' && supportDarkMode) {
+            /**
+             * Enable dark mode if:
+             * 1. If dark mode is set already (in local storage)
+             * 2. Auto mode & prefere color scheme is dark
+             */
+            document.body.dataset.scheme = 'dark';
+        } else {
+            document.body.dataset.scheme = 'light';
+        }
+    })();
+</script>
--- a/layouts/partials/head/head.html
+++ b/layouts/partials/head/head.html
@ -17,4 +17,8 @@
    <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
 {{- end -}}

+{{ with .Site.Params.favicon }}
+    <link rel="shortcut icon" href="{{ . }}" />
+{{ end }}
+
 {{- partial "head/custom.html" . -}}
--- a/layouts/partials/head/opengraph/provider/base.html
+++ b/layouts/partials/head/opengraph/provider/base.html
@ -6,35 +6,35 @@
 <meta property='og:url' content='{{ .Permalink }}'>
 <meta property='og:site_name' content='{{ .Site.Title }}'>
 <meta property='og:type' content='
-	{{- if .IsPage -}}
-		article
-  	{{- else -}}
-		website
-  	{{- end -}}
+    {{- if .IsPage -}}
+        article
+    {{- else -}}
+        website
+    {{- end -}}
 '>

 {{- with .Params.locale -}}
-  	<meta property='og:locale' content='{{ . }}'>
+    <meta property='og:locale' content='{{ . }}'>
 {{- end -}}

 {{- if .IsPage -}}
-  	<meta property='article:section' content='{{ .Section | title }}' />
-	{{- range .Params.tags -}}
-		<meta property='article:tag' content='{{ . }}' />
-	{{- end -}}
+    <meta property='article:section' content='{{ .Section | title }}' />
+    {{- range .Params.tags -}}
+        <meta property='article:tag' content='{{ . }}' />
+    {{- end -}}
 {{- end -}}

 {{- if .IsPage -}}
-	{{- if not .Date.IsZero -}}
-		<meta property='article:published_time' content='{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}'/>
-	{{- end -}}
-	{{- if not .Lastmod.IsZero -}}
-		<meta property='article:modified_time' content='{{ .Lastmod.Format "2006-01-02T15:04:05-07:00" | safeHTML }}'/>
-	{{- end -}}
+    {{- if not .Date.IsZero -}}
+        <meta property='article:published_time' content='{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}'/>
+    {{- end -}}
+    {{- if not .Lastmod.IsZero -}}
+        <meta property='article:modified_time' content='{{ .Lastmod.Format "2006-01-02T15:04:05-07:00" | safeHTML }}'/>
+    {{- end -}}
 {{- else -}}
-	{{- if not .Site.LastChange.IsZero -}}
-		<meta property='og:updated_time' content='{{ .Site.LastChange.Format " 2006-01-02T15:04:05-07:00 " | safeHTML }}'/>
-	{{- end -}}
+    {{- if not .Site.LastChange.IsZero -}}
+        <meta property='og:updated_time' content='{{ .Site.LastChange.Format " 2006-01-02T15:04:05-07:00 " | safeHTML }}'/>
+    {{- end -}}
 {{- end -}}

 {{ $image := partialCached "helper/image" (dict "Context" . "Type" "opengraph") .RelPermalink "opengraph" }}
--- a/layouts/partials/head/opengraph/provider/twitter.html
+++ b/layouts/partials/head/opengraph/provider/twitter.html
@ -10,6 +10,6 @@

 {{- $image := partialCached "helper/image" (dict "Context" . "Type" "opengraph") .RelPermalink "opengraph" -}}
 {{- if $image.exists -}}
-	<meta name="twitter:card" content="{{ .Site.Params.opengraph.twitter.card }}">
-	<meta name="twitter:image" content='{{ absURL $image.permalink }}' />
+    <meta name="twitter:card" content="{{ default `summary_large_image` .Site.Params.opengraph.twitter.card }}">
+    <meta name="twitter:image" content='{{ absURL $image.permalink }}' />
 {{- end -}}
--- a/layouts/partials/sidebar/left.html
+++ b/layouts/partials/sidebar/left.html
@ -8,14 +8,18 @@
    <header class="site-info">
        {{ with .Site.Params.sidebar.avatar }}
            <figure class="site-avatar">
-                {{ $avatar := resources.Get (.) }}
-
-                {{ if $avatar }}
-                    {{ $avatarResized := $avatar.Resize "300x300" }}
-                    <img src="{{ $avatarResized.RelPermalink }}" width="{{ $avatarResized.Width }}"
-                        height="{{ $avatarResized.Height }}" class="site-logo" loading="lazy" alt="Avatar">
+                {{ if not .local }}
+                    <img src="{{ .src }}" width="300" height="300" class="site-logo" loading="lazy" alt="Avatar">
                {{ else }}
-                    {{ errorf "Failed loading avatar from %q" . }}
+                    {{ $avatar := resources.Get (.src) }}
+                    
+                    {{ if $avatar }}
+                        {{ $avatarResized := $avatar.Resize "300x" }}
+                        <img src="{{ $avatarResized.RelPermalink }}" width="{{ $avatarResized.Width }}"
+                            height="{{ $avatarResized.Height }}" class="site-logo" loading="lazy" alt="Avatar">
+                    {{ else }}
+                        {{ errorf "Failed loading avatar from %q" . }}
+                    {{ end }}
                {{ end }}

                {{ with $.Site.Params.sidebar.emoji }}
@ -41,5 +45,13 @@
            </a>
        </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 }}
    </ol>
 </aside>
--- a/layouts/partials/widget/archives.html
+++ b/layouts/partials/widget/archives.html
@ -2,7 +2,7 @@
    <div class="widget-icon">
        {{ partial "helper/icon" "infinity" }}
    </div>
-    <h2 class="widget-title section-title">{{ T "widgetArchivesTitle" }}</h2>
+    <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 }}
@ -15,7 +15,7 @@
            <div class="archives-year">
                <a href="{{ $.Site.Params.widgets.archives.path | relLangURL }}#{{ $id }}">
                    {{ if eq $index $.Site.Params.widgets.archives.limit }}
-                        <span class="year">{{ T "widgetArchivesMore" }}</span>
+                        <span class="year">{{ T "widget.archives.more" }}</span>
                    {{ else }}
                        <span class="year">{{ .Key }}</span>
                        <span class="count">{{ len $item.Pages }}</span>
--- a/layouts/partials/widget/search.html
+++ b/layouts/partials/widget/search.html
@ -1,7 +1,7 @@
 <form action="/search" class="search-form widget" {{ with .OutputFormats.Get "json" -}}data-json="{{ .Permalink }}" {{- end }}>
    <p>
-        <label>{{ T "searchTitle" }}</label>
-        <input name="keyword" required placeholder="{{ T `searchPlaceholder` }}" />
+        <label>{{ T "search.title" }}</label>
+        <input name="keyword" required placeholder="{{ T `search.placeholder` }}" />
    
        <button title="Search">
            {{ partial "helper/icon" "search" }}
--- a/layouts/partials/widget/tag-cloud.html
+++ b/layouts/partials/widget/tag-cloud.html
@ -2,7 +2,7 @@
    <div class="widget-icon">
        {{ partial "helper/icon" "tag" }}
    </div>
-    <h2 class="widget-title section-title">{{ T "widgetTagCloudTitle" }}</h2>
+    <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 }}
--- a/layouts/shortcodes/bilibili.html
+++ b/layouts/shortcodes/bilibili.html
@ -0,0 +1,24 @@
+{{ $vid := (.Get 0) }}
+{{ $videopage := default 1 (.Get 1) }}
+{{ $basicQuery := querify "page" $videopage "high_quality" 1 "as_wide" 1 }}
+{{ $videoQuery := "" }}
+
+{{ if strings.HasPrefix (lower $vid) "av" }}
+    {{ $videoQuery = querify "aid" (strings.TrimPrefix "av" (lower $vid)) }}
+{{ else if strings.HasPrefix (lower $vid) "bv" }}
+    {{ $videoQuery = querify "bvid" $vid }}
+{{ else }}
+    <p>Bilibili 视频av号或BV号错误！请检查视频av号或BV号是否正确</p>
+    <p>当前视频av或BV号：{{ $vid }}，视频分P：{{ $videopage }}</p>
+{{ end }}
+
+<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
+    <iframe src="//player.bilibili.com/player.html?{{ $basicQuery | safeURL }}&{{ $videoQuery | safeURL }}"
+            scrolling="no"
+            frameborder="no"
+            framespacing="0"
+            allowfullscreen="true"
+            style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"
+    >
+    </iframe>
+</div>
--- a/resources/_gen/assets/scss/scss/style.scss_b95b077eb505d5c0aff8055eaced30ad.content
+++ b/resources/_gen/assets/scss/scss/style.scss_b95b077eb505d5c0aff8055eaced30ad.content
--- a/theme.toml
+++ b/theme.toml
@ -20,7 +20,7 @@ features = [
    "opengraph",
    "widgets"
 ]
-min_version = "0.74.0"
+min_version = "0.78.0"

 [author]
  name = "Jimmy Cai"