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

Optimize link-grid & fix pandoc rendering error

Browse Source
This commit is contained in:
Mimi 2020-05-29 23:11:16 +08:00
parent 0d2b3af50b
commit ade4f44faa
4 changed files with 37 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
scripts/tags/link-grid.js
View File

@ -1,15 +1,23 @@
/**
* link-grid.js | https://theme-next.js.org/docs/tag-plugins/link-grid
*/
/* global hexo */ /* global hexo */
'use strict'; 'use strict';
function linkGrid(args, content) { function linkGrid(args, content) {
const image = args[0] || '/images/avatar.gif';
const delimiter = args[1] || '|';
const comment = args[2] || '%';
const links = content.split('\n').map(item => { const links = content.split('\n').map(item => {
const args = item.split('|').map(arg => arg.trim()); item = item.split(delimiter).map(arg => arg.trim());
if (args[0][0] === '%') return ''; if (item[0][0] === comment) return '';
return `<div> return `<div class="link-grid-container">
<img src="${args[3] || '/images/avatar.gif'}" onerror="this.src='/images/avatar.gif';"> <div class="link-grid-image" style="background-image: url(${item[3] || image});"></div>
<p>${args[0]}</p><p>${args[2] || args[1]}</p> <p>${item[0]}</p><p>${item[2] || item[1]}</p>
<a href="${args[1]}"></a> <a href="${item[1]}"></a>
</div>`; </div>`;
}); });
return `<div class="link-grid">${links.join('')}</div>`; return `<div class="link-grid">${links.join('')}</div>`;

32
source/css/_common/scaffolding/tags/link-grid.styl
View File

@ -3,39 +3,39 @@
grid-gap: 1.5rem 1.5rem; grid-gap: 1.5rem 1.5rem;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
padding: 1.5rem; padding: 1.5rem;
user-select: none;
+mobile() { +mobile() {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
div { .link-grid-container {
border: solid #ddd; border: solid $grey-lighter;
box-shadow: 1rem 1rem 0.5rem gray; box-shadow: 1rem 1rem .5rem gray;
height: 5rem; height: 5rem;
transition: background 0.3s; padding: .5rem;
padding: 0.5rem;
position: relative; position: relative;
transition: background .3s;
&:hover { &:hover {
animation: shake 0.5s; animation: shake .5s;
background: rgba(230, 244, 250, .5); background: rgba(230, 244, 250, .5);
} }
&:active { &:active {
box-shadow: 0.5rem 0.5rem 0.25rem gray; box-shadow: .5rem .5rem .25rem gray;
transform: translate(0.2rem, 0.2rem); transform: translate(.2rem, .2rem);
} }
img { .link-grid-image {
border: 1px solid #ddd; background-clip: content-box;
background-origin: content-box;
background-size: cover;
border: 1px solid $grey-lighter;
border-radius: 50%; border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
height: 5rem; height: 5rem;
left: 0.5rem;
padding: 3px; padding: 3px;
position: absolute; position: absolute;
top: 0.5rem;
width: 5rem; width: 5rem;
} }
@ -47,14 +47,14 @@
} }
&:last-of-type { &:last-of-type {
font-size: 0.8em; font-size: .8em;
line-height: 1.3rem; line-height: 1.3rem;
opacity: 0.7; opacity: .7;
} }
} }
a { a {
border: none; border: 0;
height: 100%; height: 100%;
left: 0; left: 0;
position: absolute; position: absolute;