yexuejc/solo-skins
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

🎉 https://github.com/b3log/solo/issues/12805

Browse Source
This commit is contained in:
Van
2019-07-09 16:01:57 +08:00
parent ca0de62bdd
commit d7e7b8da21
52 changed files with 1865 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
Bubble/archive-articles.ftl Normal file
View File

@@ -0,0 +1,51 @@
<#--
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="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
</@head>
</head>
<body class="fn__flex-column">
<div id="pjax" class="fn__flex-1">
<#if pjax><!---- pjax {#pjax} start ----></#if>
<#include "macro-header.ftl">
<@header type='other'></@header>
<div class="wrapper other">
<h2 class="other__title">
<a href="${servePath}/archives.html" class="ft__a">${archiveLabel}</a> -
<#if "en" == localeString?substring(0, 2)>
${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear}
<#else>
${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}
</#if>
</h2>
<div class="other__meta other__meta--list">
${archiveDate.archiveDatePublishedArticleCount} ${cntArticleLabel}
</div>
<#include "article-list.ftl">
</div>
<#if pjax><!---- pjax {#pjax} end ----></#if>
</div>
<#include "footer.ftl">
</body>
</html>

63
Bubble/archives.ftl Normal file
View File

@@ -0,0 +1,63 @@
<#--
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="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
</@head>
</head>
<body class="fn__flex-column">
<div id="pjax" class="fn__flex-1">
<#if pjax><!---- pjax {#pjax} start ----></#if>
<#include "macro-header.ftl">
<@header type='other'></@header>
<div class="wrapper other">
<h2 class="other__title"><a href="${servePath}" class="ft__a">${blogTitle}</a> - ${archiveLabel}</h2>
<div class="other__meta">
${archiveDates?size} ${cntMonthLabel}
${statistic.statisticPublishedBlogArticleCount} ${cntArticleLabel}
</div>
<div class="other__content">
<#if 0 != archiveDates?size>
<#list archiveDates as archiveDate>
<div class="other__item other__item--archive">
<a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
<#if "en" == localeString?substring(0, 2)>
${archiveDate.monthName} ${archiveDate.archiveDateYear}
<#else>
${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}
</#if>
</a>
<span>
${archiveDate.archiveDatePublishedArticleCount}
${cntArticleLabel}
</span>
</div>
</#list>
</#if>
</div>
</div>
<#if pjax><!---- pjax {#pjax} end ----></#if>
</div>
<#include "footer.ftl">
</body>
</html>

107
Bubble/article-list.ftl Normal file
View File

@@ -0,0 +1,107 @@
<#--
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/>.
-->
<div class="articles">
<#list articles as article>
<article class="item<#if article_index % 6 ==0> item--large</#if>">
<a href="${servePath}${article.articlePermalink}" class="item__cover"
style="background-image: url(${article.articleImg1URL})">
</a>
<div class="item__main">
<#list article.articleTags?split(",") as articleTag>
<#if articleTag_index == 0>
<#if article.category??>
<a class="item__tag"
href="${servePath}/category/${article.category.categoryURI}">${article.category.categoryTitle}</a>
<#else>
<a rel="tag" class="item__tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
${articleTag}
</a>
</#if>
</#if>
</#list>
<h2 class="item__title">
<a rel="bookmark" href="${servePath}${article.articlePermalink}">
${article.articleTitle}
</a>
<#if article.articlePutTop>
<sup>
${topArticleLabel}
</sup>
</#if>
<#if article.hasUpdated>
<sup>
${updatedLabel}
</sup>
</#if>
</h2>
<a class="item__abstract" pjax-title="${article.articleTitle}"
href="${servePath}${article.articlePermalink}">
<#if article.articleAbstractText?length gt 80>
${article.articleAbstractText[0..80]}
<#else>
${article.articleAbstractText}
</#if>
</a>
<div class="fn__clear">
<a href="${servePath}/authors/${article.authorId}"
aria-label="${article.authorName}"
class="vditor-tooltipped vditor-tooltipped__n item__avatar">
<img src="${article.authorThumbnailURL}" />
</a>
<#if article.articleCommentCount != 0>
<a class="item__meta" href="${servePath}${article.articlePermalink}#comments">
${article.articleCommentCount} ${commentLabel}
</a>
<#else>
<a class="item__meta" href="${servePath}${article.articlePermalink}">
${article.articleViewCount} ${viewLabel}
</a>
</#if>
</div>
</div>
</article>
</#list>
</div>
<#if 0 != paginationPageCount>
<nav class="pagination">
<#if 1 != paginationPageNums?first>
<a href="${servePath}${path}?p=${paginationPreviousPageNum}"
aria-label="${previousPageLabel}"
class="pagination__item vditor-tooltipped__n vditor-tooltipped">&laquo;</a>
<a class="pagination__item" href="${servePath}${path}">1</a>
<span class="pagination__item pagination__item--omit">...</span>
</#if>
<#list paginationPageNums as paginationPageNum>
<#if paginationPageNum == paginationCurrentPageNum>
<span class="pagination__item pagination__item--active">${paginationPageNum}</span>
<#else>
<a class="pagination__item" href="${servePath}${path}?p=${paginationPageNum}">${paginationPageNum}</a>
</#if>
</#list>
<#if paginationPageNums?last != paginationPageCount>
<span class="pagination__item pagination__item--omit">...</span>
<a href="${servePath}${path}?p=${paginationPageCount}" class="pagination__item">${paginationPageCount}</a>
<a href="${servePath}${path}?p=${paginationNextPageNum}" aria-label="${nextPagePabel}"
class="pagination__item vditor-tooltipped__n vditor-tooltipped">&raquo;</a>
</#if>
</nav>
</#if>

