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

没周更新
can-dy-jack · Jul 22, 2023 · 1e6c8b2 · 1e6c8b2
2 parents 844b32e + e8c7386
commit 1e6c8b2
Show file tree

Hide file tree

Showing 12 changed files with 250 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -30,6 +30,14 @@ git clone https://github.com/can-dy-jack/hexo-theme-delicate.git themes/delicate
 - English `en`
 
 ## 近期更新
+### Giscus 评论功能
+只有在文档的 Front-matter 里加入
+```yml
+giscus: true
+```
+才会在本页面开启 Giscus
+
+
 ### 公式支持
 > 使用CDN支持 `mathjax` 和 `katex`
 
@@ -67,15 +75,21 @@ $$a^2+b^2=c^2$$
 ### In progress
 - [ ] 样式整理，颜色变量、黑暗模式
 - [ ] stylus 函数、基本样式、mixins
+- [ ] 置顶文章功能
+- [ ] category 多级、父子
 <!-- - [ ] 代码块复制按钮，mac样式 -->
 - [ ] 页面 title
 - [ ] i18n
 - [ ] 黑暗模式
-- [ ] 公式支持
-    - [ ] latex
-    - [ ] mathjax
 - [ ] 移动适配
+- [ ] 更新hexo官网主题图片
 
 ### Planning ~
 - [ ] 广告支持
 
