hexo-theme-nblog 1.0.0

package/layout/index.ejs

@@ -0,0 +1,104 @@
+<div class="posts-page container">
+  <div class="posts-page__content">
+    <div class="posts-list">
+      <% page.posts.each(function(post) { %>
+        <article class="post-card material-card animate-fade-in-up">
+          <a href="<%= url_for(post.path) %>" class="post-card__link">
+            <div class="post-card__cover">
+              <% if (post.cover) { %>
+                <img src="<%= post.cover %>" alt="<%= post.title %>" loading="lazy">
+              <% } else { %>
+                <div class="post-card__cover-placeholder"></div>
+              <% } %>
+              <div class="post-card__overlay"></div>
+              <div class="post-card__info">
+                <div class="post-card__meta">
+                  <span class="post-card__date"><%= date(post.date, 'YYYY-MM-DD') %></span>
+                  <% if (post.categories && post.categories.length > 0) { %>
+                    <span class="post-card__category"><%= post.categories.toArray()[0].name %></span>
+                  <% } %>
+                </div>
+                <h2 class="post-card__title"><%= post.title %></h2>
+              </div>
+            </div>
+          </a>
+        </article>
+      <% }); %>
+
+      <% if (page.total > 1) { %>
+        <nav class="pagination">
+          <%- paginator({
+            prev_text: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"></polyline></svg>',
+            next_text: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>',
+            escape: false
+          }) %>
+        </nav>
+      <% } %>
+    </div>
+
+    <aside class="sidebar">
+      <div class="author-card material-card animate-fade-in-right">
+        <div class="author-card__avatar">
+          <img src="<%= theme.avatar %>" alt="<%= theme.author %>" loading="lazy">
+        </div>
+        <h3 class="author-card__name"><%= theme.author %></h3>
+        <p class="author-card__bio"><%= theme.bio %></p>
+        <div class="author-card__stats">
+          <div class="author-card__stat">
+            <span class="author-card__stat-value"><%= site.posts.length %></span>
+            <span class="author-card__stat-label">文章</span>
+          </div>
+          <div class="author-card__stat">
+            <span class="author-card__stat-value"><%= site.categories.length %></span>
+            <span class="author-card__stat-label">分类</span>
+          </div>
+          <div class="author-card__stat">
+            <span class="author-card__stat-value"><%= site.tags.length %></span>
+            <span class="author-card__stat-label">标签</span>
+          </div>
+        </div>
+        <% if (theme.social && theme.social.length > 0) { %>
+          <div class="author-card__social">
+            <% for (var link of theme.social) { %>
+              <a href="<%= link.url %>" target="_blank" rel="noopener" class="author-card__social-link" title="<%= link.platform %>">
+                <%- link.icon %>
+              </a>
+            <% } %>
+          </div>
+        <% } %>
+      </div>
+
+      <div class="sidebar-widget material-card animate-fade-in-right animate-delay-1">
+        <h3 class="sidebar-widget__title">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+          </svg>
+          分类
+        </h3>
+        <div class="sidebar-widget__content">
+          <% site.categories.sort('name').forEach(function(category) { %>
+            <a href="<%= url_for(category.path) %>" class="sidebar-widget__item">
+              <span class="sidebar-widget__item-name"><%= category.name %></span>
+              <span class="sidebar-widget__item-count"><%= category.length %></span>
+            </a>
+          <% }); %>
+        </div>
+      </div>
+
+      <div class="sidebar-widget material-card animate-fade-in-right animate-delay-2">
+        <h3 class="sidebar-widget__title">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
+            <line x1="7" y1="7" x2="7.01" y2="7"></line>
+          </svg>
+          标签云
+        </h3>
+        <div class="sidebar-widget__content sidebar-widget__content--tags">
+          <% site.tags.sort('name').forEach(function(tag) { %>
+            <a href="<%= url_for(tag.path) %>" class="tag-cloud__tag"><%= tag.name %></a>
+          <% }); %>
+        </div>
+      </div>
+    </aside>
+  </div>
+</div>