122
Bubble/article.ftl Normal file
View File

@@ -0,0 +1,122 @@
<#--
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="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
<#if previousArticlePermalink??>
<link rel="prev" title="${previousArticleTitle}" href="${servePath}${previousArticlePermalink}">
</#if>
<#if nextArticlePermalink??>
<link rel="next" title="${nextArticleTitle}" href="${servePath}${nextArticlePermalink}">
</#if>
</@head>
</head>
<body class="fn__flex-column">
<div id="pjax" class="fn__flex-1">
<#if pjax><!---- pjax {#pjax} start ----></#if>
<#include "macro-header.ftl">
<@header type="article"></@header>
<div class="article__top">
<div class="fn__clear">
<div class="toc fn__none" onclick="$('.post__toc').slideToggle()">${tocLabel}</div>
<div class="title fn__pointer" onclick="Util.goTop()">${article.articleTitle}</div>
<#include "../../common-template/share.ftl">
</div>
<progress class="article__progress"></progress>
</div>
<div class="article">
<div class="ft__center">
<div class="item__meta">
<time>
${article.articleCreateDate?string("yyyy-MM-dd")}
</time>
/
<#list article.articleTags?split(",") as articleTag>
<a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">${articleTag}</a> &nbsp;
</#list>
</div>
<h2 class="item__title">
${article.articleTitle}
<#if article.articlePutTop>
<sup>
${topArticleLabel}
</sup>
</#if>
<#if article.hasUpdated>
<sup>
${updatedLabel}
</sup>
</#if>
</h2>
</div>
<div class="item__cover" style="background-image: url(${article.articleImg1URL})"></div>
<section class="vditor-reset item__content item__content--article wrapper">
${article.articleContent}
<#if "" != article.articleSign.signHTML?trim>
<div>
${article.articleSign.signHTML}
</div>
</#if>
</section>
</div>
<#if article?? && article.articleToC?? && article.articleToC?size &gt; 0>
<div class="post__toc">
<#include "../../common-template/toc.ftl"/>
</div>
</#if>
<@comments commentList=articleComments article=article></@comments>
<div class="article__bottom">
<div class="wrapper">
<div class="fn__flex">
<#if 0 != externalRelevantArticlesDisplayCount>
<div class="item" id="externalRelevantArticles"></div>
</#if>
<div class="item" id="randomArticles"></div>
<div class="item" id="relevantArticles"></div>
</div>
</div>
</div>
<#if pjax><!---- pjax {#pjax} end ----></#if>
</div>
<#include "footer.ftl">
<#if pjax><!---- pjax {#pjax} start ----></#if>
<@comment_script oId=article.oId commentable=article.commentable>
page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
<#if 0 != randomArticlesDisplayCount>
page.loadRandomArticles('<h3>${randomArticlesLabel}</h3>');
</#if>
<#if 0 != externalRelevantArticlesDisplayCount>
page.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>",
'<h3>${externalRelevantArticlesLabel}</h3>');
</#if>
<#if 0 != relevantArticlesDisplayCount>
page.loadRelevantArticles('${article.oId}', '<h3>${relevantArticlesLabel}</h3>');
</#if>
Skin.initArticle()
</@comment_script>
<#if pjax><!---- pjax {#pjax} end ----></#if>
</body>
</html>

45
Bubble/author-articles.ftl Normal file
View File

@@ -0,0 +1,45 @@
<#--
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="${authorName} - ${blogTitle}">
<link rel="stylesheet"
href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
</@head>
</head>
<body class="fn__flex-column">
<div id="pjax" class="fn__flex-1">
<#if pjax><!---- pjax {#pjax} start ----></#if>
<#include "macro-header.ftl">
<@header type='other'></@header>
<div class="wrapper other">
<h2 class="other__title">
<a href="${servePath}" class="ft__a">${blogTitle}</a> - ${authorName}
</h2>
<div class="other__meta other__meta--list">&nbsp;</div>
<#include "article-list.ftl">
</div>
<#if pjax><!---- pjax {#pjax} end ----></#if>
</div>
<#include "footer.ftl">
</body>
</html>

44
Bubble/category-articles.ftl Normal file
View File

@@ -0,0 +1,44 @@
<#--
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="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
</@head>
</head>
<body class="fn__flex-column">
<div id="pjax" class="fn__flex-1">
<#if pjax><!---- pjax {#pjax} start ----></#if>
<#include "macro-header.ftl">
<@header type='other'></@header>
<div class="wrapper other">
<h2 class="other__title"><a href="${servePath}" class="ft__a">${blogTitle}</a> - ${category.categoryTitle}</h2>
<div class="other__meta other__meta--list">
${category.categoryDescription} &nbsp;
</div>
<#include "article-list.ftl">
</div>
<#if pjax><!---- pjax {#pjax} end ----></#if>
</div>
<#include "footer.ftl">
</body>
</html>

50
Bubble/common-comment.ftl Normal file
View File

@@ -0,0 +1,50 @@
<#--
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/>.
-->
<li id="${comment.oId}" class="item">
<div class="fn__clear">
<div class="item__avatar" style="background-image: url(${comment.commentThumbnailURL})"></div>
<div class="item__name">
<#if "http://" == comment.commentURL>
<span class="ft__fade">${comment.commentName}</span>
<#else>
<a class="ft__link" href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
</#if>
<#if comment.isReply>
@ <a href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 20);"
onmouseout="page.hideComment('${comment.commentOriginalCommentId}')"
>${comment.commentOriginalCommentName}</a>
</#if>
</div>
</div>
<div class="vditor-reset">
${comment.commentContent}
</div>
<div class="item__meta fn__clear">
<time>
${comment.commentDate2?string["MMM d, yyyy"]}
</time>
<#if article?? && article.commentable>
<a class="fn__right fn__none item__reply"
href="javascript:page.toggleEditor('${comment.oId}', '${comment.commentName}')">Reply</a>
</#if>
</div>
</li>

1
Bubble/css/base.css Normal file
View File

File diff suppressed because one or more lines are too long

820
Bubble/css/base.scss Normal file
View File

