initialization

This commit is contained in:
julylies 2022-04-10 11:10:56 +08:00
commit 1b498d185a
21 changed files with 3344 additions and 0 deletions

48
archives.ftl Normal file
View File

@ -0,0 +1,48 @@
<#include "module/macro.ftl">
<@layout title="归档 - ${blog_title!}">
<h1>归档</h1>
<ul>
<#list archives as archive>
<h2>${archive.year?c}</h2>
<#list archive.posts as post>
<li>
<a href="${post.fullPath!}">${post.title!}</a>
</li>
</#list>
</#list>
</ul>
<h1>分页</h1>
<#if posts.totalPages gt 1>
<ul>
<@paginationTag method="archives" page="${posts.number}" total="${posts.totalPages}" display="3">
<#if pagination.hasPrev>
<li>
<a href="${pagination.prevPageFullPath!}">
上一页
</a>
</li>
</#if>
<#list pagination.rainbowPages as number>
<li>
<#if number.isCurrent>
<span class="current">第 ${number.page!} 页</span>
<#else>
<a href="${number.fullPath!}">第 ${number.page!} 页</a>
</#if>
</li>
</#list>
<#if pagination.hasNext>
<li>
<a href="${pagination.nextPageFullPath!}">
下一页
</a>
</li>
</#if>
</@paginationTag>
</ul>
<#else>
<span>当前只有一页</span>
</#if>
</@layout>

13
categories.ftl Normal file
View File

@ -0,0 +1,13 @@
<#include "module/macro.ftl">
<@layout title="分类列表 - ${blog_title!}">
<h1>分类列表</h1>
<ul>
<@categoryTag method="list">
<#if categories?? && categories?size gt 0>
<#list categories as category>
<li><a href="${category.fullPath!}">${category.name}</a></li>
</#list>
</#if>
</@categoryTag>
</ul>
</@layout>

45
category.ftl Normal file
View File

@ -0,0 +1,45 @@
<#include "module/macro.ftl">
<@layout title="分类:${category.name} - ${blog_title!}">
<h1>分类:${category.name}</h1>
<ul>
<#list posts.content as post>
<li>
<a href="${post.fullPath}">${post.title}</a>
</li>
</#list>
</ul>
<h1>分页</h1>
<#if posts.totalPages gt 1>
<ul>
<@paginationTag method="categoryPosts" page="${posts.number}" total="${posts.totalPages}" display="3" slug="${category.slug!}">
<#if pagination.hasPrev>
<li>
<a href="${pagination.prevPageFullPath!}">
上一页
</a>
</li>
</#if>
<#list pagination.rainbowPages as number>
<li>
<#if number.isCurrent>
<span class="current">第 ${number.page!} 页</span>
<#else>
<a href="${number.fullPath!}">第 ${number.page!} 页</a>
</#if>
</li>
</#list>
<#if pagination.hasNext>
<li>
<a href="${pagination.nextPageFullPath!}">
下一页
</a>
</li>
</#if>
</@paginationTag>
</ul>
<#else>
<span>当前只有一页</span>
</#if>
</@layout>

43
index.ftl Normal file
View File

@ -0,0 +1,43 @@
<#include "module/macro.ftl">
<@layout title="${blog_title!}">
<#--<h1>公告</h1>
<p>
${settings.index_notice!}
</p>
-->
<main>
<div class="wrap min">
<section class="home-title">
<h1>${blog_title!}</h1>
<span>${user.description!}</span>
<#--快捷-->
<div class="home-social"> </div>
</section>
<section class="home-posts">
<div class="post-item">
<#list posts.content as post>
<h2>
<a href="${post.fullPath!}">${post.title!}</a>
</h2>
<p>${post.summary!}</p>
<div class="post-meta">
<time class="date">${post.createTime?string('yyyy-MM-dd')!}</time>
<span class="category">
<#list post.categories as category>
${category.name!}
</#list></span>
<span class="tags">
<#list post.tags as tag>
<a href="${tag.fullPath}" class="tag">${tag.name}</a>
</#list>
</span>
<span class="comments">${post.commentCount!}°C</span>
<span class="visits">${post.visits!}</span>
</div>
</#list>
</div>
</div>
</main>
</@layout>

