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

https://github.com/b3log/solo/issues/12459

Browse Source
This commit is contained in:
Van 2018-06-25 11:22:35 +08:00
parent f09ba88c0a
commit 02e16ad40a
No known key found for this signature in database
GPG Key ID: 7059B8783A78F16C
14 changed files with 177 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
skins/Medium/archive-articles.ftl
View File

@ -29,6 +29,8 @@
</head> </head>
<body> <body>
<#include "header.ftl"> <#include "header.ftl">
<div id="pjax">
<#if pjax><!---- pjax {#pjax} start ----></#if>
<#include "nav.ftl"> <#include "nav.ftl">
<div class="main"> <div class="main">
<#if noticeBoard??> <#if noticeBoard??>
@ -54,6 +56,8 @@
</div> </div>
<#include "bottom2.ftl"> <#include "bottom2.ftl">
</div> </div>
<#if pjax><!---- pjax {#pjax} end ----></#if>
</div>
<#include "footer.ftl"> <#include "footer.ftl">
</body> </body>
</html> </html>

4
skins/Medium/archives.ftl
View File

@ -28,6 +28,8 @@
</head> </head>
<body> <body>
<#include "header.ftl"> <#include "header.ftl">
<div id="pjax">
<#if pjax><!---- pjax {#pjax} start ----></#if>
<#include "nav.ftl"> <#include "nav.ftl">
<div class="main"> <div class="main">
<#if noticeBoard??> <#if noticeBoard??>
@ -66,6 +68,8 @@
</#if> </#if>
</div> </div>
<#include "bottom.ftl"> <#include "bottom.ftl">
</div>
<#if pjax><!---- pjax {#pjax} end ----></#if>
</div> </div>
<#include "footer.ftl"> <#include "footer.ftl">
</body> </body>

35
skins/Medium/article.ftl
View File

@ -51,6 +51,8 @@
</head> </head>
<body> <body>
<#include "header.ftl"> <#include "header.ftl">
<div id="pjaxArticle">
<#if pjax><!---- pjax {#pjaxArticle} start ----></#if>
<div class="main post__main"> <div class="main post__main">
<#if noticeBoard??> <#if noticeBoard??>
<div class="board"> <div class="board">
@ -82,7 +84,9 @@
</div> </div>
</#if> </#if>
</section> </section>
<footer class="post__tags"> <footer data-oid="${article.oId}"
class="post__tags"
data-tag="<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>">
<#list article.articleTags?split(",") as articleTag> <#list article.articleTags?split(",") as articleTag>
<a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}"> <a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
${articleTag}</a> ${articleTag}</a>
@ -212,7 +216,10 @@
data-avatar="${article.authorThumbnailURL}"></span> data-avatar="${article.authorThumbnailURL}"></span>
</div> </div>
</div> </div>
<script type="text/javascript" src="${staticServePath}/js/lib/jquery/jquery.min.js" charset="utf-8"></script>
<#if pjax><!---- pjax {#pjaxArticle} end ----></#if>
</div>
<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}" <script type="text/javascript" src="${staticServePath}/js/common${miniPostfix}.js?${staticResourceVersion}"
charset="utf-8"></script> charset="utf-8"></script>
<script type="text/javascript" <script type="text/javascript"
@ -251,17 +258,19 @@
Skin.initArticle(); Skin.initArticle();
</script> </script>
<@comment_script oId=article.oId> <@comment_script oId=article.oId>
page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}"; Skin.initComment = function (articleOId, articleTags) {
<#if 0 != randomArticlesDisplayCount> page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
page.loadRandomArticles("<div class='module__title'><span>${randomArticlesLabel}</span></div>"); <#if 0 != randomArticlesDisplayCount>
</#if> page.loadRandomArticles("<div class='module__title'><span>${randomArticlesLabel}</span></div>");
<#if 0 != externalRelevantArticlesDisplayCount> </#if>
page.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>" <#if 0 != externalRelevantArticlesDisplayCount>
, "<div class='module__title'><span>${externalRelevantArticlesLabel}</span></div>"); page.loadExternalRelevantArticles(articleTags, "<div class='module__title'><span>${externalRelevantArticlesLabel}</span></div>");
</#if> </#if>
<#if 0 != relevantArticlesDisplayCount> <#if 0 != relevantArticlesDisplayCount>
page.loadRelevantArticles('${article.oId}', '<div class="module__title"><span>${relevantArticlesLabel}</span></div>'); page.loadRelevantArticles(articleOId, '<div class="module__title"><span>${relevantArticlesLabel}</span></div>');
</#if> </#if>
}
Skin.initComment('${article.oId}', "<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>")
</@comment_script> </@comment_script>
${plugins} ${plugins}
</body> </body>

