xaoxuu
/
hexo-theme-stellar
mirror of https://github.com/xaoxuu/hexo-theme-stellar
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[feat] article type

This commit is contained in:
xaoxuu 2024-01-18 22:11:58 +08:00
parent f086ee6932
commit 8e8b63169b
21 changed files with 95 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
_config.yml
View File

@ -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

2
layout/_partial/main/article/read_next.ejs
View File

@ -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) {

2
layout/_partial/main/navbar/breadcrumb.ejs
View File

@ -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">';

6
layout/_partial/sidebar/index.ejs
View File

@ -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

2
layout/_partial/sidebar/logo.ejs
View File

@ -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) {

4
layout/_partial/widgets/related.ejs
View File

@ -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()
}
}

27
layout/layout.ejs
View File

@ -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 += `<div class="sidebar-container">`
// html += `<img no-lazy class="sidebar-bg" src="${theme.style.sidebar.background}">`
html += `<div class="sidebar-container${theme.style.sidebar?.blur ? ' sidebar-blur' : ''}">`
html += partial('_partial/sidebar/index')
html += `</div>`
html += `</aside>`

2
layout/page.ejs
View File

@ -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;

2
layout/post.ejs
View File

@ -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)) { %>

28
layout/topic.ejs
View File

@ -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') %>

2
layout/wiki.ejs
View File

@ -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)) { %>

2
scripts/generators/topic.js
View File

@ -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) {

4
source/css/_common/highlight.styl
View File

@ -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-right-radius: $border-bar
border-bottom-left-radius: $border-button
border-bottom-right-radius: $border-button
background: var(--block-hover)
>table
overflow: auto

11
source/css/_custom.styl
View File

@ -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)

23
source/css/_layout/md.styl
View File

@ -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

2
source/css/_layout/sidebar/nav-area.styl
View File

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

7
source/css/_layout/sidebar/search.styl
View File

@ -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)
border-bottom: 1px dashed var(--text-p1)
color: $c-red
border-bottom: 1px dashed $c-red
font-weight: bold
filter grayscale(25%)
.search-wrapper.noresult[searching='true']

16
source/css/_layout/sidebar/sidebar.styl
View File

@ -10,7 +10,10 @@
>.widgets:first-child>.widget-wrapper:first-child
margin-top: "calc(2 * %s)" % var(--gap-l)
.l_left
.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
-webkit-backdrop-filter: saturate(240%) blur(var(--blur-px))

4
source/css/_layout/tag-plugins/tabs.styl
View File

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

4
source/css/_layout/widgets/timeline.styl
View File

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

6
source/js/plugins/copycode.js
View File

@ -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)
})