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

[opt] banner

This commit is contained in:
xaoxuu 2024-02-06 14:07:46 +08:00
parent e04a7887f0
commit cb717580a0
14 changed files with 111 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_config.yml
View File

@ -23,7 +23,7 @@ open_graph:
logo:
avatar: '[${config.avatar}](/about/)' # you can set avatar link in _config.yml or '[https://xxx.png](/about/)'
title: '[${config.title}](/)' # you can set html tag like: '[<img no-lazy height="32px" src="xxx"/>](/)'
subtitle: '' # '文字1 | 文字2' (鼠标放上去会切换到文字2)
subtitle: '${config.subtitle}' # '文字1 | 文字2' (鼠标放上去会切换到文字2)
# 侧边栏主功能导航菜单
menubar:
@ -63,7 +63,7 @@ site_tree:
# 主页配置
home:
leftbar: welcome, recent
rightbar: # timeline
rightbar: welcome
# 博客列表页配置
index_blog:
base_dir: blog # 只影响自动生成的页面路径
@ -191,7 +191,7 @@ comments:
data-input-position: top # top, bottom
data-theme: preferred_color_scheme
data-lang: zh-CN
data-loading: lazy
data-loading: # lazy
crossorigin: anonymous
# Twikoo

94
layout/_partial/main/navbar/article_banner.ejs
View File