@@ -0,0 +1,820 @@
/*
* 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/>.
*/
/*
* skin style
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 0.1.0.1, Jul 9, 2019
*/
@import "../../../scss/reset";
@import "../../../scss/usite";
@import "../../../scss/toc";
@import "../../../scss/function";
@import "../../../scss/nprogress";
@import "vditor/src/assets/scss/classic";
$fade-lighter: rgba(255, 255, 255, .8) !default;
$gray: #738a94 !default;
$black: #15171a !default;
$black-bg: #090a0b !default;
$link: #26a8ed !default;
body {
background-color: #f4f8fb;
}
::selection {
text-shadow: none;
background-color: #cbeafb;
}
a {
color: $link;
}
.ft__a {
color: $gray;
&:hover {
color: rgba($gray, .8);
}
}
.wrapper {
max-width: 1040px;
margin: 0 auto;
padding: 0 10px;
}
.header {
color: #fff;
position: relative;
&--index {
height: 100vh;
&:before {
content: "";
height: 100%;
position: absolute;
background: url("../images/header-bg.jpg") no-repeat center center;
width: 100%;
top: 0;
background-size: cover;
}
}
&--article {
background-color: $black-bg;
height: 64px;
.header__title {
display: none;
}
.header__nav a {
margin-bottom: 0;
line-height: 64px;
}
}
&--other {
height: 407px;
.header__title {
display: none;
}
&:before {
content: "";
height: 100%;
position: absolute;
background: url("../images/header-bg.jpg") no-repeat center center;
width: 100%;
top: 0;
background-size: cover;
filter: brightness(48%);
}
.header__nav a {
margin-bottom: 0;
line-height: 64px;
}
}
&__title {
position: relative;
text-align: center;
}
&__h1 {
font-size: 30px;
padding-top: 140px;
font-weight: normal;
img {
height: 32px;
width: 32px;
margin-right: 10px;
}
a {
color: #fff;
&:hover {
text-decoration: none;
color: $fade-lighter;
}
}
}
&__h2 {
font-size: 20px;
font-weight: 300;
margin: 5px 0 70px;
color: $fade-lighter;
line-height: 24px;
}
&__nav {
position: relative;
a {
font-size: 13px;
float: left;
line-height: 24px;
color: $fade-lighter;
margin: 0 20px 90px 0;
&:hover {
color: #fff;
text-decoration: none;
}
}
img {
height: 14px;
width: 14px;
margin-right: 5px;
}
svg {
margin-top: 5px;
}
}
}
.footer {
font-size: 13px;
padding: 20px 0;
background-color: $black-bg;
color: #fff;
a {
color: $fade-lighter;
&:hover {
text-decoration: none;
color: #fff;
}
}
.fn__right {
text-align: right;
}
}
.articles {
display: flex;
flex-wrap: wrap;
margin: 0 -20px;
.item {
flex: 1 1 300px;
overflow: hidden;
margin: 0 20px 40px;
min-height: 300px;
border-radius: 5px;
box-shadow: 8px 14px 38px rgba(39, 44, 49, .06), 1px 3px 8px rgba(39, 44, 49, .03);
transition: all .3s ease;
display: flex;
flex-direction: column;
background-color: #fff;
&--large {
flex-direction: row;
flex: 1 1 100%;
.item__cover {
flex: 1;
height: auto;
}
.item__main {
padding: 30px 40px;
width: 357px;
flex: unset;
}
}
&:hover {
box-shadow: 8px 28px 50px rgba(39, 44, 49, .07), 1px 6px 12px rgba(39, 44, 49, .04);
transform: translate3D(0, -1px, 0) scale(1.02);
}
&__cover {
background-size: cover;
background-position: center center;
height: 200px;
}
&__main {
padding: 25px;
box-sizing: border-box;
display: flex;
flex-direction: column;
flex: 1;
}
&__tag {
display: inline-block;
margin-bottom: 4px;
color: $gray;
font-size: 12px;
line-height: 14px;
font-weight: 500;
letter-spacing: .5px;
text-transform: uppercase;
&:hover {
text-decoration: none;
color: rgba($gray, 0.8);
}
}
&__title {
margin-bottom: 10px;
a {
color: $black;
font-size: 18px;
line-height: 24px;
&:hover {
text-decoration: none;
color: rgba($black, 0.8);
}
}
sup {
font-size: 12px;
font-weight: normal;
color: rgba($gray, 0.8);
}
}
&__abstract {
line-height: 24px;
color: $black;
flex: 1;
&:hover {
text-decoration: none;
color: rgba($black, 0.8);
}
}
&__meta {
float: right;
margin-top: 18px;
color: $gray;
&:hover {
text-decoration: none;
color: rgba($gray, 0.8);
}
}
&__avatar {
margin-top: 10px;
float: left;
img {
height: 32px;
width: 32px;
}
}
}
}
.pagination {
text-align: center;
margin-top: -70px;
&__item {
width: 30px;
height: 30px;
background: $black;
border-radius: 50%;
display: inline-block;
color: #fff;
line-height: 30px;
font-size: 12px;
margin: 0 5px 40px;
&:hover,
&--active {
opacity: 0.68;
text-decoration: none;
}
&--omit {
background-color: transparent;
color: $black;
}
}
}
.article {
background-color: #fff;
&__bottom {
background-color: #fff;
position: relative;
.fn__flex {
flex-wrap: wrap;
margin: 0 -20px;
}
.item {
position: relative;
flex: 1 1 300px;
margin: 40px 20px 40px;
box-shadow: 8px 14px 38px rgba(39, 44, 49, .06), 1px 3px 8px rgba(39, 44, 49, .03);
border-radius: 5px;
padding: 40px;
overflow: hidden;
text-align: center;
box-sizing: border-box;
&:before {
content: "";
position: absolute;
height: 100%;
top: 0;
left: 0;
width: 100%;
background: url(../images/header-bg.jpg) no-repeat center center;
background-size: cover;
filter: brightness(48%);
}
h3 {
color: #fff;
position: relative;
margin-bottom: 20px;
}
ul {
padding-left: 0;
position: relative;
list-style: none;
}
a {
display: block;
border-bottom: 1px solid rgba($gray, .8);
padding: 10px 0;
color: #fff;
margin: 0 20px;
}
}
}
&__top {
position: fixed;
width: 100%;
top: -61px;
background-color: rgba(255, 255, 255, 0.9);
border-bottom: 1px solid rgba($gray, 0.1);
height: 60px;
transition: all .3s ease;
z-index: 1;
.title {
float: left;
margin-left: 20px;
line-height: 60px;
font-size: 22px;
}
}
&__share {
float: right;
position: relative;
.item {
height: 60px;
width: 60px;
float: left;
text-align: center;
padding: 20px 0;
box-sizing: border-box;
color: #fdc200;
cursor: pointer;
transition: all .3s ease;
svg {
height: 20px;
width: 20px;
}
&[data-type="wechat"] {
color: #3caf36;
&:hover {
background-color: #3caf36;
}
}
&[data-type="twitter"] {
color: #18a3fa;
&:hover {
background-color: #18a3fa;
}
}
&[data-type="weibo"] {
color: #f93;
&:hover {
background-color: #f93;
}
}
&:hover {
color: #fff;
background-color: #fdc200;
}
&__qr {
position: absolute;
top: 61px;
left: 60px;
}
}
}
&__progress {
position: absolute;
right: 0;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
border: none;
background: transparent;
-webkit-appearance: none;
&::-webkit-progress-value {
background-color: $link;
}
&::-webkit-progress-bar {
background-color: transparent;
}
}
.item {
&__meta {
padding-top: 76px;
font-size: 14px;
text-transform: uppercase;
color: rgba($gray, .8);
a {
color: $gray;
}
}
&__title {
font-size: 28px;
margin-bottom: 40px;
sup {
font-size: 14px;
font-weight: normal;
color: rgba($gray, .8);
}
}
&__cover {
height: 800px;
background-size: cover;
background-position: center center;
max-width: 1404px;
margin: 0 auto;
border-radius: 5px;
filter: sepia(0.2) contrast(1.3) opacity(.86);
}
&__content {
padding: 70px 100px 0;
box-sizing: border-box;
background-color: #fff;
&--article {
margin-top: -164px;
position: relative;
}
}
&__tip {
margin-bottom: 40px;
border-radius: 5px;
box-shadow: 8px 14px 38px rgba(39, 44, 49, .06), 1px 3px 8px rgba(39, 44, 49, .03);
transition: all .3s ease;
padding: 20px 0;
text-align: center;
background: #f4f8fb;
cursor: pointer;
font-size: 18px;
&:hover {
box-shadow: 8px 28px 50px rgba(39, 44, 49, .07), 1px 6px 12px rgba(39, 44, 49, .04);
transform: translate3D(0, -1px, 0) scale(1.02);
}
}
}
}
.post__toc {
display: none;
position: fixed;
top: 84px;
bottom: 80px;
overflow: auto;
padding-left: 3px;
&::-webkit-scrollbar {
display: none;
}
.article__toc {
overflow: initial;
border-left: 1px solid rgba($gray, 0.28);
margin: 0;
font-size: 14px;
line-height: 24px;
li.current a,
a:hover {
color: $link;
}
a {
display: block;
margin-top: -24px;
color: $gray;
}
}
li {
&:before {
position: relative;
top: -2px;
left: -4px;
display: inline-block;
width: 7px;
height: 7px;
content: '';
border-radius: 50%;
}
&.current:before {
background-color: $link;
}
}
}
.comment {
background-color: #f4f8fb;
position: relative;
&__wrapper {
margin: 0 auto;
padding: 0 100px 0.1px;
box-sizing: border-box;
}
&-body-ref {
position: absolute;
left: 80px;
width: 76%;
}
&__title {
text-align: center;
padding: 40px 0;
color: $gray;
}
.item {
margin-bottom: 40px;
border: 1px solid $fade-lighter;
border-radius: 5px;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
list-style: none;
padding: 20px;
&__meta {
color: rgba($gray, .8);
font-size: 12px;
}
&__avatar {
float: left;
height: 40px;
width: 40px;
border-radius: 20px;
border: 1px solid rgba(0, 0, 0, .04);
margin: 0 20px 20px 0;
background-size: cover;
background-position: center center;
}
&__name {
color: rgba($gray, .8);
float: left;
line-height: 40px;
a {
color: $gray;
&:hover {
color: rgba($gray, .8);
}
}
}
&:hover {
.item__reply {
display: block;
}
}
}
#comments {
position: relative;
}
#comment {
position: relative;
margin-bottom: 30px;
padding: 20px;
border-radius: 3px;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
border: 0;
resize: none;
cursor: pointer;
width: 100%;
box-sizing: border-box;
}
}
.other {
position: relative;
&__title {
margin: -220px 0 5px;
color: #fff;
font-size: 28px;
text-align: center;
font-weight: 400;
}
&__meta {
color: #fff;
font-size: 14px;
text-align: center;
&--list {
margin-bottom: 154px;
}
}
&__content {
background-color: #fff;
padding: 70px 100px;
margin: 77px auto 40px;
box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 1px 3px 8px rgba(39, 44, 49, 0.03);
border-radius: 5px;
}
&__item {
line-height: 20px;
margin: 10px;
white-space: nowrap;
display: block;
&--archive {
width: 187px;
display: inline-block;
}
span, div {
color: $gray;
font-size: 12px;
word-break: break-all;
white-space: normal;
}
}
}
@media (max-width: 768px) {
.header {
padding: 10px 0;
&__h1 {
padding-top: 60px;
}
&__h2 {
margin-bottom: 40px;
}
&__nav {
.fn__right {
float: none;
}
a {
margin: 0 10px 0 0;
}
}
&--article {
height: auto;
.header__nav a {
line-height: 24px;
}
}
&--other {
height: 360px;
.header__nav a {
line-height: 24px;
}
}
}
.articles {
position: initial;
margin: 10px -5px 0 -5px;
.item {
margin: 0 5px 10px;
&--large {
flex-direction: column;
flex: 1 1 300px;
.item__cover {
height: 200px;
}
.item__main {
padding: 25px;
width: auto;
flex: 1;
}
}
}
}
.pagination {
margin-top: 0;
margin-bottom: 5px;
&__item {
margin-bottom: 5px;
}
}
.footer {
.fn__left,
.fn__right {
float: none;
text-align: center;
}
}
.article {
&__top {
height: 40px;
.title {
display: none;
}
.toc {
display: block;
float: left;
line-height: 40px;
padding: 0 10px;
cursor: pointer;
}
}
&__share .item {
height: 40px;
width: 40px;
padding: 10px 0;
}
.item {
&__meta {
padding-top: 40px;
}
&__cover {
display: none;
}
&__content {
padding: 10px 10px 0;
&--article {
margin-top: -20px;
}
}
}
&__bottom {
.fn__flex {
margin: 0 0 10px 0;
}
.item {
margin: 10px 0 0 0;
}
}
}
.comment {
&__title {
padding: 10px 0;
}
&__wrapper {
padding: 0 10px 0.1px;
}
#comment,
.item {
margin-bottom: 10px;
padding: 10px;
&__avatar {
margin-bottom: 10px;
}
}
}
.other {
&__title {
margin-top: -280px;
}
&__content {
padding: 20px;
margin: 40px auto 10px;
}
&__meta--list {
margin-bottom: 40px;
}
}
.post__toc {
left: 0;
background-color: #fff;
width: 100%;
top: 41px;
bottom: 0;
}
}

60
Bubble/footer.ftl Normal file
View File

@@ -0,0 +1,60 @@
<#--
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/>.
-->
<footer class="footer">
<div class="wrapper fn__clear">
<div class="fn__left">
&copy; ${year}
<a href="${servePath}">${blogTitle}</a>
${footerContent} &nbsp;•&nbsp;
Powered by <a href="https://solo.b3log.org" target="_blank">Solo</a>
<br>
Theme <a rel="friend" href="https://github.com/b3log/solo-skins" target="_blank">${skinDirName}</a>
<sup>[<a href="https://github.com/TryGhost/Casper" target="_blank">ref</a>]</sup>
by <a href="http://vanessa.b3log.org" target="_blank">Vanessa</a>
</div>
<div class="fn__right">
<a href="${servePath}/tags.html" rel="section">
${allTagsLabel}
</a>
&nbsp;•&nbsp;
<a href="${servePath}/archives.html">
${archiveLabel}
</a>
&nbsp;•&nbsp;
<a rel="archive" href="${servePath}/links.html">
${linkLabel}
</a>
<br>
${statistic.statisticPublishedBlogArticleCount} ${articleLabel} &nbsp;
${statistic.statisticPublishedBlogCommentCount} ${commentLabel} &nbsp;
${statistic.statisticBlogViewCount} ${viewLabel} &nbsp;
${onlineVisitorCnt} ${onlineVisitorLabel}
</div>
</div>
</footer>
<script type="text/javascript" src="${staticServePath}/js/lib/compress/pjax.min.js" charset="utf-8"></script>
<script type="text/javascript" src="${staticServePath}/js/common${miniPostfix}.js?${staticResourceVersion}"
charset="utf-8"></script>
<script type="text/javascript"
src="${staticServePath}/skins/${skinDirName}/js/common${miniPostfix}.js?${staticResourceVersion}"
charset="utf-8"></script>
<#include "../../common-template/label.ftl">
${plugins}

