feat(layout): differentiate post thumbnail & cover

include/migration/v3_v4.js

@@ -6,6 +6,9 @@ module.exports = class extends Migration {
     }
 
     upgrade(config) {
+        if (typeof config.article === 'object') {
+            delete config.article.thumbnail;
+        }
         return config;
     }
 };

include/register.js

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

include/schema/common/article.json

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

include/style/article.styl

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

include/style/helper.styl

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

layout/archive.jsx

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

layout/common/article.jsx

@@ -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 */}

layout/common/head.jsx

@@ -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)) {
+        } else if (typeof page.cover === 'string') {
-            images = [helper.get_thumbnail(page)];
+            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')) {

package.json

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

source/img/thumbnail.svg

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