jinql
/
halo-theme-xinac-fantastic
mirror of https://github.com/jinqilin721/halo-theme-xinac-fantastic
1
0
Fork 0
Code Issues Releases Wiki Activity

优化更新

pull/5/head
新逸Cary 2020-06-24 11:34:45 +08:00
parent a265f761dc
commit 9bdc480d27
11 changed files with 554 additions and 616 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
CHANGELOG.md
View File

@ -20,4 +20,11 @@
> 1、图库页面优化 > 1、图库页面优化
> 2、文章封面图支持上传图片、使用随机封面图片、关闭封面图片显示 > 2、文章封面图支持上传图片、使用随机封面图片、关闭封面图片显示
> 3、支持增加一键灰色背景设置 > 3、支持增加一键灰色背景设置
> 4、支持一键使用主题静态CDN，https://s.xinac.net > 4、支持一键使用主题静态CDN，https://s.xinac.net
<br>
## v1.3.3--20.06.24
> 1. 页面源码优化，使html源码更标准
> 2. 分享按钮去除QQ空间分享
> 3. 修复页面滚动时的一个报错问题

4
layout/common/footer.ftl
View File

@ -45,7 +45,7 @@
</script> </script>
</#if> </#if>
<#if settings.social_beian?? && settings.social_beian!=''> <#if settings.social_beian?? && settings.social_beian!=''>
<p style="text-align: left; line-height: 20px;margin: 0"> <p style="text-align: left; line-height: 20px;">
<a target="_blank" href="http://beian.miit.gov.cn/" style="color: black;font-style: inherit;font-weight: inherit;"> <a target="_blank" href="http://beian.miit.gov.cn/" style="color: black;font-style: inherit;font-weight: inherit;">
${settings.social_beian!} ${settings.social_beian!}
</a> </a>
@ -53,7 +53,7 @@
</#if> </#if>
<#if settings.social_free?? && settings.social_free!=''> <#if settings.social_free?? && settings.social_free!=''>
<p style="text-align: left; line-height: 20px; margin: 0"> <p style="text-align: left; line-height: 20px; margin: 0">
&copy; ${.now?string('yyyy')} ${user.nickname!}&nbsp;${settings.social_free!}&nbsp;&nbsp;@${version!} &copy; ${user.nickname!}&nbsp;${settings.social_free!}
</p> </p>
</#if> </#if>
<#if settings.caidai!true> <#if settings.caidai!true>

87
layout/common/navbar.ftl
View File

@ -3,11 +3,11 @@
<div class="container "> <div class="container ">
<div class="navbar-brand transparent"> <div class="navbar-brand transparent">
<a class="navbar-item navbar-logo" href="${context!}"> <a class="navbar-item navbar-logo" href="${context!}">
<#if blog_logo?? && blog_logo!=''> <#if blog_logo?? && blog_logo!=''>
<img src="${blog_logo!}" alt="${blog_title!}" height="28"> <img src="${blog_logo!}" alt="${blog_title!}" height="28">
<#else> <#else>
${blog_title!} ${blog_title!}
</#if> </#if>
</a> </a>
<span class="navbar-burger burger" data-target="navMenu"> <span class="navbar-burger burger" data-target="navMenu">
<span></span> <span></span>
@ -17,45 +17,44 @@
</div> </div>
<div id="navMenu" class="navbar-menu transparent"> <div id="navMenu" class="navbar-menu transparent">
<div class="navbar-start transparent"> <div class="navbar-start transparent">
<@menuTag method="tree"> <@menuTag method="tree">
<#if menus?? && menus?size gt 0> <#if menus?? && menus?size gt 0>
<#if settings.tree_menu_enable!false> <#if settings.tree_menu_enable!false>
<div class="navbar-start"> <div class="navbar-start">
<#list menus?sort_by('priority') as menu> <#list menus?sort_by('priority') as menu>
<#if menu.children?? && menu.children?size gt 0> <#if menu.children?? && menu.children?size gt 0>
<div class="navbar-item has-dropdown is-hoverable"> <div class="navbar-item has-dropdown is-hoverable">
<a class="sub-menu"> <a class="sub-menu">
<i class="${menu.icon!}" aria-hidden="true"></i>${menu.name!} <i class="${menu.icon!}" aria-hidden="true"></i>${menu.name!}
</a> </a>
<div class="navbar-dropdown is-boxed"> <div class="navbar-dropdown is-boxed">
<#list menu.children as child> <#list menu.children as child>
<a class="navbar-item" target="${child.target!'_self'}" href="${child.url!}"> <a class="navbar-item" target="${child.target!'_self'}" href="${child.url!}">
<i class="${child.icon!}" aria-hidden="true"></i>&nbsp;${child.name!} <i class="${child.icon!}" aria-hidden="true"></i>&nbsp;${child.name!}
</a> </a>
</#list> </#list>
</div>
</div> </div>
</div> <#else>
<#else> <a class="navbar-item" href="${menu.url!}" target="${menu.target!'_self'}"><i class="${menu.icon!}" aria-hidden="true"></i>${menu.name!}</a>
<a class="navbar-item" href="${menu.url!}" target="${menu.target!'_self'}"><i class="${menu.icon!}" aria-hidden="true"></i>${menu.name!}</a> </#if>
</#if> </#list>
</#list> </div>
</div> <#else>
<#else> <#if menus?? && menus?size gt 0>
<#if menus?? && menus?size gt 0> <div class="navbar-start">
<div class="navbar-start"> <#list menus?sort_by('priority') as menu>
<#list menus?sort_by('priority') as menu> <a class="navbar-item" href="${menu.url!}" target="${menu.target!'_self'}"><i class="${menu.icon!}" aria-hidden="true"></i>${menu.name!}</a>
<a class="navbar-item" href="${menu.url!}" target="${menu.target!'_self'}"><i class="${menu.icon!}" aria-hidden="true"></i>${menu.name!}</a> </#list>
</#list> </div>
</div> </#if>
</#if> </#if>
</#if> </#if>
</#if> </@menuTag>
</@menuTag>
</div> </div>
<div class="navbar-end"> <div class="navbar-end">
<#--${settings.links_top!} ${settings.links_top!}
<#--
<a class="navbar-item search" title="夜间模式" href="javascript:alert('开发中，敬请期待');"> <a class="navbar-item search" title="夜间模式" href="javascript:alert('开发中，敬请期待');">
<i class="fas fa-adjust"></i> <i class="fas fa-adjust"></i>
</a>--> </a>-->
@ -66,8 +65,6 @@
</div> </div>
</div> </div>
</nav> </nav>
<style>
</style>
<script> <script>
(function () { (function () {
var burger = document.querySelector('.burger'); var burger = document.querySelector('.burger');
@ -78,4 +75,4 @@
}); });
})(); })();
</script> </script>
</#macro> </#macro>