package/layout/layout.ejs

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="<%= config.language || 'zh-CN' %>">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="<%= config.description %>">
+  <meta name="keywords" content="<%= config.keywords %>">
+  <title>
+    <% if (is_post()) { %>
+      <%= page.title %> | <% } %>
+          <%= config.title %>
+  </title>
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="<%= url_for('/css/main.css') %>">
+  <% if (is_post()) { %>
+    <link rel="stylesheet" href="<%= url_for('/css/markdown.css') %>">
+    <link rel="stylesheet" href="<%= url_for('/css/highlight.css') %>">
+    <link rel="stylesheet" href="<%= url_for('/css/admonition.css') %>">
+    <% if (theme.twikoo && theme.twikoo.enable) { %>
+      <link rel="stylesheet" href="<%= url_for('/css/twikoo.css') %>">
+      <% } %>
+        <% } %>
+          <%- partial('_partial/open-graph') %>
+            <% if (theme.canonical && theme.canonical.enable && typeof autoCanonical==='function' ) { %>
+              <%- autoCanonical(config, page) %>
+                <% } %>
+</head>
+
+<body>
+  <div class="app">
+    <div class="app__background">
+      <div class="app__circle app__circle--1"></div>
+      <div class="app__circle app__circle--2"></div>
+      <div class="app__circle app__circle--3"></div>
+    </div>
+    <%- partial('_partial/header') %>
+      <main class="main" id="pjax-container">
+        <%- body %>
+      </main>
+      <%- partial('_partial/footer') %>
+  </div>
+  <script src="<%= url_for('/js/main.js') %>"></script>
+  <% if (theme.pjax && theme.pjax.enable) { %>
+    <script src="https://cdn.jsdelivr.net/npm/pjax@0.2.8/pjax.min.js"></script>
+    <script>
+      var pjax = new Pjax({
+        selectors: [
+          'title',
+          'meta[name="description"]',
+          'meta[property="og:title"]',
+          'meta[property="og:description"]',
+          'meta[property="og:url"]',
+          'meta[property="og:image"]',
+          'meta[property="article:published_time"]',
+          'meta[property="article:modified_time"]',
+          '#pjax-container',
+          '#header'
+        ],
+        cacheBust: false
+      });
+
+      document.addEventListener('pjax:complete', function () {
+        if (typeof initPage === 'function') {
+          initPage();
+        }
+        if (typeof twikoo !== 'undefined' && twikoo.init) {
+          twikoo.init({
+            envId: '<%= theme.twikoo.envId %>',
+            el: '#twikoo-comment'
+          });
+        }
+      });
+    </script>
+    <% } %>
+      <% if (is_post() && theme.twikoo && theme.twikoo.enable) { %>
+        <script src="https://cdn.jsdelivr.net/npm/twikoo@1.6.39/dist/twikoo.all.min.js"></script>
+        <script>
+          twikoo.init({
+            envId: '<%= theme.twikoo.envId %>',
+            el: '#twikoo-comment'
+          });
+        </script>
+        <% } %>
+</body>
+
+</html>

package/layout/page.ejs

@@ -0,0 +1,11 @@
+<div class="<%= page.layout %>-page container">
+  <div class="page-header animate-fade-in-up">
+    <h1 class="page-header__title"><%= page.title %></h1>
+    <% if (page.description) { %>
+      <p class="page-header__description"><%= page.description %></p>
+    <% } %>
+  </div>
+  <div class="page-content animate-fade-in-up animate-delay-1">
+    <%- page.content %>
+  </div>
+</div>

package/layout/post.ejs