BIN
Bubble/images/header-bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 807 KiB

BIN
Bubble/images/side-bg.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

40
Bubble/index.ftl Normal file
View File

@@ -0,0 +1,40 @@
<#--
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="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
</@head>
</head>
<body class="fn__flex-column">
<div id="pjax" class="fn__flex-1">
<#if pjax><!---- pjax {#pjax} start ----></#if>
<#include "macro-header.ftl">
<@header type='index'></@header>
<div class="wrapper">
<#include "article-list.ftl">
</div>
<#if pjax><!---- pjax {#pjax} end ----></#if>
</div>
<#include "footer.ftl">
</body>
</html>

119
Bubble/js/common.js Normal file
View File

@@ -0,0 +1,119 @@
/*
* 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/>.
*/
/**
* @fileoverview util and every page should be used.
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 0.1.1.0, Apr 19, 2019
*/
/**
* @description 皮肤脚本
* @static
*/
var Skin = {
init: function () {
Util.initPjax()
},
initArticle: function () {
page.share()
var $articleTocs = $('.vditor-reset [id^=b3_solo_h]')
var $articleToc = $('.article__toc')
var $articleProgress = $('.article__progress')
if ($articleToc.length === 1) {
if ($(window).width() > 876) {
$('.post__toc').
css('left', $('.article .item__content').offset().left +
$('.article .item__content').outerWidth() - 80)
} else {
$('.post__toc a').click(function () {
$('.post__toc').hide()
})
}
}
$articleToc.find('a').click(function (event) {
var id = $(this).attr('href')
window.location.hash = id
$(window).scrollTop($(id).offset().top - 60)
event.preventDefault()
event.stopPropagation()
return false
})
$(window).unbind('scroll').scroll(function (event) {
if ($articleProgress.length === 0) {
return false
}
$articleProgress.attr('value', parseInt($(window).scrollTop())).
attr('max', parseInt($('body').outerHeight() -
$(window).height()))
if ($(window).scrollTop() > 236) {
$('.article__top').css('top', 0)
} else {
$('.article__top').css('top', -61)
}
if ($('.article__toc li').length === 0) {
return false
}
if ($(window).width() > 876) {
if ($(window).scrollTop() > 975 && $(window).scrollTop() <
$('.article').outerHeight() + 100) {
$('.post__toc').show()
} else {
$('.post__toc').hide()
}
}
// 界面各种图片加载会导致帖子目录定位
var toc = []
$articleTocs.each(function (i) {
toc.push({
id: this.id,
offsetTop: $(this).offset().top,
})
})
// 当前目录样式
var scrollTop = $(window).scrollTop()
for (var i = 0, iMax = toc.length; i < iMax; i++) {
if (scrollTop < toc[i].offsetTop - 61) {
$articleToc.find('li').removeClass('current')
var index = i > 0 ? i - 1 : 0
$articleToc.find('a[href="#' + toc[index].id + '"]').
parent().
addClass('current')
break
}
}
if (scrollTop >= toc[toc.length - 1].offsetTop - 61) {
$articleToc.find('li').removeClass('current')
$articleToc.find('li:last').addClass('current')
}
})
$(window).scroll()
},
}
Skin.init()

