github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-18 18:33:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor post-footer using flex layout

Browse Source
This commit is contained in:
Mimi 2020-08-17 10:46:46 +08:00
parent b07a2a2913
commit 23d9163a2d
5 changed files with 61 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
layout/_macro/post.njk
View File

@ -201,22 +201,24 @@
{{ partial('_partials/post/post-related.njk') }} {{ partial('_partials/post/post-related.njk') }}
{%- endif %} {%- endif %}
{%- if not is_index %} <footer class="post-footer">
{{- next_inject('postBodyEnd') }} {%- if is_index %}
<div class="post-eof"></div>
{% else %}
{{- next_inject('postBodyEnd') }}
{%- if post.reward_settings.enable %} {%- if post.reward_settings.enable %}
{{ partial('_partials/post/post-reward.njk') }} {{ partial('_partials/post/post-reward.njk') }}
{%- endif %} {%- endif %}
{%- if theme.creative_commons.license and theme.creative_commons.post %} {%- if theme.creative_commons.license and theme.creative_commons.post %}
{{ partial('_partials/post/post-copyright.njk') }} {{ partial('_partials/post/post-copyright.njk') }}
{%- endif %} {%- endif %}
{%- if theme.follow_me %} {%- if theme.follow_me %}
{{ partial('_partials/post/post-followme.njk', {}, {cache: theme.cache.enable}) }} {{ partial('_partials/post/post-followme.njk', {}, {cache: theme.cache.enable}) }}
{%- endif %} {%- endif %}
<footer class="post-footer">
{%- if post.tags and post.tags.length %} {%- if post.tags and post.tags.length %}
{%- set tag_indicate = '<i class="fa fa-tag"></i>' if theme.tag_icon else '#' %} {%- set tag_indicate = '<i class="fa fa-tag"></i>' if theme.tag_icon else '#' %}
<div class="post-tags"> <div class="post-tags">
@ -248,12 +250,9 @@
</div> </div>
</div> </div>
{%- endif %} {%- endif %}
</footer>
{% else %} {%- endif %}
<footer class="post-footer"> </footer>
<div class="post-eof"></div>
</footer>
{%- endif %}
</article> </article>
{######################} {######################}
{### END POST BLOCK ###} {### END POST BLOCK ###}

4
layout/_partials/post/post-copyright.njk
View File

@ -1,8 +1,8 @@
{%- set ccIcon = '<i class="fab fa-fw fa-creative-commons"></i>' %} {%- set ccIcon = '<i class="fab fa-fw fa-creative-commons"></i>' %}
{%- set ccText = theme.creative_commons.license | upper %} {%- set ccText = theme.creative_commons.license | upper %}
<div> <div class="post-copyright">
<ul class="post-copyright"> <ul>
<li class="post-copyright-author"> <li class="post-copyright-author">
<strong>{{ __('post.copyright.author') + __('symbol.colon') }} </strong> <strong>{{ __('post.copyright.author') + __('symbol.colon') }} </strong>
{{- page.author or author }} {{- page.author or author }}

41
source/css/_common/components/post/post-footer.styl Normal file
View File

@ -0,0 +1,41 @@
// Flexbox layout makes it possible to reorder the child
// elements of .post-footer through the `order` CSS property
// Fix issue #16
// To do: use `gap` instead of `margin-bottom`
// See https://caniuse.com/#feat=flexbox-gap
.post-footer {
flex-column();
}
.post-eof {
background: $grey-light;
height: 1px;
margin: $post-eof-margin-top auto $post-eof-margin-bottom;
width: 8%;
.post-block:last-of-type & {
display: none;
}
}
if (hexo-config('creative_commons.post')) {
.post-copyright ul {
list-style: none;
padding: .5em 1em;
post-card();
}
}
.post-tags {
margin-top: 40px;
text-align: center;
a {
display: inline-block;
font-size: $font-size-smaller;
&:not(:last-child) {
margin-right: 10px;
}
}
}

13
source/css/_common/components/post/post-tags.styl
View File

@ -1,13 +0,0 @@
.post-tags {
margin-top: 40px;
text-align: center;
a {
display: inline-block;
font-size: $font-size-smaller;
&:not(:last-child) {
margin-right: 10px;
}
}
}

21
source/css/_common/components/post/post.styl
View File

@ -16,25 +16,6 @@
text-align: center; text-align: center;
} }
if (hexo-config('creative_commons.post')) {
.post-copyright {
list-style: none;
padding: .5em 1em;
post-card();
}
}
.post-eof {
background: $grey-light;
height: 1px;
margin: $post-eof-margin-top auto $post-eof-margin-bottom;
width: 8%;
.post-block:last-of-type & {
display: none;
}
}
.use-motion { .use-motion {
if (hexo-config('motion.transition.post_block')) { if (hexo-config('motion.transition.post_block')) {
.post-block, .pagination, .comments { .post-block, .pagination, .comments {
@ -66,7 +47,7 @@ if (hexo-config('creative_commons.post')) {
@import 'post-gallery'; @import 'post-gallery';
@import 'post-header'; @import 'post-header';
@import 'post-nav'; @import 'post-nav';
@import 'post-tags'; @import 'post-footer';
@import 'post-widgets'; @import 'post-widgets';
@import 'post-reward'; @import 'post-reward';