4
skins/Medium/category-articles.ftl
View File

@ -29,6 +29,8 @@
</head> </head>
<body> <body>
<#include "header.ftl"> <#include "header.ftl">
<div id="pjax">
<#if pjax><!---- pjax {#pjax} start ----></#if>
<#include "nav.ftl"> <#include "nav.ftl">
<div class="main"> <div class="main">
<#if noticeBoard??> <#if noticeBoard??>
@ -48,6 +50,8 @@
<#include "article-list.ftl"> <#include "article-list.ftl">
</div> </div>
<#include "bottom2.ftl"> <#include "bottom2.ftl">
</div>
<#if pjax><!---- pjax {#pjax} end ----></#if>
</div> </div>
<#include "footer.ftl"> <#include "footer.ftl">
</body> </body>

75
skins/Medium/css/base.css
View File

@ -1356,3 +1356,78 @@ blockquote {
padding-left: 0; padding-left: 0;
} }
} }
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: #d23f31;
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #d23f31, 0 0 5px #d23f31;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: #d23f31;
border-left-color: #d23f31;
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@-webkit-keyframes nprogress-spinner {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

2
skins/Medium/footer.ftl
View File

@ -39,7 +39,7 @@
</footer> </footer>
</div> </div>
<script type="text/javascript" src="${staticServePath}/js/lib/jquery/jquery.min.js" charset="utf-8"></script> <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}" <script type="text/javascript" src="${staticServePath}/js/common${miniPostfix}.js?${staticResourceVersion}"
charset="utf-8"></script> charset="utf-8"></script>
<script type="text/javascript" <script type="text/javascript"

4
skins/Medium/index.ftl
View File

@ -32,6 +32,8 @@
</head> </head>
<body> <body>
<#include "header.ftl"> <#include "header.ftl">
<div id="pjax">
<#if pjax><!---- pjax {#pjax} start ----></#if>
<#include "nav.ftl"> <#include "nav.ftl">
<div class="main"> <div class="main">
<#if noticeBoard??> <#if noticeBoard??>
@ -44,6 +46,8 @@
</div> </div>
<#include "bottom2.ftl"> <#include "bottom2.ftl">
</div> </div>
<#if pjax><!---- pjax {#pjax} end ----></#if>
</div>
<#include "footer.ftl"> <#include "footer.ftl">
</body> </body>
</html> </html>

36
skins/Medium/js/common.js
View File

