Merge pull request #7 from can-dy-jack/version4

完成基本功能

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

README.md

@@ -11,3 +11,4 @@
 - 代码块复制按钮，mac样式
 - 各个页面的 title
 - i18n
+- 变量提取

_config.yml

@@ -4,7 +4,7 @@
 # 右上角github地址
 github: https://github.com/can-dy-jack/hexo-theme-delicate
 # 主题颜色
-color: "#0aa344"
+color: "#0a43b4"
 # 页面slogan
 poem: "长风破浪会有时，直挂云帆济沧海"
 # email 地址
@@ -18,19 +18,22 @@ imgURL: imgs/beach.jpg
 index:
   links: 
     archive: /archives/
-    tag: /tags/
+    tags: /tags/
+    categories: /categories/
 
 ### ----------------------------------------------------
 #  markdown配置
 ### ----------------------------------------------------
 code:
   # 需要先在根配置文件里开启highlight
   highlight:
-    bg: "#282c34"
-    color: "#abb2bf"
+    bg: "#fdf6e3"
+    color: "#586e75"
   prismjs:
     bg: "#fff"
     color: "#000"
+  # 代码块是否显示边框线
+  border: true
 
 ### ----------------------------------------------------
 #  CDN
@@ -39,7 +42,8 @@ CDN:
   fontawesome: https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css
   # 需要在根配置文件里开启highlight，并在本文件里开启highlight
   ## 需要自己根据CDN内的文件进行根目录下和主题下的 highlight 相关配置。例如 hljs、bg等
-  highlight: https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/styles/atom-one-dark.css
+  highlight: https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/styles/base16/solarized-light.css
+  # highlight: https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/styles/base16/solarized-dark.css
   prismjs: https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css
 
 

languages/en.yml

@@ -6,3 +6,7 @@ paginator:
 home: home
 archive: archive
 tag: tag
+tags: tags
+categories: categories
+category: category
+

languages/zh-CN.yml

@@ -3,6 +3,10 @@ paginator:
   total: "共%d篇文章"
 
 # index
-home: "首页"
-archive: "归档"
+home: 首页
+archive: 文章列表
 tag: 标签
+tags: 标签云
+categories: 归档
+category: 分组
+

layout/categories.ejs

@@ -0,0 +1,4 @@
+<section class="cates-container">
+    <h1>List of Categories</h1>
+    <%- list_categories() %>
+</section>

layout/category.ejs

@@ -1 +1,19 @@
-category pages
+<section class="cates-container">
+    <h1 class="cate-title"><%- page.category %></h1>
+    <article class="cate-list">
+        <% for (post of page.posts.data) { %>
+            <a href="<%- url_for(post.path) %>" class="cate-item">
+                <div class="flex-between" title="<%- post.title %>">
+                    <span><%- post.title %></span>
+                    <span><%- post.date.format("YYYY/MM/DD") %></span>
+                </div>
+            </a>
+        <% } %>
+    </article>
+
+    <% 
+        let cates = site.categories.data;
+        let len = cates.filter(cate => cate.name === page.category)[0].length
+    %>
+    <%- partial('component/paginator', { total: len }) %>
+</section>

layout/component/toTop.ejs

@@ -0,0 +1,5 @@
+<div class="to-top">
+    <a href="javascript: void(0)" onclick="toTop()">
+        <i class="fa fa-chevron-up" aria-hidden="true"></i>
+    </a>
+</div>

layout/index.ejs

@@ -15,20 +15,46 @@
     <%- image_tag('imgs/beach.jpg') %>
 </div>
 <article class="index-article">
