hexo-theme-amazing
Version:
A simple, delicate, and modern theme for Hexo
212 lines (203 loc) • 13.6 kB
JSX
const moment = require('moment');
const { Component, Fragment } = require('inferno');
const Share = require('./share');
const Donates = require('./donates');
const Comment = require('./comment');
const ArticleLicensing = require('../misc/article_licensing');
const RecommendPosts = require('../widget/recommend_post');
const AdsenseX = require('../widget/ads_x');
/**
* Get the word count of text.
*/
function getWordCount(content) {
if (typeof content === 'undefined') {
return 0;
}
content = content.replace(/<\/?[a-z][^>]*>/gi, '');
content = content.trim();
return content ? (content.match(/[\u00ff-\uffff]|[a-zA-Z]+/g) || []).length : 0;
}
module.exports = class extends Component {
render() {
const { config, helper, page, index, mysite, indexAt } = this.props;
const { article, plugins, index_show_tags_categories,comment,comment_head_has_ad,article_head_has_ad,index_zero_position_ad,index_ad_positions } = config;
const { url_for, date, date_xml, __, _p, _get_md5, _get_path_end_str } = helper;
const language = page.lang || page.language || config.language || 'en';
const cover = page.thumbnail ? page.thumbnail : null;
const words = getWordCount(page._content);
const time = moment.duration((words / 150.0) * 60, 'seconds');
const timeStr = time.locale(language).humanize().replace('a few seconds', 'fast').replace('hours', 'h').replace('minutes', 'm').replace('seconds', 's').replace('days', 'd');
const wordsCount = (words / 1000.0).toFixed(1);
const indexShowTagsCat = index_show_tags_categories == undefined || index_show_tags_categories;
const lastModified = __('article.last_modified');
const isPost = page.layout == 'post';
const isGitalk = comment !== undefined && comment.type !== undefined && comment.type == 'gitalk';
const showComment = true;//comment !== undefined && comment.type !== undefined && (comment.type == 'gitalk' || comment.type == 'valine');
var id = _get_md5(_get_path_end_str(page.path, page.uniqueId, page.title));
var md5Id = id;
if (!isGitalk) {
id = "/" + page.path;
md5Id = _get_md5(id);
}
return <Fragment>
{(indexAt != undefined & indexAt == 0) ? <AdsenseX config={config} display={index_zero_position_ad}/> : null}
{!index ? <AdsenseX config={config} display={article_head_has_ad}/> : null}
{/* Main content */}
<div class="card">
{/* Thumbnail */}
{cover ? <div class="card-image">
{index ? <a href={url_for(page.link || page.path)} class="image is-7by3">
<img class="fill" src={cover} alt={page.title || cover} />
</a> : <span class="image is-7by3">
<img class="fill" src={cover} alt={page.title || cover} />
</span>}
</div> : null}
{/* Metadata */}
<article class={`card-content article${'direction' in page ? ' ' + page.direction : ''}`} role="article">
{page.layout !== 'page' ? <div class="article-meta size-small is-uppercase level is-mobile">
<div class="level-left">
{/* Creation Date */}
{/*{page.date && <span class="level-item" dangerouslySetInnerHTML={{*/}
{/*__html: _p('article.created_at', `<time dateTime="${date_xml(page.date)}" title="${date_xml(page.date)}">${date(page.date)}</time>`)*/}
{/*}}></span>}*/}
<i class="far fa-calendar-plus"> </i>{date(page.date)}
{/* Last Update Date */}
{/*{page.updated && <span class="level-item" dangerouslySetInnerHTML={{*/}
{/*__html: _p('article.updated_at', `<time dateTime="${date_xml(page.updated)}" title="${date_xml(page.updated)}">${date(page.updated)}</time>`)*/}
{/*}}></span>}*/}
{/* author */}
{page.author ? <span class="level-item"> {page.author} </span> : null}
{/* Categories */}
{/*{page.categories && page.categories.length ? <span class="level-item">*/}
{/*{(() => {*/}
{/*const categories = [];*/}
{/*page.categories.forEach((category, i) => {*/}
{/*categories.push(<a class="link-muted" href={url_for(category.path)}>{category.name}</a>);*/}
{/*if (i < page.categories.length - 1) {*/}
{/*categories.push(<span> / </span>);*/}
{/*}*/}
{/*});*/}
{/*return categories;*/}
{/*})()}*/}
{/*</span> : null}*/}
{showComment ?
<a class="commentCountImg" href={`${url_for(page.link || page.path)}#comment-container`}><span class="display-none-class">{id}</span><i class="far fa-comment-dots" /> <span class="commentCount" id={md5Id}>99+</span> </a> : null}
{/* Read time */}
{/*{article && article.readtime && article.readtime === true ? <span class="level-item">*/}
{/*{(() => {*/}
{/*const words = getWordCount(page._content);*/}
{/*const time = moment.duration((words / 150.0) * 60, 'seconds');*/}
{/*return `${_p('article.read_time', time.locale(index ? indexLaunguage : language).humanize())} (${_p('article.word_count', words)})`;*/}
{/*})()}*/}
{/*</span> : null}*/}
{article && article.readtime && article.readtime === true ? <span class="level-item">
<i class="far fa-clock"> </i>{timeStr} <i class="fas fa-pencil-alt"> </i>{wordsCount} k
</span> : null}
{/* Visitor counter */}
{!index && plugins && plugins.busuanzi === true ? <span class="level-item" id="busuanzi_container_page_pv" dangerouslySetInnerHTML={{
__html: _p('plugin.visit_count', '<span id="busuanzi_value_page_pv">0</span>')
}}></span> : null}
</div>
{/*top icon*/}
{page.top > 0 ?
<div class="pin-icon"><i class="fas fa-thumbtack"></i></div> : null}
</div> : null}
{/* Title */}
<h1 class="title is-3 is-size-4-mobile">
{index ? <a class="link-muted" href={url_for(page.link || page.path)}>{page.title}</a> : page.title}
</h1>
{/* Content/Excerpt */}
<div class="content" dangerouslySetInnerHTML={{ __html: index && page.excerpt ? page.excerpt : page.content }}></div>
{index && indexShowTagsCat ? <div class="index-category-tag">
{/* categories */}
{page.categories && page.categories.length ? <div class="level-item">
{(() => {
const categories = [];
categories.push(<i class="fas fa-folder-open has-text-grey"> </i>)
page.categories.forEach((category, i) => {
categories.push(<a class="article-more button is-small link-muted index-categories" href={url_for(category.path)}>{category.name}</a>);
if (i < page.categories.length - 1) {
categories.push(<span> </span>);
}
});
return categories;
})()}
</div> : null}
{/* tags */}
{page.tags && page.tags.length ?
<div class="level-item">
{(() => {
const tags = [];
tags.push(<i class="fas fa-tags has-text-grey"> </i>)
page.tags.forEach((tag, i) => {
tags.push(<a class="article-more button is-small link-muted index-tags" href={url_for(tag.path)}>{tag.name}</a>);
if (i < page.tags.length - 1) {
tags.push(<span> </span>);
}
});
return tags;
})()}
</div> : null}
<hr />
</div> : null}
{/* Licensing block */}
{!index && isPost && article && article.licenses && Object.keys(article.licenses)
? <ArticleLicensing.Cacheable page={page} config={config} helper={helper} /> : null}
{/* Tags */}
{/*{!index && page.tags && page.tags.length ? <div class="article-tags size-small mb-4">*/}
{/*<span class="mr-2">#</span>*/}
{/*{page.tags.map(tag => {*/}
{/*return <a class="link-muted mr-2" rel="tag" href={url_for(tag.path)}>{tag.name}</a>;*/}
{/*})}*/}
{/*</div> : null}*/}
{/* "Read more" button */}
{index && page.excerpt ?
<div className="level is-mobile is-flex">
<div className="level-start">
<div className="level-item">
<a className="article-more button is-small size-small"
href={`${url_for(page.link || page.path)}#more`}>{__('article.more')}</a>
</div>
</div>
{/*lastModified updated*/}
{page.updated && page.updated > page.date ?
<div class="level-start">
<div class="level-item has-text-grey is-size-7">
<time datetime={date_xml(page.updated)}><i
class="far fa-calendar-check"> {lastModified} </i>{date(page.updated)}
</time>
</div>
</div> : null
}
</div> : null}
{/*Recommend & Relation post*/}
{!index && page.layout == 'post' && mysite !==undefined ? <RecommendPosts.Cacheable config={config} curPost={page} helper={helper} mysite={mysite} /> : null}
{/* Share button */}
{!index ? <Share config={config} page={page} helper={helper} /> : null}
</article>
</div>
{index && index_ad_positions && (index_ad_positions.indexOf(indexAt) > -1) ? <AdsenseX config={config} display={index_ad_positions != undefined}/> : null}
{/* Donate button */}
{!index ? <Donates config={config} helper={helper} /> : null}
{/* Post navigation */}
{!index && (page.prev || page.next) ? <nav class="post-navigation mt-4 level is-mobile">
{page.prev ? <div class="level-start">
<a class={`article-nav-prev level level-item${!page.prev ? ' is-hidden-mobile' : ''} link-muted`} href={url_for(page.prev.path)}>
<i class="level-item fas fa-chevron-left"></i>
<span class="level-item">{page.prev.title}</span>
</a>
</div> : null}
{page.next ? <div class="level-end">
<a class={`article-nav-next level level-item${!page.next ? ' is-hidden-mobile' : ''} link-muted`} href={url_for(page.next.path)}>
<span class="level-item">{page.next.title}</span>
<i class="level-item fas fa-chevron-right"></i>
</a>
</div> : null}
</nav> : null}
{!index ? <AdsenseX config={config} display={comment_head_has_ad}/> : null}
{/* Comment */}
{!index ? <Comment config={config} page={page} helper={helper} /> : null}
</Fragment>;
}
};