fcircle & custom index navbar & timeline
This commit is contained in:
xaoxuu
parent
fb7a4ae58f
commit
517327ca77
|
|
@ -30,6 +30,10 @@ sidebar:
|
|||
post: [toc, ghrepo, ghissues] # for pages using 'layout:post'
|
||||
wiki: [toc, ghrepo, ghissues, related] # for pages using 'layout:wiki'
|
||||
|
||||
######## Index ########
|
||||
post-index: # 近期发布 分类 标签 归档 and ...
|
||||
# '朋友文章': /friends/rss/
|
||||
|
||||
|
||||
######## Main ########
|
||||
breadcrumb:
|
||||
|
|
@ -251,6 +255,7 @@ plugins:
|
|||
ghinfo: /js/plugins/ghinfo.js
|
||||
timeline: /js/plugins/timeline.js
|
||||
linkcard: /js/plugins/linkcard.js
|
||||
fcircle: /js/plugins/fcircle.js
|
||||
|
||||
marked: https://cdn.bootcdn.net/ajax/libs/marked/4.0.18/marked.min.js
|
||||
|
||||
|
|
|
|||
|
|
@ -1,34 +1,57 @@
|
|||
<div class='nav-wrap'>
|
||||
<nav class='sub post cap'>
|
||||
<% if (is_home()) { %>
|
||||
<a class='active' href='<%- url_for("/") %>'><%- __('btn.recent_publish') %></a>
|
||||
<% } else { %>
|
||||
<a href='<%- url_for("/") %>'><%- __('btn.recent_publish') %></a>
|
||||
<% } %>
|
||||
<% if (site.categories && site.categories.length > 0) { %>
|
||||
<% if (page.category) { %>
|
||||
<a class='active' href='<%- url_for(config.category_dir) %>'><%- __('btn.category') + __('symbol.colon') + page.category %></a>
|
||||
<% } else if (page.layout == 'categories') { %>
|
||||
<a class='active' href='<%- url_for(config.category_dir) %>'><%- __('btn.categories') %></a>
|
||||
<% } else { %>
|
||||
<a href='<%- url_for(config.category_dir) %>'><%- __('btn.categories') %></a>
|
||||
<% } %>
|
||||
<% } %>
|
||||
<% if (site.tags && site.tags.length > 0) { %>
|
||||
<% if (page.tag) { %>
|
||||
<a class='active' href='<%- url_for(config.tag_dir) %>'><%- __('btn.tag') + __('symbol.colon') + page.tag %></a>
|
||||
<% } else if (page.layout == 'tags') { %>
|
||||
<a class='active' href='<%- url_for(config.tag_dir) %>'><%- __('btn.tags') %></a>
|
||||
<% } else { %>
|
||||
<a href='<%- url_for(config.tag_dir) %>'><%- __('btn.tags') %></a>
|
||||
<% } %>
|
||||
<% } %>
|
||||
<% if (site.posts && site.posts.length > 0) { %>
|
||||
<% if (is_archive()) { %>
|
||||
<a class='active' href='<%- url_for(config.archive_dir) %>'><%- __('btn.archives') %></a>
|
||||
<% } else { %>
|
||||
<a href='<%- url_for(config.archive_dir) %>'><%- __('btn.archives') %></a>
|
||||
<% } %>
|
||||
<% } %>
|
||||
</nav>
|
||||
</div>
|
||||
<%
|
||||
function layoutDiv() {
|
||||
var el = '';
|
||||
el += '<div class="nav-wrap">';
|
||||
el += '<nav class="sub post cap">';
|
||||
if (is_home()) {
|
||||
el += '<a class="active" href="' + url_for("/") + '">' + __("btn.recent_publish") + '</a>';
|
||||
} else {
|
||||
el += '<a href="' + url_for("/") + '">' + __("btn.recent_publish") + '</a>';
|
||||
}
|
||||
|
||||
if (site.categories && site.categories.length > 0) {
|
||||
if (page.category) {
|
||||
el += '<a class="active" href="' + url_for(config.category_dir) + '">' + __("btn.category") + __("symbol.colon") + page.category + '</a>';
|
||||
} else if (page.layout == "categories") {
|
||||
el += '<a class="active" href="' + url_for(config.category_dir) + '">' + __("btn.categories") + '</a>';
|
||||
} else {
|
||||
el += '<a href="' + url_for(config.category_dir) + '">' + __("btn.categories") + '</a>';
|
||||
}
|
||||
}
|
||||
|
||||
if (site.tags && site.tags.length > 0) {
|
||||
if (page.tag) {
|
||||
el += '<a class="active" href="' + url_for(config.tag_dir) + '">' + __("btn.tag") + __("symbol.colon") + page.tag + '</a>';
|
||||
} else if (page.layout == "tags") {
|
||||
el += '<a class="active" href="' + url_for(config.tag_dir) + '">' + __("btn.tags") + '</a>';
|
||||
} else {
|
||||
el += '<a href="' + url_for(config.tag_dir) + '">' + __("btn.tags") + '</a>';
|
||||
}
|
||||
}
|
||||
|
||||
if (site.posts && site.posts.length > 0) {
|
||||
if (is_archive()) {
|
||||
el += '<a class="active" href="' + url_for(config.archive_dir) + '">' + __("btn.archives") + '</a>';
|
||||
} else {
|
||||
el += '<a href="' + url_for(config.archive_dir) + '">' + __("btn.archives") + '</a>';
|
||||
}
|
||||
}
|
||||
|
||||
if (theme['post-index']) {
|
||||
const obj = theme['post-index'];
|
||||
for (let key of Object.keys(obj)) {
|
||||
if (full_url_for(page.path) == full_url_for(obj[key])) {
|
||||
el += '<a class="active" href="' + url_for(obj[key]) + '">' + key + '</a>';
|
||||
} else {
|
||||
el += '<a href="' + url_for(obj[key]) + '">' + key + '</a>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
el += '</nav>';
|
||||
el += '</div>';
|
||||
return el;
|
||||
}
|
||||
%>
|
||||
|
||||
<%- layoutDiv() %>
|
||||
|
|
|
|||
|
|
@ -7,14 +7,23 @@ function layoutTitle() {
|
|||
return '';
|
||||
}
|
||||
}
|
||||
function layoutDiv() {
|
||||
var el = '';
|
||||
if (page.post_list) {
|
||||
el += partial('_partial/main/navbar/list_post');
|
||||
}
|
||||
if (page.h1 || page.title || (page.content && page.content.length > 0)) {
|
||||
el += partial('_partial/main/navbar/breadcrumb');
|
||||
}
|
||||
el += '<article class="content md ' + page.layout + (page.indent ? ' indent' : '') + scrollreveal() + '">';
|
||||
el += layoutTitle();
|
||||
if (page.content && page.content.length > 0) {
|
||||
el += page.content;
|
||||
}
|
||||
el += '</article>';
|
||||
el += partial('_partial/plugins/comments/layout');
|
||||
return el;
|
||||
}
|
||||
%>
|
||||
<% if (page.h1 || page.title || (page.content && page.content.length > 0)) { %>
|
||||
<%- partial('_partial/main/navbar/breadcrumb') %>
|
||||
<article class='content md <%- page.layout %><%- page.indent ? ' indent' : '' %><%- scrollreveal() %>'>
|
||||
<%- layoutTitle() %>
|
||||
<% if (page.content && page.content.length > 0) { %>
|
||||
<%- page.content %>
|
||||
<% } %>
|
||||
</article>
|
||||
<% } %>
|
||||
<%- partial('_partial/plugins/comments/layout') %>
|
||||
|
||||
<%- layoutDiv() %>
|
||||
|
|
|
|||
|
|
@ -36,12 +36,14 @@ function layoutNodeContent(content) {
|
|||
|
||||
|
||||
function postTimeline(args, content) {
|
||||
args = hexo.args.map(args, ['api', 'user']);
|
||||
args = hexo.args.map(args, ['api', 'user', 'type', 'limit']);
|
||||
var el = '';
|
||||
|
||||
if (!args.type) {
|
||||
args.type = 'timeline';
|
||||
}
|
||||
if (args.api && args.api.length > 0) {
|
||||
el += '<div class="tag-plugin timeline stellar-timeline-api"';
|
||||
el += ' ' + hexo.args.joinTags(args, ['api', 'user']).join(' ');
|
||||
el += '<div class="tag-plugin timeline stellar-' + args.type + '-api"';
|
||||
el += ' ' + hexo.args.joinTags(args, ['api', 'user', 'limit']).join(' ');
|
||||
el += '>';
|
||||
} else {
|
||||
el += '<div class="tag-plugin timeline">';
|
||||
|
|
|
|||
|
|
@ -68,9 +68,6 @@ article.md.content
|
|||
.tag-plugin,iframe
|
||||
margin-top: var(--gap-p)
|
||||
margin-bottom: var(--gap-p)
|
||||
p,.tag-plugin
|
||||
.highlight,table
|
||||
--gap-p: 1rem
|
||||
iframe
|
||||
display: block
|
||||
|
||||
|
|
|
|||
|
|
@ -100,5 +100,4 @@
|
|||
display: none
|
||||
&+.timenode
|
||||
margin-top: 0.75rem
|
||||
.body
|
||||
max-height: 40vh
|
||||
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
.md .tag-plugin.split
|
||||
margin: 0.5rem 0
|
||||
.tag-plugin.split
|
||||
display: grid
|
||||
grid-gap: 16px
|
||||
grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 16px)
|
||||
>div>
|
||||
>.cell
|
||||
margin: 1rem 0
|
||||
>.cell>
|
||||
p
|
||||
line-height: 1.5
|
||||
:first-child
|
||||
|
|
@ -18,11 +18,15 @@
|
|||
|
||||
|
||||
.tag-plugin.split
|
||||
&[bg]>div
|
||||
@media screen and (max-width: $device-tablet)
|
||||
display: block
|
||||
|
||||
.tag-plugin.split
|
||||
&[bg]>.cell
|
||||
padding: 1rem
|
||||
border-radius: $border-card
|
||||
&[bg='block']>div
|
||||
&[bg='block']>.cell
|
||||
background: var(--block)
|
||||
&[bg='card']>div
|
||||
&[bg='card']>.cell
|
||||
background: var(--card)
|
||||
box-shadow: $boxshadow-card
|
||||
|
|
@ -113,15 +113,32 @@
|
|||
.tag-plugin.copy
|
||||
width: 240px
|
||||
|
||||
.tag-plugin.timeline[api]
|
||||
&.stellar-fcircle-api .timenode:hover .header
|
||||
.user-info
|
||||
background: inherit
|
||||
span
|
||||
color: inherit
|
||||
a.body
|
||||
color: var(--text-p1)
|
||||
trans2: transform box-shadow
|
||||
line-height: 1.25
|
||||
padding: 0.75rem 1rem
|
||||
&:hover
|
||||
transform: translateY(-1px)
|
||||
box-shadow: $boxshadow-card-float
|
||||
|
||||
.tag-plugin.timeline.stellar-timeline-api .body
|
||||
max-height: convert(hexo-config('tag_plugins.timeline.max-height'))
|
||||
|
||||
.tag-plugin.timeline[api] .body
|
||||
overflow: scroll
|
||||
p.title
|
||||
font-size: 1rem
|
||||
font-weight: 700
|
||||
margin: 0.5rem 0 0.75rem
|
||||
line-height: 1.25
|
||||
&:only-child
|
||||
margin-bottom: 0.5rem
|
||||
font-weight: 500
|
||||
a
|
||||
color: inherit
|
||||
&:hover
|
||||
|
|
@ -136,7 +153,7 @@
|
|||
pre code
|
||||
font-size: $fs-12
|
||||
|
||||
.tag-plugin.timeline.stellar-timeline-api .body .footer
|
||||
.tag-plugin.timeline[api] .body .footer
|
||||
margin: 0 0 -0.5rem
|
||||
padding: 0.5rem 0 1rem
|
||||
user-select: none
|
||||
|
|
@ -159,7 +176,7 @@
|
|||
font-size: $fs-12
|
||||
align-items: stretch
|
||||
|
||||
.tag-plugin.timeline.stellar-timeline-api .body .footer
|
||||
.tag-plugin.timeline[api] .body .footer
|
||||
.item
|
||||
border-width: 1px
|
||||
border-style: solid
|
||||
|
|
|
|||
|
|
@ -0,0 +1,91 @@
|
|||
const FCircle = {
|
||||
requestAPI: (url, callback, timeout) => {
|
||||
let retryTimes = 5;
|
||||
function request() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let status = 0; // 0 等待 1 完成 2 超时
|
||||
let timer = setTimeout(() => {
|
||||
if (status === 0) {
|
||||
status = 2;
|
||||
timer = null;
|
||||
reject('请求超时');
|
||||
if (retryTimes == 0) {
|
||||
timeout();
|
||||
}
|
||||
}
|
||||
}, 5000);
|
||||
fetch(url).then(function(response) {
|
||||
if (status !== 2) {
|
||||
clearTimeout(timer);
|
||||
resolve(response);
|
||||
timer = null;
|
||||
status = 1;
|
||||
}
|
||||
if (response.ok) {
|
||||
return response.json();
|
||||
}
|
||||
throw new Error('Network response was not ok.');
|
||||
}).then(function(data) {
|
||||
retryTimes = 0;
|
||||
callback(data);
|
||||
}).catch(function(error) {
|
||||
if (retryTimes > 0) {
|
||||
retryTimes -= 1;
|
||||
setTimeout(() => {
|
||||
request();
|
||||
}, 5000);
|
||||
} else {
|
||||
timeout();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
request();
|
||||
},
|
||||
layoutDiv: (cfg) => {
|
||||
const el = $(cfg.el)[0];
|
||||
$(el).append('<div class="loading-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg></div>');
|
||||
FCircle.requestAPI(cfg.api, function(data) {
|
||||
$(el).find('.loading-wrap').remove();
|
||||
const arr = data.article_data || [];
|
||||
const limit = el.getAttribute('limit');
|
||||
arr.forEach((item, i) => {
|
||||
if (limit && i >= limit) {
|
||||
return;
|
||||
}
|
||||
var cell = '<div class="timenode" index="' + i + '">';
|
||||
cell += '<div class="header">';
|
||||
cell += '<div class="user-info">';
|
||||
cell += '<img src="' + item.avatar + '">';
|
||||
cell += '<span>' + item.author + '</span>';
|
||||
cell += '</div>';
|
||||
cell += '<p>' + item.updated + '</p>';
|
||||
cell += '</div>';
|
||||
cell += '<a class="body" href="' + item.link + '" target="_blank" rel="external nofollow noopener noreferrer">';
|
||||
cell += item.title;
|
||||
cell += '</a>';
|
||||
cell += '</div>';
|
||||
$(el).append(cell);
|
||||
});
|
||||
}, function() {
|
||||
$(el).find('.loading-wrap svg').remove();
|
||||
$(el).find('.loading-wrap').append('<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M12 3L21 20H3L12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="6" stroke-dashoffset="6" d="M12 10V14"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="6;0"/></path></g><circle cx="12" cy="17" r="1" fill="currentColor" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" begin="0.8s" dur="0.4s" values="0;1"/></circle></svg>');
|
||||
$(el).find('.loading-wrap').addClass('error');
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
$(function () {
|
||||
const els = document.getElementsByClassName('stellar-fcircle-api');
|
||||
for (var i = 0; i < els.length; i++) {
|
||||
const el = els[i];
|
||||
const api = el.getAttribute('api');
|
||||
if (api == null) {
|
||||
continue;
|
||||
}
|
||||
var obj = new Object();
|
||||
obj.el = el;
|
||||
obj.api = api;
|
||||
FCircle.layoutDiv(obj);
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue