feat: Tags页面和categories页面; 可手动开关暗黑模式; 页脚功能和备案显示

ch1oechao · Jan 20, 2024 · e62dc25 · e62dc25
1 parent 07a953f
commit e62dc25
Show file tree

Hide file tree

Showing 24 changed files with 616 additions and 131 deletions.
diff --git a/README.md b/README.md
@@ -109,6 +109,11 @@ date: <文章日期> [YYYY-MM-DD]
 
 ## CHANGELOG
 
+20240121 @timlzh
+- 增加暗黑模式开关
+- 页脚以及备案信息显示
+- Tags/Categories页面生成
+
 20231102 @timlzh
 - 增加highlight.js代码高亮
 - 增加顶部导航栏功能

diff --git a/_config.yml b/_config.yml
@@ -1,6 +1,10 @@
 # Top menu
 menu:
-  # About: /about
+  # Tags: /tags
+  # Categories: /categories 
+
+# Site Icon
+favicon: 
 
 # Camera icon for website
 baseurl:
@@ -19,10 +23,10 @@ comments:
     disqus_shortname:
   valine:
     enable: true
-    appId: # leancloud application app id
-    appKey: # leancloud application app key
+    appId: appid
+    appKey: appkey
     placeholder: random # Placeholder. Set to random string if you want to have random placeholders(一言api). 
-
+    
 # Google Analytics Tracking ID
 google_analytics:
 
@@ -41,8 +45,13 @@ image_viewer: true
 toc:
   enable: true
 
+footer:
+  enable: true
+  beian: 浙ICP备2022036129号-2
+  # content: 本站采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">CC BY-NC-SA 4.0</a> 协议进行许可
+
 # using highlight.js to show the code
 # https://highlightjs.org/
 hljs:
   enable: true
-  theme: xcode
+  theme: atom-one-dark
diff --git a/layout/_partial/article-full.ejs b/layout/_partial/article-full.ejs
@@ -1,3 +1,10 @@
+<%
+    var title = item.title || theme.default_post_title || "Untitled";
+    var mainTitle = title.split(" | ")[0];
+    var subTitle = title.split(" | ")[1];
+%>
+
+
 <section class="article-container">
     <!-- Back Home -->
     <%- partial('_partial/backhome') %>
@@ -9,8 +16,11 @@
                     <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                         <div class="post-heading">
                             <h1>
-                                <%- item.title || theme.default_post_title || "Untitled" %>
+                                <%- mainTitle %>
                             </h1>
+                            <div class="subheading">
+                                <%- subTitle %>
+                            </div>
                             <hr>
                         </div>
                     </div>

diff --git a/layout/_partial/article-index.ejs b/layout/_partial/article-index.ejs
@@ -1,8 +1,21 @@
 <div class="post-preview">
     <a href="<%- config.root %><%- item.path %>">
-        <h2 class="post-title">
-            <%- item.title || theme.default_post_title || "Untitled" %>
-        </h2>
+        <div class="post-title">
+            <!-- <%- item.title || theme.default_post_title || "Untitled" %> -->
+            <%
+                var title = item.title || theme.default_post_title || "Untitled";
+                var mainTitle = title.split(" | ")[0];
+                var subTitle = title.split(" | ")[1];
+            %>
+            <div class="post-maintitle">
+                <%- mainTitle %>
+            </div>
+            <div class="post-subtitle">
+                <!-- <%- item.excerpt %> -->
+                <%- subTitle %>
+            </div>
+        </div>
+
         <%- item.excerpt %>
     </a>
 </div>
diff --git a/layout/_partial/comment.ejs b/layout/_partial/comment.ejs
@@ -26,7 +26,7 @@
     appId: '<%= theme.comments.valine.appId %>',
     appKey: '<%= theme.comments.valine.appKey %>',
     placeholder: '<%= theme.comments.valine.placeholder %>',
-    avatar: 'retro',
+    avatar: '',
     enableQQ: true,
     emojiCDN: '//i0.hdslb.com/bfs/emote/',
     // 表情title和图片映射