18
links.ftl Normal file
View File

@ -0,0 +1,18 @@
<#include "module/macro.ftl">
<@layout title="友情链接 - ${blog_title!}">
<h1>友情链接</h1>
<ul>
<@linkTag method="list">
<#if links?? && links?size gt 0>
<#list links as link>
<li>
<a href="${link.url}" target="_blank" rel="external">${link.name}</a>
<#if link.description!=''>
${link.description}
</#if>
</li>
</#list>
</#if>
</@linkTag>
</ul>
</@layout>

7
module/comment.ftl Normal file
View File

@ -0,0 +1,7 @@
<#macro comment post,type>
<#if !post.disallowComment!false>
<script src="//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<script src="${options.comment_internal_plugin_js!'//cdn.jsdelivr.net/gh/halo-dev/halo-comment@latest/dist/halo-comment.min.js'}"></script>
<halo-comment id="${post.id?c}" type="${type}"/>
</#if>
</#macro>

34
module/macro.ftl Normal file
View File

@ -0,0 +1,34 @@
<#macro layout title>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="${meta_keywords!}"/>
<meta name="description" content="${meta_description!}" />
<link href="${theme_base!}/source/css/kico.css" rel="stylesheet" type="text/css"/>
<link href="${theme_base!}/source/css/single.css" rel="stylesheet" type="text/css"/>
<#--
公共 head 代码详情请参考https://docs.halo.run/zh/developer-guide/theme/public-template-tag
包含Favicon自定义 head 等
-->
<@global.head />
<title>${title}</title>
</head>
<body>
<#-- <#include "menu.ftl">
-->
<#nested >
<#--
公共底部代码详情请参考https://docs.halo.run/zh/developer-guide/theme/public-template-tag
包含:统计代码,底部信息
-->
<script src="${theme_base!}/source/js/kico.js"></script>
<script src="${theme_base!}/source/js/single.js"></script>
<script src="${theme_base!}/source/js/prism.js"></script>
<@global.footer />
</body>
</html>
</#macro>

10
module/menu.ftl Normal file
View File

@ -0,0 +1,10 @@
<@menuTag method="list">
<#--
?sort_by('priority'):根据菜单的排序编号排序
-->
<#list menus?sort_by('priority') as menu>
<li>
<a href="${menu.url}" target="${menu.target!}">${menu.name} </a>
</li>
</#list>
</@menuTag>

9
post.ftl Normal file
View File

@ -0,0 +1,9 @@
<#include "module/macro.ftl">
<@layout title="${post.title!} - ${blog_title!}">
<h1>${post.title!}</h1>
<article>
${post.formatContent!}
</article>
<#include "module/comment.ftl">
<@comment post=post type="post" />
</@layout>

9
settings.yaml Normal file
View File

@ -0,0 +1,9 @@
# 配置详情请参考https://docs.halo.run/zh/developer-guide/theme/config-files
genernal:
label: 基本设置
items:
index_notice:
name: index_notice
label: 首页公告
type: textarea
default: '欢迎来到我的博客'

9
sheet.ftl Normal file
View File

@ -0,0 +1,9 @@
<#include "module/macro.ftl">
<@layout title="${sheet.title!} - ${blog_title!}">
<h1>${sheet.title!}</h1>
<article>
${sheet.formatContent!}
</article>
<#include "module/comment.ftl">
<@comment post=sheet type="sheet" />
</@layout>

1471
source/css/kico.css Normal file

File diff suppressed because it is too large Load Diff

929
source/css/single.css Normal file
View File

