hexo-theme-clarity 1.5.0 → 1.6.0

package/_config.yml

@@ -134,12 +134,13 @@ icp: ## China mainland only, show icp info on the bottom.
 bei: ## China mainland only, show bei info on the bottom.
 
 # The CDN provider for third-party scripts
-cdn_type: unpkg ## Options: jsdelivr/fastly/unpkg/custom
+cdn_type: unpkg ## Options: custom/jsdelivr/fastly/unpkg/jsdmirror
 cdn_custom_url: ## When cdn_type is 'custom', this is a required field. e.g. https://cdn1.yourdomain.com
 cdn_providers: ## List of public CDN providers
   unpkg: https://unpkg.com
   jsdelivr: https://cdn.jsdelivr.net/npm
   fastly: https://fastly.jsdelivr.net/npm
+  jsdmirror: https://cdn.jsdmirror.com/npm
 
 # Site background image link
 site_bg_img:

package/layout/_partial/comment_scripts.pug

@@ -59,7 +59,7 @@ if theme.minivaline.enable == true
 
 if theme.waline.enable == true
   script(type='module').
-    import {init} from '#{cdn_url}/@waline/client@3.5.6/dist/waline.js';
+    import {init} from '#{cdn_url}/@waline/client@3.13.0/dist/waline.js';
     init({
       el: '#waline_box',
       serverURL: '#{theme.waline.serverURL}',
@@ -78,7 +78,7 @@ if theme.waline.enable == true
     });
 
 if theme.twikoo.enable == true
