new: Complete modules related to home page, archive page and article page

templates/default/assets/css/archive.css

@@ -0,0 +1,25 @@
+.history-post-title {
+    color: var(--primary-color);
+}
+
+.history-post-item {
+    padding-top: 5px;
+    padding-bottom: 5px;
+    color: var(--primary-text-color);
+    list-style: none;
+}
+
+.history-post-item-wrap {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.history-post-item-date {
+    color: var(--secondary-text-color);
+}
+
+.history-post-pagination-item {
+    color: var(--secondary-text-color);
+    padding-right: 10px;
+}

templates/default/assets/css/global.css

@@ -0,0 +1,97 @@
+:root{
+    /* colors */
+    --primary-color: #8589e0;
+    --secondary-color: #b2cbd3;
+
+    --primary-text-color: #c9cacc;
+    --secondary-text-color: #9c9c9c;
+
+    --background-color: #191c1d;
+}
+
+@font-face {
+    font-family: 'jetbrains-mono-medium';
+    src: url('../../assets/css/webfonts/jetbrains-mono-medium.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+
+    /*font-family: jetbrains-mono-medium, serif;*/
+    background-color: var(--background-color);
+}
+
+a, a:link, a:visited, a:active {
+    text-decoration: none;
+    color: var(--primary-text-color);
+}
+
+a:hover {
+    text-decoration: underline;
+    text-decoration-color: var(--primary-color);
+    text-decoration-thickness: 2px;
+}
+
+.m-icon {
+    color: var(--primary-text-color);
+}
+
+.root-container {
+    width: 100%;
+    height: 100%;
+}
+
+@media screen and (max-width: 576px){
+    .root-container {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+}
+
+::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+}
+::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: var(--secondary-text-color);
+}
+
+.footer {
+    position: fixed;
+    width: 100%;
+    bottom: 20px;
+    text-align: center;
+    color: var(--secondary-text-color);
+}
+
+.main-logo {
+    display: flex;
+}
+
+.main-logo-img {
+    width: 40px;
+    height: 40px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.main-logo-txt {
+    width: fit-content;
+    height: 40px;
+    line-height: 40px;
+    font-size: 36px;
+    padding-top: 2px;
+    margin-left: 10px;
+    color: var(--primary-color);
+}
+
+.main-menu-link {
+    margin-right: 10px;
+}

templates/default/assets/css/index.css

@@ -0,0 +1,20 @@
+.recent-post-title {
+    color: var(--primary-color);
+}
+
+.recent-post-item {
+    padding-top: 5px;
+    padding-bottom: 5px;
+    color: var(--primary-text-color);
+    list-style: none;
+}
+
+.recent-post-item-wrap {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.recent-post-item-date {
+    color: var(--secondary-text-color);
+}

templates/default/assets/css/lib/xcode-dark.css

@@ -0,0 +1,48 @@
+/* Background */ .highlight-bg { color: #ffffff; background-color: #1f1f24 }
+/* PreWrapper */ .highlight-chroma { color: #ffffff; background-color: #1f1f24; }
+/* Error */ .highlight-chroma .highlight-err { color: #960050 }
+/* LineTableTD */ .highlight-chroma .highlight-lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .highlight-chroma .highlight-lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight */ .highlight-chroma .highlight-hl { background-color: #353539 }
+/* LineNumbersTable */ .highlight-chroma .highlight-lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .highlight-chroma .highlight-ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Line */ .highlight-chroma .highlight-line { display: flex; }
+/* Keyword */ .highlight-chroma .highlight-k { color: #fc5fa3 }
+/* KeywordConstant */ .highlight-chroma .highlight-kc { color: #fc5fa3 }
+/* KeywordDeclaration */ .highlight-chroma .highlight-kd { color: #fc5fa3 }
+/* KeywordNamespace */ .highlight-chroma .highlight-kn { color: #fc5fa3 }
+/* KeywordPseudo */ .highlight-chroma .highlight-kp { color: #fc5fa3 }
+/* KeywordReserved */ .highlight-chroma .highlight-kr { color: #fc5fa3 }
+/* KeywordType */ .highlight-chroma .highlight-kt { color: #fc5fa3 }
+/* NameBuiltin */ .highlight-chroma .highlight-nb { color: #d0a8ff }
+/* NameBuiltinPseudo */ .highlight-chroma .highlight-bp { color: #a167e6 }
+/* NameClass */ .highlight-chroma .highlight-nc { color: #5dd8ff }
+/* NameFunction */ .highlight-chroma .highlight-nf { color: #41a1c0 }
+/* NameVariable */ .highlight-chroma .highlight-nv { color: #41a1c0 }
+/* LiteralString */ .highlight-chroma .highlight-s { color: #fc6a5d }
+/* LiteralStringAffix */ .highlight-chroma .highlight-sa { color: #fc6a5d }
+/* LiteralStringBacktick */ .highlight-chroma .highlight-sb { color: #fc6a5d }
+/* LiteralStringChar */ .highlight-chroma .highlight-sc { color: #fc6a5d }
+/* LiteralStringDelimiter */ .highlight-chroma .highlight-dl { color: #fc6a5d }
+/* LiteralStringDoc */ .highlight-chroma .highlight-sd { color: #fc6a5d }
+/* LiteralStringDouble */ .highlight-chroma .highlight-s2 { color: #fc6a5d }
+/* LiteralStringEscape */ .highlight-chroma .highlight-se { color: #fc6a5d }
+/* LiteralStringHeredoc */ .highlight-chroma .highlight-sh { color: #fc6a5d }
+/* LiteralStringOther */ .highlight-chroma .highlight-sx { color: #fc6a5d }
+/* LiteralStringRegex */ .highlight-chroma .highlight-sr { color: #fc6a5d }
+/* LiteralStringSingle */ .highlight-chroma .highlight-s1 { color: #fc6a5d }
+/* LiteralStringSymbol */ .highlight-chroma .highlight-ss { color: #fc6a5d }
+/* LiteralNumber */ .highlight-chroma .highlight-m { color: #d0bf69 }
+/* LiteralNumberBin */ .highlight-chroma .highlight-mb { color: #d0bf69 }
+/* LiteralNumberFloat */ .highlight-chroma .highlight-mf { color: #d0bf69 }
+/* LiteralNumberHex */ .highlight-chroma .highlight-mh { color: #d0bf69 }
+/* LiteralNumberInteger */ .highlight-chroma .highlight-mi { color: #d0bf69 }
+/* LiteralNumberIntegerLong */ .highlight-chroma .highlight-il { color: #d0bf69 }
+/* LiteralNumberOct */ .highlight-chroma .highlight-mo { color: #d0bf69 }
+/* Comment */ .highlight-chroma .highlight-c { color: #6c7986 }
+/* CommentHashbang */ .highlight-chroma .highlight-ch { color: #6c7986 }
+/* CommentMultiline */ .highlight-chroma .highlight-cm { color: #6c7986 }
+/* CommentSingle */ .highlight-chroma .highlight-c1 { color: #6c7986 }
+/* CommentSpecial */ .highlight-chroma .highlight-cs { color: #6c7986; font-style: italic }
+/* CommentPreproc */ .highlight-chroma .highlight-cp { color: #fd8f3f }
+/* CommentPreprocFile */ .highlight-chroma .highlight-cpf { color: #fd8f3f }

templates/default/assets/css/post.css

@@ -0,0 +1,94 @@
+pre {
+    padding: 10px;
+    border-radius: 4px;
+    border: var(--secondary-text-color) 1px dashed;
+}
+
+.post-menu {
+    max-width: 1000px;
+}
+
+.post-title {
+    color: var(--primary-color);
+}
+
+.post-info {
+    max-width: 1000px;
+    color: var(--secondary-text-color);
+}
+
+.post-info-wrap {
+    display: inline-block;
+    margin-top: 10px;
+}
+
+.post-info-item {
+    display: inline-block;
+    margin-right: 10px;
+}
+
+.post-content {
+    line-height: 1.6;
+    max-width: 1000px;
+    color: var(--primary-text-color);
+}
+
+.post-content h1,
+.post-content h2 {
+    margin-top: 4rem;
+    margin-bottom: 1rem;
+}
+
+.post-content h3,
+.post-content h4 {
+    margin-top: 3rem;
+    margin-bottom: 2rem;
+}
+
+.post-content h5,
+.post-content h6 {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+}
+
+.post-content img {
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+}
+
+.post-content img {
+    max-width: 100%;
+}
+
+.post-footer {
+    width: 100%;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    text-align: center;
+    color: var(--secondary-text-color);
+}
+
+#toc-box-area {
+    position: fixed;
+    top: 4rem;
+    left: 30px;
+}
+
+#toc-box-menu {
+    margin-top: 20px;
+    display: none;
+    color: var(--primary-color);
+}
+
+.toc-box-menu-item {
+    cursor: pointer;
+    margin-right: 10px;
+}
+
+#toc-title {
+    color: var(--primary-color);
+}
+
+#toc-box li {
+    list-style: none;
+}

templates/default/assets/js/post.js

@@ -0,0 +1,51 @@
+const tocBox = document.getElementById('toc-box');
+
+const tList = document.getElementById('post-content').querySelectorAll('h1, h2, h3, h4, h5, h6');
+const hList = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];
+
+let tmpHtml = `<div>\n`;
+
+Array.from(tList, v => {
+    // get the level number
+    const H = hList.indexOf(v.nodeName) + 1 || 1;
+    tmpHtml += `<div class="li li-${H} toc-li"><a id="${v.id}" href="#">${v.textContent}</a></div>\n`;
+});
+
+tmpHtml += `</div>`
+tocBox.innerHTML = tmpHtml;
+
+Array.from(tList, v => {
+    const btn = document.getElementById('toc-box').querySelector(`#${v.id}`);
+    const ele = document.getElementById('post-content').querySelector(`#${v.id}`);
+
+    if (!btn || !ele) {
+        return;
+    }
+
+    btn.addEventListener('click', (event) => {
+        event.preventDefault();
+        window.scrollTo({ top: ele.offsetTop - 60, behavior: 'smooth' });
+    });
+});
+
+const tocMenu = document.getElementById('toc-box-menu');
+
+window.addEventListener('scroll', (event) => {
+    const scrollFromTop = window.scrollY || document.documentElement.scrollTop;
+    if (scrollFromTop >= 100) {
+        tocMenu.style.display = 'block';
+    } else {
+        tocMenu.style.display = 'none';
+    }
+})
+
+function goto(path) {
+    window.location.href = path;
+}
+
+function backToTop() {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+    })
+}

templates/default/html/archive.html

@@ -0,0 +1,107 @@
+{{ define "archive.html" }}
+
+<html lang="{{ .site_info.language }}">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ .site_info.title }}</title>
+    <link rel="icon" type="image/x-icon" href="{{ .site_info.logo }}"/>
+    <link rel="stylesheet" href="../assets/css/lib/fontawesome.all.min.css">
+    <link rel="stylesheet" href="../assets/css/lib/bootstrap.min.css">
+    <link rel="stylesheet" href="../assets/css/global.css">
+    <link rel="stylesheet" href="../assets/css/archive.css">
+    <script src="../assets/js/lib/jquery.min.js"></script>
+    <script src="../assets/js/lib/bootstrap.min.js"></script>
+    <script src="../assets/js/lib/fontawesome.all.min.js"></script>
+</head>
+<body>
+<div class="root-container">
+    <!-- header -->
+    <div class="container p-3">
+        <div class="row pt-3 pt-md-4 pt-lg-5">
+            <div class="col main-logo">
+                <div class="main-logo-img" style="background-image: url('{{ .site_info.logo }}');"></div>
+                <div class="main-logo-txt">
+                    {{ .site_info.title }}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- menu -->
+    <div class="container p-3">
+        <div class="row pt-lg-3">
+            <div class="col mx-auto post-menu">
+                {{ range $i, $v := .menu.Items }}
+                <i class="{{ $v.Icon }} m-icon"></i>
+                <a class="main-menu-link" href="{{ $v.Url }}"> {{ $v.Name }} </a>
+                {{ end }}
+            </div>
+        </div>
+    </div>
+
+
+    <!-- body -->
+    <div class="container p-3">
+        <div class="row pt-lg-3">
+            <h4 class="history-post-title"># {{ .history_post.title }}</h4>
+            <div class="col-12 col-md-8">
+                <div>
+                    {{ range $i, $v := .history_post.posts }}
+                    <div class="row history-post-item">
+                        <div class="col history-post-item-wrap">
+                            <span class="d-none d-md-inline history-post-item-date">{{ $v.Date }}&nbsp; | &nbsp;</span>
+                            <span>
+                                <a href="/post/{{ $v.HtmlHash }}">{{ $v.Title }}</a>
+                            </span>
+                        </div>
+                        <div class="col d-none d-lg-block history-post-item-wrap">
+                            <span style="color: var(--secondary-text-color)">
+                                [
+                                    {{ range $i2, $v2 := $v.TagHashes }}
+                                        <a href="/tag/{{ $v2.Hash }}" style="color: var(--secondary-text-color)">{{ $v2.Name }}</a>
+                                        {{ if lt (add $i2 1) (len $v.TagHashes) }}
+                                            ,
+                                        {{ end }}
+                                    {{ end }}
+                                ]
+                            </span>
+                        </div>
+                    </div>
+                    {{ end }}
+                </div>
+            </div>
+        </div>
+
+        <div class="row pt-3 pt-lg-4">
+            <div class="col-12 col-md-8">
+                <div class="history-post-pagination">
+                    <span class="history-post-pagination-item">
+                        <a href="/archive?page={{ .page_info.pre_page }}">
+                            <
+                        </a>
+                    </span>
+                    <span class="history-post-pagination-item">
+                        {{ .page_info.cur_page }} &nbsp; / &nbsp; {{ .page_info.all_page }}
+                    </span>
+                    <span class="history-post-pagination-item">
+                        <a href="/archive?page={{ .page_info.nxt_page }}">
+                            >
+                        </a>
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<!-- footer -->
+<div class="footer">
+    {{ .site_info.copyright }}
+</div>
+
+</body>
+</html>
+
+{{ end }}

templates/default/html/index.html

@@ -0,0 +1,86 @@
+{{ define "index.html" }}
+
+<html lang="{{ .site_info.language }}">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ .site_info.title }}</title>
+    <link rel="icon" type="image/x-icon" href="{{ .site_info.logo }}"/>
+    <link rel="stylesheet" href="../assets/css/lib/fontawesome.all.min.css">
+    <link rel="stylesheet" href="../assets/css/lib/bootstrap.min.css">
+    <link rel="stylesheet" href="../assets/css/global.css">
+    <link rel="stylesheet" href="../assets/css/index.css">
+    <script src="../assets/js/lib/jquery.min.js"></script>
+    <script src="../assets/js/lib/bootstrap.min.js"></script>
+    <script src="../assets/js/lib/fontawesome.all.min.js"></script>
+</head>
+<body>
+<div class="root-container">
+    <!-- header -->
+    <div class="container p-3">
+        <div class="row pt-3 pt-md-4 pt-lg-5">
+            <div class="col main-logo">
+                <div class="main-logo-img" style="background-image: url('{{ .site_info.logo }}');"></div>
+                <div class="main-logo-txt">
+                    {{ .site_info.title }}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- menu -->
+    <div class="container p-3">
+        <div class="row pt-lg-3">
+            <div class="col mx-auto post-menu">
+                {{ range $i, $v := .menu.Items }}
+                <i class="{{ $v.Icon }} m-icon"></i>
+                <a class="main-menu-link" href="{{ $v.Url }}"> {{ $v.Name }} </a>
+                {{ end }}
+            </div>
+        </div>
+    </div>
+
+    <!-- body -->
+    <div class="container p-3">
+        <div class="row pt-lg-3">
+            <h4 class="recent-post-title"># {{ .recent_post.title }}</h4>
+            <div class="col-12 col-md-8">
+                <div>
+                    {{ range $i, $v := .recent_post.posts }}
+                    <div class="row recent-post-item">
+                        <div class="col recent-post-item-wrap">
+                            <span class="d-none d-md-inline recent-post-item-date">{{ $v.Date }}&nbsp; | &nbsp;</span>
+                            <span>
+                                <a href="/post/{{ $v.HtmlHash }}">{{ $v.Title }}</a>
+                            </span>
+                        </div>
+                        <div class="col d-none d-lg-block recent-post-item-wrap">
+                            <span style="color: var(--secondary-text-color)">
+                                [
+                                    {{ range $i2, $v2 := $v.TagHashes }}
+                                        <a href="/tag/{{ $v2.Hash }}" style="color: var(--secondary-text-color)">{{ $v2.Name }}</a>
+                                        {{ if lt (add $i2 1) (len $v.TagHashes) }}
+                                            ,
+                                        {{ end }}
+                                    {{ end }}
+                                ]
+                            </span>
+                        </div>
+                    </div>
+                    {{ end }}
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<!-- footer -->
+<div class="footer">
+    {{ .site_info.copyright }}
+</div>
+
+</body>
+</html>
+
+{{ end }}

templates/default/html/post.html

@@ -0,0 +1,122 @@
+{{ define "post.html" }}
+
+<html lang="{{ .site_info.language }}">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ .site_info.title }}</title>
+    <link rel="icon" type="image/x-icon" href="{{ .site_info.logo }}"/>
+    <link rel="stylesheet" href="../assets/css/lib/fontawesome.all.min.css">
+    <link rel="stylesheet" href="../assets/css/lib/bootstrap.min.css">
+    <link rel="stylesheet" href="../assets/css/lib/xcode-dark.css">
+    <link rel="stylesheet" href="../assets/css/global.css">
+    <link rel="stylesheet" href="../assets/css/post.css">
+    <script src="../assets/js/lib/jquery.min.js"></script>
+    <script src="../assets/js/lib/bootstrap.min.js"></script>
+    <script src="../assets/js/lib/fontawesome.all.min.js"></script>
+</head>
+<body>
+<div class="root-container">
+
+    <!-- menu -->
+    <div class="container p-3">
+        <div class="row pt-3 pt-md-4 pt-lg-5">
+            <div class="col-12 col-md-9 mx-auto post-menu">
+                {{ range $i, $v := .menu.Items }}
+                <i class="{{ $v.Icon }} m-icon"></i>
+                <a class="main-menu-link" href="{{ $v.Url }}"> {{ $v.Name }} </a>
+                {{ end }}
+            </div>
+        </div>
+    </div>
+
+    <!-- toc area -->
+    <div class="d-none d-lg-block" id="toc-box-area">
+        <div id="toc-title">
+            <h5>{{ .status.toc_title }}</h5>
+            <hr/>
+        </div>
+        <div id="toc-box"></div>
+        <div id="toc-box-menu">
+            <hr/>
+            {{ range $i, $v := .menu.Items }}
+            <span class="toc-box-menu-item">
+                <i class="{{ $v.Icon }} m-icon" onclick="goto('{{ $v.Url }}')"></i>
+            </span>
+            {{ end }}
+            <span class="toc-box-menu-item" onclick="backToTop()">
+                <i class="fa-solid fa-circle-up"></i>
+            </span>
+        </div>
+    </div>
+
+    <!-- body -->
+    {{ if .status.success }}
+    <div class="container p-3">
+        <div class="row pt-lg-3">
+            <div class="col-12 col-md-9 post-info mx-auto">
+                <h2 class="post-title">{{ .post.title }}</h2>
+                <div>
+                    <span class="post-info-wrap">
+                        <span class="post-info-item">
+                            {{ .post.date }}
+                            &nbsp;
+                        </span>
+                    </span>
+
+                    <span class="post-info-wrap">
+                        {{ $tags := .post.tags }}
+                        {{ if gt (len $tags) 0 }}
+                        <span class="post-info-item">
+                            <i class="fa-solid fa-tags"></i>
+                            {{ range $i, $v := $tags }}
+                            <a href="/tag/{{ $v.Hash }}">{{ $v.Name }}</a>
+                            {{ if lt (add $i 1) (len $tags) }},{{ end }}
+                            {{ end }}
+                            &nbsp;
+                        </span>
+                        {{ end }}
+
+                        {{ $categories := .post.categories }}
+                        {{ if gt (len $categories) 0 }}
+                        <span class="post-info-item">
+                            <i class="fa-solid fa-folder"></i>
+                            {{ range $i, $v := $categories }}
+                            <a href="/category/{{ $v.Hash }}">{{ $v.Name }}</a>
+                            {{ if lt (add $i 1) (len $categories) }},{{ end }}
+                            {{ end }}
+                        </span>
+                        {{ end }}
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div class="row pt-5">
+            <div class="col-12 col-md-9 post-content mx-auto" id="post-content">
+                {{ .post.content }}
+            </div>
+        </div>
+    </div>
+    {{ end }}
+
+    <!-- post footer -->
+    {{ if .status.success }}
+    <div class="post-footer">
+        {{ .site_info.copyright }}
+    </div>
+    {{ end }}
+
+</div>
+
+<!-- post footer -->
+{{ if not .status.success }}
+<div class="footer">
+    {{ .site_info.copyright }}
+</div>
+{{ end }}
+
+<script src="../assets/js/post.js"></script>
+</body>
+</html>
+
+{{ end }}