1
Bubble/js/common.min.js vendored Normal file
View File

@@ -0,0 +1 @@
var Skin={init:function(){Util.initPjax()},initArticle:function(){page.share();var l=$(".vditor-reset [id^=b3_solo_h]"),s=$(".article__toc"),c=$(".article__progress");1===s.length&&(876<$(window).width()?$(".post__toc").css("left",$(".article .item__content").offset().left+$(".article .item__content").outerWidth()-80):$(".post__toc a").click(function(){$(".post__toc").hide()})),s.find("a").click(function(t){var o=$(this).attr("href");return window.location.hash=o,$(window).scrollTop($(o).offset().top-60),t.preventDefault(),t.stopPropagation(),!1}),$(window).unbind("scroll").scroll(function(t){if(0===c.length)return!1;if(c.attr("value",parseInt($(window).scrollTop())).attr("max",parseInt($("body").outerHeight()-$(window).height())),236<$(window).scrollTop()?$(".article__top").css("top",0):$(".article__top").css("top",-61),0===$(".article__toc li").length)return!1;876<$(window).width()&&(975<$(window).scrollTop()&&$(window).scrollTop()<$(".article").outerHeight()+100?$(".post__toc").show():$(".post__toc").hide());var o=[];l.each(function(t){o.push({id:this.id,offsetTop:$(this).offset().top})});for(var i=$(window).scrollTop(),e=0,r=o.length;e<r;e++)if(i<o[e].offsetTop-61){s.find("li").removeClass("current");var n=0<e?e-1:0;s.find('a[href="#'+o[n].id+'"]').parent().addClass("current");break}i>=o[o.length-1].offsetTop-61&&(s.find("li").removeClass("current"),s.find("li:last").addClass("current"))}),$(window).scroll()}};Skin.init();

54
Bubble/links.ftl Normal file
View File

@@ -0,0 +1,54 @@
<#--
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="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
</@head>
</head>
<body class="fn__flex-column">
<div id="pjax" class="fn__flex-1">
<#if pjax><!---- pjax {#pjax} start ----></#if>
<#include "macro-header.ftl">
<@header type='other'></@header>
<div class="wrapper other">
<h2 class="other__title"><a href="${servePath}" class="ft__a">${blogTitle}</a> - ${linkLabel}</h2>
<div class="other__meta">
${links?size} ${linkLabel}
</div>
<div class="other__content">
<#if 0 != links?size>
<#list links as link>
<div class="other__item">
<a rel="friend" href="${link.linkAddress}" target="_blank">
${link.linkTitle}
</a>
<div>${link.linkDescription}</div>
</div>
</#list>
</#if>
</div>
</div>
<#if pjax><!---- pjax {#pjax} end ----></#if>
<#include "footer.ftl">
</body>
</html>