-    <ul>
-        <% for (post of page.posts.data) { %>
-            <li>
-                <div class="flex-between">
-                    <span>
+    <div class="article-list">
+        <% for (idx in page.posts.data) { %>
+            <% let post = page.posts.data[idx] %>
+            <% if(idx > 0) { %>
+                <hr>
+            <% } %>
+            <div class="article-item"> 
+                <div class="article-item-title">
+                    <h1>
                         <a href="<%- url_for(post.path) %>">
                             <%= post.title %>
                         </a>
-                    </span>
-                    <span class="gray"><%= post.date.format("YYYY/MM/DD") %></span>
+                    </h1>
+                    <div class="info">
+                        <% if (post.author) { %>
+                            <span>
+                                <%= post.author %> | 
+                            </span>
+                        <% } %>
+                        <% if (post.date) { %>
+                            <span>
+                                <%= post.date.format("YYYY/MM/DD") %>
+                            </span>
+                        <% } %>
+                    </div>
                 </div>
-            </li>
+                <div class="article-item-excerpt article">
+                    <div>
+                        <%- post.excerpt || post.content %>
+                    </div>
+                </div>
+            </div>
+
+            <div style="text-align: right;">
+                <button type="button" class="read-more">
+                    <a href="<%- url_for(post.path) %>">阅读更多</a>
+                </button>
+            </div>
         <% } %>
-    </ul>
+    </div>
 
     <%- partial('component/paginator', { total: site.posts.length }) %>
 </article>

layout/layout.ejs

@@ -41,6 +41,8 @@
         </div>
     </main>
 
+    <%- include('component/toTop') %>
+
     <footer>
         <%- include('partial/footer') %>
     </footer>

layout/partial/head.ejs

@@ -5,7 +5,7 @@
 
     <%# meta info %>
     <meta name="description" content="<%= config.description %>">
-    <meta name="keywords" content="<%= config.keywords.join(",") %>">
+    <meta name="keywords" content="<%= config.keywords %>">
     <meta name="author" content="<%= config.author %>">
 
     <meta name="color-scheme" content="light dark">

layout/post.ejs

@@ -6,14 +6,28 @@
         <%- page.content %>
     </section>
 
-    <section class="post-tag">
-        <a href="<%- url_for('tags') %>"><i class="fa fa-tags"></i></a>
-        <% for (tag of page.tags.data) { %>
-            <a href="<%- url_for(tag.path) %>" class="tag-item">
-                <%- tag.name %>
-            </a>
-        <% } %>
-    </section>
+    <% if (page.tags.length > 0) { %>
+        <section class="post-tag">
+            <a href="<%- url_for('tags') %>"><i class="fa fa-tags"></i></a>
+            <% for (tag of page.tags.data) { %>
+                <a href="<%- url_for(tag.path) %>" class="tag-item">
+                    <%- tag.name %>
+                </a>
+            <% } %>
+        </section>
+    <% } %>
+    <% if (page.categories.length > 0) { %>
+        <section class="post-cate">
+            <a href="<%- url_for('categories') %>"><i class="fa fa-inbox"></i></a>
+            <% for (cate of page.categories.data) { %>
+                <a href="<%- url_for(cate.path) %>" class="cate-item">
+                    <%- cate.name %>
+                </a>
+            <% } %>
+        </section>
+    <% } %>
+
+
 
     <section class="post-cc">
         本博客所有文章均采用 <a href="https://creativecommons.org/licenses/by-sa/4.0">CC BY-SA 4.0</a> 协议 ，转载请注明出处。 

layout/tag.ejs

@@ -10,4 +10,10 @@
             </a>
         <% } %>
     </article>
+
+    <% 
+        let tags = site.tags.data;
+        let len = tags.filter(tag => tag.name === page.tag)[0].length
+    %>
+    <%- partial('component/paginator', { total: len }) %>
 </section>

scripts/generator/pages.js

@@ -6,7 +6,7 @@
 
 // generate tags page
 hexo.extend.generator.register("_tags", function (locals) {
-  if (this.theme.config.index.links.tag) {
+  if (this.theme.config.index.links.tags) {
     return {
       path: "tags/index.html",
       data: locals.theme,
@@ -15,6 +15,17 @@ hexo.extend.generator.register("_tags", function (locals) {
   }
 });
 
+// generate categories page
+hexo.extend.generator.register("_categories", function (locals) {
+  if (this.theme.config.index.links.categories) {
+    return {
+      path: "categories/index.html",
+      data: locals.theme,
+      layout: "categories",
+    };
+  }
+});
+
 // generate 404 page
 hexo.extend.generator.register("_404", function (locals) {
   return {

source/js/index.js

@@ -1,3 +1,8 @@
+function toTop() {
+    window.scrollTo(0, 0);
+}
+
+
 const delicate = {
     name: "Delicate",
     description: "simple but delicate theme for Hexo",

source/styles/base/index.styl

@@ -8,6 +8,23 @@ body, html
     flex-direction column
     min-height 100vh
     background #e8e0c9
+    scroll-behavior smooth
+
+::selection
+    background $color
+    color #fff
+
+::-webkit-scrollbar
+    width 6px
+    height 6px
+
+::-webkit-scrollbar-thumb
+    border-radius 6px
+    background $color
+
+::-webkit-scrollbar-track
+    border-radius 0
+    background transparent
 
 img
     max-width 100%
@@ -43,6 +60,14 @@ a
     &::before
         margin-right 5px
 
+.read-more
+    border none
+    outline none
+    padding 5px 12px
+    cursor pointer
+    border-radius 3px
+    transition all 250ms ease-in-out
+
 // 布局样式
 main 
     margin 10px
@@ -60,7 +85,7 @@ footer
     margin 0 auto
     background: #fbf4e2
     min-height 100%
-    padding 20px 0 80px 0
+    padding 20px 0 100px 0
     box-sizing border-box
     border-radius 6px
     box-shadow 0 0 15px 5px rgba(0, 0, 0, 0.16)

source/styles/categories/index.styl

@@ -0,0 +1,23 @@
+.cates-container
+    margin 50px 50px 10px 50px
+    h1
+        text-align center
+    ul, ol
+        list-style circle
+    li
+        a
+            margin-right 10px
+        span
+            &::before
+                content: '<'
+                margin-left 10px
+            &::after
+                content: '>'
+                margin-right 10px
+    .cate-list
+        .cate-item
+            display block
+            padding 10px 20px
+            border-radius 5px
+            &:hover
+                background rgba($color, .1)

source/styles/index.styl

@@ -27,3 +27,8 @@
 @import "tag/tags";
 @import "tag/tag";
 
+// categories
+@import "categories";
+
+// toTop
+@import "toTop";