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

文章列表页面的文章封面+文章页面的横幅

This commit is contained in:
xaoxuu 2021-12-12 16:24:33 +08:00
parent f0608b5a14
commit 150cac9bb1
12 changed files with 150 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
layout/_partial/cover/index.ejs Normal file
View File

@ -0,0 +1,12 @@
<%
function layoutCover() {
if (page.layout == 'wiki') {
return partial('wiki_cover');
}
if (page.layout == 'post') {
return partial('post_cover');
}
return '';
}
%>
<%- layoutCover() %>

26
layout/_partial/cover/post_cover.ejs Normal file
View File

@ -0,0 +1,26 @@
<%
function div() {
var el = '';
if (page.banner == undefined || page.banner == false) {
return el;
}
el += '<div class="l_cover post' + scrollreveal() + '">';
el += '<div class="cover">';
if (theme.plugins.lazyload && theme.plugins.lazyload.enable) {
el += '<div class="lazy img bg" data-bg="' + page.banner + '"></div>';
} else {
el += '<div class="lazy img bg" style="background-image:url(&quot;' + page.banner + '&quot;)"></div>';
}
el += '</div>';
if (page.title) {
el += '<div class="cover-wrap md">';
el += '<h1 class="article-title">';
el += page.title;
el += '</h1>';
el += '</div>';
}
el += '</div>';
return el;
}
%>
<%- div() %>

5
layout/_partial/main/article/wiki_cover.ejs → layout/_partial/cover/wiki_cover.ejs
View File

