增加皮肤bolo-fantastic
This commit is contained in:
zeek
parent
6dd90769ba
commit
02b985e8f6
|
|
@ -1,3 +1,8 @@
|
|||
# bolo-skins
|
||||
## 简介
|
||||
|
||||
迁移到bolo 博客，保存自己自定义的皮肤部分。
|
||||
迁移到bolo 博客，保存自己自定义的皮肤部分。
|
||||
|
||||
皮肤样例：
|
||||
- [bolo-fantastic](https://www.zeekling.cn/?skin=bolo-fantastic-mod)
|
||||
|
||||
个人站点：[小令童鞋](https://www.zeekling.cn/)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
<#--
|
||||
|
||||
Bolo - A stable and beautiful blogging system based in Solo.
|
||||
Copyright (c) 2020, https://github.com/adlered
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
<#-- Solo - A small and beautiful blogging system written in Java. Copyright (c) 2010-present, b3log.org This program is
|
||||
free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
|
||||
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
|
||||
warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
|
||||
details. You should have received a copy of the GNU Affero General Public License along with this program. If not,
|
||||
see <https://www.gnu.org/licenses/>. -->
|
||||
<#include "../../common-template/macro-common_head.ftl">
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<@head title="${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel} ${archiveLabel} - ${blogTitle}">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7.5/css/bulma.min.css"/>
|
||||
<link rel="stylesheet" href="https://ftp.stackoverflow.wiki/bolo/fantastic/css/all.min.css">
|
||||
<link rel="stylesheet"
|
||||
href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css">
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js'></script>
|
||||
</@head>
|
||||
<#-- <#include "style.theme.ftl"> -->
|
||||
</head>
|
||||
|
||||
<body class="is-3-column">
|
||||
<#include "header.ftl">
|
||||
<div class="card-normal">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
|
||||
<div class="column is-8-tablet is-8-desktop is-9-widescreen is-9-fullhd has-order-2 column-main"
|
||||
style="margin-left: 10px">
|
||||
<div class="columns">
|
||||
<div
|
||||
class="column is-12-tablet is-12-desktop is-12-widescreen has-order-2 column-main">
|
||||
<div class="level">
|
||||
<div class="columns" style="width:100%">
|
||||
<div
|
||||
class="column is-12-tablet is-12-desktop is-8-widescreen is-8-fullhd has-order-2 column-main">
|
||||
<#include "article-list.ftl">
|
||||
</div>
|
||||
<div
|
||||
class="column is-4-tablet is-4-desktop is-hidden-touch is-hidden-desktop-only is-4-widescreen is-4-fullhd has-order-3 column-right <%= sticky_class(position) %>">
|
||||
<#include "side-right.ftl">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<#include "side.ftl">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<a id="back-to-top" title="返回顶部" href="javascript:"><i class="fas fa-chevron-up"></i></a>
|
||||
<#include "footer.ftl">
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<#--
|
||||
|
||||
Bolo - A stable and beautiful blogging system based in Solo.
|
||||
Copyright (c) 2020, https://github.com/adlered
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
<#-- Solo - A small and beautiful blogging system written in Java. Copyright (c) 2010-present, b3log.org This program is
|
||||
free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
|
||||
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
|
||||
warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
|
||||
details. You should have received a copy of the GNU Affero General Public License along with this program. If not,
|
||||
see <https://www.gnu.org/licenses/>. -->
|
||||
<#include "../../common-template/macro-common_head.ftl">
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<@head title="${archiveLabel} - ${blogTitle}">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7.5/css/bulma.min.css"/>
|
||||
<link rel="stylesheet" href="https://ftp.stackoverflow.wiki/bolo/fantastic/css/all.min.css">
|
||||
<link rel="stylesheet"
|
||||
href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css">
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js'></script>
|
||||
</@head>
|
||||
|
||||
|
||||
<#-- <#include "style.theme.ftl"> -->
|
||||
</head>
|
||||
|
||||
<body class="is-3-column">
|
||||
<#include "header.ftl">
|
||||
<div class="card-normal">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
|
||||
<div class="column is-8-tablet is-8-desktop is-9-widescreen is-9-fullhd has-order-2 column-main"
|
||||
style="margin-left: 10px">
|
||||
<div class="columns">
|
||||
<div
|
||||
class="column is-12-tablet is-12-desktop is-12-widescreen has-order-2 column-main">
|
||||
<div class="level">
|
||||
<div class="columns" style="width:100%">
|
||||
<div
|
||||
class="column is-12-tablet is-12-desktop is-8-widescreen is-8-fullhd has-order-2 column-main">
|
||||
<div class="card widget">
|
||||
<div class="card-content">
|
||||
<h3 class="menu-label">
|
||||
${archiveDates?size} ${cntMonthLabel}
|
||||
${statistic.statisticPublishedBlogArticleCount}
|
||||
${cntArticleLabel}
|
||||
</h3>
|
||||
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<#if 0 !=archiveDates?size>
|
||||
<#list archiveDates as archiveDate>
|
||||
<div class="control">
|
||||
<a class="tags has-addons"
|
||||
href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
|
||||
<span
|
||||
class="tag">${archiveDate.archiveDateYear}
|
||||
${yearLabel}
|
||||
${archiveDate.archiveDateMonth}
|
||||
${monthLabel}</span>
|
||||
<span class="tag is-grey">
|
||||
${archiveDate.archiveDatePublishedArticleCount}
|
||||
${cntArticleLabel}</span>
|
||||
</a>
|
||||
</div>
|
||||
</#list>
|
||||
</#if>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="column is-4-tablet is-4-desktop is-hidden-touch is-hidden-desktop-only is-4-widescreen is-4-fullhd has-order-3 column-right <%= sticky_class(position) %>">
|
||||
<#include "side-right.ftl">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<#include "side.ftl">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<a id="back-to-top" title="返回顶部" href="javascript:"><i class="fas fa-chevron-up"></i></a>
|
||||
<#include "footer.ftl">
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
<#--
|
||||
|
||||
Bolo - A stable and beautiful blogging system based in Solo.
|
||||
Copyright (c) 2020, https://github.com/adlered
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
<#-- Bolo - A stable and beautiful blogging system based in Solo. Copyright (c) 2020, https://github.com/adlered This
|
||||
program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public
|
||||
License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later
|
||||
version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the
|
||||
implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
|
||||
for more details. You should have received a copy of the GNU Affero General Public License along with this program.
|
||||
If not, see <https://www.gnu.org/licenses/>. -->
|
||||
<div>
|
||||
<#list articles as article>
|
||||
<#if article.articlePutTop>
|
||||
<div class="level">
|
||||
<div class="blog-slider card">
|
||||
<div class="blog-slider__wrp swiper-wrapper">
|
||||
<div class="blog-slider__item swiper-slide">
|
||||
<div class="blog-slider__img">
|
||||
<a href="${servePath}${article.articlePermalink}">
|
||||
<img src="${article.articleImg1URL}" alt="${article.articleTitle!}"
|
||||
referrerpolicy="origin">
|
||||
</a>
|
||||
</div>
|
||||
<div class="blog-slider__content">
|
||||
<div>
|
||||
<span class="blog-slider__code"
|
||||
style="display:inline-block">${article.articleUpdateDate?string("yyyy年MM月dd日")}</span>
|
||||
<#if article.categoryURI??>
|
||||
<span><a class="has-link-black-ter"
|
||||
href="${servePath}/category/${article.categoryURI}">${article.articleCategory}</a></span>
|
||||
</#if>
|
||||
</div>
|
||||
<div class="blog-slider__title "><a class="title is-5"
|
||||
href="${servePath}${article.articlePermalink}">${article.articleTitle!}</a>
|
||||
</div>
|
||||
<div class="blog-slider__text" content="">
|
||||
<#if article.articleAbstractText!?length gt 24>
|
||||
${article.articleAbstractText!?substring(0, 24)} ......<#else>
|
||||
${article.articleAbstractText!}</#if>
|
||||
</div>
|
||||
<a href="${servePath}${article.articlePermalink}"
|
||||
class="blog-slider__button">阅读更多</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="blog-slider__pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
<#else>
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<a href="${servePath}${article.articlePermalink}">
|
||||
<img class="thumbnail" src="${article.articleImg1URL}" alt="${article.articleTitle!}"
|
||||
referrerpolicy="origin">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div class="card-content article " id="card-content" style="width: 100%">
|
||||
<div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
|
||||
<div class="level-left">
|
||||
<time
|
||||
class="level-item has-text-grey">${article.articleUpdateDate?string("yyyy年MM月dd日")}</time>
|
||||
<#if article.articleCategory != "">
|
||||
<a class="has-link-black-ter"
|
||||
href="${servePath}/category/${article.categoryURI}">${article.articleCategory}</a>
|
||||
</#if>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="title is-size-5 is-size-5-mobile has-text-weight-normal">
|
||||
|
||||
<a class="has-link-black-ter"
|
||||
href="${servePath}${article.articlePermalink}">${article.articleTitle!}</a>
|
||||
|
||||
</h1>
|
||||
<div id="is-hidden-touch" class="content is-hidden-touch">
|
||||
<#if article.articleAbstractText!?length gt 128>
|
||||
${article.articleAbstractText!?substring(0, 128)} ......<#else>
|
||||
${article.articleAbstractText!}</#if>
|
||||
<#-- ${article.articleAbstractText!?substring(0, 128)} ...... -->
|
||||
</div>
|
||||
|
||||
<div class="level is-mobile">
|
||||
<div class="level-start">
|
||||
<div class="level-item">
|
||||
<a class="button is-size-7 is-light"
|
||||
href="${servePath}${article.articlePermalink}">阅读更多</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</#if>
|
||||
|
||||
|
||||
</#list>
|
||||
|
||||
|
||||
<div class="card card-transparent">
|
||||
|
||||
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
|
||||
<#if paginationCurrentPageNum !=paginationFirstPageNum>
|
||||
|
||||
<div class="pagination-previous">
|
||||
<a class="is-flex-grow has-text-black-ter"
|
||||
href="${servePath}${path}?p=${paginationPreviousPageNum}">上一页</a>
|
||||
</div>
|
||||
</#if>
|
||||
<#if paginationCurrentPageNum !=paginationLastPageNum>
|
||||
<div class="pagination-next">
|
||||
<a class="is-flex-grow has-text-black-ter"
|
||||
href="${servePath}${path}?p=${paginationNextPageNum}">下一页</a>
|
||||
</div>
|
||||
</#if>
|
||||
|
||||
|
||||
<ul class="pagination-list is-hidden-mobile">
|
||||
<#list paginationPageNums as paginationPageNum>
|
||||
<#if paginationPageNum==paginationCurrentPageNum>
|
||||
<li><span class="pagination-link is-current">${paginationPageNum}</span></li>
|
||||
<#else>
|
||||
<li><a class="pagination-link"
|
||||
href="${servePath}${path}?p=${paginationPageNum}">${paginationPageNum}</a></li>
|
||||
</#if>
|
||||
</#list>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
<#--
|
||||
|
||||
Bolo - A stable and beautiful blogging system based in Solo.
|
||||
Copyright (c) 2020, https://github.com/adlered
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
<#-- Bolo - A stable and beautiful blogging system based in Solo. Copyright (c) 2020, https://github.com/adlered This
|
||||
program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public
|
||||
License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later
|
||||
version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the
|
||||
implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
|
||||
for more details. You should have received a copy of the GNU Affero General Public License along with this program.
|
||||
If not, see <https://www.gnu.org/licenses/>. -->
|
||||
<#-- Solo - A small and beautiful blogging system written in Java. Copyright (c) 2010-present, b3log.org This
|
||||
program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General
|
||||
Public License as published by the Free Software Foundation, either version 3 of the License, or (at your
|
||||
option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY
|
||||
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
||||
Affero General Public License for more details. You should have received a copy of the GNU Affero General Public
|
||||
License along with this program. If not, see <https://www.gnu.org/licenses/>. -->
|
||||
<#include "../../common-template/macro-common_head.ftl">
|
||||
<#include "macro-comments.ftl">
|
||||
<#include "../../common-template/macro-comment_script.ftl">
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<@head title="${article.articleTitle} - ${blogTitle}"
|
||||
description="${article.articleAbstract?html}">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7.5/css/bulma.min.css" />
|
||||
<link rel="stylesheet" href="https://ftp.stackoverflow.wiki/bolo/fantastic/css/all.min.css">
|
||||
<link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}" />
|
||||
<link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/style.css?${staticResourceVersion}" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css">
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js'></script>
|
||||
</@head>
|
||||
<#-- <#include "style.theme.ftl"> -->
|
||||
</head>
|
||||
<body class="is-3-column">
|
||||
<#include "header.ftl">
|
||||
<script>
|
||||
var loggedIn = ${article.logged};
|
||||
</script>
|
||||
<div class="card-normal">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-12-tablet is-8-desktop is-8-widescreen is-8-fullhd has-order-2 column-main">
|
||||
<div class="card" style="display: block">
|
||||
<div class="card-content article" id="card-content" style="width: 100%">
|
||||
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
|
||||
${article.articleTitle}
|
||||
</h1>
|
||||
<div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
|
||||
<div class="level-left">
|
||||
<div class="level-item has-text-grey">
|
||||
跟新于${article.articleUpdateDate?string("yyyy年MM月dd日")}
|
||||
</div>
|
||||
<div class="level-item has-text-grey">
|
||||
创建于${article.articleCreateDate?string("yyyy年MM月dd日")}
|
||||
</div>
|
||||
<div>
|
||||
${article.articleViewCount} 浏览
|
||||
</div>
|
||||
<div>
|
||||
<#if article.articleCommentCount != 0>
|
||||
<a href="#comments">${article.articleCommentCount} 评论 </a>
|
||||
</#if>
|
||||
</div>
|
||||
<div class="level-item has-text-grey">
|
||||
${article.articleCategory}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.content .emoji {
|
||||
width: 25px !important;
|
||||
height: 25px !important;
|
||||
}
|
||||
</style>
|
||||
<div id="post-article" class="content post-article">
|
||||
${article.articleContent}
|
||||
</div>
|
||||
<div class="level is-size-7 is-uppercase">
|
||||
<div class="level-start">
|
||||
<div class="level-item">
|
||||
<span class="is-size-6 has-text-grey has-mr-7">#</span>
|
||||
<#list article.articleTags?split(",") as articleTag>
|
||||
<a class="has-link-grey -link"
|
||||
href="${servePath}/tags/${articleTag?url('UTF-8')}">${articleTag!}</a>
|
||||
</#list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<#if "" !=article.articleSign.signHTML?trim>
|
||||
<div>${article.articleSign.signHTML}</div>
|
||||
</#if>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<h3 class="title is-5 has-text-weight-normal">评论</h3>
|
||||
<@comments commentList=articleComments article=article
|
||||
count=article.articleCommentCount>
|
||||
</@comments>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4-tablet is-3-desktop is-3-widescreen is-3-fullhd is-hidden-touch has-order-3 column-right <%= sticky_class(position) %>">
|
||||
<#include "toc-post.ftl">
|
||||
<div class="card widget">
|
||||
<div class="card-content">
|
||||
<article class="media">
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<div class="item" id="randomArticles"></div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card widget" id="r2">
|
||||
<div class="card-content">
|
||||
<article class="media">
|
||||
<div class="media-content">
|
||||
<div class="content" id="rArticles">
|
||||
<div class="item" id="relevantArticles"></div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<a id="back-to-top" title="返回顶部" href="javascript:"><i class="fas fa-chevron-up"></i></a>
|
||||
<#include "footer.ftl">
|
||||
<@comment_script oId=article.oId commentable=article.commentable>
|
||||
page.tips.externalRelevantArticlesDisplayCount =
|
||||
"${externalRelevantArticlesDisplayCount}";
|
||||
<#if 0 !=randomArticlesDisplayCount>
|
||||
page.loadRandomArticles('<h3>${randomArticlesLabel}</h3>');
|
||||
</#if>
|
||||
<#if 0 !=relevantArticlesDisplayCount>
|
||||
page.loadRelevantArticles('${article.oId}', '<h3>${relevantArticlesLabel}</h3>');
|
||||
</#if>
|
||||
Skin.initArticle()
|
||||
</@comment_script>
|
||||
<script>
|
||||
// 延时检测右侧 “相关阅读” 是否为空，如果空则删除空 div，好看些
|
||||
$(function () {
|
||||
var tempHtml =
|
||||
'<a rel="nofollow" href="javascript:void(0)"><i class="fas fa-search fa-spin"></i> 努力寻找中 ...</a>';
|
||||
$('#rArticles').append(tempHtml);
|
||||
setTimeout(function () {
|
||||
var judgeEmptyShowing = $('#rArticles').html();
|
||||
judgeEmptyShowing = judgeEmptyShowing.replace(tempHtml, '');
|
||||
$('#rArticles').html(judgeEmptyShowing);
|
||||
judgeEmptyShowing = judgeEmptyShowing.replace(/[\r\n]/g,
|
||||
"");
|
||||
judgeEmptyShowing = judgeEmptyShowing.replace(new RegExp(
|
||||
/( )/g), "");
|
||||
if (judgeEmptyShowing === '') {
|
||||
$('#rArticles').html(
|
||||
'<a href="javascript:void(0)"><i class="fa fa-battery-empty"></i> 什么都没找到</a>'
|
||||
);
|
||||
setTimeout(function () {
|
||||
$('#r2').fadeOut(1000);
|
||||
}, 1000)
|
||||
}
|
||||
}, 3000)
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<#--
|
||||
|
||||
Bolo - A stable and beautiful blogging system based in Solo.
|
||||
Copyright (c) 2020, https://github.com/adlered
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
<#-- Solo - A small and beautiful blogging system written in Java. Copyright (c) 2010-present, b3log.org This program is
|
||||
free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
|
||||
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
|
||||
warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
|
||||
details. You should have received a copy of the GNU Affero General Public License along with this program. If not,
|
||||
see <https://www.gnu.org/licenses/>. -->
|
||||
<#include "../../common-template/macro-common_head.ftl">
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<@head title="${category.categoryTitle} - ${blogTitle}">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7.5/css/bulma.min.css"/>
|
||||
<link rel="stylesheet" href="https://ftp.stackoverflow.wiki/bolo/fantastic/css/all.min.css">
|
||||
<link rel="stylesheet"
|
||||
href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css">
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js'></script>
|
||||
</@head>
|
||||
<#-- <#include "style.theme.ftl"> -->
|
||||
</head>
|
||||
|
||||
<body class="is-3-column">
|
||||
<#include "header.ftl">
|
||||
<div class="card-normal">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
|
||||
<div class="column is-8-tablet is-8-desktop is-9-widescreen is-9-fullhd has-order-2 column-main"
|
||||
style="margin-left: 10px">
|
||||
<div class="columns">
|
||||
<div
|
||||
class="column is-12-tablet is-12-desktop is-12-widescreen has-order-2 column-main">
|
||||
<div class="level">
|
||||
<div class="columns">
|
||||
<div
|
||||
class="column is-12-tablet is-12-desktop is-8-widescreen is-8-fullhd has-order-2 column-main">
|
||||
<#include "article-list.ftl">
|
||||
</div>
|
||||
<div
|
||||
class="column is-4-tablet is-4-desktop is-hidden-touch is-hidden-desktop-only is-4-widescreen is-4-fullhd has-order-3 column-right <%= sticky_class(position) %>">
|
||||
<#include "side-right.ftl">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<#include "side.ftl">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<a id="back-to-top" title="返回顶部" href="javascript:"><i class="fas fa-chevron-up"></i></a>
|
||||
<#include "footer.ftl">
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<#--
|
||||
|
||||
Bolo - A stable and beautiful blogging system based in Solo.
|
||||
Copyright (c) 2020, https://github.com/adlered
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
<li id="li-comment-${comment.oId}" itemtype="http://schema.org/Comment" itemprop="comment"
|
||||
class="comment index-1">
|
||||
<div id="comment-${comment.oId}" class="comment-body">
|
||||
<div class="comment-avatar">
|
||||
<a href="" rel="nofollow" target="_blank">
|
||||
<img alt="${comment.commentName}" src="${comment.commentThumbnailURL}" class="avatar">
|
||||
</a>
|
||||
</div>
|
||||
<div class="contain-main">
|
||||
<div class="comment-meta">
|
||||
<div itemprop="author" class="comment-author">
|
||||
<#if "http://" == comment.commentURL>
|
||||
<a href="javascript:void(0);" rel="nofollow" target="_blank"
|
||||
class="author-name">${comment.commentName}</a>
|
||||
<#else>
|
||||
<a href="${comment.commentURL}" rel="nofollow" target="_blank"
|
||||
class="author-name">${comment.commentName}</a>
|
||||
</#if>
|
||||
|
||||
<#if comment.isReply>
|
||||
<span class="comment-content" style="margin:0;padding:0;">@</span>
|
||||
<a href="${servePath}${article.permalink}#li-comment-${comment.commentOriginalCommentId}"
|
||||
onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 20);"
|
||||
onmouseout="page.hideComment('${comment.commentOriginalCommentId}')"
|
||||
>${comment.commentOriginalCommentName}</a>
|
||||
</#if>
|
||||
|
||||
<#if article.commentable>
|
||||
<span class="comment-reply" style="cursor: pointer;">
|
||||
<a href="javascript:page.toggleEditor('${comment.oId}', '${comment.commentName}')">${replyLabel}</a>
|
||||
</span>
|
||||
</#if>
|
||||
|
||||
<div class="useragent-info"><a href="${comment.commentURL}"
|
||||
target="_blank">${comment.commentURL!}</a></div>
|
||||
</div>
|
||||
<time itemprop="datePublished" datetime="${comment.commentDate2?string("yyyy-MM-dd")}"
|
||||
class="comment-time">
|
||||
${comment.commentDate2?string("yyyy-MM-dd HH:mm")}
|
||||
</time>
|
||||
<a href="#li-comment-${comment.oId}" class="comment-id">#${comment.oId}</a></div>
|
||||
<style>
|
||||
.comment-content .emoji {
|
||||
width: 25px !important;
|
||||
height: 25px !important;
|
||||
}
|
||||
</style>
|
||||
<div itemprop="description" class="comment-content">
|
||||
${comment.commentContent}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,19 @@
|
|||
/*
|
||||
* Bolo - A stable and beautiful blogging system based in Solo.
|
||||
* Copyright (c) 2020, https://github.com/adlered
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
@import "../../../scss/nprogress";
|
||||
@import "vditor/src/assets/scss/classic";
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<#--
|
||||
|
||||
Bolo - A stable and beautiful blogging system based in Solo.
|
||||
Copyright (c) 2020, https://github.com/adlered
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="level">
|
||||
<div class="level-start has-text-centered-mobile">
|
||||
<p class="is-size-6">
|
||||
© ${.now?string('yyyy')} ${blogTitle!}
|
||||
Powered by <a href="https://github.com/AdlerED/bolo-solo" target="_blank">菠萝博客 Bolo</a>
|
||||
<br>
|
||||
Theme <a href="https://github.com/csfwff/bolo-fantastic">Fantastic</a> by
|
||||
<a href="https://github.com/csfwff" target="_blank">唐墨夏</a>
|
||||
<br/>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<div class="level-end">
|
||||
<div class="field has-addons is-flex-center-mobile has-mt-5-mobile is-flex-wrap is-flex-middle">
|
||||
<a href="${servePath}/search"> 搜索</a> •
|
||||
<a href="${servePath}/tags.html"> ${allTagsLabel}</a> •
|
||||
<a href="${servePath}/archives.html"> ${archiveLabel}</a> •
|
||||
<a href="${servePath}/links.html">
|
||||
${linkLabel}
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div class="field has-addons is-flex-center-mobile has-mt-5-mobile is-flex-wrap is-flex-middle">
|
||||
<div>${footerContent} <br></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script type="text/javascript" src="${staticServePath}/js/lib/jquery/jquery.min.js" charset="utf-8"></script>
|
||||
<script src="${staticServePath}/js/lib/compress/pjax.min.js"></script>
|
||||
<script src="${staticServePath}/js/common${miniPostfix}.js?${staticResourceVersion}"></script>
|
||||
<script src="${staticServePath}/skins/${skinDirName}/js/common${miniPostfix}.js?${staticResourceVersion}"></script>
|
||||
<#include "../../common-template/label.ftl">
|
||||
|
||||
${plugins}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<#--
|
||||
|
||||
Bolo - A stable and beautiful blogging system based in Solo.
|
||||
Copyright (c) 2020, https://github.com/adlered
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
<nav class="navbar navbar-main is-paddingless ">
|
||||
<div class="container ">
|
||||
<div class="navbar-brand transparent">
|
||||
<a class="navbar-item navbar-logo" href="${servePath}" rel="start">
|
||||
<img src="${faviconURL}" alt="${blogTitle!}" height="28"/>
|
||||
${blogTitle!}
|
||||
</a>
|
||||
<span class="navbar-burger burger" data-target="navMenu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="navMenu" class="navbar-menu transparent">
|
||||
<div class="navbar-start transparent">
|
||||
<div class="navbar-start">
|
||||
<#list pageNavigations as page>
|
||||
<a class="navbar-item" href="${page.pagePermalink}" target="${page.pageOpenTarget}"
|
||||
rel="section">
|
||||
<#if page.pageIcon !=''><img class="page-icon" src="${page.pageIcon}"></#if>
|
||||
${page.pageTitle}
|
||||
</a>
|
||||
</#list>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
|
||||
<#if isLoggedIn>
|
||||
<a class="navbar-item" href="${servePath}/admin-index.do#main" title="${adminLabel}">
|
||||
${adminLabel}
|
||||
</a>
|
||||
<a class="navbar-item" href="${logoutURL}">
|
||||
${logoutLabel}
|
||||
</a>
|
||||
<#else>
|
||||
<a class="navbar-item" href="${servePath}/start">
|
||||
${startToUseLabel}
|
||||
</a>
|
||||
</#if>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<#--
|
||||
|
||||
Bolo - A stable and beautiful blogging system based in Solo.
|
||||
Copyright (c) 2020, https://github.com/adlered
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
<#-- Solo - A small and beautiful blogging system written in Java. Copyright (c) 2010-present, b3log.org This program is
|
||||
free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
|
||||
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
|
||||
warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
|
||||
details. You should have received a copy of the GNU Affero General Public License along with this program. If not,
|
||||
see <https://www.gnu.org/licenses/>. -->
|
||||
<#include "../../common-template/macro-common_head.ftl">
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<@head title="${blogTitle}">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7.5/css/bulma.min.css"/>
|
||||
<link rel="stylesheet" href="https://ftp.stackoverflow.wiki/bolo/fantastic/css/all.min.css">
|
||||
<link rel="stylesheet"
|
||||
href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css">
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js'></script>
|
||||
</@head>
|
||||
<#-- <#include "style.theme.ftl"> -->
|
||||
</head>
|
||||
|
||||
<body class="is-3-column">
|
||||
<#include "header.ftl">
|
||||
<div class="card-normal">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
|
||||
<div class="column is-8-tablet is-8-desktop is-9-widescreen is-9-fullhd has-order-2 column-main"
|
||||
style="margin-left: 10px">
|
||||
<div class="columns">
|
||||
<div
|
||||
class="column is-12-tablet is-12-desktop is-12-widescreen has-order-2 column-main">
|
||||
<div class="level">
|
||||
<div class="columns">
|
||||
<div
|
||||
class="column is-12-tablet is-12-desktop is-8-widescreen is-8-fullhd has-order-2 column-main">
|
||||
|
||||
<#include "article-list.ftl">
|
||||
</div>
|
||||
<div
|
||||
class="column is-4-tablet is-4-desktop is-hidden-touch is-hidden-desktop-only is-4-widescreen is-4-fullhd has-order-3 column-right <%= sticky_class(position) %>">
|
||||
<#include "side-right.ftl">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<#include "side.ftl">
|
||||
</div>
|
||||
|
||||
<!-- 博客底部 -->
|
||||
<ins class="adsbygoogle"
|
||||
style="display:block;height:130px;width:900px;margin:auto;text-align:center;"
|
||||
data-ad-client="ca-pub-1331219010215317"
|
||||
data-ad-slot="2801313884"
|
||||
data-full-width-responsive="true">
|
||||
</ins>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<a id="back-to-top" title="返回顶部" href="javascript:"><i class="fas fa-chevron-up"></i></a>
|
||||
<#include "footer.ftl">
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,357 @@
|
|||
/*
|
||||
* Bolo - A stable and beautiful blogging system based in Solo.
|
||||
* Copyright (c) 2020, https://github.com/adlered
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
//animate
|
||||
(function () {
|
||||
function $() {
|
||||
return Array.prototype.slice.call(document.querySelectorAll.apply(document, arguments));
|
||||
}
|
||||
|
||||
$('body > .navbar, body > .section, body > .footer').forEach(function (element) {
|
||||
element.style.transition = '0s';
|
||||
element.style.opacity = '0';
|
||||
});
|
||||
document.querySelector('body > .navbar').style.transform = 'translateY(-100px)';
|
||||
['.column-main > .card',
|
||||
'.column-left > .card, .column-right-shadow > .card',
|
||||
'.column-right > .card'].map(function (selector) {
|
||||
$(selector).forEach(function (element) {
|
||||
element.style.transition = '0s';
|
||||
element.style.opacity = '0';
|
||||
element.style.transform = 'scale(0.8)';
|
||||
element.style.transformOrigin = 'center top';
|
||||
});
|
||||
});
|
||||
setTimeout(function () {
|
||||
$('body > .navbar, body > .section, body > .footer').forEach(function (element) {
|
||||
element.style.opacity = '1';
|
||||
element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
|
||||
});
|
||||
document.querySelector('body > .navbar').style.transform = 'translateY(0)';
|
||||
['.column-main > .card',
|
||||
'.column-left > .card, .column-right-shadow > .card',
|
||||
'.column-right > .card'].map(function (selector) {
|
||||
var i = 1;
|
||||
$(selector).forEach(function (element) {
|
||||
setTimeout(function () {
|
||||
element.style.opacity = '1';
|
||||
element.style.transform = '';
|
||||
element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
|
||||
}, i * 100);
|
||||
i++;
|
||||
});
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
//burger
|
||||
(function () {
|
||||
var burger = document.querySelector('.burger');
|
||||
var menu = document.querySelector('#' + burger.dataset.target);
|
||||
burger.addEventListener('click', function () {
|
||||
burger.classList.toggle('is-active');
|
||||
menu.classList.toggle('is-active');
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
//backtotop
|
||||
$(document).ready(function () {
|
||||
var $button = $('#back-to-top');
|
||||
var $footer = $('footer.footer');
|
||||
var $mainColumn = $('.column-main');
|
||||
var $leftSidebar = $('.column-left');
|
||||
var $rightSidebar = $('.column-right');
|
||||
var lastScrollTop = 0;
|
||||
var rightMargin = 20;
|
||||
var bottomMargin = 20;
|
||||
var lastState = null;
|
||||
var state = {
|
||||
base: {
|
||||
classname: 'card has-text-centered',
|
||||
left: '',
|
||||
width: 64,
|
||||
bottom: bottomMargin,
|
||||
'border-radius': 4
|
||||
}
|
||||
};
|
||||
state['desktop-hidden'] = Object.assign({}, state.base, {
|
||||
classname: state.base.classname + ' rise-up',
|
||||
});
|
||||
state['desktop-visible'] = Object.assign({}, state['desktop-hidden'], {
|
||||
classname: state['desktop-hidden'].classname + ' fade-in',
|
||||
});
|
||||
state['desktop-dock'] = Object.assign({}, state['desktop-visible'], {
|
||||
classname: state['desktop-visible'].classname + ' fade-in',
|
||||
width: 40,
|
||||
'border-radius': '50%'
|
||||
});
|
||||
state['mobile-hidden'] = Object.assign({}, state.base, {
|
||||
classname: state.base.classname + ' fade-in',
|
||||
right: rightMargin
|
||||
});
|
||||
state['mobile-visible'] = Object.assign({}, state['mobile-hidden'], {
|
||||
classname: state['mobile-hidden'].classname + ' rise-up',
|
||||
});
|
||||
|
||||
function isStateEquals(prev, next) {
|
||||
for (var prop in prev) {
|
||||
if (!next.hasOwnProperty(prop) || next[prop] !== prev[prop]) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
for (var prop in next) {
|
||||
if (!prev.hasOwnProperty(prop) || prev[prop] !== prev[prop]) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function applyState(state) {
|
||||
if (lastState !== null && isStateEquals(lastState, state)) {
|
||||
return;
|
||||
}
|
||||
$button.attr('class', state.classname);
|
||||
for (let prop in state) {
|
||||
if (prop === 'classname') {
|
||||
continue;
|
||||
}
|
||||
$button.css(prop, state[prop]);
|
||||
}
|
||||
lastState = state;
|
||||
}
|
||||
|
||||
function isDesktop() {
|
||||
return window.innerWidth >= 1078;
|
||||
}
|
||||
|
||||
function isTablet() {
|
||||
return window.innerWidth >= 768 && !isDesktop();
|
||||
}
|
||||
|
||||
function isScrollUp() {
|
||||
return $(window).scrollTop() < lastScrollTop && $(window).scrollTop() > 0;
|
||||
}
|
||||
|
||||
function hasLeftSidebar() {
|
||||
return $leftSidebar.length > 0;
|
||||
}
|
||||
|
||||
function hasRightSidebar() {
|
||||
return $rightSidebar.length > 0;
|
||||
}
|
||||
|
||||
function getRightSidebarBottom() {
|
||||
if (!hasRightSidebar()) {
|
||||
return 0;
|
||||
}
|
||||
return Math.max.apply(null, $rightSidebar.find('.widget').map(function () {
|
||||
return $(this).offset().top + $(this).outerHeight(true);
|
||||
}));
|
||||
}
|
||||
|
||||
function getScrollTop() {
|
||||
return $(window).scrollTop();
|
||||
}
|
||||
|
||||
function getScrollBottom() {
|
||||
return $(window).scrollTop() + $(window).height();
|
||||
}
|
||||
|
||||
function getButtonWidth() {
|
||||
return $button.outerWidth(true);
|
||||
}
|
||||
|
||||
function getButtonHeight() {
|
||||
return $button.outerHeight(true);
|
||||
}
|
||||
|
||||
function updateScrollTop() {
|
||||
lastScrollTop = $(window).scrollTop();
|
||||
}
|
||||
|
||||
function update() {
|
||||
// desktop mode or tablet mode with only right sidebar enabled
|
||||
if (isDesktop() || (isTablet() && !hasLeftSidebar() && hasRightSidebar())) {
|
||||
var nextState;
|
||||
var padding = ($mainColumn.outerWidth() - $mainColumn.width()) / 2;
|
||||
var maxLeft = $(window).width() - getButtonWidth() - rightMargin;
|
||||
var maxBottom = $footer.offset().top + getButtonHeight() / 2 + bottomMargin;
|
||||
if (getScrollTop() == 0 || getScrollBottom() < getRightSidebarBottom() + padding + getButtonHeight()) {
|
||||
nextState = state['desktop-hidden'];
|
||||
} else if (getScrollBottom() < maxBottom) {
|
||||
nextState = state['desktop-visible'];
|
||||
} else {
|
||||
nextState = Object.assign({}, state['desktop-dock'], {
|
||||
bottom: getScrollBottom() - maxBottom + bottomMargin
|
||||
});
|
||||
}
|
||||
|
||||
var left = $mainColumn.offset().left + $mainColumn.outerWidth() + padding;
|
||||
nextState = Object.assign({}, nextState, {
|
||||
left: Math.min(left, maxLeft)
|
||||
});
|
||||
applyState(nextState);
|
||||
} else {
|
||||
// mobile and tablet mode
|
||||
if (!isScrollUp()) {
|
||||
applyState(state['mobile-hidden']);
|
||||
} else {
|
||||
applyState(state['mobile-visible']);
|
||||
}
|
||||
updateScrollTop();
|
||||
}
|
||||
}
|
||||
|
||||
update();
|
||||
$(window).resize(update);
|
||||
$(window).scroll(update);
|
||||
|
||||
$('#back-to-top').on('click', function () {
|
||||
$('body, html').animate({ scrollTop: 0 }, 400);
|
||||
});
|
||||
});
|
||||
|
||||
//gallery
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
if (typeof ($.fn.lightGallery) === 'function') {
|
||||
$('.article').lightGallery({ selector: '.gallery-item' });
|
||||
}
|
||||
if (typeof ($.fn.justifiedGallery) === 'function') {
|
||||
if ($('.justified-gallery > p > .gallery-item').length) {
|
||||
$('.justified-gallery > p > .gallery-item').unwrap();
|
||||
}
|
||||
$('.justified-gallery').justifiedGallery();
|
||||
}
|
||||
});
|
||||
|
||||
//main
|
||||
(function ($) {
|
||||
//alert();
|
||||
$('.article img:not(".not-gallery-item")').each(function () {
|
||||
// wrap images with link and add caption if possible
|
||||
if ($(this).parent('a').length === 0) {
|
||||
$(this).wrap('<a class="gallery-item" href="' + $(this).attr('src') + '"></a>');
|
||||
if (this.alt) {
|
||||
$(this).after('<div class="has-text-centered is-size-6 has-text-grey caption">' + this.alt + '</div>');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (typeof (moment) === 'function') {
|
||||
$('.article-meta time').each(function () {
|
||||
$(this).text(moment($(this).attr('datetime')).fromNow());
|
||||
});
|
||||
}
|
||||
|
||||
$('.article > .content > table').each(function () {
|
||||
if ($(this).width() > $(this).parent().width()) {
|
||||
$(this).wrap('<div class="table-overflow"></div>');
|
||||
}
|
||||
});
|
||||
|
||||
function adjustNavbar() {
|
||||
const navbarWidth = $('.navbar-main .navbar-start').outerWidth() + $('.navbar-main .navbar-end').outerWidth();
|
||||
if ($(document).outerWidth() < navbarWidth) {
|
||||
$('.navbar-main .navbar-menu').addClass('is-flex-start');
|
||||
} else {
|
||||
$('.navbar-main .navbar-menu').removeClass('is-flex-start');
|
||||
}
|
||||
}
|
||||
adjustNavbar();
|
||||
$(window).resize(adjustNavbar);
|
||||
|
||||
$('figure.highlight table').wrap('<div class="highlight-body">');
|
||||
if (typeof (IcarusThemeSettings) !== 'undefined' &&
|
||||
typeof (IcarusThemeSettings.article) !== 'undefined' &&
|
||||
typeof (IcarusThemeSettings.article.highlight) !== 'undefined') {
|
||||
if (typeof (ClipboardJS) !== 'undefined' && IcarusThemeSettings.article.highlight.clipboard) {
|
||||
$('figure.highlight').each(function () {
|
||||
var id = 'code-' + Date.now() + (Math.random() * 1000 | 0);
|
||||
var button = '<a href="javascript:;" class="copy" title="Copy" data-clipboard-target="#' + id + ' .code"><i class="fas fa-copy"></i></a>';
|
||||
$(this).attr('id', id);
|
||||
if ($(this).find('figcaption').length) {
|
||||
$(this).find('figcaption').prepend(button);
|
||||
} else {
|
||||
$(this).prepend('<figcaption>' + button + '</figcaption>');
|
||||
}
|
||||
});
|
||||
new ClipboardJS('.highlight .copy');
|
||||
}
|
||||
var fold = IcarusThemeSettings.article.highlight.fold;
|
||||
if (fold.trim()) {
|
||||
var button = '<span class="fold">' + (fold === 'unfolded' ? '<i class="fas fa-angle-down"></i>' : '<i class="fas fa-angle-right"></i>') + '</span>';
|
||||
$('figure.highlight').each(function () {
|
||||
if ($(this).find('figcaption').length) {
|
||||
$(this).find('figcaption').prepend(button);
|
||||
} else {
|
||||
$(this).prepend('<figcaption>' + button + '</figcaption>');
|
||||
}
|
||||
});
|
||||
|
||||
function toggleFold(codeBlock, isFolded) {
|
||||
var $toggle = $(codeBlock).find('.fold i');
|
||||
!isFolded ? $(codeBlock).removeClass('folded') : $(codeBlock).addClass('folded');
|
||||
!isFolded ? $toggle.removeClass('fa-angle-right') : $toggle.removeClass('fa-angle-down');
|
||||
!isFolded ? $toggle.addClass('fa-angle-down') : $toggle.addClass('fa-angle-right');
|
||||
}
|
||||
|
||||
$('figure.highlight').each(function () {
|
||||
toggleFold(this, fold === 'folded');
|
||||
});
|
||||
$('figure.highlight figcaption .fold').click(function () {
|
||||
var $code = $(this).closest('figure.highlight');
|
||||
toggleFold($code.eq(0), !$code.hasClass('folded'));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var $toc = $('#toc');
|
||||
if ($toc.length > 0) {
|
||||
var $mask = $('<div>');
|
||||
$mask.attr('id', 'toc-mask');
|
||||
|
||||
$('body').append($mask);
|
||||
|
||||
function toggleToc() {
|
||||
$toc.toggleClass('is-active');
|
||||
$mask.toggleClass('is-active');
|
||||
}
|
||||
|
||||
$toc.on('click', toggleToc);
|
||||
$mask.on('click', toggleToc);
|
||||
$('.navbar-main .catalogue').on('click', toggleToc);
|
||||
}
|
||||
})(jQuery);
|
||||
|
||||
|
||||
//widget_pin
|
||||
var swiper = new Swiper('.blog-slider', {
|
||||
spaceBetween: 30,
|
||||
effect: 'fade',
|
||||
// autoHeight: true,
|
||||
pagination: {
|
||||
el: '.blog-slider__pagination',
|
||||
clickable: true,
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,175 @@
|
|||
<#--
|
||||
|
||||
Bolo - A stable and beautiful blogging system based in Solo.
|
||||
Copyright (c) 2020, https://github.com/adlered
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
<#-- Solo - A small and beautiful blogging system written in Java. Copyright (c) 2010-present, b3log.org This program is
|
||||
free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
|
||||
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
|
||||
warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
|
||||
details. You should have received a copy of the GNU Affero General Public License along with this program. If not,
|
||||
see <https://www.gnu.org/licenses/>. -->
|
||||
<#include "../../common-template/macro-common_head.ftl">
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<@head title="${linkLabel} - ${blogTitle}">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7.5/css/bulma.min.css"/>
|
||||
<link rel="stylesheet" href="https://ftp.stackoverflow.wiki/bolo/fantastic/css/all.min.css">
|
||||
<link rel="stylesheet"
|
||||
href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css">
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js'></script>
|
||||
</@head>
|
||||
<style>
|
||||
.link-body {
|
||||
position: relative;
|
||||
margin: 10px auto;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
outline: 0;
|
||||
vertical-align: baseline;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.link-avatar {
|
||||
display: block;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
border-radius: 100%;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all .8s;
|
||||
transition: all .8s
|
||||
}
|
||||
|
||||
.link-avatar:hover {
|
||||
-webkit-transform: rotate(1turn);
|
||||
transform: rotate(1turn)
|
||||
}
|
||||
|
||||
.link-contain-main {
|
||||
margin-left: 58px;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
</style>
|
||||
|
||||
<#-- <#include "style.theme.ftl"> -->
|
||||
</head>
|
||||
|
||||
<body class="is-3-column">
|
||||
<#include "header.ftl">
|
||||
<div class="card-normal">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
|
||||
<div class="column is-8-tablet is-8-desktop is-9-widescreen is-9-fullhd has-order-2 column-main"
|
||||
style="margin-left: 10px">
|
||||
<div class="columns">
|
||||
<div
|
||||
class="column is-12-tablet is-12-desktop is-12-widescreen has-order-2 column-main">
|
||||
<div class="level">
|
||||
<div class="columns" style="width:100%">
|
||||
<div
|
||||
class="column is-12-tablet is-12-desktop is-8-widescreen is-8-fullhd has-order-2 column-main">
|
||||
<div class="card widget">
|
||||
<div class="card-content">
|
||||
<h3 class="menu-label">
|
||||
${linkLabel}
|
||||
</h3>
|
||||
|
||||
<div>
|
||||
<#list links as link>
|
||||
<div class="link-body">
|
||||
<div class="link-avatar-div">
|
||||
<a href="" rel="nofollow"
|
||||
target="_blank">
|
||||
<img alt="${link.linkDescription}"
|
||||
src="${link.linkIcon}"
|
||||
class="link-avatar">
|
||||
</a>
|
||||
</div>
|
||||
<div class="link-contain-main">
|
||||
<div class="link-meta">
|
||||
<div itemprop="author"
|
||||
class="link-author">
|
||||
<a href="${link.linkAddress}"
|
||||
rel="nofollow"
|
||||
target="_blank"
|
||||
title="${link.linkTitle}"
|
||||
class="author-name">${link.linkTitle}</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div itemprop="description"
|
||||
class="link-content">
|
||||
${link.linkDescription}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</#list>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="column is-4-tablet is-4-desktop is-hidden-touch is-hidden-desktop-only is-4-widescreen is-4-fullhd has-order-3 column-right <%= sticky_class(position) %>">
|
||||
<#include "side-right.ftl">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<#include "side.ftl">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<a id="back-to-top" title="返回顶部" href="javascript:"><i class="fas fa-chevron-up"></i></a>
|
||||
<#include "footer.ftl">
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,600 @@
|
|||
<#--
|
||||
|
||||
Bolo - A stable and beautiful blogging system based in Solo.
|
||||
Copyright (c) 2020, https://github.com/adlered
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
<#macro comments commentList article count>
|
||||
<#if article.commentable || 0 != commentList?size>
|
||||
<div class="halo-comment">
|
||||
<#if article.commentable>
|
||||
<style type="text/css">
|
||||
.halo-comment {
|
||||
position: relative;
|
||||
font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, STHeiti, WenQuanYi Micro Hei, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.8;
|
||||
margin: 0 auto;
|
||||
color: #313131;
|
||||
text-rendering: geometricPrecision;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
|
||||
.halo-comment a {
|
||||
text-decoration: none;
|
||||
color: #898c7b
|
||||
}
|
||||
|
||||
.halo-comment input::-webkit-input-placeholder, .halo-comment textarea::-webkit-input-placeholder {
|
||||
color: #ccc
|
||||
}
|
||||
|
||||
.halo-comment a, .halo-comment abbr, .halo-comment acronym, .halo-comment address, .halo-comment applet, .halo-comment big, .halo-comment blockquote, .halo-comment body, .halo-comment caption, .halo-comment cite, .halo-comment code, .halo-comment dd, .halo-comment del, .halo-comment dfn, .halo-comment div, .halo-comment dl, .halo-comment dt, .halo-comment em, .halo-comment fieldset, .halo-comment figure, .halo-comment form, .halo-comment h1, .halo-comment h2, .halo-comment h3, .halo-comment h4, .halo-comment h5, .halo-comment h6, .halo-comment html, .halo-comment iframe, .halo-comment ins, .halo-comment kbd, .halo-comment label, .halo-comment legend, .halo-comment li, .halo-comment object, .halo-comment ol, .halo-comment p, .halo-comment pre, .halo-comment q, .halo-comment s, .halo-comment samp, .halo-comment small, .halo-comment span, .halo-comment strike, .halo-comment strong, .halo-comment sub, .halo-comment sup, .halo-comment table, .halo-comment tbody, .halo-comment td, .halo-comment tfoot, .halo-comment th, .halo-comment thead, .halo-comment tr, .halo-comment tt, .halo-comment ul, .halo-comment var {
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline
|
||||
}
|
||||
|
||||
.halo-comment button, .halo-comment input, .halo-comment textarea {
|
||||
-webkit-appearance: none;
|
||||
outline: 0;
|
||||
-webkit-tap-highlight-color: transparent
|
||||
}
|
||||
|
||||
.halo-comment button:focus, .halo-comment input:focus, .halo-comment textarea:focus {
|
||||
outline: 0
|
||||
}
|
||||
|
||||
.halo-comment ol, .halo-comment ul {
|
||||
list-style: none
|
||||
}
|
||||
|
||||
.halo-comment .middle {
|
||||
display: inline-block;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.halo-comment .avatar {
|
||||
z-index: 0 !important;
|
||||
display: block;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
border-radius: 100%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all .8s;
|
||||
transition: all .8s
|
||||
}
|
||||
|
||||
.halo-comment .avatar:hover {
|
||||
-webkit-transform: rotate(1turn);
|
||||
transform: rotate(1turn)
|
||||
}
|
||||
|
||||
.halo-comment .comment-editor {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
-webkit-animation: top20 .5s;
|
||||
animation: top20 .5s
|
||||
}
|
||||
|
||||
.halo-comment .comment-editor .inner {
|
||||
margin: auto;
|
||||
padding: 20px 0
|
||||
}
|
||||
|
||||
.halo-comment .comment-form {
|
||||
margin-left: 56px
|
||||
}
|
||||
|
||||
.halo-comment .comment-form input, .halo-comment .comment-form textarea {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
border: 1px solid #e1e8ed;
|
||||
border-radius: 5px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
resize: vertical;
|
||||
color: #657786
|
||||
}
|
||||
|
||||
.halo-comment .comment-form input:focus, .halo-comment .comment-form textarea:focus {
|
||||
border-color: #ccc
|
||||
}
|
||||
|
||||
.halo-comment .commentator {
|
||||
position: relative;
|
||||
float: left
|
||||
}
|
||||
|
||||
.halo-comment .author-info {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
.halo-comment .author-info input {
|
||||
float: left;
|
||||
width: 49%;
|
||||
margin-right: 1%;
|
||||
}
|
||||
|
||||
.halo-comment .author-info input#boloSite {
|
||||
margin: 0;
|
||||
margin-left: 1%;
|
||||
}
|
||||
|
||||
.halo-comment .comment-textarea {
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.halo-comment .comment-textarea textarea {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
width: 100%;
|
||||
min-height: 90px;
|
||||
overflow: hidden;
|
||||
-webkit-transition: all .15s ease-in-out;
|
||||
transition: all .15s ease-in-out;
|
||||
color: #000
|
||||
}
|
||||
|
||||
.halo-comment .comment-preview {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 90px;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
border: 1px solid #e1e8ed;
|
||||
border-radius: 5px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
.halo-comment .comment-buttons {
|
||||
font-size: 14px;
|
||||
text-align: right
|
||||
}
|
||||
|
||||
.halo-comment .comment-buttons .button-preview-edit, .halo-comment .comment-buttons .button-submit {
|
||||
-webkit-animation: bottom20 .5s;
|
||||
animation: bottom20 .5s;
|
||||
border: none;
|
||||
background: #898c7b;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
padding: 6px 18px;
|
||||
text-transform: uppercase;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
-webkit-transition: all .3s ease 0s;
|
||||
transition: all .3s ease 0s
|
||||
}
|
||||
|
||||
.halo-comment .comment-buttons .button-preview-edit:hover, .halo-comment .comment-buttons .button-submit:hover {
|
||||
color: #404040;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3px;
|
||||
background: 0 0;
|
||||
-webkit-box-shadow: 0 5px 40px -10px rgba(0, 0, 0, .57);
|
||||
box-shadow: 0 5px 40px -10px rgba(0, 0, 0, .57);
|
||||
-webkit-transition: all .3s ease 0s;
|
||||
transition: all .3s ease 0s
|
||||
}
|
||||
|
||||
.halo-comment .comment-loader-container {
|
||||
-webkit-animation: top20 .5s;
|
||||
animation: top20 .5s;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
margin: 30px 0
|
||||
}
|
||||
|
||||
.halo-comment .comment-loader-container .comment-loader {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-flow: row nowrap;
|
||||
flex-flow: row nowrap;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
width: 30px
|
||||
}
|
||||
|
||||
.halo-comment .comment-loader-container .comment-loader span {
|
||||
width: 4px;
|
||||
height: 15px;
|
||||
background-color: #3b83ee
|
||||
}
|
||||
|
||||
.halo-comment .comment-loader-container .comment-loader span:first-of-type {
|
||||
-webkit-animation: grow 1s ease-in-out -.45s infinite;
|
||||
animation: grow 1s ease-in-out -.45s infinite
|
||||
}
|
||||
|
||||
.halo-comment .comment-loader-container .comment-loader span:nth-of-type(2) {
|
||||
-webkit-animation: grow 1s ease-in-out -.3s infinite;
|
||||
animation: grow 1s ease-in-out -.3s infinite
|
||||
}
|
||||
|
||||
.halo-comment .comment-loader-container .comment-loader span:nth-of-type(3) {
|
||||
-webkit-animation: grow 1s ease-in-out -.15s infinite;
|
||||
animation: grow 1s ease-in-out -.15s infinite
|
||||
}
|
||||
|
||||
.halo-comment .comment-loader-container .comment-loader span:nth-of-type(4) {
|
||||
-webkit-animation: grow 1s ease-in-out infinite;
|
||||
animation: grow 1s ease-in-out infinite
|
||||
}
|
||||
|
||||
@-webkit-keyframes grow {
|
||||
0%, to {
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1)
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scaleY(2);
|
||||
transform: scaleY(2)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes grow {
|
||||
0%, to {
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1)
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scaleY(2);
|
||||
transform: scaleY(2)
|
||||
}
|
||||
}
|
||||
|
||||
.halo-comment .comment-nodes {
|
||||
-webkit-animation: top20 1s;
|
||||
animation: top20 1s;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.halo-comment .comment-nodes .comment-editor {
|
||||
-webkit-animation: bottom20 .5s;
|
||||
animation: bottom20 .5s
|
||||
}
|
||||
|
||||
.halo-comment .comment-nodes .comment-editor .inner {
|
||||
padding: 7px 0 12px
|
||||
}
|
||||
|
||||
.halo-comment .comment-empty, .halo-comment .comment-load-button {
|
||||
margin: 30px 0;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.halo-comment .comment-empty {
|
||||
color: #8899a6
|
||||
}
|
||||
|
||||
.halo-comment .comment-page {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
border-top: 3px solid #f5f8fa
|
||||
}
|
||||
|
||||
.halo-comment .comment-page .page {
|
||||
display: inline-block;
|
||||
padding: 10px 0;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.halo-comment .comment-page .page li {
|
||||
display: inline;
|
||||
margin-right: 5px
|
||||
}
|
||||
|
||||
.halo-comment .comment-page .page button {
|
||||
margin-bottom: 8px;
|
||||
position: relative;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all .8s;
|
||||
transition: all .8s;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, .65);
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.halo-comment .comment-page .page .active, .halo-comment .comment-page .page button:hover {
|
||||
color: #1890ff;
|
||||
border-color: #1890ff
|
||||
}
|
||||
|
||||
.halo-comment .comment-nodes .index-1 {
|
||||
overflow: hidden;
|
||||
margin-top: 30px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 0px solid #f5f8fa
|
||||
}
|
||||
|
||||
.halo-comment .comment-nodes li:last-child {
|
||||
border: 0
|
||||
}
|
||||
|
||||
.halo-comment .comment-nodes .commentator a:after, .halo-comment .comment-nodes .commentator a:before {
|
||||
display: none
|
||||
}
|
||||
|
||||
.halo-comment .comment-body {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.halo-comment .comment-body:hover .comment-reply {
|
||||
display: block
|
||||
}
|
||||
|
||||
.halo-comment .children .comment-body:before {
|
||||
content: "";
|
||||
width: 2px;
|
||||
height: 500%;
|
||||
background: #898c7b;
|
||||
left: 23px;
|
||||
top: -500%;
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.halo-comment .comment-avatar {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
float: left;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.halo-comment .contain-main {
|
||||
margin-left: 58px
|
||||
}
|
||||
|
||||
.halo-comment .comment-meta {
|
||||
line-height: 1
|
||||
}
|
||||
|
||||
.halo-comment .comment-meta .useragent-info {
|
||||
margin-top: 6px;
|
||||
font-size: 10px;
|
||||
color: #657786
|
||||
}
|
||||
|
||||
.halo-comment .comment-author {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
.halo-comment .comment-author .author-name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #666
|
||||
}
|
||||
|
||||
.halo-comment .is-admin {
|
||||
margin-left: 4px;
|
||||
font-size: 14px;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.halo-comment .comment-time {
|
||||
display: inline-block;
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: #657786
|
||||
}
|
||||
|
||||
.halo-comment .comment-id {
|
||||
display: block;
|
||||
float: right;
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: #657786
|
||||
}
|
||||
|
||||
.halo-comment .comment-content {
|
||||
padding: 20px 20px 19px 0;
|
||||
font-size: 13px;
|
||||
color: #111
|
||||
}
|
||||
|
||||
.halo-comment .comment-content p {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.halo-comment .comment-content p img {
|
||||
width: 50%
|
||||
}
|
||||
|
||||
.halo-comment .comment-reply {
|
||||
display: none;
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
line-height: 1.5;
|
||||
background: #898c7b;
|
||||
-webkit-transition: all .2s ease-in-out;
|
||||
transition: all .2s ease-in-out
|
||||
}
|
||||
|
||||
.halo-comment .comment-reply a, .halo-comment .comment-reply a:hover {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.halo-comment .alert {
|
||||
-webkit-animation: top20 .5s;
|
||||
animation: top20 .5s;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
background-color: #f44336;
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity .6s;
|
||||
transition: opacity .6s;
|
||||
margin-bottom: 15px
|
||||
}
|
||||
|
||||
.halo-comment .alert.success {
|
||||
background-color: #4caf50
|
||||
}
|
||||
|
||||
.halo-comment .alert.info {
|
||||
background-color: #2196f3
|
||||
}
|
||||
|
||||
.halo-comment .alert.warning {
|
||||
background-color: #ff9800
|
||||
}
|
||||
|
||||
.halo-comment .alert .closebtn {
|
||||
margin-left: 15px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
float: right;
|
||||
font-size: 22px;
|
||||
line-height: 16px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: .3s;
|
||||
transition: .3s
|
||||
}
|
||||
|
||||
.halo-comment .alert .closebtn:hover {
|
||||
color: #000
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
.halo-comment .comment-reply {
|
||||
display: block
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes top20 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-20px);
|
||||
transform: translateY(-20px)
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes top20 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-20px);
|
||||
transform: translateY(-20px)
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0)
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bottom20 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(20px);
|
||||
transform: translateY(20px)
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bottom20 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(20px);
|
||||
transform: translateY(20px)
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0)
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="halo-comment" class="halo-comment">
|
||||
<section role="form" class="comment-editor">
|
||||
<div class="inner">
|
||||
<div class="commentator">
|
||||
<img src="https://pic.stackoverflow.wiki/uploadImages/123/113/181/232/2019/12/05/20/41/2740ebc7-da8d-4220-90c5-557f7151d7bc.png"
|
||||
class="avatar">
|
||||
</div>
|
||||
<form class="comment-form">
|
||||
<div class="author-info">
|
||||
<input type="text" tabindex="1" required="required" aria-required="true"
|
||||
id="boloUser" placeholder="你的昵称">
|
||||
<input type="text" tabindex="2" required="required" aria-required="true"
|
||||
id="boloSite" placeholder="你的个人主页URL（选填）">
|
||||
</div>
|
||||
<div class="comment-textarea">
|
||||
<textarea rows="3" placeholder="评论内容只能为 2 到 500 个字符！" id="comment"
|
||||
readonly="readonly"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<script type="text/javascript" src="${staticServePath}/js/bolo/sweetalert.min.js"></script>
|
||||
<ol class="comment-nodes" id="comments">
|
||||
<#list commentList as comment>
|
||||
<#include "common-comment.ftl"/>
|
||||
</#list>
|
||||
</ol>
|
||||
</div>
|
||||
</#if>
|
||||
</div>
|
||||
</#if>
|
||||
</#macro>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 667 KiB |
|
|
@ -0,0 +1,78 @@
|
|||
<#--
|
||||
|
||||
Bolo - A stable and beautiful blogging system based in Solo.
|
||||
Copyright (c) 2020, https://github.com/adlered
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
<div class="card widget">
|
||||
<div class="card-content">
|
||||
<h3 class="menu-label">
|
||||
${mostViewCountArticlesLabel}
|
||||
</h3>
|
||||
|
||||
<#list mostViewCountArticles as article>
|
||||
<article class="media">
|
||||
<#if article.articleImg1URL?? && article.articleImg1URL!=''>
|
||||
<a href="${servePath}${article.articlePermalink}" class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img class="thumbnail" src="${article.articleImg1URL!}" alt="${article.articleTitle!}">
|
||||
</p>
|
||||
</a>
|
||||
</#if>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<div style="padding-top: 10px;">
|
||||
|
||||
<div class="has-text-grey is-size-7 is-uppercase">
|
||||
${article.articleViewCount}浏览
|
||||
</div>
|
||||
</div>
|
||||
<a href="${servePath}${article.articlePermalink}"
|
||||
class="title has-link-black-ter is-size-6 has-text-weight-normal">${article.articleTitle!}</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</#list>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="card widget">
|
||||
<div class="card-content">
|
||||
<div class="menu">
|
||||
<h3 class="menu-label">
|
||||
${archiveLabel}
|
||||
</h3>
|
||||
<ul class="menu-list">
|
||||
<#list archiveDates as archiveDate>
|
||||
<li>
|
||||
<a class="level is-marginless"
|
||||
href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
|
||||
<span class="level-start">
|
||||
<span class="level-item">${archiveDate.archiveDateYear}
|
||||
${yearLabel}
|
||||
${archiveDate.archiveDateMonth}
|
||||
${monthLabel}</span>
|
||||
</span>
|
||||
<span class="level-end">
|
||||
<span class="level-item tag">${archiveDate.archiveDatePublishedArticleCount}</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</#list>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,261 @@
|
|||
<#--
|
||||
|
||||
Bolo - A stable and beautiful blogging system based in Solo.
|
||||
Copyright (c) 2020, https://github.com/adlered
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
<div
|
||||
class="column is-4-tablet is-4-desktop is-3-widescreen has-order-1 column-left <%= sticky_class(position) %>">
|
||||
<div class="card widget profile">
|
||||
<div class="card-content">
|
||||
<nav class="level">
|
||||
<div class="level-item has-text-centered" style="flex-shrink: 1">
|
||||
<div class="level">
|
||||
<figure class="image is-64x64 has-mb-6 level-left" style="margin: 0 auto">
|
||||
<img class="is-rounded" src="${adminUser.userAvatar!}" alt="${userName!}" style="padding: 2px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);">
|
||||
</figure>
|
||||
<div class="level-right">
|
||||
<div>
|
||||
<p class="title is-4" style="text-align: center">
|
||||
${blogTitle!}
|
||||
</p>
|
||||
<p class="is-size-6 is-block" style="text-align: center">
|
||||
${blogSubtitle!}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-item has-text-centered is-marginless">
|
||||
<div>
|
||||
<p class="heading">
|
||||
文章
|
||||
</p>
|
||||
<p class="title has-text-weight-normal">
|
||||
${statistic.statisticPublishedBlogArticleCount}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered is-marginless">
|
||||
<div>
|
||||
<p class="heading">
|
||||
评论
|
||||
</p>
|
||||
<p class="title has-text-weight-normal">
|
||||
${statistic.statisticPublishedBlogCommentCount}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered is-marginless">
|
||||
<div>
|
||||
<p class="heading">
|
||||
浏览
|
||||
</p>
|
||||
<p class="title has-text-weight-normal">
|
||||
${statistic.statisticBlogViewCount}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="level is-mobile">
|
||||
<#if usite??>
|
||||
<#if usite.usiteQQ !=''>
|
||||
<a class="level-item button is-marginless" target="_blank" title="QQ"
|
||||
href="tencent://message/?uin=${usite.usiteQQ}">
|
||||
<i class="fab fa-qq"></i>
|
||||
</a>
|
||||
</#if>
|
||||
<#if usite.usiteWeChat !=''>
|
||||
<span class="level-item button is-marginless" target="_blank" title="WeChat"
|
||||
onclick="javascript:alert('我的微信号：${usite.usiteWeChat}')">
|
||||
<i class="fab fa-weixin"></i>
|
||||
</span>
|
||||
</#if>
|
||||
<#if usite.usiteWeiBo !=''>
|
||||
<a class="level-item button is-marginless" target="_blank" title="Weibo"
|
||||
href="https://weibo.com/${usite.usiteWeiBo}">
|
||||
<i class="fab fa-weibo"></i>
|
||||
</a>
|
||||
</#if>
|
||||
<#if usite.usiteGitHub !=''>
|
||||
<a class="level-item button is-marginless" target="_blank" title="Github"
|
||||
href="https://github.com/${usite.usiteGitHub}">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
</#if>
|
||||
<#if usite.usiteTwitter !=''>
|
||||
<a class="level-item button is-marginless" target="_blank" title="Twitter"
|
||||
href="https://twitter.com/${usite.usiteTwitter}">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</#if>
|
||||
<#if usite.usiteFacebook !=''>
|
||||
<a class="level-item button is-marginless" target="_blank" title="Facebook"
|
||||
href="https://www.facebook.com/${usite.usiteFacebook}">
|
||||
<i class="fab fa-facebook"></i>
|
||||
</a>
|
||||
</#if>
|
||||
<#if usite.usiteTelegram !=''>
|
||||
<a class="level-item button is-marginless" target="_blank" title="Telegram"
|
||||
href="https://telegram.me/${usite.usiteTelegram}">
|
||||
<i class="fab fa-telegram"></i>
|
||||
</a>
|
||||
</#if>
|
||||
</#if>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card widget">
|
||||
<div class="card-content" style="width:100%">
|
||||
<div class="menu">
|
||||
<h3 class="menu-label">
|
||||
公告
|
||||
</h3>
|
||||
<ul class="menu-list">
|
||||
${noticeBoard}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card widget">
|
||||
<div class="card-content">
|
||||
<div class="menu">
|
||||
<h3 class="menu-label">
|
||||
${categoryLabel}
|
||||
</h3>
|
||||
<ul class="menu-list">
|
||||
<#list mostUsedCategories as category>
|
||||
<li>
|
||||
<a class="level is-marginless" href="${servePath}/category/${category.categoryURI}">
|
||||
<span class="level-start">
|
||||
<span class="level-item">${category.categoryTitle}</span>
|
||||
</span>
|
||||
<span class="level-end">
|
||||
<span class="level-item tag">${category.categoryPublishedArticleCount}</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</#list>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card widget">
|
||||
<div class="card-content">
|
||||
<div class="menu">
|
||||
<h3 class="menu-label">
|
||||
${tagLabel}
|
||||
</h3>
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<#list mostUsedTags as tag>
|
||||
<div class="control">
|
||||
<a class="tags has-addons" href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">
|
||||
<span class="tag">${tag.tagTitle}</span>
|
||||
<span class="tag is-grey">${tag.tagPublishedRefCount!}</span>
|
||||
</a>
|
||||
</div>
|
||||
</#list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card widget">
|
||||
<div class="card-content" style="width:100%">
|
||||
<div class="menu">
|
||||
<h3 class="menu-label">
|
||||
广告
|
||||
</h3>
|
||||
<ul class="menu-list">
|
||||
<!-- google广告 -->
|
||||
<ins class="adsbygoogle"
|
||||
style="display:inline-block;width:290px;height:500px"
|
||||
data-ad-client="ca-pub-1331219010215317"
|
||||
data-ad-slot="5542691247">
|
||||
</ins>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||
</script>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-right-shadow is-hidden-widescreen is-6-fullhd">
|
||||
<div class="card widget">
|
||||
<div class="card-content">
|
||||
<h3 class="menu-label">
|
||||
${mostViewCountArticlesLabel}
|
||||
</h3>
|
||||
|
||||
<#list mostViewCountArticles as article>
|
||||
<article class="media">
|
||||
<#if article.articleImg1URL?? && article.articleImg1URL!=''>
|
||||
<a href="${servePath}${article.articlePermalink}" class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img class="thumbnail" src="${article.articleImg1URL!}"
|
||||
alt="${article.articleTitle!}">
|
||||
</p>
|
||||
</a>
|
||||
</#if>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<div style="padding-top: 10px;">
|
||||
|
||||
<div class="has-text-grey is-size-7 is-uppercase">${article.articleViewCount}浏览
|
||||
</div>
|
||||
</div>
|
||||
<a href="${servePath}${article.articlePermalink}"
|
||||
class="title has-link-black-ter is-size-6 has-text-weight-normal">${article.articleTitle!}</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</#list>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="card widget">
|
||||
<div class="card-content">
|
||||
<div class="menu">
|
||||
<h3 class="menu-label">
|
||||
${archiveLabel}
|
||||
</h3>
|
||||
<ul class="menu-list">
|
||||
<#list archiveDates as archiveDate>
|
||||
<li>
|
||||
<a class="level is-marginless"
|
||||
href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
|
||||
<span class="level-start">
|
||||
<span class="level-item">${archiveDate.archiveDateYear} ${yearLabel}
|
||||
${archiveDate.archiveDateMonth} ${monthLabel}</span>
|
||||
</span>
|
||||
<span class="level-end">
|
||||
<span
|
||||
class="level-item tag">${archiveDate.archiveDatePublishedArticleCount}</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</#list>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
#
|
||||
# Bolo - A stable and beautiful blogging system based in Solo.
|
||||
# Copyright (c) 2020, https://github.com/adlered
|
||||
#
|
||||
# This program is free software: you can redistribute it and/or modify
|
||||
# it under the terms of the GNU Affero General Public License as published by
|
||||
# the Free Software Foundation, either version 3 of the License, or
|
||||
# (at your option) any later version.
|
||||
#
|
||||
# This program is distributed in the hope that it will be useful,
|
||||
# but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
# GNU Affero General Public License for more details.
|
||||
#
|
||||
# You should have received a copy of the GNU Affero General Public License
|
||||
# along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
#
|
||||
|
||||
name=solo-fantastic
|
||||
memo=https://github.com/InkDP/solo-nexmoe
|
||||
|
|
@ -0,0 +1,510 @@
|
|||
<#--
|
||||
|
||||
Bolo - A stable and beautiful blogging system based in Solo.
|
||||
Copyright (c) 2020, https://github.com/adlered
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
<style>
|
||||
:root {
|
||||
--color: #333333;
|
||||
--background: #f7f7f7;
|
||||
--cardbgcolor: #fff;
|
||||
--cardcolor: #333;
|
||||
--cardtitlecolor: #333333;
|
||||
--navbarcolor: #333333;
|
||||
--navbarbgcolor: rgba(255, 255, 255, 0.7);
|
||||
--img-default-filter: none;
|
||||
--img-hover-filter: none;
|
||||
--btn-bg-color: whitesmoke;
|
||||
--btn-color: #333333;
|
||||
--btn-hover-color: #eeeeee;
|
||||
--link-color: #1485FE;
|
||||
--link-hover-color: #1485FE;
|
||||
|
||||
/*code highlight*/
|
||||
--code-bg-color: #F1F3F3;
|
||||
--code-default-color: #A2A1A1;
|
||||
--code-line-numbers-bg-color: #EBEDED;
|
||||
--code-line-numbers-color: #888;
|
||||
|
||||
--code-keyworks-color: #7012cc;
|
||||
--code-class-color: #f2777a;
|
||||
--code-cdata-color: hsl(313, 67%, 36%);
|
||||
--code-symbol-color: hsl(33, 83%, 45%);
|
||||
--code-variable-color: hsl(281, 89%, 64%);
|
||||
--code-regex-color: #e90;
|
||||
--code-deleted-color: red;
|
||||
--code-toolbar-bg-color: #EBEDED;
|
||||
--code-toolbar-color: #1485FE;
|
||||
--code-line-numbers-rows-color: #888;
|
||||
/*toc*/
|
||||
--toc-dot-color: #1485FE;
|
||||
--toc-dot-active-color: #1485FE;
|
||||
--toc-dot-active-bg-color: #ebedef;
|
||||
--toc-vertical-line-color: #1485FE;
|
||||
--toc-item-bg-hover: #1485FE;
|
||||
}
|
||||
|
||||
<#if settings.auto_theme!true>
|
||||
/*light theme*/
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--color: #333333;
|
||||
--background: #f7f7f7;
|
||||
--cardbgcolor: #fff;
|
||||
--cardcolor: #333;
|
||||
--cardtitlecolor: #333333;
|
||||
--navbarcolor: #333333;
|
||||
--navbarbgcolor: rgba(255, 255, 255, 0.7);
|
||||
--img-default-filter: none;
|
||||
--img-hover-filter: none;
|
||||
--btn-bg-color: whitesmoke;
|
||||
--btn-color: #333333;
|
||||
--btn-hover-color: #eeeeee;
|
||||
--link-color: #1485FE;
|
||||
--link-hover-color: #1485FE;
|
||||
|
||||
/*code highlight*/
|
||||
--code-bg-color: #F1F3F3;
|
||||
--code-default-color: #A2A1A1;
|
||||
--code-line-numbers-bg-color: #EBEDED;
|
||||
--code-line-numbers-color: #888;
|
||||
|
||||
--code-keyworks-color: #7012cc;
|
||||
--code-class-color: #f2777a;
|
||||
--code-cdata-color: hsl(313, 67%, 36%);
|
||||
--code-symbol-color: hsl(33, 83%, 45%);
|
||||
--code-variable-color: hsl(281, 89%, 64%);
|
||||
--code-regex-color: #e90;
|
||||
--code-deleted-color: red;
|
||||
--code-toolbar-bg-color: #EBEDED;
|
||||
--code-toolbar-color: #1485FE;
|
||||
--code-line-numbers-rows-color: #888;
|
||||
/*toc*/
|
||||
--toc-dot-color: #1485FE;
|
||||
--toc-dot-active-color: #1485FE;
|
||||
--toc-dot-active-bg-color: #ebedef;
|
||||
--toc-vertical-line-color: #1485FE;
|
||||
--toc-item-bg-hover: #1485FE;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color: #CCC;
|
||||
--background: #2c2a2a !important;
|
||||
--cardbgcolor: #343232 !important;
|
||||
--cardcolor: #bcbcbc;
|
||||
--cardtitlecolor: #bcbcbc;
|
||||
--navbarcolor: #bcbcbc;
|
||||
--navbarbgcolor: rgba(52, 50, 50, 0.7);
|
||||
/*--img-default-filter: grayscale(100%);*/
|
||||
img-default-filter: none;
|
||||
--img-hover-filter: none;
|
||||
--btn-bg-color: #2c2a2a;
|
||||
--btn-color: #bcbcbc;
|
||||
--btn-hover-color: #3B3C3E;
|
||||
--link-color: #1485FE;
|
||||
--link-hover-color: #1485FE;
|
||||
|
||||
/*code highlight*/
|
||||
--code-bg-color: #2c2a2a;
|
||||
--code-default-color: #A2A1A1;
|
||||
--code-line-numbers-bg-color: #403E3E;
|
||||
--code-line-numbers-color: #888;
|
||||
|
||||
--code-keyworks-color: #c9c;
|
||||
--code-class-color: #f2777a;
|
||||
--code-cdata-color: hsl(313, 67%, 36%);
|
||||
--code-symbol-color: hsl(33, 83%, 45%);
|
||||
--code-variable-color: hsl(281, 89%, 64%);
|
||||
--code-regex-color: #e90;
|
||||
--code-deleted-color: red;
|
||||
--code-toolbar-bg-color: #454545;
|
||||
--code-toolbar-color: #fff;
|
||||
--code-line-numbers-rows-color: #888;
|
||||
|
||||
/*toc*/
|
||||
--toc-dot-color: #1485FE;
|
||||
--toc-dot-active-bg-color: rgba(255, 255, 255, 0.2);
|
||||
--toc-dot-active-color: #1485FE;
|
||||
--toc-vertical-line-color: #888;
|
||||
--toc-bg-bg-hover: #321;
|
||||
}
|
||||
}
|
||||
|
||||
<#else>
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--color: #333333;
|
||||
--background: #f7f7f7;
|
||||
--cardbgcolor: #fff;
|
||||
--cardcolor: #333;
|
||||
--cardtitlecolor: #333333;
|
||||
--navbarcolor: #333333;
|
||||
--navbarbgcolor: rgba(255, 255, 255, 0.7);
|
||||
--img-default-filter: none;
|
||||
--img-hover-filter: none;
|
||||
--btn-bg-color: whitesmoke;
|
||||
--btn-color: #333333;
|
||||
--btn-hover-color: #eeeeee;
|
||||
--link-color: #1485FE;
|
||||
--link-hover-color: #1485FE;
|
||||
|
||||
/*code highlight*/
|
||||
--code-bg-color: #F1F3F3;
|
||||
--code-default-color: #A2A1A1;
|
||||
--code-line-numbers-bg-color: #EBEDED;
|
||||
--code-line-numbers-color: #888;
|
||||
|
||||
--code-keyworks-color: #7012cc;
|
||||
--code-class-color: #f2777a;
|
||||
--code-cdata-color: hsl(313, 67%, 36%);
|
||||
--code-symbol-color: hsl(33, 83%, 45%);
|
||||
--code-variable-color: hsl(281, 89%, 64%);
|
||||
--code-regex-color: #e90;
|
||||
--code-deleted-color: red;
|
||||
--code-toolbar-bg-color: #EBEDED;
|
||||
--code-toolbar-color: #1485FE;
|
||||
--code-line-numbers-rows-color: #888;
|
||||
/*toc*/
|
||||
--toc-dot-color: #1485FE;
|
||||
--toc-dot-active-color: #1485FE;
|
||||
--toc-dot-active-bg-color: #ebedef;
|
||||
--toc-vertical-line-color: #1485FE;
|
||||
--toc-item-bg-hover: #1485FE;
|
||||
}
|
||||
}
|
||||
|
||||
</#if>
|
||||
/* Light mode */
|
||||
|
||||
|
||||
html {
|
||||
background: var(--background);
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
body > .footer, body > .navbar {
|
||||
background-color: var(--cardbgcolor);
|
||||
color: var(--cardcolor);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
.content a {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
.content a:hover {
|
||||
color: var(--link-hover-color);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--cardbgcolor);
|
||||
color: var(--cardcolor);
|
||||
}
|
||||
|
||||
.card .card-image img,
|
||||
img.thumbnail {
|
||||
filter: var(--img-default-filter);
|
||||
}
|
||||
|
||||
.card .card-image img:hover,
|
||||
img.thumbnail:hover {
|
||||
filter: var(--img-hover-filter);
|
||||
}
|
||||
|
||||
.card .title {
|
||||
color: var(--color) !important;
|
||||
}
|
||||
|
||||
.navbar-dropdown {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
pre,
|
||||
blockquote {
|
||||
background-color: var(--code-bg-color) !important;
|
||||
color: var(--color) !important;
|
||||
}
|
||||
|
||||
.card .content,
|
||||
/*.card .title a{*/
|
||||
/* color: var(--cardtitlecolor) !important;*/
|
||||
/*}*/
|
||||
.pagination .pagination-link:not(.is-current),
|
||||
.pagination .pagination-previous,
|
||||
.pagination .pagination-next {
|
||||
background-color: var(--cardbgcolor);
|
||||
color: var(--cardcolor);
|
||||
}
|
||||
|
||||
.navbar-item, .navbar-link,
|
||||
.navbar-main .navbar-item .sub-menu {
|
||||
color: var(--navbarcolor);
|
||||
|
||||
}
|
||||
|
||||
.has-link-black-ter {
|
||||
color: var(--cardtitlecolor) !important;
|
||||
}
|
||||
|
||||
|
||||
.button {
|
||||
background-color: var(--btn-bg-color) !important;
|
||||
color: var(--btn-color) !important;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: var(--btn-hover-color) !important;
|
||||
}
|
||||
|
||||
body > footer > div > div > div.level-end > div > a > i {
|
||||
background-color: transparent;
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
.level .level-item.button {
|
||||
background-color: var(--cardbgcolor) !important;
|
||||
border-color: var(--cardbgcolor) !important;
|
||||
color: var(--color) !important;
|
||||
}
|
||||
|
||||
.menu-list .level {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
|
||||
.menu-list a:hover {
|
||||
background-color: var(--background);
|
||||
opacity: 0.6;
|
||||
color: var(--link-hover-color);
|
||||
}
|
||||
|
||||
.tag:not(body) {
|
||||
background-color: var(--background) !important;
|
||||
color: var(--color) !important;
|
||||
}
|
||||
|
||||
.content .tag {
|
||||
background-color: transparent !important;
|
||||
color: var(--code-class-color) !important;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
h7,
|
||||
strong {
|
||||
color: var(--color) !important;
|
||||
}
|
||||
|
||||
.is-active a {
|
||||
color: var(--color) !important;
|
||||
}
|
||||
|
||||
a.navbar-item:hover {
|
||||
background-color: var(--cardbgcolor);
|
||||
color: #3273dc;
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--color);
|
||||
background-color: var(--code-bg-color)
|
||||
}
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: var(--color);
|
||||
background-color: var(--code-bg-color) !important;
|
||||
}
|
||||
|
||||
pre[class*="language-"],
|
||||
:not(pre) > code[class*="language-"] {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"] {
|
||||
border: red;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: var(--code-cdata-color);
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
color: var(--code-symbol-color);
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: var(--code-class-color);
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: var(--code-variable-color);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: var(--code-keyworks-color);
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: var(--code-regex-color);
|
||||
}
|
||||
|
||||
.token.deleted {
|
||||
color: var(--code-deleted-color);
|
||||
}
|
||||
|
||||
|
||||
.line-numbers .line-numbers-rows {
|
||||
background-color: var(--code-line-numbers-bg-color) !important;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
color: var(--code-line-numbers-color) !important;
|
||||
}
|
||||
|
||||
.line-highlight {
|
||||
background: rgba(21, 21, 21, 0.2) !important;
|
||||
background: -webkit-linear-gradient(left, rgba(21, 21, 21, 0.2) 70%, rgba(21, 21, 21, 0)) !important;
|
||||
background: linear-gradient(to right, rgba(21, 21, 21, 0.2) 70%, rgba(21, 21, 21, 0)) !important;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar a,
|
||||
div.code-toolbar > .toolbar button,
|
||||
div.code-toolbar > .toolbar span {
|
||||
background: var(--code-toolbar-bg-color) !important;
|
||||
/*box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);*/
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar a:hover,
|
||||
div.code-toolbar > .toolbar a:focus,
|
||||
div.code-toolbar > .toolbar button:hover,
|
||||
div.code-toolbar > .toolbar button:focus,
|
||||
div.code-toolbar > .toolbar span:hover,
|
||||
div.code-toolbar > .toolbar span:focus {
|
||||
color: var(--code-toolbar-color) !important;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
color: var(--code-line-numbers-rows-color);
|
||||
}
|
||||
|
||||
.content table thead td,
|
||||
.content table thead th {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
#toc ul li a,
|
||||
#toc ul li ul li a,
|
||||
#toc ul li ul li ul li a {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
#toc .active {
|
||||
color: var(--toc-dot-active-color) !important;
|
||||
}
|
||||
|
||||
#toc > ul li::before {
|
||||
background-color: var(--toc-dot-color)
|
||||
}
|
||||
|
||||
#toc a:hover {
|
||||
color: var(--toc-dot-active-color) !important;
|
||||
background-color: var(--toc-dot-active-bg-color);
|
||||
}
|
||||
|
||||
#toc > ul:before {
|
||||
background-color: var(--toc-vertical-line-color);
|
||||
}
|
||||
|
||||
|
||||
.navbar-burger {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
background-color: var(--cardbgcolor);
|
||||
}
|
||||
|
||||
body > .navbar {
|
||||
background-color: var(--navbarbgcolor);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.content table thead td,
|
||||
.content table thead th {
|
||||
border: 1px solid var(--background);
|
||||
|
||||
}
|
||||
|
||||
.content table td,
|
||||
.content table th {
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
table {
|
||||
border: 2px solid var(--btn-hover-color);
|
||||
}
|
||||
|
||||
thead, tbody, tr, th {
|
||||
border: 1px solid var(--background);
|
||||
}
|
||||
|
||||
footer .title {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
footer .button {
|
||||
background-color: var(--cardbgcolor) !important;
|
||||
}
|
||||
|
||||
.has-text-black-ter {
|
||||
color: var(--color) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<#--
|
||||
|
||||
Bolo - A stable and beautiful blogging system based in Solo.
|
||||
Copyright (c) 2020, https://github.com/adlered
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
<#-- Solo - A small and beautiful blogging system written in Java. Copyright (c) 2010-present, b3log.org This program is
|
||||
free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
|
||||
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
|
||||
warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
|
||||
details. You should have received a copy of the GNU Affero General Public License along with this program. If not,
|
||||
see <https://www.gnu.org/licenses/>. -->
|
||||
<#include "../../common-template/macro-common_head.ftl">
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<@head title="${tag.tagTitle} ${tagLabel} - ${blogTitle}">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7.5/css/bulma.min.css"/>
|
||||
<link rel="stylesheet" href="https://ftp.stackoverflow.wiki/bolo/fantastic/css/all.min.css">
|
||||
<link rel="stylesheet"
|
||||
href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css">
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js'></script>
|
||||
</@head>
|
||||
<#-- <#include "style.theme.ftl"> -->
|
||||
</head>
|
||||
|
||||
<body class="is-3-column">
|
||||
<#include "header.ftl">
|
||||
<div class="card-normal">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
|
||||
<div class="column is-8-tablet is-8-desktop is-9-widescreen is-9-fullhd has-order-2 column-main"
|
||||
style="margin-left: 10px">
|
||||
<div class="columns">
|
||||
<div
|
||||
class="column is-12-tablet is-12-desktop is-12-widescreen has-order-2 column-main">
|
||||
<div class="level">
|
||||
<div class="columns" style="width:100%">
|
||||
<div
|
||||
class="column is-12-tablet is-12-desktop is-8-widescreen is-8-fullhd has-order-2 column-main">
|
||||
<#include "article-list.ftl">
|
||||
</div>
|
||||
<div
|
||||
class="column is-4-tablet is-4-desktop is-hidden-touch is-hidden-desktop-only is-4-widescreen is-4-fullhd has-order-3 column-right <%= sticky_class(position) %>">
|
||||
<#include "side-right.ftl">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<#include "side.ftl">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<a id="back-to-top" title="返回顶部" href="javascript:"><i class="fas fa-chevron-up"></i></a>
|
||||
<#include "footer.ftl">
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<#--
|
||||
|
||||
Bolo - A stable and beautiful blogging system based in Solo.
|
||||
Copyright (c) 2020, https://github.com/adlered
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
<#-- Solo - A small and beautiful blogging system written in Java. Copyright (c) 2010-present, b3log.org This program is
|
||||
free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
|
||||
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
|
||||
warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
|
||||
details. You should have received a copy of the GNU Affero General Public License along with this program. If not,
|
||||
see <https://www.gnu.org/licenses/>. -->
|
||||
<#include "../../common-template/macro-common_head.ftl">
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<@head title="${allTagsLabel} - ${blogTitle}">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7.5/css/bulma.min.css"/>
|
||||
<link rel="stylesheet" href="https://ftp.stackoverflow.wiki/bolo/fantastic/css/all.min.css">
|
||||
<link rel="stylesheet"
|
||||
href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css">
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js'></script>
|
||||
</@head>
|
||||
<#-- <#include "style.theme.ftl"> -->
|
||||
</head>
|
||||
|
||||
<body class="is-3-column">
|
||||
<#include "header.ftl">
|
||||
|
||||
<div class="card-normal">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
|
||||
<div class="column is-8-tablet is-8-desktop is-9-widescreen is-9-fullhd has-order-2 column-main"
|
||||
style="margin-left: 10px">
|
||||
<div class="columns">
|
||||
<div
|
||||
class="column is-12-tablet is-12-desktop is-12-widescreen has-order-2 column-main">
|
||||
<div class="level">
|
||||
<div class="columns">
|
||||
<div
|
||||
class="column is-12-tablet is-12-desktop is-8-widescreen is-8-fullhd has-order-2 column-main">
|
||||
<div class="card widget">
|
||||
<div class="card-content">
|
||||
<h3 class="menu-label">
|
||||
${categoryLabel}
|
||||
</h3>
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<#list mostUsedCategories as category>
|
||||
<div class="control">
|
||||
<a class="tags has-addons"
|
||||
href="${servePath}/category/${category.categoryURI}">
|
||||
<span
|
||||
class="tag">${category.categoryTitle}</span>
|
||||
<span
|
||||
class="tag is-grey">${category.categoryTagCnt}
|
||||
${articleLabel}</span>
|
||||
</a>
|
||||
</div>
|
||||
</#list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card widget">
|
||||
<div class="card-content">
|
||||
<h3 class="menu-label">
|
||||
标签云
|
||||
</h3>
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<#list tags as tag>
|
||||
<a href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}"
|
||||
style="font-size:<#if tag.tagTitle?length gt 7> ${tag.tagPublishedRefCount+(tag.tagTitle?length)}<#else>${tag.tagPublishedRefCount+(tag.tagTitle?length)*2}</#if>px"> ${tag.tagTitle}</a>
|
||||
</#list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="column is-4-tablet is-4-desktop is-hidden-touch is-hidden-desktop-only is-4-widescreen is-4-fullhd has-order-3 column-right <%= sticky_class(position) %>">
|
||||
<#include "side-right.ftl">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<#include "side.ftl">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<a id="back-to-top" title="返回顶部" href="javascript:"><i class="fas fa-chevron-up"></i></a>
|
||||
<#include "footer.ftl">
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,328 @@
|
|||
<#--
|
||||
|
||||
Bolo - A stable and beautiful blogging system based in Solo.
|
||||
Copyright (c) 2020, https://github.com/adlered
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
<div>
|
||||
<div id="toc"></div>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
|
||||
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
// initToc()
|
||||
// function initToc() {
|
||||
// var toc = $(".post-article ul").first();
|
||||
// $("#toc").html(toc);
|
||||
// initRelationship()
|
||||
// tocFixed()
|
||||
// }
|
||||
$(document).ready(function () {
|
||||
$('#toc').html('');
|
||||
|
||||
var postDirectoryBuild = function () {
|
||||
var postChildren = function children(childNodes, reg) {
|
||||
var result = [],
|
||||
isReg = typeof reg === 'object',
|
||||
isStr = typeof reg === 'string',
|
||||
node, i, len;
|
||||
for (i = 0, len = childNodes.length; i < len; i++) {
|
||||
node = childNodes[i];
|
||||
if ((node.nodeType === 1 || node.nodeType === 9) &&
|
||||
(!reg ||
|
||||
isReg && reg.test(node.tagName.toLowerCase()) ||
|
||||
isStr && node.tagName.toLowerCase() === reg)) {
|
||||
result.push(node);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
createPostDirectory = function (article, directory, isDirNum) {
|
||||
|
||||
var contentArr = [],
|
||||
titleId = [],
|
||||
levelArr, root, level,
|
||||
currentList, list, li, link, i, len;
|
||||
levelArr = (function (article, contentArr, titleId) {
|
||||
var titleElem = postChildren(article.childNodes, /^h\d$/),
|
||||
levelArr = [],
|
||||
lastNum = 1,
|
||||
lastRevNum = 1,
|
||||
count = 0,
|
||||
guid = 1,
|
||||
id = 'directory' + (Math.random() + '').replace(/\D/, ''),
|
||||
lastRevNum, num, elem;
|
||||
while (titleElem.length) {
|
||||
elem = titleElem.shift();
|
||||
contentArr.push(elem.innerHTML);
|
||||
num = +elem.tagName.match(/\d/)[0];
|
||||
if (num > lastNum) {
|
||||
levelArr.push(1);
|
||||
lastRevNum += 1;
|
||||
} else if (num === lastRevNum ||
|
||||
num > lastRevNum && num <= lastNum) {
|
||||
levelArr.push(0);
|
||||
lastRevNum = lastRevNum;
|
||||
} else if (num < lastRevNum) {
|
||||
levelArr.push(num - lastRevNum);
|
||||
lastRevNum = num;
|
||||
}
|
||||
count += levelArr[levelArr.length - 1];
|
||||
lastNum = num;
|
||||
elem.id = elem.id || (id + guid++);
|
||||
titleId.push(elem.id);
|
||||
}
|
||||
if (count !== 0 && levelArr[0] === 1) levelArr[0] = 0;
|
||||
|
||||
return levelArr;
|
||||
})(article, contentArr, titleId);
|
||||
currentList = root = document.createElement('ul');
|
||||
dirNum = [0];
|
||||
for (i = 0, len = levelArr.length; i < len; i++) {
|
||||
level = levelArr[i];
|
||||
if (level === 1) {
|
||||
list = document.createElement('ul');
|
||||
if (!currentList.lastElementChild) {
|
||||
currentList.appendChild(document.createElement('li'));
|
||||
}
|
||||
currentList.lastElementChild.appendChild(list);
|
||||
currentList = list;
|
||||
dirNum.push(0);
|
||||
} else if (level < 0) {
|
||||
level *= 2;
|
||||
while (level++) {
|
||||
if (level % 2) dirNum.pop();
|
||||
currentList = currentList.parentNode;
|
||||
}
|
||||
}
|
||||
dirNum[dirNum.length - 1]++;
|
||||
li = document.createElement('li');
|
||||
link = document.createElement('a');
|
||||
link.href = '#' + titleId[i];
|
||||
link.innerHTML = !isDirNum ? contentArr[i] :
|
||||
dirNum.join('.') + ' ' + contentArr[i];
|
||||
li.appendChild(link);
|
||||
currentList.appendChild(li);
|
||||
}
|
||||
directory.appendChild(root);
|
||||
};
|
||||
createPostDirectory(document.getElementById('post-article'), document.getElementById('toc'), false);
|
||||
};
|
||||
|
||||
//建立关联关系
|
||||
function initRelationship() {
|
||||
var win = $(window);
|
||||
var anchors = $('#toc').find('a');
|
||||
var offset = 200; //偏移量看情况调
|
||||
win.on('scroll', function () {
|
||||
var scrollTop = win.scrollTop();
|
||||
anchors.each(function (i, v) {
|
||||
var that = $(v);
|
||||
var id = that.attr('href');
|
||||
var target = $(id);
|
||||
|
||||
if (scrollTop >= target.offset().top - offset) {
|
||||
anchors.removeClass('active');
|
||||
anchors.parent().removeClass("lit-active");
|
||||
that.addClass('active');
|
||||
that.parent().addClass("lit-active");
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
postDirectoryBuild();
|
||||
initRelationship();
|
||||
|
||||
|
||||
var dir = $("#toc");
|
||||
var postdiv = $(".article-content");
|
||||
var offsetLength = dir.offset().top;
|
||||
$(document).scroll(function () {
|
||||
var distance = offsetLength - $(window).scrollTop();
|
||||
|
||||
if (distance <= 0) {
|
||||
if (!dir.hasClass('directory-fixed')) {
|
||||
dir.addClass('directory-fixed');
|
||||
}
|
||||
} else if (distance > 0) {
|
||||
if (dir.hasClass('directory-fixed')) {
|
||||
dir.removeClass('directory-fixed');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function initRelationship() {
|
||||
var win = $(window);
|
||||
var anchors = $('#toc').find('a');
|
||||
var offset = 200; //偏移量看情况调
|
||||
win.on('scroll', function () {
|
||||
var scrollTop = win.scrollTop();
|
||||
anchors.each(function (i, v) {
|
||||
var that = $(v);
|
||||
var id = that.attr('href');
|
||||
var target = $(id);
|
||||
|
||||
if (scrollTop >= target.offset().top - offset) {
|
||||
anchors.removeClass('active');
|
||||
anchors.parent().removeClass("lit-active");
|
||||
that.addClass('active');
|
||||
that.parent().addClass("lit-active");
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function tocFixed() {
|
||||
var dir = $("#toc");
|
||||
var postdiv = $(".article-content");
|
||||
var offsetLength = dir.offset().top;
|
||||
$(document).scroll(function () {
|
||||
var distance = offsetLength - $(window).scrollTop();
|
||||
|
||||
if (distance <= 0) {
|
||||
if (!dir.hasClass('directory-fixed')) {
|
||||
dir.addClass('directory-fixed');
|
||||
}
|
||||
} else if (distance > 0) {
|
||||
if (dir.hasClass('directory-fixed')) {
|
||||
dir.removeClass('directory-fixed');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
#toc {
|
||||
/*position: fixed;*/
|
||||
/*left: 44%;*/
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
/*width: 260px;*/
|
||||
/*margin-left: 330px;*/
|
||||
}
|
||||
|
||||
.toc-fixed {
|
||||
position: fixed;
|
||||
z-index: 0;
|
||||
left: 50%;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
width: 260px;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
#toc > ul:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
opacity: .2;
|
||||
z-index: 1;
|
||||
|
||||
}
|
||||
|
||||
#toc li, #toc ul {
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
padding-top: 0.3rem;
|
||||
}
|
||||
|
||||
#toc > ul {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
#toc > ul li::before {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: -2px;
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
z-index: 100;
|
||||
opacity: 0.5;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#toc > ul > li:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lit-active::before {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
#toc > ul > li > a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#toc ul li a {
|
||||
display: inline-table;
|
||||
white-space: -moz-pre-wrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#toc ul li a {
|
||||
margin-left: -5px;
|
||||
white-space: nowrap;
|
||||
width: 200px;
|
||||
padding-left: 15px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
#toc ul li ul li a {
|
||||
margin-left: -15px;
|
||||
white-space: nowrap;
|
||||
width: 200px;
|
||||
padding-left: 30px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#toc ul li ul li ul li a {
|
||||
display: inline-block;
|
||||
margin-left: -15px;
|
||||
padding-left: 35px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
|
||||
.directory-fixed {
|
||||
position: fixed;
|
||||
top: 0rem;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue