diff --git a/Casper/article.ftl b/Casper/article.ftl index 8b26526..6a425b3 100644 --- a/Casper/article.ftl +++ b/Casper/article.ftl @@ -26,29 +26,39 @@ <@head title="${article.articleTitle} - ${blogTitle}" description="${article.articleAbstract?html}"> - <#if previousArticlePermalink??> - - - <#if nextArticlePermalink??> - - + <#if previousArticlePermalink??> + + + <#if nextArticlePermalink??> + + -<#include "header.ftl"> -
+
<#if pjax> -
- <#if noticeBoard??> -
- ${noticeBoard} + <#include "marcr-header.ftl"> + <@header type="article"> +
+
+
${article.articleTitle}
+ <#include "../../common-template/share.ftl">
- -
-
-
-

- ${article.articleTitle} + +

+
+
+
+ + / + <#list article.articleTags?split(",") as articleTag> +   + +
+

+ ${article.articleTitle} <#if article.articlePutTop> ${topArticleLabel} @@ -59,177 +69,52 @@ ${updatedLabel} -

- -
- ${article.articleContent} + +
+
+
+ ${article.articleContent} <#if "" != article.articleSign.signHTML?trim>
${article.articleSign.signHTML}
-
-
${articleTag}<#if articleTag_has_next>,"> - <#list article.articleTags?split(",") as articleTag> - - -
- - -
-
-
-
-
-
-
-
- <@comments commentList=articleComments article=article> + +
+ <#if article?? && article.articleToC?? && article.articleToC?size > 0> +
+ <#include "../../common-template/toc.ftl"/> +
+ + <@comments commentList=articleComments article=article> +
+
+
+
+
+
- -
-
- - ${article.articleViewCount} ${viewLabel} - -
- - -     -     -     - - - - - <#if nextArticlePermalink??> - - -
-
-
- -
- -
-     -     -     - - -
-
-
- <#include "bottom.ftl"> -
- <#if article?? && article.articleToC?? && article.articleToC?size > 0> - <#include "../../common-template/toc.ftl"/> -
<#if pjax>
<#include "footer.ftl"> - + <#if pjax> <@comment_script oId=article.oId commentable=article.commentable> Skin.initArticle() - Skin.initComment = function (articleOId, articleTags) { - page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}"; + page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}"; <#if 0 != randomArticlesDisplayCount> - page.loadRandomArticles("
${randomArticlesLabel}
"); + page.loadRandomArticles('

${randomArticlesLabel}

'); <#if 0 != externalRelevantArticlesDisplayCount> - page.loadExternalRelevantArticles(articleTags, "
${externalRelevantArticlesLabel}
"); + page.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,", + '

${externalRelevantArticlesLabel}

'); <#if 0 != relevantArticlesDisplayCount> - page.loadRelevantArticles(articleOId, '
${relevantArticlesLabel}
'); + page.loadRelevantArticles('${article.oId}', '

${relevantArticlesLabel}

'); - } - Skin.initComment('${article.oId}', "<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,") <#if pjax> -${plugins} diff --git a/Casper/common-comment.ftl b/Casper/common-comment.ftl index 798a750..c73f05f 100644 --- a/Casper/common-comment.ftl +++ b/Casper/common-comment.ftl @@ -17,38 +17,34 @@ along with this program. If not, see . --> -
- -
-
- - <#if "http://" == comment.commentURL> - ${comment.commentName} - <#else> - ${comment.commentName} - - - - <#if comment.isReply> - - - ${reply1Label} ${comment.commentOriginalCommentName} - - - - +
  • +
    +
    +
    + <#if "http://" == comment.commentURL> + ${comment.commentName} + <#else> + ${comment.commentName} + - - <#if article.commentable> - - ${reply1Label} - + <#if comment.isReply> + @ ${comment.commentOriginalCommentName}
    -
    - ${comment.commentContent} -
    -
    • -
    \ No newline at end of file +
    +
    + ${comment.commentContent} +
    +
    + + <#if article?? && article.commentable> + Reply + +
    + \ No newline at end of file diff --git a/Casper/css/base.css b/Casper/css/base.css index 590b211..073a175 100644 --- a/Casper/css/base.css +++ b/Casper/css/base.css @@ -1 +1 @@ -html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;height:100%}body{margin:0;font-family:"Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;font-size:14px;background-color:#fff;-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch}::-moz-selection{text-shadow:none;background:rgba(65,131,196,0.4)}::selection{text-shadow:none;background:rgba(66,133,244,0.4)}ul,ol{margin:0;padding:0}h1,h2,h3,h4,h5,h6,dl,dd,p{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none}a{outline:0;text-decoration:none}a:hover{text-decoration:underline}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{max-width:100%;vertical-align:middle;border:0;height:auto;-ms-interpolation-mode:bicubic;overflow:hidden;font-size:12px}button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle;font-family:"Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;outline:none}button,input{line-height:normal}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}input[type="search"]{box-sizing:content-box;-webkit-appearance:textfield}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}svg{fill:currentColor;display:inline-block;stroke-width:0;stroke:currentColor;width:14px;height:14px}blockquote{margin:0}.user__site:hover{text-decoration:none}.article__toc{overflow:auto}.article__toc::-webkit-scrollbar{display:none}.article__toc li{list-style-type:none}.article__toc li a{padding-left:10px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.article__toc li a:hover{text-decoration:none}.article__toc li.toc__h3 a{padding-left:20px}.article__toc li.toc__h4 a{padding-left:30px}.article__toc li.toc__h5 a{padding-left:40px}.fn__flex{display:flex}.fn__flex-center{align-self:center}.fn__flex-inline{display:inline-flex;align-items:center}.fn__flex-1{flex:1;min-width:1px}.fn__flex-column{min-height:100%;display:flex;flex-direction:column}.fn__pointer{cursor:pointer}.fn__clear:before,.fn__clear:after{display:table;content:""}.fn__clear:after{clear:both}.fn__left{float:left}.fn__right{float:right}.fn__none{display:none}.fn__hidden{visibility:hidden}.fn__ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.ft__13{font-size:13px}.ft__smaller{font-size:12px}.ft__center{text-align:center}.ft__nowrap{white-space:nowrap}#nprogress{pointer-events:none}#nprogress .bar{background:#d23f31;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#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)}#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)}}@keyframes tooltip-appear{from{opacity:0}to{opacity:1}}.vditor-tooltipped{position:relative;cursor:pointer}.vditor-tooltipped::after{position:absolute;z-index:1000000;display:none;padding:5px 8px;font-size:11px;font-weight:normal;-webkit-font-smoothing:subpixel-antialiased;color:#fff;text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:rgba(0,0,0,0.8);border-radius:3px;line-height:16px;opacity:0}.vditor-tooltipped::before{position:absolute;z-index:1000001;display:none;width:0;height:0;color:rgba(0,0,0,0.8);pointer-events:none;content:"";border:5px solid transparent;opacity:0}.vditor-tooltipped--hover::before,.vditor-tooltipped--hover::after,.vditor-tooltipped:hover::before,.vditor-tooltipped:hover::after,.vditor-tooltipped:active::before,.vditor-tooltipped:active::after,.vditor-tooltipped:focus::before,.vditor-tooltipped:focus::after{display:inline-block;text-decoration:none;animation-name:tooltip-appear;animation-duration:0.1s;animation-fill-mode:forwards;animation-timing-function:ease-in;animation-delay:0.4s}.vditor-tooltipped__s::after,.vditor-tooltipped__se::after,.vditor-tooltipped__sw::after{top:100%;right:50%;margin-top:5px}.vditor-tooltipped__s::before,.vditor-tooltipped__se::before,.vditor-tooltipped__sw::before{top:auto;right:50%;bottom:-5px;margin-right:-5px;border-bottom-color:rgba(0,0,0,0.8)}.vditor-tooltipped__se::after{right:auto;left:50%;margin-left:-15px}.vditor-tooltipped__sw::after{margin-right:-15px}.vditor-tooltipped__n::after,.vditor-tooltipped__ne::after,.vditor-tooltipped__nw::after{right:50%;bottom:100%;margin-bottom:5px}.vditor-tooltipped__n::before,.vditor-tooltipped__ne::before,.vditor-tooltipped__nw::before{top:-5px;right:50%;bottom:auto;margin-right:-5px;border-top-color:rgba(0,0,0,0.8)}.vditor-tooltipped__ne::after{right:auto;left:50%;margin-left:-15px}.vditor-tooltipped__nw::after{margin-right:-15px}.vditor-tooltipped__s::after,.vditor-tooltipped__n::after{transform:translateX(50%)}.vditor-tooltipped__w::after{right:100%;bottom:50%;margin-right:5px;transform:translateY(50%)}.vditor-tooltipped__w::before{top:50%;bottom:50%;left:-5px;margin-top:-5px;border-left-color:rgba(0,0,0,0.8)}.vditor-tooltipped__e::after{bottom:50%;left:100%;margin-left:5px;transform:translateY(50%)}.vditor-tooltipped__e::before{top:50%;right:-5px;bottom:50%;margin-top:-5px;border-right-color:rgba(0,0,0,0.8)}.vditor-panel{background-color:#fff;position:absolute;box-shadow:0 1px 2px rgba(0,0,0,0.2);border-radius:3px;padding:5px;z-index:1;font-size:14px;display:none;user-select:none;max-width:200px;min-width:80px}.vditor-panel h1,.vditor-panel h2,.vditor-panel h3,.vditor-panel h4,.vditor-panel h5,.vditor-panel h6{margin:0;cursor:pointer;padding:3px 10px;border-radius:3px;line-height:normal}.vditor-panel h1:hover,.vditor-panel h2:hover,.vditor-panel h3:hover,.vditor-panel h4:hover,.vditor-panel h5:hover,.vditor-panel h6:hover{background-color:#4285f4;color:#fff}.vditor-toolbar{background-color:#f6f8fa;border-bottom:1px solid #d1d5da;padding:0 5px;border-radius:3px 3px 0 0}.vditor-toolbar>div{padding:10px 5px;float:left;line-height:14px;height:36px;box-sizing:border-box}.vditor-toolbar svg{fill:currentColor;display:inline-block;stroke-width:0;stroke:currentColor;width:14px;height:14px}.vditor-toolbar .vditor-tooltipped{color:#586069}.vditor-toolbar .vditor-tooltipped:hover{color:#4285f4}.vditor-toolbar label{overflow:hidden;position:relative;height:14px;width:15px;display:block;cursor:pointer}.vditor-toolbar input{position:absolute;width:1px;opacity:.001;height:14px;overflow:hidden}.vditor-menu--current svg{color:#4285f4}.vditor-menu__divider{width:10px}.vditor-menu__br{width:100%;padding:0 !important;height:0 !important}.vditor-emojis{display:inline-block}.vditor-emojis__tail{font-size:12px;text-align:right;color:#586069}.vditor-emojis__tail a{text-decoration:none;color:#586069}.vditor-emojis__tail a:hover{color:#4285f4}.vditor-emojis span{cursor:pointer;border-radius:3px;float:left;height:26px;width:26px;text-align:center;line-height:20px;padding:3px;box-sizing:border-box;font-size:16px}.vditor-emojis span:hover{background-color:#4285f4}.vditor-emojis img{height:20px;width:20px;float:left}.vditor{display:flex;flex-direction:column;border:1px solid #d1d5da;border-radius:3px;box-sizing:border-box}.vditor--fullscreen{position:fixed;top:0;width:100% !important;left:0;height:100vh !important;z-index:90;background-color:#fff}.vditor-content{display:flex;min-height:60px;flex:1;position:relative}.vditor-textarea{flex:1;border:0;resize:none;padding:10px;box-sizing:border-box;background-color:#fafbfc;outline:0 none;font-size:16px;line-height:22px;color:#24292e;border-radius:0 0 3px 3px}.vditor-textarea[disabled]{opacity:0.3;cursor:not-allowed}.vditor-textarea:focus{background-color:#fff}.vditor-preview{flex:1;background-color:#fff;overflow:auto;padding:10px;box-shadow:inset 1px 0 #d1d5da;box-sizing:border-box;border-radius:0 0 3px 0}.vditor-preview::-webkit-scrollbar{display:none}.vditor-counter{padding:0 3px;position:absolute;bottom:10px;right:20px;color:#24292e;background-color:rgba(255,255,255,0.6);border-radius:3px;font-size:12px;user-select:none}.vditor-counter--error{color:#d23f31;background-color:rgba(210,63,49,0.1)}.vditor-resize{padding:1px 0;border-radius:5px;cursor:row-resize;transition:all .15s ease-in-out;user-select:none;background-color:#f6f8fa}.vditor-resize:hover{background-color:#4285f4}.vditor-resize:hover svg{color:#fff}.vditor-resize svg{fill:currentColor;stroke-width:0;stroke:currentColor;width:13px;height:3px;display:block;margin:0 auto;color:#586069}.vditor-upload{opacity:0;position:absolute;width:100%;height:5px;left:0;top:-3px;border-radius:3px;overflow:hidden;transition:all .15s ease-in-out;color:#fff;font-size:12px;line-height:14px}.vditor-upload ul{margin:0}.vditor-upload--tip{height:auto;opacity:1 !important}.vditor-upload--tip .vditor-upload__close{display:block}.vditor-upload__close{display:none;position:absolute;right:5px;cursor:pointer;padding:5px;top:0}.vditor-upload__progress{height:100%;background-color:rgba(66,133,244,0.8);transition:all .15s ease-in-out;padding:5px;box-sizing:border-box}.vditor-hint{background-color:#fff;position:absolute;box-shadow:0 1px 2px rgba(0,0,0,0.2);border-radius:3px;padding:5px 0;z-index:1;line-height:20px;list-style:none;color:#24292e;font-size:12px;margin:0;max-width:200px;min-width:80px;display:none}.vditor-hint li{cursor:pointer;padding:3px 10px;border-bottom:1px solid #d1d5da;line-height:20px}.vditor-hint li:last-child{border-bottom:0}.vditor-hint--current,.vditor-hint li:hover{background-color:#4285f4;color:#fff}.vditor-hint__emoji{font-size:16px;float:left;margin-right:3px}.vditor-hint img{height:20px;width:20px;float:left;margin-right:3px}.vditor-reset{font-family:"Helvetica Neue","Luxi Sans","DejaVu Sans",Tahoma,"Hiragino Sans GB","Microsoft Yahei",sans-serif;word-wrap:break-word;overflow:auto;line-height:1.65;font-size:16px;word-break:break-word}.vditor-reset ul,.vditor-reset ol{padding-left:2em;margin-top:0;margin-bottom:16px}.vditor-reset li{margin-top:0.25em}.vditor-reset audio{max-width:100%}.vditor-reset video{max-height:90vh}.vditor-reset img.emoji{cursor:auto;max-width:20px;vertical-align:top}.vditor-reset h1,.vditor-reset h2,.vditor-reset h3,.vditor-reset h4,.vditor-reset h5,.vditor-reset h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}.vditor-reset h1{padding-bottom:0.3em;font-size:1.7em;border-bottom:1px solid #eee}.vditor-reset h2{padding-bottom:0.3em;font-size:1.5em;border-bottom:1px solid #eee}.vditor-reset h3{font-size:1.25em}.vditor-reset h4{font-size:1em}.vditor-reset h5{font-size:0.875em}.vditor-reset h6{font-size:0.85em}.vditor-reset hr{height:0.15em;padding:0;margin:24px 0;background-color:#e7e7e7;border:0}.vditor-reset p{margin-top:0;margin-bottom:16px}.vditor-reset blockquote{padding:0 1em;color:#777;border-left:0.25em solid #ddd;margin:0 0 16px 0}.vditor-reset blockquote p{margin:0}.vditor-reset ins>iframe{border:0}.vditor-reset iframe{border:1px solid #d1d5da}.vditor-reset table{width:100%;border:1px solid #dedede;margin:15px auto;border-collapse:collapse;empty-cells:show}.vditor-reset thead{text-align:center}.vditor-reset td,.vditor-reset th{height:35px;border:1px solid #dedede;padding:0 10px}.vditor-reset th{font-weight:bold;text-align:center !important;background:rgba(158,188,226,0.2)}.vditor-reset tbody tr:nth-child(2n){background:rgba(158,188,226,0.12)}.vditor-reset tr:hover{background:#efefef}.vditor-reset code{padding:0.2em 0.4em;margin:0;font-size:85%;background-color:rgba(27,31,35,0.05);border-radius:3px;font-family:mononoki,Consolas,"Liberation Mono",Menlo,Courier,monospace;word-break:break-word}.vditor-reset pre>code{padding:0.5em;background-color:rgba(0,0,0,0.04);background-image:url("https://cdn.jsdelivr.net/npm/vditor@1.1.2/src/assets/images/code-bg.png");background-size:20px 20px;border-radius:5px;display:block;overflow:auto}.vditor-reset pre:hover div.vditor-copy{display:block}.vditor-reset kbd{display:inline-block;padding:3px 5px;font:11px Consolas, "Liberation Mono", Menlo, Courier, monospace;line-height:10px;color:#555;vertical-align:middle;background-color:#fcfcfc;border:solid 1px #d1d5da;border-bottom-color:#bbb;border-radius:3px;box-shadow:inset 0 -1px 0 #bbb}.vditor-reset summary{cursor:pointer}.vditor-reset summary:focus{outline:none}.vditor-reset svg{height:auto;width:auto}.vditor-reset .katex{position:relative}.vditor-task{list-style:none;margin-left:-1.4em;display:flex;align-items:center}.vditor-task input{margin-right:5px}.vditor-copy{position:relative;display:none}.vditor-copy textarea{position:absolute;top:-100000px}.vditor-copy span{cursor:pointer;position:absolute;right:0.5em;top:0.5em;height:20px;width:20px}.vditor-copy svg{height:20px;width:20px}body{background-color:#f4f8fb}.wrapper{max-width:1040px;margin:0 auto;padding:0 10px}.header{color:#fff;position:relative}.header--index: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(38%)}.header__title{position:relative;text-align:center}.header__h1{font-size:30px;padding-top:140px;font-weight:normal}.header__h1 img{height:32px;width:32px;margin-right:10px}.header__h1 a{color:#fff}.header__h1 a:hover{text-decoration:none;color:rgba(255,255,255,0.8)}.header__h2{font-size:20px;font-weight:300;margin:5px 0 70px;color:rgba(255,255,255,0.8)}.header__nav{position:relative}.header__nav a{font-size:13px;float:left;line-height:24px;color:rgba(255,255,255,0.8);margin:0 20px 90px 0}.header__nav a:hover{color:#fff;text-decoration:none}.header__nav img{height:14px;width:14px;margin-right:5px}.header__nav svg{margin-top:5px}.footer{font-size:13px;padding:20px 0;background-color:#000;color:#fff}.footer a{color:rgba(255,255,255,0.8)}.footer a:hover{text-decoration:none;color:#fff}.footer .fn__right{text-align:right}.articles{top:-70px;position:relative;display:flex;flex-wrap:wrap;margin:0 -20px}.articles .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,0.06),1px 3px 8px rgba(39,44,49,0.03);transition:all .5s ease;display:flex;flex-direction:column;background-color:#fff}.articles .item--large{flex-direction:row;flex:1 1 100%}.articles .item--large .item__cover{flex:1;height:auto}.articles .item--large .item__main{padding:30px 40px;width:357px;flex:unset}.articles .item:hover{box-shadow:8px 28px 50px rgba(39,44,49,0.07),1px 6px 12px rgba(39,44,49,0.04);transform:translate3D(0, -1px, 0) scale(1.02)}.articles .item__cover{background-size:cover;background-position:center center;height:200px}.articles .item__main{padding:25px;box-sizing:border-box;display:flex;flex-direction:column;flex:1}.articles .item__tag{display:inline-block;margin-bottom:4px;color:#738a94;font-size:12px;line-height:14px;font-weight:500;letter-spacing:.5px;text-transform:uppercase}.articles .item__tag:hover{text-decoration:none;color:rgba(115,138,148,0.8)}.articles .item__title{margin-bottom:10px}.articles .item__title a{color:#15171a;font-size:18px;line-height:24px}.articles .item__title a:hover{text-decoration:none;color:rgba(21,23,26,0.8)}.articles .item__title sup{font-size:12px;font-weight:normal;color:rgba(115,138,148,0.8)}.articles .item__abstract{line-height:24px;color:#15171a;flex:1}.articles .item__abstract:hover{text-decoration:none;color:rgba(21,23,26,0.8)}.articles .item__meta{float:right;margin-top:18px;color:#738a94}.articles .item__meta:hover{text-decoration:none;color:rgba(115,138,148,0.8)}.articles .item__avatar{margin-top:10px;float:left}.articles .item__avatar img{height:32px;width:32px}.pagination{text-align:center;margin-top:-70px}.pagination__item{width:30px;height:30px;background:#15171a;border-radius:50%;display:inline-block;color:#fff;line-height:30px;font-size:12px;margin:0 5px 40px}.pagination__item:hover{opacity:0.8;text-decoration:none}.pagination__item--active{background:#88acdb}.pagination__item--active:hover{opacity:1}.pagination__item--omit{background-color:transparent;color:#15171a} +html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;height:100%}body{margin:0;font-family:"Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;font-size:14px;background-color:#fff;-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch}::-moz-selection{text-shadow:none;background:rgba(65,131,196,0.4)}::selection{text-shadow:none;background:rgba(66,133,244,0.4)}ul,ol{margin:0;padding:0}h1,h2,h3,h4,h5,h6,dl,dd,p{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none}a{outline:0;text-decoration:none}a:hover{text-decoration:underline}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{max-width:100%;vertical-align:middle;border:0;height:auto;-ms-interpolation-mode:bicubic;overflow:hidden;font-size:12px}button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle;font-family:"Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;outline:none}button,input{line-height:normal}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}input[type="search"]{box-sizing:content-box;-webkit-appearance:textfield}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}svg{fill:currentColor;display:inline-block;stroke-width:0;stroke:currentColor;width:14px;height:14px}blockquote{margin:0}.user__site:hover{text-decoration:none}.article__toc{overflow:auto}.article__toc::-webkit-scrollbar{display:none}.article__toc li{list-style-type:none}.article__toc li a{padding-left:10px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.article__toc li a:hover{text-decoration:none}.article__toc li.toc__h3 a{padding-left:20px}.article__toc li.toc__h4 a{padding-left:30px}.article__toc li.toc__h5 a{padding-left:40px}.fn__flex{display:flex}.fn__flex-center{align-self:center}.fn__flex-inline{display:inline-flex;align-items:center}.fn__flex-1{flex:1;min-width:1px}.fn__flex-column{min-height:100%;display:flex;flex-direction:column}.fn__pointer{cursor:pointer}.fn__clear:before,.fn__clear:after{display:table;content:""}.fn__clear:after{clear:both}.fn__left{float:left}.fn__right{float:right}.fn__none{display:none}.fn__hidden{visibility:hidden}.fn__ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.ft__13{font-size:13px}.ft__smaller{font-size:12px}.ft__center{text-align:center}.ft__nowrap{white-space:nowrap}#nprogress{pointer-events:none}#nprogress .bar{background:#d23f31;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#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)}#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)}}@keyframes tooltip-appear{from{opacity:0}to{opacity:1}}.vditor-tooltipped{position:relative;cursor:pointer}.vditor-tooltipped::after{position:absolute;z-index:1000000;display:none;padding:5px 8px;font-size:11px;font-weight:normal;-webkit-font-smoothing:subpixel-antialiased;color:#fff;text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:rgba(0,0,0,0.8);border-radius:3px;line-height:16px;opacity:0}.vditor-tooltipped::before{position:absolute;z-index:1000001;display:none;width:0;height:0;color:rgba(0,0,0,0.8);pointer-events:none;content:"";border:5px solid transparent;opacity:0}.vditor-tooltipped--hover::before,.vditor-tooltipped--hover::after,.vditor-tooltipped:hover::before,.vditor-tooltipped:hover::after,.vditor-tooltipped:active::before,.vditor-tooltipped:active::after,.vditor-tooltipped:focus::before,.vditor-tooltipped:focus::after{display:inline-block;text-decoration:none;animation-name:tooltip-appear;animation-duration:0.1s;animation-fill-mode:forwards;animation-timing-function:ease-in;animation-delay:0.4s}.vditor-tooltipped__s::after,.vditor-tooltipped__se::after,.vditor-tooltipped__sw::after{top:100%;right:50%;margin-top:5px}.vditor-tooltipped__s::before,.vditor-tooltipped__se::before,.vditor-tooltipped__sw::before{top:auto;right:50%;bottom:-5px;margin-right:-5px;border-bottom-color:rgba(0,0,0,0.8)}.vditor-tooltipped__se::after{right:auto;left:50%;margin-left:-15px}.vditor-tooltipped__sw::after{margin-right:-15px}.vditor-tooltipped__n::after,.vditor-tooltipped__ne::after,.vditor-tooltipped__nw::after{right:50%;bottom:100%;margin-bottom:5px}.vditor-tooltipped__n::before,.vditor-tooltipped__ne::before,.vditor-tooltipped__nw::before{top:-5px;right:50%;bottom:auto;margin-right:-5px;border-top-color:rgba(0,0,0,0.8)}.vditor-tooltipped__ne::after{right:auto;left:50%;margin-left:-15px}.vditor-tooltipped__nw::after{margin-right:-15px}.vditor-tooltipped__s::after,.vditor-tooltipped__n::after{transform:translateX(50%)}.vditor-tooltipped__w::after{right:100%;bottom:50%;margin-right:5px;transform:translateY(50%)}.vditor-tooltipped__w::before{top:50%;bottom:50%;left:-5px;margin-top:-5px;border-left-color:rgba(0,0,0,0.8)}.vditor-tooltipped__e::after{bottom:50%;left:100%;margin-left:5px;transform:translateY(50%)}.vditor-tooltipped__e::before{top:50%;right:-5px;bottom:50%;margin-top:-5px;border-right-color:rgba(0,0,0,0.8)}.vditor-panel{background-color:#fff;position:absolute;box-shadow:0 1px 2px rgba(0,0,0,0.2);border-radius:3px;padding:5px;z-index:1;font-size:14px;display:none;user-select:none;max-width:200px;min-width:80px}.vditor-panel h1,.vditor-panel h2,.vditor-panel h3,.vditor-panel h4,.vditor-panel h5,.vditor-panel h6{margin:0;cursor:pointer;padding:3px 10px;border-radius:3px;line-height:normal}.vditor-panel h1:hover,.vditor-panel h2:hover,.vditor-panel h3:hover,.vditor-panel h4:hover,.vditor-panel h5:hover,.vditor-panel h6:hover{background-color:#4285f4;color:#fff}.vditor-toolbar{background-color:#f6f8fa;border-bottom:1px solid #d1d5da;padding:0 5px;border-radius:3px 3px 0 0}.vditor-toolbar>div{padding:10px 5px;float:left;line-height:14px;height:36px;box-sizing:border-box}.vditor-toolbar svg{fill:currentColor;display:inline-block;stroke-width:0;stroke:currentColor;width:14px;height:14px}.vditor-toolbar .vditor-tooltipped{color:#586069}.vditor-toolbar .vditor-tooltipped:hover{color:#4285f4}.vditor-toolbar label{overflow:hidden;position:relative;height:14px;width:15px;display:block;cursor:pointer}.vditor-toolbar input{position:absolute;width:1px;opacity:.001;height:14px;overflow:hidden}.vditor-menu--current svg{color:#4285f4}.vditor-menu__divider{width:10px}.vditor-menu__br{width:100%;padding:0 !important;height:0 !important}.vditor-emojis{display:inline-block}.vditor-emojis__tail{font-size:12px;text-align:right;color:#586069}.vditor-emojis__tail a{text-decoration:none;color:#586069}.vditor-emojis__tail a:hover{color:#4285f4}.vditor-emojis span{cursor:pointer;border-radius:3px;float:left;height:26px;width:26px;text-align:center;line-height:20px;padding:3px;box-sizing:border-box;font-size:16px}.vditor-emojis span:hover{background-color:#4285f4}.vditor-emojis img{height:20px;width:20px;float:left}.vditor{display:flex;flex-direction:column;border:1px solid #d1d5da;border-radius:3px;box-sizing:border-box}.vditor--fullscreen{position:fixed;top:0;width:100% !important;left:0;height:100vh !important;z-index:90;background-color:#fff}.vditor-content{display:flex;min-height:60px;flex:1;position:relative}.vditor-textarea{flex:1;border:0;resize:none;padding:10px;box-sizing:border-box;background-color:#fafbfc;outline:0 none;font-size:16px;line-height:22px;color:#24292e;border-radius:0 0 3px 3px}.vditor-textarea[disabled]{opacity:0.3;cursor:not-allowed}.vditor-textarea:focus{background-color:#fff}.vditor-preview{flex:1;background-color:#fff;overflow:auto;padding:10px;box-shadow:inset 1px 0 #d1d5da;box-sizing:border-box;border-radius:0 0 3px 0}.vditor-preview::-webkit-scrollbar{display:none}.vditor-counter{padding:0 3px;position:absolute;bottom:10px;right:20px;color:#24292e;background-color:rgba(255,255,255,0.6);border-radius:3px;font-size:12px;user-select:none}.vditor-counter--error{color:#d23f31;background-color:rgba(210,63,49,0.1)}.vditor-resize{padding:1px 0;border-radius:5px;cursor:row-resize;transition:all .15s ease-in-out;user-select:none;background-color:#f6f8fa}.vditor-resize:hover{background-color:#4285f4}.vditor-resize:hover svg{color:#fff}.vditor-resize svg{fill:currentColor;stroke-width:0;stroke:currentColor;width:13px;height:3px;display:block;margin:0 auto;color:#586069}.vditor-upload{opacity:0;position:absolute;width:100%;height:5px;left:0;top:-3px;border-radius:3px;overflow:hidden;transition:all .15s ease-in-out;color:#fff;font-size:12px;line-height:14px}.vditor-upload ul{margin:0}.vditor-upload--tip{height:auto;opacity:1 !important}.vditor-upload--tip .vditor-upload__close{display:block}.vditor-upload__close{display:none;position:absolute;right:5px;cursor:pointer;padding:5px;top:0}.vditor-upload__progress{height:100%;background-color:rgba(66,133,244,0.8);transition:all .15s ease-in-out;padding:5px;box-sizing:border-box}.vditor-hint{background-color:#fff;position:absolute;box-shadow:0 1px 2px rgba(0,0,0,0.2);border-radius:3px;padding:5px 0;z-index:1;line-height:20px;list-style:none;color:#24292e;font-size:12px;margin:0;max-width:200px;min-width:80px;display:none}.vditor-hint li{cursor:pointer;padding:3px 10px;border-bottom:1px solid #d1d5da;line-height:20px}.vditor-hint li:last-child{border-bottom:0}.vditor-hint--current,.vditor-hint li:hover{background-color:#4285f4;color:#fff}.vditor-hint__emoji{font-size:16px;float:left;margin-right:3px}.vditor-hint img{height:20px;width:20px;float:left;margin-right:3px}.vditor-reset{font-family:"Helvetica Neue","Luxi Sans","DejaVu Sans",Tahoma,"Hiragino Sans GB","Microsoft Yahei",sans-serif;word-wrap:break-word;overflow:auto;line-height:1.65;font-size:16px;word-break:break-word}.vditor-reset ul,.vditor-reset ol{padding-left:2em;margin-top:0;margin-bottom:16px}.vditor-reset li{margin-top:0.25em}.vditor-reset audio{max-width:100%}.vditor-reset video{max-height:90vh}.vditor-reset img.emoji{cursor:auto;max-width:20px;vertical-align:top}.vditor-reset h1,.vditor-reset h2,.vditor-reset h3,.vditor-reset h4,.vditor-reset h5,.vditor-reset h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}.vditor-reset h1{padding-bottom:0.3em;font-size:1.7em;border-bottom:1px solid #eee}.vditor-reset h2{padding-bottom:0.3em;font-size:1.5em;border-bottom:1px solid #eee}.vditor-reset h3{font-size:1.25em}.vditor-reset h4{font-size:1em}.vditor-reset h5{font-size:0.875em}.vditor-reset h6{font-size:0.85em}.vditor-reset hr{height:0.15em;padding:0;margin:24px 0;background-color:#e7e7e7;border:0}.vditor-reset p{margin-top:0;margin-bottom:16px}.vditor-reset blockquote{padding:0 1em;color:#777;border-left:0.25em solid #ddd;margin:0 0 16px 0}.vditor-reset blockquote p{margin:0}.vditor-reset ins>iframe{border:0}.vditor-reset iframe{border:1px solid #d1d5da}.vditor-reset table{width:100%;border:1px solid #dedede;margin:15px auto;border-collapse:collapse;empty-cells:show}.vditor-reset thead{text-align:center}.vditor-reset td,.vditor-reset th{height:35px;border:1px solid #dedede;padding:0 10px}.vditor-reset th{font-weight:bold;text-align:center !important;background:rgba(158,188,226,0.2)}.vditor-reset tbody tr:nth-child(2n){background:rgba(158,188,226,0.12)}.vditor-reset tr:hover{background:#efefef}.vditor-reset code{padding:0.2em 0.4em;margin:0;font-size:85%;background-color:rgba(27,31,35,0.05);border-radius:3px;font-family:mononoki,Consolas,"Liberation Mono",Menlo,Courier,monospace;word-break:break-word}.vditor-reset pre>code{padding:0.5em;background-color:rgba(0,0,0,0.04);background-image:url("https://cdn.jsdelivr.net/npm/vditor@1.1.2/src/assets/images/code-bg.png");background-size:20px 20px;border-radius:5px;display:block;overflow:auto}.vditor-reset pre:hover div.vditor-copy{display:block}.vditor-reset kbd{display:inline-block;padding:3px 5px;font:11px Consolas, "Liberation Mono", Menlo, Courier, monospace;line-height:10px;color:#555;vertical-align:middle;background-color:#fcfcfc;border:solid 1px #d1d5da;border-bottom-color:#bbb;border-radius:3px;box-shadow:inset 0 -1px 0 #bbb}.vditor-reset summary{cursor:pointer}.vditor-reset summary:focus{outline:none}.vditor-reset svg{height:auto;width:auto}.vditor-reset .katex{position:relative}.vditor-task{list-style:none;margin-left:-1.4em;display:flex;align-items:center}.vditor-task input{margin-right:5px}.vditor-copy{position:relative;display:none}.vditor-copy textarea{position:absolute;top:-100000px}.vditor-copy span{cursor:pointer;position:absolute;right:0.5em;top:0.5em;height:20px;width:20px}.vditor-copy svg{height:20px;width:20px}body{background-color:#f4f8fb}::selection{text-shadow:none;background-color:#cbeafb}a{color:#26a8ed}.wrapper{max-width:1040px;margin:0 auto;padding:0 10px}.header{color:#fff;position:relative}.header--index: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(38%)}.header--article{background-color:#090a0b;height:64px}.header--article .header__title{display:none}.header--article .header__nav a{margin-bottom:0;line-height:64px}.header__title{position:relative;text-align:center}.header__h1{font-size:30px;padding-top:140px;font-weight:normal}.header__h1 img{height:32px;width:32px;margin-right:10px}.header__h1 a{color:#fff}.header__h1 a:hover{text-decoration:none;color:rgba(255,255,255,0.8)}.header__h2{font-size:20px;font-weight:300;margin:5px 0 70px;color:rgba(255,255,255,0.8)}.header__nav{position:relative}.header__nav a{font-size:13px;float:left;line-height:24px;color:rgba(255,255,255,0.8);margin:0 20px 90px 0}.header__nav a:hover{color:#fff;text-decoration:none}.header__nav img{height:14px;width:14px;margin-right:5px}.header__nav svg{margin-top:5px}.footer{font-size:13px;padding:20px 0;background-color:#090a0b;color:#fff}.footer a{color:rgba(255,255,255,0.8)}.footer a:hover{text-decoration:none;color:#fff}.footer .fn__right{text-align:right}.articles{top:-70px;position:relative;display:flex;flex-wrap:wrap;margin:0 -20px}.articles .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,0.06),1px 3px 8px rgba(39,44,49,0.03);transition:all .3s ease;display:flex;flex-direction:column;background-color:#fff}.articles .item--large{flex-direction:row;flex:1 1 100%}.articles .item--large .item__cover{flex:1;height:auto}.articles .item--large .item__main{padding:30px 40px;width:357px;flex:unset}.articles .item:hover{box-shadow:8px 28px 50px rgba(39,44,49,0.07),1px 6px 12px rgba(39,44,49,0.04);transform:translate3D(0, -1px, 0) scale(1.02)}.articles .item__cover{background-size:cover;background-position:center center;height:200px}.articles .item__main{padding:25px;box-sizing:border-box;display:flex;flex-direction:column;flex:1}.articles .item__tag{display:inline-block;margin-bottom:4px;color:#738a94;font-size:12px;line-height:14px;font-weight:500;letter-spacing:.5px;text-transform:uppercase}.articles .item__tag:hover{text-decoration:none;color:rgba(115,138,148,0.8)}.articles .item__title{margin-bottom:10px}.articles .item__title a{color:#15171a;font-size:18px;line-height:24px}.articles .item__title a:hover{text-decoration:none;color:rgba(21,23,26,0.8)}.articles .item__title sup{font-size:12px;font-weight:normal;color:rgba(115,138,148,0.8)}.articles .item__abstract{line-height:24px;color:#15171a;flex:1}.articles .item__abstract:hover{text-decoration:none;color:rgba(21,23,26,0.8)}.articles .item__meta{float:right;margin-top:18px;color:#738a94}.articles .item__meta:hover{text-decoration:none;color:rgba(115,138,148,0.8)}.articles .item__avatar{margin-top:10px;float:left}.articles .item__avatar img{height:32px;width:32px}.pagination{text-align:center;margin-top:-70px}.pagination__item{width:30px;height:30px;background:#15171a;border-radius:50%;display:inline-block;color:#fff;line-height:30px;font-size:12px;margin:0 5px 40px}.pagination__item:hover{opacity:0.8;text-decoration:none}.pagination__item--active{background:#090a0b}.pagination__item--active:hover{opacity:1}.pagination__item--omit{background-color:transparent;color:#15171a}.article{background-color:#fff}.article__bottom{background-color:#fff;position:relative}.article__bottom .fn__flex{margin:0 -20px}.article__bottom .item{position:relative;flex:1;margin:40px 20px;box-shadow:8px 14px 38px rgba(39,44,49,0.06),1px 3px 8px rgba(39,44,49,0.03);border-radius:5px;padding:40px;overflow:hidden;text-align:center}.article__bottom .item: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(38%)}.article__bottom .item h3{color:#fff;position:relative;margin-bottom:20px}.article__bottom .item ul{padding-left:0;position:relative;list-style:none}.article__bottom .item a{display:block;border-bottom:1px solid rgba(115,138,148,0.8);padding:10px 0;color:#fff;margin:0 20px}.article__top{position:fixed;width:100%;top:-60px;background-color:rgba(255,255,255,0.9);border-bottom:1px solid rgba(115,138,148,0.1);height:60px;transition:all .3s ease;z-index:1}.article__top .title{float:left;margin-left:20px;line-height:60px;font-size:22px}.article__share{float:right;position:relative}.article__share .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}.article__share .item svg{height:20px;width:20px}.article__share .item[data-type="wechat"]{color:#3caf36}.article__share .item[data-type="wechat"]:hover{background-color:#3caf36}.article__share .item[data-type="twitter"]{color:#18a3fa}.article__share .item[data-type="twitter"]:hover{background-color:#18a3fa}.article__share .item[data-type="weibo"]{color:#f93}.article__share .item[data-type="weibo"]:hover{background-color:#f93}.article__share .item:hover{color:#fff;background-color:#fdc200}.article__share .item__qr{position:absolute;top:61px;left:60px}.article__progress{position:absolute;right:0;bottom:-1px;left:0;width:100%;height:2px;border:none;background:transparent;-webkit-appearance:none}.article__progress::-webkit-progress-value{background-color:#26a8ed}.article__progress::-webkit-progress-bar{background-color:transparent}.article .item__meta{padding-top:76px;font-size:14px;text-transform:uppercase;color:rgba(115,138,148,0.8)}.article .item__meta a{color:#738a94}.article .item__title{font-size:28px;margin-bottom:40px}.article .item__title sup{font-size:14px;font-weight:normal;color:rgba(115,138,148,0.8)}.article .item__cover{height:800px;background-size:cover}.article .item__content{padding:70px 100px 0;box-sizing:border-box;margin-top:-164px;background-color:#fff}.article .item__tip{margin-bottom:40px;border-radius:5px;box-shadow:8px 14px 38px rgba(39,44,49,0.06),1px 3px 8px rgba(39,44,49,0.03);transition:all .3s ease;padding:20px 0;text-align:center;background:#f4f8fb;cursor:pointer;font-size:18px}.article .item__tip:hover{box-shadow:8px 28px 50px rgba(39,44,49,0.07),1px 6px 12px rgba(39,44,49,0.04);transform:translate3D(0, -1px, 0) scale(1.02)}.post__toc{display:none;position:fixed;top:64px;bottom:80px;overflow:auto;padding-left:3px}.post__toc::-webkit-scrollbar{display:none}.post__toc .article__toc{overflow:initial;border-left:1px solid rgba(115,138,148,0.28);margin:0;font-size:14px;line-height:24px}.post__toc .article__toc li.current a,.post__toc .article__toc a:hover{color:#26a8ed}.post__toc .article__toc a{display:block;margin-top:-24px;color:#738a94}.post__toc li:before{position:relative;top:-2px;left:-4px;display:inline-block;width:7px;height:7px;content:'';border-radius:50%}.post__toc li.current:before{background-color:#26a8ed}.comment{background-color:#f4f8fb;position:relative}.comment__wrapper{margin:0 auto;padding:0 100px 0.1px;box-sizing:border-box}.comment-body-ref{position:absolute;left:80px;width:76%}.comment__title{text-align:center;padding:40px 0;color:#738a94}.comment .item{margin-bottom:40px;border:1px solid rgba(255,255,255,0.8);border-radius:5px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,0.04);list-style:none;padding:20px}.comment .item__meta{color:rgba(115,138,148,0.8);font-size:12px}.comment .item__avatar{float:left;height:40px;width:40px;border-radius:20px;border:1px solid rgba(0,0,0,0.04);margin:0 20px 20px 0;background-size:cover;background-position:center center}.comment .item__name{color:rgba(115,138,148,0.8);float:left;line-height:40px}.comment .item__name a{color:#738a94}.comment .item__name a:hover{color:rgba(115,138,148,0.8)}.comment .item:hover .item__reply{display:block}.comment #comments{position:relative}.comment #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} diff --git a/Casper/css/base.scss b/Casper/css/base.scss index 06a6f55..a0e3f58 100644 --- a/Casper/css/base.scss +++ b/Casper/css/base.scss @@ -31,11 +31,22 @@ $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; +} + .wrapper { max-width: 1040px; margin: 0 auto; @@ -57,6 +68,17 @@ body { filter: brightness(38%); } } + &--article { + background-color: $black-bg; + height: 64px; + .header__title { + display: none; + } + .header__nav a { + margin-bottom: 0; + line-height: 64px; + } + } &__title { position: relative; text-align: center; @@ -113,7 +135,7 @@ body { .footer { font-size: 13px; padding: 20px 0; - background-color: #000; + background-color: $black-bg; color: #fff; a { color: $fade-lighter; @@ -141,7 +163,7 @@ body { 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 .5s ease; + transition: all .3s ease; display: flex; flex-direction: column; background-color: #fff; @@ -259,7 +281,7 @@ body { text-decoration: none; } &--active { - background: #88acdb; + background: $black-bg; &:hover { opacity: 1; } @@ -269,4 +291,306 @@ body { color: $black; } } +} + +.article { + background-color: #fff; + &__bottom { + background-color: #fff; + position: relative; + .fn__flex { + margin: 0 -20px; + } + .item { + position: relative; + flex: 1; + margin: 40px 20px; + 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; + &: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(38%); + } + 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: -60px; + 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; + } + &__content { + padding: 70px 100px 0; + box-sizing: border-box; + margin-top: -164px; + background-color: #fff; + } + &__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: 64px; + 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; + } } \ No newline at end of file diff --git a/Casper/index.ftl b/Casper/index.ftl index eaf007d..e66aced 100644 --- a/Casper/index.ftl +++ b/Casper/index.ftl @@ -26,11 +26,13 @@ -<#include "marcr-header.ftl"> -<@header type='index'> -
    +
    <#if pjax> + <#include "marcr-header.ftl"> + <@header type='index'> +
    <#include "article-list.ftl"> +
    <#if pjax>
    <#include "footer.ftl"> diff --git a/Casper/js/common.js b/Casper/js/common.js index f2f5d83..b87ee64 100644 --- a/Casper/js/common.js +++ b/Casper/js/common.js @@ -42,25 +42,25 @@ var Skin = { return } if ($(window).scrollTop() > 64) { - $('#headerNav').addClass('header__nav--fixed'); - $('.main').css('margin-top', '100px'); + $('#headerNav').addClass('header__nav--fixed') + $('.main').css('margin-top', '100px') } else { - $('#headerNav').removeClass('header__nav--fixed'); - $('.main').css('margin-top', '50px'); + $('#headerNav').removeClass('header__nav--fixed') + $('.main').css('margin-top', '50px') } - }); - $(window).scroll(); + }) + $(window).scroll() Util.initPjax(function () { - Util.parseMarkdown(); + Util.parseMarkdown() if (Util.isArticlePage(location.href)) { if (!$('#articleSideShare .article__code').qrcode) { $.ajax({ - method: "GET", + method: 'GET', url: Label.staticServePath + '/js/lib/jquery.qrcode.min.js', - dataType: "script", - cache: true - }); + dataType: 'script', + cache: true, + }) } } Skin.initToc() @@ -68,37 +68,34 @@ var Skin = { Skin.initToc() }, initTags: function () { - var $tags = $('#tags'); + var $tags = $('#tags') var tagsArray = $tags.find('.tag') // 根据引用次数添加样式，产生云效果 - var max = parseInt(tagsArray.first().data('count')); - var distance = Math.ceil(max / 5); + 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')); + 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; + 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(); + var valA = $(a).text().toLowerCase() + var valB = $(b).text().toLowerCase() // 对中英文排序的处理 - return valA.localeCompare(valB); - })); + return valA.localeCompare(valB) + })) }, - initArticle: function () { + initArticle1111: function () { if ($('#articleShare').length === 0) { return } - Skin._share('#articleShare') - Skin._share('#articleSideShare') - Skin._share('#articleBottomShare') var $postSide = $('.post__side') if ($(window).height() >= $('.post').height()) { @@ -121,10 +118,11 @@ var Skin = { // up $('.header').addClass('header--fixed').css({'top': '0'}) $('.main').css('padding-top', '64px') - if ($(window).height() <= $('.post').height() && scrollTop < bottomTop - $(window).height()) { + if ($(window).height() <= $('.post').height() && scrollTop < + bottomTop - $(window).height()) { $('.article__toolbar').css({ 'bottom': 0, - 'opacity': 1 + 'opacity': 1, }) } } else if (beforScrollTop - scrollTop < 0) { @@ -133,7 +131,7 @@ var Skin = { $('.main').css('padding-top', '0') $('.article__toolbar').css({ 'bottom': '-44px', - 'opacity': 0 + 'opacity': 0, }) } @@ -150,18 +148,18 @@ var Skin = { if (bottomTop < $(window).height()) { $postSide.css({ 'position': 'absolute', - 'top': (bottomTop - 125) + 'px' + 'top': (bottomTop - 125) + 'px', }) } else { $postSide.css({ 'position': 'absolute', - 'top': (bottomTop - sideAbsoluteTop) + 'px' + 'top': (bottomTop - sideAbsoluteTop) + 'px', }) } } else { $postSide.css({ 'position': 'fixed', - 'top': '50%' + 'top': '50%', }) } @@ -170,54 +168,75 @@ var Skin = { $(window).scroll() }, - _share: function (id) { - var $this = $(id) - var $qrCode = $this.find('.article__code') - var shareURL = $qrCode.data('url') - var avatarURL = $qrCode.data('avatar') - var title = encodeURIComponent($qrCode.data('title') + ' - ' + $qrCode.data('blogtitle')), - url = encodeURIComponent(shareURL) + initArticle: function () { + this._initPage() + page.share() + }, + _initPage: function () { + var $articleTocs = $('.vditor-reset [id^=b3_solo_h]') + var $articleToc = $('.article__toc') + var $articleProgress = $('.article__progress') - var urls = {} - urls.tencent = 'http://share.v.t.qq.com/index.php?c=share&a=index&title=' + title + - '&url=' + url + '&pic=' + avatarURL - urls.weibo = 'http://v.t.sina.com.cn/share/share.php?title=' + - title + '&url=' + url + '&pic=' + avatarURL - urls.qqz = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' - + url + '&sharesource=qzone&title=' + title + '&pics=' + avatarURL - urls.twitter = 'https://twitter.com/intent/tweet?status=' + title + ' ' + url + if ($articleToc.length === 1) { + $('.post__toc'). + css('left', $('.article .item__content').offset().left + + $('.article .item__content').outerWidth() - 80) + } + $(window).unbind('scroll').scroll(function (event) { + if ($articleProgress.length === 0) { + return false + } - $this.find('span').click(function () { - var key = $(this).data('type') + $articleProgress.attr('value', parseInt($(window).scrollTop())). + attr('max', parseInt($('body').outerHeight() - + $(window).height())) - if (!key) { + if ($(window).scrollTop() > 236) { + $('.article__top').css('top', 0) + } else { + $('.article__top').css('top', -60) + } + + if ($('.article__toc li').length === 0) { + return false + } + + if ($(window).scrollTop() > 990 && $(window).scrollTop() < + $('.article').outerHeight() + 100) { + $('.post__toc').show() + } else { + $('.post__toc').hide() return } - if (key === 'wechat') { - if ($qrCode.find('canvas').length === 0) { - $qrCode.qrcode({ - width: 128, - height: 128, - text: shareURL - }); - } else { - $qrCode.slideToggle(); - } - return false; - } + // 界面各种图片加载会导致帖子目录定位 + var toc = [] + $articleTocs.each(function (i) { + toc.push({ + id: this.id, + offsetTop: this.offsetTop, + }) + }) - window.open(urls[key], '_blank', 'top=100,left=200,width=648,height=618') + // 当前目录样式 + var scrollTop = $(window).scrollTop() + for (var i = 0, iMax = toc.length; i < iMax; i++) { + if (scrollTop < toc[i].offsetTop) { + $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) { + $articleToc.find('li').removeClass('current') + $articleToc.find('li:last').addClass('current') + } }) + + $(window).scroll() }, - initToc: function () { - if ($('.article__toc').length !== 0 && $(window).width() > 1000) { - $('.article__toc').animate({ - 'left': ($('.post').outerWidth() + $('.post').offset().left) + 'px' - }, 600) - } else { - $('.article__toc').hide() - } - } -}; -Skin.init(); \ No newline at end of file +} +// Skin.init(); \ No newline at end of file diff --git a/Casper/macro-comments.ftl b/Casper/macro-comments.ftl index c3671a7..c4ff623 100644 --- a/Casper/macro-comments.ftl +++ b/Casper/macro-comments.ftl @@ -18,16 +18,20 @@ --> <#macro comments commentList article> -
    -
    ${commentLabel}
    -
    +
    +
    +
    + ${commentLabel} +
    + <#if article.commentable> + + + +
      <#list commentList as comment> <#include 'common-comment.ftl'/> +
    - <#if article.commentable> - -
    \ No newline at end of file diff --git a/Casper/marcr-header.ftl b/Casper/marcr-header.ftl index 5354b2d..a77ffe5 100644 --- a/Casper/marcr-header.ftl +++ b/Casper/marcr-header.ftl @@ -27,8 +27,12 @@

    ${blogSubtitle}

    <#include "footer.ftl"> - + <#if pjax> <@comment_script oId=article.oId commentable=article.commentable> Skin.initArticle() @@ -230,6 +229,5 @@ Skin.initComment('${article.oId}', "<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,") <#if pjax> -${plugins}