diff --git a/layout/_partial/darkmode.ejs b/layout/_partial/darkmode.ejs
diff --git a/layout/_partial/footer.ejs b/layout/_partial/footer.ejs
@@ -0,0 +1,12 @@
+<% if (theme.footer && theme.footer.enable) { %>
+    <% if (theme.footer.content) { %>
+        <div class="content">
+            <%- theme.footer.content %>
+        </div>
+    <% } %>
+    <% if (theme.footer.beian) { %>
+        <div class="beian">
+            <a href="http://www.beian.miit.gov.cn" target="_blank"><%- theme.footer.beian %></a>
+        </div>
+    <% } %>
+<% } %>
diff --git a/layout/_partial/go-top.ejs b/layout/_partial/go-top.ejs
@@ -0,0 +1,23 @@
+<a class="go-top">
+    <i class="fa fa-arrow-up"></i>
+</a>
+
+<script type="text/javascript">
+    if ($(window).scrollTop() <= 100) {
+        $(".go-top").hide();
+    }
+    
+    $(function () {
+        $(window).scroll(function () {
+            if ($(window).scrollTop() > 100) {
+                $(".go-top").fadeIn(500);
+            } else {
+                $(".go-top").fadeOut(500);
+            }
+        });
+        $(".go-top").click(function () {
+            $('body,html').animate({scrollTop: 0}, 500);
+            return false;
+        });
+    });
+</script>
diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs
@@ -22,7 +22,7 @@
     <!-- Title -->
     <%
     var title = [];
-    if (page.current > 1) title.push(__('page', page.current));
+    <!-- if (page.current > 1) title.push(__('page', page.current)); -->
     if (page.title) title.push(page.title);
     if (page.category) title.push(page.category);
     if (page.tag) title.push(page.tag);
@@ -34,24 +34,40 @@
     %>
     <title><%= title.join(' | ') %></title>
 
-    <!-- Top Menu  -->
-    <div class="top_menu">
-        <% if (theme.menu && theme.menu.length){ %>
-            <% Object.keys(theme.menu).forEach(key => { %>
-            <a href="<%=theme.menu[key]%>"><%=key%></a>
-            <% }); %>
-        <% } %>
-    </div>
+    <!-- favicon -->
+    <%if (theme.favicon){ %>
+        <link rel="shortcut icon" href="<%= theme.favicon %>">
+    <% } else { %>
+        <link rel="shortcut icon" href="<%= url_for('/img/favicon.png') %>">
+    <% } %>
 
     <!-- Bootstrap Core CSS -->
     <link href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- Valine -->
     <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
 
+    <link rel="stylesheet" href="/css/darkmode.css">
+
     <!-- Custom CSS -->
     <%- css('css/style.css') %>
 
+    <!-- Top Menu  -->
+    <div class="top_menu">
+        <% if (theme.menu) { %>
+            <% Object.keys(theme.menu).forEach(key => { %>
+            <a href="<%=theme.menu[key]%>"><%=key%></a>
+            <% }); %>
+        <% } %>
+        <a class="darkmode-toggle" href="#" data-toggle="darkmode">
+            <i class="fa fa-moon-o"></i>
+            <i class="fa fa-sun-o" style="display: none;"></i>
+        </a>
+    </div>
+
+    <!-- Darkmode -->
+    <script src='/js/darkmode.js'></script>
+
     <!-- Custom Fonts -->
     <link href="//cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css" rel="stylesheet" type="text/css">
     <link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
@@ -75,4 +91,6 @@
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
     <![endif]-->
+
+
 </head>
diff --git a/layout/_partial/page-categories.ejs b/layout/_partial/page-categories.ejs
@@ -0,0 +1,37 @@
+<section class="article-container">
+    <!-- Back Home -->
+    <%- partial('_partial/backhome') %>
+
+        <!-- Page Header -->
+        <header class="intro-header">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
+                        <div class="post-heading">
+                            <h1>
+                                <%- item.title %>
+                            </h1>
+                            <hr>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <!-- Post Content -->
+        <article>
+            <div class="container">
+                <div class="row">
+                    <!-- Post Main Content -->
+                    <div class="post-content col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
+                        <%- list_categories(site.categories, {orderby:'count'}) %>
+                    </div>
+
+                    <!-- Comments -->
+                    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
+                        <%- partial("_partial/comment.ejs") %>
+                    </div>
+                </div>
+            </div>
+        </article>
+</section>
diff --git a/layout/_partial/page-tags.ejs b/layout/_partial/page-tags.ejs
@@ -0,0 +1,38 @@
+<section class="article-container">
+    <!-- Back Home -->
+    <%- partial('_partial/backhome') %>
+
+        <!-- Page Header -->
+        <header class="intro-header">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
+                        <div class="post-heading">
+                            <h1>
+                                <%- item.title %>
+                            </h1>
+                            <hr>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <!-- Post Content -->
+        <article>
+            <div class="container">
+                <div class="row">
+                    <!-- Post Main Content -->
+                    <div class="post-content col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
+                        <!-- <%- list_tags(site.tags, {orderby:1}) %> -->
+                        <%- tagcloud({orderby: 'count', order: 1, min_font: 0.8, max_font: 2, unit: 'em', amount: 40, show_count: true, class: 'tagcloud'}) %>
+                    </div>
+
+                    <!-- Comments -->
+                    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
+                        <%- partial("_partial/comment.ejs") %>
+                    </div>
+                </div>
+            </div>
+        </article>
+</section>
diff --git a/layout/_partial/pagination.ejs b/layout/_partial/pagination.ejs
@@ -2,6 +2,35 @@
     <% if (page.prev){ %>
         <li class="previous"><a href="<%- config.root %><%- page.prev_link %>"><%- __('prev')%></a></li>
     <% } %>
