feat(layout): differentiate post thumbnail & cover
This commit is contained in:
ppoffice
parent
d384b4555b
commit
304e8ea368
|
|
@ -6,6 +6,9 @@ module.exports = class extends Migration {
|
|||
}
|
||||
|
||||
upgrade(config) {
|
||||
if (typeof config.article === 'object') {
|
||||
delete config.article.thumbnail;
|
||||
}
|
||||
return config;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,6 +10,5 @@ module.exports = hexo => {
|
|||
require('hexo-component-inferno/lib/hexo/generator/tags')(hexo);
|
||||
require('hexo-component-inferno/lib/hexo/helper/cdn')(hexo);
|
||||
require('hexo-component-inferno/lib/hexo/helper/page')(hexo);
|
||||
require('hexo-component-inferno/lib/hexo/helper/thumbnail')(hexo);
|
||||
require('hexo-component-inferno/lib/core/view').init(hexo);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -34,12 +34,6 @@
|
|||
},
|
||||
"nullable": true
|
||||
},
|
||||
"thumbnail": {
|
||||
"type": "boolean",
|
||||
"description": "Whether to show thumbnail image for every article",
|
||||
"default": true,
|
||||
"nullable": true
|
||||
},
|
||||
"readtime": {
|
||||
"type": "boolean",
|
||||
"description": "Whether to show estimated article reading time",
|
||||
|
|
|
|||
|
|
@ -76,11 +76,6 @@ article
|
|||
margin-left: .75rem
|
||||
margin-right: 0
|
||||
|
||||
.thumbnail
|
||||
object-fit: cover
|
||||
width: 100% !important
|
||||
height: 100% !important
|
||||
|
||||
// Overflow table
|
||||
.table-overflow
|
||||
overflow-x: auto
|
||||
|
|
|
|||
|
|
@ -164,3 +164,8 @@ for n in (0 .. 5)
|
|||
.avatar
|
||||
height: 100%
|
||||
object-fit: cover
|
||||
|
||||
.fill
|
||||
object-fit: cover
|
||||
width: 100% !important
|
||||
height: 100% !important
|
||||
|
|
@ -6,7 +6,7 @@ const ArticleMedia = require('hexo-component-inferno/lib/view/common/article_med
|
|||
module.exports = class extends Component {
|
||||
render() {
|
||||
const { config, page, helper } = this.props;
|
||||
const { url_for, __, has_thumbnail, get_thumbnail, date_xml, date } = helper;
|
||||
const { url_for, __, date_xml, date } = helper;
|
||||
|
||||
const language = page.lang || page.language || config.language;
|
||||
|
||||
|
|
@ -23,12 +23,12 @@ module.exports = class extends Component {
|
|||
name: category.name
|
||||
}));
|
||||
return <ArticleMedia
|
||||
thumbnail={has_thumbnail(post) ? get_thumbnail(post) : null}
|
||||
url={url_for(post.link || post.path)}
|
||||
title={post.title}
|
||||
date={date(post.date)}
|
||||
dateXml={date_xml(post.date)}
|
||||
categories={categories} />;
|
||||
categories={categories}
|
||||
thumbnail={post.thumbnail ? url_for(post.thumbnail) : null} />;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,20 +20,21 @@ module.exports = class extends Component {
|
|||
render() {
|
||||
const { config, helper, page, index } = this.props;
|
||||
const { article, plugins } = config;
|
||||
const { has_thumbnail, get_thumbnail, url_for, date, date_xml, __, _p } = helper;
|
||||
const { url_for, date, date_xml, __, _p } = helper;
|
||||
|
||||
const indexLaunguage = config.language || 'en';
|
||||
const language = page.lang || page.language || config.language || 'en';
|
||||
const cover = page.cover ? url_for(page.cover) : null;
|
||||
|
||||
return <Fragment>
|
||||
{/* Main content */}
|
||||
<div class="card">
|
||||
{/* Thumbnail */}
|
||||
{has_thumbnail(page) ? <div class="card-image">
|
||||
{cover ? <div class="card-image">
|
||||
{index ? <a href={url_for(page.link || page.path)} class="image is-7by3">
|
||||
<img class="thumbnail" src={get_thumbnail(page)} alt={page.title || get_thumbnail(page)} />
|
||||
<img class="fill" src={cover} alt={page.title || cover} />
|
||||
</a> : <span class="image is-7by3">
|
||||
<img class="thumbnail" src={get_thumbnail(page)} alt={page.title || get_thumbnail(page)} />
|
||||
<img class="fill" src={cover} alt={page.title || cover} />
|
||||
</span>}
|
||||
</div> : null}
|
||||
{/* Metadata */}
|
||||
|
|
|
|||
|
|
@ -64,8 +64,10 @@ module.exports = class extends Component {
|
|||
|
||||
if (typeof page.og_image === 'string') {
|
||||
images = [page.og_image];
|
||||
} else if (helper.has_thumbnail(page)) {
|
||||
images = [helper.get_thumbnail(page)];
|
||||
} else if (typeof page.cover === 'string') {
|
||||
images = [url_for(page.cover)];
|
||||
} else if (typeof page.thumbnail === 'string') {
|
||||
images = [url_for(page.thumbnail)];
|
||||
} else if (article && typeof article.og_image === 'string') {
|
||||
images = [article.og_image];
|
||||
} else if (page.content && page.content.includes('<img')) {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
"bulma-stylus": "0.8.0",
|
||||
"deepmerge": "^4.2.2",
|
||||
"hexo": "^5.0.2",
|
||||
"hexo-component-inferno": "^0.6.0",
|
||||
"hexo-component-inferno": "^0.7.0",
|
||||
"hexo-log": "^2.0.0",
|
||||
"hexo-pagination": "^1.0.0",
|
||||
"hexo-renderer-inferno": "^0.1.3",
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="#ccc">
|
||||
<rect width="100%" height="100%" fill="#f2f2f2"/>
|
||||
<path d="M39 38H11c-1.7 0-3-1.3-3-3V17c0-1.7 1.3-3 3-3h6c.2 0 .5-.2.6-.3l1.1-2.2c.4-.8 1.4-1.4 2.3-1.4h8c.9 0 1.9.6 2.3 1.4l1.1 2.2c.1.2.4.3.6.3h6c1.7 0 3 1.3 3 3v18c0 1.7-1.3 3-3 3zM11 16c-.6 0-1 .4-1 1v18c0 .6.4 1 1 1h28c.6 0 1-.4 1-1V17c0-.6-.4-1-1-1h-6c-.9 0-1.9-.6-2.3-1.4l-1.1-2.2c-.1-.2-.4-.4-.6-.4h-8c-.2 0-.5.2-.6.3l-1.1 2.2c-.4.9-1.4 1.5-2.3 1.5h-6z"/>
|
||||
<path d="M25 34c-5 0-9-4-9-9s4-9 9-9 9 4 9 9-4 9-9 9zm0-16c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7z"/>
|
||||
<circle cx="35" cy="18" r="1"/>
|
||||
<path d="M12 12h4v1h-4z"/>
|
||||
<path d="M25 21v-1c-2.8 0-5 2.2-5 5h1c0-2.2 1.8-4 4-4z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 747 B |
Loading…
Reference in New Issue