@ -1,30 +1,90 @@
<%
var banner_url
var banner = {}
if (page.banner) {
banner_url = page.banner
banner.url = page.banner
} else if (theme.topic.tree[page.topic]?.banner != null) {
banner_url = theme.topic.tree[page.topic]?.banner
banner.url = theme.topic.tree[page.topic]?.banner
} else if (theme.wiki.tree[page.wiki]?.banner != null) {
banner_url = theme.wiki.tree[page.wiki]?.banner
banner.url = theme.wiki.tree[page.wiki]?.banner
}
banner = Object.assign(banner, page.banner_info)
// 标题
if (banner.title == null) {
banner.title = page.h1 != null ? page.h1 : page.title
}
function layoutBreadcrumb() {
if (page.breadcrumb === false) {
return `<div class="top"></div>`
}
var el = ''
// 1.main
el += `<div class="top bread-nav footnote">`
// 2.left
el += `<div class="left">`
// 3.left.top: 面包屑导航
el += `<div class="flex-row" id="breadcrumb">`
// 首页
el += `<a class="cap breadcrumb" href="${url_for(config.root)}">${__("btn.home")}</a>`
if (theme.wiki.tree[page.wiki]) {
el += partial('breadcrumb/wiki')
} else if (page.layout == 'post') {
el += partial('breadcrumb/blog')
} else {
el += partial('breadcrumb/page')
}
// end 3.left.top
el += `</div>`
// 3.left.bottom
el += partial('dateinfo')
// end 2.left
el += `</div>`
// end 1.main
el += `</div>`
return el
}
function layoutTitle() {
const title = page.h1 != null ? page.h1 : page.title
if (title && title.length > 0) {
return `<h1 class="text title"><span>${title}</span></h1>`
if (banner.title?.length > 0) {
return `<h1 class="text title"><span>${banner.title}</span></h1>`
} else {
return ''
}
}
function layoutSubtitle() {
if (banner.subtitle?.length > 0) {
return `<div class="text subtitle">${banner.subtitle}</div>`
} else {
return ''
}
}
function layoutIcon() {
if (banner.avatar?.length > 0 || banner.icon?.length > 0) {
return `<img class="avatar" src="${banner.avatar || banner.icon}">`
} else {
return ''
}
}
function layoutBottom() {
const article_title = layoutTitle()
if (article_title.length > 0) {
const el_icon = layoutIcon()
const el_title = layoutTitle()
const el_subtitle = layoutSubtitle()
var cls = ''
if (el_title.length > 0 && el_subtitle.length == 0) {
cls += ' only-title'
}
if (el_title.length > 0) {
return `
<div class="bottom">
<div class="bottom${cls}">
${el_icon}
<div class="text-area">
${article_title}
${el_title}
${el_subtitle}
</div>
</div>
`
@ -34,18 +94,18 @@ function layoutBottom() {
}
function layoutDiv() {
const top = partial('article_top_area')
const bottom = layoutBottom()
if (top.trim().length == 0 && bottom.length == 0) {
if (page.breadcrumb === false && bottom.length == 0) {
return ``
}
const top = layoutBreadcrumb()
var style = ``
var el = ``
el += `<div class="article banner top">`
if (banner_url?.length > 0) {
el += `<img class="bg" src="${banner_url}">`
if (page.poster?.color) {
style += ' style="--text-banner:' + page.poster?.color + '"'
if (banner.url?.length > 0) {
el += `<img class="bg" src="${banner.url}">`
if (banner.color) {
style += ' style="--text-banner:' + banner.color + '"'
}
}
el += `

33
layout/_partial/main/navbar/article_top_area.ejs
View File

@ -1,33 +0,0 @@
<%
function layoutDiv() {
if (page.breadcrumb === false) {
return ''
}
var el = ''
// 1.main
el += `<div class="top bread-nav footnote">`
// 2.left
el += `<div class="left">`
// 3.left.top: 面包屑导航
el += `<div class="flex-row" id="breadcrumb">`
// 首页
el += `<a class="cap breadcrumb" href="${url_for(config.root)}">${__("btn.home")}</a>`
if (theme.wiki.tree[page.wiki]) {
el += partial('breadcrumb/wiki')
} else if (page.layout == 'post') {
el += partial('breadcrumb/blog')
} else {
el += partial('breadcrumb/page')
}
// end 3.left.top
el += `</div>`
// 3.left.bottom
el += partial('dateinfo')
// end 2.left
el += `</div>`
// end 1.main
el += `</div>`
return el
}
%>
<%- layoutDiv() %>

29
layout/_partial/main/navbar/author_banner.ejs
View File

@ -1,29 +0,0 @@
<%
function layoutDiv() {
const author = page.author
var el = ``
el += `<div class="banner author top">`
if (author.banner) {
el += `<img class="bg" src="${author.banner}">`
}
el += `
<div class="content">
<div class="top">
<button class="back cap" onclick="window.history.back()">
${icon('default:goback')}
</button>
</div>
<div class="bottom">
<img class="avatar" src="${author.avatar}">
<div class="text-area">
<p class="text title">${author.name}</p>
<div class="text subtitle">${author.description || ""}</div>
</div>
</div>
</div>
`
el += `</div>`
return el
}
%>
<%- layoutDiv() %>

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

@ -67,7 +67,7 @@ function layoutDiv() {
const main = md_text(logo.title)
if (main) {
let url = md_link(logo.title)
el += layoutTitle(main, url, logo.subtitle)
el += layoutTitle(main, url, md_text(logo.subtitle))
}
el += `</div>`
el += '</header>'

11
layout/archive.ejs
View File

@ -8,14 +8,21 @@ if (page.author) {
}
function layoutArchiveList() {
var el = ''
var cls = ''
if (page.author) {
page.title = page.author.name
el += partial('_partial/main/navbar/author_banner')
page.banner = page.author.banner
page.banner_info = {
avatar: page.author.avatar,
subtitle: page.author.description
}
el += partial('_partial/main/navbar/article_banner')
cls += ' author'
} else {
page.title = __('btn.archives')
el += partial('_partial/main/navbar/nav_tabs_blog')
}
el += `<div class="post-list archives">`
el += `<div class="post-list${cls} archives">`
var years = []
const posts = page.author != null ? site.posts.filter(p => (p.author || theme.default_author.id) == page.author.id) : site.posts
posts.sort('date', -1).each(function(post) {

11
scripts/helpers/parse_config.js
View File

@ -9,17 +9,18 @@ hexo.extend.helper.register('md_text', function(args) {
if (args == undefined) {
return ''
}
const { config } = hexo
args = args.replace('${config.title}', config.title)
args = args.replace('${config.subtitle}', config.subtitle)
args = args.replace('${config.avatar}', config.avatar)
let tmp = args.split('](')
if (tmp.length > 1) {
tmp = tmp[0]
if (tmp.length > 1) {
tmp = tmp.substring(1, tmp.length)
}
}
if (tmp == 'config.title' || tmp == '${config.title}') {
tmp = hexo.config.title
} else if (tmp == 'config.avatar' || tmp == '${config.avatar}') {
tmp = hexo.config.avatar
} else {
tmp = args
}
return tmp
})

2
source/css/_custom.styl
View File

@ -48,7 +48,7 @@ $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'))
$fsh1 = 'calc(%s + 11px)' % $fs-body
$fsh1 = 'calc(%s + 9px)' % $fs-body
$fsh2 = 'calc(%s + 11px)' % $fs-body
$fsh3 = 'calc(%s + 7px)' % $fs-body
$fsh4 = 'calc(%s + 4px)' % $fs-body

2
source/css/_defines/const.styl
View File

@ -4,7 +4,7 @@ $device-mobile-425 = 425px
$device-mobile = 500px
$device-mobile-max = 667px
$device-tablet = 768px
$device-laptop = 1024px
$device-laptop = 1180px
$device-desktop = 1440px
$device-2k = 2048px
$device-4k = 2560px

4
source/css/_layout/layout.styl
View File

@ -15,6 +15,7 @@
.l_body .l_left
top: 8px
.l_body .l_right
width: calc(var(--width-sidebar) - var(--gap-max) + var(--gap-padding))
.widgets
height: 100%
overflow visible
@ -37,6 +38,7 @@
background: var(--site-bg)
overflow: auto
scrollbar(0, 0)
--blur-bg: var(--alpha75)
.l_body[rightbar]
.l_right
transform: translateX(0px)
@ -76,7 +78,7 @@
left: 0
width: 100%
height: 100%
background: rgba(black, 0.2)
background: rgba(black, 0.1)
z-index: 9
opacity 0
trans1 opacity

3
source/css/_layout/pages/archives.styl
View File

@ -100,3 +100,6 @@
opacity: 1
color: var(--text)
background: var(--block-hover)
.post-list.author #archive
padding: 1rem 0

9
source/css/_layout/partial/article-banner.styl
View File

@ -17,13 +17,14 @@
.title
font-size: $fsh1
color: var(--text-banner)
.bottom
padding: 2rem 1rem
h1
line-height: 1.2
margin: 0
margin: 0.25rem 0
.l_body[text-indent] .article.banner .content .bottom
.l_body .article.banner .content .bottom.only-title .title
padding: 0.75rem 0
.l_body[text-indent] .article.banner .content .bottom.only-title
justify-content: center

7
source/css/_layout/tag-plugins/banner.styl
View File

@ -127,13 +127,6 @@
.tag-plugin.banner .navbar a.active
blur-effect()
@media screen and (min-width: $device-mobile-max)
.banner.author.top
margin-left: var(--gap-max)
margin-right: var(--gap-max)
@media screen and (max-width: $device-mobile-max)
.banner.top
border-radius: 0
.md-text.content:first-child .tag-plugin.banner:first-child
margin-top: 1rem

1
source/css/_layout/widgets/list.styl
View File

@ -1,5 +1,4 @@
.widget-wrapper.post-list .widget-body
margin-top: 0.25rem
a
line-height: 1
font-size: $fs-14