网页预览:
zxiaoxuan.cn
因为本人比较喜欢简介风格的,所以整个界面都是简约风格
的,一个好的博客,应该让人一眼就能看清楚技术分类,文章也应该就是文章,让人能够最好的阅读你的博客
这才是我们应该做的,所以没有太多花里胡哨的东西。
使用工具:
Git
Github
Nodepad++
QQ浏览器F12开发者选项
Hexo简易安装
前置条件
npm install -g hexo-cli
安装hexo
npm install -g hexo-cli
主题下载安装
进入命令行,下载 NexT 主题,输入:
git clone https://github.com/theme-next/hexo-theme-next themes/next
修改站点配置文件_config.yml
,找到如下代码:
## Themes: https://hexo.io/themes/
theme: landscape
将 landscape 修改为 next 即可。
配置文件
在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的站点配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。
为了描述方便,在以下说明中,将前者称为 站点配置文件
, 后者称为 主题配置文件
。
/hexo/_config.yml
/hexo/themes/next/_config.yml
修改语言
打开站点配置文件,搜索 language,找到如下代码:
author:
language:
timezone:
在 language 后面输入 zh-CN。
新建标签及分类界面
打开 主题配置文件,搜索 menu,找到如下代码:
menu:
home: / || home
#about: /about/ || user
#tags: /tags/ || tags
#categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
把 tags 和 categories 前面的 # 删除,
切换主题
next 主题自带四种样式。
在主题配置文件/next/_config.yml
中查找:scheme
,找到如下代码:
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini
选择你喜欢的一种样式,去掉前面的 #,其他主题前加上 # 即可。
隐藏网页底部 powered By Hexo / 强力驱动
打开 themes/next/layout/_partials/footer.swig
找到:
{% if theme.footer.powered.enable %}
<div class="powered-by">{#
#}{{ __('footer.powered', '<a class="theme-link" target="_blank"' + nofollow + ' href="https://hexo.io">Hexo</a>') }}{% if theme.footer.powered.version %} v{{ hexo_env('version') }}{% endif %}{#
#}</div>
{% endif %}
{% if theme.footer.powered.enable and theme.footer.theme.enable %}
<span class="post-meta-divider">|</span>
{% endif %}
{% if theme.footer.theme.enable %}
<div class="theme-info">{#
#}{{ __('footer.theme') }} – {#
#}<a class="theme-link" target="_blank"{{ nofollow }} href="https://theme-next.org">{#
#}NexT.{{ theme.scheme }}{#
#}</a>{% if theme.footer.theme.version %} v{{ version }}{% endif %}{#
#}</div>
{% endif %}
把这段代码首尾分别加上:<!--
和-->
,或者直接删除。
文章添加阴影
打开 /themes/next/source/css/_custom/custom.styl,添加:
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
浏览页面显示当前浏览进度
打开 themes/next/_config.yml,搜索关键字 scrollpercent
,把 false 改为 true。
效果图:
Local Search本地搜索
安装插件hexo-generator-searchdb
,执行以下命令:
npm install hexo-generator-searchdb --save
修改hexo/_config.yml
站点配置文件,新增以下内容到任意位置:
search:
path: search.xml
field: post
format: html
limit: 10000
编辑 主题配置文件,启用本地搜索功能:
# Local search
local_search:
enable: true
效果图:
设置网站图标
在 EasyIcon 中找一张(32 * 32)的 ico 图标,或者去别的网站下载或者制作,并将图标名称改为 favicon.ico,然后把图标放在 /themes/next/source/images
里,并且修改主题配置文件:
Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico
效果图:
修改文章底部的#号的标签,改为图标
修改模板/themes/next/layout/_macro/post.swig
搜索 rel=“tag”>#,将 # 换成<i class="fa fa-tag"></i>
效果图:
文章分享功能
打开themes/next/_config.yml
搜索关键字needmoreshare2
修改为下面设置
needmoreshare2:
enable: true
postbottom:
enable: true
options:
iconStyle: default
boxForm: horizontal
#位置
position: bottomCenter
#可分享网站
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
float:
enable: true
options:
iconStyle: default
boxForm: vertical
#位置
position: topRight
#可分享网站
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
效果图:
postbottom
为文章末尾分享 float
则是在页面侧端分享
文章加密访问
打开themes->next->layout->_partials->head.swig
文件,插入这样一段代码:
(function(){
if('{{ page.password }}'){
if (prompt('请输入文章密码') !== '{{ page.password }}'){
alert('密码错误!');
history.back();
}
}
})();
然后在文章上写成类似这样:
---
title: Hello World
date: 2016/7/13 20:46:25
categories:
- Diary
tags:
- Testing
- Another Tag
password: 123456
---
增加文章字数统计及阅读时常功能
安装插件hexo-wordcount
,执行以下命令:
npm install hexo-wordcount --save
修改themes/next/_config.yml
主题配置文件,搜索关键字post_wordcount
,修改如下:
post_wordcount:
item_text: true
wordcount: true #单篇文章字数
min2read: true #单篇阅读时长
totalcount: true #站点总字数
separated_meta: true
文章置顶功能
移除默认安装的插件:
npm uninstall hexo-generator-index --save
1
安装新插件:
npm install hexo-generator-index-pin-top --save
1
最后编辑有这需求的相关文章时,在Front-matter(文件最上方以—分隔的区域)加上一行:
top: true
1
如果你置顶了多篇,怎么控制顺序呢?设置top的值(大的在前面),比如:
# Post a.md
title: a
top: 1
# Post b.md
title: b
top: 10
文章 b 便会显示在文章 a 的前面
设置置顶图标
打开/themes/next/layout/_macro/post.swig
文件,在<div class="post-meta">
下方,插入如下代码:
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}
修改[Read More]按钮样式
修改themes\next\source\css\_custom\custom.styl
文件,加入自定义样式
// [Read More]按钮样式
.post-button .btn {
color: #555 !important;
background-color: rgb(255, 255, 255);
border-radius: 3px;
font-size: 15px;
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
border: none !important;
transition-property: unset;
padding: 0px 15px;
}
.post-button .btn:hover {
color: rgb(255, 255, 255) !important;
border-radius: 3px;
font-size: 15px;
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}
效果图:
修改 阅读全文 前显示文字数量即位置
打开 themes/next/_config.yml
,搜索关键字 auto_excerpt
, 修改length即可修改阅读全文前显示文字数量
auto_excerpt:
enable: true
length: 150
或者在文章中任意位置添加<!-- more -->
建议在文章中加入 <!-- more -->
自定义 [Read More] 按钮之前要显示的内容!
修改链接文字样式
打开themes\next\source\css\_common\components\post\post.styl
添加以下代码:
.post-body p a{
color: #0593d3;
border-bottom: none;
&:hover {
color: #ff106c;
text-decoration: underline;
}
}
效果图:
头像设置圆形,停留旋转效果
修改themes\next\source\css\_common\components\sidebar\sidebar-author.styl
,新增以下代码:
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
//设置圆形
+ border-radius: 50%;
+ transition: 2s all;
}
//旋转
+ .site-author-image:hover{
+ transform: rotate(360deg);
+ }
效果图:
文章添加阴影效果(文章边框)
打开themes/next/source/css/_custom/custom.styl
文件添加:
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
近期文章
修改themes/next/layout/_macro/sidebar.swig
。找到theme.social
板块代码,在该板块最后的endif后隔一行添加如下代码。
{# recent posts #}
{% if theme.recent_posts %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout }}">
<div class="links-of-blogroll-title">
<!-- modify icon to fire by szw -->
<i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
{{ theme.recent_posts_title }}
</div>
<ul class="links-of-blogroll-list">
{% set posts = site.posts.sort('-date') %}
{% for post in posts.slice('0', '5') %}
<li class="recent_posts_li">
<a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
编辑themes/next/source/css/_common/components/sidebar/sidebar-blogroll.styl
li.recent_posts_li {
text-align: cengter;
display: block;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
在 themes/next/_config.yml
中添加下方代码
# 近期文章设置
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true
效果图:
文章末尾添加"本文结束"标记
修改在themes/next/layout/_macro/post.swig中,在wechat-subscriber.swig之前添加如下代码:
-
---------------- The End ----------------{% if theme.wechat_subscriber.enabled and not is_index %}{% include 'wechat-subscriber.swig' %}{% endif %}
为博客加上妹子
Git输入下方代码
npm install -save hexo-helper-live2d
然后在在 hexo 的 _config.yml中添加参数:
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: live2d-widget-model-<你喜欢的模型名字>
display:
position: right
width: 150
height: 300
mobile:
show: true
可供选择模型:
-
live2d-widget-model-chitose
-
live2d-widget-model-epsilon2_1
-
live2d-widget-model-gf
-
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
-
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
-
live2d-widget-model-haruto
-
live2d-widget-model-hibiki
-
live2d-widget-model-hijiki
-
live2d-widget-model-izumi
-
live2d-widget-model-koharu
-
live2d-widget-model-miku
-
live2d-widget-model-ni-j
-
live2d-widget-model-nico
-
live2d-widget-model-nietzsche
-
live2d-widget-model-nipsilon
-
live2d-widget-model-nito
-
live2d-widget-model-shizuku
-
live2d-widget-model-tororo
-
live2d-widget-model-tsumiki
-
live2d-widget-model-unitychan
-
live2d-widget-model-wanko
-
live2d-widget-model-z16
建配置文件
在站点目录下建文件夹live2d_models
,
再在live2d_models
下建文件夹<你喜欢的模型名字
>,
再在<你喜欢的模型名字>
下建json文件:<你喜欢的模型名字>.model.json
安装模型。在命令行(即Git Bash)运行以下命令即可:
npm install --save live2d-widget-model-<你喜欢的模型名字>
复制你喜欢的模型名字:
Epsilon2.1
Gantzert_Felixander
haru
miku
ni-j
nico
nietzche
nipsilon
nito
shizuku
tsumiki
wanko
z16
hibiki
koharu
haruto
Unitychan
tororo
hijiki
代码块复制选项
Next6 中自带了复制代码按钮,Next5 需要自己手动配置。
搜索 codeblock,找到如下配置:
codeblock:
border_radius: 8 # 按钮圆滑度
copy_button: # 设置是否开启代码块复制按钮
enable: true
show_result: true # 是否显示复制成功信息
修改加载特效
由于网页不可能一直都秒进,总会等待一段时间的,所以可以设置顶部加载条。Next 已经集成了很多加载特效,可以在下面选项中在线调试测试一下。
搜索pace
,找到如下代码:
# 页面顶部加载条
# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal #默认设置,可以修改为上述任何一个
修改文章链接
在做次优化之前,hexo-next文章链接默认的生成规则是::year/:month/:day/:title
,是按照年、月、日、标题来生成的。
比如:https://zxiaoxuan.github.io/2019/08/12/hello-world/
这样,如果文章标题是中文的话,URL链接是也会是中文,
那么要生存简洁且唯一的URL,怎么办呢
安装插件
npm install hexo-abbrlink --save
执行此命令可能会不成功,提示你缺少相应的依赖,比如babel-eslint、mini-css-extract-plugin、webpack-cli…
使用npm命令安装即可,比如npm install eslint@4.x babel-eslint@8 --save-dev
修改根目录站点配置文件config.yml
,改为:
permalink: posts/:abbrlink/
abbrlink:
alg: crc32 #算法: crc16(default) and crc32
rep: hex #进制: dec(default) and hex
生成的链接将会是这样的(官方样例):
四种可供选择
crc16 & hex
https://post.zz173.com/posts/66c8.html
crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html
crc32 & dec
https://post.zz173.com/posts/1690090958.html
生成完后,原md
文件的Front-matter
内会增加abbrlink
字段,值为生成的ID 。这个字段确保了在我们修改了Front-matter 内的博客标题title或创建日期date字段之后而不会改变链接地址。
评论 Valine 增强版
云淡风轻在很早之前就开发了一款极简的valine评论系统
但这个评论系统有一个痛点。虽然它虽然支持邮件提醒,但这个功能却很弱,无法提示到具体文章,也无法给评论者进行有效的回复通知,通常别人留完言,怎么还会再来你的博客看你是否回复了呢?。
而这款 Valine 的增强版,满足了这几个条件:
完善的邮件通知,自定义 SMTP 发件频率和内容不再受限
基于 Akismet 的垃圾评论自动标注和过滤
评论管理,避免直接操作数据库
为了适配hexo博客,可以做如下修改:
步骤一:下载Valine.min.js 到文件夹 themes/next/source/js/src
下。
步骤二:
在hexo/themes/next/layout/_third-party/comments/valine.swig
中
修改代码如下:
{% if theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script type="text/javascript">
var GUEST = ['nick','mail','link'];
var guest = '{{ theme.valine.guest_info }}';
guest = guest.split(',').filter(item=>{
return GUEST.indexOf(item)>-1;
});
new Valine({
el: '#comments' ,
verify: {{ theme.valine.verify }},
notify: {{ theme.valine.notify }},
appId: '{{ theme.valine.appid }}',
appKey: '{{ theme.valine.appkey }}',
placeholder: '{{ theme.valine.placeholder }}',
avatar:'{{ theme.valine.avatar }}',
guest_info:guest,
pageSize:'{{ theme.valine.pageSize }}' || 10,
});
</script>
{% endif %}
{% if theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="/js/src/Valine.min.js"></script>
<script type="text/javascript">
new Valine({
lang: 'zh-cn',
admin_email:'480133937@qq.com', //填写博主邮箱
el: '#comments' ,
appId: '{{ theme.valine.appid }}',
appKey: '{{ theme.valine.appkey }}',
emoticon_url: 'https://cloud.panjunwen.com/alu',
emoticon_list: ["狂汗.png","不说话.png","汗.png","坐等.png","献花.png","不高兴.png","中刀.png","害羞.png","皱眉.png","小眼睛.png","暗地观察.png"],
placeholder: '{{ theme.valine.placeholder }}',
});
</script>
{% endif %}
主题配置文件中的valine可这样配置:
valine:
enable: true
appid: your appid #<app_id>
appkey: your appkey #<app_key>
notify: false # mail notifier # 关闭,使用valine-admin发邮件
verify: false # Verification code
placeholder: '✍写评论' # comment box placeholder
avatar: mm # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
侧栏加入网易云音乐
打开网易云,找到你想要添加的歌曲或者歌单,点生成外链播放器
然后复制代码
将代码放到…/themes/hexo-theme-next/layout/_macro/sidebar.swig
文件下:
<div id="music163player">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86 src="//music.163.com/outchain/player?type=2&id=38358214&auto=0&height=66">
</iframe>
</div>
视频
1)直接用 HTML 的标签,写法如下:
复制
Your browser does not support the video tag.
2)用插件,可支持弹幕,首先在站点文件夹根目录安装插件:
复制
npm install hexo-tag-dplayer --save
然后文章中的写法:
复制
{% dplayer “url=https://什么什么什么.mp4” “https://封面图.jpg” “api=https://api.prprpr.me/dplayer/” “id=” “loop=false” %}
要使用弹幕,必须有api和id两项,并且若使用的是官方的 api 地址(即上面的),id 的值不能与这个列表的值一样。id 的值自己随便取,唯一要求就是前面这点。如果唯一要求难倒了你,可以使用这个工具将一段与众不同的文字?生成一段看起来毫无意义的哈希值,这样看起来是不是好多了。
当然,这个插件的功能还有很多,可以去 README 和这插件的「母亲」Dplayer 的官方文档看看。
各版块透明度修改
内容板块透明
博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl
文件 .content-wrap
标签下 background: white
修改为:
background: rgba(255,255,255,0.7); //0.7是透明度
菜单栏背景
博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl
文件.header-inner
标签下 background: white修改为:
background: rgba(255,255,255,0.7); //0.7是透明度
站点概况背景
博客根目录themes\next\source\css\_schemes\Pisces\_sidebar.styl
文件.sidebar-inner
标签下 background: white修改为:
background: rgba(255,255,255,0.7); //0.7是透明度
然后修改博客根目录themes\next\source\css\_schemes\Pisces\_layout.styl
文件.sidebar
标签下 background: $body-bg-color
修改为:
background: rgba(255,255,255,0.7); //0.7是透明度
按钮背景
博客根目录themes\next\source\css\_common\components\post\post-button.styl
同上修改对应位置为 background: transparent;
修改标题按钮
.brand {
position: relative;
display: inline-block;
padding: 0 40px;
color: #222;
background: ;
border-bottom: none;
}
更改默认Google字体库
访问系统总是会耗费一大部分的时间在加载google
字体库上, 而且经常加载不成功.
方法一: 用国内的CDN库
来替代主题中的google
字体库, 到主题配置文件中设置默认字体库:
host: fonts.useso.com
方法二: 关掉字体库的引用, 默认加载本地字体库, 到主题配置文件
设置:
font:
enable: false
bnt
文章加密访问
打开themes->next->layout->_partials->head.swig
文件,在以下位置插入这样一段代码:
<script src="{{ pace_js_uri }}"></script>
<link href="{{ pace_css_uri }}" rel="stylesheet">
代码如下:
<script>
(function () {
if ('{{ page.password }}') {
if (prompt('请输入文章密码') !== '{{ page.password }}') {
alert('密码错误!');
if (history.length === 1) {
location.replace("http://zxiaoxuan.cn"); // 这里替换成你的首页
} else {
history.back();
}
}
}
})();
</script>
然后在文章添加password就可以了
标签修改
打开themes/next/layout/page.swig
修改这里可以修改标签页的标签显示
在这里添加东西会在标签页面上显示
博客背景图片
在themes/next/source/css/_custom/custom.styl
中添加CSS样式
// 背景图片
body::before {
background-image: url(https://背景图.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
content: " ";
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -2;
}
(2)jquery-backstretch插件
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
+ <script>
+ $("body").backstretch("https://背景图.jpg");
+ </script>
</body>
加入到文件最后面前面即可。你可以浏览器按 F12 查看我的页面,就可以在前发现。幻灯片等更多用法请自行查看 GitHub 上的 README。
彩色标签云
在/themes/next/layout/
目录下,新增tag-color.swig
文件,加入下方代码:
<script type="text/javascript">
var alltags = document.getElementsByClassName('tag-cloud-tags');
var tags = alltags[0].getElementsByTagName('a');
for (var i = tags.length - 1; i >= 0; i--) {
var r=Math.floor(Math.random()*75+130);
var g=Math.floor(Math.random()*75+100);
var b=Math.floor(Math.random()*75+80);
tags[i].style.background = "rgb("+r+","+g+","+b+")";
}
</script>
<style>
.tag-cloud-tags{
/*font-family: Helvetica, Tahoma, Arial;*/
/*font-weight: 100;*/
text-align: center;
counter-reset: tags;
}
.tag-cloud-tags a{
border-radius: 6px;
padding-right: 5px;
padding-left: 5px;
margin: 8px 5px 0px 0px;
}
.tag-cloud-tags a:before{
content: "?";
}
.tag-cloud-tags a:hover{
box-shadow: 0px 5px 15px 0px rgba(0,0,0,.4);
transform: scale(1.1);
/*box-shadow: 10px 10px 15px 2px rgba(0,0,0,.12), 0 0 6px 0 rgba(104, 104, 105, 0.1);*/
transition-duration: 0.15s;
}
</style>
在/themes/next/layout/page.swig/中引入tag-color.swig:
在下方加上 {% include 'tag-color.swig' %}
代码
<div class="tag-cloud">
<!-- <div class="tag-cloud-title">
{{ _p('counter.tag_cloud', site.tags.length) }}
</div> -->
<div class="tag-cloud-tags" id="tags">
{{ tagcloud({min_font: 16, max_font: 16, amount: 300, color: true, start_color: '#FFF', end_color: '#FFF'}) }}
</div>
</div>
+ {% include 'tag-color.swig' %}
或者将上方代码直接添加到下方
将标签云放到首页
在路径:/themes/next/layout/index.swig
中
{% block content %}
下面添加下方代码
{% block content %}
<div class="tag-cloud">
<div class="tag-cloud-tags" id="tags">
{{ tagcloud({min_font: 16, max_font: 16, amount: 300, color: true, start_color: '#fff', end_color: '#fff'}) }}
</div>
</div>
<br>
{% include 'tag-color.swig' %}
归档页美化
修改/themes/next/layout/_macro/post-collapse.swig后的代码如下:
{% macro render(post) %}
<article class="post post-type-{{ post.type | default('normal') }}" itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<{% if theme.seo %}h3{% else %}h2{% endif %} class="post-title">
{% if post.link %}{# Link posts #}
<a class="post-title-link post-title-link-external" target="_blank" href="{{ url_for(post.link) }}" itemprop="url">
{{ post.title or post.link }}
<i class="fa fa-external-link"></i>
</a>
{% else %}
<a class="post-title-link" href="{{ url_for(post.path) }}" itemprop="url">
{% if post.type === 'picture' %}
{{ post.content }}
{% else %}
<span itemprop="name">{{ post.title | default(__('post.untitled')) }}</span>
{% endif %}
</a>
{% endif %}
</{% if theme.seo %}h3{% else %}h2{% endif %}>
<div class="post-meta">
<time class="post-time" itemprop="dateCreated"
datetime="{{ moment(post.date).format() }}"
content="{{ date(post.date, config.date_format) }}" >
{{ date(post.date, 'MM-DD') }}
</time>
</div>
</header>
</article>
{% endmacro %}