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'
+    })
+}