[feat] article type

_config.yml

@@ -95,6 +95,10 @@ site_tree:
 
 ######## Article ########
 article:
+  # 文章类型，决定布局风格，可以在 front-matter/topic/wiki 中覆盖此参数
+  type: tech # tech: 默认技术类文章, story: 图文类文章，文字和段落间增距大
+  # 缩进两个文字宽度，适合文字类博客，可以在 front-matter/topic/wiki 中覆盖此参数
+  indent: # true / false
   # 如果没有指定封面，是否根据 tags 作为关键词搜索封面图片？
   auto_cover: false # search from https://source.unsplash.com/
   # 封面图宽高比
@@ -451,7 +455,7 @@ style:
   smooth_scroll: false # true / false 开启时如果目录过长可能无法准确定位
   font-size:
     root: 16px
-    body: .9375rem # 15px
+    body: 1rem # 16px 
     code: 85% # 14px
     codeblock: 0.8125rem # 13px
   font-family:
@@ -491,6 +495,13 @@ style:
   gradient: # https://webgradients.com/
     start: 'linear-gradient(to right, hsl(215, 95%, 64%), hsl(195, 95%, 60%), hsl(165, 95%, 56%), hsl(165, 95%, 56%), hsl(195 95% 60%), hsl(215, 95%, 64%))'
     search: 'linear-gradient(to right, #04F3FF, #08FFC6, #DDF730, #FFBD19, #FF1FE0, #C418FF, #04F3FF)'
+  sidebar:
+    # 可以设置：纯色/渐变色/图片作为背景
+    # background: 'linear-gradient(to bottom, #abc3, #abc3)'
+    # background: 'linear-gradient(to bottom, #20E2D744, #F9FEA544)'
+    # 在图片上层增加高斯模糊效果（同时附带饱和度增强效果）
+    background: 'url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.13/image/sidebar-bg1@small.jpg)'
+    blur: true
 
 default:
   avatar: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/avatar/round/3442075.svg
@@ -500,7 +511,7 @@ default:
   project: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/image/2779789.png
   banner: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/banner/books.jpg
   topic: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/image/10433048.png
-  sidebar: https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.13/image/sidebar-bg1@small.jpg
+
 
 api_host:
   ghapi: https://api.github.com

layout/_partial/main/article/read_next.ejs