@ -1,9 +1,6 @@
<% <%
function layoutWikiCover() { function layoutWikiCover() {
var el = ''; var el = '';
if (page.layout !== 'wiki') {
return el;
}
let proj = theme.wiki.projects[page.wiki]; let proj = theme.wiki.projects[page.wiki];
if (proj == undefined) { if (proj == undefined) {
return el; return el;
@ -21,7 +18,7 @@ function layoutWikiCover() {
if (cover === true) { if (cover === true) {
cover = ['logo', 'title', 'description']; cover = ['logo', 'title', 'description'];
} }
el += '<div class="l_cover' + scrollreveal() + '">'; el += '<div class="l_cover wiki' + scrollreveal() + '">';
el += '<article class="cover-wrap md">'; el += '<article class="cover-wrap md">';
if (logo && logo.src && cover.includes('logo')) { if (logo && logo.src && cover.includes('logo')) {

34
layout/_partial/main/post_list/post_card.ejs
View File

@ -1,7 +1,7 @@
<% <%
function layoutDiv() { function div_default() {
var el = ''; var el = '';
el += '<article class="md">';
// 标题 // 标题
el += '<h2 class="post-title">'; el += '<h2 class="post-title">';
el += (post.title || post.seo_title) ? (post.title || post.seo_title) : date(post.date, config.date_format); el += (post.title || post.seo_title) ? (post.title || post.seo_title) : date(post.date, config.date_format);
@ -43,12 +43,36 @@ function layoutDiv() {
} }
} }
} }
el += '</div>';
if (post.pin) { if (post.pin) {
el += '<span class="pin"><img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/badge/3279dd441df8b.svg"/></span>'; el += '<span class="pin"><img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/badge/3279dd441df8b.svg"/></span>';
} }
el += '<div>'; el += '</article>';
return el; return el;
} }
function div_photo() {
var el = '';
el += '<div class="cover">';
el += '<img src="' + post.cover + '"/>';
el += '<div class="meta cap">';
el += '<span class="cap" id="post-meta">';
el += __("meta.created") + '&nbsp;' + '<time datetime="' + date_xml(post.date) + '">' + date(post.date, config.date_format) + '</time>';
el += '</span>';
el += '</div>';
el += '</div>';
el += '<article class="md">';
el += '<h2 class="post-title">';
el += post.title;
el += '</h2>';
el += '</article>';
return el;
}
function div() {
if (post.cover && post.cover.length > 0) {
return div_photo();
}
return div_default();
}
%> %>
<%- layoutDiv() %> <%- div() %>

2
layout/_partial/main/post_list/wiki_card.ejs
View File

@ -1,6 +1,7 @@
<% <%
function layoutDiv() { function layoutDiv() {
var el = ''; var el = '';
el += '<article class="md">';
if (proj.logo && proj.logo.src) { if (proj.logo && proj.logo.src) {
el += '<div class="preview">'; el += '<div class="preview">';
el += '<img src="' + proj.logo.src + '" alt="logo"'; el += '<img src="' + proj.logo.src + '" alt="logo"';
@ -20,6 +21,7 @@ function layoutDiv() {
el += '<p>' + proj.description + '</p>'; el += '<p>' + proj.description + '</p>';
} }
el += '</div>'; el += '</div>';
el += '</article>';
return el; return el;
} }
%> %>

7
layout/index.ejs
View File

@ -12,10 +12,13 @@ if (page.title && page.wiki) {
function layout_post_card(layout, post, content) { function layout_post_card(layout, post, content) {
var el = ''; var el = '';
var layout = layout;
if (layout == 'post' && post.cover != undefined) {
layout += ' photo';
}
el += '<a class="post-card ' + layout + ' ' + scrollreveal() + '" href="' + url_for(post.link || post.path) + '">'; el += '<a class="post-card ' + layout + ' ' + scrollreveal() + '" href="' + url_for(post.link || post.path) + '">';
el += '<article class="md">';
el += content; el += content;
el += '</article></a>'; el += '</a>';
return el; return el;
} }

2
layout/layout.ejs
View File

@ -2,7 +2,7 @@
<html lang='<%- page.lang %>'> <html lang='<%- page.lang %>'>
<%- partial('_partial/head') %> <%- partial('_partial/head') %>
<body> <body>
<%- partial('_partial/main/article/wiki_cover') %> <%- partial('_partial/cover/index') %>
<div class='l_body' id='start'> <div class='l_body' id='start'>
<aside class='l_left' layout='<%- page.layout %>'> <aside class='l_left' layout='<%- page.layout %>'>
<%- partial('_partial/sidebar/index') %> <%- partial('_partial/sidebar/index') %>

3
layout/post.ejs
View File

@ -6,6 +6,9 @@ if (page.header == undefined) {
page.header = false; page.header = false;
} }
function layoutTitle() { function layoutTitle() {
if (page.layout == 'post' && page.banner && page.title) {
return '';
}
const title = page.h1 || page.title; const title = page.h1 || page.title;
if (title && title.length > 0) { if (title && title.length > 0) {
return '<h1 class="article-title"><span>' + title + '</span></h1>'; return '<h1 class="article-title"><span>' + title + '</span></h1>';

6
source/css/_custom.styl
View File

@ -47,7 +47,7 @@ $fs-14 = .875rem
$fs-13 = .8125rem $fs-13 = .8125rem
$fs-12 = .75rem $fs-12 = .75rem
$fs-h1 = 2rem // 32px $fs-h1 = 1.75rem // 32px
$fs-h2 = 1.5rem // 24px $fs-h2 = 1.5rem // 24px
$fs-h3 = 1.375rem // 22px $fs-h3 = 1.375rem // 22px
$fs-h4 = 1.125rem // 18px $fs-h4 = 1.125rem // 18px
@ -63,14 +63,14 @@ $border-image = 6px
// 可以动态变化的属性 // 可以动态变化的属性
:root :root
--width-left: 256px --width-left: 256px
--width-main: 680px --width-main: 720px
--gap-l: 16px --gap-l: 16px
--gap-p: 1.25rem // gap for paragraph --gap-p: 1.25rem // gap for paragraph
// desktop 2k or larger // desktop 2k or larger
@media screen and (min-width: $device-2k) @media screen and (min-width: $device-2k)
--gap-l: 32px --gap-l: 32px
--width-left: 320px --width-left: 320px
--width-main: 740px --width-main: 780px
// desktop 4k or larger // desktop 4k or larger
@media screen and (min-width: $device-4k) @media screen and (min-width: $device-4k)
--width-main: 860px --width-main: 860px

53
source/css/_layout/list.styl
View File

@ -11,10 +11,12 @@
trans1 box-shadow trans1 box-shadow
overflow: hidden overflow: hidden
background: var(--card) background: var(--card)
position: relative
.excerpt .excerpt
margin: 1rem 0 margin: 1rem 0
>p >p
margin: 1rem 0 margin: 1rem 0
line-height: 1.5
.meta.cap .meta.cap
display: flex display: flex
flex-wrap: wrap flex-wrap: wrap
@ -28,7 +30,7 @@
object-fit: contain object-fit: contain
height: 1.5em height: 1.5em
.post-list .post-card:hover .post-list .post-card:hover
box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.08), 0 2px 8px 0px rgba(0, 0, 0, 0.06), 0 4px 16px 0px rgba(0, 0, 0, 0.04) box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 16px 0px rgba(0, 0, 0, 0.1)
// common article // common article
@ -39,38 +41,31 @@
.post-list .post-card .post-list .post-card
.post-cover .post-cover
overflow: hidden overflow: hidden
margin-left: -1rem position: absolute
margin-top: -1rem
margin-right: -1rem
img
object-fit: cover
width: 100% width: 100%
border-radius: 0 border-radius: 0
height: 280px
@media screen and (max-width: 900px)
height: 240px
@media screen and (max-width: $device-tablet)
height: 280px
@media screen and (max-width: $device-mobile)
height: 240px
@media screen and (max-width: $device-mobile-425)
height: 220px
@media screen and (max-width: $device-mobile-375)
height: 180px
&:not(.lazy) &:not(.lazy)
trans1: transform 1s trans1: transform 1s
.post-list .post-card.post.photo .post-cover img
height: 400px .post-list .post-card.post.photo
@media screen and (max-width: 900px) .cover
height: 320px position: relative
@media screen and (max-width: $device-tablet) line-height: 0
height: 400px img
@media screen and (max-width: $device-mobile) width: 100%
height: 320px .meta
@media screen and (max-width: $device-mobile-425) margin: 0 1rem
height: 280px position: absolute
@media screen and (max-width: $device-mobile-375) line-height: 1
height: 240px bottom: 1rem
width: 'calc(100% - %s * 2)' % 1rem
justify-content: flex-end
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)
.cap
color: white
h2
margin: .25rem 0
font-size: $fs-h4
// wiki // wiki

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

@ -10,16 +10,17 @@ article.md.excerpt
font-size: $fs-14 font-size: $fs-14
margin: 1em 0 margin: 1em 0
h1.article-title
margin-top: .5em
margin-bottom: 1em
line-height: 1.2
color: var(--text-p0)
article.md.content article.md.content
position: relative position: relative
margin-bottom: 2rem margin-bottom: 2rem
>:first-child >:first-child
margin-top: 0 margin-top: 0
h1.article-title
margin-top: .5em
margin-bottom: 1em
line-height: 1.2
color: var(--text-p0)
h1:not(:first-child) h1:not(:first-child)
margin-top: 2em margin-top: 2em
h2:first-child h2:first-child

46
source/css/_layout/partial/cover.styl
View File

@ -5,9 +5,45 @@
flex-direction: column flex-direction: column
justify-content: center justify-content: center
align-items: center align-items: center
position: relative
&.post
height: inherit
.l_cover .cover-wrap .l_cover .cover-wrap
margin-bottom: 0 margin-bottom: 0
display: flex
flex-direction: column
justify-content: center
align-items: center
.cover-title
font-weight: 700
font-size: 1.5rem
margin: 1rem 0
line-height: 1.2
.description
margin: 1rem 0
.start-wrap
margin: 2rem 0
flex-shrink: 0
a.start
display: inline-block
.l_cover.post
.cover
width: 100%
height: 35vh
z-index: -1
.l_cover.post .cover-wrap
z-index: 1
.article-title
text-align: center
padding: 1rem
margin: 1em 0
.l_cover.wiki .cover-wrap
max-width: $device-mobile max-width: $device-mobile
.preview .preview
margin-bottom: 2rem margin-bottom: 2rem
@ -18,15 +54,5 @@
@media screen and (max-width: $device-mobile) @media screen and (max-width: $device-mobile)
max-width: 60% max-width: 60%
.cover-title .cover-title
font-weight: 700
font-size: 1.5rem
margin: 1rem 0
&:first-child &:first-child
font-size: 3rem font-size: 3rem
.description
margin: 1rem 0
.start-wrap
margin: 2rem 0
flex-shrink: 0
a.start
display: inline-block