feat: use _data yaml file to manage friends link
This commit is contained in:
XPoet
parent
3d9ad6737a
commit
144f8b300d
|
|
@ -1,5 +1,12 @@
|
|||
<div class="fade-in-down-animation">
|
||||
<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">
|
||||
<% if (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 () {
|
||||
const rootConfig = hexo.config;
|
||||
|
||||
if (hexo.locals.get) {
|
||||
const data = hexo.locals.get('data');
|
||||
if (data && 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 {
|
||||
|
||||
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 {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -119,3 +119,10 @@ button {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// ============================
|
||||
// clear float
|
||||
// ============================
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ hover-style(scaleX, scaleY) {
|
|||
}
|
||||
|
||||
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