@ -0,0 +1,929 @@
@charset "UTF-8";
/* ----
# Single Theme
# By: Dreamer-Paul
# Last Update: 2022.2.25
一个简洁大气含夜间模式的 Typecho 博客模板
本代码为奇趣保罗原创并遵守 MIT 开源协议欢迎访问我的博客https://paugram.com
---- */
/* 0 - 全局
-------------------------------- */
:root{
--blue: #6f9fc7;
--light-blue: #9fcff7;
--border: #ddd;
--dark-border: #ccc;
--light-border: #eee;
--light-background: #fff;
--radius: .25em;
}
body{
color: #555;
font-weight: 300;
background: #fafafa;
transition: margin .3s, background .3s;
}
body:before{
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: .1;
z-index: -1;
display: block;
position: fixed;
background: center/cover no-repeat;
}
::-webkit-scrollbar{
width: 8px;
height: 8px;
}
::-webkit-scrollbar-thumb{ background: #6f9fc7 }
::-webkit-scrollbar-thumb:hover{ background: #9fcff7 }
body::-webkit-scrollbar{
border-left: 1px solid #eee;
border-color: var(--light-border);
background: rgba(255, 255, 255, .6);
}
a{
color: #6f9fc7;
color: var(--blue);
}
a:hover{
color: #9fcff7;
color: var(--light-blue);
}
h1, h2, h3, h4, h5, h6{ font-weight: normal }
hr{ border-color: #eee }
em{ background: #6f9fc7 }
.btn{
color: #fff;
background: #6f9fc7;
background: var(--blue);
}
.btn:hover{
color: #fff;
background: #9fcff7;
background: var(--light-blue);
}
pre{
color: inherit;
border: 1px solid #ccc;
border-color: var(--dark-border);
background: linear-gradient(rgba(18, 18, 18, .05) 50%, transparent 0);
background-size: auto 3em;
background-origin: content-box;
}
blockquote{
background: #ecf1f5;
border-color: #6f9fc7;
border-radius: .25em;
border-radius: var(--radius);
}
input, textarea{
background: #fff;
background: var(--light-background);
}
input[type="text"], input[type="search"], input[type="email"], input[type="url"], textarea, code, hr, tr{
border-color: var(--dark-border);
}
input, textarea, pre, hr, blockquote{
transition: border .3s, background .3s;
}
/* - 夜间风格 */
.dark-theme{
color: #aaa;
background: #333;
--blue: #6e8aad;
--light-blue: #6f9fc7;
--border: #555;
--dark-border: #666;
--light-border: #555;
--light-background: #444;
}
/* -- 额外适配 */
.dark-theme::-webkit-scrollbar{
border-color: transparent;
background: rgba(255, 255, 255, .2);
}
.dark-theme img{
filter: brightness(60%);
-webkit-filter: brightness(60%);
}
.dark-theme blockquote{
color: #ddd;
border-color: #eb9c26;
background: rgba(255, 255, 255, .05);
}
.dark-theme iframe, .dark-theme em{ opacity: .6 }
.dark-theme :not(pre) > code{
color: #ffa5a5;
background: rgba(255, 255, 255, .2);
}
.dark-theme .head-search input{
background: #666;
border-color: transparent;
}
.dark-theme .head-search input::-webkit-input-placeholder{ color: #bbb }
/* 1 - 页眉
-------------------------------- */
header{
top: 0;
left: 0;
right: 0;
z-index: 2;
position: fixed;
line-height: 1em;
background: #fff;
background: var(--light-background);
border-bottom: 1px solid #ddd;
border-color: var(--border);
transition: border-color .3s, background .3s;
}
/* - 头部标题 */
.head-title{
left: 0;
right: 0;
line-height: 3.2em;
position: absolute;
text-align: center;
}
@media screen and (min-width: 600px){
.head-title{ display: none }
}
/* - 头部菜单 */
.head-menu{
display: flex;
list-style: none;
user-select: none;
justify-content: center;
}
.head-menu a{
color: inherit;
display: block;
cursor: pointer;
position: relative;
line-height: 2.25em;
}
.head-menu a:hover{ color: #ffa628 }
.head-menu .has-child > a:after{
float: right;
content: "\f107";
margin-left: .3em;
font-family: "FontAwesome";
}
/* -- 手机版 */
@media screen and (max-width: 599px){
.head-menu{
max-height: 0;
padding: 0 1em;
display: block;
overflow-y: auto;
border-right: .5em solid transparent;
transition: margin .3s, max-height .3s;
}
.head-menu.active{
margin: 1em 0;
max-height: 18rem;
}
.head-menu .sub-menu{ margin-left: 1.5em }
.head-menu .sub-menu a{
display: list-item;
list-style-type: circle;
}
.head-menu::-webkit-scrollbar{
width: 8px;
height: 8px;
}
.head-menu::-webkit-scrollbar-thumb{
border-radius: 5px;
background: rgba(0, 0, 0, .1);
}
}
/* -- 电脑版 */
@media screen and (min-width: 600px){
.head-menu{
top: 0;
left: 0;
right: 0;
position: absolute;
}
.head-menu > a, .has-child > a{
padding: .6em 0;
line-height: 2em;
margin-right: 1em;
}
.head-menu > a:last-child{ margin-right: 0 }
}
/* - 子菜单 */
.head-menu .sub-menu a{
line-height: 2em;
margin-right: .05em;
}
/* -- 电脑版 */
@media screen and (min-width: 600px){
.head-menu .has-child{
position: relative;
}
.head-menu .has-child:hover > .sub-menu{
opacity: 1;
visibility: visible;
}
.head-menu .sub-menu{
opacity: 0;
top: 3.2em;
left: -1em;
background: #fff;
background: var(--light-background);
padding: .5em 1em;
visibility: hidden;
position: absolute;
white-space: nowrap;
border: 1px solid #ddd;
border-color: var(--border);
border-radius: 0 0 .25em .25em;
transition: background .15s, border-color .15s, opacity .15s, visibility .15s;
}
.head-menu .sub-menu:before{
left: 2em;
top: -.5em;
width: 1em;
height: 1em;
content: '';
display: block;
background: #fff;
background: var(--light-background);
border: 1px solid;
position: absolute;
transform: rotate(-45deg);
border-color: #ddd #ddd transparent transparent;
border-color: var(--border) var(--border) transparent transparent;
transition: background .15s, border-color .15s;
}
.toggle-btn{ display: none }
}
.toggle-btn, .light-btn, .search-btn{
z-index: 1;
float: left;
width: 2em;
margin: .6em;
cursor: pointer;
position: relative;
border-radius: .25em;
border-radius: var(--radius);
transition: color 0.3s, background 0.3s;
}
.toggle-btn{ margin-right: 0 }
.search-btn{ float: right }
.toggle-btn:hover, .light-btn:hover, .search-btn:hover{
background: rgba(0, 0, 0, .05);
}
.toggle-btn:before, .light-btn:before, .search-btn:before{
display: block;
text-align: center;
font: 1em/2em "FontAwesome";
}
.toggle-btn:before{ content: "\f0c9" }
.light-btn:before{ content: "\f0eb" }
.search-btn:before{ content: "\f002" }
.head-search{
z-index: 1;
opacity: 0;
float: right;
margin: .6em 0;
line-height: 1.5em;
position: relative;
pointer-events: none;
transition: opacity 0.3s;
}
.head-search.active{
opacity: 1;
pointer-events: inherit;
}
.head-search input{
width: 10em;
height: 2em;
padding: 0 .75em;
min-height: auto;
border-radius: 3em;
}
@media screen and (max-width: 600px){
.head-search{
float: none;
margin-left: 6.5em;
margin-right: 3.5em;
}
.head-search input{ width: 100% }
}
/* 2 - 正文
-------------------------------- */
main{
padding: 3.5em 0;
margin-top: 3.2em;
}
main img {
height: auto;
transition: filter .3s;
}
/* - 首页大标题 */
.home-title{
text-align: center;
margin-bottom: 3em;
animation: fade-in-bottom .3s both; -webkit-animation: fade-in-bottom .3s both;
}
.home-title h1{
color: #6e8aad;
color: var(--blue);
}
.home-title span{
display: block;
margin-bottom: 1em;
font-style: oblique;
}
/* - 社交链接 */
.home-social{
cursor: default;
user-select: none;
}
.home-social a{
color: inherit;
display: inline-block;
}
.home-social i{ padding: .5em }
/* - 文章简要 */
.post-item{
margin-bottom: 3em;
word-break: break-all;
}
.post-item:last-child{ margin-bottom: 0 }
/* -- 动画 */
.post-item:nth-child(1){ animation: fade-in-top .3s .2s backwards; -webkit-animation: fade-in-top .3s .2s backwards; }
.post-item:nth-child(2){ animation: fade-in-top .3s .3s backwards; -webkit-animation: fade-in-top .3s .3s backwards; }
.post-item:nth-child(3){ animation: fade-in-top .3s .4s backwards; -webkit-animation: fade-in-top .3s .4s backwards; }
.post-item:nth-child(4){ animation: fade-in-top .3s .5s backwards; -webkit-animation: fade-in-top .3s .5s backwards; }
.post-item:nth-child(5){ animation: fade-in-top .3s .6s backwards; -webkit-animation: fade-in-top .3s .6s backwards; }
.post-item:nth-child(6){ animation: fade-in-top .3s .7s backwards; -webkit-animation: fade-in-top .3s .7s backwards; }
.post-item:nth-child(7){ animation: fade-in-top .3s .8s backwards; -webkit-animation: fade-in-top .3s .8s backwards; }
.post-item:nth-child(8){ animation: fade-in-top .3s .9s backwards; -webkit-animation: fade-in-top .3s .9s backwards; }
.post-item:nth-child(9){ animation: fade-in-top .3s 1s backwards; -webkit-animation: fade-in-top .3s 1s backwards; }
.post-item:nth-child(10){ animation: fade-in-top .3s 1.1s backwards; -webkit-animation: fade-in-top .3s 1.1s backwards; }
.post-item h2{ margin-bottom: .5em }
.post-item h2 a{
line-height: 2em;
padding-bottom: .3rem;
border-bottom: 2px solid #eee;
border-color: var(--light-border);
transition: color .3s, border .3s;
}
.post-item .edit-link{
font-size: 1rem;
line-height: inherit;
}
/* - 文章属性 */
.post-meta{
overflow: auto;
white-space: nowrap;
}
.post-meta::-webkit-scrollbar{ height: 0 }
.post-meta a{ color: inherit }
.post-meta span, .post-meta time{
margin-right: .8em;
display: inline-block;
}
.post-meta span:last-child{ margin-right: 0 }
.post-meta span:before, .post-meta time:before{
font-size: inherit;
margin-right: .4em;
display: inline-block;
font-family: "FontAwesome";
}
.post-meta .date:before{ content: "\f017" }
.post-meta .category:before{ content: "\f07b" }
.post-meta .tags:before{content: "\f02c";}
.post-meta .visits:before{content: "\f06e";}
.post-meta .user:before{ content: "\f007" }
.post-meta .comments:before{ content: "\f086" }
.post-meta .view:before{ content: "\f080" }
/* - 换页 */
.page-navigator{
cursor: default;
margin-top: 3em;
font-size: 1.25em;
text-align: center;
font-weight: normal;
animation: fade-in-top .3s .7s both; -webkit-animation: fade-in-top .3s .7s both;
}
.page-navigator a{ padding: 0 .3em }
.page-navigator .current a{ color: inherit }
/* - 阅读页标题 */
.post-title, .page-title{
margin-bottom: 1em;
padding-bottom: 1em;
transition: border 0.3s;
border-bottom: 1px solid #ddd;
border-color: var(--border);
animation: fade-in-bottom .3s both; -webkit-animation: fade-in-bottom .3s both;
}
.post-title h2, .page-title h2{
color: #6e8aad;
margin-right: .25rem;
display: inline-block;
}
.page-title h2{ margin-bottom: 0 }
/* - 编辑文章 */
.post-item .edit-link, .page-title .edit-link, .post-title .edit-link{
display: inline-block;
}
/* - 阅读页正文 */
article a{ border-bottom: 1px dashed currentColor }
article img{
border-radius: .25em;
border-radius: var(--radius);
}
.post-content, .page-content{ animation: fade-in-top .3s .2s backwards; -webkit-animation: fade-in-top .3s .2s backwards; }
.post-content, .page-content, .post-near, .post-tags, .post-author{ margin-bottom: 3em }
article h1, article h2, article h3{
margin-top: 3rem;
scroll-margin-top: 5em;
}
article h2{ font-size: 1.15em }
article h3{ font-size: 1.10em }
article h4{ font-size: 1.05em }
article h5{ font-size: 1em }
article h6{ font-size: .9em }
article h1:before,
article h2:before,
article h3:before{
content: "#";
color: #6f9fc7;
color: var(--blue);
margin-right: .5em;
}
article h1:before{ font-weight: bold }
article ul p:first-child{
margin-top: .5em;
margin-bottom: 0;
}
/* - 阅读页其他文章 */
.post-near{
animation: fade-in-top .3s .3s backwards; -webkit-animation: fade-in-top .3s .3s backwards;
}
/* - 阅读页文章标签 */
.post-tags{
display: flex;
flex-wrap: wrap;
margin-bottom: 2.5em;
animation: fade-in-top .3s .3s backwards; -webkit-animation: fade-in-top .3s .3s backwards;
}
.post-tags:before{
content: "\f02c";
margin-right: .75em;
font-family: "FontAwesome";
}
.post-tags a{
margin: 0 .75em .5em 0;
}
/* - 阅读页作者信息 */
.post-author{
display: table;
padding: 1.5em 0;
position: relative;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-color: var(--border);
transition: border .3s, filter .3s;
animation: fade-in-top .3s .4s backwards; -webkit-animation: fade-in-top .3s .4s backwards;
}
.post-author .author-avatar{
width: 5em;
display: table-cell;
vertical-align: middle;
}
.post-author img{ border-radius: 66% }
.post-author .author-info{ margin-left: 1.5em }
.post-author h4{
font-weight: bold;
margin-bottom: .5em;
}
@media screen and (max-width: 800px){
.post-author{
margin-top: 6em;
padding-top: 3em;
}
.post-author .author-avatar{
left: 0;
right: 0;
top: -3em;
margin: auto;
position: absolute;
}
.post-author .author-info{ margin-left: 0 }
.post-author h4{ text-align: center }
}
/* - 阅读页评论 */
.post-comments{
scroll-margin-top: 5em;
animation: fade-in-top .3s .5s backwards; -webkit-animation: fade-in-top .3s .5s backwards;
}
.post-comments input, .post-comments textarea{
-webkit-appearance: none;
-moz-appearance: none;
}
/* -- 评论结构 */
.post-comments{ word-break: break-all }
.comment-form{ margin-bottom: 2em }
.comment-list .comment-single{
position: relative;
padding-left: 3.75em;
margin-bottom: 1.5em;
scroll-margin-top: 5em;
transition: transform .3s;
}
.comment-list .comment-single:after{
content: "";
clear: both;
display: block;
}
.comment-list .comment-single.active{ transform: scale(1.05) }
.comment-list .comment-child{ margin-left: 2em }
/* --- 评论头像 */
.comment-list .avatar{
top: 0;
left: 0;
min-width: 45px;
max-width: 45px;
position: absolute;
border-radius: 100%;
transition: filter .3s, transform .3s;
}
.comment-list .comment-single:hover .avatar{
transform: rotate(1turn);
-webkit-transform: rotate(1turn);
}
/* --- 评论信息 */
.comment-list .comment-meta{
margin-bottom: .25em;
}
.comment-list .comment-time:before{
content: "\f017";
margin-right: .4em;
display: inline-block;
font-family: "FontAwesome";
}
.comment-list .comment-author,
.comment-list .comment-time{
margin-right: .8em;
}
/* --- 评论内容 */
.comment-single .comment-reply{
opacity: 0;
float: right;
line-height: 1.8;
transition: opacity .3s;
}
.comment-single:hover .comment-reply{ opacity: 1 }
.comment-reply a, .cancel-comment-reply a{ color: #aaa }
.comment-reply a:hover, .cancel-comment-reply a:hover{ color: #555 }
.cancel-comment-reply{
display: block;
margin: .5em 0;
text-align: right;
}
@media screen and (max-width: 600px){
.comment-form button{ width: 100% }
}
/* -- 文章目录 */
.article-list{
right: 0;
bottom: 0;
opacity: 0;
z-index: 1;
width: 15em;
padding: 1em;
overflow: auto;
position: fixed;
transform: translateY(0%);
background: rgba(255, 255, 255, .5);
transition: transform .3s, border .3s, opacity .3s, background .3s;
}
.article-list.active{
opacity: 1;
background: #fff;
background: var(--light-background);
transform: translateY(0%);
}
.article-list::-webkit-scrollbar{ width: 0; height: 0 }
.article-list h4{ text-align: center }
.article-list .title{
padding: .25em 1em;
display: inline-block;
transition: border-color .3s;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-color: var(--dark-border);
}
.article-list a{
display: block;
margin-bottom: .5em;
}
.article-list .item-2:before,
.article-list .item-3:before,
.article-list .item-4:before,
.article-list .item-5:before,
.article-list .item-6:before{
margin-right: .5em;
}
.article-list .item-2:before{ content: "-" }
.article-list .item-3:before{ content: "--" }
.article-list .item-4:before{ content: "---" }
.article-list .item-5:before{ content: "----" }
.article-list .item-6:before{ content: "-----" }
@media screen and (min-width: 800px){
body.has-trees{ margin-right: 15em }
.dark-theme .article-list{ background: rgba(0, 0, 0, .1) }
.article-list{
top: 3.2em;
opacity: 1;
visibility: visible;
border-left: 1px solid #ddd;
border-color: var(--border);
}
}
@media screen and (max-width: 799px){
.article-list{
left: 0;
width: 100%;
min-height: 40%;
max-height: 80%;
transform: translateY(100%);
border-top: 1px solid #ddd;
border-color: var(--border);
}
}
/* - 错误页面 */
.error-page{
text-align: center;
animation: fade-in-bottom .3s backwards; -webkit-animation: fade-in-bottom .3s backwards;
}
.error-page h1{
font-size: 5em;
line-height: 1em;
}
.error-page img{ width: 25em }
/* 3 - 页尾
-------------------------------- */
footer{
border-top: 1px solid #eee;
border-color: var(--light-border);
transition: border .3s, background .3s;
}
footer .buttons{
right: 1em;
bottom: 5em;
z-index: 1;
position: fixed;
}
footer .to-top, footer .toggle-list{
padding: .5em;
display: block;
cursor: pointer;
background: #fff;
background: var(--light-background);
border-radius: .25em;
border-radius: var(--radius);
border: 1px solid #eee;
border-color: var(--border);
transform: translateX(5em);
transition: color .3s, border .3s, background .3s, transform .3s;
}
footer .to-top.active{ transform: translateX(0) }
footer .to-top:before, footer .toggle-list:before{
width: 1.5em;
display: block;
content: "\f062";
text-align: center;
font-family: "FontAwesome";
}
footer .toggle-list{
display: none;
margin-top: .5em;
}
footer .toggle-list:before{ content: '\f00b' }
@media screen and (max-width: 800px){
footer .toggle-list{
display: block;
transform: translateX(0);
}
}
footer .widget{ padding: 2em 0 }
footer .title-comments:after,
footer .title-recent:after,
footer .title-date:after{
float: right;
margin-right: .75em;
font-family: "FontAwesome";
}
footer .title-comments:after{ content: "\f0e6" }
footer .title-recent:after{ content: "\f040" }
footer .title-date:after{ content: "\f017" }
footer .widget ul{
margin: 0;
list-style: none;
}
footer .widget ul li{
overflow: hidden;
margin-bottom: .5em;
white-space: nowrap;
text-overflow: ellipsis;
}
footer .widget ul li:before{
opacity: .3;
content: "\f105";
margin-right: .75em;
font-family: "FontAwesome";
}
footer .sub-footer{
padding: 1em 0;
text-align: center;
}
footer .sub-footer p{ font-size: .875em }
/* 4 - 附加
-------------------------------- */
/* - 打印样式 */
@media print {
body{
background: none;
}
body:before, header, .post-comments, .post-near, footer{
display: none;
}
main{
margin-top: 0;
padding: 1.25em 0;
}
.post-author{
margin-bottom: 0;
}
}
/* - Prism 代码块样式 */
.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata{ color: #7D8B99 }
.token.punctuation{ color: #5F6364 }
.token.property, .token.tag, .token.boolean, .token.number, .token.function-name, .token.constant, .token.symbol, .token.deleted{ color: #c92c2c }
.token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted{ color: #2f9c0a }
.token.operator, .token.entity, .token.url, .token.variable{ color: #a67f59 }
.token.atrule, .token.attr-value, .token.keyword, .token.class-name{ color: #1990b8 }
.token.regex, .token.important{ color: #e90 }
.language-css .token.string, .style .token.string {
color: #a67f59;
background: rgba(255, 255, 255, 0.5);
}
.token.bold { font-weight: bold }
.token.italic { font-style: italic }
.token.entity { cursor: help }
.token.important { font-weight: normal }
.namespace { opacity: .7 }

BIN
source/images/404.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

BIN
source/images/icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

418
source/js/kico.js Normal file
View File

@ -0,0 +1,418 @@
/* ----
# Kico Style 1.0
# By: Dreamer-Paul
# Last Update: 2020.4.10
一个可口的极简响应式前端框架
本代码为奇趣保罗原创并遵守 MIT 开源协议欢迎访问我的博客https://paugram.com
---- */
Array.prototype.remove = function (value) {
var index = this.indexOf(value);
if(index > -1) this.splice(index, 1);
};
(function (global, setting) {
var KStyle = function (a, b) {
return KStyle.fn.init(a, b);
};
KStyle.fn = KStyle.prototype = {
construtor: KStyle,
init: function (a, b) {
a = KStyle.selectAll(a);
a.each = function (fn){
return KStyle.each(a, fn);
};
a.image = function () {
return KStyle.image(a);
};
a.lazy = function (bg) {
return KStyle.lazy(a, bg);
};
a.scrollTo = function (offset) {
return KStyle.scrollTo(a, offset);
};
a.empty = function () {
return KStyle.each(a, function (item) { KStyle.empty(item); });
}
return a;
}
};
// 批量处理
KStyle.each = function (data, fn) {
for(var i = 0; i < data.length; i++){
fn(data[i], i, data);
}
};
// 创建对象
KStyle.create = function (tag, prop) {
var obj = document.createElement(tag);
if(prop){
if(prop.id) obj.id = prop.id;
if(prop.src) obj.src = prop.src;
if(prop.href) obj.href = prop.href;
if(prop.class) obj.className = prop.class;
if(prop.text) obj.innerText = prop.text;
if(prop.html) obj.innerHTML = prop.html;
if(prop.child){
if(prop.child.constructor === Array){
KStyle.each(prop.child, (i) => {
obj.appendChild(i);
});
}
else{
obj.appendChild(prop.child);
}
}
if(prop.attr){
if(prop.attr.constructor === Array){
KStyle.each(prop.attr, (i) => {
obj.setAttribute(i.name, i.value);
});
}
else if(prop.attr.constructor === Object){
obj.setAttribute(prop.attr.name, prop.attr.value);
}
}
if(prop.parent) prop.parent.appendChild(obj);
}
return obj;
};
// 选择对象
KStyle.select = function (obj) {
switch(typeof obj){
case "object": return obj; break;
case "string": return document.querySelector(obj); break;
}
};
KStyle.selectAll = function (obj) {
switch(typeof obj){
case "object": return obj; break;
case "string": return document.querySelectorAll(obj); break;
}
};
// 清空子元素
KStyle.empty = function (obj) {
while(obj.firstChild){
obj.removeChild(obj.firstChild);
}
}
// 弹窗
var notice = {
wrap: KStyle.create("notice"),
list: []
};
KStyle.notice = function (content, attr) {
var item = KStyle.create("div", {class: "ks-notice", html: "<span class='content'>" + content + "</span>", parent: notice.wrap});