+## 推荐插件
+- [hexo-reference](https://github.com/kchen0x/hexo-reference) markdown脚注
+
+## 主题扩展
+- [giscus-theme-delicate](https://github.com/can-dy-jack/giscus-theme-delicate) A theme for giscus, using in hexo-theme-delicate
+
diff --git a/_config.yml b/_config.yml
@@ -4,7 +4,7 @@
 # 右上角github地址
 github: https://github.com/can-dy-jack/hexo-theme-delicate
 # 主题颜色
-color: "#0a43b4"
+color: "#0ac3a4"
 # 页面slogan
 poem: "长风破浪会有时，直挂云帆济沧海"
 # email 地址
@@ -20,6 +20,7 @@ index:
     archive: /archives/
     tags: /tags/
     categories: /categories/
+    关于我: /about/
 
 ### ----------------------------------------------------
 #  markdown配置
@@ -35,6 +36,25 @@ code:
   # 代码块是否显示边框线
   border: true
 
+### ----------------------------------------------------
+#  评论配置
+### ----------------------------------------------------
+# 参数设置参考 giscus 官网：https://giscus.app
+giscus:
+  js: https://giscus.app/client.js
+  repo: can-dy-jack/delicate
+  repoId: R_kgDOGVfGBw
+  category: General
+  categoryId: DIC_kwDOGVfGB84CQqqg
+  mapping: pathname
+  strict: 0
+  reactionsEnabled: 1
+  emitMetadata: 0
+  inputPosition: top
+  selfTheme: false # 设置为true时，下面的theme才会生效，否则使用本主题自制的样式
+  theme: light
+  lang: zh-CN
+  loading: lazy
 
 ### ----------------------------------------------------
 #  CDN

diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
@@ -4,9 +4,9 @@ paginator:
 
 # index
 home: 首页
-archive: 文章列表
+archive: 存档
 tag: 标签
 tags: 标签云
-categories: 归档
-category: 分组
+categories: 分类
+category: 分类
 
diff --git a/layout/archive.ejs b/layout/archive.ejs
@@ -6,18 +6,24 @@
 
 <section class="archive">
     <article class="archive-list">
-        <h2 class="year-group"><%- year %> 年</h2>
-        <h3 class="month-group"><%- month %> 月</h3>
+        <section class="year-group">
+            <span class="circle"></span>
+            <span><%- year %> 年</span>
+        </section>
+        <div class="month-group"><%- month %> 月</div>
         <% for (let post of posts) { %>
             <% 
                 let nowYear = post.date.year();
                 let nowMonth = post.date.month() + 1;
             %>
             <% if (year !== nowYear) { %>
-                <h2 class="year-group"><%- nowYear %> 年</h2>
-                <h3 class="month-group"><%- nowMonth %> 月</h3>
+                <section class="year-group">
+                    <span class="circle"></span>
+                    <span><%- nowYear %> 年</span>
+                </section>
+                <div class="month-group"><%- nowMonth %> 月</div>
             <% } else if (month !== nowMonth) { %>
-                <h3 class="month-group"><%- nowMonth %> 月</h3>
+                <div class="month-group"><%- nowMonth %> 月</div>
             <% } %>
             <a href="<%- url_for(post.path) %>" class="post-item">
                 <div class="flex-between">

diff --git a/layout/index.ejs b/layout/index.ejs
@@ -3,11 +3,11 @@
     <div class="description"><%- config.description %></h3>
 </section>
 <header>
-    <%# TODO %>
     <nav>
-        <a href="/"><%- __('home') %></a>
+        <% let nav_idx = 0; %>
         <% for(link in theme.index.links) { %>
-             | <a href="<%- url_for(theme.index.links[link]) %>"><%- __(link) %></a>
+            <% nav_idx++ %>
+            <%- nav_idx > 1 ? " | " : "" %><a href="<%- url_for(theme.index.links[link]) %>"><%- __(link) %></a>
         <% } %>
     </nav>
 </header>

diff --git a/layout/page.ejs b/layout/page.ejs
@@ -1 +1,34 @@
-page pages
+<section class="page-img-container" style="height: <%- page.imgHeight %>;">
+    <%- image_tag(page.imgURL, {
+        alt: page.imgAlt || "",
+        width: "100%"
+    }) %>
+</section>
+
+<article class="markdown-container page-container">
+    <div class="article">
+        <%- page.content %>
+    </div>
+
+    <section class="comment-container">
+        <!-- giscus -->
+        <% if (page.giscus) { %>
+            <script src="<%- theme.giscus.js %>"
+                data-repo="<%- theme.giscus.repo %>"
+                data-repo-id="<%- theme.giscus.repoId %>"
+                data-category="<%- theme.giscus.category %>"
+                data-category-id="<%- theme.giscus.categoryId %>"
+                data-mapping="<%- theme.giscus.mapping %>"
+                data-strict="<%- theme.giscus.strict %>"
+                data-reactions-enabled="<%- theme.giscus.reactionsEnabled %>"
+                data-emit-metadata="<%- theme.giscus.emitMetadata %>"
+                data-input-position="<%- theme.giscus.inputPosition %>"
+                data-theme="<%- theme.giscus.selfTheme ? theme.giscus.theme : 'https://cdn.jsdelivr.net/gh/can-dy-jack/giscus-theme-delicate@master/index.min.css' %>"
+                data-lang="<%- theme.giscus.lang %>"
+                data-loading="<%- theme.giscus.loading %>"
+                crossorigin="anonymous"
+                async>
+            </script>
+        <% } %>
+    </section>
+</article>
diff --git a/layout/post.ejs b/layout/post.ejs
@@ -33,7 +33,18 @@
     <% } %>
 
     <section class="post-cc">
-        本博客所有文章均采用 <a href="https://creativecommons.org/licenses/by-sa/4.0">CC BY-SA 4.0</a> 协议 ，转载请注明出处。 
+        <div class="post-cc-author">
+            <span class="bold">作者：</span><%- mail_to(theme.email, config.author) %>
+        </div>
+        <div class="post-cc-link">
+            <span class="bold">链接：</span><a href="<%- url_for(page.path) %>"><%- decodeURIComponent(page.permalink) %></a>
+        </div>
+        <div class="post-cc-source">
+            <span class="bold">来源：</span><a href="<%- url_for('/') %>"><%- config.title %></a>
+        </div>
+        <div class="ppost-cc-declare">
+            <span class="bold">版权声明: </span>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-sa/4.0">CC BY-SA 4.0</a> 许可协议。著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 
+        </div>
     </section>
 
     <section class="flex-between" style="margin: 20px 0;">
@@ -60,4 +71,30 @@
             <% } %>
         </div>
     </section>
+
+    <!-- comment -->
+    <section class="comment-container">
+        <!-- giscus -->
+        <% if (page.giscus) { %>
+            <script src="<%- theme.giscus.js %>"
+                data-repo="<%- theme.giscus.repo %>"
+                data-repo-id="<%- theme.giscus.repoId %>"
+                data-category="<%- theme.giscus.category %>"
+                data-category-id="<%- theme.giscus.categoryId %>"
+                data-mapping="<%- theme.giscus.mapping %>"
+                data-strict="<%- theme.giscus.strict %>"
+                data-reactions-enabled="<%- theme.giscus.reactionsEnabled %>"
+                data-emit-metadata="<%- theme.giscus.emitMetadata %>"
+                data-input-position="<%- theme.giscus.inputPosition %>"
+                data-theme="<%- theme.giscus.selfTheme ? theme.giscus.theme : 'https://cdn.jsdelivr.net/gh/can-dy-jack/giscus-theme-delicate@master/index.min.css' %>"
+                data-lang="<%- theme.giscus.lang %>"
+                data-loading="<%- theme.giscus.loading %>"
+                crossorigin="anonymous"
+                async>
+            </script>
+        <% } %>
+    </section>
 </article>
+
+
+
diff --git a/source/styles/archive/index.styl b/source/styles/archive/index.styl
@@ -1,15 +1,53 @@
+$line-color = #ccc
 .archive
-    margin 20px 50px
+    margin 40px
     .archive-list
-        margin 20px 0
+        margin 30px 0
     .year-group
-        margin-top 40px
+        position relative
+        margin-top 20px
+        display flex
+        align-items center
+        gap 10px
+        font-size 1.2rem
+        height 3rem
+        .circle
+            height 14px
+            width 14px
+            background $line-color
+            border-radius 50%
     .month-group
-        padding-left 20px
+        margin-left 40px
+        position relative
+        width fit-content
+        // padding 0 8px
+        font-size 1rem
+        // border 1px solid $line-color
+        border-radius 5px
+        &::before
+            content ''
+            height calc(100% + 40px)
+            width 2px
+            background $line-color 
+            position absolute
+            left -34px
+            top -20px
     .post-item
+        margin-left 60px
         padding 10px 20px
-        border-radius 5px
         display block
+        position relative
+        &::before
+            content ''
+            height 100%
+            width 2px
+            background $line-color 
+            position absolute
+            left -54px
+            top 0
         transition all 250ms ease
         &:hover
             background rgba($color, .1)  
+
+
+
diff --git a/source/styles/index.styl b/source/styles/index.styl
@@ -35,3 +35,6 @@
 
 // comoponent
 @import "component";
+
+// pages
+@import "page";
diff --git a/source/styles/index/index.styl b/source/styles/index/index.styl
@@ -17,12 +17,14 @@ nav
     box-sizing border-box
 
 .post-cc
-    background rgba(255, 0, 0, .1)
-    color red
-    padding 10px 20px
+    background rgba(245, 185, 32, 0.1)
+    font-size 0.9rem
+    padding 20px
     margin 20px 0
     border-radius 5px
-    text-align center
+    .bold
+        font-weight 600
+
 
 .article-list
     .article-item

diff --git a/source/styles/markdown/index.styl b/source/styles/markdown/index.styl
@@ -641,4 +641,66 @@ hr
         clip auto
     ::-webkit-calendar-picker-indicator 
         filter invert(50%)
-
+    /*
+     * 扩展插件样式
+     */
+    // hexo-admonition
+    .admonition
+        font-size 15px
+        margin: 10px 0;
+        padding: .6em;
+        overflow: hidden;
+        page-break-inside: avoid;
+        border-left: .4em solid #42b983;
+        border-radius: .2em;
+        box-shadow: 0 0.1em 0.4em rgba(0,0,0,.05), 0 0 0.05rem rgba(0,0,0,.1);
+        background-color: #fafafa;
+    p.admonition-title
+        position: relative;
+        margin: -.6em -.6em .8em -.6rem !important;
+        padding: .4em .6em .4em 2.5em;
+        font-weight: 700;
+        background-color:rgba(66, 185, 131, .1);
+    .admonition-title::before
+        position: absolute;
+        top: .9em;
+        left: 1em;
+        width: 12px;
+        height: 12px;
+        background-color: #42b983;
+        border-radius: 50%;
+        content: ' ';
+    .info>.admonition-title,
+    .todo>.admonition-title
+        background-color: rgba(0,184,212,.1)
+    .warning>.admonition-title,
+    .attention>.admonition-title,
+    .caution>.admonition-title
+        background-color: rgba(255,145,0,.1)
+    .failure>.admonition-title,
+    .missing>.admonition-title,
+    .fail>.admonition-title,
+    .error>.admonition-title
+        background-color: rgba(255,82,82,.1)
+    .admonition.info, .admonition.todo
+        border-color: #00b8d4;
+    .admonition.warning, .admonition.attention, .admonition.caution
+        border-color: #ff9100;
+    .admonition.failure, .admonition.missing, .admonition.fail, .admonition.error
+        border-color: #ff5252;
+    .info>.admonition-title::before, .todo>.admonition-title::before
+        background-color: #00b8d4;
+        border-radius: 50%;
+    .warning>.admonition-title::before,
+    .attention>.admonition-title::before,
+    .caution>.admonition-title::before
+        background-color: #ff9100;
+        border-radius: 50%;
+    .failure>.admonition-title::before,
+    .missing>.admonition-title::before,
+    .fail>.admonition-title::before,
+    .error>.admonition-title::before
+        background-color: #ff5252;;
+        border-radius: 50%;
+    .admonition>:last-child
+        margin-bottom: 0 !important;
diff --git a/source/styles/page/index.styl b/source/styles/page/index.styl
@@ -0,0 +1,8 @@
+.page-img-container
+    margin-top -20px
+    overflow hidden
+    border-radius 6px 6px 0 0
+    img
+        margin 0
+.page-container
+    margin 20px 50px 50px 50px