173
layout/layout.ftl
View File

@ -1,95 +1,86 @@
<#macro layout title,canonical> <#macro layout title,canonical>
<#include "common/head.ftl"> <#include "common/head.ftl">
<#include "common/navbar.ftl"> <#include "common/navbar.ftl">
<#include "common/widget.ftl"> <#include "common/widget.ftl">
<#include "common/module.ftl"> <#include "common/module.ftl">
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>${title!}</title> <title>${title!}</title>
<meta name="keywords" content="${meta_keywords!}" />
<meta name="description" content="${meta_description!}" />
<meta property="og:type" content="website" />
<meta property="og:title" content="${title!}" />
<meta property="og:url" content="${canonical}" />
<meta property="og:site_name" content="${title!}" />
<meta property="og:description" content="${meta_description!}" />
<meta property="og:locale" content="zh-CN" />
<meta property="og:image" content="${user.avatar!}" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="${title!}" />
<meta name="twitter:description" content="${meta_description!}" />
<meta name="twitter:image" content="${user.avatar!}" />
<link rel="canonical" href="${canonical!}" />
<link rel="alternative" href="${atom_url!}" title="${blog_title!}" type="application/atom+xml" />
<meta name="keywords" content="${meta_keywords!}" /> <@global.head />
<meta name="description" content="${meta_description!}" />
<meta property="og:type" content="website" />
<meta property="og:title" content="${title!}" />
<meta property="og:url" content="${canonical}" />
<meta property="og:site_name" content="${title!}" />
<meta property="og:description" content="${meta_description!}" />
<meta property="og:locale" content="zh-CN" />
<meta property="og:image" content="${user.avatar!}" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="${title!}" />
<meta name="twitter:description" content="${meta_description!}" />
<meta name="twitter:image" content="${user.avatar!}" />
<link rel="canonical" href="${canonical!}" /> <link rel="stylesheet" href="${settings.cdn_bulma_css!}" />
<link rel="alternative" href="${atom_url!}" title="${blog_title!}" type="application/atom+xml" /> <link rel="stylesheet" href="${settings.cdn_fontawesome_css!}" />
<link rel="stylesheet" href="${settings.cdn_google_fonts!}/css?family=Fira+Sans&display=swap" />
<#if is_post?? || is_sheet?? || is_journal??>
<link rel="stylesheet" href="${settings.cdn_lightgallery_css!}" />
<link rel="stylesheet" href="${settings.cdn_justifiedGallery_css!}" />
</#if>
<link rel="stylesheet" href="${theme_base!}/source/lib/outdatedbrowser/outdatedbrowser.min.css" />
<link rel="stylesheet" href="${theme_base!}/source/css/style.css" />
<link rel="stylesheet" href="${theme_base!}/source/css/bundle.css" />
<link rel="stylesheet" href="${theme_base!}/source/css/back-to-top.css" />
<#if post?? || journals??>
<link rel="stylesheet" href="${theme_base!}/source/lib/prism/css/prism-${settings.code_pretty!'Default'}.css" />
<script type="text/javascript" src="${theme_base!}/source/lib/prism/js/prism.js"></script>
</#if>
<#if is_index??>
<link rel="stylesheet" href="${theme_base!}/source/css/widget_pin.css" />
<link rel="stylesheet" href="${settings.cdn_swiper_css!}" />
</#if>
<#if settings.kanbanniang!true>
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
</#if>
<script type="text/javascript" src="${settings.cdn_pace_js!}"></script>
<#include "./plugin/style.theme.ftl">
<style>
body > .footer,
body > .navbar,
body > .section {
opacity: 0
}
<#if is_post?? || is_sheet?? || is_journal??>
.content code .number {
background-color: transparent;
border-radius: 0;
display: unset;
font-size: 1em;
margin-right: 0;
padding: 0;
vertical-align: unset;
}
.tag {
font-size: 1em !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
.attr-name {
padding-left: 0.75em !important;
}
</#if>
</style>
</head>
<@global.head /> <body class="is-3-column">
<link rel="stylesheet" href="${settings.cdn_bulma_css!}" />
<link rel="stylesheet" href="${settings.cdn_fontawesome_css!}" />
<link href="${settings.cdn_google_fonts!}/css?family=Fira+Sans&display=swap" rel="stylesheet" />
<style>
body > .footer,
body > .navbar,
body > .section {
opacity: 0
}
</style>
<#if is_post?? || is_sheet?? || is_journal??>
<style>
.content code .number {
background-color: transparent;
border-radius: 0;
display: unset;
font-size: 1em;
margin-right: 0;
padding: 0;
vertical-align: unset;
}
.tag {
font-size: 1em !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
.attr-name {
padding-left: 0.75em !important;
}
</style>
</#if>
<#if is_post?? || is_sheet?? || is_journal??>
<link rel="stylesheet" href="${settings.cdn_lightgallery_css!}" />
<link rel="stylesheet" href="${settings.cdn_justifiedGallery_css!}" />
</#if>
<link rel="stylesheet" href="${theme_base!}/source/lib/outdatedbrowser/outdatedbrowser.min.css" />
<script src="${settings.cdn_pace_js!}"></script>
<link rel="stylesheet" href="${theme_base!}/source/css/style.css" />
<link rel="stylesheet" href="${theme_base!}/source/css/bundle.css" />
<link rel="stylesheet" href="${theme_base!}/source/css/back-to-top.css" />
<#include "./plugin/style.theme.ftl">
<#if post?? || journals??>
<link rel="stylesheet" type="text/css" href="${theme_base!}/source/lib/prism/css/prism-${settings.code_pretty!'Default'}.css" />
<script type="text/javascript" src="${theme_base!}/source/lib/prism/js/prism.js"></script>
</#if>
<#if is_index??>
<link rel="stylesheet" href="${theme_base!}/source/css/widget_pin.css" />
<link rel="stylesheet" href="${settings.cdn_swiper_css!}" />
</#if>
<#if settings.kanbanniang!true>
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
</#if>
</head>
<body class="is-3-column">
<@navbar 'page' /> <@navbar 'page' />
<div class="card-normal"> <div class="card-normal">
<section class="section"> <section class="section">
@ -173,9 +164,9 @@
</div> </div>
</section> </section>
</div> </div>
<#include "common/footer.ftl">
<#include "common/scripts.ftl"> <#include "common/scripts.ftl">
<#include "common/footer.ftl">
<#include "search/local.ftl"> <#include "search/local.ftl">
</body> </body>
</html> </html>
</#macro> </#macro>

730
layout/plugin/style.theme.ftl
View File

@ -1,418 +1,354 @@
<style> <style>
<#if settings.site_gray!false> <#if settings.site_gray!false>
html { html {
-webkit-filter: grayscale(100%); -webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%); -moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); -ms-filter: grayscale(100%);
-o-filter: grayscale(100%); -o-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter: none; _filter: none;
} }
</#if> </#if>
:root {
--color: #333333;
--background: #f7f7f7;
--cardbgcolor: #fff;
--cardcolor: #333;
--cardtitlecolor: #333333;
--navbarcolor: #333333;
--navbarbgcolor: rgba(255, 255, 255, 0.7);
--img-default-filter: none;
--img-hover-filter: none;
--btn-bg-color: whitesmoke;
--btn-color: #333333;
--btn-hover-color: #eeeeee;
--link-color: #1485FE;
--link-hover-color: #1485FE;
/*code highlight*/
--code-bg-color: rgb(45,45,45);
--code-default-color: rgb(45,45,45);
--code-line-numbers-bg-color: rgb(45,45,45);
--code-line-numbers-color: skyblue;
--code-keyworks-color: #7012cc;
--code-class-color: #f2777a;
--code-cdata-color: hsl(313, 67%, 36%);
--code-symbol-color: hsl(33, 83%, 45%);
--code-variable-color: hsl(281, 89%, 64%);
--code-regex-color: #e90;
--code-deleted-color: red;
--code-toolbar-bg-color: #EBEDED;
--code-toolbar-color: #1485FE;
--code-line-numbers-rows-color: #888;
/*toc*/
--toc-dot-color: #1485FE;
--toc-dot-active-color: #1485FE;
--toc-dot-active-bg-color: #ebedef;
--toc-vertical-line-color: #1485FE;
--toc-item-bg-hover: #1485FE;
}
<#if settings.auto_theme!true>
/* Dark mode */
@media (prefers-color-scheme: dark) {
:root { :root {
--color: #CCC; --color: #333333;
--background: #2c2a2a !important; --background: #f7f7f7;
--cardbgcolor: #343232 !important; --cardbgcolor: #fff;
--cardcolor: #bcbcbc; --cardcolor: #333;
--cardtitlecolor: #bcbcbc; --cardtitlecolor: #333333;
--navbarcolor: #bcbcbc; --navbarcolor: #333333;
--navbarbgcolor: rgba(52, 50, 50, 0.7); --navbarbgcolor: rgba(255, 255, 255, 0.7);
/*--img-default-filter: grayscale(100%);*/ --img-default-filter: none;
img-default-filter: none;
--img-hover-filter: none; --img-hover-filter: none;
--btn-bg-color: #2c2a2a; --btn-bg-color: whitesmoke;
--btn-color: #bcbcbc; --btn-color: #333333;
--btn-hover-color: #3B3C3E; --btn-hover-color: #eeeeee;
--link-color: #1485FE; --link-color: #1485FE;
--link-hover-color: #1485FE; --link-hover-color: #1485FE;
/*code highlight*/ /*code highlight*/
--code-bg-color: #2c2a2a; --code-bg-color: rgb(45, 45, 45);
--code-default-color: #A2A1A1; --code-default-color: rgb(45, 45, 45);
--code-line-numbers-bg-color: #403E3E; --code-line-numbers-bg-color: rgb(45, 45, 45);
--code-line-numbers-color: #fff; --code-line-numbers-color: skyblue;
--code-keyworks-color: #c9c; --code-keyworks-color: #7012cc;
--code-class-color: #f2777a; --code-class-color: #f2777a;
--code-cdata-color: hsl(313, 67%, 36%); --code-cdata-color: hsl(313, 67%, 36%);
--code-symbol-color: hsl(33, 83%, 45%); --code-symbol-color: hsl(33, 83%, 45%);
--code-variable-color: hsl(281, 89%, 64%); --code-variable-color: hsl(281, 89%, 64%);
--code-regex-color: #e90; --code-regex-color: #e90;
--code-deleted-color: red; --code-deleted-color: red;
--code-toolbar-bg-color: #454545; --code-toolbar-bg-color: #EBEDED;
--code-toolbar-color: #fff; --code-toolbar-color: #1485FE;
--code-line-numbers-rows-color: #888; --code-line-numbers-rows-color: #888;
/*toc*/ /*toc*/
--toc-dot-color: #1485FE; --toc-dot-color: #1485FE;
--toc-dot-active-bg-color: rgba(255, 255, 255, 0.2);
--toc-dot-active-color: #1485FE; --toc-dot-active-color: #1485FE;
--toc-vertical-line-color: #888; --toc-dot-active-bg-color: #ebedef;
--toc-bg-bg-hover: #321; --toc-vertical-line-color: #1485FE;
--toc-item-bg-hover: #1485FE;
}
<#if settings.auto_theme!true>
/* Dark mode */
@media (prefers-color-scheme: dark) {
:root {
--color: #CCC;
--background: #2c2a2a !important;
--cardbgcolor: #343232 !important;
--cardcolor: #bcbcbc;
--cardtitlecolor: #bcbcbc;
--navbarcolor: #bcbcbc;
--navbarbgcolor: rgba(52, 50, 50, 0.7);
/*--img-default-filter: grayscale(100%);*/
img-default-filter: none;
--img-hover-filter: none;
--btn-bg-color: #2c2a2a;
--btn-color: #bcbcbc;
--btn-hover-color: #3B3C3E;
--link-color: #1485FE;
--link-hover-color: #1485FE;
/*code highlight*/
--code-bg-color: #2c2a2a;
--code-default-color: #A2A1A1;
--code-line-numbers-bg-color: #403E3E;
--code-line-numbers-color: #fff;
--code-keyworks-color: #c9c;
--code-class-color: #f2777a;
--code-cdata-color: hsl(313, 67%, 36%);
--code-symbol-color: hsl(33, 83%, 45%);
--code-variable-color: hsl(281, 89%, 64%);
--code-regex-color: #e90;
--code-deleted-color: red;
--code-toolbar-bg-color: #454545;
--code-toolbar-color: #fff;
--code-line-numbers-rows-color: #888;
/*toc*/
--toc-dot-color: #1485FE;
--toc-dot-active-bg-color: rgba(255, 255, 255, 0.2);
--toc-dot-active-color: #1485FE;
--toc-vertical-line-color: #888;
--toc-bg-bg-hover: #321;
}
} }
}
</#if> </#if>
html {
background: var(--background);
html { color: var(--color);
background: var(--background); }
color: var(--color); body > .footer, body > .navbar {
} background-color: var(--cardbgcolor);
color: var(--cardcolor);
body > .footer, body > .navbar { }
background-color: var(--cardbgcolor); a:hover {
color: var(--cardcolor); color: var(--link-color);
} }
.content a {
a:hover { color: var(--link-color);
color: var(--link-color); }
} .content a:hover {
color: var(--link-hover-color);
.content a { font-weight: 400;
color: var(--link-color); }
} .card {
background-color: var(--cardbgcolor);
.content a:hover { color: var(--cardcolor);
color: var(--link-hover-color); }
font-weight: 400; .card .card-image img,
} img.thumbnail {
filter: var(--img-default-filter);
.card { }
background-color: var(--cardbgcolor); .card .card-image img:hover,
color: var(--cardcolor); img.thumbnail:hover {
} filter: var(--img-hover-filter);
}
.card .card-image img, .card .title {
img.thumbnail { color: var(--color) !important;
filter: var(--img-default-filter); }
} .navbar-dropdown {
background-color: var(--background);
.card .card-image img:hover, }
img.thumbnail:hover { blockquote {
filter: var(--img-hover-filter); background-color: var(--code-bg-color) !important;
} color: #fff !important;
}
.card .title { .card .content,
color: var(--color) !important; /**
} .card .title a{
color: var(--cardtitlecolor) !important;
.navbar-dropdown { }
background-color: var(--background); */
} .pagination .pagination-link:not(.is-current),
.pagination .pagination-previous,
blockquote { .pagination .pagination-next {
background-color: var(--code-bg-color) !important; background-color: var(--cardbgcolor);
color: #fff !important; color: var(--cardcolor);
} }
.navbar-item, .navbar-link,
.card .content, .navbar-main .navbar-item .sub-menu {
/*.card .title a{*/ color: var(--navbarcolor);
/* color: var(--cardtitlecolor) !important;*/ }
/*}*/ .has-link-black-ter {
.pagination .pagination-link:not(.is-current), color: var(--cardtitlecolor) !important;
.pagination .pagination-previous, }
.pagination .pagination-next { .button {
background-color: var(--cardbgcolor); background-color: var(--btn-bg-color) !important;
color: var(--cardcolor); color: var(--btn-color) !important;
} }
.button:hover {
.navbar-item, .navbar-link, background-color: var(--btn-hover-color) !important;
.navbar-main .navbar-item .sub-menu { }
color: var(--navbarcolor); body > footer > div > div > div.level-end > div > a > i {
background-color: transparent;
} color: var(--color);
}
.has-link-black-ter { .level .level-item.button {
color: var(--cardtitlecolor) !important; background-color: var(--cardbgcolor) !important;
} border-color: var(--cardbgcolor) !important;
color: var(--color) !important;
border: 0;
.button { }
background-color: var(--btn-bg-color) !important; .menu-list .level {
color: var(--btn-color) !important; color: var(--color);
} }
.menu-list a:hover {
.button:hover { background-color: var(--background);
background-color: var(--btn-hover-color) !important; opacity: 0.6;
} color: var(--link-hover-color);
}
body > footer > div > div > div.level-end > div > a > i { .tag:not(body) {
background-color: transparent; background-color: var(--background) !important;
color: var(--color); color: var(--color) !important;
} }
.content .tag {
.level .level-item.button { background-color: transparent !important;
background-color: var(--cardbgcolor) !important; color: var(--code-class-color) !important;
border-color: var(--cardbgcolor) !important; }
color: var(--color) !important; h1,
border: 0; h2,
} h3,
h4,
.menu-list .level { h5,
color: var(--color); h6,
} h7,
strong {
color: var(--color) !important;
.menu-list a:hover { }
background-color: var(--background); .is-active a {
opacity: 0.6; color: var(--color) !important;
color: var(--link-hover-color); }
} a.navbar-item:hover {
background-color: var(--cardbgcolor);
.tag:not(body) { color: #3273dc;
background-color: var(--background) !important; }
color: var(--color) !important; code {
} color: var(--color);
/*background-color: var(--code-bg-color)*/
.content .tag { }
background-color: transparent !important; code[class*="language-"],
color: var(--code-class-color) !important; pre[class*="language-"] {
} color: var(--color);
background-color: var(--code-bg-color) !important;
h1, }
h2, pre[class*="language-"],
h3, :not(pre) > code[class*="language-"] {
h4, background: var(--background);
h5, }
h6, :not(pre) > code[class*="language-"] {
h7, border: red;
strong { }
color: var(--color) !important; .token.comment,
} .token.prolog,
.token.doctype,
.is-active a { .token.cdata {
color: var(--color) !important; color: var(--code-cdata-color);
} }
.token.property,
a.navbar-item:hover { .token.tag,
background-color: var(--cardbgcolor); .token.boolean,
color: #3273dc; .token.number,
} .token.constant,
.token.symbol {
code { color: var(--code-symbol-color);
color: var(--color); }
/*background-color: var(--code-bg-color)*/ .token.selector,
} .token.attr-name,
.token.string,
code[class*="language-"], .token.char,
pre[class*="language-"] { .token.builtin,
color: var(--color); .token.inserted {
background-color: var(--code-bg-color) !important; color: var(--code-class-color);
} }
.token.operator,
pre[class*="language-"], .token.entity,
:not(pre) > code[class*="language-"] { .token.url,
background: var(--background); .language-css .token.string,
} .style .token.string,
.token.variable {
:not(pre) > code[class*="language-"] { color: var(--code-variable-color);
border: red; }
} .token.atrule,
.token.attr-value,
.token.comment, .token.keyword {
.token.prolog, color: var(--code-keyworks-color);
.token.doctype, }
.token.cdata { .token.regex,
color: var(--code-cdata-color); .token.important {
} color: var(--code-regex-color);
}
.token.property, .token.deleted {
.token.tag, color: var(--code-deleted-color);
.token.boolean, }
.token.number, .line-numbers .line-numbers-rows {
.token.constant, background-color: var(--code-line-numbers-bg-color) !important;
.token.symbol { }
color: var(--code-symbol-color); .line-numbers-rows > span:before {
} color: var(--code-line-numbers-color) !important;
}
.token.selector, .line-highlight {
.token.attr-name, background: rgba(21, 21, 21, 0.2) !important;
.token.string, background: -webkit-linear-gradient(left, rgba(21, 21, 21, 0.2) 70%, rgba(21, 21, 21, 0)) !important;
.token.char, background: linear-gradient(to right, rgba(21, 21, 21, 0.2) 70%, rgba(21, 21, 21, 0)) !important;
.token.builtin, }
.token.inserted { div.code-toolbar > .toolbar a,
color: var(--code-class-color); div.code-toolbar > .toolbar button,
} div.code-toolbar > .toolbar span {
background: var(--code-toolbar-bg-color) !important;
.token.operator, /*box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);*/
.token.entity, box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
.token.url, }
.language-css .token.string, div.code-toolbar > .toolbar a:hover,
.style .token.string, div.code-toolbar > .toolbar a:focus,
.token.variable { div.code-toolbar > .toolbar button:hover,
color: var(--code-variable-color); div.code-toolbar > .toolbar button:focus,
} div.code-toolbar > .toolbar span:hover,
div.code-toolbar > .toolbar span:focus {
.token.atrule, color: var(--code-toolbar-color) !important;
.token.attr-value, }
.token.keyword { .line-numbers-rows > span:before {
color: var(--code-keyworks-color); color: #fff;
} }
.content table thead td,
.token.regex, .content table thead th {
.token.important { color: var(--color);
color: var(--code-regex-color); }
} #toc ul li a,
#toc ul li ul li a,
.token.deleted { #toc ul li ul li ul li a {
color: var(--code-deleted-color); color: var(--color);
} }
#toc .active {
color: var(--toc-dot-active-color) !important;
.line-numbers .line-numbers-rows { }
background-color: var(--code-line-numbers-bg-color) !important; #toc > ul li::before {
} background-color: var(--toc-dot-color)
}
.line-numbers-rows > span:before { #toc a:hover {
color: var(--code-line-numbers-color) !important; color: var(--toc-dot-active-color) !important;
} background-color: var(--toc-dot-active-bg-color);
}
.line-highlight { #toc > ul:before {
background: rgba(21, 21, 21, 0.2) !important; background-color: var(--toc-vertical-line-color);
background: -webkit-linear-gradient(left, rgba(21, 21, 21, 0.2) 70%, rgba(21, 21, 21, 0)) !important; }
background: linear-gradient(to right, rgba(21, 21, 21, 0.2) 70%, rgba(21, 21, 21, 0)) !important; .navbar-burger {
} color: var(--color);
}
div.code-toolbar > .toolbar a, .navbar-menu {
div.code-toolbar > .toolbar button, background-color: var(--cardbgcolor);
div.code-toolbar > .toolbar span { }
background: var(--code-toolbar-bg-color) !important; body > .navbar {
/*box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);*/ background-color: var(--navbarbgcolor);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); -webkit-backdrop-filter: blur(20px);
} backdrop-filter: blur(20px);
}
div.code-toolbar > .toolbar a:hover, .content table thead td,
div.code-toolbar > .toolbar a:focus, .content table thead th {
div.code-toolbar > .toolbar button:hover, border: 1px solid var(--background);
div.code-toolbar > .toolbar button:focus, }
div.code-toolbar > .toolbar span:hover, .content table td,
div.code-toolbar > .toolbar span:focus { .content table th {
color: var(--code-toolbar-color) !important; border: 1px solid var(--background);
} }
table {
.line-numbers-rows > span:before { border: 2px solid var(--btn-hover-color);
color: #fff; }
} thead, tbody, tr, th {
border: 1px solid var(--background);
.content table thead td, }
.content table thead th { footer .title {
color: var(--color); color: var(--color);
} }
footer .button {
#toc ul li a, background-color: var(--cardbgcolor) !important;
#toc ul li ul li a, }
#toc ul li ul li ul li a { .has-text-black-ter {
color: var(--color); color: var(--color) !important;
} }
blockquote ul {
#toc .active { padding: 0 10px !important;
color: var(--toc-dot-active-color) !important; margin: 0 !important;
} }
</style>
#toc > ul li::before {
background-color: var(--toc-dot-color)
}
#toc a:hover {
color: var(--toc-dot-active-color) !important;
background-color: var(--toc-dot-active-bg-color);
}
#toc > ul:before {
background-color: var(--toc-vertical-line-color);
}
.navbar-burger {
color: var(--color);
}
.navbar-menu {
background-color: var(--cardbgcolor);
}
body > .navbar {
background-color: var(--navbarbgcolor);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
.content table thead td,
.content table thead th {
border: 1px solid var(--background);
}
.content table td,
.content table th {
border: 1px solid var(--background);
}
table {
border: 2px solid var(--btn-hover-color);
}
thead, tbody, tr, th {
border: 1px solid var(--background);
}
footer .title {
color: var(--color);
}
footer .button {
background-color: var(--cardbgcolor) !important;
}
.has-text-black-ter {
color: var(--color) !important;
}
blockquote ul {
padding: 0 10px !important;
margin: 0 !important;
}
</style>

149
layout/search/local.ftl
View File

@ -1,81 +1,78 @@
<div class="searchbox ins-search"> <div class="searchbox ins-search">
<div class="searchbox-container ins-search-container"> <div class="searchbox-container ins-search-container">
<div class="searchbox-input-wrapper"> <div class="searchbox-input-wrapper">
<form method="get" action="/search"> <form method="get" action="/search">
<input type="text" class="searchbox-input ins-search-input" name="keyword" placeholder="请输入关键字"/> <input type="text" class="searchbox-input ins-search-input" name="keyword" placeholder="请输入关键字"/>
</form> </form>
<span class="searchbox-close ins-close ins-selectable" onclick="closeSearchPanel()"><i class="fas fa-times"></i></span> <span class="searchbox-close ins-close ins-selectable" onclick="closeSearchPanel()"><i class="fas fa-times"></i></span>
</div> </div>
<div class="searchbox-result-wrapper ins-section-wrapper"> <div class="searchbox-result-wrapper ins-section-wrapper">
<div class="ins-section-container"> <div class="ins-section-container">
<#-- <section class="ins-section">--> <#-- <section class="ins-section">-->
<#-- <header class="ins-section-header">最新文章</header>--> <#-- <header class="ins-section-header">最新文章</header>-->
<#-- <@postTag method="latest" top="5">--> <#-- <@postTag method="latest" top="5">-->
<#-- <#list posts as post>--> <#-- <#list posts as post>-->
<#-- <a href="${post.fullPath!}">--> <#-- <a href="${post.fullPath!}">-->
<#-- <div class="ins-selectable ins-search-item">--> <#-- <div class="ins-selectable ins-search-item">-->
<#-- <header><i class="fa fa-file"></i><span class="ins-title">${post.title!}</span>--> <#-- <header><i class="fa fa-file"></i><span class="ins-title">${post.title!}</span>-->
<#-- </header>--> <#-- </header>-->
<#-- <p class="ins-search-preview">${post.summary!}</p>--> <#-- <p class="ins-search-preview">${post.summary!}</p>-->
<#-- </div>--> <#-- </div>-->
<#-- </a>--> <#-- </a>-->
<#-- </#list>--> <#-- </#list>-->
<#-- </@postTag>--> <#-- </@postTag>-->
<#-- </section>--> <#-- </section>-->
<section class="ins-section"> <section class="ins-section">
<header class="ins-section-header">分类</header> <header class="ins-section-header">分类</header>
<div class="level"> <div class="level">
<div class="columns is-multiline" style="padding: 1.5em 2em"> <div class="columns is-multiline" style="padding: 1.5em 2em">
<@categoryTag method="list"> <@categoryTag method="list">
<#list categories as category> <#list categories as category>
<a href="${category.fullPath!}"> <a href="${category.fullPath!}">
<div class="ant-tag ant-tag-purple is-primary is-focused" style="margin-bottom: 8px;"> ${category.name!}</div> <div class="ant-tag ant-tag-purple is-primary is-focused" style="margin-bottom: 8px;"> ${category.name!}</div>
<#-- <div class="ins-selectable ins-search-item">--> <#-- <div class="ins-selectable ins-search-item">-->
<#-- <header>--> <#-- <header>-->
<#-- <i class="fa fa-folder"></i>--> <#-- <i class="fa fa-folder"></i>-->
<#-- <span class="ins-title">${category.name!}</span>--> <#-- <span class="ins-title">${category.name!}</span>-->
<#-- <span class="ins-slug">${category.slug!}</span>--> <#-- <span class="ins-slug">${category.slug!}</span>-->
<#-- </header>--> <#-- </header>-->
<#-- </div>--> <#-- </div>-->
</a> </a>
</#list> </#list>
</@categoryTag> </@categoryTag>
</div>
</div> </div>
</div> </section>
<section class="ins-section">
</section> <header class="ins-section-header">标签</header>
<section class="ins-section"> <div class="level">
<header class="ins-section-header">标签</header> <div class="columns is-multiline" style="padding: 1.5em 2em">
<div class="level"> <@tagTag method="list">
<div class="columns is-multiline" style="padding: 1.5em 2em"> <#list tags as tag>
<@tagTag method="list"> <a href="${tag.fullPath!}">
<#list tags as tag> <div class="ant-tag ant-tag-green" style="margin-bottom: 8px;"> ${tag.name!}</div>
<a href="${tag.fullPath!}"> <#-- <div class="ins-selectable ins-search-item">-->
<div class="ant-tag ant-tag-green" style="margin-bottom: 8px;"> ${tag.name!}</div> <#-- <header>-->
<#-- <i class="fa fa-tag"></i>-->
<#-- <div class="ins-selectable ins-search-item">--> <#-- <span class="ins-title">${tag.name!}</span>-->
<#-- <header>--> <#-- <span class="ins-slug">${tag.slugName!}</span>-->
<#-- <i class="fa fa-tag"></i>--> <#-- </header>-->
<#-- <span class="ins-title">${tag.name!}</span>--> <#-- </div>-->
<#-- <span class="ins-slug">${tag.slugName!}</span>--> </a>
<#-- </header>--> </#list>
<#-- </div>--> </@tagTag>
</a> </div>
</#list>
</@tagTag>
</div> </div>
</div> </section>
</section> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <script>
<script> function openSearchPanel() {
function openSearchPanel() { $(".ins-search").addClass("show");
$(".ins-search").addClass("show"); }
} function closeSearchPanel() {
$(".ins-search").removeClass("show");
function closeSearchPanel() { }
$(".ins-search").removeClass("show"); </script>
}
</script>

2
layout/share/sharejs.ftl
View File

@ -1,4 +1,4 @@
<div class="social-share column is-one-third" style="margin-left: 1.5em;" data-disabled="tencent,linkedin,douban,diandian,google"> <div class="social-share column is-one-third" style="margin-left: 1.5em;" data-disabled="tencent,linkedin,douban,diandian,google,qzone">
<#if is_post??> <#if is_post??>
<a href="#" class="social-share-icon views"> <a href="#" class="social-share-icon views">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="readme" class="svg-inline--fa fa-readme fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M528.3 46.5H388.5c-48.1 0-89.9 33.3-100.4 80.3-10.6-47-52.3-80.3-100.4-80.3H48c-26.5 0-48 21.5-48 48v245.8c0 26.5 21.5 48 48 48h89.7c102.2 0 132.7 24.4 147.3 75 .7 2.8 5.2 2.8 6 0 14.7-50.6 45.2-75 147.3-75H528c26.5 0 48-21.5 48-48V94.6c0-26.4-21.3-47.9-47.7-48.1zM242 311.9c0 1.9-1.5 3.5-3.5 3.5H78.2c-1.9 0-3.5-1.5-3.5-3.5V289c0-1.9 1.5-3.5 3.5-3.5h160.4c1.9 0 3.5 1.5 3.5 3.5v22.9zm0-60.9c0 1.9-1.5 3.5-3.5 3.5H78.2c-1.9 0-3.5-1.5-3.5-3.5v-22.9c0-1.9 1.5-3.5 3.5-3.5h160.4c1.9 0 3.5 1.5 3.5 3.5V251zm0-60.9c0 1.9-1.5 3.5-3.5 3.5H78.2c-1.9 0-3.5-1.5-3.5-3.5v-22.9c0-1.9 1.5-3.5 3.5-3.5h160.4c1.9 0 3.5 1.5 3.5 3.5v22.9zm259.3 121.7c0 1.9-1.5 3.5-3.5 3.5H337.5c-1.9 0-3.5-1.5-3.5-3.5v-22.9c0-1.9 1.5-3.5 3.5-3.5h160.4c1.9 0 3.5 1.5 3.5 3.5v22.9zm0-60.9c0 1.9-1.5 3.5-3.5 3.5H337.5c-1.9 0-3.5-1.5-3.5-3.5V228c0-1.9 1.5-3.5 3.5-3.5h160.4c1.9 0 3.5 1.5 3.5 3.5v22.9zm0-60.9c0 1.9-1.5 3.5-3.5 3.5H337.5c-1.9 0-3.5-1.5-3.5-3.5v-22.8c0-1.9 1.5-3.5 3.5-3.5h160.4c1.9 0 3.5 1.5 3.5 3.5V190z"></path></svg> <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="readme" class="svg-inline--fa fa-readme fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M528.3 46.5H388.5c-48.1 0-89.9 33.3-100.4 80.3-10.6-47-52.3-80.3-100.4-80.3H48c-26.5 0-48 21.5-48 48v245.8c0 26.5 21.5 48 48 48h89.7c102.2 0 132.7 24.4 147.3 75 .7 2.8 5.2 2.8 6 0 14.7-50.6 45.2-75 147.3-75H528c26.5 0 48-21.5 48-48V94.6c0-26.4-21.3-47.9-47.7-48.1zM242 311.9c0 1.9-1.5 3.5-3.5 3.5H78.2c-1.9 0-3.5-1.5-3.5-3.5V289c0-1.9 1.5-3.5 3.5-3.5h160.4c1.9 0 3.5 1.5 3.5 3.5v22.9zm0-60.9c0 1.9-1.5 3.5-3.5 3.5H78.2c-1.9 0-3.5-1.5-3.5-3.5v-22.9c0-1.9 1.5-3.5 3.5-3.5h160.4c1.9 0 3.5 1.5 3.5 3.5V251zm0-60.9c0 1.9-1.5 3.5-3.5 3.5H78.2c-1.9 0-3.5-1.5-3.5-3.5v-22.9c0-1.9 1.5-3.5 3.5-3.5h160.4c1.9 0 3.5 1.5 3.5 3.5v22.9zm259.3 121.7c0 1.9-1.5 3.5-3.5 3.5H337.5c-1.9 0-3.5-1.5-3.5-3.5v-22.9c0-1.9 1.5-3.5 3.5-3.5h160.4c1.9 0 3.5 1.5 3.5 3.5v22.9zm0-60.9c0 1.9-1.5 3.5-3.5 3.5H337.5c-1.9 0-3.5-1.5-3.5-3.5V228c0-1.9 1.5-3.5 3.5-3.5h160.4c1.9 0 3.5 1.5 3.5 3.5v22.9zm0-60.9c0 1.9-1.5 3.5-3.5 3.5H337.5c-1.9 0-3.5-1.5-3.5-3.5v-22.8c0-1.9 1.5-3.5 3.5-3.5h160.4c1.9 0 3.5 1.5 3.5 3.5V190z"></path></svg>

2
layout/widget/toc-post.ftl
View File

@ -114,7 +114,7 @@
var id = that.attr('href'); var id = that.attr('href');
var target = $(id); var target = $(id);
if (scrollTop >= target.offset().top - offset) { if (target.offset() && scrollTop >= target.offset().top - offset) {
anchors.removeClass('active'); anchors.removeClass('active');
anchors.parent().removeClass("lit-active"); anchors.parent().removeClass("lit-active");
that.addClass('active'); that.addClass('active');

6
source/css/style.css
View File

@ -257,6 +257,9 @@ img.thumbnail {
border-left: 0.4rem solid #4b8af3; border-left: 0.4rem solid #4b8af3;
background-color: #e9f5fe; background-color: #e9f5fe;
} }
.content blockquote {
padding: 0.25em 0.5em;
}
.rtl { .rtl {
direction: rtl; direction: rtl;
} }
@ -437,6 +440,9 @@ img.thumbnail {
font-size: 0.95em; font-size: 0.95em;
font-family: 'Fira Sans', monospace, "Microsoft YaHei"; font-family: 'Fira Sans', monospace, "Microsoft YaHei";
} }
.content code {
color: #ff3860 !important;
}
.content blockquote footer strong + cite { .content blockquote footer strong + cite {
margin-left: 0.5em; margin-left: 0.5em;
} }

6
source/css/style.styl
View File

@ -224,7 +224,9 @@ img.thumbnail
blockquote blockquote
border-left: .4rem solid #4b8af3 border-left: .4rem solid #4b8af3
background-color: #e9f5fe background-color: #e9f5fe
.content
blockquote
padding: 0.25em 0.5em
.rtl .rtl
direction: rtl direction: rtl
.level .level
@ -383,6 +385,8 @@ img.thumbnail
code, pre code, pre
font-size: 0.95em font-size: 0.95em
font-family: family-mono font-family: family-mono
code
color: #ff3860 !important
//code //code
// color: hsl(348, 100%, 61%) // color: hsl(348, 100%, 61%)
// background: transparent // background: transparent

2
theme.yaml
View File

@ -7,5 +7,5 @@ description: Fantastic主题修改版，https://github.com/jinqilin721/halo-them
logo: https://blog.xinac.cn/avatar logo: https://blog.xinac.cn/avatar
website: https://github.com/jinqilin721/halo-theme-xinac-fantastic website: https://github.com/jinqilin721/halo-theme-xinac-fantastic
repo: https://github.com/jinqilin721/halo-theme-xinac-fantastic repo: https://github.com/jinqilin721/halo-theme-xinac-fantastic
version: 1.3.2 version: 1.3.3
require: 1.3.0 require: 1.3.0