-  script(src= cdn_url + '/twikoo@1.6.41/dist/twikoo.all.min.js')
+  script(src= cdn_url + '/twikoo@1.6.45/dist/twikoo.all.min.js')
   script.
     twikoo.init({
       el: '#twikoo_box',

package/layout/_partial/head.pug

@@ -47,7 +47,7 @@ head
   if theme.gitalk.enable == true
     link(rel='stylesheet', href= cdn_url + '/gitalk@1.8.0/dist/gitalk.css')
   if theme.waline.enable == true
-    link(rel='stylesheet', href= cdn_url + '/@waline/client@3.5.6/dist/waline.css')
+    link(rel='stylesheet', href= cdn_url + '/@waline/client@3.13.0/dist/waline.css')
   if theme.artalk.enable == true
     link(rel='stylesheet', href= cdn_url + '/artalk@2.9.1/dist/Artalk.css')
 

package/layout/category.pug

@@ -4,9 +4,9 @@ block title
   title= page.title + ' | ' + config.title
 
 block content
-  .post
-    h1.post-title= page.title
-    .post-content
+  .page
+    h1.page-title= page.title
+    .page-content
       ul
         each category in site.categories.toArray()
           li

package/layout/flink.pug

@@ -0,0 +1,38 @@
+extends base
+
+block title
+  title= page.title + ' | ' + config.title
+
+block content
+  .page.flink-container
+    - let title_style = {'text-align': page.title_align || undefined}
+    h1.page-title(style=title_style)= page.title
+    .page-content
+      if site.data.flinks
+        each link in site.data.flinks
+          - let className = link.link_title ? markdown(`### ${link.link_title}`) : ""
+          - let classDesc = link.link_desc ? `<div class="flink-desc">${link.link_desc}</div>` : ""
+          - let listResult = ""
+          .flink
+            h3.flink-title= link.link_title
+            if link.link_desc
+              .flink-desc= link.link_desc
+            .flink-list
+              each item in link.link_list
+                .link-item
+                  a(href=item.link, title=item.name, target="_blank")
+                    img.link-item-avatar(src=item.avatar, alt=item.name)
+                    span.link-item-main
+                      span.link-item-title.text-cut= item.name
+                      span.link-item-desc(title=item.desc)= item.desc
+
+      != page.content
+
+  if page.donate
+    include _widget/donate.pug
+  if page.comments
+    include _partial/comments.pug
+
+block scripts
+  if page.comments
+    include _partial/comment_scripts.pug

package/layout/page.pug

@@ -4,9 +4,10 @@ block title
   title= page.title + ' | ' + config.title
 
 block content
-  .post
-    h1.post-title= page.title
-    .post-content
+  .page
+    - let title_style = {'text-align': page.title_align || undefined}
+    h1.page-title(style=title_style)= page.title
+    .page-content
       != page.content
   if page.donate
     include _widget/donate.pug
@@ -15,4 +16,4 @@ block content
 
 block scripts
   if page.comments
-    include _partial/comment_scripts.pug
+    include _partial/comment_scripts.pug

package/layout/tag.pug

@@ -4,9 +4,9 @@ block title
   title= page.title + ' | ' + config.title
 
 block content
-  .post
-    h1.post-title= page.title
-    .post-content
+  .page
+    h1.page-title= page.title
+    .page-content
       ul
         each tag in site.tags.toArray()
           li

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-clarity",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "license": "MIT",
   "description": "Hexo Theme Clarity",
   "repository": "guozhenyi/hexo-theme-clarity",

package/source/css/style.scss

@@ -8,6 +8,7 @@ specific font stacks to ensure the greatest OS/browser compatibility.
 $primaryColor: #409eff;
 $codeBgColor: #e1e8e9; // 新的代码块背景色
 $hoverColor: #ff5722;
+$linkColor: #404244; // 链接颜色
 $linkHoverColor: #409eff; // 链接 Hover 颜色
 
 $originCodeBgColor: #f7f8f8; // 原来的代码块背景色
@@ -91,6 +92,12 @@ div {
 .mr-10 { margin-right: 10px; }
 .ml-4 { margin-left: 4px; }
 
+.text-cut {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
 #header {
     padding: 58px 0 0;
     text-align: left;
@@ -345,8 +352,106 @@ div {
     color: #888;
 }
 
+.page {
+    padding: 20px 0 15px;
+}
+.page-title {
+    margin-top: 0;
+    margin-bottom: 1.25rem;
+    color: #555;
+    // text-align: left;
+    font-size: 2rem;
+    line-height: 2;
+}
+.page-content {
+    clear: both;
+    line-height: 1.5;
+    // color: #444;
+    // padding-top: 15px;
+    // text-align: justify;
+    word-break: break-word;
+
+    h2 {
+        margin: 1.375em 0 1em;
+        border-bottom: 1px solid #eee;
+        overflow: hidden;
+    }
+
+    h3 { margin: 1.375em 0 1em; }
+
+    a {
+        color: $primaryColor;
+        padding-bottom: 2px;
+        word-break: normal;
+    }
+
+    // a:hover,
+    // a:active {
+    //     text-decoration: underline;
+    // }
+
+    pre code { padding: 0 2em; }
+
+    p {
+        margin: 0 0 1.25em;
+        word-break: break-word;
+        overflow-wrap: break-word;
+
+        code {
+            padding: 3px 5px;
+            background-color: $codeBgColor;
+            font-family: Menlo, Consolas, monospace;
+        }
+    }
+
+    .caption {
+        color: #444;
+        display: block;
+        font-size: 0.9em;
+        margin-top: 0.1em;
+        position: relative;
+        text-align: center;
+    }
+
+    hr {
+        margin: 2.4em auto;
+        border: none;
+        border-top: 1px solid #eee;
+        position: relative;
+    }
+
+    img {
+        max-width: 100%;
+        margin: auto;
+        display: block;
+        box-sizing: border-box;
+        border: 4px solid #ccc;
+        border-radius: 1em;
+    }
+
+    img.border-none {
+        border: none;
+        border-radius: 0;
+    }
+
+    ul,
+    ol {
+        border-radius: 3px;
+        margin: 1em 0;
+
+        ul { margin: 0; }
+
+        code {
+            padding: 3px 5px;
+            background: $codeBgColor;
+            font-family: Menlo, Consolas, monospace;
+        }
+    }
+}
+
+
 .post {
-    padding: 25px 0 15px;
+    padding: 20px 0 15px;
 
     .post-title {
         margin: 0;
@@ -453,13 +558,13 @@ div {
         word-break: break-word;
 
         h2 {
-            margin: 1.4em 0 1.1em;
+            margin: 1.375em 0 1em;
             border-bottom: 1px solid #eee;
             overflow: hidden;
         }
 
         h3 {
-            margin: 1.4em 0 1.1em;
+            margin: 1.375em 0 1em;
         }
 
         a {
@@ -478,7 +583,7 @@ div {
         }
 
         p {
-            margin: 0 0 1.234em;
+            margin: 0 0 1.5em;
             word-break: break-word;
             overflow-wrap: break-word;
 
@@ -619,6 +724,77 @@ div {
     }
 }
 
+.flink {
+    margin-bottom: 1.25rem;
+}
+.flink-list {
+    box-sizing: border-box;
+
+    &::after {
+        content: " ";
+        display: table;
+        clear: both;
+    }
+}
+.link-item {
+    float: left;
+    margin: 6px 6px;
+    width: calc(33% - 12px);
+    min-width: 200px;
+    border: 1px solid #e3e8f7;
+    border-radius: 6px;
+    background-color: #fff;
+
+    a {
+        display: flex;
+        color: $linkColor;
+
+        &:hover {
+            .link-item-title {
+                color: $linkHoverColor;
+            }
+        }
+    }
+
+    .link-item-avatar {
+        margin: 15px 10px;
+        width: 60px;
+        height: 60px;
+        object-fit: cover;
+        border: 1px solid #eee;
+        border-radius: 6px;
+        box-sizing: border-box;
+    }
+
+    .link-item-main {
+        margin: 15px 10px 15px 0;
+        display: flex;
+        flex-direction: column; // 垂直排列
+        justify-content: space-around;
+        width: calc(100% - 90px); // 约束内容不超出范围
+    }
+
+    .link-item-title {
+        font-size: 1.2em;
+        font-weight: bold;
+        line-height: 1.2;
+    }
+
+    .link-item-desc {
+        margin-top: 10px;
+        font-size: 0.875em;
+        line-height: 1.1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        // border: 1px solid #222;
+
+        // display: -webkit-box;
+        // -webkit-line-clamp: 2;
+        // -webkit-box-orient: vertical;
+    }
+}
+
 .large {
     .wl-content .vemoji, .wl-content .wl-emoji {
         height: 4em;
@@ -769,6 +945,10 @@ screen and (max-width: 48em) {
 
 @media print,
 screen and (max-width: 35.5em) {
+    html {
+        font-size: 14px;
+    }
+
     .body_container {
         padding: 0 20px;
     }
@@ -2586,4 +2766,4 @@ html[data-dark='true'] {
 
 .article-tag-list {
     padding-left: 0rem;
-}
+}