@@ -0,0 +1,135 @@
+<article class="post-page container">
+  <% if (page.toc !==false) { %>
+    <aside class="post-toc" id="postToc" role="navigation" aria-label="文章目录">
+      <div class="post-toc__inner">
+        <div class="post-toc__header">
+          <span class="post-toc__title">目录</span>
+          <button class="post-toc__toggle" id="tocToggle" type="button" aria-label="折叠目录" aria-expanded="true"
+            aria-controls="tocContent">
+            <svg class="post-toc__toggle-icon" width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2">
+              <polyline points="9 18 15 12 9 6"></polyline>
+            </svg>
+          </button>
+        </div>
+        <nav class="post-toc__content js-toc" id="tocContent"></nav>
+      </div>
+    </aside>
+    <% } %>
+      <div class="post-page__content">
+        <header class="post-header animate-fade-in-up">
+          <% if (page.cover) { %>
+            <div class="post-header__cover">
+              <img src="<%= page.cover %>" alt="<%= page.title %>" loading="lazy">
+            </div>
+            <% } %>
+              <h1 class="post-header__title">
+                <%= page.title %>
+              </h1>
+              <div class="post-header__meta">
+                <span class="post-header__date">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+                    <line x1="16" y1="2" x2="16" y2="6"></line>
+                    <line x1="8" y1="2" x2="8" y2="6"></line>
+                    <line x1="3" y1="10" x2="21" y2="10"></line>
+                  </svg>
+                  <%= date(page.date, 'YYYY-MM-DD' ) %>
+                </span>
+                <% if (page.updated && page.updated.valueOf() !==page.date.valueOf()) { %>
+                  <span class="post-header__updated">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
+                      <path d="M21 3v5h-5"></path>
+                    </svg>
+                    更新于 <%= date(page.updated, 'YYYY-MM-DD' ) %>
+                  </span>
+                  <% } %>
+                    <% if (page.categories && page.categories.length> 0) { %>
+                      <a href="<%= url_for(page.categories.toArray()[0].path) %>" class="post-header__category">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                          stroke-width="2">
+                          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+                        </svg>
+                        <%= page.categories.toArray()[0].name %>
+                      </a>
+                      <% } %>
+                        <span class="post-header__reading-time">
+                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2">
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <polyline points="12 6 12 12 16 14"></polyline>
+                          </svg>
+                          约 <%= Math.ceil(strip_html(page.content).length / 400) %> 分钟
+                        </span>
+              </div>
+        </header>
+
+        <div class="post-body-wrapper" id="postBodyWrapper">
+          <div class="post-body animate-fade-in-up animate-delay-1" id="postBody">
+            <%- page.content %>
+          </div>
+        </div>
+
+        <% if (page.tags && page.tags.length> 0) { %>
+          <footer class="post-footer animate-fade-in-up animate-delay-2">
+            <div class="post-footer__tags">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
+                <line x1="7" y1="7" x2="7.01" y2="7"></line>
+              </svg>
+              <% page.tags.toArray().forEach(function(tag) { %>
+                <a href="<%= url_for(tag.path) %>" class="post-footer__tag">#<%= tag.name %></a>
+                <% }); %>
+            </div>
+          </footer>
+          <% } %>
+
+            <%- partial('_partial/post-license') %>
+
+              <nav class="post-nav animate-fade-in-up animate-delay-3">
+                <% if (page.prev) { %>
+                  <a href="<%= url_for(page.prev.path) %>" class="post-nav__item post-nav__item--prev">
+                    <span class="post-nav__label">
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                        stroke-width="2">
+                        <polyline points="15 18 9 12 15 6"></polyline>
+                      </svg>
+                      上一篇
+                    </span>
+                    <span class="post-nav__title">
+                      <%= page.prev.title %>
+                    </span>
+                  </a>
+                  <% } else { %>
+                    <span class="post-nav__item post-nav__item--prev post-nav__item--disabled">
+                      <span class="post-nav__label">没有更多了</span>
+                    </span>
+                    <% } %>
+                      <% if (page.next) { %>
+                        <a href="<%= url_for(page.next.path) %>" class="post-nav__item post-nav__item--next">
+                          <span class="post-nav__label">
+                            下一篇
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                              stroke-width="2">
+                              <polyline points="9 18 15 12 9 6"></polyline>
+                            </svg>
+                          </span>
+                          <span class="post-nav__title">
+                            <%= page.next.title %>
+                          </span>
+                        </a>
+                        <% } else { %>
+                          <span class="post-nav__item post-nav__item--next post-nav__item--disabled">
+                            <span class="post-nav__label">没有更多了</span>
+                          </span>
+                          <% } %>
+              </nav>
+      </div>
+
+      <% if (theme.twikoo && theme.twikoo.enable) { %>
+        <section class="post-comments animate-fade-in-up animate-delay-4">
+          <div id="twikoo-comment"></div>
+        </section>
+        <% } %>
+</article>