+    <% var page_list = []; %>
+    <% if (page.total > 1){
+        var total = page.total;
+        var current = page.current;
+        if (total <= 5){
+            for (var i = 1; i <= total; i++){
+                page_list.push(i);
+            }
+        } else {
+            if (current < 3){
+                page_list = [1, 2, 3, '...', total];
+            } else if (current >= 3 && current < total - 2){
+                page_list = [1, '...', current - 1, current, current + 1, '...', total];
+            } else {
+                page_list = [1, '...', total - 2, total - 1, total];
+            }
+        }
+    } %>
+    <% page_list.forEach(function(item){ %>
+        <% if (item == '...'){ %>
+            <li class="disabled"><span>...</span></li>
+        <% } else { %>
+            <% if (item == page.current){ %>
+                <li class="active"><span><%- item %></span></li>
+            <% } else { %>
+                <li class="page-numbers"><a href="<%- config.root %><%- item == 1 ? '' : 'page/' + item %>"><%- item %></a></li>
+            <% } %>
+        <% } %>
+    <% }) %>
     <% if (page.next){ %>
         <li class="next"><a href="<%- config.root %><%- page.next_link %>"><%- __('next')%></a></li>
     <% } %>

diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs
@@ -1,4 +1,5 @@
 <script type="text/javascript">
-    console.log("© zchen9 🙋 2015-" + new Date().getFullYear());
+    console.log("© Timlzh 🙋 2022-" + new Date().getFullYear());
+    console.log("Welcome to my blog: https://timlzh.com");
 </script>
 
diff --git a/layout/_partial/toc.ejs b/layout/_partial/toc.ejs
@@ -1,4 +1,4 @@
-<% if (theme.toc.enable){ %>
+<% if (theme.toc.enable && !post.type) { %>
     <aside id="article-toc" role="navigation" class="fixed">
         <div id="article-toc-inner">
             <%- toc(post.content, {list_number: false}) %>

diff --git a/layout/layout.ejs b/layout/layout.ejs
@@ -14,6 +14,12 @@
     <%- partial('_partial/google-analytics') %>
     <!-- Service Worker -->
     <%- partial('_partial/service-worker') %>
+    <!-- Go Top -->
+    <%- partial('_partial/go-top') %>
 </body>
 
+<footer>
+    <%- partial('_partial/footer') %>
+</footer>
+
 </html>
diff --git a/layout/page.ejs b/layout/page.ejs
@@ -1 +1,7 @@
-<%- partial('_partial/article-full', {item: page}) %>
+<% if (page.type === 'tags') { %>
+    <%- partial('_partial/page-tags', {item: page}) %>
+<% } else if (page.type === 'categories') { %>
+    <%- partial('_partial/page-categories', {item: page}) %>
+<% } else { %>
+    <%- partial('_partial/article-full', {item: page}) %>
+<% } %>
diff --git a/layout/tag.ejs b/layout/tag.ejs
@@ -0,0 +1,16 @@
+<!-- Main Content -->
+<section class="intro">
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
+                <% page.posts.each(function(item){ %>
+                    <%- partial('_partial/article-index', {item: item}) %>
+                <% }); %>
+            </div>
+        </div>
+        <!-- Pagination -->
+        <%- partial('_partial/pagination') %>
+        <!-- Search -->
+        <%- partial('_partial/search') %>
+    </div>
+</section>