37
Bubble/macro-comments.ftl Normal file
View File

@@ -0,0 +1,37 @@
<#--
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/>.
-->
<#macro comments commentList article>
<div class="comment">
<div class="comment__wrapper wrapper">
<div class="comment__title">
${commentLabel}
</div>
<#if article.commentable>
<textarea rows="3" placeholder="${commentContentCannotEmptyLabel}" id="comment"></textarea>
</#if>
<ul id="comments">
<#list commentList as comment>
<#include 'common-comment.ftl'/>
</#list>
</ul>
</div>
</div>
</#macro>

30
Bubble/macro-header.ftl Normal file
View File

@@ -0,0 +1,30 @@
<#--
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/>.
-->
<#macro header type>
<header class="header header--${type}">
<div class="wrapper header__title">
<h1 class="header__h1 fn__flex-inline">
<img src="${faviconURL}">
<a href="${servePath}" rel="start" class="header__title">${blogTitle}</a>
</h1>
<h2 class="header__h2">${blogSubtitle}</h2>
</div>
</header>
</#macro>

BIN
Bubble/preview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

59
Bubble/side.ftl Normal file
View File

@@ -0,0 +1,59 @@
<#--
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/>.
-->
<nav class="wrapper header__nav fn__clear">
<a href="${servePath}" rel="start">
<#if type == 'article'>
${blogTitle}
<#else>
${indexLabel}
</#if>
</a>
<#list pageNavigations as page>
<a class="fn__flex-inline" href="${page.pagePermalink}" target="${page.pageOpenTarget}" rel="section">
<#if page.pageIcon != ''><img src="${page.pageIcon}"></#if> ${page.pageTitle}
</a>
</#list>
<a href="${servePath}/search">
${searchLabel}
</a>
<div class="fn__right">
<#include "../../common-template/macro-user_site.ftl">
<@userSite dir=""></@userSite>
<a rel="alternate" href="${servePath}/rss.xml">
RSS
</a>
<#if isLoggedIn>
<a href="${servePath}/admin-index.do#main">
${adminLabel}
</a>
<a href="${logoutURL}">
${logoutLabel}
</a>
<#else>
<a rel="alternate" href="${servePath}/start">
${startToUseLabel}
</a>
</#if>
</div>
</nav>

26
Bubble/skin.properties Normal file
View File

@@ -0,0 +1,26 @@
#
# 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/>.
#
#
# Description: skin properties.
# Version: 0.1.0.0, Jul 9, 2019
# Author: Liyuan Li
#
name=Bubble
memo=https://www.cnblogs.com/jajian

44
Bubble/tag-articles.ftl Normal file
View File

@@ -0,0 +1,44 @@
<#--
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="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
</@head>
</head>
<body class="fn__flex-column">
<div id="pjax" class="fn__flex-1">
<#if pjax><!---- pjax {#pjax} start ----></#if>
<#include "macro-header.ftl">
<@header type='other'></@header>
<div class="wrapper other">
<h2 class="other__title"><a href="${servePath}/tags.html" class="ft__a">${allTagsLabel}</a> - ${tag.tagTitle}</h2>
<div class="other__meta--list other__meta">
${tag.tagPublishedRefCount} ${cntArticleLabel}
</div>
<#include "article-list.ftl">
</div>
<#if pjax><!---- pjax {#pjax} end ----></#if>
</div>
<#include "footer.ftl">
</body>
</html>

64
Bubble/tags.ftl Normal file
View File

@@ -0,0 +1,64 @@
<#--
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="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
</@head>
</head>
<body class="fn__flex-column">
<div id="pjax" class="fn__flex-1">
<#if pjax><!---- pjax {#pjax} start ----></#if>
<#include "macro-header.ftl">
<@header type='other'></@header>
<div class="wrapper other">
<h2 class="other__title"><a href="${servePath}" class="ft__a">${blogTitle}</a> - ${allTagsLabel}</h2>
<div class="other__meta">
${tags?size} ${tagLabel}
</div>
<div class="other__content">
<#list mostUsedCategories as category>
<span class="other__item--archive other__item">
<a href="${servePath}/category/${category.categoryURI}">
${category.categoryTitle}
</a>
<span>${category.categoryTagCnt} ${tagLabel}</span>
</span>
</#list>
</div>
<div class="other__content">
<#list tags as tag>
<span class="other__item other__item--archive">
<a rel="tag" data-count="${tag.tagPublishedRefCount}" class="tag"
href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">
${tag.tagTitle}
</a>
<span>${tag.tagPublishedRefCount} ${countLabel}</span>
</span>
</#list>
</div>
</div>
<#if pjax><!---- pjax {#pjax} end ----></#if>
</div>
<#include "footer.ftl">
</body>
</html>