package/layout/tag.ejs

@@ -0,0 +1,68 @@
+<% if (page.posts && page.posts.length > 0) { %>
+<div class="tag-posts-page container">
+  <div class="page-header animate-fade-in-up">
+    <h1 class="page-header__title">
+      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
+        <line x1="7" y1="7" x2="7.01" y2="7"></line>
+      </svg>
+      标签: <%= page.tag %>
+    </h1>
+    <p class="page-header__description">共 <%= page.posts.length %> 篇文章</p>
+    <a href="<%= url_for('/tags/') %>" class="page-header__back">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <polyline points="15 18 9 12 15 6"></polyline>
+      </svg>
+      返回标签列表
+    </a>
+  </div>
+
+  <div class="posts-list animate-fade-in-up animate-delay-1">
+    <% page.posts.each(function(post) { %>
+      <article class="post-card material-card">
+        <a href="<%= url_for(post.path) %>" class="post-card__link">
+          <div class="post-card__cover">
+            <% if (post.cover) { %>
+              <img src="<%= post.cover %>" alt="<%= post.title %>" loading="lazy">
+            <% } else { %>
+              <div class="post-card__cover-placeholder"></div>
+            <% } %>
+            <div class="post-card__overlay"></div>
+            <div class="post-card__info">
+              <div class="post-card__meta">
+                <span class="post-card__date"><%= date(post.date, 'YYYY-MM-DD') %></span>
+                <% if (post.categories && post.categories.length > 0) { %>
+                  <span class="post-card__category"><%= post.categories.toArray()[0].name %></span>
+                <% } %>
+              </div>
+              <h2 class="post-card__title"><%= post.title %></h2>
+            </div>
+          </div>
+        </a>
+      </article>
+    <% }); %>
+  </div>
+</div>
+<% } else { %>
+<div class="tags-page container">
+  <div class="page-header animate-fade-in-up">
+    <h1 class="page-header__title">
+      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
+        <line x1="7" y1="7" x2="7.01" y2="7"></line>
+      </svg>
+      标签
+    </h1>
+    <p class="page-header__description">共 <%= site.tags.length %> 个标签</p>
+  </div>
+
+  <div class="tags-cloud animate-fade-in-up animate-delay-1">
+    <% site.tags.sort('name').forEach(function(tag) { %>
+      <a href="<%= url_for(tag.path) %>" class="tags-cloud__tag" style="font-size: <%= Math.max(0.9, Math.min(1.5, 0.9 + tag.length * 0.05)) %>rem">
+        <span class="tags-cloud__name"><%= tag.name %></span>
+        <span class="tags-cloud__count"><%= tag.length %></span>
+      </a>
+    <% }); %>
+  </div>
+</div>
+<% } %>

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "hexo-theme-nblog",
+  "version": "1.0.0",
+  "description": "A lightweight and minimalist blog theme",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Nitai9h/nBlogHexo.git"
+  },
+  "keywords": [
+    "hexo",
+    "theme",
+    "nblog",
+    "material-design",
+    "glassmorphism",
+    "dark-mode",
+    "pjax",
+    "responsive"
+  ],
+  "author": "",
+  "license": "MIT"
+}

package/scripts/helpers.js

@@ -0,0 +1,8 @@
+'use strict';
+
+const path = require('path');
+const themePkg = require('../package.json');
+
+hexo.extend.helper.register('theme_version', function() {
+  return 'v' + themePkg.version;
+});