@@ -4,7 +4,7 @@ function layoutDiv() {
   var title = __('meta.read_next')
   title_prev = __('meta.newer')
   title_next = __('meta.older')
-  if (page.layout === 'post' || page.layout === 'topic') {
+  if (page.layout === 'post') {
     prev = page.prev
     next = page.next
   } else if (page.layout === 'wiki' && page.wiki?.length > 0) {

layout/_partial/main/navbar/breadcrumb.ejs

@@ -54,7 +54,7 @@ function layoutDiv() {
     
     el += '</div>';
     el += '</div>';
-  } else if (page.layout === 'topic' && page.topic?.length > 0) {
+  } else if (page.topic?.length > 0) {
     el += '<div class="bread-nav fs12">';
     el += '<div class="left">';
     el += '<div id="breadcrumb">';

layout/_partial/sidebar/index.ejs

@@ -9,7 +9,7 @@ if (page.sidebar == null) {
   } else if (page.layout === 'index_topic') {
     // 专栏列表页等同于博客列表页
     sidebar = site_tree.blog.sidebar
-  } else if (page.layout === 'topic') {
+  } else if (page.topic?.length > 0) {
     sidebar = site_tree.topic.sidebar
   } else if (page.layout === 'index_wiki' || page.layout === 'wiki') {
     sidebar = site_tree.wiki.sidebar
@@ -25,7 +25,7 @@ if (page.sidebar == null) {
     sidebar = []
   }
 
-  if (page.layout === 'topic' && page.topic && theme.topic?.tree[page.topic]?.sidebar) {
+  if (page.topic && theme.topic?.tree[page.topic]?.sidebar) {
     sidebar = theme.topic.tree[page.topic].sidebar
   }
   if (page.layout == 'wiki' && page.wiki && theme.wiki?.tree[page.wiki]?.sidebar) {
@@ -133,7 +133,7 @@ function layoutNavArea() {
     if (proj.search) {
       search = proj.search
     }
-  } else if (page.topic && page.layout == 'topic' && theme.topic.tree[page.topic]) {
+  } else if (page.topic && theme.topic.tree[page.topic]) {
     const topic = theme.topic.tree[page.topic]
     if (topic.search) {
       search = topic.search

layout/_partial/sidebar/logo.ejs

@@ -14,7 +14,7 @@ if (page.logo) {
       subtitle: proj.subtitle
     }
   }
-} else if (page.topic && page.layout == 'topic' && theme.topic.tree[page.topic]) {
+} else if (page.topic && theme.topic.tree[page.topic]) {
   const topic = theme.topic.tree[page.topic]
   var l = topic.logo
   if (l) {

layout/_partial/widgets/related.ejs

@@ -55,9 +55,9 @@ function relatedWiki() {
   return el
 }
 function layoutDiv() {
-  if (page.layout == 'wiki') {
+  if (page.wiki?.length > 0) {
     return relatedWiki()
-  } else if (page.layout == 'topic') {
+  } else if (page.topic?.length > 0) {
     return relatedPostsInTopic()
   }
 }

layout/layout.ejs

@@ -1,20 +1,39 @@
 <%
+// 页面类型：索引页面还是内容页面
 var page_type = 'index'
-if (['post', 'page', 'wiki', 'topic', null].includes(page.layout)) {
+if (['post', 'page', 'wiki', null].includes(page.layout)) {
   if (!page.nav_tabs) {
     page_type = 'content'
   }
 }
+// 文章类型：技术类文章/文学类文章
+var article_type = theme.article.type
+if (page.type?.length > 0) {
+  article_type = page.type
+}
+// 是否缩进
+var indent = false
+if (page.indent != null) {
+  indent = page.indent
+} else if (page.topic && theme.topic.tree[page.topic] && (theme.topic.tree[page.topic].indent != null)) {
+  indent = theme.topic.tree[page.topic].indent
+} else if (page.wiki && theme.wiki.tree[page.wiki] && (theme.wiki.tree[page.wiki].indent != null)) {
+  indent = theme.wiki.tree[page.wiki].indent
+} else if (theme.article.indent) {
+  indent = theme.article.indent
+} else {
+  indent = article_type === 'story'
+}
 
 var html = `<!DOCTYPE html>`
 html += `<html lang="${page.lang}">`
   html += partial('_partial/head')
   html += `<body>`
     html += partial('_partial/cover/index')
-    html += `<div class="l_body ${page_type}" id="start" layout="page.layout">`
+    html += `<div class="l_body ${page_type} ${article_type}" id="start" layout="${page.layout}" ${indent ? 'text-indent' : ''}>`
       html += `<aside class="l_left">`
-        html += `<img no-lazy class="sidebar-bg" src="${theme.default.sidebar}">`
+        // html += `<img no-lazy class="sidebar-bg" src="${theme.style.sidebar.background}">`
-        html += `<div class="sidebar-container">`
+        html += `<div class="sidebar-container${theme.style.sidebar?.blur ? ' sidebar-blur' : ''}">`
           html += partial('_partial/sidebar/index')
         html += `</div>`
       html += `</aside>`

layout/page.ejs

@@ -15,7 +15,7 @@ function layoutDiv() {
   if (page.h1 || page.title || (page.content && page.content.length > 0)) {
     el += partial('_partial/main/navbar/breadcrumb');
   }
-  el += '<article class="md-text content ' + page.layout + (page.indent ? ' indent' : '') + scrollreveal() + '">';
+  el += '<article class="md-text content ' + page.layout + scrollreveal() + '">';
   el += layoutTitle();
   if (page.content && page.content.length > 0) {
     el += page.content;

layout/post.ejs

@@ -20,7 +20,7 @@ if (theme.plugins.heti && theme.plugins.heti.enable) {
 }
 %>
 <%- partial('_partial/main/navbar/breadcrumb') %>
-<article class='md-text content<%- heti %> <%- post.layout %><%- post.indent ? ' indent' : '' %><%- scrollreveal() %>'>
+<article class='md-text content<%- heti %> <%- post.layout %><%- scrollreveal() %>'>
 <%- layoutTitle() %>
 <%- post.content %>
 <% if (theme.plugins.tianli_gpt.enable && ['all', 'post'].includes(theme.plugins.tianli_gpt.field)) { %>

layout/topic.ejs

@@ -1,28 +0,0 @@
-<%
-if (page.menu_id == undefined) {
-  page.menu_id = 'post'
-}
-if (page.title == undefined) {
-  page.title = __('btn.topic')
-}
-function layoutTitle() {
-  const title = page.h1 != null ? page.h1 : page.title;
-  if (title && title.length > 0) {
-    return '<h1 class="article-title"><span>' + title + '</span></h1>';
-  } else {
-    return '';
-  }
-}
-%>
-
-<%- partial('_partial/main/navbar/breadcrumb') %>
-<article class='md-text content <%- page.layout %><%- page.indent ? ' indent' : '' %><%- scrollreveal() %>'>
-<%- layoutTitle() %>
-<%- markdown(page.content) %>
-<% if (theme.plugins.tianli_gpt.enable && ['all', 'topic'].includes(theme.plugins.tianli_gpt.field)) { %>
-<%- partial('_partial/plugins/ai/tianli_gpt') %>
-<% } %>
-<%- partial('_partial/main/article/article_footer') %>
-</article>
-<%- partial('_partial/main/article/read_next') %>
-<%- partial('_partial/plugins/comments/layout') %>

layout/wiki.ejs

@@ -20,7 +20,7 @@ function layoutTitle() {
 %>
 
 <%- partial('_partial/main/navbar/breadcrumb') %>
-<article class='md-text content <%- page.layout %><%- page.indent ? ' indent' : '' %><%- scrollreveal() %>'>
+<article class='md-text content <%- page.layout %><%- scrollreveal() %>'>
 <%- layoutTitle() %>
 <%- page.content %>
 <% if (theme.plugins.tianli_gpt.enable && ['all', 'wiki'].includes(theme.plugins.tianli_gpt.field)) { %>

scripts/generators/topic.js

@@ -2,7 +2,7 @@
  * topic v1 | https://github.com/xaoxuu/hexo-theme-stellar/
  */
 
-hexo.extend.generator.register('topic', function (locals) {
+hexo.extend.generator.register('index_topic', function (locals) {
   const { site_tree, topic } = hexo.theme.config
   const topicIdList = Object.keys(topic.tree)
   if (topicIdList.length == 0) {

source/css/_common/highlight.styl

@@ -34,8 +34,8 @@ p>code:not([class]),li>code:not([class])
     span
       padding: 4px 0.5rem
       display: block
-      border-bottom-left-radius: $border-bar
+      border-bottom-left-radius: $border-button
-      border-bottom-right-radius: $border-bar
+      border-bottom-right-radius: $border-button
       background: var(--block-hover)
   >table
     overflow: auto

source/css/_custom.styl

@@ -50,7 +50,7 @@ $fs-h3   = 1.375rem  // 22px
 $fs-h4   = 1.125rem  // 18px
 $fs-h5   = $fs-15
 $fs-h6   = $fs-12
-$fs-p    = convert(hexo-config('style.font-size.body'))
+$fs-body = convert(hexo-config('style.font-size.body'))
 $fs-code = convert(hexo-config('style.font-size.code'))
 $fs-codeblock = convert(hexo-config('style.font-size.codeblock'))
 
@@ -65,6 +65,7 @@ $border-button = 4px
 :root
   --width-left: 288px
   --width-main: 720px
+  --fs-p: $fs-body
   --gap-l: 16px
   --gap-p: 1rem // gap for paragraph
   --gap-p-compact: 0.75rem
@@ -84,7 +85,13 @@ $border-button = 4px
   @media screen and (max-width: $device-mobile-max)
     --width-left: 288px
 
-
+// 文章布局风格
+.l_body.story
+  --fs-p: 'calc(%s + 2px)' % $fs-body
+  --gap-p: 1.5rem
+  .tag-plugin,p>img
+    margin-top: 2.4rem
+    margin-bottom: 2.4rem
 
 // shadow
 $boxshadow-card = 0 1px 2px 0px rgba(0, 0, 0, 0.1)

source/css/_layout/md.styl

@@ -22,16 +22,6 @@ h1.article-title
   position: relative
   padding-bottom: 2rem
   overflow: hidden
-  &.indent
-    >p:not([class])
-      text-indent: 'calc(%s * 2)' % $fs-p
-      text-align: convert(hexo-config('style.text-align'))
-      a
-        text-indent: 0
-    h1,h2,h3,h4,h5,h6
-      text-align: center
-    >h2:not([class])
-      border-bottom: none
   >:first-child:not(h1)
     margin-top: 0
   h1:not(:first-child)
@@ -53,6 +43,17 @@ h1.article-title
       margin-bottom: 0.25em
       padding-top: 0
 
+.l_body[text-indent] .md-text.content
+  >p:not([class])
+    text-indent: 'calc(%s * 2)' % var(--fs-p)
+    text-align: convert(hexo-config('style.text-align'))
+    a
+      text-indent: 0
+  h1,h2,h3,h4,h5,h6
+    text-align: center
+  >h2:not([class])
+    border-bottom: none
+
 .md-text.content:first-child
   padding-top: 0
 
@@ -109,7 +110,7 @@ h1.article-title
     margin-top: -0.5rem
 
 .md-text p
-  font-size: $fs-p
+  font-size: var(--fs-p)
 
 .md-text pre
   -webkit-font-smoothing: auto

source/css/_layout/sidebar/nav-area.styl

@@ -1,2 +1,2 @@
 .nav-area
-  margin: 32px var(--gap-l) 8px
+  margin: 32px var(--gap-l) 0

source/css/_layout/sidebar/search.styl

@@ -84,7 +84,7 @@
     .search-result-content
       overflow: hidden
       color: var(--text-p3)
-      margin: .4em auto
+      margin: 4px 0 0
       max-height: 13em
       text-align: justify
       font-size: $fs-12
@@ -94,9 +94,10 @@
       -webkit-line-clamp: 2
 
     .search-keyword
-      color: var(--text-p1)
+      color: $c-red
-      border-bottom: 1px dashed var(--text-p1)
+      border-bottom: 1px dashed $c-red
       font-weight: bold
+      filter grayscale(25%)
 
 
 .search-wrapper.noresult[searching='true']

source/css/_layout/sidebar/sidebar.styl

@@ -11,6 +11,9 @@
       margin-top: "calc(2 * %s)" % var(--gap-l)
   
 .l_left
+  background-size: cover
+  if hexo-config('style.sidebar.background')
+    background-image: convert(hexo-config('style.sidebar.background'))
   .sidebar-bg
     position absolute
     width: 100%
@@ -19,13 +22,14 @@
     background: var(--text-meta)
   .sidebar-container
     height: 100%
+    display: flex
+    flex-direction: column
+    word-break: break-all
+    text-align: justify
+  .sidebar-blur
     --blur-px: 100px
     --blur-bg: var(--sidebar-bg)
     @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
       background: var(--blur-bg)
       backdrop-filter: saturate(240%) blur(var(--blur-px))
       -webkit-backdrop-filter: saturate(240%) blur(var(--blur-px))
-    display: flex
-    flex-direction: column
-    word-break: break-all
-    text-align: justify

source/css/_layout/tag-plugins/tabs.styl

@@ -82,7 +82,7 @@
   .tab-content:has(.grid-box)
     width: 100%
 
-.md-text.indent .tag-plugin.tabs .tab-content p:not([class])
+.l_body[text-indent] .md-text .tag-plugin.tabs .tab-content p:not([class])
-  text-indent: 'calc(%s * 2)' % $fs-p
+  text-indent: 'calc(%s * 2)' % var(--fs-p)
   a
     text-indent: 0

source/css/_layout/widgets/timeline.styl

@@ -28,5 +28,9 @@
         &:hover
           color: $color-hover
           border-bottom: 1px solid $color-hover
+      code 
+        background: none
+        padding: 0
+        margin: 0
       
       

source/js/plugins/copycode.js

@@ -3,7 +3,7 @@ codeElementArr.forEach(code => {
   // copy btn 
   const codeCopyBtn = document.createElement('div')
   codeCopyBtn.classList.add('copy-btn')
-  codeCopyBtn.innerText = stellar.plugins.copycode.default_text
+  codeCopyBtn.innerHTML = stellar.plugins.copycode.default_text
 
   code.appendChild(codeCopyBtn)
 
@@ -11,11 +11,11 @@ codeElementArr.forEach(code => {
     const currentCodeElement = code.children[0]?.innerText
     await copyCode(currentCodeElement)
 
-    codeCopyBtn.innerText = stellar.plugins.copycode.success_text
+    codeCopyBtn.innerHTML = stellar.plugins.copycode.success_text
     codeCopyBtn.classList.add('success')
     hud.toast(stellar.plugins.copycode.toast, 2500)
     setTimeout(() => {
-      codeCopyBtn.innerText = stellar.plugins.copycode.default_text
+      codeCopyBtn.innerHTML = stellar.plugins.copycode.default_text
       codeCopyBtn.classList.remove('success')
     },3000)
   })