feat: use _data yaml file to manage friends link
This commit is contained in:
parent
3d9ad6737a
commit
144f8b300d
|
@ -1,5 +1,12 @@
|
||||||
<div class="fade-in-down-animation">
|
<div class="fade-in-down-animation">
|
||||||
<div class="empty-page-container">
|
<div class="empty-page-container">
|
||||||
|
|
||||||
|
<% if (
|
||||||
|
theme.menu.Links && theme.links && (page.title === 'link' || page.title === 'links')
|
||||||
|
) { %>
|
||||||
|
<%- partial('_partial/friends-link') %>
|
||||||
|
<% } %>
|
||||||
|
|
||||||
<div class="empty-page-content markdown-body">
|
<div class="empty-page-content markdown-body">
|
||||||
<% if (page.content) { %>
|
<% if (page.content) { %>
|
||||||
<%- page.content %>
|
<%- page.content %>
|
||||||
|
|
|
@ -0,0 +1,24 @@
|
||||||
|
<div class="friends-link-container">
|
||||||
|
<ul class="friends-link-list">
|
||||||
|
<% for (const f of theme.links) { %>
|
||||||
|
<li class="friends-link-item">
|
||||||
|
<a href="<%= f.link %>">
|
||||||
|
<div class="content">
|
||||||
|
<div class="avatar radius">
|
||||||
|
<% if (f.avatar) { %>
|
||||||
|
<img class="radius" alt="<%= f.name %>" src="<%= f.avatar %>">
|
||||||
|
<% } else { %>
|
||||||
|
<i class="fas fa-user-friends"></i>
|
||||||
|
<% } %>
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<div class="name"><%= f.name %></div>
|
||||||
|
<div class="description"><%= f.description %></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<% } %>
|
||||||
|
</ul>
|
||||||
|
<div class="clear"></div>
|
||||||
|
</div>
|
|
@ -1,10 +1,26 @@
|
||||||
hexo.on('generateBefore', function () {
|
hexo.on('generateBefore', function () {
|
||||||
const rootConfig = hexo.config;
|
|
||||||
if (hexo.locals.get) {
|
if (hexo.locals.get) {
|
||||||
const data = hexo.locals.get('data');
|
const data = hexo.locals.get('data');
|
||||||
if (data && data._config) {
|
|
||||||
hexo.theme.config = data._config;
|
if (data) {
|
||||||
}
|
|
||||||
|
// theme config file handle
|
||||||
|
if (data._config) {
|
||||||
|
hexo.theme.config = data._config;
|
||||||
|
|
||||||
|
} else if (data.keep) {
|
||||||
|
hexo.theme.config = data.keep;
|
||||||
|
|
||||||
|
} else if (data._keep) {
|
||||||
|
hexo.theme.config = data._keep;
|
||||||
|
}
|
||||||
|
|
||||||
|
// friends link file handle
|
||||||
|
if (data.links || data.link) {
|
||||||
|
hexo.theme.config.links = (data.links || data.link);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
hexo.theme.config.rootConfig = rootConfig;
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,3 +1,7 @@
|
||||||
|
$friend-link-item-height = 82px;
|
||||||
|
$friend-link-item-interval = 16px;
|
||||||
|
$friend-link-item-border-radius = 6px;
|
||||||
|
|
||||||
.empty-page-container {
|
.empty-page-container {
|
||||||
|
|
||||||
keep-container(1.005, 1.01, 30px, true);
|
keep-container(1.005, 1.01, 30px, true);
|
||||||
|
@ -12,4 +16,105 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (hexo-config('menu.Links')) {
|
||||||
|
.friends-link-container {
|
||||||
|
|
||||||
|
.friends-link-list {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.friends-link-item {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
width: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
height: $friend-link-item-height;
|
||||||
|
padding-bottom: $friend-link-item-interval;
|
||||||
|
|
||||||
|
&:nth-child(odd) {
|
||||||
|
padding-right: $friend-link-item-interval * 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(even) {
|
||||||
|
padding-left: $friend-link-item-interval * 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-shadow: 1px 1px 2px var(--shadow-color);
|
||||||
|
border-radius: $friend-link-item-border-radius;
|
||||||
|
padding-left: $friend-link-item-height - $friend-link-item-interval;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transition();
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 1px 1px 6px var(--shadow-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.radius {
|
||||||
|
border-top-left-radius: $friend-link-item-border-radius;
|
||||||
|
border-bottom-left-radius: $friend-link-item-border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: $friend-link-item-height - $friend-link-item-interval;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 2em;
|
||||||
|
background: var(--second-background-color);
|
||||||
|
color: var(--second-text-color);
|
||||||
|
|
||||||
|
img {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-items: flex-start;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
width: 100%;
|
||||||
|
height: 60%;
|
||||||
|
font-size: 1.28em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
width: 100%;
|
||||||
|
height: 40%;
|
||||||
|
font-size: 1em;
|
||||||
|
color: var(--third-text-color);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
$tools-item-width = 30px;
|
$tools-item-width = 32px;
|
||||||
|
|
||||||
.side-tools-container {
|
.side-tools-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
@ -119,3 +119,10 @@ button {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ============================
|
||||||
|
// clear float
|
||||||
|
// ============================
|
||||||
|
.clear {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
|
@ -14,7 +14,7 @@ hover-style(scaleX, scaleY) {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (hexo-config('style.hover.shadow')) {
|
if (hexo-config('style.hover.shadow')) {
|
||||||
box-shadow: 3px 3px 10px var(--shadow-hover-color);
|
box-shadow: 3px 3px 9px var(--shadow-hover-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue