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

Refactor group-pictures using flex layout

Browse Source
This commit is contained in:
Mimi 2020-07-30 17:33:12 +08:00
parent 5883e29ad3
commit fc68fbe9a3
5 changed files with 33 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
layout/_macro/post.njk
View File

@ -18,7 +18,9 @@
{%- if post.photos and post.photos.length %} {%- if post.photos and post.photos.length %}
<div class="post-gallery" itemscope itemtype="http://schema.org/ImageGallery"> <div class="post-gallery" itemscope itemtype="http://schema.org/ImageGallery">
{%- for photo in post.photos %} {%- for photo in post.photos %}
<div class="post-gallery-image" style="background-image: url({{ url_for(photo) }});" itemprop="contentUrl"></div> <div class="post-gallery-image">
<img src="{{ url_for(photo) }}" itemprop="contentUrl">
</div>
{%- endfor %} {%- endfor %}
</div> </div>
{%- endif %} {%- endif %}

6
scripts/tags/group-pictures.js
View File

@ -82,7 +82,7 @@ const templates = {
dispatch: function(pictures, group, layout) { dispatch: function(pictures, group, layout) {
const rule = LAYOUTS[group] ? LAYOUTS[group][layout] : null; const rule = LAYOUTS[group] ? LAYOUTS[group][layout] : null;
return rule ? this.getHTML(groupBy(rule, pictures)) : templates.defaults(pictures); return rule ? this.getHTML(groupBy(rule, pictures)) : this.defaults(pictures);
}, },
/** /**
@ -113,10 +113,8 @@ const templates = {
}, },
getColumnHTML: function(pictures) { getColumnHTML: function(pictures) {
const columnWidth = 100 / pictures.length;
const columnStyle = `style="width: ${columnWidth}%;"`;
return pictures.map(picture => { return pictures.map(picture => {
return `<div class="group-picture-column" ${columnStyle}>${picture}</div>`; return `<div class="group-picture-column">${picture}</div>`;
}).join(''); }).join('');
} }
}; };

9
source/css/_common/components/post/post-gallery.styl
View File

@ -1,11 +1,10 @@
.post-gallery { .post-gallery {
display: flex; display: flex;
margin-bottom: 60px; margin-bottom: 60px;
min-height: 200px;
.post-gallery-image { .post-gallery-image {
background-size: cover;
flex: 1; flex: 1;
height: 200px;
&:not(:first-child) { &:not(:first-child) {
clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%);
@ -15,5 +14,11 @@
&:not(:last-child) { &:not(:last-child) {
margin-right: -20px; margin-right: -20px;
} }
img {
height: 100%;
object-fit: cover;
width: 100%;
}
} }
} }

28
source/css/_common/scaffolding/tags/group-pictures.styl
View File

@ -1,14 +1,20 @@
.post-body .group-picture img { .group-picture {
margin: 0 auto; margin-bottom: 20px;
padding: 0 3px;
}
.group-picture-row { .group-picture-row {
margin-bottom: 6px; display: flex;
overflow: hidden; gap: 3px;
} margin-bottom: 3px;
}
.group-picture-column { .group-picture-column {
float: left; flex: 1;
margin-bottom: 10px;
img {
margin: 0;
height: 100%;
object-fit: cover;
width: 100%;
}
}
} }

8
test/tags/group-pictures.js
View File

@ -13,7 +13,7 @@ describe('group-pictures', () => {
groupPicture(['3-1'], ` groupPicture(['3-1'], `
![](/images/sample.png) ![](/images/sample.png)
![](/images/sample.png) ![](/images/sample.png)
![](/images/sample.png)`).should.eql('<div class="group-picture"><div class="group-picture-row"><div class="group-picture-column" style="width: 33.333333333333336%;"><img src="/images/sample.png"></div><div class="group-picture-column" style="width: 33.333333333333336%;"><img src="/images/sample.png"></div><div class="group-picture-column" style="width: 33.333333333333336%;"><img src="/images/sample.png"></div></div></div>'); ![](/images/sample.png)`).should.eql('<div class="group-picture"><div class="group-picture-row"><div class="group-picture-column"><img src="/images/sample.png"></div><div class="group-picture-column"><img src="/images/sample.png"></div><div class="group-picture-column"><img src="/images/sample.png"></div></div></div>');
}); });
it('layout 5-2', () => { it('layout 5-2', () => {
@ -22,7 +22,7 @@ describe('group-pictures', () => {
![](/images/sample.png) ![](/images/sample.png)
![](/images/sample.png) ![](/images/sample.png)
![](/images/sample.png) ![](/images/sample.png)
![](/images/sample.png)`).should.eql('<div class="group-picture"><div class="group-picture-row"><div class="group-picture-column" style="width: 50%;"><img src="/images/sample.png"></div><div class="group-picture-column" style="width: 50%;"><img src="/images/sample.png"></div></div><div class="group-picture-row"><div class="group-picture-column" style="width: 100%;"><img src="/images/sample.png"></div></div><div class="group-picture-row"><div class="group-picture-column" style="width: 50%;"><img src="/images/sample.png"></div><div class="group-picture-column" style="width: 50%;"><img src="/images/sample.png"></div></div></div>'); ![](/images/sample.png)`).should.eql('<div class="group-picture"><div class="group-picture-row"><div class="group-picture-column"><img src="/images/sample.png"></div><div class="group-picture-column"><img src="/images/sample.png"></div></div><div class="group-picture-row"><div class="group-picture-column"><img src="/images/sample.png"></div></div><div class="group-picture-row"><div class="group-picture-column"><img src="/images/sample.png"></div><div class="group-picture-column"><img src="/images/sample.png"></div></div></div>');
}); });
it('remove text', () => { it('remove text', () => {
@ -31,7 +31,7 @@ describe('group-pictures', () => {
Text Text
![](/images/sample.png) ![](/images/sample.png)
Text Text
![](/images/sample.png)`).should.eql('<div class="group-picture"><div class="group-picture-row"><div class="group-picture-column" style="width: 33.333333333333336%;"><img src="/images/sample.png"></div><div class="group-picture-column" style="width: 33.333333333333336%;"><img src="/images/sample.png"></div><div class="group-picture-column" style="width: 33.333333333333336%;"><img src="/images/sample.png"></div></div></div>'); ![](/images/sample.png)`).should.eql('<div class="group-picture"><div class="group-picture-row"><div class="group-picture-column"><img src="/images/sample.png"></div><div class="group-picture-column"><img src="/images/sample.png"></div><div class="group-picture-column"><img src="/images/sample.png"></div></div></div>');
}); });
it('no layout', () => { it('no layout', () => {
@ -40,6 +40,6 @@ Text
![](/images/sample.png) ![](/images/sample.png)
![](/images/sample.png) ![](/images/sample.png)
![](/images/sample.png) ![](/images/sample.png)
![](/images/sample.png)`).should.eql('<div class="group-picture"><div class="group-picture-row"><div class="group-picture-column" style="width: 33.333333333333336%;"><img src="/images/sample.png"></div><div class="group-picture-column" style="width: 33.333333333333336%;"><img src="/images/sample.png"></div><div class="group-picture-column" style="width: 33.333333333333336%;"><img src="/images/sample.png"></div></div><div class="group-picture-row"><div class="group-picture-column" style="width: 50%;"><img src="/images/sample.png"></div><div class="group-picture-column" style="width: 50%;"><img src="/images/sample.png"></div></div></div>'); ![](/images/sample.png)`).should.eql('<div class="group-picture"><div class="group-picture-row"><div class="group-picture-column"><img src="/images/sample.png"></div><div class="group-picture-column"><img src="/images/sample.png"></div><div class="group-picture-column"><img src="/images/sample.png"></div></div><div class="group-picture-row"><div class="group-picture-column"><img src="/images/sample.png"></div><div class="group-picture-column"><img src="/images/sample.png"></div></div></div>');
}); });
}); });