Repository: Dreamer-Paul/Fantasy
Branch: master
Commit: 30a5c2a03219
Files: 19
Total size: 81.1 KB

Directory structure:
gitextract_cqrwn061/

├── .github/
│   └── ISSUE_TEMPLATE.md
├── 404.php
├── LICENSE
├── README-EN.md
├── README.md
├── archive.php
├── bangumi.php
├── comments.php
├── fantasy.php
├── footer.php
├── functions.php
├── header.php
├── index.php
├── page.php
├── post.php
└── static/
    ├── fantasy.css
    ├── fantasy.js
    ├── kico.css
    └── kico.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .github/ISSUE_TEMPLATE.md
================================================
### 1. 该问题的重现步骤是什么？

### 2. 正常情况下应该是什么结果，你看到的呢？

### 3. 服务器的运行环境是？

- 操作系统版本：
- Apache/Nginx 版本：
- PHP 版本：
- 主题版本：
- 浏览器版本：

[//]: # (如有图片请附上截图)

================================================
FILE: 404.php
================================================
<?php

if (!defined('__TYPECHO_ROOT_DIR__')) exit;

$this->need('header.php');

?>
<main>
    <div class="wrap min">
        <section class="board error-page">
			<div class="post-title">
                <h2>404</h2>
				<p>你正在寻找的文章已经不见了，不妨看看其他文章？</p>
            </div>
			<ul class="archives-list">
<?php

function theme_random_posts(){
	$defaults = array(
		'xformat' => '<li class="archive-post"><a class="archive-post-title" href="{permalink}">{title}</a><span class="date">{date}</span></li>'
	);

	$db = Typecho_Db::get();
	$sql = $db -> select() -> from('table.contents')
		-> where('status = ?','publish')
		-> where('type = ?', 'post')
		-> limit(6)
		-> order('RAND()');
	$result = $db->fetchAll($sql);

	foreach($result as $value){
		$value = Typecho_Widget::widget('Widget_Abstract_Contents') -> filter($value);
		echo str_replace(array('{permalink}', '{title}', '{date}'), array($value['permalink'], $value['title'], date("Y-m-d", $value['created'])), $defaults['xformat']);
	}
}

theme_random_posts();

?>
			</ul>
        </section>
    </div>
</main>

<?php $this->need('footer.php'); ?>

================================================
FILE: LICENSE
================================================
MIT License

Copyright (C) 2018 Dreamer-Paul

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

================================================
FILE: README-EN.md
================================================
![Typecho Theme Fantasy Render Poster - Web Based Version](https://i.imgur.com/BF8J5tG.jpg "Fantasy")


# Fantasy
A Gorgeous, Fantastic Anime-Style Typecho Blog Theme. Based on The Official Website of Anime "Slow Start". <a href="README.md">中文文档</a>

## How to Use It
1. `Star` this project.
1. Download the theme source code from [here](https://github.com/Dreamer-Paul/Fantasy/archive/master.zip).
1. Upload the theme to your server，rename it to `Fantasy` then put it under the  `usr/themes/` content.
1. Log in to your Typecho dashboard，select to enable the theme. Then enjoy it!

## Project Story
Please see my blog post for detail: [Fantasy Anime-Style Theme](https://paugram.com/coding/fantasy-theme.html)

## Opensource License
The project is released and authorise the `MIT` lisence. Base on that, you will still need to keep the original authors' copyright code comments (include but not exclude CSS and JS, etc.). It will be best if you could include the theme's URL at your footer!

It isn't easy to develop this project! If you like it, please support me by `Star` it .

At the same time welcome to [my blog](https://paugram.com/about.html#donate) and donate me, thank you!

## Credit
### Used Opensource Project
 - [Kico Style](https://github.com/Dreamer-Paul/Kico-Style)
 - [Font Awesome](https://github.com/FortAwesome/Font-Awesome)

================================================
FILE: README.md
================================================
![Typecho Theme Fantasy Render Poster - Web Based Version](https://i.imgur.com/BF8J5tG.jpg "Fantasy")


# Fantasy
一个优美梦幻的动漫风 Typecho 博客主题。基于动漫 “Slow Start” 官网的设计风格编写而成。<a href="../master/README-EN.md">English Document</a>

## 使用方法
1. `Star` 本项目
1. 从这里 [下载](https://github.com/Dreamer-Paul/Fantasy/archive/master.zip) 主题源码
1. 上传本主题，重命名为 `Fantasy` 并放置在 `usr/themes/` 目录下
1. 登录你的 Typecho 后台，选择启用主题即可食用~

## 项目故事
详见我的博文：[Fantasy 动漫风主题](https://paugram.com/coding/fantasy-theme.html)

## 开源协议
本项目采用 `MIT` 开源协议进行授权，并在其基础上须保留原作者的版权注释（包括但不限于 CSS、JS 等文件），当然能在页尾写上主题地址就是最好的啦~

原创不易！如果喜欢本项目，请 `Star` 它以示对我的支持~

同时欢迎前往 [我的博客](https://paugram.com/about.html#donate) 为我提供赞助，谢谢您！

## 使用的开源项目
 - [Kico Style](https://github.com/Dreamer-Paul/Kico-Style)
 - [Font Awesome](https://github.com/FortAwesome/Font-Awesome)

================================================
FILE: archive.php
================================================
<?php

if (!defined('__TYPECHO_ROOT_DIR__')) exit;

$this->need('header.php');

?>
<main>
    <div class="wrap min">
        <section class="board head">
            <h3><?php $this->archiveTitle(array(
                'category'  =>  _t('<i class="fa fa-folder"></i>%s'),
                'search'    =>  _t('<i class="fa fa-search"></i>搜索结果：%s'),
                'tag'       =>  _t('<i class="fa fa-tags"></i>%s'),
                'author'    =>  _t('<i class="fa fa-user"></i>%s 的文章')
            ), '', ''); ?></h3>
        </section>
        <section class="board">
<?php if ($this->have()): ?>
<?php while($this->next()): ?>
            <div class="post-item">
                <time class="date"><?php $this->date(); ?></time>
                <h3 class="title"><a href="<?php $this->permalink() ?>"><?php $this->title() ?></a></h3>
            </div>
<?php endwhile; ?>
<?php else: ?>
            <p>没有找到结果 (QWQ)</p>
<?php endif; ?>
        </section>
        <?php $this->pageNav('', ''); ?>
    </div>
</main>

<?php $this->need('footer.php'); ?>

================================================
FILE: bangumi.php
================================================
<?php

/**
 * 追番
 *
 * @package custom
 */

if (!defined('__TYPECHO_ROOT_DIR__')) exit;

$this->need('header.php');

?>
<main>
    <div class="wrap min">
        <section class="board">
            <div class="post-title">
                <h2><?php $this->title() ?></h2>
            </div>
            <article class="post-content exclude-img">
                <div class="row">
                    <?php Fantasy::bangumi($this); ?>
                </div>
            </article>
        </section>
        <?php $this->need('comments.php'); ?>
    </div>
</main>

<?php $this->need('footer.php'); ?>

================================================
FILE: comments.php
================================================
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php function threadedComments($comments, $options) {
    $commentClass = '';
    if ($comments->authorId) {
        if($comments->authorId == $comments->ownerId){
            $commentClass .= ' by-author';
        }
    }

    $commentLevelClass = $comments->levels > 0 ? ' comment-child' : ' comment-parent';
?>

    <div class="comment-item<?php echo $commentClass ?>" id="<?php $comments->theId(); ?>">
        <?php $comments -> gravatar('150', 'wavatar'); ?>
        <div class="content">
            <div class="comment-meta">
                <span class="comment-author"><?php $comments->author(); ?></span>
                <time class="comment-time"><?php $comments->date(); ?></time>
                <span class="comment-reply"><?php $comments->reply(); ?></span>
            </div>
            <?php $comments->content(); ?>
        </div>
<?php if ($comments->children) { ?>
        <div class="comment-children">
            <?php $comments->threadedComments($options); ?>
        </div>
<?php } ?>
    </div>
<?php } ?>

<?php if($this->allow('comment')): ?>
        <section class="board">
            <h3>参与讨论</h3>
            <?php $this->comments()->to($comments); ?>
            <div id="<?php $this->respondId(); ?>">
                <form class="comment-form" id="<?php $this->respondId(); ?>" action="<?php $this->commentUrl() ?>" id="comment-form" role="form">
                    <div class="cancel-reply"><?php $comments->cancelReply(); ?></div>
                    <figure class="comment-avatar">
<?php if($this->user->hasLogin()): ?>
                        <img src="<?php echo Typecho_Common::gravatarUrl($this->user->mail, 150, 'X', 'mm', true) ?>"/>
<?php else: ?>
                        <img src="<?php $this->options->themeUrl('static/img/avatar.jpg'); ?>"/>
<?php endif; ?>
                    </figure>
                    <fieldset>
                        <textarea rows="2" name="text" placeholder="说下感想吧！" required><?php $this->remember('text'); ?></textarea>
<?php if(!$this->user->hasLogin()): ?>
                        <input type="text" name="author" placeholder="昵称 *：" value="<?php $this->remember('author'); ?>" required="">
                        <input type="email" name="mail" placeholder="电邮 *：" value="<?php $this->remember('mail'); ?>"<?php if ($this->options->commentsRequireMail): ?> required<?php endif; ?>>
                        <input type="url" name="url" placeholder="http://" value="<?php $this->remember('url'); ?>"<?php if ($this->options->commentsRequireURL): ?> required<?php endif; ?>>
<?php else: ?>
                        <p class="logined"><a href="<?php $this->options->profileUrl(); ?>"><?php $this->user->screenName(); ?></a>，欢迎回来！不是你？<a href="<?php $this->options->logoutUrl(); ?>" title="登出">登出</a></p>
<?php endif; ?>
                        <button class="btn submit" type="submit"></button>
                    </fieldset>
                </form>
            </div>
<?php if ($comments->have()): ?>
        <?php $comments->listComments(array('before' => '<div class="comment-list">', 'after' => '</div>')); ?>
        <?php $comments->pageNav('', '', 3, '...', array('wrapTag' => 'section', 'itemTag' => 'span')); ?>
<?php else: ?>
    <p class="no-comment">还没有评论呢！</p>
<?php endif; ?>
<?php endif; ?>
        </section>

================================================
FILE: fantasy.php
================================================
<?php

class Fantasy {
    // HTTPS 转换
    static function convert_https($url){
        return preg_replace("/^http:/", "https:", $url);
    }

    // 追番
    static function bangumi($t){
        $uid = Typecho_Widget::widget('Widget_Options') -> bgm_user;
        $uid = $uid ? $uid : 433599;
        $bgm = file_get_contents("https://api.bgm.tv/user/" . $uid . "/collection?cat=playing");
        $bgm = json_decode($bgm);

        if($bgm){
            foreach($bgm as $item){
                $bid  = $item -> subject -> id;
                $name = $item -> subject -> name_cn ? $item -> subject -> name_cn : $item -> subject -> name;
                $seem = $item -> ep_status;
                $image = self::convert_https($item -> subject -> images -> large);
                $total = property_exists($item -> subject, "eps_count") ? $item -> subject -> eps_count : $seem;
                $width = (int)$seem / $total * 100;
?>
                    <div class="col-6 col-m-4">
                        <a class="bangumi-item" target="_blank" href="https://bgm.tv/subject/<?php echo $bid ?>">
                            <div class="bangumi-img" style="background-image: url(<?php echo $image ?>)">
                                <div class="bangumi-status">
                                    <div class="bangumi-status-bar" style="width: <?php echo $width ?>%"></div>
                                    <p>进度：<?php echo $seem ?> / <?php echo $total ?></p>
                                </div>
                            </div>
                            <h3><?php echo $name ?></h3>
                        </a>
                    </div>
<?php
            }
        }
        else{
?>
                    <div class="col-12">
                        <p>追番数据获取失败，请检查如下细节：</p>
                        <ul>
                            <li>用户 ID 是否正确？</li>
                            <li>该用户是否在“在看”添加了番剧？</li>
                            <li>服务器能否正常连接 <code>api.bgm.tv</code> ？</li>
                        </ul>
                    </div>
<?php
        }

        unset($bid, $name, $seem, $total, $img, $width);
    }

    // 时间转换
    static function tran_time($ts){
        $dur = time() - $ts;

        if($dur < 0){
            return $ts;
        }
        else if($dur < 60){
            return $dur . ' 秒前';
        }
        else if($dur < 3600){
            return floor($dur / 60) . ' 分钟前';
        }
        else if($dur < 86400){
            return floor($dur / 3600) . ' 小时前';
        }
        else if($dur < 604800){ // 七天内
            return floor($dur / 86400) . ' 天前';
        }
        else if($dur < 2592000){ // 一个月内
            return floor($dur / 604800) . " 周前";
        }

        else{
            return date("y.m.d", $ts);
        }
    }

    // 上次登录
    static function get_last_login(){
        $db = Typecho_Db::get();
        $query = $db -> select() -> from('table.users');
        $logged = $db -> fetchRow($query)["logged"];

        return self::tran_time($logged);
    }
}

================================================
FILE: footer.php
================================================
<footer>
    <div class="wrap mid">
        <section class="foot-action">
            <div class="to-top"></div>
        </section>
        <section class="foot-widget">
            <div class="row">
                <div class="col-m-3">
                    <h3>最新文章：</h3>
                    <ul class="clear">
                        <?php $this -> widget('Widget_Contents_Post_Recent', 'pageSize=6') -> parse('<li><a href="{permalink}" target="_blank">{title}</a></li>'); ?>
                    </ul>
                </div>
                <div class="col-m-3">
                    <h3>时光机：</h3>
                    <ul class="clear">
                        <?php $this -> widget('Widget_Contents_Post_Date', 'type=month&format=Y 年 m 月&limit=6') -> parse('<li><a href="{permalink}" rel="nofollow" target="_blank">{date}</a></li>'); ?>
                    </ul>
                </div>
                <div class="col-m-3">
                    <h3>最近评论：</h3>
                    <div class="foot-comments">
<?php $this -> widget('Widget_Comments_Recent', 'pageSize=5') -> to($comments); ?>
                        <?php while($comments -> next()): ?>
                            <a href="<?php $comments -> permalink(); ?>" rel="nofollow" target="_blank"><img src="<?php echo Typecho_Common::gravatarUrl($comments -> mail, 32, 'X', 'wavatar', $this -> request -> isSecure()) ?>"/><?php $comments -> author(false); ?>：<?php $comments -> excerpt(10, '...'); ?></a>
                        <?php endwhile; ?>
                    </div>
                </div>
                <div class="col-m-3">
                    <h3>站点信息：</h3>
                    <ul class="clear">
<?php Typecho_Widget::widget('Widget_Stat')->to($stat); ?>
                        <li>文章：<?php $stat->publishedPostsNum() ?> 篇</li>
                        <li>分类：<?php $stat->categoriesNum() ?> 个</li>
                        <li>评论：<?php $stat->publishedCommentsNum() ?> 条</li>
                        <li>页面：<?php $stat->publishedPagesNum() ?> 个</li>
                        <li>上次更新：<?php echo Fantasy::tran_time($this -> modified) ?></li>
                        <li>上次登录：<?php echo Fantasy::get_last_login() ?></li>
                    </ul>
                </div>
            </div>
        </section>
        <section class="foot-copyright">
            <div class="row">
                <div class="col-m-6 left bottom to-center">
<?php if(in_array('verify', $this -> options -> footer_content) && $this -> options -> verify_num): ?>
                    <p><a href="http://www.miitbeian.gov.cn" rel="nofollow" target="_blank"><?php $this -> options -> verify_num() ?></a></p>
<?php endif; ?>
<?php if(in_array('link', $this -> options -> footer_content) && $this -> options -> home_social): ?>
                    <p class="foot-social"><?php $this -> options -> home_social() ?></p>
<?php endif; ?>
<?php if(in_array('time', $this -> options -> footer_content)): ?>
                    <p class="foot-date">站点已萌萌哒存活了 <a>?</a> 天 <a>?</a> 小时 <a>?</a> 分 <a>?</a> 秒</p>
<?php endif; ?>
<?php if(in_array('hitokoto', $this -> options -> footer_content)): ?>
                    <p class="foot-hitokoto">重要的是无论我们选择哪条路，都要担负起选择的责任。</p>
<?php endif; ?>
                </div>
                <div class="col-m-6 right bottom to-center">
                    <p>&copy; <?php echo date('Y') ?> <a href="<?php $this -> options -> siteUrl() ?>"><?php $this->options->title(); ?></a>. 版权所有.</p>
                    <p>Published With <a href="http://typecho.org" target="_blank" rel="nofollow">Typecho.</a> Theme By <a href="https://github.com/Dreamer-Paul/Fantasy" target="_blank" rel="nofollow">Fantasy</a>.</p>
                </div>
            </div>
        </section>
    </div>
</footer>

<script src="<?php $this->options->themeUrl('static/kico.js'); ?>"></script>
<script src="<?php $this->options->themeUrl('static/fantasy.js'); ?>"></script>
<script>var fantasy = new Fantasy_Theme({created: <?php if($this -> options -> site_created): ?>"<?php echo $this -> options -> site_created; ?>"<?php else: ?>false<?php endif; ?>});</script>
<?php $this -> options -> custom_script() ?>
<?php $this -> footer() ?>

</body>
</html>

================================================
FILE: functions.php
================================================
<?php
if (!defined('__TYPECHO_ROOT_DIR__')) exit;

require_once("fantasy.php");

function themeConfig($form) {

    // 插件信息与更新检测
    function paul_update($name, $version){
        echo "<style>.paul-info{text-align:center; margin:1em 0;} .paul-info > *{margin:0 0 1rem} .buttons a{background:#467b96; color:#fff; border-radius:4px; padding:.5em .75em; display:inline-block}</style>";
        echo "<div class='paul-info'>";
        echo "<h2>Fantasy 主题 (".$version.")</h2>";
        echo "<p>By: <a href='https://github.com/Dreamer-Paul'>Dreamer-Paul</a></p>";
        echo "<p class='buttons'><a href='https://paugram.com/coding/fantasy-theme.html'>项目介绍</a>
              <a href='https://github.com/Dreamer-Paul/Fantasy/releases'>更新日志</a></p>";

        $update = file_get_contents("https://api.paugram.com/update/?name=".$name."&current=".$version."&site=".$_SERVER['HTTP_HOST']);
        $update = json_decode($update, true);

        if(isset($update['text'])){echo "<p>".$update['text']."</p>"; };
        if(isset($update['message'])){echo "<p>".$update['message']."</p>"; };

        echo "</div>";
    }
    paul_update("Fantasy", "1.3");

    // 自定义站点图标
    $favicon = new Typecho_Widget_Helper_Form_Element_Text('favicon', NULL, NULL, _t('站点图标'), _t('在这里填入一张 png 图片地址（<a>192x192px</a>），不填则使用默认图标'));
    $form -> addInput($favicon);

    // 自定义背景图
    $background = new Typecho_Widget_Helper_Form_Element_Text('background', NULL, NULL, _t('站点背景'), _t('在这里填入一张图片地址，不填则显示默认背景'));
    $form->addInput($background);

    // 自定义社交链接
    $home_social = new Typecho_Widget_Helper_Form_Element_Textarea('home_social', NULL, NULL, _t('自定义社交链接'), _t('在这里填入你的自定义社交链接，不填则不输出。（格式请看<a href="https://github.com/Dreamer-Paul/Single/releases/tag/1.1" target="_blank">帮助信息</a>）'));
    $form -> addInput($home_social);

    // 自定义样式表
    $custom_css = new Typecho_Widget_Helper_Form_Element_Textarea('custom_css', NULL, NULL, _t('自定义样式表'), _t('在这里填入你的自定义样式表，不填则不输出'));
    $form -> addInput($custom_css);

    // 自定义统计代码
    $custom_script = new Typecho_Widget_Helper_Form_Element_Textarea('custom_script', NULL, NULL, _t('统计代码'), _t('在这里填入你的统计代码，不填则不输出。需要 <a>&lt;script&gt;</a> 标签'));
    $form->addInput($custom_script);

    // 建站时间
    $site_created = new Typecho_Widget_Helper_Form_Element_Text('site_created', NULL, '2018/07/09', _t('建站日期'), _t('在这里填入一个建站日期（格式：<a>2018/07/09</a>），不填则无法正常输出运行时间'));
    $form -> addInput($site_created);

    // 备案号
    $verify_num = new Typecho_Widget_Helper_Form_Element_Text('verify_num', NULL, '', _t('备案号'), _t('在这里填入一个备案号，不填则无法输出'));
    $form -> addInput($verify_num);

    // 追番用户 ID
    $bgm_user = new Typecho_Widget_Helper_Form_Element_Text('bgm_user', NULL, '', _t('追番用户 ID'), _t('在这里填入一个 <a>bangumi.tv</a> 的用户 ID，用于追番页面的输出，不填则输出作者的追番记录'));
    $form -> addInput($bgm_user);

    // 页尾展示内容
    $footer_content = new Typecho_Widget_Helper_Form_Element_Checkbox('footer_content',
        array(
            'verify' => _t('备案号'),
            'link' => _t('社交链接'),
            'time' => _t('运行时间'),
            'hitokoto' => _t('随机一言')
        ),
        array('time', 'hitokoto'), _t('页尾展示内容'));
    $form -> addInput($footer_content -> multiMode());
}

function themeInit($archive){

    // AJAX 头像
    if(isset($_GET['action']) && $_GET['action'] == 'gravatar' && $_GET['email']){
        $host = 'https://secure.gravatar.com/avatar/';
        $email = strtolower($_GET['email']);
        $hash = md5($email);

        $reply = $host . $hash . '?d=robohash';

        header("location: $reply");
        die();
    }
}

================================================
FILE: header.php
================================================
<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
    <meta charset="UTF-8">
    <title><?php $this -> archiveTitle(array(
            'category'  =>  _t('%s'),
            'search'    =>  _t('含关键词 %s 的文章'),
            'tag'       =>  _t('标签 %s 下的文章'),
            'author'    =>  _t('%s 发布的文章')
        ), '', ' - '); $this -> options -> title(); ?></title>
<?php if($this -> options -> favicon): ?>
    <link rel="icon" href="<?php $this -> options -> favicon() ?>" sizes="192x192"/>
<?php else: ?>
    <link rel="icon" href="<?php $this -> options -> themeUrl('static/img/icon.png'); ?>" sizes="192x192"/>
<?php endif; ?>
    <link href="<?php $this -> options -> themeUrl('static/kico.css'); ?>" rel="stylesheet" type="text/css"/>
    <link href="<?php $this -> options -> themeUrl('static/fantasy.css'); ?>" rel="stylesheet" type="text/css"/>
    <link href="https://fastly.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>
    <?php $this->header('generator=&template=&pingback=&xmlrpc=&wlw='); ?>
<?php if($this -> options -> background): ?>
    <style>body{ background: url(<?php $this -> options -> background() ?>) center/cover fixed }</style>
<?php endif; ?>
<?php if($this -> options -> custom_css): ?>
    <style><?php $this -> options -> custom_css() ?></style>
<?php endif; ?>
</head>
<body>
<aside>
    <nav class="side-nav">
        <a href="<?php $this -> options -> siteUrl() ?>">首页</a>
        <?php $this -> widget('Widget_Contents_Page_List') -> parse('<a href="{permalink}">{title}</a>'); ?>
<?php if($this -> user -> hasLogin()): ?>
        <a href="<?php $this -> options -> adminUrl() ?>" target="_blank">进入后台</a>
<?php endif; ?>
    </nav>
    <nav class="side-action">
        <div class="search-btn"></div>
    </nav>
    <div class="side-window">
        <div class="side-wrap">
            <form class="search-form" method="post">
                <input type="text" name="s" placeholder="搜索什么？">
            </form>
            <div class="side-category color-bar">
                <?php $this -> widget('Widget_Metas_Category_List') -> parse('<a href="{permalink}">{name}</a>'); ?>
            </div>
        </div>
    </div>
</aside>
<header>
    <div class="toggle"></div>
    <div class="wrap min">
        <h1 class="headline"><span><?php $this->options->title() ?></span></h1>
<?php if ($this->options->home_social): ?>
        <div class="head-social">
<?php $this->options->home_social() ?>
        </div>
<?php endif; ?>
    </div>
</header>

================================================
FILE: index.php
================================================
<?php

/**
 * 一个优美梦幻的动漫风 Typecho 博客主题。
 *
 * @package Fantasy Theme
 * @author Dreamer-Paul
 * @version 1.3
 * @link https://paugram.com
 */

if (!defined('__TYPECHO_ROOT_DIR__')) exit;

$this->need('header.php');

?>
<main>
    <div class="wrap min">
        <section class="board">
<?php while($this->next()): ?>
            <div class="post-item">
                <time class="date"><?php $this->date(); ?></time>
                <h3 class="title"><a href="<?php $this->permalink() ?>"><?php $this->title() ?></a></h3>
            </div>
<?php endwhile; ?>
        </section>
        <?php $this->pageNav('', '', 3, '...', array('wrapTag' => 'section', 'itemTag' => 'span')); ?>
    </div>
</main>

<?php $this->need('footer.php'); ?>

================================================
FILE: page.php
================================================
<?php

if (!defined('__TYPECHO_ROOT_DIR__')) exit;

$this->need('header.php');

?>
<main>
    <div class="wrap min">
        <section class="board">
            <div class="post-title">
                <h2><?php $this->title() ?></h2>
<?php if($this->authorId == $this->user->uid): ?>
                <div class="post-meta">
                    <time class="date"><?php $this->date(); ?></time>
                    <span class="comments"><?php $this->commentsNum('%d 条评论'); ?></span>
                    <span class="edit"><a href="<?php $this->options->adminUrl(); ?>write-page.php?cid=<?php echo $this->cid;?>" target="_blank">编辑</a></span>
                </div>
<?php endif; ?>
            </div>
            <article class="post-content">
                <?php $this->content(); ?>
            </article>
        </section>
        <?php $this->need('comments.php'); ?>
    </div>
</main>

<?php $this->need('footer.php'); ?>

================================================
FILE: post.php
================================================
<?php

if (!defined('__TYPECHO_ROOT_DIR__')) exit;

$this->need('header.php');

?>
<main>
    <div class="wrap min">
        <section class="board">
            <div class="post-title">
                <h2><?php $this->title() ?></h2>
                <div class="post-meta">
                    <time class="date"><?php $this->date(); ?></time>
                    <span class="category"><?php $this->category('，'); ?></span>
                    <span class="comments"><?php $this->commentsNum('%d 评论'); ?></span>
<?php if($this->authorId == $this->user->uid): ?>
                    <span class="edit"><a href="<?php $this->options->adminUrl(); ?>write-post.php?cid=<?php echo $this->cid;?>" target="_blank">编辑</a></span>
<?php endif; ?>
                </div>
            </div>
            <article class="post-content">
                <?php $this->content(); ?>
            </article>
        </section>
        <?php $this->need('comments.php'); ?>
    </div>
</main>

<?php $this->need('footer.php'); ?>

================================================
FILE: static/fantasy.css
================================================
@charset "UTF-8";

/* ----

# Fantasy Theme
# By: Dreamer-Paul
# Last Update: 2018.2.10

一个优美梦幻的动漫风 Typecho 博客主题。

本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com

---- */

/* 0 - 全局
-------------------------------- */
body{
    color: #777790;
    background: #f7f7f7 url("img/pattern-1.png") repeat top center;
}

a, a:hover{ color: #ffa9be }

em{ background: #ffa9be }

h1, h2, h3{ font-weight: normal }

hr{ border-top: 2px #ccc dashed }

blockquote{
    color: #999;
    padding: 1em;
    border-radius: 1em;
    background: #fafafa;
    border: 2px #ccc dashed;
}

/* 1 - 页眉
-------------------------------- */
header .toggle{
    top: 1rem;
    right: 1rem;
    z-index: 2;
    width: 3em;
    height: 3em;
    display: none;
    cursor: pointer;
    position: fixed;
    background: #fff;
    border-radius: 66%;
    box-shadow: 0 0 20px rgba(0, 0, 0, .4);
}
header .toggle:before{
    display: block;
    content: "\f0c9";
    text-align: center;
    font: 1em/3em "FontAwesome";
}

/* 2 - 侧边栏
-------------------------------- */
aside{
    left: 0;
    top: 8em;
    z-index: 2;
    position: fixed;
    user-select: none;
}
aside::-webkit-scrollbar{ width: 0 }

/* - 侧边导航 */
.side-nav{
    z-index: 0;
    background: #fff;
    overflow: hidden;
    position: relative;
    border-radius: 0 1em 1em 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}
.side-nav a{
    color: #777790;
    display: block;
    padding: 1em 2em;
    position: relative;
}
.side-nav a:before{
    top: 0;
    left: 0;
    bottom: 0;
    width: .5em;
    content: '';
    z-index: -1;
    position: absolute;
    transition: width .3s;
}
.side-nav a:hover{ color: #fff }
.side-nav a:hover:before{ width: 100% }

.side-nav a:nth-child(1):before{ background: #ff8b46 }
.side-nav a:nth-child(2):before{ background: #ffc71d }
.side-nav a:nth-child(3):before{ background: #d4f00f }
.side-nav a:nth-child(4):before{ background: #b1c6ff }
.side-nav a:nth-child(5):before{ background: #dcb5ff }
.side-nav a:nth-child(6):before{ background: #ff9fab }
.side-nav a:nth-child(7):before{ background: #eae489 }
.side-nav a:nth-child(8):before{ background: #acf0dc }
.side-nav a:nth-child(9):before{ background: #f9dba7 }
.side-nav a:nth-child(10):before{ background: #a9d6f6 }
.side-nav a:nth-child(11):before{ background: #b5e8a4 }
.side-nav a:nth-child(12):before{ background: #ffb7a5 }

/* - 侧边功能 */
.side-action{
    margin: 1em;
    text-align: center;
}
.side-action .search-btn{ cursor: pointer }
.side-action .search-btn:before{
    content: "\f002";
    font: 1em/2em "FontAwesome";
}

/* - 功能窗 */
.side-window{
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    display: table;
    position: fixed;
    visibility: hidden;
    background: rgba(255, 255, 255, .9);
    transition: opacity .3s, visibility .3s;
}
.side-window.active{
    opacity: 1;
    visibility: visible;
}
.side-wrap{
    display: table-cell;
    vertical-align: middle;
}

/* -- 搜索框和分类 */
.search-form, .side-category{
    width: 90%;
    margin: 0 auto;
    max-width: 600px;
}
.side-window.active .search-form, .side-window.active .side-category{
    animation: fade-in-bottom .5s; -webkit-animation: fade-in-bottom .5s;
}

.search-form input{
    width: 100%;
    border: none;
    display: block;
    font-size: 1.5em;
    border-radius: 0;
    max-width: 600px;
    padding: 0 0 .5em;
    line-height: 1.5em;
    border-bottom: 2px solid #777790;
}

.side-category{
    text-align: center;
    margin: 2em auto 0 auto;
}

.color-bar a{
    color: #fff;
    margin: .25em;
    font-size: .85em;
    border-radius: 3em;
    padding: .5em .75em;
    background: #777790;
    display: inline-block;
}

.color-bar a:nth-child(1){ background: #ff8b46 }
.color-bar a:nth-child(2){ background: #ffc71d }
.color-bar a:nth-child(3){ background: #d4f00f }
.color-bar a:nth-child(4){ background: #b1c6ff }
.color-bar a:nth-child(5){ background: #dcb5ff }
.color-bar a:nth-child(6){ background: #ff9fab }
.color-bar a:nth-child(7){ background: #eae489 }
.color-bar a:nth-child(8){ background: #acf0dc }
.color-bar a:nth-child(9){ background: #f9dba7 }
.color-bar a:nth-child(10){ background: #a9d6f6 }
.color-bar a:nth-child(11){ background: #b5e8a4 }
.color-bar a:nth-child(12){ background: #ffb7a5 }

@media screen and (max-width: 600px){
    header .toggle, .side-wrap{ display: block }

    aside{
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
        border-radius: 0;
        transition: transform .3s;
        transform: translateX(-100%);
        background: rgba(255, 255, 255, .95);
    }
    aside.active{ transform: translateX(0) }

    .side-nav{
        background: none;
        box-shadow: none;
        border-radius: 0;
    }
    .side-nav a:hover{ color: inherit }
    .side-nav a:hover:before{ width: 1em }

    .side-action{ display: none }

    .side-window{
        opacity: 1;
        height: auto;
        display: block;
        margin-top: 3em;
        position: static;
        background: none;
        visibility: visible;
    }

    .search-form input{ font-size: 1em }
}

/* 3 - 正文
-------------------------------- */
header{ margin: 3em 0 }

.headline{
    position: relative;
    padding-bottom: .5em;
    display: inline-block;
    transition: transform .3s;
}
.headline:hover{ transform: rotate(-6deg) }
.headline:after{
    content: '';
    height: 7px;
    width: 100%;
    left: 0;
    bottom: 0;
    position: absolute;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAHCAYAAADwK5bPAAABDElEQVR4AWMoL5/wF4jfAvFVIF5TVjahuLR0kjIDFUFp6URVoLmlQPPXAfF1IH4HxP9Alv/Hgv8B8T6gBj8Ghv+M5FgI0ldW1h9QUTHxEMQ8THvAlhPA50CGNDQ0MBFjJUgd0MJAkD5CZoNdWFzcI1Ja2m9UXt6fWVExYSNQ4jcWxfeAuBkYGq5FRb2yubmT2KGWcQD1ywPl3IGWtgHph1j0/gRFaUVFf0JJyQS9ysopwjhdX13dJ11ePnECUMMPkGYK8FegOd0lJd1iJMdaVVW/JDAkeoCGvCHR0hegUACFKMWpFRTEoHgH+mIK0DFHgIY/A+LvUIu+AfETSMKaOKm0dIJPWtpMVmLMBQAofSPjvL1S8gAAAABJRU5ErkJggg==) repeat-x left center;
}

@media screen and (max-width: 600px){
    .headline{
        text-align: center;
    }
}

header, main{ margin-left: 8em; margin-bottom: 3em }

@media screen and (max-width: 600px){
    header, main{ margin-left: 0 }
}

.head-social{
    float: right;
    margin: 1.25em 0;
    user-select: none;
}
.head-social a{
    color: inherit;
    margin: 0 .5em;
    display: inline-block;
    transition: transform .3s;
}
.head-social a:hover{ transform: scale(1.2) }
.head-social i{ font-size: 1.2em }

@media screen and (max-width: 600px){
    header{ text-align: center }

    .head-social{
        float: none;
        margin-top: 2em;
    }
}


.board{
    padding: 1.5em;
    background: #fff;
    border-radius: 1.5em;
}
.board + .board{ margin-top: 2em }

.board.head{ display: inline-block }
.board.head .fa{ margin-right: .75em }

.post-item, .post-title{
    margin-bottom: 1.5em;
    padding-bottom: 1.5em;
    border-bottom: 2px dotted #777790;
}
.post-item:last-child{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.post-item .date{
    display: block;
    color: #ffa9be;
    font-size: .85em;
    margin-bottom: .5em;
}
.post-item a{
    color: #777790;
}
.post-item h3:hover{ opacity: .6 }

.post-item h3{
    padding-left: 1em;
    position: relative;
    transition: opacity .3s;
}
.post-item h3:before{
    content: '';
    position: absolute;
    left: 0;
    top: .3em;
    border: .4em solid transparent;
    border-left-color: #ffa9be;
}

.post-meta{
    display: table;
    color: #777790;
    font-size: .85em;
}

.post-meta .category:before, .post-meta .comments:before, .post-meta .viewed:before, .post-meta .edit:before{
    content: '·';
    margin: 0 .5em;
}

.post-content > h1, .post-content > h2, .post-content > h3,
.post-special > h1, .post-special > h2, .post-special > h3{ position: relative }
.post-content > h1:before, .post-content > h2:before, .post-content > h3:before,
.post-special > h1:before, .post-special > h2:before, .post-special > h3:before{
    left: -1.5rem;
    top: 0;
    bottom: 0;
    width: .5em;
    content: '';
    display: block;
    position: absolute;
    background: #ffa9be;
    border-radius: 0 .5em .5em 0;
}

/* -- 密码保护 */
.post-content .protected .submit{
    color: #fff;
    padding: .5em 1em;
    border-radius: 4px;
    background: #ffa9be;
    border: 1px solid #ffa9be;
}

/* - 分页 */
.page-navigator{
    margin: 2em auto;
    user-select: none;
    text-align: center;
}
.page-navigator span{
    margin-right: .5em;
    display: inline-block;
}
.page-navigator span:last-child{ margin-right: 0 }

.page-navigator a{
    width: 2em;
    height: 2em;
    color: inherit;
    line-height: 1.75;
    border-radius: 2em;
    display: inline-block;
    vertical-align: middle;
    border: #777790 2px solid;
    background: no-repeat center center;
    transition: color .3s, background .3s;
}
.page-navigator a:hover, .page-navigator .current a{
    color: #fff;
    background-color: #777790;
}

.board .page-navigator{
    margin: 2em auto 0 auto;
}

.page-navigator .category{
    width: auto;
    height: auto;
    padding: .75em 1em;
}

.page-navigator .prev a{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAKCAYAAACJxx+AAAAAAXNSR0IArs4c6QAAALdJREFUGBljZMACKir6Xf7/Z0z+9+/fDBZk+cLCPk42NubO////5wDFGZmZmeThCioqJhoDJZYwMPzXgGn6/5+BkyU0dBWzouLTKqBkLVCCFSYJo1mUlJ61AE2rgAmg00yMjIx/0QWR+cySkkkHBQU//wYK2gIxM7IkkP2CESZQWtpvxMTEuAjI14aJAekLTDBOd3fhOU7ODyZA9/QBxf6BxBkZGb7DTYApBNHl5RPsgG6LBXpzPgDWrjI5DdIyLgAAAABJRU5ErkJggg==);
}
.page-navigator .prev a:hover{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAKCAYAAACJxx+AAAAAAXNSR0IArs4c6QAAAHpJREFUGBltjzEKgDAMRYsueh3dHHTxWDo7ubh6AG/i2kXwLkKtr8XWCA08muT/8KlSibLW9rBB95NZlLDADa72aGCo4XRbUVox5DDCJYTQesMUpsSrMzJMzEk1XLmIAdIR4QhDBQfI0kH3L0oBM5jX9X1TOhFbWKF5ACRiwtdwpbVuAAAAAElFTkSuQmCC);
}

.page-navigator .next a{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAKCAYAAACJxx+AAAAAAXNSR0IArs4c6QAAAK5JREFUGBljLC+faMXA8D+VgYFhfmdnwSEgjQKYbW09VgJFfIE4Hsjmc3GxOHTgwIE/MFVM//8zcEI5IHbx9+8CZyoqJhnCFDCWl084D+QYwASg9G8g3XTvnlQ7C5oEjMsKZDQrKT3jZoKJYKMZGRn/4jIBZEULB8f7NmwKbjAyMsR1dBScBpnKBOR8hxr/H8iewsnJaQyTBImz/P37r5KJiTkLGFjzgBI7oYrhFACoHTMyp9L38AAAAABJRU5ErkJggg==);
}
.page-navigator .next a:hover{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAKCAYAAACJxx+AAAAAAXNSR0IArs4c6QAAAHhJREFUGBlj+P//vxUQzwdiOwZsAChxDIhB4C8Q9wAxB4o6oMB5IEYGV4AcQ7giIAddAUjxLyCuAWJmFrhKVAYrkNsMxNxMqOIYvL8MQGNwWVEHlGPBpuA6UMIUbhaQA/PmPyB7MhBzwSVBDKCAPRCvBGJ3FAkoBwBhFKRDlAmnZgAAAABJRU5ErkJggg==);
}

/* - 评论区 */
.comment-form{
    position: relative;
    margin-bottom: 2em;
}
.comment-form input{
    margin-right: .5em;
    display: inline-block;
    width: calc((100% - 5.5em) / 3);
}
.comment-form input, .comment-form textarea{
    padding: .75em;
    border-radius: 1em;
    border-color: #ddd;
}

@media screen and (max-width: 600px){
    .comment-form{ margin-bottom: 5em }
    .comment-form input, .comment-form textarea{ width: 100% }
}

.comment-form .submit{
    right: 0;
    padding: 0;
    color: #fff;
    width: 3em;
    height: 3em;
    position: absolute;
    border-radius: 66%;
    background: #ffa9be;
}
.comment-form .submit:before{
    content: '\f1d8';
    font: 1em/1em FontAwesome;
}
.comment-form .logined{ display: inline-block }
.comment-form .cancel-reply{
    text-align: right;
    margin-bottom: .5em;
}

.comment-avatar{
    width: 3em;
    float: left;
    margin-right: 1em;
}
.comment-avatar img{
    height: auto;
    border-radius: 66%;
}

.comment-list .avatar{
    width: 3em;
    float: left;
    height: auto;
    display: block;
    border-radius: 66%;
    transition: box-shadow .3s;
    box-shadow: 0 .25em .5em rgba(0, 0, 0, .2);
}
.comment-list div:hover .avatar{
    box-shadow: 0 .3em .6em rgba(0, 0, 0, .3);
}

.comment-list .comment-item{ margin-bottom: 1em }
.comment-list .comment-item:last-child{ margin-bottom: 0 }

.comment-list .comment-meta{ margin-bottom: .5em }

.comment-meta .comment-time{
    color: #aaa;
    font-size: .75em;
    margin-left: .5em;
}
.comment-list .comment-author, .comment-list a{ font-weight: lighter }

.comment-list .content{
    background: #fff4fb;
    border-radius: .5em;
    margin: 0 0 1em 1.5em;
    word-break: break-all;
    padding: .75em .75em .75em 2.5em;
}

/* - 作者的评论 */
.comment-item.by-author > .content{ background: aliceblue }
.comment-item.by-author > .content a{ color: cornflowerblue }

/* - 子评论 */
.comment-list .comment-children{ margin-left: 1em }

/* - 回复评论 */
.comment-list .comment-reply{
    opacity: 0;
    float: right;
    transition: opacity .3s;
}
.comment-list .content:hover .comment-reply{ opacity: 1 }

.no-comment{
    padding: 1em;
    text-align: center;
    border-radius: 1em;
    background: #fafafa;
}

/* - 归档 */
.archives-list a{ color: inherit }

.archives-list li{
    margin-bottom: .75em;
    list-style-type: circle;
}

.archives-list .date{ float: right }

/* - 追番 */
.bangumi-item{
    color: inherit;
    text-align: center;
}
.bangumi-img{
    overflow: hidden;
    position: relative;
    border-radius: 1em;
    padding-bottom: 140%;
    background: center/cover;
}
.bangumi-item h3{ margin: 1em 0 }

.bangumi-status{
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    position: absolute;
    transition: transform .3s;
    transform: translateY(100%);
    background: rgba(0, 0, 0, .5);
}
.bangumi-img:hover .bangumi-status{ transform: translateY(0) }

.bangumi-status-bar{
    top: 0;
    bottom: 0;
    max-width: 100%;
    position: absolute;
    background: #ffa9be;
}
.bangumi-status p{
    padding: .5em;
    position: relative;
}

/* 4 - 页尾
-------------------------------- */
footer{
    padding: 2em 0;
    background: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, .1);
}
footer h3{ color: #666 }

.foot-action{
    z-index: 66;
    right: 1rem;
    bottom: 1rem;
    position: fixed;
    font-size: 1.2em;
    line-height: 2em;
    text-align: center;
}
.foot-action .to-top{
    width: 2em;
    height: 2em;
    cursor: pointer;
    background: #fff;
    border-radius: 66%;
    transform: scale(0);
    transition: transform .3s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}
.foot-action .to-top.active{ transform: scale(1) }
.foot-action .to-top:before{
    content: "\f062";
    font-family: FontAwesome;
}

.foot-widget{ margin-bottom: 3em }

.foot-widget li{
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: .5em;
    text-overflow: ellipsis;
}
.foot-widget li:before{
    content: '\f105';
    margin-right: .75em;
    font-family: "FontAwesome";
}

.foot-widget .foot-comments a{
    color: inherit;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: .5em;
    text-overflow: ellipsis;
}
.foot-widget .foot-comments img{
    margin-right: .5em;
    border-radius: 66%;
}

.foot-copyright{
    color: #999;
    font-size: .875em;
}
.foot-copyright p{ margin: .25em 0 }

.foot-social a{
    color: #777790;
    margin-right: .75em;
}
.foot-social a:last-child{ margin: 0 }

================================================
FILE: static/fantasy.js
================================================
/* ----

# Fantasy Theme
# By: Dreamer-Paul
# Last Update: 2018.12.1

一个优美梦幻的动漫风 Typecho 博客主题。

本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com

---- */

var Fantasy_Theme = function (config) {
    var that = this;
    var element = {
        toggle: ks.select("header .toggle"),
        search: {
            btn: ks.select(".search-btn"),
            window: ks.select(".side-window"),
            input: ks.select(".side-window input")
        },
        content: ks.select(".post-content"),
        comment: {
            form: ks.select(".comment-form"),
            list: ks.select(".comment-list"),
            mail: document.getElementsByName("mail")[0],
            avatar: ks.select(".comment-avatar img")
        },
        top: ks.select(".to-top"),
        date: ks.select(".foot-date"),
        hitokoto: ks.select(".foot-hitokoto")
    };

    // 菜单按钮
    this.header = function () {
        element.toggle.onclick = function () {
            ks.select("aside").classList.toggle("active");
        };

        element.search.btn.onclick = function () {
            element.search.input.focus();
            element.search.window.classList.toggle("active");
        };
    };
    this.header();

    // 自动添加外链
    this.links = function (selector) {
        var links = selector.getElementsByTagName("a");

        for(var i = 0; i < links.length; i++){
            links[i].target = "_blank";
        }
    };

    if(element.content){
        this.links(element.content);
    }
    if(element.comment.list){
        this.links(element.comment.list);
    }

    // 评论
    this.comments = function () {
        element.comment.mail.onblur = function (event) {
            var reg = /@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;

            if(reg.test(event.target.value)){
                element.comment.avatar.src = "?action=gravatar&email=" + event.target.value;
            }
        }
    };

    // 评论
    if(element.comment.form && element.comment.mail){
        this.comments();
    }

    // 返回头部
    this.to_top = function () {
        element.top.onclick = ks.scrollTop;

        window.onscroll = function () {
            var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            scroll >= window.innerHeight ? element.top.classList.add("active") : element.top.classList.remove("active");
        }
    };
    this.to_top();

    // 运行时间
    this.foot_date = function (date) {
        function run_date(date){
            var created = Date.parse(date);
            var now = new Date().getTime();
            var ran = now - created;

            var day = ran / 86400000;
            var day_c = Math.floor(day);

            var hour = 24 * (day - day_c);
            var hour_c = Math.floor(hour);

            var min = 60 * (hour - hour_c);
            var min_c = Math.floor(min);

            var sec = Math.floor(60 * (min - min_c));

            return "站点已萌萌哒存活了 <a>" + day_c + "</a> 天 <a>" + hour_c + "</a> 小时 <a>" + min_c + "</a> 分 <a>" + sec + "</a> 秒";
        }

        setInterval(function () {
            element.date.innerHTML = run_date(date);
        }, 1000);
    };

    if(element.date && config.created){
        this.foot_date(config.created);
    }

    // 一言
    this.hitokoto = function () {
        ks.ajax({
            method: "GET",
            url: "https://v1.hitokoto.cn",
            success: function (req){
                element.hitokoto.innerText = JSON.parse(req.response)["hitokoto"];
            },
            failed: function (req){
                ks.notice("请求一言失败！", {color: "red"});
            }
        });
    };

    if(element.hitokoto){
        this.hitokoto();
    }
};

// 图片缩放
ks.image(".post-content:not(.exclude-image) img");

// 请保留版权说明
if (window.console && window.console.log) {
    console.log("%c Fantasy %c https://paugram.com ","color: #fff; margin: 1em 0; padding: 5px 0; background: #ffa9be;","margin: 1em 0; padding: 5px 0; background: #efefef;");
}

================================================
FILE: static/kico.css
================================================
@charset "UTF-8";

/* ----

# Kico Style 2.1
# By: Dreamer-Paul
# Last Update: 2019.1.28

一个简洁、有趣的开源响应式框架，仅包含基础样式，需按照一定规则进行二次开发。

欢迎你加入缤奇，和我们一起改变世界。
本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com

---- */

/* 0 - 全局
-------------------------------- */
html, body,
dl, dt, dd, ol, ul,
h1, h2, h3, h4, h5, h6,
pre, code, form, p,
fieldset, legend, figure{
    margin: 0;
    padding: 0;
}

html{
    color: #353535;
    font: 16px/1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
}

html.font-s{ font-size: 14px }
html.font-m{ font-size: 16px }
html.font-l{ font-size: 18px }

@media screen and (max-width: 500px){
    html.font-auto{ font-size: 14px }
}

@media screen and (min-width: 1930px){
    html.font-auto{ font-size: 18px }
}

*, *:before, *:after{ box-sizing: border-box }

/* - 部分老式浏览器的更正 */
aside, article, section, figure, figcaption, header, main, footer, nav{ display: block }

/* - 选择内容 */
::-moz-selection{
    color: #fff;
    background-color: rgba(0, 0, 0, .66);
}

::selection{
    color: #fff;
    background-color: rgba(0, 0, 0, .66);
}

/* - 滚动条 */
::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb{
    background: #ccc;
    border-radius: 5px;
}

::-webkit-scrollbar-track:hover{
    border-radius: 5px;
    background: rgba(0, 0, 0, .05);
}

body::-webkit-scrollbar-thumb{
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07);
}

body::-webkit-scrollbar-track:hover{
    border-radius: 0;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1);
}

.ks-scroll-hover::-webkit-scrollbar{
    display: none;
}

.ks-scroll-hover:hover::-webkit-scrollbar{
    display: inherit;
}

/* 1 - 容器
-------------------------------- */
.wrap{
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    padding: 0 1.25em;
    box-sizing: content-box;
}

.wrap.min{ max-width: 800px }
.wrap.mid{ max-width: 1000px }
.wrap.max{ max-width: 1400px }
.wrap.full{ max-width: 100% }

.wrap.thin{ padding: 0 .75em }
.wrap.thick{ padding: 0 1.5em }
.wrap.clear{
    padding-left: 0;
    padding-right: 0;
}

.clearfix:after{
    content: '';
    clear: both;
    display: block;
}

/* 2 - 元素
-------------------------------- */
h1{
    font-size: 2em;
}

h1, h2, h3, h4, h5, h6{
    margin-bottom: 1rem;
}

h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child{
    margin-bottom: 0;
}

p{
    line-height: 1.8;
    margin-bottom: 1em;
}

a{
    color: #3498db;
    text-decoration: none;
}

a:hover{
    color: #ffc670;
}

abbr[title]{
    cursor: help;
    text-decoration: none;
    border-bottom: 1px dotted;
}

em, mark, kbd{
    padding: 0 .5em;
    border-radius: .5em;
    display: inline-block;
}

em{
    color: #fff;
    font-style: normal;
    background: #3498db;
}

kbd{
    color: #fff;
    font-size: 90%;
    background: #333;
    font-family: 'Consolas', 'Courier New', monospace, "微软雅黑";
}

img, svg, audio, video{
    max-width: 100%;
    vertical-align: middle;
}

/* - 文章 */
article{ word-break: break-all }

article > *{ margin-bottom: 1em }
article > *:last-child{ margin-bottom: 0 }

article h1, article h2, article h3{ font-size: 1.2em }
article h4, article h5, article h6{ font-size: 1.1em }

/* - 按钮 */
.btn{
    outline: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: #fff;
    user-select: none;
    border-radius: 4px;
    padding: .8em 1.5em;
    display: inline-block;
    border: 1px solid transparent;
}
.btn:hover{ color: inherit }
.btn:active{ background: #eee }

/* -- 禁用的按钮 */
.btn[disabled]{
    opacity: .5;
    cursor: not-allowed;
}

/* -- 有图标的按钮 */
.btn i{
    margin-right: 5px;
}

/* -- 按钮尺寸 */
.btn.small{
    padding: .5em 1em;
}

.btn.large{
    font-size: 1.2em;
    padding: 1em 2.5em;
}

/* -- 按钮颜色 */
.btn.red, .btn.yellow, .btn.blue, .btn.green{ color: #fff }

.btn.red{ background: #c40b00 }
.btn.yellow{ background: #ffb03a }
.btn.blue{ background: #3498db }
.btn.green{ background: #27a17e }
.btn.transparent{ background: transparent }

.btn.red:active{ background: #b00000 }
.btn.yellow:active{ background: #eb9c26 }
.btn.blue:active{ background: #2084c7 }
.btn.green:active{ background: #138d6a }

/* - 代码 */
pre, code{
    font-size: 1em;
    font-family: 'Consolas', 'Courier New', monospace, "微软雅黑";
}

pre{ word-wrap: normal }

code{
    color: #c40b00;
    font-size: 90%;
    word-wrap: normal;
    border-radius: 4px;
    padding: .25em .5em;
    word-break: break-all;
    background-color: #f7f2f4;
}

pre > code{
    color: #fff;
    padding: 1em;
    display: block;
    overflow-x: auto;
    word-break: normal;
    font-size: inherit;
    border-radius: 5px;
    background-color: #333;
}

/* - 项目列表 */
ul, ol{ margin-left: 1.25em }
ul.clear, ol.clear{
    margin-left: 0;
    list-style: none;
}

dl dd{ margin-left: 1.5em }
dl dd:before{
    content: "--";
    margin-right: .25em;
}

/* - 补间动画 */
a, .btn{
    transition: color 0.3s, background 0.3s;
    -o-transition: color 0.3s, background 0.3s;
    -moz-transition: color 0.3s, background 0.3s;
    -webkit-transition: color 0.3s, background 0.3s;
}

/* - 引用*/
blockquote{
    margin: 0 0 1em;
    line-height: 1.8;
    font-style: oblique;
    background: #f5fafd;
    padding: 1em 1em 1em 2em;
    border-left: 5px #3498db solid;
}

cite{
    color: #3498db;
    font-style: normal;
}

/* - 分割线 */
hr{
    border: 0;
    margin: 1.5em 0;
    border-top: 1px rgba(0, 0, 0, 0.5) solid;
}
hr.light{
    border-top: 1px rgba(255, 255, 255, 0.5) solid;
}

/* - 表单 */
input, textarea{ max-width: 100% }

input[disabled]{
    cursor: no-drop;
}

input[readonly]{
    background: rgb(235, 235, 228);
}

input, textarea, select{
    outline: none;
    font: inherit;
    background: none;
}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="search"], textarea, select{
    padding: .5em;
    color: inherit;
    border-radius: 4px;
    border: #ccc 1px solid;
}

input[type="number"]:out-of-range{
    background: rgba(255, 0, 0, .3);
}

input[type="range"]{
    margin: 0;
    height: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: ew-resize;
    cursor: grab;
    overflow: hidden;
    min-height: 1.5rem;
}

input[type="range"]:focus {
    box-shadow: none;
    outline: none;
}

input[type="range"]:active::-webkit-slider-thumb {
    border-color: #3498db;
    background-color: #3498db;
}

input[type="range"]:active::-moz-range-thumb {
    border-color: #3498db;
    background-color: #3498db;
}

input[type="range"]:focus::-ms-thumb {
    border-color: #9C27B0;
    background-color: #673AB7;
}

input[type="range"]::-moz-focus-outer { border: 0 }

input[type="range"]::-webkit-slider-runnable-track {
    background: #3498db;
    content: '';
    height: 2px;
    pointer-events: none;
}

input[type="range"]::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
    border-radius: 50px;
    margin-top: -6px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    transition: .3s border-color, .3s background-color;
}

input[type="range"]::-moz-range-track {
    width: 240px;
    height: 2px;
    background: rgba(0, 50, 126, 0.12);
}

input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50px;
    border: 1px solid rgba(0, 30, 75, 0.12);
    position: relative;
    transition: .3s border-color, .3s background-color;
}

input[type="range"]::-moz-range-progress {
    height: 2px;
    background: #467fcf;
    border: 0;
    margin-top: 0;
}

textarea{
    display: block;
    overflow: auto;
    resize: vertical;
}

progress{
    overflow: auto;
    border-radius: 50px;
}

progress::-webkit-progress-bar{
    background-color: #eee;
}

/* - 缤奇表单模组 */
.ks-form label{
    display: block;
    cursor: pointer;
    user-select: none;
}

.ks-form label:last-child{
    margin-bottom: 0;
}

.ks-form label input{
    display: inline-block;
}

.ks-form label.submit > input[type="text"]{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.ks-form label.submit > input[type="text"] + button{
    vertical-align: middle;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.ks-form input{
    display: block;
    vertical-align: middle;
}

form textarea{ width: 100% }

/* -- 单选多选框 */
.ks-form input[type="checkbox"], .ks-form input[type="radio"]{
    float: left;
    width: 1.5em;
    height: 1.5em;
    cursor: pointer;
    position: relative;
    margin: 0 .5em 0 0;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.ks-form input[type="checkbox"]:before, .ks-form input[type="radio"]:before{
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    border-radius: .2em;
    border: 0 solid #3498db;
    box-shadow: 0 0 0 1px #ccc inset;
    transition: border 0.3s, background 0.3s, box-shadow 0.3s;
}

.ks-form input[type="checkbox"]:after{
    top: 10%;
    left: 10%;
    width: 30%;
    height: 60%;
    content: '';
    position: absolute;
    transition: transform .3s;
    transform-origin: 100% 100%;
    border-right: .15em solid #fff;
    border-bottom: .15em solid #fff;
    transform: rotate(45deg) scale(0);
}

.ks-form input[type="radio"]:before{
    border-radius: 100%;
}

.ks-form input[type="checkbox"]:checked:before{
    box-shadow: none;
    background: #3498db;
}

.ks-form input[type="checkbox"]:checked:after{
    transform: rotate(45deg) scale(1);
}

.ks-form input[type="radio"]:checked:before{
    background: #3498db;
    border: 2px solid #3498db;
    box-shadow: 0 0 0 .2em #fff inset;
}

/* -- 开关按钮 */
.ks-form input.switch{
    width: 4em;
    height: 2em;
    float: none;
    cursor: pointer;
    background: #eee;
    position: relative;
    border-radius: 50px;
    border: 1px solid #ddd;
    box-sizing: content-box;
    transition: border .3s, background .3s;
}

.ks-form input.switch:before{
    margin: 0;
    border: 0;
    width: 2em;
    height: 2em;
    content: '';
    display: block;
    box-shadow: none;
    background: #fff;
    position: absolute;
    border-radius: 100%;
    transition: transform 0.3s;
}

.ks-form input.switch:after{
    content: normal;
}

.ks-form input.switch:checked{
    box-shadow: none;
    background: #3498db;
    border-color: #3498db;
}

.ks-form input.switch:checked:before{
    background: #fff;
    transform: translateX(2em);
}

/* - 表单小组 */
fieldset{
    border: none;
    margin-bottom: 2em;
}

fieldset > *{ margin-bottom: 1em }

fieldset:last-child, fieldset > *:last-child{ margin-bottom: 0 }

/* -- 单行表单 */
.ks-form.inline fieldset label, .ks-form fieldset.inline label{
    float: left;
    display: block;
    margin: 0 1em .5em 0;
}

.ks-form fieldset.inline:after{
    content: '';
    clear: both;
    display: block;
}

/* - 表格*/
.ks-table{
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 5px;
}

table{
    border: 0;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

table th, table td{
    padding: .75em;
    text-align: left;
    vertical-align: top;
}

table > thead > tr{
    border-bottom: 2px solid #ccc;
}

table > tbody > tr > td{
    border-bottom: 1px solid #ddd;
}

table > tbody > tr:last-child > td{
    border-bottom: 0;
}

table > tbody > tr{
    transition: background .3s;
}

table > tbody > tr:hover{
    background: #eee;
}

table > thead > tr > th, table > tbody > tr > th, table > tfoot > tr > th,
table > thead > tr > td, table > tbody > tr > td, table > tfoot > tr > td{
    white-space: nowrap;
}

/* - 蓝色风格 */
table.fill{
    border: 1px solid transparent;
}

table.fill > thead{
    background: #3498db;
    border-left: 1px solid #3498db;
    border-right: 1px solid #3498db;
}
table.fill > thead > tr{
    border-bottom: none;
}
table.fill > thead > tr > th, table.fill > thead > tr > td{
    color: #fff;
    padding: 1em .75em;
}

table.fill > tbody{
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
table.fill > tbody > tr:nth-child(even) > th, table.fill > tbody > tr:nth-child(even){
    background: #f7f7f7;
}

/* - 嵌入式网页 */
iframe{
    border: none;
}

/* - 栅格系统 */
.row{
    display: flex;
    flex-wrap: wrap;
    margin-left: -1.25em;
    margin-right: -1.25em;
}

.row.thin{
    margin-left: -1em;
    margin-right: -1em;
}

.row.full{
    margin-left: 0;
    margin-right: 0;
}

.row.scrollable{
    overflow: auto;
    margin-left: 0;
    margin-right: 0;
    flex-wrap: nowrap;
}

/* -- 对齐方式 */
.row.right{ justify-content: flex-end; }
.row.center{ justify-content: center; }
.row.around{ justify-content: space-around; }
.row.between{ justify-content: space-between; }

/* -- 网格间距 */
.row [class*="col-"]{
    position: relative;
    padding-left: 1.25em;
    padding-right: 1.25em;
}

.row.thin [class*="col-"]{
    padding-left: 1em;
    padding-right: 1em;
}

.row.full [class*="col-"]{
    padding: 0;
    margin-bottom: 0;
}

/* -- 网格主体 */
.row [class*="col-s-"],
.row [class*="col-m-"],
.row [class*="col-l-"]{
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 2em;
}

.row [class*="col-s-"]:last-child, .row [class*="col-m-"]:last-child, .row [class*="col-l-"]:last-child{
    margin-bottom: 0;
}

@media screen and (min-width: 600px){
    .row [class*="col-s-"]{
        margin-bottom: 0;
    }
}

@media screen and (min-width: 900px){
    .row [class*="col-m-"]{
        margin-bottom: 0;
    }
}

@media screen and (min-width: 1024px){
    .row [class*="col-l-"]{
        margin-bottom: 0;
    }
}

@media screen and (max-width: 600px){
    .row [class*="wrap-s"]{
        margin-bottom: 1em;
    }
}

@media screen and (max-width: 900px){
    .row [class*="wrap-m"]{
        margin-bottom: 1em;
    }
}

@media screen and (min-width: 1024px){
    .row [class*="wrap-l"]{
        margin-bottom: 1em;
    }
}

@media screen and (min-width: 600px){
    .col-s-left-1{ right: 8.3333%; }
    .col-s-left-2{ right: 16.6666%; }
    .col-s-left-3{ right: 25%; }
    .col-s-left-4{ right: 33.3333%; }
    .col-s-left-5{ right: 41.6666%; }
    .col-s-left-6{ right: 50%; }
    .col-s-left-7{ right: 58.3333%; }
    .col-s-left-8{ right: 66.6666%; }
    .col-s-left-9{ right: 75%; }
    .col-s-left-10{ right: 83.3333%; }
    .col-s-left-11{ right: 91.6666%; }
    .col-s-left-12{ right: 100%; }

    .col-s-right-1{ left: 8.3333%; }
    .col-s-right-2{ left: 16.6666%; }
    .col-s-right-3{ left: 25%; }
    .col-s-right-4{ left: 33.3333%; }
    .col-s-right-5{ left: 41.6666%; }
    .col-s-right-6{ left: 50%; }
    .col-s-right-7{ left: 58.3333%; }
    .col-s-right-8{ left: 66.6666%; }
    .col-s-right-9{ left: 75%; }
    .col-s-right-10{ left: 83.3333%; }
    .col-s-right-11{ left: 91.6666%; }
    .col-s-right-12{ left: 100%; }
}

@media screen and (min-width: 900px){
    .col-m-left-1{ right: 8.3333%; }
    .col-m-left-2{ right: 16.6666%; }
    .col-m-left-3{ right: 25%; }
    .col-m-left-4{ right: 33.3333%; }
    .col-m-left-5{ right: 41.6666%; }
    .col-m-left-6{ right: 50%; }
    .col-m-left-7{ right: 58.3333%; }
    .col-m-left-8{ right: 66.6666%; }
    .col-m-left-9{ right: 75%; }
    .col-m-left-10{ right: 83.3333%; }
    .col-m-left-11{ right: 91.6666%; }
    .col-m-left-12{ right: 100%; }

    .col-m-right-1{ left: 8.3333%; }
    .col-m-right-2{ left: 16.6666%; }
    .col-m-right-3{ left: 25%; }
    .col-m-right-4{ left: 33.3333%; }
    .col-m-right-5{ left: 41.6666%; }
    .col-m-right-6{ left: 50%; }
    .col-m-right-7{ left: 58.3333%; }
    .col-m-right-8{ left: 66.6666%; }
    .col-m-right-9{ left: 75%; }
    .col-m-right-10{ left: 83.3333%; }
    .col-m-right-11{ left: 91.6666%; }
    .col-m-right-12{ left: 100%; }
}

@media screen and (min-width: 900px){
    .col-l-left-1{ right: 8.3333%; }
    .col-l-left-2{ right: 16.6666%; }
    .col-l-left-3{ right: 25%; }
    .col-l-left-4{ right: 33.3333%; }
    .col-l-left-5{ right: 41.6666%; }
    .col-l-left-6{ right: 50%; }
    .col-l-left-7{ right: 58.3333%; }
    .col-l-left-8{ right: 66.6666%; }
    .col-l-left-9{ right: 75%; }
    .col-l-left-10{ right: 83.3333%; }
    .col-l-left-11{ right: 91.6666%; }
    .col-l-left-12{ right: 100%; }

    .col-l-right-1{ left: 8.3333%; }
    .col-l-right-2{ left: 16.6666%; }
    .col-l-right-3{ left: 25%; }
    .col-l-right-4{ left: 33.3333%; }
    .col-l-right-5{ left: 41.6666%; }
    .col-l-right-6{ left: 50%; }
    .col-l-right-7{ left: 58.3333%; }
    .col-l-right-8{ left: 66.6666%; }
    .col-l-right-9{ left: 75%; }
    .col-l-right-10{ left: 83.3333%; }
    .col-l-right-11{ left: 91.6666%; }
    .col-l-right-12{ left: 100%; }
}

/* --- 固定的 */
.row .col-1{
    -ms-flex: 0 0 8.3333%;
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
}

.row .col-2{
    -ms-flex: 0 0 16.6666%;
    flex: 0 0 16.6666%;
    max-width: 16.6666%;
}

.row .col-3{
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.row .col-4{
    -ms-flex: 0 0 33.3333%;
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}

.row .col-5{
    -ms-flex: 0 0 41.3333%;
    flex: 0 0 41.6666%;
    max-width: 41.6666%;
}

.row .col-6{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.row .col-7{
    -ms-flex: 0 0 58.3333%;
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
}

.row .col-8{
    -ms-flex: 0 0 66.6666%;
    flex: 0 0 66.6666%;
    max-width: 66.6666%;
}

.row .col-9{
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}

.row .col-10{
    -ms-flex: 0 0 83.3333%;
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
}

.row .col-11{
    -ms-flex: 0 0 91.6666%;
    flex: 0 0 91.6666%;
    max-width: 91.6666%;
}

.row .col-12{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

/* --- 手机 */
@media screen and (min-width: 600px){
    .row .col-s-1{
        -ms-flex: 0 0 8.3333%;
        flex: 0 0 8.3333%;
        max-width: 8.3333%;
    }

    .row .col-s-2{
        -ms-flex: 0 0 16.6666%;
        flex: 0 0 16.6666%;
        max-width: 16.6666%;
    }

    .row .col-s-3{
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row .col-s-4{
        -ms-flex: 0 0 33.3333%;
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }

    .row .col-s-5{
        -ms-flex: 0 0 41.3333%;
        flex: 0 0 41.6666%;
        max-width: 41.6666%;
    }

    .row .col-s-6{
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row .col-s-7{
        -ms-flex: 0 0 58.3333%;
        flex: 0 0 58.3333%;
        max-width: 58.3333%;
    }

    .row .col-s-8{
        -ms-flex: 0 0 66.6666%;
        flex: 0 0 66.6666%;
        max-width: 66.6666%;
    }

    .row .col-s-9{
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .row .col-s-10{
        -ms-flex: 0 0 83.3333%;
        flex: 0 0 83.3333%;
        max-width: 83.3333%;
    }

    .row .col-s-11{
        -ms-flex: 0 0 91.6666%;
        flex: 0 0 91.6666%;
        max-width: 91.6666%;
    }

    .row .col-s-12{
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* --- 平板 */
@media screen and (min-width: 900px){
    .row .col-m-1{
        -ms-flex: 0 0 8.3333%;
        flex: 0 0 8.3333%;
        max-width: 8.3333%;
    }

    .row .col-m-2{
        -ms-flex: 0 0 16.6666%;
        flex: 0 0 16.6666%;
        max-width: 16.6666%;
    }

    .row .col-m-3{
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row .col-m-4{
        -ms-flex: 0 0 33.3333%;
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }

    .row .col-m-5{
        -ms-flex: 0 0 41.3333%;
        flex: 0 0 41.6666%;
        max-width: 41.6666%;
    }

    .row .col-m-6{
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row .col-m-7{
        -ms-flex: 0 0 58.3333%;
        flex: 0 0 58.3333%;
        max-width: 58.3333%;
    }

    .row .col-m-8{
        -ms-flex: 0 0 66.6666%;
        flex: 0 0 66.6666%;
        max-width: 66.6666%;
    }

    .row .col-m-9{
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .row .col-m-10{
        -ms-flex: 0 0 83.3333%;
        flex: 0 0 83.3333%;
        max-width: 83.3333%;
    }

    .row .col-m-11{
        -ms-flex: 0 0 91.6666%;
        flex: 0 0 91.6666%;
        max-width: 91.6666%;
    }

    .row .col-m-12{
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* --- 电脑 */
@media screen and (min-width: 1024px){
    .row .col-l-1{
        -ms-flex: 0 0 8.3333%;
        flex: 0 0 8.3333%;
        max-width: 8.3333%;
    }

    .row .col-l-2{
        -ms-flex: 0 0 16.6666%;
        flex: 0 0 16.6666%;
        max-width: 16.6666%;
    }

    .row .col-l-3{
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row .col-l-4{
        -ms-flex: 0 0 33.3333%;
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }

    .row .col-l-5{
        -ms-flex: 0 0 41.3333%;
        flex: 0 0 41.6666%;
        max-width: 41.6666%;
    }

    .row .col-l-6{
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row .col-l-7{
        -ms-flex: 0 0 58.3333%;
        flex: 0 0 58.3333%;
        max-width: 58.3333%;
    }

    .row .col-l-8{
        -ms-flex: 0 0 66.6666%;
        flex: 0 0 66.6666%;
        max-width: 66.6666%;
    }

    .row .col-l-9{
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .row .col-l-10{
        -ms-flex: 0 0 83.3333%;
        flex: 0 0 83.3333%;
        max-width: 83.3333%;
    }

    .row .col-l-11{
        -ms-flex: 0 0 91.6666%;
        flex: 0 0 91.6666%;
        max-width: 91.6666%;
    }

    .row .col-l-12{
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* -- 网格对齐方式 */
.row > .left, .row > .right, .row > .top, .row > .bottom, .row > .center{
    display: flex;
    flex-direction: column;
}

.row > .center{
    align-items: center;
    justify-content: center;
}

.row > .center-fixed{
    text-align: center;
}

.row > .left{
    -webkit-box-align: start;
    align-items: flex-start;
}

.row > .right{
    -webkit-box-align: end;
    align-items: flex-end;
}

.row > .top{
    justify-content: flex-start;
}

.row > .bottom{
    justify-content: flex-end;
}

@media screen and (max-width: 900px){
    .row > .to-center{
        align-items: center !important;
    }
}

/* - 隐藏栅格功能 */
@media screen and (max-width: 600px){
    .row > .hide-s{ display: none; }
}

@media screen and (max-width: 900px){
    .row > .hide-m{ display: none; }
}

@media screen and (max-width: 1024px){
    .row > .hide-l{ display: none; }
}

/* 4 - 动画
-------------------------------- */

/* - 淡入淡出 */
@keyframes fade-in{ from{ opacity: 0 } to{ opacity: 1 } }
@-webkit-keyframes fade-in{ from{ opacity: 0 } to{ opacity: 1 } }

@keyframes fade-off{ from{ opacity: 1 } to{ opacity: 0 } }
@-webkit-keyframes fade-off{ from{ opacity: 1 } to{ opacity: 0 } }

@keyframes fade-in-top{ from{ opacity: 0; transform: translateY(20px) } to{ opacity: 1; transform: translateY(0) } }
@-webkit-keyframes fade-in-top{ from{ opacity: 0; transform: translateY(20px) } to{ opacity: 1; transform: translateY(0) } }

@keyframes fade-in-bottom{ from{ opacity: 0; transform: translateY(-20px) } to{ opacity: 1; transform: translateY(0) } }
@-webkit-keyframes fade-in-bottom{ from{ opacity: 0; transform: translateY(-20px) } to{ opacity: 1; transform: translateY(0) } }

@keyframes fade-in-left{ from{ opacity: 0; transform: translateX(20px) } to{ opacity: 1; transform: translateX(0) } }
@-webkit-keyframes fade-in-left{ from{ opacity: 0; transform: translateX(20px) } to{ opacity: 1; transform: translateX(0) } }

@keyframes fade-in-right{ from{ opacity: 0; transform: translateX(-20px) } to{ opacity: 1; transform: translateX(0) } }
@-webkit-keyframes fade-in-right{ from{ opacity: 0; transform: translateX(-20px) } to{ opacity: 1; transform: translateX(0) } }

/* - 淡入缩放 */
@keyframes fade-small-large{ from{ opacity: 0; transform: scale(.5, .5) } to{ opacity: 1; transform: scale(1, 1) } }
@-webkit-keyframes fade-small-large{ from{ opacity: 0; transform: scale(.5, .5) } to{ opacity: 1; transform: scale(1, 1) } }

@keyframes fade-large-small{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(.5, .5) } }
@-webkit-keyframes fade-large-small{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(.5, .5) } }

@keyframes fade-larger-small{ from{ opacity: 0; transform: scale(1.5, 1.5) } to{ opacity: 1; transform: scale(1, 1) } }
@-webkit-keyframes fade-larger-small{ from{ opacity: 0; transform: scale(1.5, 1.5) } to{ opacity: 1; transform: scale(1, 1) } }

@keyframes fade-small-larger{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(1.5, 1.5) } }
@-webkit-keyframes fade-small-larger{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(1.5, 1.5) } }

@keyframes scale-small-large{ from{ transform: scale(0, 0) } to{ transform: scale(1, 1) } }
@-webkit-keyframes scale-small-large{ from{ transform: scale(0, 0) } to{ transform: scale(1, 1) } }

@keyframes scale-large-small{ from{ transform: scale(1, 1) } to{ transform: scale(0, 0) } }
@-webkit-keyframes scale-large-small{ from{ transform: scale(1, 1) } to{ transform: scale(0, 0) } }

/* - 平移 */
@keyframes up-and-down{ from{ transform: translateY(-20px) } to{ transform: translateY(20px) } }
@-webkit-keyframes up-and-down{ from{ transform: translateY(-20px) } to{ transform: translateY(20px) } }

@keyframes left-and-right{ from{ transform: translateX(-20px) } to{ transform: translateX(20px) } }
@-webkit-keyframes left-and-right{ from{ transform: translateX(-20px) } to{ transform: translateX(20px) } }

/* - 旋转 */
@keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }
@-webkit-keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }

/* - 弹跳*/
@keyframes jump{
    0% {
        transform: translateY(0) scale(1.15,.8)
    }

    20% {
        transform: translateY(-35px) scaleY(1.1)
    }

    50% {
        transform: translateY(-50px) scale(1)
    }

    80% {
        transform: translateY(-35px) scale(1)
    }

    to {
        transform: translateY(0) scale(1.15,.8)
    }
}

/* 5 - 组件
-------------------------------- */

/* - 弹窗 */
.ks-notice-list{
    top: 2em;
    left: 0;
    right: 0;
    z-index: 60;
    position: fixed;
    user-select: none;
    pointer-events: none;
}

.ks-notice{
    color: #fff;
    display: table;
    background: #333;
    border-radius: 3em;
    pointer-events: auto;
    margin: 0 auto 1em auto;
    box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.2);
    animation: fade-small-large .3s both;
    -webkit-animation: fade-small-large .3s both;
}

.ks-notice.remove{
    animation: fade-in-top .3s both reverse;
    -webkit-animation: fade-in-top .3s both reverse;
}

/* -- 弹窗颜色 */
.ks-notice.red{
    background: #ea644a;
}

.ks-notice.yellow{
    background: #f1a325;
}

.ks-notice.blue{
    background: #3498db;
}

.ks-notice.green{
    background: #38b03f;
}

.ks-notice .content, .ks-notice.dismiss .close{
    padding: .5em 1em;
    display: table-cell;
}

.ks-notice.dismiss .close{
    cursor: pointer;
    border-radius: 0 1em 1em 0;
    transition: background .3s;
}

.ks-notice.dismiss .close:hover{
    background: rgba(0, 0, 0, .1);
}

.ks-notice.dismiss .close:after{
    content: '×';
    font: inherit;
}

/* - 遮罩 */
.ks-overlay{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    position: fixed;
    animation: fade-in .5s both;
    -webkit-animation: fade-in .5s both;
    background: rgba(0, 0, 0, .5);
}

.ks-overlay.remove{
    animation: fade-off .5s both;
    -webkit-animation: fade-off .5s both;
}

/* - 图片放大 */
[ks-image=active]{
    cursor: pointer;
    cursor: zoom-in;
}

.ks-image{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 66;
    position: fixed;
    user-select: none;
}

.ks-image:before{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    position: absolute;
    animation: fade-in .5s both;
    -webkit-animation: fade-in .5s both;
    background: rgba(0, 0, 0, .5);
}

.ks-image .ks-prev{
    width: 10%;
    height: 100%;
    position: absolute;
    cursor: url(left.png), pointer;
}
.ks-image .ks-next{
    right: 0;
    width: 10%;
    height: 100%;
    position: absolute;
    cursor: url(right.png), pointer;
}

.ks-image .ks-ball{
    top: 1em;
    right: 1em;
    width: 2em;
    height: 2em;
    opacity: 0;
    border-radius: 66%;
    position: absolute;
    pointer-events: none;
    transition: opacity .3s;
    border: .5em #fff solid;
    border-left-color: #3498db;
    animation: rotate .5s linear infinite paused;
    -webkit-animation: rotate .5s linear infinite paused;
}
.ks-image .ks-ball.loading{
    opacity: 1;
    animation-play-state: running;
}

.ks-image img{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 90%;
    max-height: 90%;
    cursor: zoom-out;
    position: absolute;
    animation: fade-small-large .3s backwards;
    -webkit-animation: fade-small-large .3s backwards;
}

.ks-image.remove:before{
    animation: fade-off .3s both;
    -webkit-animation: fade-off .3s both;
}

.ks-image.remove img{
    animation: fade-large-small .3s both;
    -webkit-animation: fade-large-small .3s both;
}

.ks-image img[src$=".jpg"]{
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}

/* ----

:) Copyright (C) By Dreamer-Paul.

---- */

================================================
FILE: static/kico.js
================================================
/* ----

# Kico Style 2.1
# By: Dreamer-Paul
# Last Update: 2018.12.25

一个简洁、有趣的开源响应式框架，仅包含基础样式，需按照一定规则进行二次开发。

欢迎你加入缤奇，和我们一起改变世界。
本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com

---- */

function Kico_Style () {
    var kico = {};
    var that = this;

    // 批量执行
    this.forEach = function (data, fn) {
        for(var i = 0; i < data.length; i++){
            fn(data[i], i, data);
        }
    };

    // 对象创建
    this.create = function (tag, prop) {
        var obj = document.createElement(tag);

        if(prop){
            if(prop.id)    obj.id = prop.id;
            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){
                    that.forEach(prop.child, function (i) {
                        obj.appendChild(i);
                    });
                }
                else{
                    obj.appendChild(prop.child);
                }
            }
        }

        return obj;
    };

    // 对象选择
    this.select = function (obj) {
        if(typeof obj === 'object'){
            return obj;
        }
        else if(typeof obj === 'string'){
            return document.querySelector(obj);
        }
    };

    this.selectAll = function (obj) {
        if(typeof obj === 'object'){
            return obj;
        }
        else if(typeof obj === 'string'){
            return document.querySelectorAll(obj);
        }
    };

    // 弹窗
    kico.notice_list = this.create("div", {class: "ks-notice-list"});

    this.notice = function (content, attr) {
        var item = that.create("div", {class: "ks-notice"});
        item.innerHTML += "<span class='content'>" + content + "</span>";

        kico.notice_list.appendChild(item);

        if(!document.querySelector("body > .ks-notice-list")) document.body.appendChild(kico.notice_list);

        if(attr && attr.time){
            setTimeout(notice_remove, attr.time);
        }
        else{
            var close = this.create("span", {class: "close"});

            close.addEventListener("click", function () {
                notice_remove();
            });

            item.classList.add("dismiss");
            item.appendChild(close);
        }

        if(attr && attr.color){item.classList.add(attr.color);}

        function notice_remove() {
            item.classList.add("remove");

            setTimeout(function () {
                try{
                    kico.notice_list.removeChild(item);
                    item = null;
                }
                catch(err) {}

                if(document.querySelector("body > .ks-notice-list") && kico.notice_list.childNodes.length === 0){
                    document.body.removeChild(kico.notice_list);
                }
            }, 300);
        }
    };

    // 遮罩
    kico.overlay = this.create("div", {class: "ks-overlay"});

    this.overlay = function (attr) {
        document.body.appendChild(kico.overlay);

        if(attr && attr.time){
            setTimeout(overlay_remove, attr.time);
        }
        else{
            kico.overlay.onclick = function (){ overlay_remove() };
        }

        if(attr && attr.code){
            kico.overlay.onclick = function (){ overlay_remove(); attr.code() }
        }

        function overlay_remove() {
            kico.overlay.onclick = null;
            kico.overlay.classList.add("remove");

            setTimeout(function () {
                if(document.querySelector("body > .ks-overlay")){
                    kico.overlay.classList.remove("remove");
                    document.body.removeChild(kico.overlay);
                }
            }, 300);
        }
    };

    // 图片缩放
    kico.image_box = [];
    kico.image_box.img = this.create("img");
    kico.image_box.prev = this.create("div", {class: "ks-prev"});
    kico.image_box.next = this.create("div", {class: "ks-next"});
    kico.image_box.ball = this.create("div", {class: "ks-ball"});

    kico.image_box.wrap = this.create("div", {class: "ks-image", child: [
        kico.image_box.img, kico.image_box.prev, kico.image_box.next, kico.image_box.ball
    ]});

    this.image = function (selector) {
        var current = 0;
        var get_images = this.selectAll(selector);

        // 设置图片
        function set_image(img) {
            if(img.getAttribute("ks-original") !== null){
                kico.image_box.img.src = img.getAttribute("ks-original");
            }
            else if(img.src){
                kico.image_box.img.src = img.src;
            }

            kico.image_box.ball.classList.add("loading");
        }

        // 设置按钮
        function set_buttons(c) {
            function l(){
                if(current - 1 >= 0) current--;

                set_image(get_images[current]);
            }

            function r(){
                if(current + 1 < get_images.length) current++;

                set_image(get_images[current]);
            }

            kico.image_box.prev.onclick = l;
            kico.image_box.next.onclick = r;
        }

        // 循环内单条设定
        function set_item(obj, num) {
            var scale = 1;
            var locationX, locationY;

            obj.setAttribute("ks-image", "active");

            function single_click(){
                current = num;

                set_image(obj);
                set_buttons(num);

                if(!document.body.contains(kico.image_box.wrap)) {
                    document.body.appendChild(kico.image_box.wrap);
                }
            }

            obj.onclick = single_click;
        }

        this.forEach(get_images, function (i, j) {
            if(i.src || i.getAttribute("ks-original")){
                set_item(i, j);
            }
        });

        kico.image_box.img.onclick = function () {
            kico.image_box.wrap.classList.add("remove");
            setTimeout(function () {
                try{
                    document.body.removeChild(kico.image_box.wrap);
                    kico.image_box.wrap.classList.remove("remove");
                }
                catch (err){}
            }, 300);
        };

        kico.image_box.img.onload = function () {
            kico.image_box.ball.classList.remove("loading");
        }
    };

    // AJAX 组件
    this.ajax = function (prop) {
        if(!prop.url){
            prop.url = document.location.origin + document.location.pathname;
        }

        function test_crossDomain() {
            var a = document.createElement("a");
            a.href = window.location.hostname;
            return a.hostname === prop.url ? true : false;
        }

        if(prop.method === "POST"){
            var data = new FormData();

            for(var pk in prop.data){
                data.append(pk, prop.data[pk]);
            }
        }
        else if(prop.method === "GET"){
            var url = prop.url + "?";

            for(var k in prop.data){
                url += k + "=" + prop.data[k] + "&";
            }

            prop.url = url.substr(0, url.length - 1);
        }

        var request = new XMLHttpRequest();
        request.open(prop.method, prop.url);
        if(prop.crossDomain){ request.setRequestHeader("X-Requested-With", "XMLHttpRequest"); }

        if(prop.header){
            for(var i in prop.header){
                request.setRequestHeader(prop.header[i][0], prop.header[i][1]);
            }
        }

        request.send(data);

        request.onreadystatechange = function () {
            if(request.readyState === 4){
                if(request.status === 200 || request.status === 304){
                    prop.success ? prop.success(request) : console.log(prop.method + " 请求发送成功");
                }
                else{
                    prop.failed ? prop.failed(request) : console.log(prop.method + " 请求发送失败");
                }
            }
        };
    };

    // 返回页头
    this.scrollTop = function () {
        function to_top(){
            if(window.scrollY !== 0){
                window.scrollTo(0, window.scrollY * 0.9);
                requestAnimationFrame(to_top);
            }
            else{
                cancelAnimationFrame(this);
            }
        }

        window.requestAnimationFrame(to_top);
    };

    // Show Version
    console.log("%c Kico Style %c https://paugram.com ","color: #fff; margin: 1em 0; padding: 5px 0; background: #3498db;","margin: 1em 0; padding: 5px 0; background: #efefef;");
}

var ks = new Kico_Style();