@ -45,6 +45,42 @@ var Skin = {
} }
}); });
$(window).scroll(); $(window).scroll();
Util.initPjax(function () {
Util.parseMarkdown('content-reset');
if (location.href === latkeConfig.servePath + '/tags.html') {
Skin.initTags()
}
}, function () {
Util.parseMarkdown('content-reset');
Skin.initArticle();
Skin.initComment($('.post__tags').data('oid'), $('.post__tags').data('tag'))
})
},
initTags: function () {
var $tags = $('#tags');
var tagsArray = $tags.find('.tag')
// 根据引用次数添加样式，产生云效果
var max = parseInt(tagsArray.first().data('count'));
var distance = Math.ceil(max / 5);
for (var i = 0; i < tagsArray.length; i++) {
var count = parseInt($(tagsArray[i]).data('count'));
// 算出当前 tag 数目所在的区间，加上 class
for (var j = 0; j < 5; j++) {
if (count > j * distance && count <= (j + 1) * distance) {
tagsArray[i].className = 'tag tag__level' + j;
break;
}
}
}
// 按字母或者中文拼音进行排序
$tags.html(tagsArray.get().sort(function (a, b) {
var valA = $(a).text().toLowerCase();
var valB = $(b).text().toLowerCase();
// 对中英文排序的处理
return valA.localeCompare(valB);
}));
}, },
initArticle: function () { initArticle: function () {
Skin._share('#articleShare') Skin._share('#articleShare')

2
skins/Medium/js/common.min.js vendored
View File

@ -15,4 +15,4 @@
* You should have received a copy of the GNU Affero General Public License * 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/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
var Skin={init:function(){$("body").on("click",".content-reset img",function(){window.open(this.src)}),$(window).scroll(function(){0!==$("#headerNav").length&&($(window).scrollTop()>64?($("#headerNav").addClass("header__nav--fixed"),$(".main").css("margin-top","100px")):($("#headerNav").removeClass("header__nav--fixed"),$(".main").css("margin-top","50px")))}),$(window).scroll()},initArticle:function(){Skin._share("#articleShare"),Skin._share("#articleSideShare"),Skin._share("#articleBottomShare");var t=$(".post__side");$(window).height()>=$(".post").height()&&t.css("opacity",1),t.css("left",($(".post").offset().left-20)/2-27+"px");var e=($(window).height()-249)/2+125,i=$(window).scrollTop();$(window).scroll(function(){var o=$(window).scrollTop(),a=$(".article__bottom").offset().top;o>65?(t.css("opacity",1),i-o>0?($(".header").addClass("header--fixed").css({top:"0"}),$(".main").css("padding-top","64px"),$(window).height()<=$(".post").height()&&o<a-$(window).height()&&$(".article__toolbar").css({bottom:0,opacity:1})):i-o<0&&($(".header").css({top:"-64px"}).removeClass("header--fixed"),$(".main").css("padding-top","0"),$(".article__toolbar").css({bottom:"-44px",opacity:0}))):($(window).height()<=$(".post").height()&&t.css("opacity",0),$(".header").removeClass("header--fixed").css("top","-64px"),$(".main").css("padding-top","0")),o>a-$(window).height()?a<$(window).height()?t.css({position:"absolute",top:a-125+"px"}):t.css({position:"absolute",top:a-e+"px"}):t.css({position:"fixed",top:"50%"}),i=o}),$(window).scroll()},_share:function(t){var e=$(t),i=e.find(".article__code"),o=i.data("url"),a=i.data("avatar"),s=encodeURIComponent(i.data("title")+" - "+i.data("blogtitle")),n=encodeURIComponent(o),c={};c.tencent="http://share.v.t.qq.com/index.php?c=share&a=index&title="+s+"&url="+n+"&pic="+a,c.weibo="http://v.t.sina.com.cn/share/share.php?title="+s+"&url="+n+"&pic="+a,c.google="https://plus.google.com/share?url="+n,c.twitter="https://twitter.com/intent/tweet?status="+s+" "+n,e.find("span").click(function(){var t=$(this).data("type");if(t)return"wechat"===t?(0===i.find("canvas").length?i.qrcode({width:128,height:128,text:o}):i.slideToggle(),!1):void window.open(c[t],"_blank","top=100,left=200,width=648,height=618")})}};Skin.init(); var Skin={init:function(){$("body").on("click",".content-reset img",function(){window.open(this.src)}),$(window).scroll(function(){0!==$("#headerNav").length&&($(window).scrollTop()>64?($("#headerNav").addClass("header__nav--fixed"),$(".main").css("margin-top","100px")):($("#headerNav").removeClass("header__nav--fixed"),$(".main").css("margin-top","50px")))}),$(window).scroll(),Util.initPjax(function(){Util.parseMarkdown("content-reset"),location.href===latkeConfig.servePath+"/tags.html"&&Skin.initTags()},function(){Util.parseMarkdown("content-reset"),Skin.initArticle(),Skin.initComment($(".post__tags").data("oid"),$(".post__tags").data("tag"))})},initTags:function(){for(var t=$("#tags"),e=t.find(".tag"),i=parseInt(e.first().data("count")),o=Math.ceil(i/5),a=0;a<e.length;a++)for(var n=parseInt($(e[a]).data("count")),s=0;s<5;s++)if(n>s*o&&n<=(s+1)*o){e[a].className="tag tag__level"+s;break}t.html(e.get().sort(function(t,e){var i=$(t).text().toLowerCase(),o=$(e).text().toLowerCase();return i.localeCompare(o)}))},initArticle:function(){Skin._share("#articleShare"),Skin._share("#articleSideShare"),Skin._share("#articleBottomShare");var t=$(".post__side");$(window).height()>=$(".post").height()&&t.css("opacity",1),t.css("left",($(".post").offset().left-20)/2-27+"px");var e=($(window).height()-249)/2+125,i=$(window).scrollTop();$(window).scroll(function(){var o=$(window).scrollTop(),a=$(".article__bottom").offset().top;o>65?(t.css("opacity",1),i-o>0?($(".header").addClass("header--fixed").css({top:"0"}),$(".main").css("padding-top","64px"),$(window).height()<=$(".post").height()&&o<a-$(window).height()&&$(".article__toolbar").css({bottom:0,opacity:1})):i-o<0&&($(".header").css({top:"-64px"}).removeClass("header--fixed"),$(".main").css("padding-top","0"),$(".article__toolbar").css({bottom:"-44px",opacity:0}))):($(window).height()<=$(".post").height()&&t.css("opacity",0),$(".header").removeClass("header--fixed").css("top","-64px"),$(".main").css("padding-top","0")),o>a-$(window).height()?a<$(window).height()?t.css({position:"absolute",top:a-125+"px"}):t.css({position:"absolute",top:a-e+"px"}):t.css({position:"fixed",top:"50%"}),i=o}),$(window).scroll()},_share:function(t){var e=$(t),i=e.find(".article__code"),o=i.data("url"),a=i.data("avatar"),n=encodeURIComponent(i.data("title")+" - "+i.data("blogtitle")),s=encodeURIComponent(o),r={};r.tencent="http://share.v.t.qq.com/index.php?c=share&a=index&title="+n+"&url="+s+"&pic="+a,r.weibo="http://v.t.sina.com.cn/share/share.php?title="+n+"&url="+s+"&pic="+a,r.google="https://plus.google.com/share?url="+s,r.twitter="https://twitter.com/intent/tweet?status="+n+" "+s,e.find("span").click(function(){var t=$(this).data("type");if(t)return"wechat"===t?(0===i.find("canvas").length?i.qrcode({width:128,height:128,text:o}):i.slideToggle(),!1):void window.open(r[t],"_blank","top=100,left=200,width=648,height=618")})}};Skin.init();

8
skins/Medium/links.ftl
View File

@ -28,11 +28,13 @@
</head> </head>
<body> <body>
<#include "header.ftl"> <#include "header.ftl">
<div id="pjax">
<#if pjax><!---- pjax {#pjax} start ----></#if>
<#include "nav.ftl"> <#include "nav.ftl">
<div class="main"> <div class="main">
<#if noticeBoard??> <#if noticeBoard??>
<div class="board"> <div class="board">
${noticeBoard} ${noticeBoard}
</div> </div>
</#if> </#if>
<div class="wrapper content"> <div class="wrapper content">
@ -47,7 +49,7 @@
<div class="page__item"> <div class="page__item">
<h3> <h3>
<a rel="friend" class="ft-gray" href="${link.linkAddress}" target="_blank"> <a rel="friend" class="ft-gray" href="${link.linkAddress}" target="_blank">
${link.linkTitle} ${link.linkTitle}
<span class="ft-12 ft-green">${link.linkDescription}</span> <span class="ft-12 ft-green">${link.linkDescription}</span>
</a> </a>
</h3> </h3>
@ -57,6 +59,8 @@
</#if> </#if>
</div> </div>
<#include "bottom.ftl"> <#include "bottom.ftl">
</div>
<#if pjax><!---- pjax {#pjax} end ----></#if>
</div> </div>
<#include "footer.ftl"> <#include "footer.ftl">
</body> </body>

1
skins/Medium/page.ftl
View File

@ -41,7 +41,6 @@
<section class="content-reset"> <section class="content-reset">
${page.pageContent} ${page.pageContent}
</section> </section>
</article> </article>
</div> </div>
</div> </div>

4
skins/Medium/tag-articles.ftl
View File

@ -29,6 +29,8 @@
</head> </head>
<body> <body>
<#include "header.ftl"> <#include "header.ftl">
<div id="pjax">
<#if pjax><!---- pjax {#pjax} start ----></#if>
<#include "nav.ftl"> <#include "nav.ftl">
<div class="main"> <div class="main">
<#if noticeBoard??> <#if noticeBoard??>
@ -49,6 +51,8 @@
<#include "article-list.ftl"> <#include "article-list.ftl">
</div> </div>
<#include "bottom2.ftl"> <#include "bottom2.ftl">
</div>
<#if pjax><!---- pjax {#pjax} end ----></#if>
</div> </div>
<#include "footer.ftl"> <#include "footer.ftl">
</body> </body>

30
skins/Medium/tags.ftl
View File

@ -28,6 +28,8 @@
</head> </head>
<body> <body>
<#include "header.ftl"> <#include "header.ftl">
<div id="pjax">
<#if pjax><!---- pjax {#pjax} start ----></#if>
<#include "nav.ftl"> <#include "nav.ftl">
<div class="main"> <div class="main">
<#if noticeBoard??> <#if noticeBoard??>
@ -53,34 +55,12 @@
</div> </div>
</div> </div>
<#include "bottom.ftl"> <#include "bottom.ftl">
</div>
<#if pjax><!---- pjax {#pjax} end ----></#if>
</div> </div>
<#include "footer.ftl"> <#include "footer.ftl">
<script> <script>
(function () { Skin.initTags()
var $tags = $('#tags');
var tagsArray = $tags.find('.tag')
// 根据引用次数添加样式，产生云效果
var max = parseInt(tagsArray.first().data('count'));
var distance = Math.ceil(max / 5);
for (var i = 0; i < tagsArray.length; i++) {
var count = parseInt($(tagsArray[i]).data('count'));
// 算出当前 tag 数目所在的区间，加上 class
for (var j = 0; j < 5; j++) {
if (count > j * distance && count <= (j + 1) * distance) {
tagsArray[i].className = 'tag tag__level' + j;
break;
}
}
}
// 按字母或者中文拼音进行排序
$tags.html(tagsArray.get().sort(function (a, b) {
var valA = $(a).text().toLowerCase();
var valB = $(b).text().toLowerCase();
// 对中英文排序的处理
return valA.localeCompare(valB);
}));
})();
</script> </script>
</body> </body>
</html> </html>

20
toolers/header.txt
View File

@ -1,15 +1,17 @@
/** /**
* Solo - A beautiful, simple, stable, fast Java blogging system.
* Copyright (c) 2010-<%= year %>, b3log.org & hacpai.com * Copyright (c) 2010-<%= year %>, b3log.org & hacpai.com
* *
* Licensed under the Apache License, Version 2.0 (the "License"); * This program is free software: you can redistribute it and/or modify
* you may not use this file except in compliance with the License. * it under the terms of the GNU Affero General Public License as published by
* You may obtain a copy of the License at * the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
* *
* http://www.apache.org/licenses/LICENSE-2.0 * 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.
* *
* Unless required by applicable law or agreed to in writing, software * You should have received a copy of the GNU Affero General Public License
* distributed under the License is distributed on an "AS IS" BASIS, * along with this program. If not, see <https://www.gnu.org/licenses/>.
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/ */