Hexo

komantao 2019-12-12 2020-01-22 字数 24840 阅读量


hexo是一个台湾人写的是一款基于Node.js的静态博客框架,使用Markdown(或其他渲染引擎)解析文章,速度快、轻量级、主题比较小清新、依赖少、易于安装使用,可以方便的生成静态网页托管在GitHub、Gitee或Coding上,是搭建博客的首选框架。

一、简介

Hexo基本命令:

命令 功能
npm install -g hexo-cli 安装hexo-cli(hexo的命令行工具)
npm update -g hexo-cli 升级hexo-cli
hexo init 新目录名 初始化一个Hexo项目(个人静态网站)
hexo n [layout] “文章标题” 在Hexo项目内新建一篇文章。n == new
hexo g 将Hexo项目编译生成发布文档(public目录)。g == generate
hexo s 启动本地web服务器,可以在浏览器预览发布文档。s == server
hexo d 部署,将发布文档推送到个人网站。d == deploy
hexo cl 清除缓存文件(db.json和发布文档public目录)。cl == clean
hexo d -g 组合命令:生成 + 部署
hexo s -g 组合命令:生成 + 预览
  • 将hexo的安装路径添加到环境变量,仅能使用hexo -V命令
  • 将hexo项目根目录内的node_modules/.bin目录添加到环境变量,才能全局使用hexo的全部命令。但无此必要,因此,应该在hexo项目根目录内运行hexo命令

Hexo网站的搭建步骤:

  1. 编写文档

    使用Markdown语言编写Markdown文件。Markdown编辑器建议使用Typora。

  2. 编译文档

    使用Hexo将Markdown文件(源代码)编译生成静态文件(个人网站的组成部分,由html/css/js构建而成)。

  3. 托管文档

    使用Git将静态文件上传到远程服务器(博客、Git托管平台、个人网站等):

    1. GitHub创建远程仓库,GitHub添加SSH keys

    2. 文档部署到GitHub

      若只使用一个远程仓库,则应该分别部署到不同分支:

      • 源代码(本地master分支)部署到GitHub的master分支
      • 静态文件(本地pages分支)部署到GitHub的pages分支
    3. 设置个人域名

    4. 发布文章

二、安装

  1. 安装Node.js

    Nodejs官网下载对应平台的版本,根据提示安装即可(同步安装对应的npm)。

  2. 安装Git

    Git官网下载对应平台的版本,根据提示安装即可。

  3. 安装Hexo CLI

    $ npm install -g hexo-cli
    

    缺省路径时,默认安装到npm的全局模块路径内。

    通过下面的命令检查Hexo是否正确安装上了:

    $ hexo --version
    

    如果输出了一系列的版本号,说明所有安装工作都以完成,可以正式使用Hexo了。

  4. 升级Hexo CLI

    $ npm update -g hexo-cli
    

三、初始化项目

1、初始化

在本地硬盘的某一目录内新建一个Hexo项目目录(简称为Hexo根目录)并初始化。

  1. 创建Hexo项目的根目录

    示例:在本地目录(E:/学习/333/)下新建Hexo的根目录(示例为blog)。

    MINGW64 /e/学习/333
    $ hexo init blog
    INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
    Cloning into 'E:\学习\333\blog'...
    remote: Enumerating objects: 22, done.
    remote: Counting objects: 100% (22/22), done.
    remote: Compressing objects: 100% (17/17), done.
    remote: Total 153 (delta 8), reused 9 (delta 3), pack-reused 131
    Receiving objects: 100% (153/153), 29.67 KiB | 2.28 MiB/s, done.
    Resolving deltas: 100% (70/70), done.
    Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
    Cloning into 'E:/学习/333/blog/themes/landscape'...
    remote: Enumerating objects: 32, done.
    remote: Counting objects: 100% (32/32), done.
    remote: Compressing objects: 100% (25/25), done.
    remote: Total 1054 (delta 20), reused 10 (delta 7), pack-reused 1022
    Receiving objects: 100% (1054/1054), 3.21 MiB | 31.00 KiB/s, done.
    Resolving deltas: 100% (578/578), done.
    Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350'
    INFO  Install dependencies
    npm notice created a lockfile as package-lock.json. You should commit this file.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\nunjucks\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.1 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
       
    added 362 packages from 470 contributors and audited 2622 packages in 31.827s
    found 0 vulnerabilities
       
    INFO  Start blogging with Hexo!
    
    • 初始化前,要求Hexo的根目录不存在或是一个空白目录

    • 初始化实质是克隆hexo-starter(hexo的统一配置和相关依赖 ,原生主题是landscape)

    • 最后一行出现“INFO Start blogging with Hexo!”,表示Hexo根目录已成功初始化

    • 没有爆红的警告可以不管,基本上是是依赖包的兼容问题

      • fsevents是苹果系统的必选依赖,但当前系统是Windows(不需要),可忽略
  2. 安装/更新插件

    进入Hexo根目录(示例为blog),运行命令:

    $ cd blog
    $ npm install          # 安装/更新package.json文件内的插件
    

2、目录结构

Hexo根目录的树结构如下:

.                      # Hexo项目的根目录
├──.deploy_git         # 执行hexo deploy命令后部署到GitHub上的内容都在这个目录中
├── public             # 发布文档目录:存放发布到网站的资源
├── node_modules       # Hexo插件目录:存放Hexo的插件
├── scaffolds          # 模板目录:存放定义layout的MD文件
|   ├── post.md        # post(文章,Markdown文件)的layout
|   ├── page.md        # page(网页,个人静态网站)的layout  
|   └── draft.md       # draft(草稿)的layout
├── source             # 资源目录:存放源代码(例如Markdown文件)的相关资源
|   ├── 其它目录        # 将作为网站的资源
|   ├── _drafts        # 草稿目录
|   └── _posts         # 源代码目录:源代码(例如Markdown文件)必须存放在此目录内
├── themes             # 主题目录:Hexo根据主题来生成静态页面
|   └── _config.yml    # 主题配置文件
├── _config.yml        # 网站配置文件
├── package.json       # Hexo插件配置文件
└──package-lock.json   # Hexo插件配置文件

文件描述:

文件 描述 备注
_config.yml 个人网站的配置信息 参阅配置教程
scaffolds 模板文件夹 在新建的markdown文件中设置格式
source 资源文件夹 不以 _ 开头的文件是网站的静态资源
public 发布资源文件夹 存放Markdown和HTML文件
themes 主题文件夹 参阅配置教程
package.json/package-lock.json 插件配置文件 参阅配置教程
node_modules 插件安装目录 插件配置后下载到本地目录
  • source(资源文件夹):除 _posts 文件夹外,开头命名为 _ (下划线)的文件/文件夹和隐藏的文件将会被忽略
  • public:发布文档目录,存放编译后的文件,方便上传到远程服务器
  • themes(主题文件夹):Hexo根据主题来生成静态页面
  • scaffolds:模版文件夹。新建文章时,Hexo会根据模版来建立文件。Hexo的模板是指在新建的markdown文件中默认填充的内容
  • package-lock.json:用来记录当前状态下实际安装的各个npm package的具体来源和版本号(大小版本号)。一般为了稳定性考虑,不能随意升级依赖包,因为很难排查换包导致兼容性的bug,所以package-lock.json的作用是锁定包而不升级。 如果要升级package-lock.json里面的库包,运行npm install XXX@x.x.x
  • package.json:只能锁定大版本,即版本号的第一位,不能锁定后面的小版本。package.json的作用是在npm install时拉取该大版本下面最新的版本

四、编写文档

在Hexo环境编写MD文件,需要遵循Hexo的一些规则:

  • Markdown文件

    • hexo new命令新建的Markdown文件,统一存入source/_posts目录内

      Hexo命令不能指定路径新建文件,只能在存入目录后,然后手动新建子目录。

    • 或者将已有Markdown文件放入source/_posts目录内由Hexo管理

    • 可使用Hexo的模板定制Markdown文件的扉页(Front-matter)

  • 引用本地图片有点麻烦:使用标签语法或第三方插件

1、新建文件

1.1 Hexo命令

使用hexo new命令创建Markdown文件,统一存入source/_posts目录内。

语法:hexo new [layout] [Scaffold] <title>
  • title:文章标题

    建议使用双引号括起。Hexo默认以文件名称作为博客文章的标题,编辑_config.yml中的“new_post_name”参数可改变默认的文件名称。

    新建文章统一储存到source/_posts目录内,然后手动创建目录分类储存。

  • layout:指定文章的布局

    Hexo有3个布局,可修改_config.yml中的“default_layout”参数可更改默认布局。

    • post:默认布局,文章布局,结合hexo new命令就是创建Markdown文件
    • page:网页布局,结合hexo new命令就是创建网站的菜单项
    • draf:草稿布局
  • Scaffold:模版

    新建文章时,Hexo根据scaffolds文件夹内的文件创建扉页。

示例:

MINGW64 /e/学习/333/blog
$ hexo new "Hexo"
INFO  Created: E:\学\333\blog\source\_posts\Hexo.md
  • 缺省模板名称时,默认使用post模板

1.2 导入MD文件

将已写好的md文件(或整个目录)复制到source/_posts目录内,完成文章的导入。 然后,每个MD文件根据需要重新设置扉页。

2、设置扉页

通过模板定制MD文件的扉页(Front-matter)。扉页是MD文件最上方以---分隔(YAML格式)的区域,指定文件的变量。示例:设置post模板(文章,scaffolds/post.md)。

---
title: {{ title }}                          # Markdown文件自动填写标题
date: {{ date }}                            # Markdown文件自动填写日期
toc: true                                   # 开启toc
top: 1                                      # 添加top,首页文章实现自定义排序
tags: [标签1, 标签2, 标签3, ...]             # 在Markdown文件手动修改多标签的名称 
categories: [1级分类, 2级分类, 3级分类, ...]  # 在Markdown文件手动修改多级分类的名称
---

2.1 扉页参数

参数 描述 默认值
layout 布局 post(默认)、page和draft
title 文章标题 自定义
date 文章建立日期 yyyy-MM-dd HH:mm:ss
updated 文章更新日期 yyyy-MM-dd HH:mm:ss
comments 开启文章评论功能 true
tags 标签。标签没有顺序和层次 (不适用于分页)
categories 分类。分类具有顺序性和层次性 (不适用于分页)
permalink 覆盖文章网址 自定义
  • 只有主题支持分类和标签,才可以在扉页中设置

2.2 扉页设置方法

  • 方法一:使用命令hexo new 模板名 "MD文件名",在创建MD文件时通过模板构造扉页

    layout: photo
    title: Markdown
    date: 2019-11-02 15:32:49
    
  • 方法二:直接在MD文件最上方构造扉页(若是json格式,将---替换为 ;;; 即可)

    title: Hexo
    tags: [编程, 主题]
    categories:
      - 主题
      - Hexo
      - 配置
      - 多级分类
    date: 
    

    在网站呈现的效果:

    image-20191105225309032

3、设置摘要

在首页设置摘要有两种方法:

方法一:md文件中使用<!--more-->标签,点击“阅读全文”才能看见more标签以下的内容。

方法二:不使用<!--more-->标签,自动显示部分摘要。

themes/主题名/_config.xml文件中搜索“index”,将“expand”的值修改为false。

index:
  expand: false ## default is unexpanding,so you can only see the short description of each post.
  excerpt_link: Read More

Wikitten主题不使用<!--more-->标签时,在首页会存在文章嵌套的bug:

image-20191125112033798

使用<!--more-->标签后,文章在首页显示的格式统一了:

image-20191125112126219

4、添加图片

参阅:hexo 添加图片,音乐,链接,视频

4.1 图床图片

将图片上传到一些免费的CDN服务(七牛云储存Cloudinary)中,上传图片后,会生成对应的url地址,然后在MD文件中通过地址引用图片。

因为GitHub存储空间有限,若大量使用本地图片,将会挤占GitHub有限的存储空间。因此,建议使用图床( 存放图片的服务器 )。

参阅:使用七牛云做图床

4.2 本地图片

参阅:hexo引用本地图片无法显示

  • 方法一:统一目录存放

    source目录新建一个目录(例如images)统一存放所有文章的图片,方便重复引用。

  • 方法二:分目录存放

    创建一个与文章同名的目录,且与文章位于同一目录内。

    需要安装第三方插件来转换图片路径,Hexo才能正确读取图片。

    1. 网站配置文件开启资源目录

      将_config.yml文件中的“post_asset_folder”选项更改为true:

      post_asset_folder: false   →→→   post_asset_folder: true
      
    2. 安装图片路径转换的插件

      npm install https://github.com/CodeFalling/hexo-asset-image --save
      
    3. 修改插件的index.js

      仅在转换失败时才需要修改。转换失败时:

       $ hexo s
      INFO  Start processing
      update link as:-->/.com//1555311576892.png   # 出现/.com/,表示转换失败
      
      • 图片路径转换为/.com//1555311576892.png(转换失败),图片无法显示

        image-20191106214410224

      失败原因:应该是hexo-asset-image插件的bug,Hexo版本3.0以上获取网站url的方式与3.0以下有些不同。修改hexo-asset-image的index.js,或者卸载hexo-asset-image,选择使用hexo 3.0方式的标签语法插入本地图片。

      文本编辑器修改node_modules/hexo-asset-image/index.js文件为:

       'use strict';
      var cheerio = require('cheerio');
           
      // http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
      function getPosition(str, m, i) {
        return str.split(m, i).join(m).length;
      }
           
      var version = String(hexo.version).split('.');
      hexo.extend.filter.register('after_post_render', function(data){
        var config = hexo.config;
        if(config.post_asset_folder){
             var link = data.permalink;
         if(version.length > 0 && Number(version[0]) == 3)
            var beginPos = getPosition(link, '/', 1) + 1;
         else
            var beginPos = getPosition(link, '/', 3) + 1;
         // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
         var endPos = link.lastIndexOf('/') + 1;
          link = link.substring(beginPos, endPos);
           
          var toprocess = ['excerpt', 'more', 'content'];
          for(var i = 0; i < toprocess.length; i++){
            var key = toprocess[i];
            
            var $ = cheerio.load(data[key], {
              ignoreWhitespace: false,
              xmlMode: false,
              lowerCaseTags: false,
              decodeEntities: false
            });
           
            $('img').each(function(){
             if ($(this).attr('src')){
                 // For windows style path, we replace '\' to '/'.
                 var src = $(this).attr('src').replace('\\', '/');
                 if(!/http[s]*.*|\/\/.*/.test(src) &&
                    !/^\s*\//.test(src)) {
                   // For "about" page, the first part of "src" can't be removed.
                   // In addition, to support multi-level local directory.
                   var linkArray = link.split('/').filter(function(elem){
                     return elem != '';
                   });
                   var srcArray = src.split('/').filter(function(elem){
                     return elem != '' && elem != '.';
                   });
                   if(srcArray.length > 1)
                     srcArray.shift();
                   src = srcArray.join('/');
                   $(this).attr('src', config.root + link + src);
                   console.info&&console.info("update link as:-->"+config.root + link + src);
                 }
             }else{
                 console.info&&console.info("no src attr, skipped...");
                 console.info&&console.info($(this));
             }
            });
            data[key] = $.html();
          }
        }
      });
      
    4. 新建MD文件

       hexo new <title>     # title为新建文章名,可任意命名
      
    5. MD文件添加(引用)本地图片

      • markdown语法:图片只能在文章中显示,但首页缩略图可能不显示

        ![替代文字](xxx/图片名.jpg)   # xxx为title文件夹
        
      • 标签插件语法:图片可在文章和首页缩略图中显示,但无法在MD文件内显示

        {% asset_path slug %}
        {% asset_img 图像名.jpg [slug] [title] %}
        {% asset_link slug [title] %}
        
        • slug:描述图片的替代文字
      • asset_img:后接图片名称(图片名.jpg)

    6. 验证图片路径能否转换成功

       $ hexo clean && hexo g && hexo s
      INFO  Start processing
      update link as:-->/2019/11/06/111/1555311576892.png
      
      • 图片路径转换为/2019/11/06/111/1555311576892.png(转换成功),显示图片
    • 插件只能转换相对路径(与文件名同名的目录内)的图片

5、添加播放器

  1. 打开网页版的网易云音乐,选择喜欢的音乐,点击"生成外链播放器”

    image-20191104155552129

  2. 进入网易云音乐插件界面,点击“iframe插件”,复制外链的代码

    image-20191104155802904

  3. 计划在侧边栏插入这首歌的音乐播放器

    打开侧边栏的ejs文件,添加刚刚复制的外链代码。

  4. 重新生成、部署网页

五、编译文档

  1. 调试,启动本地web服务器在本地浏览效果

    $ hexo server --debug
    …………
    13:11:46.051 DEBUG Generator: asset
    13:11:46.060 INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
    

    在浏览器中输入http://localhost:4000查看效果。

  2. 本地预览,启动本地web服务器在本地浏览效果

    $ hexo s                      # s = server
    INFO  Start processing
    INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
    
    • 若出现:http://localhost:4000,表示博客基本完成建立
  3. 若出现缓存引起的异常, 可以在生成命令前执行清除缓存

    缓存是指hexo init时解析的Markdown源文档,存入在public目录内。

    $ hexo cl                    # cl= clean
    INFO  Deleted database.
    INFO  Deleted public folder.
    
  4. 生成静态的发布文档

    $ hexo g                      # g = generate
    INFO  Start processing
    INFO  Files loaded in 229 ms
    INFO  Generated: index.html
    INFO  Generated: archives/index.html
    …………
    INFO  Generated: fancybox/jquery.fancybox.js
    INFO  28 files generated in 519 ms
    

    若无报错,说明各项配置都没有问题,建站成功,生成db.json文件和public文件夹。

    Markdown和HTML文件会被解析并放到public文件夹,而其他文件会被拷贝过去。

六、部署文档

Hexo提供了快速方便的一键部署命令,就能将public目录部署到远程服务器(GitHub等)上。

hexo d|deploy

部署步骤:

  1. 设置_config.yml

    修改网站配置文件_config.yml为:

    deploy: 
      type: git
      repo: xxx               # GitHub远程仓库的Git地址
      branch: master
    

    可同时使用多个 deployer,Hexo会依照顺序执行每个deployer:

    deploy:
      type: git
      repo: <repository url>
      branch: [branch]
      message: [message]
    deploy:
      type: git
      repo: <repository url>
      branch: [branch]
      message: [message]
    
  2. 安装Git部署插件(hexo-deployer-git):

    npm install hexo-deployer-git --save
    

    使用–save安装依赖到本文件夹,会记录到package.json中的dependencies内。

  3. 运行命令,推送到指定仓库

    hexo clean && hexo g && hexo d
    

使用git clone方式下载主题后,如果博客使用CI工具自动部署,一定要删除主题目录内的.git目录,在项目的.git目录内最好不要再出现.git目录。否则,生成的博客页面一片空白。

七、主题

不建议在主题美化花费太多时间,选择合适的主题即可。因为:Hexo主题美化涉及html/css/js等方面的专业知识点,包含如何寻找修改文件、如何修改/添加内容、在修改过程中如何解决各文件之间的协调关系,最后一点就是,Hexo和主题是不断升级版本的,若其改变了之前的设置,就会有可能导致美化内容失效。

Hexo主题包的目录树结构:

.                    # 主题目录
├── includes
├── languages        # 用来配置国际化语言版本,里边包含各种个配置像的文本翻译
├── layout           # 主题布局:以ejs文件来定义各种含有配置信息调用的布局
├── scripts          # JS脚本
├── source           # 主题配置资源:存放css、js脚本、图片、字体等
|   ├── css          # 用来修改自定义样式,需要掌握一定的css语法
|   ├── fonts        # 定义字体文件,可以修改博客字体
|   ├── images       # 本地调用的图片放这里
|   ├── js           # 一些js脚本(特效.js存放处)
|   └── 404.html     # 自定义的公益404页面
└── _config.yml      # 主题配置文件:YML数据串行化格式语言书写的配置文件

1、网站配置文件

路径:_config.yml

使用文本编辑器修改网站配置文件。

具体设置参阅: https://hexo.io/zh-cn/docs/configuration

示例:

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 网站
title: 无边风月                             # 网站标题
subtitle:                                  # 网站副标题
description: 自古求真皆寂寞,唯挑心灯伴夜霭    # 网站描述
author: Komenytao                          # 作者名称
avatar: source/images/avatar.jpg           # 作者头像。本地图像存放在source目录内
language: zh-CN                            # 网站使用语言。当前主题的languages目录下的简体中文包名称
timezone:                                  # 网站时区。Hexo默认使用您电脑的时区
since: 2015                                # 网站建立年份

# Social links 社交链接
social:
  Github: https://github.com/xxx
  Weibo: http://weibo.com/xxx
  Email: mailto:xxx
  # zhihu: http://www.zhihu.com/people/your-user-name

# title, chinese available
links_title: 友情链接
links:
  我的CSDN博客: http://blog.csdn.net/xxx
  我的新浪博客: http://blog.sina.com.cn/xxx

# URL 网址
## 若博客存放在网站子目录中,则将url设为http://yoursite.com/blog,并将root设为/blog/
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/                 # 生成文章的永久链接格式
#permalink: :category/:year/:month/:day/:title.html    
permalink_defaults:

# Directory
source_dir: source                         # 源文件夹,存放内容(MD源文件)
public_dir: public                         # 公共文件夹,存放生成的静态文件
tag_dir: tags                              # 标签文件夹
archive_dir: archives                      # 归档文件夹
category_dir: categories                   # 分类文件夹
code_dir: downloads/code                   # nclude code文件夹
i18n_dir: :lang                            # 国际化(i18n)文件夹
skip_render:                               # #跳过指定文件的渲染,可使用glob表达式匹配

# Writing 文章布局、写作格式的定义
new_post_name: :title.md                   # 新建文章默认文件名
default_layout: post                       # 默认布局。使用scaffolds目录内的模板文件
titlecase: false                           # 文章标题转换为titlecase格式(首字母大写)
external_link: true                        # 在新标签中打开一个外部链接
filename_case: 0                           # 转换文件名,1代表小写;2代表大写;默认为0,意思就是创建文章时,是否自动帮你转换文件名,默认就行,意义不大
render_drafts: false                       #是否渲染_drafts目录下的文章,默认为false
post_asset_folder: false                   # 是否启动asset文件夹
relative_link: false                       # 将链接改为与根目录的相对地址
future: true                               # 显示未来的文章
highlight:                                 # Hexo自带的语法高亮(node_modules/highlight.js)
  enable: true                             # 启用
  line_number: true                        # 代码块显示行号
  auto_detect: true                        # 启动自动选择(自动判断语言,选择高亮模式)
  tab_replace: ''                          # tab格式转换为''

# Home page setting  网站的首页(Home)设置
index_generator:
  path: ''                             # 博客索引时的路径(''表示根路径)
  per_page: 10                         # 每页显示文章的数目。(0,禁用分页)
  order_by: -date                      # 文章的顺序。(默认按日期降序排列)
  
# Category & Tag 网站的分类(Categories)和标签(tags)的设置
default_category: uncategorized             # 不分类
category_map:                               # 分类别名
## 作用是为了让url中尽量少出现中文而做的映射。示例:
#    编程: programming
#    生活: life
#    其他: othe
tag_map:                                    # 标签别名

# Date/Time format  Hexo使用Moment.js解析和显示日期
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination 每页显示文章数
per_page: 10                     # 设置为0,禁用分页
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: 选项只适用于“source/”文件夹
include:
exclude:
ignore:

# Extensions  配置站点所用主题和插件
## Plugins: http://hexo.io/plugins/
plugins:
baidusitemap: # 需要安装插件:npm install hexo-generator-baidu-sitemap@0.1.1 --save
  path: baidusitemap.xml

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next                             # 主题

feed:
  type: atom                            # feed 类型 (atom/rss2)
  path: atom.xml                        # rss 路径
  limit: 0                              # 在rss中最多生成的文章数(0显示所有)

# 自定义站点内容搜索,需要先安装插件:npm install hexo-generator-search --save
search:
  path: search.xml
  field: all                           # 如只想索引文章,可设置为post

# Deployment 站点部署到github
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repository:
  	  github: git@github.com:xxxx/xxxxx.github.io.git  # 部署到github pages
      coding: git@git.coding.net:xxxx/xxxx.git         # 部署到coding pages
  branch: master                                       # 上传到git服务的主分支上

# ---------------下面选项需要对应插件的支持---------------
# npm install hexo-generator-index --save
# npm install hexo-generator-archive --save
# npm install hexo-generator-category --save
# npm install hexo-generator-tag --save

index_generator:
  per_page: 10                    # 首页默认10篇文章标题 如果值为0不分页

archive_generator:
  per_page: 20                    # 归档页面默认20篇文章标题
  yearly: true                    # 生成年视图
  monthly: true                   # 生成月视图

tag_generator:
  per_page: 10                    # 标签分类页面默认10篇文章

category_generator:
  per_page: 10                    # 分类页面默认10篇文章

1.1 设置语言

博客框架默认语言是英文(en)。

  1. 查看当前使用的主题包(landscape)的简体中文包名称

    前往themes/主题名/languages目录获知简体中文翻译文件的名称是zh-CN.yml

  2. 在_config.yml文件中查找“language”,更换为简体中文:

    language: en   →→→   language: zh-CN
    

1.2 资源文件夹

source称为资源文件夹,用来管理图片和其它资源等。

开启资源文件管理功能:将_config.yml文件中的“post_asset_folder”选项更改为true。

post_asset_folder: false   →→→   post_asset_folder: true
  • 开启后,运行hexo new命令创建新MD文件时自动创建一个与MD文件名同名的文件夹

  • 将所有与你的文章有关的资源(例如图片)放在这个关联文件夹中

  • 以通过相对路径来引用相关资源

  • 配套措施:Typora(Markdown编辑器)的图片添加方法设置为:

    image-20191106212523728

2、安装主题

推荐主题:Wikitten、yelee、icarus。

  1. 选择主题

    官网的主题页面选择主题(示例安装3-hexo):

    image-20191102203815581

  2. 安装主题

    点击主题名称(3-hexo)进入GitHub仓库,克隆操作:

    MINGW64 /e/学习/blog
    $ git clone https://github.com/yelog/hexo-theme-3-hexo.git themes/3-hexo
    Cloning into 'themes/3-hexo'...
    remote: Enumerating objects: 20, done.
    remote: Counting objects: 100% (20/20), done.
    remote: Compressing objects: 100% (17/17), done.
    remote: Total 2161 (delta 3), reused 11 (delta 3), pack-reused 2141
    Receiving objects: 100% (2161/2161), 1.35 MiB | 47.00 KiB/s, done.
    Resolving deltas: 100% (1224/1224), done.
    
    • 主题包统一安装到themes目录内,主题包的目录名可自定义(3-hexo)
  3. 启用主题

    文本编辑器打开_config.yml文件,搜索“theme”,将原来默认的主题“landscape”改为 “3-hexo”(步骤2中自定义的主题目录名):

    theme: landscape   →→→   theme: 3-hexo
    
    • Hexo可安装多个主题,但当前启用的只能是一个
  4. 预览新主题

    $ hexo s
    

3、Wikitten主题

Wikitten主题的GitHub仓库

使用方法:安装后,参阅自带的README_zh-CN.md文件进行基本的设置。

3.1 TOC插件

TOC默认显示在文章页面(post)内,现打算将其显示在侧边栏(sidebar)内。

思路:

  1. 定位侧边栏内的插件的布局文件的放置位置

    查找侧边栏的布局文件(使用ejs语法的HTML页面结构)的过程:

    1. 查看网站的全局布局文件:themes/Wikitten/layout/layout.ejs

      在layout.ejs文件内找到<%- partial('common/sidebar') %>,得知侧边栏的布局文件是themes/Wikitten/layout/common/sidebar.ejs

    2. 在sidebar.ejs文件内找到<%- partial('widget/' + widget) %>,得知插件的布局文件是themes/Wikitten/layout/widget/xxx.ejs

  2. 编写插件布局文件

    • HTML标签使用div标签包围,在页面显示图标
    • JavaScript使用script标签包围,在图标实现互动操作
  3. 编写插件CSS文件

    路径:themes/Wikitten/source/css/

    • _variables.styl:定义各CSS文件中用到的变量的初始值
    • style.styl:主题的整体CSS
  4. 添加插件的开关

    在主题配置文件(themes/Wikitten/_config.yml)添加widget。

操作过程:

  1. MD文件开启TOC功能

    在MD文件的扉页添加:toc: true

  2. 编写TOC的ejs文件

    MD文件开启TOC功能后,默认在文章正文(post)内显示目录,现在希望在侧边栏(page)内显示目录(TOC)。

    • 删除旧文件(目的:不在文章正文内显示TOC)

      删除themes/Wikitten/layout/common/article.ejs文件内关于toc的内容:

         <% if (post.toc) { %>
             <div id="toc" class="toc-article">
             <strong class="toc-title"><%= __('article.catalogue') %></strong>
                 <%- toc(post.content) %>
             </div>
         <% } %>
      
    • 编写新文件(目的:在侧边栏内显示TOC)

      将删除内容粘贴到themes/Wikitten/layout/widget目录内生成新文件toc.ejs,标签名称修改为侧边栏(themes/Wikitten/source/css/_partial/sidebar.styl)定义的标签。

       <% if (page.toc) { %>
          <div class="widget-wrap toc-list">
             <h3 class="widget-title toc-title">
                  <span><%= __('章节目录') %></span>
              </h3>
              <%- toc(page.content, {list_number: false}) %>
          </div>
      <% } %>
      
      • 查看/获取HTML标签名称:使用浏览器的开发者工具(F12)
      • 第一行:判断页面是否存在TOC(在MD文件的扉页添加了toc: true
      • 第二、三行:使用侧边栏定义标签,既保持了整体CSS风格,又不需要定义CSS
      • 第四行:自定义标题名称
      • 第六行:使用hexo自带toc函数显示目录内容
        • str参数为page.content,page定义为在导航标签页显示TOC,post定义为在文章详情页显示TOC
        • options参数是{list_number: false},false表示不显示编号
        • 若第一行和第六行的类(page)不同,或会触发错误:Cannot read property ‘parent’ of undefined
  3. 主题配置文件设置TOC的启动开关

    在主题的配置文件(themes/Wikitten/_config.yml)添加该widget:

    widgets: # default use category only
        - category
        - toc                           # 新增,设置开关
        # - recent_posts
        # - archive
        # - tag
        # - tagcloud
        # - links
    

    若只需要在侧边栏简单显示TOC,至此,步骤结束。

  4. 扩展TOC的功能

    编写TOC的JavaScript,增加功能:次级目录小图标、次级目录折叠、文章总目录折叠。

    完整的toc.ejs:

    <% if (page.toc) { %>
        <div class="widget-wrap" id='toc'>
            <h3 class="widget-title">
                <span><%= __('目录') %></span>
                &nbsp;
                <a id='tocExpand' href="#">
                    <i class="fa fa-angle-double-<%- theme.customize.category_perExpand ? 'up' : 'down' %> fa-2x"></i>
                </a>
            </h3>
         <%- toc(page.content, {list_number: false}) %>
     </div>
       	
     <script>
         //添加小图标
         var $itemHasChild = $("#toc .toc-item:has(> .toc-child)");
         var $titleHasChild = $itemHasChild.children(".toc-link");
         $itemHasChild.prepend("<i class='fa fa-caret-down'></i><i class='fa fa-caret-right'></i>");
         var $opentoc = $(".toc-item > .fa-caret-down");
         var $closetoc = $(".toc-item > .fa-caret-right");		
         $closetoc.addClass("hide").hide();	
       		
         // 点击小图标
         var clickIcon = function(){
             $("#toc .toc-item > i").click(function(){
                 $(this).hide();
                 $(this).siblings(".toc-child").slideToggle(100);
                 $(this).toggleClass("hide");
                 $(this).siblings("i").toggleClass("hide");
                 if$(this).siblings("i").hasClass("hide") ){
                		// 执行隐藏
                		$(this).siblings("i").hide();
            		}else{
                		// 显示
                		$(this).siblings("i").show();
            		}
             })
         }()	
       
         // 展开关闭所有目录
         var clickTocTitle = function(){
             var $subToc = $titleHasChild.next(".toc-child");
             var $tocTitle = $("#tocExpand");
             var iconAllExpandClass = 'fa-angle-double-down';
                var iconAllPackClass = 'fa-angle-double-up';
             // 当包含多级目录时再执行
             if ($titleHasChild.length) {
                 $tocTitle.addClass("clickable");
                 $tocTitle.click(function(){
                     var icon = $(this).children('.fa');
                     if ($subToc.is(":hidden")) {
                         $subToc.show(100);
                         $closetoc.addClass("hide").hide();
                         $opentoc.removeClass("hide").show();
                         icon.removeClass(iconAllPackClass).addClass(iconAllExpandClass);
                     } else {
                         $subToc.hide(100);
                         $opentoc.addClass("hide").hide();
                         $closetoc.removeClass("hide").show();
                         icon.removeClass(iconAllExpandClass).addClass(iconAllPackClass);
       						
                     }
                 })
             }
         }()
        </script>	
    <% } %>
    

    尚未解决问题:点击所有目录图标时会自动返回顶部。

  5. 设置toc插件的CSS

    在侧边栏的样式文件(themes/Wikitten/source/css/_partial/sidebar.styl)内添加toc插件的自定义样式:

    /*小图标*/
    #toc ol.toc li.toc-item i {
        display: inline-block;
        margin-left: -0.9em;
        width: 0.9em;
        color: #333;
        font-weight: bold;
        cursor: pointer;
    }
    #toc ol.toc li.toc-item i:hover {
        color: #ff0000;
    }
    /*关联图标的Class*/
    #toc ol.toc li.toc-item i.hide {
        display: none;
    }
       
    /*关联总标题的Class*/
    #toc #tocExpand.clickable {
        cursor: pointer;
    }
    #toc #tocExpand.clickable:hover {
        color: #88acdb;
    }
    #toc #tocExpand.clickable:active {
        color: #d3d3d3;
    }
       
    /*其他目录相关*/
    #toc {
        font-size: 0.9em;
        line-height: 1.8em;
     float: none;
    }
    #toc ol.toc {
        margin-left: 0;
        padding: 1.2em;
        padding-right: 0;
     max-height: 380px;
     overflow: auto; 
    }
    #toc ol.toc li.toc-item {
        list-style-type: none;
    }
       
    #toc ol.toc li.toc-item:hover {
        background: none;
    }
    #toc ol.toc a.toc-link {
        color: #333;
     font-weight: bold;
    }
    #toc ol.toc a.toc-link:hover {
        color: #88acdb;
        text-decoration: none;
        background: rgba(158,188,226,0.21);
    }
    #toc ol.toc ol.toc-child {
        padding-left: 1.25em;
        margin: 4px 0;
    }
    #toc ol.toc ol.toc-child a.toc-link {
     color: #38b7ea;
     font-weight:normal;
    } 
    

3.2 categorie插件

修改themes/Wikitten/layout/widget/category.ejs中的一个设置:将up图标定义为折叠目录,down图标定义为打开目录。

<% if (site.categories.length) { %>
    <div class="widget-wrap" id='categories'>
        <h3 class="widget-title">
            <span><%= __('widget.categories') %></span>
            &nbsp;
            <a id='allExpand' href="#">
                <i class="fa fa-angle-double-<%- theme.customize.category_perExpand ? 'up' : 'down' %> fa-2x"></i>
            </a>
        </h3>
        
        <% 
            function listCategories(categories, posts) {
                function layArticles(posts) {
                    var classifiedArticles = {'_root': []};
                    posts.forEach(function(post,i){
                            var last_post_cat;
                            var post_info = {
                            "title": post.title,
                            "date": post.date,
                            "path": url_for(post.path),
                            "_id": post._id
                        };
                        if(post.categories.length) {
                            last_cat_id = post.categories.data.slice(-1)[0]['_id'];
                            if(!classifiedArticles[last_cat_id]) classifiedArticles[last_cat_id] = [];
                            classifiedArticles[last_cat_id].push(post_info);
                        } else {
                            classifiedArticles['_root'].push(post_info);
                        }
                    });
                    return classifiedArticles;
                }
                function prepareQuery(categories, parent) {
                    var query = {};
                    if (parent) {
                        query.parent = parent;
                    } else {
                        query.parent = {$exists: false};
                    }
                    return categories.find(query).sort('name', 1).filter(function(cat) {
                        return cat.length;
                    });
                }
                function hierarchicalList(tree, parent, classifiedArticles) {
                  if(!tree.name) tree = {"name": "_root", "_id": "_root", "children": [], "articles": classifiedArticles['_root']};
                  prepareQuery(categories, parent).forEach(function(cat, i) {
                      var now_category = {
                          "_id": cat._id, 
                          "name": cat.name, 
                          "children": [],
                          "articles": classifiedArticles[cat._id]
                      };
                      if(is_post() && now_category.articles) {
                          now_category.articles.forEach(function(post, i) {
                              if(page._id == post._id) now_category["selected"] = true;
                          });
                      }
                      var childTree = hierarchicalList(now_category, cat._id, classifiedArticles);
                      if(childTree.selected) {tree["selected"] = true};
                      tree.children.push(childTree);
                  });
                  return tree;
                }
                var classifiedArticles = layArticles(posts);
                var categoriesTree = hierarchicalList({}, null, classifiedArticles);
                return categoriesTree;
            }
        %>
        <% 
            function visitTreePosts(branch, perExpand) {
             %> <ul class="unstyled" id="tree" <% if(perExpand) { %>style="display: block;"<% } %>> <%
                if(branch.children && branch.children.length) {
                    branch.children.forEach(function(category){
                    %>
                    <li class="directory<%- category.selected ? ' open' : '' %>">
                        <a href="#" data-role="directory">
                            <i class="fa fa-folder<%- (perExpand || category.selected) ? '-open' : '' %>"></i>
                            &nbsp;
                            <%- category.name %>
                        </a>
                        <% visitTreePosts(category, perExpand) %>
                    </li> 
                    <%  
                    });
                } 
                if(branch.articles && branch.articles.length) {
                    branch.articles.sort(function(post0, post1) {
                        return new Date(post0.date) - new Date(post1.date)
                    }).forEach(function(post){
                        %> <li class="file<%- (is_post() && post._id == page._id) ? ' active' : '' %>"><a href="<%- post.path %>"><%- post.title %></a></li> <%
                    });
                }
             %> </ul> <%
            }
        %>
        <%
            var categoriesTree = listCategories(site.categories, site.posts);
            visitTreePosts(categoriesTree, theme.customize.category_perExpand);
        %>
    </div>
    <script>
        $(document).ready(function() {
            var iconFolderOpenClass  = 'fa-folder-open';
            var iconFolderCloseClass = 'fa-folder';
            var iconAllExpandClass = 'fa-angle-double-down';
            var iconAllPackClass = 'fa-angle-double-up';
            // Handle directory-tree expansion:
            // 左键单独展开目录
            $(document).on('click', '#categories a[data-role="directory"]', function (event) {
                event.preventDefault();

                var icon = $(this).children('.fa');
                var expanded = icon.hasClass(iconFolderOpenClass);
                var subtree = $(this).siblings('ul');
                icon.removeClass(iconFolderOpenClass).removeClass(iconFolderCloseClass);
                if (expanded) {
                    if (typeof subtree != 'undefined') {
                        subtree.slideUp({ duration: 100 });
                    }
                    icon.addClass(iconFolderCloseClass);
                } else {
                    if (typeof subtree != 'undefined') {
                        subtree.slideDown({ duration: 100 });
                    }
                    icon.addClass(iconFolderOpenClass);
                }
            });
            // 右键展开下属所有目录
            $('#categories a[data-role="directory"]').bind("contextmenu", function(event){
                event.preventDefault();
                
                var icon = $(this).children('.fa');
                var expanded = icon.hasClass(iconFolderOpenClass);
                var listNode = $(this).siblings('ul');
                var subtrees = $.merge(listNode.find('li ul'), listNode);
                var icons = $.merge(listNode.find('.fa'), icon);
                icons.removeClass(iconFolderOpenClass).removeClass(iconFolderCloseClass);
                if(expanded) {
                    subtrees.slideUp({ duration: 100 });
                    icons.addClass(iconFolderCloseClass);
                } else {
                    subtrees.slideDown({ duration: 100 });
                    icons.addClass(iconFolderOpenClass);
                }
            })
            // 展开关闭所有目录按钮
            $(document).on('click', '#allExpand', function (event) {
                event.preventDefault(); 
                var icon = $(this).children('.fa');
                var expanded = icon.hasClass(iconAllPackClass);
                if(expanded) {
                    icon.removeClass(iconAllPackClass).addClass(iconAllExpandClass);
					$('#sidebar .fa.fa-folder').removeClass('fa-folder').addClass('fa-folder-open')
                    $('#categories li ul').slideDown({ duration: 50 });
                    
                } else {
                    icon.removeClass(iconAllExpandClass).addClass(iconAllPackClass);
					$('#sidebar .fa.fa-folder-open').removeClass('fa-folder-open').addClass('fa-folder')
                    $('#categories li ul').slideUp({ duration: 50 });
                    
                }
            });  
        });
    </script>
<% } %>

categorie插件:

  • 分类内显示的文章名称是文章的title属性定义时的名称,不是文章的文件名,按照date(创建日期)的正序排序
  • 分类内显示的文件夹名称是文章的categories属性定义时的名称,按照英文的正序排序

3.3 语法高度插件

  1. 限制代码块高度

    代码块输入源代码时,太多代码行会导致显示不美观。因此,需要限制最大高度。

    网页元素的标签:<figure class="highlight xxx">

    CSS文件路径:themes/Wikitten/source/css/_highlight/index.styl

    修改方法:

    .highlight
        max-height: 300px       # 新增最大高度
        overflow: auto          # 新增
        margin: 1.6em 0
        .line
            height: 1.6em;
    
  2. 添加代码块复制按钮

    将icarus主题的代码块复制按钮移植到Wikitten主题:

    1. icarus主题的代码块复制功能位于themes/icarus/source/js/main.js文件内:

          $('figure.highlight').each(function () {
              var id = 'code-' + Date.now() + (Math.random() * 1000 | 0);
              var button = '<a href="javascript:;" class="copy" title="Copy" data-clipboard-target="#' + id + ' .code"><i class="fas fa-copy"></i></a>';
              $(this).attr('id', id);
              if ($(this).find('figcaption').length) {
                  $(this).find('figcaption').prepend(button);
              } else {
                  $(this).prepend('<figcaption>' + button + '</figcaption>');
              }
          });
          new ClipboardJS('.highlight .copy');    
      
    2. 将上述代码粘贴到Wikitten主题的themes/Wikitten/source/js/main.js文件内

      放入合适位置(位置随意,例如在To Top的上方):

          $('figure.highlight').each(function () {
              var id = 'code-' + Date.now() + (Math.random() * 1000 | 0);
              var button = '<a href="javascript:;" class="copy" title="Copy" data-clipboard-target="#' + id + ' .code"><i class="fas fa-copy"></i></a>';
              $(this).attr('id', id);
              if ($(this).find('figcaption').length) {
                  $(this).find('figcaption').prepend(button);
              } else {
                  $(this).prepend('<figcaption>' + button + '</figcaption>');
              }
          });
          new ClipboardJS('.highlight .copy');
            	
        // To Top
          if ($('#sidebar').length) {
      

      原理:在页面加载完毕后,使用js动态地为每一个代码块添加一个按钮,使用这个按钮复制代码块内容。

    3. 引入第三方的clipboard.js

      Wikitten主题自带jQuery(不需要再次引用)。

      themes/Wikitten/layout/layout.ejs文件的<body>前( 页面加载完再执行js )添加:

      <!-- 代码块复制功能 -->
      <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
      

      引入本地文件好像会出现问题,故使用CDN在线引入clipboard.js。

    4. 设置CSS

      icarus主题的代码块在themes/icarus/source/css/style.styl文件内设置CSS,Wikitten主题的代码块在themes/Wikitten/source/css/_highlight/index.styl文件内设置CSS。

      figcaption                       # 新增
        a
            float: right
            color: white
            margin-left: 0.5em
      

3.4 粘性

参阅:CSS属性之position讲解

粘性,是指当某个父元素滚动时,子元素相对于父元素固定不动。

CSS的postion属性定义了一个元素在页面布局中的位置以及对周围元素的影响。其值(position: sticky)实现了子元素的粘性定位。

示例:实现Wikitten主题的当页面滚动时,侧边栏和导航栏相对于页面固定。

  • 导航栏:<header id="header">

    父元素: <div id="container">

    CSS文件路径:themes/Wikitten/source/css/_partial/header.styl

    添加:

    #header {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
    }
    
  • 侧边栏:<aside id="sidebar">

    父元素: <div id="container">

    CSS文件路径:themes/Wikitten/source/css/_partial/sidebar.styl

    在末尾添加:

    #sidebar {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
    }
    

尚未解决问题:侧边栏内的插件相对于<div id="container"> 的粘性。

3.5 CSS

有两种办法可以快速修改出自己想要的样式(CSS):

  • 找到主题原来的样式文件,直接修改里面的样式文件,这种对技术要求比较高,有的文件样式是css、less、ejs,要能读懂才能修改出自己想要的效果。
  • 新建一个css样式,写上自己的样式在里面,再在模板文件中调用,也可以实现,也方便自己管理,也不会干涉以前的样式,调用自己的样式文件,之前的样式文件就会被覆盖,如果有的个别没被覆盖的话,可以在属性后面加上!important,提高权重。这种方法需要会HTML、CSS、甚至JavaScrip。前两个会的话也能修改大部分样式了。

Wikitten主题的CSS文件:

  • themes/Wikitten/source/css/_variables.styl:定义CSS文件使用的变量的初始值

  • themes/Wikitten/source/css/style.styl:定义网站的整体布局

    通过语法@import "路径/CSS文件"调用CSS的子文件:

    • @import “_partial/sidebar”调用themes/Wikitten/source/css/_partial/sidebar.styl

技巧:

如果看到网站那个模块不错的话,可以直接使用开发者工具(F12),将HTML内容和样式内容全部拷贝下来,在写入适当的文件中就行了。

  1. 调整顶栏(导航栏,<header id="header">

    1. 顶栏的背景

      将背景图片(例如:夜空.jpg)存入themes/Wikitten/source/images目录内,进入CSS文件(themes/Wikitten/source/css/_partial/header.styl),修改为:

      #header
        background: white      background-image: url('../images/夜空.jpg')
      
    2. 顶栏的高度

      进入CSS文件(themes/Wikitten/source/css/_variables.styl),修改为:

      // Header
        header-height = 48px      header-height = 188px
      
    3. 顶栏内文字的颜色

      进入CSS文件(themes/Wikitten/source/css/_partial/header.styl),修改为:

      #header
          a, a:visited
            color: color-default      color: white
      
    4. 网站logo

      将图片存入themes/Wikitten/source/css/images目录内,进入主题配置文件(themes/Wikitten/_config.yml),修改为:

      customize:
          logo:
              enabled: true
              width: 40
              height: 40
              url: /logo.png      url: /css/images/logo.png
      
    5. 网站名称字体大小

      进入CSS文件(themes/Wikitten/source/css/_partial/header.styl),修改为:

      .header-inner
          height: 100%
          position: relative
          #logo
              @extend $header-block
              @extend $header-block-left
              display: inline-block
              .logo
                  margin-right: 5px
                  display: inline-block
              .site-title
                  font-size: 16px      font-size: 36px
                  display: inline-block
                  vertical-align: top
                  font-weight: 600
      
    6. profile(作者简介)

      进入主题配置文件(themes/Wikitten/_config.yml),修改为:

      customize:
          profile:
              enabled: true # 开启profile插件
              avatar: images/avatar.jpg   # 本地图片
              gravatar: #komeny@hotmail.com # 若开启Gravatar头像, 将会覆盖本地图片
              author: komeny
              author_title: Designer & Programmer
              location: Guangzhou, China
              follow: https://github.com/komenytao/
      

      作者头像圆形显示:

      themes/Wikitten/source/css/_partial/header.styl文件添加:

              .avatar
                  width: logo-height
                  height: logo-height
                  margin-right: 8px
                  border-radius: 80px                     # 新增
                  -webkit-border-radius: 80px             # 新增
                  -moz-border-radius: 80px                # 新增
                  box-shadow: inset 0 -1px 0 #333sf       # 新增
      
  2. 调整侧边栏(<div class="widget-wrap" id="toc">

    进入themes/Wikitten/source/css/_partial/sidebar.styl

    1. TOC插件的最大高度

      #toc ol.toc {
        max-height: 380px;
        overflow: auto; 
      }
      
    2. category插件的最大高度

      在末尾添加:

      #categories
        max-height: 380px
        overflow: auto
      
    3. 侧边栏宽度(不需要)

      CSS文件路径:themes/Wikitten/source/css/_variables.styl

      sidebar-column-tablet = 3.5      sidebar-column-tablet = 2.6
      

      同步调整文章正文( section id="main")宽度

      if sidebar
          main-column-tablet = 6.5      sidebar-column-tablet = 7.4
          if profile
              main-column-tablet = 9       main-column-tablet = 9.9
      
  3. 调整文章正文(< section id="main">

    进入themes/Wikitten/source/css/_partial/article.styl

    1. 文章正文(article-inner)背景色:

      .article-inner
          @extend $block
          overflow: hidden
          background: white      background: color-background
          border-radius: 4px
          border: 1px solid #BBB
      
    2. 引用(blockquote)

      将原有的修改为:

      .article-entry
        blockquote
              position: static
              font-family: font-serif
              font-size: 1.1em
              margin: 0 -5px
              padding: 2px 20px 2px 10px
              background: #CCFFFF
              border-left: 4px solid #0066FF
      
    3. 1级标题(h1)

      调整文章标题的样式:

      .article-title
          font-size: 2em      font-size: 3em
          color: color-default
          text-decoration: none
       line-height: line-height-title
          text-align: center                         // 新增 
      
    4. 2级标题(h2)

      因为2级标题之前已设置了display: table

         .article-entry
          h1, h2, h3, h4, h5, h6
                 display: table
      

      在2级标题的文字下方添加横线(分隔线),将与文字的长度一致:

      .article-entry
          h2
              border-bottom: 2px solid #32CD32
      

      若想分隔线的长度等于文章正文,删除之前的display: table

    5. 表格(table)

      原CSS:

         .article-entry
          table
              width: 100%
              border-collapse: collapse
              border-spacing: 0
          th
              font-weight: bold
              border-bottom: 3px solid color-border
              padding-bottom: 0.5em
          td
              border-bottom: 1px solid color-border
              padding: 10px 0
      

      修改为:

      .article-entry
        table
              width: 100%
              border-collapse: collapse
              border-spacing: 0
            th
                font-weight: bold
                color: #333
                text-align: center
                background-color: #999999
                border: 1px solid #000000
                padding: 0.5em
            td
                border: 1px solid #000000
                padding: 5px
      

3.6 添加README.md

每个项目下一般都有一个README.md文件,使用hexo部署到仓库后,项目下是没有README.md文件的。

解决方法:

  1. 在Hexo目录下的source根目录下添加一个README.md文件

  2. 修改站点配置文件_config.yml,将skip_render 参数的值设置为

    skip_render: README.md
    

    保存退出即可。再次使用hexo d命令部署时,就不会再渲染README.md这个文件了。

3.7 添加profile

Wikitten主题自带了themes/Wikitten/layout/common/profile.ejs,但在layout.ejs中设置了隐藏(且是单独一栏),现希望将其在侧边栏(sidebar)上显示

  1. 删除layout.ejs中的设置

            <div class="outer">
                <% if (theme.customize.profile.enabled) { %>
                    <%- partial('common/profile', null, {cache: !config.relative_link}) %>
                <% } %>
    
  2. profile.ejs复制到themes/Wikitten/layout/widget目录,在主题配置文件中添加:

    widgets: # default use category only
        - profile                      # 新增
        - category
        - toc
        # - recent_posts
        # - archive
        # - tag
        # - tagcloud
        # - links
    
  3. themes/Wikitten/source/css/style.styl中删除:

    if sidebar is left
        #profile
            float: right
    
  4. 修改themes/Wikitten/source/css/_partial/profile.styl

    #profile
        max-width: 287px
        column(profile-column)      删除
        display: none      display: block
    

3.8 文章置顶

参阅:hexo实现文章置顶功能

Hexo置顶功能,即指定首页列表的排序。Hexo已安装了hexo-generator-index扩展插件, 默认(网站配置文件)是按照创建日期的倒序排序:

index_generator:
  path: ''
  per_page: 10
  order_by: -date            # "-",表示倒序,表示按发布日期的倒序排序

增加根据TOP值(自定义)实现首页置顶的方法:

  1. 网站配置文件增加top参数

    index_generator:
      path: ''
      per_page: 10
      order_by: 
        top: -1                      # "-",表示倒序,“+”或缺省,表示正序
        date: -1
    

    至此,只实现了根据一个参数(top值)排序。

  2. 多个参数排序

    目的:若top值相同时,应该根据date值排序。

    修改node_modules/hexo-generator-index/lib/generator.js文件:

    module.exports = function(locals) {
      const config = this.config;
      const posts = locals.posts.sort(config.index_generator.order_by);
      //以下部分为新增
      posts.data = posts.data.sort(function(a, b) {
          if(a.top && b.top) { // 若两篇文章都定义top值
              if(a.top == b.top) return b.date - a.date; // 若top值相同,按照日期降序
              else return b.top - a.top; // 否则按照top值降序
          }
          else if(a.top && !b.top) { // 若只有一篇文章定义top值,则将有top的排在前面
            return -1;
          }
          else if(!a.top && b.top) {
            return 1;
          }
          else return b.date - a.date; // 都没定义按照文章日期降序排
      });
    
  3. 文章的扉页增加属性top

    在post.md模板设置top属性,普通文章设置值为1:

    title: {{ title }}
    date: {{ date }}
    top: 1
    

    文章根据置顶(排序)需求设置为1以上(前面的步骤是将排序设置为倒序)。

4、icarus主题

参阅:Hexo Icarus配置和美化升级hexo主题Icarus浅度修改教程

4.1 主题配置文件

# Version of the Icarus theme that is currently used
version: 2.6.0
# 网站favicon:可以在线图标,或本地图像(存放在source/images目录内)
favicon: /images/favicon.svg
# Additional HTML meta tags in an array.
meta: 
# RSS插件:安装RSS插件(npm install hexo-generator-feed)后,调用其生成的atom.xml
rss: /atom.xml
# 网站logo:显示在导航栏(navigation bar)或页脚(footer)的左侧
logo: /images/logo.svg
# 开启图形元数据(metadata)
# https://hexo.io/docs/helpers.html#open-graph
open_graph:
    fb_app_id:                 # Facebook App ID
    fb_admins:                 # Facebook Admin ID
    twitter_id:                # Twitter ID
    twitter_site:              # Twitter site
    google_plus:               # Google+ profile link
# 导航栏
navbar:
    # 导航栏内设置菜单项(显示名称: 对应文件夹),使用hexo new page tags创建菜单项
    menu:
        主页: /
        归档: /archives
        分类: /categories
        标签: /tags
        关于: /about   
    # 在导航栏右侧设置图标链接
    links:
        Download on GitHub:             # 图标链接的提示信息
            icon: fab fa-github         # 图标
            url: '你的gityhub地址'       # 链接的url
# 页脚设置链接
footer:
    # 在页脚右侧显示图标链接
    links:
        Creative Commons:               # 图标链接的提示信息(简称CC,知识共享)
            icon: fab fa-creative-commons
            url: 'https://creativecommons.org/'
        Attribution 4.0 International:
            icon: fab fa-creative-commons-by
            url: 'https://creativecommons.org/licenses/by/4.0/'
        Download on GitHub:
            icon: fab fa-github
            url: 'https://github.com/ppoffice/hexo-theme-icarus'
# 文章(正文)显示设置
article:
    # 代码(code)高亮显示设置
    highlight:
    	# 代码(code)高亮显示主题
        # https://github.com/highlightjs/highlight.js/tree/master/src/styles
        theme: atom-one-light      # atom-one-light亮色,atom-one-dark暗色
        # 显示代码复制按钮
        clipboard: true
        # 代码折叠状态:值为""、"folded"(折叠)、"unfolded"(展开)
        fold: unfolded
    # 是否显示文章缩略图
    thumbnail: true
    # 是否显示估算阅读时间
    readtime: true
# 搜索插件设置
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Search
search:
    # 搜索插件的名称
    type: insight
# 评论插件设置
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Comment
comment:
    # 评论插件的名称
    type: #valine               # 可选valine、disqus(科学上网)等
    #app_id: 不能为空
    #app_key: 不能为空
    #notify: true
    #verify: true
    #placeholder:
    type: disqus
    shortname: 不能为空
# 打赏功能
# https://ppoffice.github.io/hexo-theme-icarus/categories/Donation/
donate:
    -
        # 阿里巴巴支付宝
        type: alipay
        # 二维码图片
        qrcode: '/images/honbao.PNG'
    -
        # 微信
        type: wechat
        # 二维码图片
        qrcode: '/images/yjtp.png'

# 分享插件设置
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share
share:
    type: sharejs        # (可选)插件类型有多种,自行百度

# 侧边栏(Sidebar)设置
# 至少有一个小部件时,侧边栏才可见
# 侧边栏只能在左侧显示。划分左、右侧边栏的目的是为了某些小部件能随页面滚动,某些固定
sidebar:
    left:                   # 左侧边栏设置
        # https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
        sticky: false       # 粘性,false表示不随页面滚动
    right:                  # 右侧边栏设置
        # https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
        sticky: true        # 粘性,true表示随页面滚动
# 侧边栏小部件(widget)设置
# https://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/
widgets:
# 隐藏小部件的方法:在其所有的选项(包含“-”)前面添加注释符号#
    -
        type: profile               # 作者个人介绍小部件
        position: left              # 小部件位置(left:左,rigth:右)
        author: komeny              # 作者名
        author_title: programmer    # 作者头衔(身份)描述
        location: Guangzhou,China   # 作者当前居住地
        avatar: '/images/ava.png'   # 作者头像(可用本地图片或网络图片链接)
        avatar_rounded: false       # 显示头像是圆形还是方形(false)
        gravatar:                   # 作者电子邮件地址
        follow_link: 'https://github.com/yourname'  # 关注我的链接,可设为GitHub主页
        social_links:               # profile小部件底部显示的图标社交链接
            Github:
                icon: fab fa-github
                url: 'https://github.com/yourname'
            Facebook:
                icon: fab fa-facebook
                url: 'https://facebook.com'
            Twitter:
                icon: fab fa-twitter
                url: 'https://twitter.com/yourname'
            RSS:
                icon: fas fa-rss
                url: /
    -
        type: toc                 # toc小部件
        position: left            # 小部件位置(left:左,rigth:右)
    -
        type: category            # 分类小部件
        position: left            # 小部件位置(left:左,rigth:右)
    -
        type: tagcloud            # 标签云小部件
        position: left            # 小部件位置(left:左,rigth:右)
    -
        type: recent_posts        # 近期文章小部件
        position: left            # 小部件位置(left:左,rigth:右)
    -
        type: archive             # 归档小部件
        position: left            # 小部件位置(left:左,rigth:右)
    -
        type: tag                 # 标签小部件
        position: right           # 小部件位置(left:左,rigth:右)
    -
        type: links               # 外部链接
        position: left            # 小部件位置(left:左,rigth:右)
        links:
            Google: 'https://google.com'
            Baidu: 'https://baidu.com'
# 其它插件设置
plugins:
    # 使页面动画
    animejs: true
    # 启用lightGallery和验证插件
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/gallery-plugin/
    gallery: true
    # 启用过时的浏览器插件
    # http://outdatedbrowser.com/
    outdated-browser: true
    # 启用MathJax插件
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/mathjax-plugin/
    mathjax: true
    # 在移动设备上显示back to top按钮
    back-to-top: true
    # 谷歌分析插件(Google Analytics)
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Google-Analytics
    google-analytics:
        # Google Analytics tracking id
        tracking_id: 
    # 百度分析插件()Baidu Analytics)
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Baidu-Analytics
    baidu-analytics:
        # Baidu Analytics tracking id
        tracking_id: 
    # Hotjar用户反馈插件
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Hotjar
    hotjar:
        # Hotjar site id
        site_id: 
    # 在页面顶部显示加载进度条
    progressbar: true
    # BuSuanZi站点/页面查看计数器
    # https://busuanzi.ibruce.info
    busuanzi: false
# CDN提供商设置
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/speed-up-your-site-with-custom-cdn/
providers:
    # CDN提供商的JavaScript和/或样式表的名称或URL
    cdn: jsdelivr
    # webfont CDN提供商的名称或URL
    fontcdn: google
    # webfontCDN提供商的名称或URL的图标
    iconcdn: fontawesome            
  • 侧边栏(Sidebar)只能在左侧显示

    划分左、右侧边栏的目的是为了某些小部件能随页面滚动,某些固定:

    侧边栏的习惯设置:

    left的sticky设置为false(不随页面滚动),right的sticky设置为true(随页面滚动)。然后,侧边栏小部件(widget)的position可设置为left、right。

  • toc(Table Of Content,文章内容的目录)

    1. 在MD文件的扉页设置:toc: true
    2. 侧边栏(Sidebar)中开启toc,并设置粘性
  • toc自动编号

    目录本人一般会手动编号,所以这个自动编号功能对我来说并不友好。所以加个开关好了。

    打开themes/icarus/layout/widget/toc.ejs

    原文搜索<span class="has-mr-6">${toc.index}</span>
    将其注释掉变为
    <!--span class="has-mr-6">${toc.index}</span-->
    
  • 文章缩略图(文章开头显示一张设置图片)

    1. 在MD文件的扉页设置:thumbnail: /gallery/thumbnails/desert.jpg

      图片可使用网络或本地图片。

    2. article中开启文章缩略图:thumbnail: true

  • 本地全局搜索

    从Icarus 2.0.0开始,不需要安装hexo-generator-json-content即可使用本地全局搜索。

    search:
        type: insight
    
  • busuanzi统计

    icarus自带busuanzi统计(开启:busuanzi: true),默认只统计了访问人数,并没有访问量统计,需要在页脚( themes/icarus/layout/common/footer.ejs )修改:

    # 删除
    <span id="busuanzi_container_site_uv">
    <%- _p('plugin.visitor', '<span id="busuanzi_value_site_uv">0</span>') %>
    </span>
    # 新增
    <span id="busuanzi_container_site_uv"> 来访 <span id="busuanzi_value_site_uv"></span></span>
    <span id="busuanzi_container_site_pv">, 总访问 <span id="busuanzi_value_site_pv"></span></span>
    

4.2 添加雪花飘落效果

  1. themes/icarus/sourse/js/src目录(若无,新建)下新建一个snow.js文件,复制粘贴以下代码:

    样式1:六边形雪花

    (function($){
     $.fn.snow = function(options){
     var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
     documentHeight 	= $(document).height(),
     documentWidth	= $(document).width(),
     defaults = {
         minSize		: 10,
         maxSize		: 20,
         newOn		: 1000,
         flakeColor	: "#AFDAEF" /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */
     },
     options	= $.extend({}, defaults, options);
     var interval= setInterval( function(){
     var startPositionLeft = Math.random() * documentWidth - 100,
     startOpacity = 0.5 + Math.random(),
     sizeFlake = options.minSize + Math.random() * options.maxSize,
     endPositionTop = documentHeight - 200,
     endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
     durationFall = documentHeight * 10 + Math.random() * 5000;
     $flake.clone().appendTo('body').css({
         left: startPositionLeft,
         opacity: startOpacity,
         'font-size': sizeFlake,
         color: options.flakeColor
     }).animate({
         top: endPositionTop,
         left: endPositionLeft,
         opacity: 0.2
     },durationFall,'linear',function(){
         $(this).remove()
     });
     }, options.newOn);
        };
    })(jQuery);
    $(function(){
        $.fn.snow({ 
         minSize: 5, /* 定义雪花最小尺寸 */
         maxSize: 50,/* 定义雪花最大尺寸 */
         newOn: 300  /* 定义密集程度,数字越小越密集 */
        });
    });
    

    样式2:圆点雪花

    /* 控制下雪 */
    function snowFall(snow) {
        /* 可配置属性 */
        snow = snow || {};
        this.maxFlake = snow.maxFlake || 200;   /* 最多片数 */
        this.flakeSize = snow.flakeSize || 10;  /* 雪花形状 */
        this.fallSpeed = snow.fallSpeed || 1;   /* 坠落速度 */
    }
    /* 兼容写法 */
    requestAnimationFrame = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        function(callback) { setTimeout(callback, 1000 / 60); };
       
    cancelAnimationFrame = window.cancelAnimationFrame ||
        window.mozCancelAnimationFrame ||
        window.webkitCancelAnimationFrame ||
        window.msCancelAnimationFrame ||
     window.oCancelAnimationFrame;
    /* 开始下雪 */
    snowFall.prototype.start = function(){
        /* 创建画布 */
        snowCanvas.apply(this);
        /* 创建雪花形状 */
        createFlakes.apply(this);
        /* 画雪 */
        drawSnow.apply(this)
    }
    /* 创建画布 */
    function snowCanvas() {
        /* 添加Dom结点 */
        var snowcanvas = document.createElement("canvas");
        snowcanvas.id = "snowfall";
        snowcanvas.width = window.innerWidth;
        snowcanvas.height = document.body.clientHeight;
        snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
        document.getElementsByTagName("body")[0].appendChild(snowcanvas);
        this.canvas = snowcanvas;
        this.ctx = snowcanvas.getContext("2d");
        /* 窗口大小改变的处理 */
        window.onresize = function() {
            snowcanvas.width = window.innerWidth;
            /* snowcanvas.height = window.innerHeight */
        }
    }
    /* 雪运动对象 */
    function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
        this.x = Math.floor(Math.random() * canvasWidth);   /* x坐标 */
        this.y = Math.floor(Math.random() * canvasHeight);  /* y坐标 */
        this.size = Math.random() * flakeSize + 2;          /* 形状 */
        this.maxSize = flakeSize;                           /* 最大形状 */
        this.speed = Math.random() * 1 + fallSpeed;         /* 坠落速度 */
        this.fallSpeed = fallSpeed;                         /* 坠落速度 */
        this.velY = this.speed;                             /* Y方向速度 */
        this.velX = 0;                                      /* X方向速度 */
        this.stepSize = Math.random() / 30;                 /* 步长 */
        this.step = 0                                       /* 步数 */
    }
    flakeMove.prototype.update = function() {
        var x = this.x,
            y = this.y;
        /* 左右摆动(余弦) */
        this.velX *= 0.98;
        if (this.velY <= this.speed) {
            this.velY = this.speed
        }
        this.velX += Math.cos(this.step += .05) * this.stepSize;
       
        this.y += this.velY;
        this.x += this.velX;
        /* 飞出边界的处理 */
        if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
            this.reset(canvas.width, canvas.height)
        }
    };
    /* 飞出边界-放置最顶端继续坠落 */
    flakeMove.prototype.reset = function(width, height) {
        this.x = Math.floor(Math.random() * width);
        this.y = 0;
        this.size = Math.random() * this.maxSize + 2;
        this.speed = Math.random() * 1 + this.fallSpeed;
        this.velY = this.speed;
        this.velX = 0;
    };
    // 渲染雪花-随机形状(此处可修改雪花颜色!!!)
    flakeMove.prototype.render = function(ctx) {
        var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
        snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)");  /* 此处是雪花颜色,默认是白色 */
        snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色,请自行查 */
        snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /* 找16进制的RGB 颜色代码。 */
        ctx.save();
        ctx.fillStyle = snowFlake;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
    };
    /* 创建雪花-定义形状 */
    function createFlakes() {
        var maxFlake = this.maxFlake,
            flakes = this.flakes = [],
            canvas = this.canvas;
        for (var i = 0; i < maxFlake; i++) {
            flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
        }
    }
    /* 画雪 */
    function drawSnow() {
        var maxFlake = this.maxFlake,
            flakes = this.flakes;
        ctx = this.ctx, canvas = this.canvas, that = this;
        /* 清空雪花 */
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (var e = 0; e < maxFlake; e++) {
            flakes[e].update();
            flakes[e].render(ctx);
        }
        /*  一帧一帧的画 */
        this.loop = requestAnimationFrame(function() {
            drawSnow.apply(that);
        });
    }
    /* 调用及控制方法 */
    var snow = new snowFall({maxFlake:60});
    snow.start();
    

    样式3:3D飘雪

    var THREE=THREE||{};if(!self.Int32Array)self.Int32Array=Array,self.Float32Array=Array;THREE.Color=function(a){a!==void 0&&this.setHex(a);return this};THREE.Color.prototype={constructor:THREE.Color,r:1,g:1,b:1,copy:function(a){this.r=a.r;this.g=a.g;this.b=a.b;return this},copyGammaToLinear:function(a){this.r=a.r*a.r;this.g=a.g*a.g;this.b=a.b*a.b;return this},copyLinearToGamma:function(a){this.r=Math.sqrt(a.r);this.g=Math.sqrt(a.g);this.b=Math.sqrt(a.b);return this},setRGB:function(a,b,c){this.r=a;this.g=b;this.b=c;return this},setHSV:function(a,b,c){var d,f,e;if(c===0)this.r=this.g=this.b=0;else switch(d=Math.floor(a*6),f=a*6-d,a=c*(1-b),e=c*(1-b*f),b=c*(1-b*(1-f)),d){case 1:this.r=e;this.g=c;this.b=a;break;case 2:this.r=a;this.g=c;this.b=b;break;case 3:this.r=a;this.g=e;this.b=c;break;case 4:this.r=b;this.g=a;this.b=c;break;case 5:this.r=c;this.g=a;this.b=e;break;case 6:case 0:this.r=c,this.g=b,this.b=a}return this},setHex:function(a){a=Math.floor(a);this.r=(a>>16&255)/255;this.g=(a>>8&255)/255;this.b=(a&255)/255;return this},getHex:function(){return~~(this.r*255)<<16^~~(this.g*255)<<8^~~(this.b*255)},getContextStyle:function(){return"rgb("+Math.floor(this.r*255)+","+Math.floor(this.g*255)+","+Math.floor(this.b*255)+")"},clone:function(){return(new THREE.Color).setRGB(this.r,this.g,this.b)}};THREE.Vector2=function(a,b){this.x=a||0;this.y=b||0};THREE.Vector2.prototype={constructor:THREE.Vector2,set:function(a,b){this.x=a;this.y=b;return this},copy:function(a){this.x=a.x;this.y=a.y;return this},clone:function(){return new THREE.Vector2(this.x,this.y)},add:function(a,b){this.x=a.x+b.x;this.y=a.y+b.y;return this},addSelf:function(a){this.x+=a.x;this.y+=a.y;return this},sub:function(a,b){this.x=a.x-b.x;this.y=a.y-b.y;return this},subSelf:function(a){this.x-=a.x;this.y-=a.y;return this},multiplyScalar:function(a){this.x*=a;this.y*=a;return this},divideScalar:function(a){a?(this.x/= a, this.y /=a):this.set(0,0);return this},negate:function(){return this.multiplyScalar(-1)},dot:function(a){return this.x*a.x+this.y*a.y},lengthSq:function(){return this.x*this.x+this.y*this.y},length:function(){return Math.sqrt(this.lengthSq())},normalize:function(){return this.divideScalar(this.length())},distanceTo:function(a){return Math.sqrt(this.distanceToSquared(a))},distanceToSquared:function(a){var b=this.x-a.x,a=this.y-a.y;return b*b+a*a},setLength:function(a){return this.normalize().multiplyScalar(a)},equals:function(a){return a.x===this.x&&a.y===this.y}};THREE.Vector3=function(a,b,c){this.x=a||0;this.y=b||0;this.z=c||0};THREE.Vector3.prototype={constructor:THREE.Vector3,set:function(a,b,c){this.x=a;this.y=b;this.z=c;return this},setX:function(a){this.x=a;return this},setY:function(a){this.y=a;return this},setZ:function(a){this.z=a;return this},copy:function(a){this.x=a.x;this.y=a.y;this.z=a.z;return this},clone:function(){return new THREE.Vector3(this.x,this.y,this.z)},add:function(a,b){this.x=a.x+b.x;this.y=a.y+b.y;this.z=a.z+b.z;return this},addSelf:function(a){this.x+=a.x;this.y+=a.y;this.z+=a.z;return this},addScalar:function(a){this.x+=a;this.y+=a;this.z+=a;return this},sub:function(a,b){this.x=a.x-b.x;this.y=a.y-b.y;this.z=a.z-b.z;return this},subSelf:function(a){this.x-=a.x;this.y-=a.y;this.z-=a.z;return this},multiply:function(a,b){this.x=a.x*b.x;this.y=a.y*b.y;this.z=a.z*b.z;return this},multiplySelf:function(a){this.x*=a.x;this.y*=a.y;this.z*=a.z;return this},multiplyScalar:function(a){this.x*=a;this.y*=a;this.z*=a;return this},divideSelf:function(a){this.x/=a.x;this.y/=a.y;this.z/=a.z;return this},divideScalar:function(a){a?(this.x/= a, this.y /=a,this.z/=a):this.z=this.y=this.x=0;return this},negate:function(){return this.multiplyScalar(-1)},dot:function(a){return this.x*a.x+this.y*a.y+this.z*a.z},lengthSq:function(){return this.x*this.x+this.y*this.y+this.z*this.z},length:function(){return Math.sqrt(this.lengthSq())},lengthManhattan:function(){return this.x+this.y+this.z},normalize:function(){return this.divideScalar(this.length())},setLength:function(a){return this.normalize().multiplyScalar(a)},cross:function(a,b){this.x=a.y*b.z-a.z*b.y;this.y=a.z*b.x-a.x*b.z;this.z=a.x*b.y-a.y*b.x;return this},crossSelf:function(a){var b=this.x,c=this.y,d=this.z;this.x=c*a.z-d*a.y;this.y=d*a.x-b*a.z;this.z=b*a.y-c*a.x;return this},distanceTo:function(a){return Math.sqrt(this.distanceToSquared(a))},distanceToSquared:function(a){return(new THREE.Vector3).sub(this,a).lengthSq()},setPositionFromMatrix:function(a){this.x=a.n14;this.y=a.n24;this.z=a.n34},setRotationFromMatrix:function(a){var b=Math.cos(this.y);this.y=Math.asin(a.n13);Math.abs(b)>1.0E-5?(this.x=Math.atan2(-a.n23/ b, a.n33 /b),this.z=Math.atan2(-a.n12/ b, a.n11 /b)):(this.x=0,this.z=Math.atan2(a.n21,a.n22))},isZero:function(){return this.lengthSq()<1.0E-4}};THREE.Vector4=function(a,b,c,d){this.x=a||0;this.y=b||0;this.z=c||0;this.w=d!==void 0?d:1};THREE.Vector4.prototype={constructor:THREE.Vector4,set:function(a,b,c,d){this.x=a;this.y=b;this.z=c;this.w=d;return this},copy:function(a){this.x=a.x;this.y=a.y;this.z=a.z;this.w=a.w!==void 0?a.w:1},clone:function(){return new THREE.Vector4(this.x,this.y,this.z,this.w)},add:function(a,b){this.x=a.x+b.x;this.y=a.y+b.y;this.z=a.z+b.z;this.w=a.w+b.w;return this},addSelf:function(a){this.x+=a.x;this.y+=a.y;this.z+=a.z;this.w+=a.w;return this},sub:function(a,b){this.x=a.x-b.x;this.y=a.y-b.y;this.z=a.z-b.z;this.w=a.w-b.w;return this},subSelf:function(a){this.x-=a.x;this.y-=a.y;this.z-=a.z;this.w-=a.w;return this},multiplyScalar:function(a){this.x*=a;this.y*=a;this.z*=a;this.w*=a;return this},divideScalar:function(a){a?(this.x/= a, this.y /=a,this.z/= a, this.w /=a):(this.z=this.y=this.x=0,this.w=1);return this},negate:function(){return this.multiplyScalar(-1)},dot:function(a){return this.x*a.x+this.y*a.y+this.z*a.z+this.w*a.w},lengthSq:function(){return this.dot(this)},length:function(){return Math.sqrt(this.lengthSq())},normalize:function(){return this.divideScalar(this.length())},setLength:function(a){return this.normalize().multiplyScalar(a)},lerpSelf:function(a,b){this.x+=(a.x-this.x)*b;this.y+=(a.y-this.y)*b;this.z+=(a.z-this.z)*b;this.w+=(a.w-this.w)*b;return this}};THREE.Ray=function(a,b){function c(a,b,c){i.sub(c,a);p=i.dot(b);if(p<=0)return null;k=n.add(a,o.copy(b).multiplyScalar(p));return s=c.distanceTo(k)}function d(a,b,c,d){i.sub(d,b);n.sub(c,b);o.sub(a,b);K=i.dot(i);C=i.dot(n);Q=i.dot(o);O=n.dot(n);w=n.dot(o);F=1/(K*O-C*C);z=(O*Q-C*w)*F;D=(K*w-C*Q)*F;return z>=0&&D>=0&&z+D<1}this.origin=a||new THREE.Vector3;this.direction=b||new THREE.Vector3;this.intersectScene=function(a){return this.intersectObjects(a.children)};this.intersectObjects=function(a){var b,c,d=[];b=0;for(c=a.length;b<c;b++)Array.prototype.push.apply(d,this.intersectObject(a[b]));d.sort(function(a,b){return a.distance-b.distance});return d};var f=new THREE.Vector3,e=new THREE.Vector3,g=new THREE.Vector3,h=new THREE.Vector3,a=new THREE.Vector3,b=new THREE.Vector3,m=new THREE.Vector3,l=new THREE.Vector3,j=new THREE.Vector3;this.intersectObject=function(k){for(var i,o=[],n=0,W=k.children.length;n<W;n++)Array.prototype.push.apply(o,this.intersectObject(k.children[n]));if(k instanceof THREE.Particle){n=c(this.origin,this.direction,k.matrixWorld.getPosition());if(n===null||n>k.scale.x)return[];i={distance:n,point:k.position,face:null,object:k};o.push(i)}else if(k instanceof THREE.Mesh){n=c(this.origin,this.direction,k.matrixWorld.getPosition());if(n===null||n>k.geometry.boundingSphere.radius*Math.max(k.scale.x,Math.max(k.scale.y,k.scale.z)))return o;var p,G=k.geometry,H=G.vertices,I;k.matrixRotationWorld.extractRotation(k.matrixWorld);n=0;for(W=G.faces.length;n<W;n++)if(i=G.faces[n],a.copy(this.origin),b.copy(this.direction),I=k.matrixWorld,m=I.multiplyVector3(m.copy(i.centroid)).subSelf(a),p=m.dot(b),!(p<=0)&&(f=I.multiplyVector3(f.copy(H[i.a].position)),e=I.multiplyVector3(e.copy(H[i.b].position)),g=I.multiplyVector3(g.copy(H[i.c].position)),i instanceof THREE.Face4&&(h=I.multiplyVector3(h.copy(H[i.d].position))),l=k.matrixRotationWorld.multiplyVector3(l.copy(i.normal)),p=b.dot(l),k.doubleSided||(k.flipSided?p>0:p<0)))if(p=l.dot(m.sub(f,a))/p,j.add(a,b.multiplyScalar(p)),i instanceof THREE.Face3)d(j,f,e,g)&&(i={distance:a.distanceTo(j),point:j.clone(),face:i,object:k},o.push(i));else if(i instanceof THREE.Face4&&(d(j,f,e,h)||d(j,e,g,h)))i={distance:a.distanceTo(j),point:j.clone(),face:i,object:k},o.push(i)}return o};var i=new THREE.Vector3,n=new THREE.Vector3,o=new THREE.Vector3,p,k,s,K,C,Q,O,w,F,z,D};THREE.Rectangle=function(){function a(){e=d-b;g=f-c}var b,c,d,f,e,g,h=!0;this.getX=function(){return b};this.getY=function(){return c};this.getWidth=function(){return e};this.getHeight=function(){return g};this.getLeft=function(){return b};this.getTop=function(){return c};this.getRight=function(){return d};this.getBottom=function(){return f};this.set=function(e,g,j,i){h=!1;b=e;c=g;d=j;f=i;a()};this.addPoint=function(e,g){h?(h=!1,b=e,c=g,d=e,f=g):(b=b<e?b:e,c=c<g?c:g,d=d>e?d:e,f=f>g?f:g);a()};this.add3Points=function(e,g,j,i,n,o){h?(h=!1,b=e<j?e<n?e:n:j<n?j:n,c=g<i?g<o?gi<o?i:o,d=e>j?e>n?e:n:j>n?j:n,f=g>i?g>o?gi>o?i:o):(b=e<j?e<n?e<b?e🅱n<b?n🅱j<n?j<b?j🅱n<b?n:b,c=g<i?g<o?g<c?g:c:o<c?o:c:i<o?i<c?i:c:o<c?o:c,d=e>j?e>n?e>d?e:d:n>d?n:d:j>n?j>d?j:d:n>d?n:d,f=g>i?g>o?g>f?g:f:o>f?o:f:i>o?i>f?i:f:o>f?o:f);a()};this.addRectangle=function(e){h?(h=!1,b=e.getLeft(),c=e.getTop(),d=e.getRight(),f=e.getBottom()):(b=b<e.getLeft()?b:e.getLeft(),c=c<e.getTop()?c:e.getTop(),d=d>e.getRight()?d:e.getRight(),f=f>e.getBottom()?f:e.getBottom());a()};this.inflate=function(e){b-=e;c-=e;d+=e;f+=e;a()};this.minSelf=function(e){b=b>e.getLeft()?b:e.getLeft();c=c>e.getTop()?c:e.getTop();d=d<e.getRight()?d:e.getRight();f=f<e.getBottom()?f:e.getBottom();a()};this.intersects=function(a){return Math.min(d,a.getRight())-Math.max(b,a.getLeft())>=0&&Math.min(f,a.getBottom())-Math.max(c,a.getTop())>=0};this.empty=function(){h=!0;f=d=c=b=0;a()};this.isEmpty=function(){return h}};THREE.Math={clamp:function(a,b,c){return a<b?b:a>c?c:a},clampBottom:function(a,b){return a<b?b:a},mapLinear:function(a,b,c,d,f){return d+(a-b)*(f-d)/(c-b)},random16:function(){return(65280*Math.random()+255*Math.random())/65535}};THREE.Matrix3=function(){this.m=[]};THREE.Matrix3.prototype={constructor:THREE.Matrix3,transpose:function(){var a,b=this.m;a=b[1];b[1]=b[3];b[3]=a;a=b[2];b[2]=b[6];b[6]=a;a=b[5];b[5]=b[7];b[7]=a;return this},transposeIntoArray:function(a){var b=this.m;a[0]=b[0];a[1]=b[3];a[2]=b[6];a[3]=b[1];a[4]=b[4];a[5]=b[7];a[6]=b[2];a[7]=b[5];a[8]=b[8];return this}};THREE.Matrix4=function(a,b,c,d,f,e,g,h,m,l,j,i,n,o,p,k){this.set(a!==void 0?a:1,b||0,c||0,d||0,f||0,e!==void 0?e:1,g||0,h||0,m||0,l||0,j!==void 0?j:1,i||0,n||0,o||0,p||0,k!==void 0?k:1);this.flat=Array(16);this.m33=new THREE.Matrix3};THREE.Matrix4.prototype={constructor:THREE.Matrix4,set:function(a,b,c,d,f,e,g,h,m,l,j,i,n,o,p,k){this.n11=a;this.n12=b;this.n13=c;this.n14=d;this.n21=f;this.n22=e;this.n23=g;this.n24=h;this.n31=m;this.n32=l;this.n33=j;this.n34=i;this.n41=n;this.n42=o;this.n43=p;this.n44=k;return this},identity:function(){this.set(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);return this},copy:function(a){this.set(a.n11,a.n12,a.n13,a.n14,a.n21,a.n22,a.n23,a.n24,a.n31,a.n32,a.n33,a.n34,a.n41,a.n42,a.n43,a.n44);return this},lookAt:function(a,b,c){var d=THREE.Matrix4.__v1,f=THREE.Matrix4.__v2,e=THREE.Matrix4.__v3;e.sub(a,b).normalize();if(e.length()===0)e.z=1;d.cross(c,e).normalize();d.length()===0&&(e.x+=1.0E-4,d.cross(c,e).normalize());f.cross(e,d).normalize();this.n11=d.x;this.n12=f.x;this.n13=e.x;this.n21=d.y;this.n22=f.y;this.n23=e.y;this.n31=d.z;this.n32=f.z;this.n33=e.z;return this},multiply:function(a,b){var c=a.n11,d=a.n12,f=a.n13,e=a.n14,g=a.n21,h=a.n22,m=a.n23,l=a.n24,j=a.n31,i=a.n32,n=a.n33,o=a.n34,p=a.n41,k=a.n42,s=a.n43,K=a.n44,C=b.n11,Q=b.n12,O=b.n13,w=b.n14,F=b.n21,z=b.n22,D=b.n23,u=b.n24,r=b.n31,E=b.n32,N=b.n33,W=b.n34,da=b.n41,G=b.n42,H=b.n43,I=b.n44;this.n11=c*C+d*F+f*r+e*da;this.n12=c*Q+d*z+f*E+e*G;this.n13=c*O+d*D+f*N+e*H;this.n14=c*w+d*u+f*W+e*I;this.n21=g*C+h*F+m*r+l*da;this.n22=g*Q+h*z+m*E+l*G;this.n23=g*O+h*D+m*N+l*H;this.n24=g*w+h*u+m*W+l*I;this.n31=j*C+i*F+n*r+o*da;this.n32=j*Q+i*z+n*E+o*G;this.n33=j*O+i*D+n*N+o*H;this.n34=j*w+i*u+n*W+o*I;this.n41=p*C+k*F+s*r+K*da;this.n42=p*Q+k*z+s*E+K*G;this.n43=p*O+k*D+s*N+K*H;this.n44=p*w+k*u+s*W+K*I;return this},multiplySelf:function(a){return this.multiply(this,a)},multiplyToArray:function(a,b,c){this.multiply(a,b);c[0]=this.n11;c[1]=this.n21;c[2]=this.n31;c[3]=this.n41;c[4]=this.n12;c[5]=this.n22;c[6]=this.n32;c[7]=this.n42;c[8]=this.n13;c[9]=this.n23;c[10]=this.n33;c[11]=this.n43;c[12]=this.n14;c[13]=this.n24;c[14]=this.n34;c[15]=this.n44;return this},multiplyScalar:function(a){this.n11*=a;this.n12*=a;this.n13*=a;this.n14*=a;this.n21*=a;this.n22*=a;this.n23*=a;this.n24*=a;this.n31*=a;this.n32*=a;this.n33*=a;this.n34*=a;this.n41*=a;this.n42*=a;this.n43*=a;this.n44*=a;return this},multiplyVector3:function(a){var b=a.x,c=a.y,d=a.z,f=1/(this.n41*b+this.n42*c+this.n43*d+this.n44);a.x=(this.n11*b+this.n12*c+this.n13*d+this.n14)*f;a.y=(this.n21*b+this.n22*c+this.n23*d+this.n24)*f;a.z=(this.n31*b+this.n32*c+this.n33*d+this.n34)*f;return a},multiplyVector4:function(a){var b=a.x,c=a.y,d=a.z,f=a.w;a.x=this.n11*b+this.n12*c+this.n13*d+this.n14*f;a.y=this.n21*b+this.n22*c+this.n23*d+this.n24*f;a.z=this.n31*b+this.n32*c+this.n33*d+this.n34*f;a.w=this.n41*b+this.n42*c+this.n43*d+this.n44*f;return a},rotateAxis:function(a){var b=a.x,c=a.y,d=a.z;a.x=b*this.n11+c*this.n12+d*this.n13;a.y=b*this.n21+c*this.n22+d*this.n23;a.z=b*this.n31+c*this.n32+d*this.n33;a.normalize();return a},crossVector:function(a){var b=new THREE.Vector4;b.x=this.n11*a.x+this.n12*a.y+this.n13*a.z+this.n14*a.w;b.y=this.n21*a.x+this.n22*a.y+this.n23*a.z+this.n24*a.w;b.z=this.n31*a.x+this.n32*a.y+this.n33*a.z+this.n34*a.w;b.w=a.w?this.n41*a.x+this.n42*a.y+this.n43*a.z+this.n44*a.w:1;return b},determinant:function(){var a=this.n11,b=this.n12,c=this.n13,d=this.n14,f=this.n21,e=this.n22,g=this.n23,h=this.n24,m=this.n31,l=this.n32,j=this.n33,i=this.n34,n=this.n41,o=this.n42,p=this.n43,k=this.n44;return d*g*l*n-c*h*l*n-d*e*j*n+b*h*j*n+c*e*i*n-b*g*i*n-d*g*m*o+c*h*m*o+d*f*j*o-a*h*j*o-c*f*i*o+a*g*i*o+d*e*m*p-b*h*m*p-d*f*l*p+a*h*l*p+b*f*i*p-a*e*i*p-c*e*m*k+b*g*m*k+c*f*l*k-a*g*l*k-b*f*j*k+a*e*j*k},transpose:function(){var a;a=this.n21;this.n21=this.n12;this.n12=a;a=this.n31;this.n31=this.n13;this.n13=a;a=this.n32;this.n32=this.n23;this.n23=a;a=this.n41;this.n41=this.n14;this.n14=a;a=this.n42;this.n42=this.n24;this.n24=a;a=this.n43;this.n43=this.n34;this.n43=a;return this},clone:function(){var a=new THREE.Matrix4;a.n11=this.n11;a.n12=this.n12;a.n13=this.n13;a.n14=this.n14;a.n21=this.n21;a.n22=this.n22;a.n23=this.n23;a.n24=this.n24;a.n31=this.n31;a.n32=this.n32;a.n33=this.n33;a.n34=this.n34;a.n41=this.n41;a.n42=this.n42;a.n43=this.n43;a.n44=this.n44;return a},flatten:function(){this.flat[0]=this.n11;this.flat[1]=this.n21;this.flat[2]=this.n31;this.flat[3]=this.n41;this.flat[4]=this.n12;this.flat[5]=this.n22;this.flat[6]=this.n32;this.flat[7]=this.n42;this.flat[8]=this.n13;this.flat[9]=this.n23;this.flat[10]=this.n33;this.flat[11]=this.n43;this.flat[12]=this.n14;this.flat[13]=this.n24;this.flat[14]=this.n34;this.flat[15]=this.n44;return this.flat},flattenToArray:function(a){a[0]=this.n11;a[1]=this.n21;a[2]=this.n31;a[3]=this.n41;a[4]=this.n12;a[5]=this.n22;a[6]=this.n32;a[7]=this.n42;a[8]=this.n13;a[9]=this.n23;a[10]=this.n33;a[11]=this.n43;a[12]=this.n14;a[13]=this.n24;a[14]=this.n34;a[15]=this.n44;return a},flattenToArrayOffset:function(a,b){a[b]=this.n11;a[b+1]=this.n21;a[b+2]=this.n31;a[b+3]=this.n41;a[b+4]=this.n12;a[b+5]=this.n22;a[b+6]=this.n32;a[b+7]=this.n42;a[b+8]=this.n13;a[b+9]=this.n23;a[b+10]=this.n33;a[b+11]=this.n43;a[b+12]=this.n14;a[b+13]=this.n24;a[b+14]=this.n34;a[b+15]=this.n44;return a},setTranslation:function(a,b,c){this.set(1,0,0,a,0,1,0,b,0,0,1,c,0,0,0,1);return this},setScale:function(a,b,c){this.set(a,0,0,0,0,b,0,0,0,0,c,0,0,0,0,1);return this},setRotationX:function(a){var b=Math.cos(a),a=Math.sin(a);this.set(1,0,0,0,0,b,-a,0,0,a,b,0,0,0,0,1);return this},setRotationY:function(a){var b=Math.cos(a),a=Math.sin(a);this.set(b,0,a,0,0,1,0,0,-a,0,b,0,0,0,0,1);return this},setRotationZ:function(a){var b=Math.cos(a),a=Math.sin(a);this.set(b,-a,0,0,a,b,0,0,0,0,1,0,0,0,0,1);return this},setRotationAxis:function(a,b){var c=Math.cos(b),d=Math.sin(b),f=1-c,e=a.x,g=a.y,h=a.z,m=f*e,l=f*g;this.set(m*e+c,m*g-d*h,m*h+d*g,0,m*g+d*h,l*g+c,l*h-d*e,0,m*h-d*g,l*h+d*e,f*h*h+c,0,0,0,0,1);return this},setPosition:function(a){this.n14=a.x;this.n24=a.y;this.n34=a.z;return this},getPosition:function(){return THREE.Matrix4.__v1.set(this.n14,this.n24,this.n34)},getColumnX:function(){return THREE.Matrix4.__v1.set(this.n11,this.n21,this.n31)},getColumnY:function(){return THREE.Matrix4.__v1.set(this.n12,this.n22,this.n32)},getColumnZ:function(){return THREE.Matrix4.__v1.set(this.n13,this.n23,this.n33)},getInverse:function(a){var b=a.n11,c=a.n12,d=a.n13,f=a.n14,e=a.n21,g=a.n22,h=a.n23,m=a.n24,l=a.n31,j=a.n32,i=a.n33,n=a.n34,o=a.n41,p=a.n42,k=a.n43,s=a.n44;this.n11=h*n*p-m*i*p+m*j*k-g*n*k-h*j*s+g*i*s;this.n12=f*i*p-d*n*p-f*j*k+c*n*k+d*j*s-c*i*s;this.n13=d*m*p-f*h*p+f*g*k-c*m*k-d*g*s+c*h*s;this.n14=f*h*j-d*m*j-f*g*i+c*m*i+d*g*n-c*h*n;this.n21=m*i*o-h*n*o-m*l*k+e*n*k+h*l*s-e*i*s;this.n22=d*n*o-f*i*o+f*l*k-b*n*k-d*l*s+b*i*s;this.n23=f*h*o-d*m*o-f*e*k+b*m*k+d*e*s-b*h*s;this.n24=d*m*l-f*h*l+f*e*i-b*m*i-d*e*n+b*h*n;this.n31=g*n*o-m*j*o+m*l*p-e*n*p-g*l*s+e*j*s;this.n32=f*j*o-c*n*o-f*l*p+b*n*p+c*l*s-b*j*s;this.n33=d*m*o-f*g*o+f*e*p-b*m*p-c*e*s+b*g*s;this.n34=f*g*l-c*m*l-f*e*j+b*m*j+c*e*n-b*g*n;this.n41=h*j*o-g*i*o-h*l*p+e*i*p+g*l*k-e*j*k;this.n42=c*i*o-d*j*o+d*l*p-b*i*p-c*l*k+b*j*k;this.n43=d*g*o-c*h*o-d*e*p+b*h*p+c*e*k-b*g*k;this.n44=c*h*l-d*g*l+d*e*j-b*h*j-c*e*i+b*g*i;this.multiplyScalar(1/a.determinant());return this},setRotationFromEuler:function(a,b){var c=a.x,d=a.y,f=a.z,e=Math.cos(c),c=Math.sin(c),g=Math.cos(d),d=Math.sin(d),h=Math.cos(f),f=Math.sin(f);switch(b){case"YXZ":var m=g*h,l=g*f,j=d*h,i=d*f;this.n11=m+i*c;this.n12=j*c-l;this.n13=e*d;this.n21=e*f;this.n22=e*h;this.n23=-c;this.n31=l*c-j;this.n32=i+m*c;this.n33=e*g;break;case"ZXY":m=g*h;l=g*f;j=d*h;i=d*f;this.n11=m-i*c;this.n12=-e*f;this.n13=j+l*c;this.n21=l+j*c;this.n22=e*h;this.n23=i-m*c;this.n31=-e*d;this.n32=c;this.n33=e*g;break;case"ZYX":m=e*h;l=e*f;j=c*h;i=c*f;this.n11=g*h;this.n12=j*d-l;this.n13=m*d+i;this.n21=g*f;this.n22=i*d+m;this.n23=l*d-j;this.n31=-d;this.n32=c*g;this.n33=e*g;break;case"YZX":m=e*g;l=e*d;j=c*g;i=c*d;this.n11=g*h;this.n12=i-m*f;this.n13=j*f+l;this.n21=f;this.n22=e*h;this.n23=-c*h;this.n31=-d*h;this.n32=l*f+j;this.n33=m-i*f;break;case"XZY":m=e*g;l=e*d;j=c*g;i=c*d;this.n11=g*h;this.n12=-f;this.n13=d*h;this.n21=m*f+i;this.n22=e*h;this.n23=l*f-j;this.n31=j*f-l;this.n32=c*h;this.n33=i*f+m;break;default:m=e*h,l=e*f,j=c*h,i=c*f,this.n11=g*h,this.n12=-g*f,this.n13=d,this.n21=l+j*d,this.n22=m-i*d,this.n23=-c*g,this.n31=i-m*d,this.n32=j+l*d,this.n33=e*g}return this},setRotationFromQuaternion:function(a){var b=a.x,c=a.y,d=a.z,f=a.w,e=b+b,g=c+c,h=d+d,a=b*e,m=b*g;b*=h;var l=c*g;c*=h;d*=h;e*=f;g*=f;f*=h;this.n11=1-(l+d);this.n12=m-f;this.n13=b+g;this.n21=m+f;this.n22=1-(a+d);this.n23=c-e;this.n31=b-g;this.n32=c+e;this.n33=1-(a+l);return this},scale:function(a){var b=a.x,c=a.y,a=a.z;this.n11*=b;this.n12*=c;this.n13*=a;this.n21*=b;this.n22*=c;this.n23*=a;this.n31*=b;this.n32*=c;this.n33*=a;this.n41*=b;this.n42*=c;this.n43*=a;return this},compose:function(a,b,c){var d=THREE.Matrix4.__m1,f=THREE.Matrix4.__m2;d.identity();d.setRotationFromQuaternion(b);f.setScale(c.x,c.y,c.z);this.multiply(d,f);this.n14=a.x;this.n24=a.y;this.n34=a.z;return this},decompose:function(a,b,c){var d=THREE.Matrix4.__v1,f=THREE.Matrix4.__v2,e=THREE.Matrix4.__v3;d.set(this.n11,this.n21,this.n31);f.set(this.n12,this.n22,this.n32);e.set(this.n13,this.n23,this.n33);a=a instanceof THREE.Vector3?a:new THREE.Vector3;b=b instanceof THREE.Quaternion?b:new THREE.Quaternion;c=c instanceof THREE.Vector3?c:new THREE.Vector3;c.x=d.length();c.y=f.length();c.z=e.length();a.x=this.n14;a.y=this.n24;a.z=this.n34;d=THREE.Matrix4.__m1;d.copy(this);d.n11/=c.x;d.n21/=c.x;d.n31/=c.x;d.n12/=c.y;d.n22/=c.y;d.n32/=c.y;d.n13/=c.z;d.n23/=c.z;d.n33/=c.z;b.setFromRotationMatrix(d);return[a,b,c]},extractPosition:function(a){this.n14=a.n14;this.n24=a.n24;this.n34=a.n34;return this},extractRotation:function(a){var b=THREE.Matrix4.__v1,c=1/ b.set(a.n11, a.n21, a.n31).length(), d = 1 /b.set(a.n12,a.n22,a.n32).length(),b=1/b.set(a.n13,a.n23,a.n33).length();this.n11=a.n11*c;this.n21=a.n21*c;this.n31=a.n31*c;this.n12=a.n12*d;this.n22=a.n22*d;this.n32=a.n32*d;this.n13=a.n13*b;this.n23=a.n23*b;this.n33=a.n33*b;return this}};THREE.Matrix4.makeInvert3x3=function(a){var b=a.m33,c=b.m,d=a.n33*a.n22-a.n32*a.n23,f=-a.n33*a.n21+a.n31*a.n23,e=a.n32*a.n21-a.n31*a.n22,g=-a.n33*a.n12+a.n32*a.n13,h=a.n33*a.n11-a.n31*a.n13,m=-a.n32*a.n11+a.n31*a.n12,l=a.n23*a.n12-a.n22*a.n13,j=-a.n23*a.n11+a.n21*a.n13,i=a.n22*a.n11-a.n21*a.n12,a=a.n11*d+a.n21*g+a.n31*l;a===0&&console.error("THREE.Matrix4.makeInvert3x3: Matrix not invertible.");a=1/a;c[0]=a*d;c[1]=a*f;c[2]=a*e;c[3]=a*g;c[4]=a*h;c[5]=a*m;c[6]=a*l;c[7]=a*j;c[8]=a*i;return b};THREE.Matrix4.makeFrustum=function(a,b,c,d,f,e){var g;g=new THREE.Matrix4;g.n11=2*f/(b-a);g.n12=0;g.n13=(b+a)/(b-a);g.n14=0;g.n21=0;g.n22=2*f/(d-c);g.n23=(d+c)/(d-c);g.n24=0;g.n31=0;g.n32=0;g.n33=-(e+f)/(e-f);g.n34=-2*e*f/(e-f);g.n41=0;g.n42=0;g.n43=-1;g.n44=0;return g};THREE.Matrix4.makePerspective=function(a,b,c,d){var f,a=c*Math.tan(a*Math.PI/360);f=-a;return THREE.Matrix4.makeFrustum(f*b,a*b,f,a,c,d)};THREE.Matrix4.makeOrtho=function(a,b,c,d,f,e){var g,h,m,l;g=new THREE.Matrix4;h=b-a;m=c-d;l=e-f;g.n11=2/h;g.n12=0;g.n13=0;g.n14=-((b+a)/h);g.n21=0;g.n22=2/m;g.n23=0;g.n24=-((c+d)/m);g.n31=0;g.n32=0;g.n33=-2/l;g.n34=-((e+f)/l);g.n41=0;g.n42=0;g.n43=0;g.n44=1;return g};THREE.Matrix4.__v1=new THREE.Vector3;THREE.Matrix4.__v2=new THREE.Vector3;THREE.Matrix4.__v3=new THREE.Vector3;THREE.Matrix4.__m1=new THREE.Matrix4;THREE.Matrix4.__m2=new THREE.Matrix4;THREE.Object3D=function(){this.name="";this.id=THREE.Object3DCount++;this.parent=void 0;this.children=[];this.up=new THREE.Vector3(0,1,0);this.position=new THREE.Vector3;this.rotation=new THREE.Vector3;this.eulerOrder="XYZ";this.scale=new THREE.Vector3(1,1,1);this.flipSided=this.doubleSided=this.dynamic=!1;this.renderDepth=null;this.rotationAutoUpdate=!0;this.matrix=new THREE.Matrix4;this.matrixWorld=new THREE.Matrix4;this.matrixRotationWorld=new THREE.Matrix4;this.matrixWorldNeedsUpdate=this.matrixAutoUpdate=!0;this.quaternion=new THREE.Quaternion;this.useQuaternion=!1;this.boundRadius=0;this.boundRadiusScale=1;this.visible=!0;this.receiveShadow=this.castShadow=!1;this.frustumCulled=!0;this._vector=new THREE.Vector3};THREE.Object3D.prototype={constructor:THREE.Object3D,translate:function(a,b){this.matrix.rotateAxis(b);this.position.addSelf(b.multiplyScalar(a))},translateX:function(a){this.translate(a,this._vector.set(1,0,0))},translateY:function(a){this.translate(a,this._vector.set(0,1,0))},translateZ:function(a){this.translate(a,this._vector.set(0,0,1))},lookAt:function(a){this.matrix.lookAt(a,this.position,this.up);this.rotationAutoUpdate&&this.rotation.setRotationFromMatrix(this.matrix)},add:function(a){if(this.children.indexOf(a)===-1){a.parent!==void 0&&a.parent.remove(a);a.parent=this;this.children.push(a);for(var b=this;b.parent!==void 0;)b=b.parent;b!==void 0&&b instanceof THREE.Scene&&b.addObject(a)}},remove:function(a){var b=this.children.indexOf(a);if(b!==-1){a.parent=void 0;this.children.splice(b,1);for(b=this;b.parent!==void 0;)b=b.parent;b!==void 0&&b instanceof THREE.Scene&&b.removeObject(a)}},getChildByName:function(a,b){var c,d,f;c=0;for(d=this.children.length;c<d;c++){f=this.children[c];if(f.name===a)return f;if(b&&(f=f.getChildByName(a,b),f!==void 0))return f}},updateMatrix:function(){this.matrix.setPosition(this.position);this.useQuaternion?this.matrix.setRotationFromQuaternion(this.quaternion):this.matrix.setRotationFromEuler(this.rotation,this.eulerOrder);if(this.scale.x!==1||this.scale.y!==1||this.scale.z!==1)this.matrix.scale(this.scale),this.boundRadiusScale=Math.max(this.scale.x,Math.max(this.scale.y,this.scale.z));this.matrixWorldNeedsUpdate=!0},updateMatrixWorld:function(a){this.matrixAutoUpdate&&this.updateMatrix();if(this.matrixWorldNeedsUpdate||a)this.parent?this.matrixWorld.multiply(this.parent.matrixWorld,this.matrix):this.matrixWorld.copy(this.matrix),this.matrixWorldNeedsUpdate=!1,a=!0;for(var b=0,c=this.children.length;b<c;b++)this.children[b].updateMatrixWorld(a)}};THREE.Object3DCount=0;THREE.Projector=function(){function a(){var a=g[e]=g[e]||new THREE.RenderableObject;e++;return a}function b(){var a=l[m]=l[m]||new THREE.RenderableVertex;m++;return a}function c(a,b){return b.z-a.z}function d(a,b){var c=0,d=1,e=a.z+a.w,f=b.z+b.w,g=-a.z+a.w,h=-b.z+b.w;return e>=0&&f>=0&&g>=0&&h>=0?!0:e<0&&f<0||g<0&&h<0?!1:(e<0?c=Math.max(c,e/ (e - f)) : f < 0 && (d = Math.min(d, e /(e-f))),g<0?c=Math.max(c,g/ (g - h)) : h < 0 && (d = Math.min(d, g /(g-h))),d<c?!1:(a.lerpSelf(b,c),b.lerpSelf(a,1-d),!0))}var f,e,g=[],h,m,l=[],j,i,n=[],o,p=[],k,s,K=[],C,Q,O=[],w={objects:[],sprites:[],lights:[],elements:[]},F=new THREE.Vector3,z=new THREE.Vector4,D=new THREE.Matrix4,u=new THREE.Matrix4,r=[new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4,new THREE.Vector4],E=new THREE.Vector4,N=new THREE.Vector4;this.computeFrustum=function(a){r[0].set(a.n41-a.n11,a.n42-a.n12,a.n43-a.n13,a.n44-a.n14);r[1].set(a.n41+a.n11,a.n42+a.n12,a.n43+a.n13,a.n44+a.n14);r[2].set(a.n41+a.n21,a.n42+a.n22,a.n43+a.n23,a.n44+a.n24);r[3].set(a.n41-a.n21,a.n42-a.n22,a.n43-a.n23,a.n44-a.n24);r[4].set(a.n41-a.n31,a.n42-a.n32,a.n43-a.n33,a.n44-a.n34);r[5].set(a.n41+a.n31,a.n42+a.n32,a.n43+a.n33,a.n44+a.n34);for(a=0;a<6;a++){var b=r[a];b.divideScalar(Math.sqrt(b.x*b.x+b.y*b.y+b.z*b.z))}};this.projectVector=function(a,b){b.matrixWorldInverse.getInverse(b.matrixWorld);D.multiply(b.projectionMatrix,b.matrixWorldInverse);D.multiplyVector3(a);return a};this.unprojectVector=function(a,b){b.projectionMatrixInverse.getInverse(b.projectionMatrix);D.multiply(b.matrixWorld,b.projectionMatrixInverse);D.multiplyVector3(a);return a};this.pickingRay=function(a,b){var c;a.z=-1;c=new THREE.Vector3(a.x,a.y,1);this.unprojectVector(a,b);this.unprojectVector(c,b);c.subSelf(a).normalize();return new THREE.Ray(a,c)};this.projectGraph=function(b,d){e=0;w.objects.length=0;w.sprites.length=0;w.lights.length=0;var g=function(b){if(b.visible!==!1){var c;if(c=b instanceof THREE.Mesh||b instanceof THREE.Line)if(!(c=b.frustumCulled===!1))a:{for(var d=b.matrixWorld,e=-b.geometry.boundingSphere.radius*Math.max(b.scale.x,Math.max(b.scale.y,b.scale.z)),h=0;h<6;h++)if(c=r[h].x*d.n14+r[h].y*d.n24+r[h].z*d.n34+r[h].w,c<=e){c=!1;break a}c=!0}c?(D.multiplyVector3(F.copy(b.position)),f=a(),f.object=b,f.z=F.z,w.objects.push(f)):b instanceof THREE.Sprite||b instanceof THREE.Particle?(D.multiplyVector3(F.copy(b.position)),f=a(),f.object=b,f.z=F.z,w.sprites.push(f)):b instanceof THREE.Light&&w.lights.push(b);c=0;for(d=b.children.length;c<d;c++)g(b.children[c])}};g(b);d&&w.objects.sort(c);return w};this.projectScene=function(a,e,f){var g=e.near,r=e.far,F,L,B,S,v,R,P,V,J,t,A,x,y,M,la,fa;Q=s=o=i=0;w.elements.length=0;e.parent===void 0&&(console.warn("DEPRECATED: Camera hasn't been added to a Scene. Adding it..."),a.add(e));a.updateMatrixWorld();e.matrixWorldInverse.getInverse(e.matrixWorld);D.multiply(e.projectionMatrix,e.matrixWorldInverse);this.computeFrustum(D);w=this.projectGraph(a,!1);a=0;for(F=w.objects.length;a<F;a++)if(J=w.objects[a].object,t=J.matrixWorld,x=J.material,m=0,J instanceof THREE.Mesh){A=J.geometry;y=J.geometry.materials;S=A.vertices;M=A.faces;la=A.faceVertexUvs;A=J.matrixRotationWorld.extractRotation(t);L=0;for(B=S.length;L<B;L++)h=b(),h.positionWorld.copy(S[L].position),t.multiplyVector3(h.positionWorld),h.positionScreen.copy(h.positionWorld),D.multiplyVector4(h.positionScreen),h.positionScreen.x/= h.positionScreen.w, h.positionScreen.y /=h.positionScreen.w,h.visible=h.positionScreen.z>g&&h.positionScreen.z<r;S=0;for(L=M.length;S<L;S++){B=M[S];if(B instanceof THREE.Face3)if(v=l[B.a],R=l[B.b],P=l[B.c],v.visible&&R.visible&&P.visible&&(J.doubleSided||J.flipSided!=(P.positionScreen.x-v.positionScreen.x)*(R.positionScreen.y-v.positionScreen.y)-(P.positionScreen.y-v.positionScreen.y)*(R.positionScreen.x-v.positionScreen.x)<0))V=n[i]=n[i]||new THREE.RenderableFace3,i++,j=V,j.v1.copy(v),j.v2.copy(R),j.v3.copy(P);else continue;else if(B instanceof THREE.Face4)if(v=l[B.a],R=l[B.b],P=l[B.c],V=l[B.d],v.visible&&R.visible&&P.visible&&V.visible&&(J.doubleSided||J.flipSided!=((V.positionScreen.x-v.positionScreen.x)*(R.positionScreen.y-v.positionScreen.y)-(V.positionScreen.y-v.positionScreen.y)*(R.positionScreen.x-v.positionScreen.x)<0||(R.positionScreen.x-P.positionScreen.x)*(V.positionScreen.y-P.positionScreen.y)-(R.positionScreen.y-P.positionScreen.y)*(V.positionScreen.x-P.positionScreen.x)<0)))fa=p[o]=p[o]||new THREE.RenderableFace4,o++,j=fa,j.v1.copy(v),j.v2.copy(R),j.v3.copy(P),j.v4.copy(V);else continue;j.normalWorld.copy(B.normal);A.multiplyVector3(j.normalWorld);j.centroidWorld.copy(B.centroid);t.multiplyVector3(j.centroidWorld);j.centroidScreen.copy(j.centroidWorld);D.multiplyVector3(j.centroidScreen);P=B.vertexNormals;v=0;for(R=P.length;v<R;v++)V=j.vertexNormalsWorld[v],V.copy(P[v]),A.multiplyVector3(V);v=0;for(R=la.length;v<R;v++)if(fa=la[v][S]){P=0;for(V=fa.length;P<V;P++)j.uvs[v][P]=fa[P]}j.material=x;j.faceMaterial=B.materialIndex!==null?y[B.materialIndex]:null;j.z=j.centroidScreen.z;w.elements.push(j)}}else if(J instanceof THREE.Line){u.multiply(D,t);S=J.geometry.vertices;v=b();v.positionScreen.copy(S[0].position);u.multiplyVector4(v.positionScreen);L=1;for(B=S.length;L<B;L++)if(v=b(),v.positionScreen.copy(S[L].position),u.multiplyVector4(v.positionScreen),R=l[m-2],E.copy(v.positionScreen),N.copy(R.positionScreen),d(E,N))E.multiplyScalar(1/ E.w), N.multiplyScalar(1 /N.w),J=K[s]=K[s]||new THREE.RenderableLine,s++,k=J,k.v1.positionScreen.copy(E),k.v2.positionScreen.copy(N),k.z=Math.max(E.z,N.z),k.material=x,w.elements.push(k)}a=0;for(F=w.sprites.length;a<F;a++)if(J=w.sprites[a].object,t=J.matrixWorld,J instanceof THREE.Particle&&(z.set(t.n14,t.n24,t.n34,1),D.multiplyVector4(z),z.z/= z.w, z.z > 0 && z.z < 1))g = O[Q] = O[Q] || new THREE.RenderableParticle, Q++, C = g, C.x = z.x /z.w,C.y=z.y/ z.w, C.z = z.z, C.rotation = J.rotation.z, C.scale.x = J.scale.x * Math.abs(C.x - (z.x + e.projectionMatrix.n11) /(z.w+e.projectionMatrix.n14)),C.scale.y=J.scale.y*Math.abs(C.y-(z.y+e.projectionMatrix.n22)/(z.w+e.projectionMatrix.n24)),C.material=J.material,w.elements.push(C);f&&w.elements.sort(c);return w}};THREE.Quaternion=function(a,b,c,d){this.set(a||0,b||0,c||0,d!==void 0?d:1)};THREE.Quaternion.prototype={constructor:THREE.Quaternion,set:function(a,b,c,d){this.x=a;this.y=b;this.z=c;this.w=d;return this},copy:function(a){this.x=a.x;this.y=a.y;this.z=a.z;this.w=a.w;return this},setFromEuler:function(a){var b=Math.PI/360,c=a.x*b,d=a.y*b,f=a.z*b,a=Math.cos(d),d=Math.sin(d),b=Math.cos(-f),f=Math.sin(-f),e=Math.cos(c),c=Math.sin(c),g=a*b,h=d*f;this.w=g*e-h*c;this.x=g*c+h*e;this.y=d*b*e+a*f*c;this.z=a*f*e-d*b*c;return this},setFromAxisAngle:function(a,b){var c=b/2,d=Math.sin(c);this.x=a.x*d;this.y=a.y*d;this.z=a.z*d;this.w=Math.cos(c);return this},setFromRotationMatrix:function(a){var b=Math.pow(a.determinant(),1/3);this.w=Math.sqrt(Math.max(0,b+a.n11+a.n22+a.n33))/2;this.x=Math.sqrt(Math.max(0,b+a.n11-a.n22-a.n33))/2;this.y=Math.sqrt(Math.max(0,b-a.n11+a.n22-a.n33))/2;this.z=Math.sqrt(Math.max(0,b-a.n11-a.n22+a.n33))/2;this.x=a.n32-a.n23<0?-Math.abs(this.x):Math.abs(this.x);this.y=a.n13-a.n31<0?-Math.abs(this.y):Math.abs(this.y);this.z=a.n21-a.n12<0?-Math.abs(this.z):Math.abs(this.z);this.normalize();return this},calculateW:function(){this.w=-Math.sqrt(Math.abs(1-this.x*this.x-this.y*this.y-this.z*this.z));return this},inverse:function(){this.x*=-1;this.y*=-1;this.z*=-1;return this},length:function(){return Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w)},normalize:function(){var a=Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w);a===0?this.w=this.z=this.y=this.x=0:(a=1/a,this.x*=a,this.y*=a,this.z*=a,this.w*=a);return this},multiplySelf:function(a){var b=this.x,c=this.y,d=this.z,f=this.w,e=a.x,g=a.y,h=a.z,a=a.w;this.x=b*a+f*e+c*h-d*g;this.y=c*a+f*g+d*e-b*h;this.z=d*a+f*h+b*g-c*e;this.w=f*a-b*e-c*g-d*h;return this},multiply:function(a,b){this.x=a.x*b.w+a.y*b.z-a.z*b.y+a.w*b.x;this.y=-a.x*b.z+a.y*b.w+a.z*b.x+a.w*b.y;this.z=a.x*b.y-a.y*b.x+a.z*b.w+a.w*b.z;this.w=-a.x*b.x-a.y*b.y-a.z*b.z+a.w*b.w;return this},multiplyVector3:function(a,b){b||(b=a);var c=a.x,d=a.y,f=a.z,e=this.x,g=this.y,h=this.z,m=this.w,l=m*c+g*f-h*d,j=m*d+h*c-e*f,i=m*f+e*d-g*c,c=-e*c-g*d-h*f;b.x=l*m+c*-e+j*-h-i*-g;b.y=j*m+c*-g+i*-e-l*-h;b.z=i*m+c*-h+l*-g-j*-e;return b}};THREE.Quaternion.slerp=function(a,b,c,d){var f=a.w*b.w+a.x*b.x+a.y*b.y+a.z*b.z;f<0?(c.w=-b.w,c.x=-b.x,c.y=-b.y,c.z=-b.z,f=-f):c.copy(b);if(Math.abs(f)>=1)return c.w=a.w,c.x=a.x,c.y=a.y,c.z=a.z,c;var e=Math.acos(f),f=Math.sqrt(1-f*f);if(Math.abs(f)<0.001)return c.w=0.5*(a.w+b.w),c.x=0.5*(a.x+b.x),c.y=0.5*(a.y+b.y),c.z=0.5*(a.z+b.z),c;b=Math.sin((1-d)*e)/f;d=Math.sin(d*e)/f;c.w=a.w*b+c.w*d;c.x=a.x*b+c.x*d;c.y=a.y*b+c.y*d;c.z=a.z*b+c.z*d;return c};THREE.Vertex=function(a){this.position=a||new THREE.Vector3};THREE.Face3=function(a,b,c,d,f,e){this.a=a;this.b=b;this.c=c;this.normal=d instanceof THREE.Vector3?d:new THREE.Vector3;this.vertexNormals=d instanceof Array?d:[];this.color=f instanceof THREE.Color?f:new THREE.Color;this.vertexColors=f instanceof Array?f:[];this.vertexTangents=[];this.materialIndex=e;this.centroid=new THREE.Vector3};THREE.Face4=function(a,b,c,d,f,e,g){this.a=a;this.b=b;this.c=c;this.d=d;this.normal=f instanceof THREE.Vector3?f:new THREE.Vector3;this.vertexNormals=f instanceof Array?f:[];this.color=e instanceof THREE.Color?e:new THREE.Color;this.vertexColors=e instanceof Array?e:[];this.vertexTangents=[];this.materialIndex=g;this.centroid=new THREE.Vector3};THREE.UV=function(a,b){this.u=a||0;this.v=b||0};THREE.UV.prototype={constructor:THREE.UV,set:function(a,b){this.u=a;this.v=b;return this},copy:function(a){this.u=a.u;this.v=a.v;return this},clone:function(){return new THREE.UV(this.u,this.v)}};THREE.Geometry=function(){this.id=THREE.GeometryCount++;this.vertices=[];this.colors=[];this.materials=[];this.faces=[];this.faceUvs=[[]];this.faceVertexUvs=[[]];this.morphTargets=[];this.morphColors=[];this.skinWeights=[];this.skinIndices=[];this.boundingSphere=this.boundingBox=null;this.dynamic=this.hasTangents=!1};THREE.Geometry.prototype={constructor:THREE.Geometry,applyMatrix:function(a){var b=new THREE.Matrix4;b.extractRotation(a,new THREE.Vector3(1,1,1));for(var c=0,d=this.vertices.length;c<d;c++)a.multiplyVector3(this.vertices[c].position);c=0;for(d=this.faces.length;c<d;c++){var f=this.faces[c];b.multiplyVector3(f.normal);for(var e=0,g=f.vertexNormals.length;e<g;e++)b.multiplyVector3(f.vertexNormals[e]);a.multiplyVector3(f.centroid)}},computeCentroids:function(){var a,b,c;a=0;for(b=this.faces.length;a<b;a++)c=this.faces[a],c.centroid.set(0,0,0),c instanceof THREE.Face3?(c.centroid.addSelf(this.vertices[c.a].position),c.centroid.addSelf(this.vertices[c.b].position),c.centroid.addSelf(this.vertices[c.c].position),c.centroid.divideScalar(3)):c instanceof THREE.Face4&&(c.centroid.addSelf(this.vertices[c.a].position),c.centroid.addSelf(this.vertices[c.b].position),c.centroid.addSelf(this.vertices[c.c].position),c.centroid.addSelf(this.vertices[c.d].position),c.centroid.divideScalar(4))},computeFaceNormals:function(){var a,b,c,d,f,e,g=new THREE.Vector3,h=new THREE.Vector3;a=0;for(b=this.faces.length;a<b;a++)c=this.faces[a],d=this.vertices[c.a],f=this.vertices[c.b],e=this.vertices[c.c],g.sub(e.position,f.position),h.sub(d.position,f.position),g.crossSelf(h),g.isZero()||g.normalize(),c.normal.copy(g)},computeVertexNormals:function(){var a,b,c,d;if(this.__tmpVertices===void 0){d=this.__tmpVertices=Array(this.vertices.length);a=0;for(b=this.vertices.length;a<b;a++)d[a]=new THREE.Vector3;a=0;for(b=this.faces.length;a<b;a++)if(c=this.faces[a],c instanceof THREE.Face3)c.vertexNormals=[new THREE.Vector3,new THREE.Vector3,new THREE.Vector3];else if(c instanceof THREE.Face4)c.vertexNormals=[new THREE.Vector3,new THREE.Vector3,new THREE.Vector3,new THREE.Vector3]}else{d=this.__tmpVertices;a=0;for(b=this.vertices.length;a<b;a++)d[a].set(0,0,0)}a=0;for(b=this.faces.length;a<b;a++)c=this.faces[a],c instanceof THREE.Face3?(d[c.a].addSelf(c.normal),d[c.b].addSelf(c.normal),d[c.c].addSelf(c.normal)):c instanceof THREE.Face4&&(d[c.a].addSelf(c.normal),d[c.b].addSelf(c.normal),d[c.c].addSelf(c.normal),d[c.d].addSelf(c.normal));a=0;for(b=this.vertices.length;a<b;a++)d[a].normalize();a=0;for(b=this.faces.length;a<b;a++)c=this.faces[a],c instanceof THREE.Face3?(c.vertexNormals[0].copy(d[c.a]),c.vertexNormals[1].copy(d[c.b]),c.vertexNormals[2].copy(d[c.c])):c instanceof THREE.Face4&&(c.vertexNormals[0].copy(d[c.a]),c.vertexNormals[1].copy(d[c.b]),c.vertexNormals[2].copy(d[c.c]),c.vertexNormals[3].copy(d[c.d]))},computeTangents:function(){function a(a,b,c,d,e,f,D){h=a.vertices[b].position;m=a.vertices[c].position;l=a.vertices[d].position;j=g[e];i=g[f];n=g[D];o=m.x-h.x;p=l.x-h.x;k=m.y-h.y;s=l.y-h.y;K=m.z-h.z;C=l.z-h.z;Q=i.u-j.u;O=n.u-j.u;w=i.v-j.v;F=n.v-j.v;z=1/(Q*F-O*w);E.set((F*o-w*p)*z,(F*k-w*s)*z,(F*K-w*C)*z);N.set((Q*p-O*o)*z,(Q*s-O*k)*z,(Q*C-O*K)*z);u[b].addSelf(E);u[c].addSelf(E);u[d].addSelf(E);r[b].addSelf(N);r[c].addSelf(N);r[d].addSelf(N)}var b,c,d,f,e,g,h,m,l,j,i,n,o,p,k,s,K,C,Q,O,w,F,z,D,u=[],r=[],E=new THREE.Vector3,N=new THREE.Vector3,W=new THREE.Vector3,da=new THREE.Vector3,G=new THREE.Vector3;b=0;for(c=this.vertices.length;b<c;b++)u[b]=new THREE.Vector3,r[b]=new THREE.Vector3;b=0;for(c=this.faces.length;b<c;b++)e=this.faces[b],g=this.faceVertexUvs[0][b],e instanceof THREE.Face3?a(this,e.a,e.b,e.c,0,1,2):e instanceof THREE.Face4&&(a(this,e.a,e.b,e.c,0,1,2),a(this,e.a,e.b,e.d,0,1,3));var H=["a","b","c","d"];b=0;for(c=this.faces.length;b<c;b++){e=this.faces[b];for(d=0;d<e.vertexNormals.length;d++)G.copy(e.vertexNormals[d]),f=e[H[d]],D=u[f],W.copy(D),W.subSelf(G.multiplyScalar(G.dot(D))).normalize(),da.cross(e.vertexNormals[d],D),f=da.dot(r[f]),f=f<0?-1:1,e.vertexTangents[d]=new THREE.Vector4(W.x,W.y,W.z,f)}this.hasTangents=!0},computeBoundingBox:function(){var a;if(this.vertices.length>0){this.boundingBox={x:[this.vertices[0].position.x,this.vertices[0].position.x],y:[this.vertices[0].position.y,this.vertices[0].position.y],z:[this.vertices[0].position.z,this.vertices[0].position.z]};for(var b=1,c=this.vertices.length;b<c;b++){a=this.vertices[b];if(a.position.x<this.boundingBox.x[0])this.boundingBox.x[0]=a.position.x;else if(a.position.x>this.boundingBox.x[1])this.boundingBox.x[1]=a.position.x;if(a.position.y<this.boundingBox.y[0])this.boundingBox.y[0]=a.position.y;else if(a.position.y>this.boundingBox.y[1])this.boundingBox.y[1]=a.position.y;if(a.position.z<this.boundingBox.z[0])this.boundingBox.z[0]=a.position.z;else if(a.position.z>this.boundingBox.z[1])this.boundingBox.z[1]=a.position.z}}},computeBoundingSphere:function(){for(var a=0,b=0,c=this.vertices.length;b<c;b++)a=Math.max(a,this.vertices[b].position.length());this.boundingSphere={radius:a}},mergeVertices:function(){var a={},b=[],c=[],d,f=Math.pow(10,4),e,g;e=0;for(g=this.vertices.length;e<g;e++)d=this.vertices[e].position,d=[Math.round(d.x*f),Math.round(d.y*f),Math.round(d.z*f)].join("_"),a[d]===void 0?(a[d]=e,b.push(this.vertices[e]),c[e]=b.length-1):c[e]=c[a[d]];e=0;for(g=this.faces.length;e<g;e++)if(a=this.faces[e],a instanceof THREE.Face3)a.a=c[a.a],a.b=c[a.b],a.c=c[a.c];else if(a instanceof THREE.Face4)a.a=c[a.a],a.b=c[a.b],a.c=c[a.c],a.d=c[a.d];this.vertices=b}};THREE.GeometryCount=0;THREE.Camera=function(){if(arguments.length)return console.warn("DEPRECATED: Camera() is now PerspectiveCamera() or OrthographicCamera()."),new THREE.PerspectiveCamera(arguments[0],arguments[1],arguments[2],arguments[3]);THREE.Object3D.call(this);this.matrixWorldInverse=new THREE.Matrix4;this.projectionMatrix=new THREE.Matrix4;this.projectionMatrixInverse=new THREE.Matrix4};THREE.Camera.prototype=new THREE.Object3D;THREE.Camera.prototype.constructor=THREE.Camera;THREE.Camera.prototype.lookAt=function(a){this.matrix.lookAt(this.position,a,this.up);this.rotationAutoUpdate&&this.rotation.setRotationFromMatrix(this.matrix)};THREE.OrthographicCamera=function(a,b,c,d,f,e){THREE.Camera.call(this);this.left=a;this.right=b;this.top=c;this.bottom=d;this.near=f!==void 0?f:0.1;this.far=e!==void 0?e:2E3;this.updateProjectionMatrix()};THREE.OrthographicCamera.prototype=new THREE.Camera;THREE.OrthographicCamera.prototype.constructor=THREE.OrthographicCamera;THREE.OrthographicCamera.prototype.updateProjectionMatrix=function(){this.projectionMatrix=THREE.Matrix4.makeOrtho(this.left,this.right,this.top,this.bottom,this.near,this.far)};THREE.PerspectiveCamera=function(a,b,c,d){THREE.Camera.call(this);this.fov=a!==void 0?a:50;this.aspect=b!==void 0?b:1;this.near=c!==void 0?c:0.1;this.far=d!==void 0?d:2E3;this.updateProjectionMatrix()};THREE.PerspectiveCamera.prototype=new THREE.Camera;THREE.PerspectiveCamera.prototype.constructor=THREE.PerspectiveCamera;THREE.PerspectiveCamera.prototype.setLens=function(a,b){this.fov=2*Math.atan((b!==void 0?b:43.25)/(a*2));this.fov*=180/Math.PI;this.updateProjectionMatrix()};THREE.PerspectiveCamera.prototype.setViewOffset=function(a,b,c,d,f,e){this.fullWidth=a;this.fullHeight=b;this.x=c;this.y=d;this.width=f;this.height=e;this.updateProjectionMatrix()};THREE.PerspectiveCamera.prototype.updateProjectionMatrix=function(){if(this.fullWidth){var a=this.fullWidth/ this.fullHeight, b = Math.tan(this.fov * Math.PI /360)*this.near,c=-b,d=a*c,a=Math.abs(a*b-d),c=Math.abs(b-c);this.projectionMatrix=THREE.Matrix4.makeFrustum(d+this.x*a/ this.fullWidth, d + (this.x + this.width) * a /this.fullWidth,b-(this.y+this.height)*c/ this.fullHeight, b - this.y * c /this.fullHeight,this.near,this.far)}else this.projectionMatrix=THREE.Matrix4.makePerspective(this.fov,this.aspect,this.near,this.far)};THREE.Light=function(a){THREE.Object3D.call(this);this.color=new THREE.Color(a)};THREE.Light.prototype=new THREE.Object3D;THREE.Light.prototype.constructor=THREE.Light;THREE.Light.prototype.supr=THREE.Object3D.prototype;THREE.AmbientLight=function(a){THREE.Light.call(this,a)};THREE.AmbientLight.prototype=new THREE.Light;THREE.AmbientLight.prototype.constructor=THREE.AmbientLight;THREE.DirectionalLight=function(a,b,c){THREE.Light.call(this,a);this.position=new THREE.Vector3(0,1,0);this.intensity=b!==void 0?b:1;this.distance=c!==void 0?c:0};THREE.DirectionalLight.prototype=new THREE.Light;THREE.DirectionalLight.prototype.constructor=THREE.DirectionalLight;THREE.PointLight=function(a,b,c){THREE.Light.call(this,a);this.position=new THREE.Vector3(0,0,0);this.intensity=b!==void 0?b:1;this.distance=c!==void 0?c:0};THREE.PointLight.prototype=new THREE.Light;THREE.PointLight.prototype.constructor=THREE.PointLight;THREE.Material=function(a){this.name="";this.id=THREE.MaterialCount++;a=a||{};this.opacity=a.opacity!==void 0?a.opacity:1;this.transparent=a.transparent!==void 0?a.transparent:!1;this.blending=a.blending!==void 0?a.blending:THREE.NormalBlending;this.depthTest=a.depthTest!==void 0?a.depthTest:!0;this.depthWrite=a.depthWrite!==void 0?a.depthWrite:!0;this.polygonOffset=a.polygonOffset!==void 0?a.polygonOffset:!1;this.polygonOffsetFactor=a.polygonOffsetFactor!==void 0?a.polygonOffsetFactor:0;this.polygonOffsetUnits=a.polygonOffsetUnits!==void 0?a.polygonOffsetUnits:0;this.alphaTest=a.alphaTest!==void 0?a.alphaTest:0;this.overdraw=a.overdraw!==void 0?a.overdraw:!1};THREE.MaterialCount=0;THREE.NoShading=0;THREE.FlatShading=1;THREE.SmoothShading=2;THREE.NoColors=0;THREE.FaceColors=1;THREE.VertexColors=2;THREE.NormalBlending=0;THREE.AdditiveBlending=1;THREE.SubtractiveBlending=2;THREE.MultiplyBlending=3;THREE.AdditiveAlphaBlending=4;THREE.LineBasicMaterial=function(a){THREE.Material.call(this,a);a=a||{};this.color=a.color!==void 0?new THREE.Color(a.color):new THREE.Color(16777215);this.linewidth=a.linewidth!==void 0?a.linewidth:1;this.linecap=a.linecap!==void 0?a.linecap:"round";this.linejoin=a.linejoin!==void 0?a.linejoin:"round";this.vertexColors=a.vertexColors?a.vertexColors:!1;this.fog=a.fog!==void 0?a.fog:!0};THREE.LineBasicMaterial.prototype=new THREE.Material;THREE.LineBasicMaterial.prototype.constructor=THREE.LineBasicMaterial;THREE.MeshBasicMaterial=function(a){THREE.Material.call(this,a);a=a||{};this.color=a.color!==void 0?new THREE.Color(a.color):new THREE.Color(16777215);this.map=a.map!==void 0?a.map:null;this.lightMap=a.lightMap!==void 0?a.lightMap:null;this.envMap=a.envMap!==void 0?a.envMap:null;this.combine=a.combine!==void 0?a.combine:THREE.MultiplyOperation;this.reflectivity=a.reflectivity!==void 0?a.reflectivity:1;this.refractionRatio=a.refractionRatio!==void 0?a.refractionRatio:0.98;this.fog=a.fog!==void 0?a.fog:!0;this.shading=a.shading!==void 0?a.shading:THREE.SmoothShading;this.wireframe=a.wireframe!==void 0?a.wireframe:!1;this.wireframeLinewidth=a.wireframeLinewidth!==void 0?a.wireframeLinewidth:1;this.wireframeLinecap=a.wireframeLinecap!==void 0?a.wireframeLinecap:"round";this.wireframeLinejoin=a.wireframeLinejoin!==void 0?a.wireframeLinejoin:"round";this.vertexColors=a.vertexColors!==void 0?a.vertexColors:!1;this.skinning=a.skinning!==void 0?a.skinning:!1;this.morphTargets=a.morphTargets!==void 0?a.morphTargets:!1};THREE.MeshBasicMaterial.prototype=new THREE.Material;THREE.MeshBasicMaterial.prototype.constructor=THREE.MeshBasicMaterial;THREE.MeshLambertMaterial=function(a){THREE.Material.call(this,a);a=a||{};this.color=a.color!==void 0?new THREE.Color(a.color):new THREE.Color(16777215);this.ambient=a.ambient!==void 0?new THREE.Color(a.ambient):new THREE.Color(328965);this.map=a.map!==void 0?a.map:null;this.lightMap=a.lightMap!==void 0?a.lightMap:null;this.envMap=a.envMap!==void 0?a.envMap:null;this.combine=a.combine!==void 0?a.combine:THREE.MultiplyOperation;this.reflectivity=a.reflectivity!==void 0?a.reflectivity:1;this.refractionRatio=a.refractionRatio!==void 0?a.refractionRatio:0.98;this.fog=a.fog!==void 0?a.fog:!0;this.shading=a.shading!==void 0?a.shading:THREE.SmoothShading;this.wireframe=a.wireframe!==void 0?a.wireframe:!1;this.wireframeLinewidth=a.wireframeLinewidth!==void 0?a.wireframeLinewidth:1;this.wireframeLinecap=a.wireframeLinecap!==void 0?a.wireframeLinecap:"round";this.wireframeLinejoin=a.wireframeLinejoin!==void 0?a.wireframeLinejoin:"round";this.vertexColors=a.vertexColors!==void 0?a.vertexColors:!1;this.skinning=a.skinning!==void 0?a.skinning:!1;this.morphTargets=a.morphTargets!==void 0?a.morphTargets:!1};THREE.MeshLambertMaterial.prototype=new THREE.Material;THREE.MeshLambertMaterial.prototype.constructor=THREE.MeshLambertMaterial;THREE.MeshPhongMaterial=function(a){THREE.Material.call(this,a);a=a||{};this.color=a.color!==void 0?new THREE.Color(a.color):new THREE.Color(16777215);this.ambient=a.ambient!==void 0?new THREE.Color(a.ambient):new THREE.Color(328965);this.specular=a.specular!==void 0?new THREE.Color(a.specular):new THREE.Color(1118481);this.shininess=a.shininess!==void 0?a.shininess:30;this.metal=a.metal!==void 0?a.metal:!1;this.perPixel=a.perPixel!==void 0?a.perPixel:!1;this.map=a.map!==void 0?a.map:null;this.lightMap=a.lightMap!==void 0?a.lightMap:null;this.envMap=a.envMap!==void 0?a.envMap:null;this.combine=a.combine!==void 0?a.combine:THREE.MultiplyOperation;this.reflectivity=a.reflectivity!==void 0?a.reflectivity:1;this.refractionRatio=a.refractionRatio!==void 0?a.refractionRatio:0.98;this.fog=a.fog!==void 0?a.fog:!0;this.shading=a.shading!==void 0?a.shading:THREE.SmoothShading;this.wireframe=a.wireframe!==void 0?a.wireframe:!1;this.wireframeLinewidth=a.wireframeLinewidth!==void 0?a.wireframeLinewidth:1;this.wireframeLinecap=a.wireframeLinecap!==void 0?a.wireframeLinecap:"round";this.wireframeLinejoin=a.wireframeLinejoin!==void 0?a.wireframeLinejoin:"round";this.vertexColors=a.vertexColors!==void 0?a.vertexColors:!1;this.skinning=a.skinning!==void 0?a.skinning:!1;this.morphTargets=a.morphTargets!==void 0?a.morphTargets:!1};THREE.MeshPhongMaterial.prototype=new THREE.Material;THREE.MeshPhongMaterial.prototype.constructor=THREE.MeshPhongMaterial;THREE.MeshDepthMaterial=function(a){THREE.Material.call(this,a);a=a||{};this.shading=a.shading!==void 0?a.shading:THREE.SmoothShading;this.wireframe=a.wireframe!==void 0?a.wireframe:!1;this.wireframeLinewidth=a.wireframeLinewidth!==void 0?a.wireframeLinewidth:1};THREE.MeshDepthMaterial.prototype=new THREE.Material;THREE.MeshDepthMaterial.prototype.constructor=THREE.MeshDepthMaterial;THREE.MeshNormalMaterial=function(a){THREE.Material.call(this,a);a=a||{};this.shading=a.shading?a.shading:THREE.FlatShading;this.wireframe=a.wireframe?a.wireframe:!1;this.wireframeLinewidth=a.wireframeLinewidth?a.wireframeLinewidth:1};THREE.MeshNormalMaterial.prototype=new THREE.Material;THREE.MeshNormalMaterial.prototype.constructor=THREE.MeshNormalMaterial;THREE.MeshFaceMaterial=function(){};THREE.ParticleBasicMaterial=function(a){THREE.Material.call(this,a);a=a||{};this.color=a.color!==void 0?new THREE.Color(a.color):new THREE.Color(16777215);this.map=a.map!==void 0?a.map:null;this.size=a.size!==void 0?a.size:1;this.sizeAttenuation=a.sizeAttenuation!==void 0?a.sizeAttenuation:!0;this.vertexColors=a.vertexColors!==void 0?a.vertexColors:!1;this.fog=a.fog!==void 0?a.fog:!0};THREE.ParticleBasicMaterial.prototype=new THREE.Material;THREE.ParticleBasicMaterial.prototype.constructor=THREE.ParticleBasicMaterial;THREE.ParticleCanvasMaterial=function(a){THREE.Material.call(this,a);a=a||{};this.color=a.color!==void 0?new THREE.Color(a.color):new THREE.Color(16777215);this.program=a.program!==void 0?a.program:function(){}};THREE.ParticleCanvasMaterial.prototype=new THREE.Material;THREE.ParticleCanvasMaterial.prototype.constructor=THREE.ParticleCanvasMaterial;THREE.Texture=function(a,b,c,d,f,e){this.id=THREE.TextureCount++;this.image=a;this.mapping=b!==void 0?b:new THREE.UVMapping;this.wrapS=c!==void 0?c:THREE.ClampToEdgeWrapping;this.wrapT=d!==void 0?d:THREE.ClampToEdgeWrapping;this.magFilter=f!==void 0?f:THREE.LinearFilter;this.minFilter=e!==void 0?e:THREE.LinearMipMapLinearFilter;this.offset=new THREE.Vector2(0,0);this.repeat=new THREE.Vector2(1,1);this.needsUpdate=!1;this.onUpdate=null};THREE.Texture.prototype={constructor:THREE.Texture,clone:function(){var a=new THREE.Texture(this.image,this.mapping,this.wrapS,this.wrapT,this.magFilter,this.minFilter);a.offset.copy(this.offset);a.repeat.copy(this.repeat);return a}};THREE.TextureCount=0;THREE.MultiplyOperation=0;THREE.MixOperation=1;THREE.CubeReflectionMapping=function(){};THREE.CubeRefractionMapping=function(){};THREE.LatitudeReflectionMapping=function(){};THREE.LatitudeRefractionMapping=function(){};THREE.SphericalReflectionMapping=function(){};THREE.SphericalRefractionMapping=function(){};THREE.UVMapping=function(){};THREE.RepeatWrapping=0;THREE.ClampToEdgeWrapping=1;THREE.MirroredRepeatWrapping=2;THREE.NearestFilter=3;THREE.NearestMipMapNearestFilter=4;THREE.NearestMipMapLinearFilter=5;THREE.LinearFilter=6;THREE.LinearMipMapNearestFilter=7;THREE.LinearMipMapLinearFilter=8;THREE.ByteType=9;THREE.UnsignedByteType=10;THREE.ShortType=11;THREE.UnsignedShortType=12;THREE.IntType=13;THREE.UnsignedIntType=14;THREE.FloatType=15;THREE.AlphaFormat=16;THREE.RGBFormat=17;THREE.RGBAFormat=18;THREE.LuminanceFormat=19;THREE.LuminanceAlphaFormat=20;THREE.Particle=function(a){THREE.Object3D.call(this);this.material=a};THREE.Particle.prototype=new THREE.Object3D;THREE.Particle.prototype.constructor=THREE.Particle;THREE.Line=function(a,b,c){THREE.Object3D.call(this);this.geometry=a;this.material=b;this.type=c!==void 0?c:THREE.LineStrip;this.geometry&&(this.geometry.boundingSphere||this.geometry.computeBoundingSphere())};THREE.LineStrip=0;THREE.LinePieces=1;THREE.Line.prototype=new THREE.Object3D;THREE.Line.prototype.constructor=THREE.Line;THREE.Mesh=function(a,b){THREE.Object3D.call(this);this.geometry=a;this.material=b;if(b instanceof Array)console.warn("DEPRECATED: Mesh material can no longer be an Array. Using material at index 0..."),this.material=b[0];if(this.geometry&&(this.geometry.boundingSphere||this.geometry.computeBoundingSphere(),this.boundRadius=a.boundingSphere.radius,this.geometry.morphTargets.length)){this.morphTargetBase=-1;this.morphTargetForcedOrder=[];this.morphTargetInfluences=[];this.morphTargetDictionary={};for(var c=0;c<this.geometry.morphTargets.length;c++)this.morphTargetInfluences.push(0),this.morphTargetDictionary[this.geometry.morphTargets[c].name]=c}};THREE.Mesh.prototype=new THREE.Object3D;THREE.Mesh.prototype.constructor=THREE.Mesh;THREE.Mesh.prototype.supr=THREE.Object3D.prototype;THREE.Mesh.prototype.getMorphTargetIndexByName=function(a){if(this.morphTargetDictionary[a]!==void 0)return this.morphTargetDictionary[a];console.log("THREE.Mesh.getMorphTargetIndexByName: morph target "+a+" does not exist. Returning 0.");return 0};THREE.Bone=function(a){THREE.Object3D.call(this);this.skin=a;this.skinMatrix=new THREE.Matrix4};THREE.Bone.prototype=new THREE.Object3D;THREE.Bone.prototype.constructor=THREE.Bone;THREE.Bone.prototype.supr=THREE.Object3D.prototype;THREE.Bone.prototype.update=function(a,b){this.matrixAutoUpdate&&(b|=this.updateMatrix());if(b||this.matrixWorldNeedsUpdate)a?this.skinMatrix.multiply(a,this.matrix):this.skinMatrix.copy(this.matrix),this.matrixWorldNeedsUpdate=!1,b=!0;var c,d=this.children.length;for(c=0;c<d;c++)this.children[c].update(this.skinMatrix,b)};THREE.Sprite=function(a){THREE.Object3D.call(this);this.color=a.color!==void 0?new THREE.Color(a.color):new THREE.Color(16777215);this.map=a.map instanceof THREE.Texture?a.map:THREE.ImageUtils.loadTexture(a.map);this.blending=a.blending!==void 0?a.blending:THREE.NormalBlending;this.useScreenCoordinates=a.useScreenCoordinates!==void 0?a.useScreenCoordinates:!0;this.mergeWith3D=a.mergeWith3D!==void 0?a.mergeWith3D:!this.useScreenCoordinates;this.affectedByDistance=a.affectedByDistance!==void 0?a.affectedByDistance:!this.useScreenCoordinates;this.scaleByViewport=a.scaleByViewport!==void 0?a.scaleByViewport:!this.affectedByDistance;this.alignment=a.alignment instanceof THREE.Vector2?a.alignment:THREE.SpriteAlignment.center;this.rotation3d=this.rotation;this.rotation=0;this.opacity=1;this.uvOffset=new THREE.Vector2(0,0);this.uvScale=new THREE.Vector2(1,1)};THREE.Sprite.prototype=new THREE.Object3D;THREE.Sprite.prototype.constructor=THREE.Sprite;THREE.Sprite.prototype.updateMatrix=function(){this.matrix.setPosition(this.position);this.rotation3d.set(0,0,this.rotation);this.matrix.setRotationFromEuler(this.rotation3d);if(this.scale.x!==1||this.scale.y!==1)this.matrix.scale(this.scale),this.boundRadiusScale=Math.max(this.scale.x,this.scale.y);this.matrixWorldNeedsUpdate=!0};THREE.SpriteAlignment={};THREE.SpriteAlignment.topLeft=new THREE.Vector2(1,-1);THREE.SpriteAlignment.topCenter=new THREE.Vector2(0,-1);THREE.SpriteAlignment.topRight=new THREE.Vector2(-1,-1);THREE.SpriteAlignment.centerLeft=new THREE.Vector2(1,0);THREE.SpriteAlignment.center=new THREE.Vector2(0,0);THREE.SpriteAlignment.centerRight=new THREE.Vector2(-1,0);THREE.SpriteAlignment.bottomLeft=new THREE.Vector2(1,1);THREE.SpriteAlignment.bottomCenter=new THREE.Vector2(0,1);THREE.SpriteAlignment.bottomRight=new THREE.Vector2(-1,1);THREE.Scene=function(){THREE.Object3D.call(this);this.overrideMaterial=this.fog=null;this.matrixAutoUpdate=!1;this.objects=[];this.lights=[];this.__objectsAdded=[];this.__objectsRemoved=[]};THREE.Scene.prototype=new THREE.Object3D;THREE.Scene.prototype.constructor=THREE.Scene;THREE.Scene.prototype.addObject=function(a){if(a instanceof THREE.Light)this.lights.indexOf(a)===-1&&this.lights.push(a);else if(!(a instanceof THREE.Camera||a instanceof THREE.Bone)&&this.objects.indexOf(a)===-1){this.objects.push(a);this.__objectsAdded.push(a);var b=this.__objectsRemoved.indexOf(a);b!==-1&&this.__objectsRemoved.splice(b,1)}for(b=0;b<a.children.length;b++)this.addObject(a.children[b])};THREE.Scene.prototype.removeObject=function(a){if(a instanceof THREE.Light){var b=this.lights.indexOf(a);b!==-1&&this.lights.splice(b,1)}else a instanceof THREE.Camera||(b=this.objects.indexOf(a),b!==-1&&(this.objects.splice(b,1),this.__objectsRemoved.push(a),b=this.__objectsAdded.indexOf(a),b!==-1&&this.__objectsAdded.splice(b,1)));for(b=0;b<a.children.length;b++)this.removeObject(a.children[b])};THREE.CanvasRenderer=function(a){function b(a){if(C!=a)k.globalAlpha=C=a}function c(a){if(Q!=a){switch(a){case THREE.NormalBlending:k.globalCompositeOperation="source-over";break;case THREE.AdditiveBlending:k.globalCompositeOperation="lighter";break;case THREE.SubtractiveBlending:k.globalCompositeOperation="darker"}Q=a}}function d(a){if(O!=a)k.strokeStyle=O=a}function f(a){if(w!=a)k.fillStyle=w=a}var e=this,g,h,m,l=new THREE.Projector,a=a||{},j=a.canvas!==void 0?a.canvas:document.createElement("canvas"),i,n,o,p,k=j.getContext("2d"),s=new THREE.Color(0),K=0,C=1,Q=0,O=null,w=null,F=null,z=null,D=null,u,r,E,N,W=new THREE.RenderableVertex,da=new THREE.RenderableVertex,G,H,I,Y,L,B,S,v,R,P,V,J,t=new THREE.Color,A=new THREE.Color,x=new THREE.Color,y=new THREE.Color,M=new THREE.Color,la=[],fa=[],ga,ha,ea,aa,Ba,Ca,Da,Ea,Fa,Ga,ma=new THREE.Rectangle,Z=new THREE.Rectangle,X=new THREE.Rectangle,ya=!1,$=new THREE.Color,ta=new THREE.Color,ua=new THREE.Color,T=new THREE.Vector3,qa,ra,za,ba,sa,va,a=16;qa=document.createElement("canvas");qa.width=qa.height=2;ra=qa.getContext("2d");ra.fillStyle="rgba(0,0,0,1)";ra.fillRect(0,0,2,2);za=ra.getImageData(0,0,2,2);ba=za.data;sa=document.createElement("canvas");sa.width=sa.height=a;va=sa.getContext("2d");va.translate(-a/ 2, -a /2);va.scale(a,a);a--;this.domElement=j;this.sortElements=this.sortObjects=this.autoClear=!0;this.info={render:{vertices:0,faces:0}};this.setSize=function(a,b){i=a;n=b;o=Math.floor(i/2);p=Math.floor(n/2);j.width=i;j.height=n;ma.set(-o,-p,o,p);Z.set(-o,-p,o,p);C=1;Q=0;D=z=F=w=O=null};this.setClearColor=function(a,b){s.copy(a);K=b;Z.set(-o,-p,o,p)};this.setClearColorHex=function(a,b){s.setHex(a);K=b;Z.set(-o,-p,o,p)};this.clear=function(){k.setTransform(1,0,0,-1,o,p);Z.isEmpty()||(Z.minSelf(ma),Z.inflate(2),K<1&&k.clearRect(Math.floor(Z.getX()),Math.floor(Z.getY()),Math.floor(Z.getWidth()),Math.floor(Z.getHeight())),K>0&&(c(THREE.NormalBlending),b(1),f("rgba("+Math.floor(s.r*255)+","+Math.floor(s.g*255)+","+Math.floor(s.b*255)+","+K+")"),k.fillRect(Math.floor(Z.getX()),Math.floor(Z.getY()),Math.floor(Z.getWidth()),Math.floor(Z.getHeight()))),Z.empty())};this.render=function(a,j){function i(a){var b,c,d,e;$.setRGB(0,0,0);ta.setRGB(0,0,0);ua.setRGB(0,0,0);b=0;for(c=a.length;b<c;b++)d=a[b],e=d.color,d instanceof THREE.AmbientLight?($.r+=e.r,$.g+=e.g,$.b+=e.b):d instanceof THREE.DirectionalLight?(ta.r+=e.r,ta.g+=e.g,ta.b+=e.b):d instanceof THREE.PointLight&&(ua.r+=e.r,ua.g+=e.g,ua.b+=e.b)}function n(a,b,c,d){var e,f,g,h,k,j;e=0;for(f=a.length;e<f;e++)g=a[e],h=g.color,g instanceof THREE.DirectionalLight?(k=g.matrixWorld.getPosition(),j=c.dot(k),j<=0||(j*=g.intensity,d.r+=h.r*j,d.g+=h.g*j,d.b+=h.b*j)):g instanceof THREE.PointLight&&(k=g.matrixWorld.getPosition(),j=c.dot(T.sub(k,b).normalize()),j<=0||(j*=g.distance==0?1:1-Math.min(b.distanceTo(k)/g.distance,1),j!=0&&(j*=g.intensity,d.r+=h.r*j,d.g+=h.g*j,d.b+=h.b*j)))}function s(a,e,g){b(g.opacity);c(g.blending);var h,j,i,m,q,n;if(g instanceof THREE.ParticleBasicMaterial){if(g.map)m=g.map.image,q=m.width>>1,n=m.height>>1,g=e.scale.x*o,i=e.scale.y*p,h=g*q,j=i*n,X.set(a.x-h,a.y-j,a.x+h,a.y+j),ma.intersects(X)&&(k.save(),k.translate(a.x,a.y),k.rotate(-e.rotation),k.scale(g,-i),k.translate(-q,-n),k.drawImage(m,0,0),k.restore())}else g instanceof THREE.ParticleCanvasMaterial&&(h=e.scale.x*o,j=e.scale.y*p,X.set(a.x-h,a.y-j,a.x+h,a.y+j),ma.intersects(X)&&(d(g.color.getContextStyle()),f(g.color.getContextStyle()),k.save(),k.translate(a.x,a.y),k.rotate(-e.rotation),k.scale(h,j),g.program(k),k.restore()))}function w(a,e,f,g){b(g.opacity);c(g.blending);k.beginPath();k.moveTo(a.positionScreen.x,a.positionScreen.y);k.lineTo(e.positionScreen.x,e.positionScreen.y);k.closePath();if(g instanceof THREE.LineBasicMaterial){a=g.linewidth;if(F!=a)k.lineWidth=F=a;a=g.linecap;if(z!=a)k.lineCap=z=a;a=g.linejoin;if(D!=a)k.lineJoin=D=a;d(g.color.getContextStyle());k.stroke();X.inflate(g.linewidth*2)}}function C(a,d,f,g,h,k,i,q){e.info.render.vertices+=3;e.info.render.faces++;b(q.opacity);c(q.blending);G=a.positionScreen.x;H=a.positionScreen.y;I=d.positionScreen.x;Y=d.positionScreen.y;L=f.positionScreen.x;B=f.positionScreen.y;K(G,H,I,Y,L,B);if(q instanceof THREE.MeshBasicMaterial)if(q.map)q.map.mapping instanceof THREE.UVMapping&&(aa=i.uvs[0],Aa(G,H,I,Y,L,B,aa[g].u,aa[g].v,aa[h].u,aa[h].v,aa[k].u,aa[k].v,q.map));else if(q.envMap){if(q.envMap.mapping instanceof THREE.SphericalReflectionMapping)a=j.matrixWorldInverse,T.copy(i.vertexNormalsWorld[g]),Ba=(T.x*a.n11+T.y*a.n12+T.z*a.n13)*0.5+0.5,Ca=-(T.x*a.n21+T.y*a.n22+T.z*a.n23)*0.5+0.5,T.copy(i.vertexNormalsWorld[h]),Da=(T.x*a.n11+T.y*a.n12+T.z*a.n13)*0.5+0.5,Ea=-(T.x*a.n21+T.y*a.n22+T.z*a.n23)*0.5+0.5,T.copy(i.vertexNormalsWorld[k]),Fa=(T.x*a.n11+T.y*a.n12+T.z*a.n13)*0.5+0.5,Ga=-(T.x*a.n21+T.y*a.n22+T.z*a.n23)*0.5+0.5,Aa(G,H,I,Y,L,B,Ba,Ca,Da,Ea,Fa,Ga,q.envMap)}else q.wireframe?ja(q.color,q.wireframeLinewidth,q.wireframeLinecap,q.wireframeLinejoin):ia(q.color);else if(q instanceof THREE.MeshLambertMaterial)q.map&&!q.wireframe&&(q.map.mapping instanceof THREE.UVMapping&&(aa=i.uvs[0],Aa(G,H,I,Y,L,B,aa[g].u,aa[g].v,aa[h].u,aa[h].v,aa[k].u,aa[k].v,q.map)),c(THREE.SubtractiveBlending)),ya?!q.wireframe&&q.shading==THREE.SmoothShading&&i.vertexNormalsWorld.length==3?(A.r=x.r=y.r=$.r,A.g=x.g=y.g=$.g,A.b=x.b=y.b=$.b,n(m,i.v1.positionWorld,i.vertexNormalsWorld[0],A),n(m,i.v2.positionWorld,i.vertexNormalsWorld[1],x),n(m,i.v3.positionWorld,i.vertexNormalsWorld[2],y),A.r=Math.max(0,Math.min(q.color.r*A.r,1)),A.g=Math.max(0,Math.min(q.color.g*A.g,1)),A.b=Math.max(0,Math.min(q.color.b*A.b,1)),x.r=Math.max(0,Math.min(q.color.r*x.r,1)),x.g=Math.max(0,Math.min(q.color.g*x.g,1)),x.b=Math.max(0,Math.min(q.color.b*x.b,1)),y.r=Math.max(0,Math.min(q.color.r*y.r,1)),y.g=Math.max(0,Math.min(q.color.g*y.g,1)),y.b=Math.max(0,Math.min(q.color.b*y.b,1)),M.r=(x.r+y.r)*0.5,M.g=(x.g+y.g)*0.5,M.b=(x.b+y.b)*0.5,ea=wa(A,x,y,M),oa(G,H,I,Y,L,B,0,0,1,0,0,1,ea)):(t.r=$.r,t.g=$.g,t.b=$.b,n(m,i.centroidWorld,i.normalWorld,t),t.r=Math.max(0,Math.min(q.color.r*t.r,1)),t.g=Math.max(0,Math.min(q.color.g*t.g,1)),t.b=Math.max(0,Math.min(q.color.b*t.b,1)),q.wireframe?ja(t,q.wireframeLinewidth,q.wireframeLinecap,q.wireframeLinejoin):ia(t)):q.wireframe?ja(q.color,q.wireframeLinewidth,q.wireframeLinecap,q.wireframeLinejoin):ia(q.color);else if(q instanceof THREE.MeshDepthMaterial)ga=j.near,ha=j.far,A.r=A.g=A.b=1-na(a.positionScreen.z,ga,ha),x.r=x.g=x.b=1-na(d.positionScreen.z,ga,ha),y.r=y.g=y.b=1-na(f.positionScreen.z,ga,ha),M.r=(x.r+y.r)*0.5,M.g=(x.g+y.g)*0.5,M.b=(x.b+y.b)*0.5,ea=wa(A,x,y,M),oa(G,H,I,Y,L,B,0,0,1,0,0,1,ea);else if(q instanceof THREE.MeshNormalMaterial)t.r=pa(i.normalWorld.x),t.g=pa(i.normalWorld.y),t.b=pa(i.normalWorld.z),q.wireframe?ja(t,q.wireframeLinewidth,q.wireframeLinecap,q.wireframeLinejoin):ia(t)}function Q(a,d,f,g,h,k,i,q,o){e.info.render.vertices+=4;e.info.render.faces++;b(q.opacity);c(q.blending);if(q.map||q.envMap)C(a,d,g,0,1,3,i,q,o),C(h,f,k,1,2,3,i,q,o);else if(G=a.positionScreen.x,H=a.positionScreen.y,I=d.positionScreen.x,Y=d.positionScreen.y,L=f.positionScreen.x,B=f.positionScreen.y,S=g.positionScreen.x,v=g.positionScreen.y,R=h.positionScreen.x,P=h.positionScreen.y,V=k.positionScreen.x,J=k.positionScreen.y,q instanceof THREE.MeshBasicMaterial)O(G,H,I,Y,L,B,S,v),q.wireframe?ja(q.color,q.wireframeLinewidth,q.wireframeLinecap,q.wireframeLinejoin):ia(q.color);else if(q instanceof THREE.MeshLambertMaterial)ya?!q.wireframe&&q.shading==THREE.SmoothShading&&i.vertexNormalsWorld.length==4?(A.r=x.r=y.r=M.r=$.r,A.g=x.g=y.g=M.g=$.g,A.b=x.b=y.b=M.b=$.b,n(m,i.v1.positionWorld,i.vertexNormalsWorld[0],A),n(m,i.v2.positionWorld,i.vertexNormalsWorld[1],x),n(m,i.v4.positionWorld,i.vertexNormalsWorld[3],y),n(m,i.v3.positionWorld,i.vertexNormalsWorld[2],M),A.r=Math.max(0,Math.min(q.color.r*A.r,1)),A.g=Math.max(0,Math.min(q.color.g*A.g,1)),A.b=Math.max(0,Math.min(q.color.b*A.b,1)),x.r=Math.max(0,Math.min(q.color.r*x.r,1)),x.g=Math.max(0,Math.min(q.color.g*x.g,1)),x.b=Math.max(0,Math.min(q.color.b*x.b,1)),y.r=Math.max(0,Math.min(q.color.r*y.r,1)),y.g=Math.max(0,Math.min(q.color.g*y.g,1)),y.b=Math.max(0,Math.min(q.color.b*y.b,1)),M.r=Math.max(0,Math.min(q.color.r*M.r,1)),M.g=Math.max(0,Math.min(q.color.g*M.g,1)),M.b=Math.max(0,Math.min(q.color.b*M.b,1)),ea=wa(A,x,y,M),K(G,H,I,Y,S,v),oa(G,H,I,Y,S,v,0,0,1,0,0,1,ea),K(R,P,L,B,V,J),oa(R,P,L,B,V,J,1,0,1,1,0,1,ea)):(t.r=$.r,t.g=$.g,t.b=$.b,n(m,i.centroidWorld,i.normalWorld,t),t.r=Math.max(0,Math.min(q.color.r*t.r,1)),t.g=Math.max(0,Math.min(q.color.g*t.g,1)),t.b=Math.max(0,Math.min(q.color.b*t.b,1)),O(G,H,I,Y,L,B,S,v),q.wireframe?ja(t,q.wireframeLinewidth,q.wireframeLinecap,q.wireframeLinejoin):ia(t)):(O(G,H,I,Y,L,B,S,v),q.wireframe?ja(q.color,q.wireframeLinewidth,q.wireframeLinecap,q.wireframeLinejoin):ia(q.color));else if(q instanceof THREE.MeshNormalMaterial)t.r=pa(i.normalWorld.x),t.g=pa(i.normalWorld.y),t.b=pa(i.normalWorld.z),O(G,H,I,Y,L,B,S,v),q.wireframe?ja(t,q.wireframeLinewidth,q.wireframeLinecap,q.wireframeLinejoin):ia(t);else if(q instanceof THREE.MeshDepthMaterial)ga=j.near,ha=j.far,A.r=A.g=A.b=1-na(a.positionScreen.z,ga,ha),x.r=x.g=x.b=1-na(d.positionScreen.z,ga,ha),y.r=y.g=y.b=1-na(g.positionScreen.z,ga,ha),M.r=M.g=M.b=1-na(f.positionScreen.z,ga,ha),ea=wa(A,x,y,M),K(G,H,I,Y,S,v),oa(G,H,I,Y,S,v,0,0,1,0,0,1,ea),K(R,P,L,B,V,J),oa(R,P,L,B,V,J,1,0,1,1,0,1,ea)}function K(a,b,c,d,e,f){k.beginPath();k.moveTo(a,b);k.lineTo(c,d);k.lineTo(e,f);k.lineTo(a,b);k.closePath()}function O(a,b,c,d,e,f,g,h){k.beginPath();k.moveTo(a,b);k.lineTo(c,d);k.lineTo(e,f);k.lineTo(g,h);k.lineTo(a,b);k.closePath()}function ja(a,b,c,e){if(F!=b)k.lineWidth=F=b;if(z!=c)k.lineCap=z=c;if(D!=e)k.lineJoin=D=e;d(a.getContextStyle());k.stroke();X.inflate(b*2)}function ia(a){f(a.getContextStyle());k.fill()}function Aa(a,b,c,d,e,g,h,i,j,m,o,n,l){if(l.image.width!=0){if(l.needsUpdate==!0||la[l.id]==void 0){var p=l.wrapS==THREE.RepeatWrapping,r=l.wrapT==THREE.RepeatWrapping;la[l.id]=k.createPattern(l.image,p&&r?"repeat":p&&!r?"repeat-x":!p&&r?"repeat-y":"no-repeat");l.needsUpdate=!1}f(la[l.id]);var p=l.offset.x/ l.repeat.x, r = l.offset.y /l.repeat.y,s=l.image.width*l.repeat.x,u=l.image.height*l.repeat.y,h=(h+p)*s,i=(i+r)*u,j=(j+p)*s,m=(m+r)*u,o=(o+p)*s,n=(n+r)*u;c-=a;d-=b;e-=a;g-=b;j-=h;m-=i;o-=h;n-=i;p=j*n-o*m;if(p==0){if(fa[l.id]==void 0)b=document.createElement("canvas"),b.width=l.image.width,b.height=l.image.height,a=b.getContext("2d"),a.drawImage(l.image,0,0),fa[l.id]=a.getImageData(0,0,l.image.width,l.image.height).data,delete b;b=fa[l.id];h=(Math.floor(h)+Math.floor(i)*l.image.width)*4;t.setRGB(b[h]/ 255, b[h + 1] /255,b[h+2]/255);ia(t)}else p=1/p,l=(n*c-m*e)*p,m=(n*d-m*g)*p,c=(j*e-o*c)*p,d=(j*g-o*d)*p,a=a-l*h-c*i,h=b-m*h-d*i,k.save(),k.transform(l,m,c,d,a,h),k.fill(),k.restore()}}function oa(a,b,c,d,e,f,g,h,i,j,l,m,o){var n,p;n=o.width-1;p=o.height-1;g*=n;h*=p;i*=n;j*=p;l*=n;m*=p;c-=a;d-=b;e-=a;f-=b;i-=g;j-=h;l-=g;m-=h;p=1/(i*m-l*j);n=(m*c-j*e)*p;j=(m*d-j*f)*p;c=(i*e-l*c)*p;d=(i*f-l*d)*p;a=a-n*g-c*h;b=b-j*g-d*h;k.save();k.transform(n,j,c,d,a,b);k.clip();k.drawImage(o,0,0);k.restore()}function wa(a,b,c,d){var e=~~(a.r*255),f=~~(a.g*255),a=~~(a.b*255),g=~~(b.r*255),h=~~(b.g*255),b=~~(b.b*255),i=~~(c.r*255),j=~~(c.g*255),c=~~(c.b*255),k=~~(d.r*255),l=~~(d.g*255),d=~~(d.b*255);ba[0]=e<0?0:e>255?255:e;ba[1]=f<0?0:f>255?255:f;ba[2]=a<0?0:a>255?255:a;ba[4]=g<0?0:g>255?255:g;ba[5]=h<0?0:h>255?255:h;ba[6]=b<0?0:b>255?255:b;ba[8]=i<0?0:i>255?255:i;ba[9]=j<0?0:j>255?255:j;ba[10]=c<0?0:c>255?255:c;ba[12]=k<0?0:k>255?255:k;ba[13]=l<0?0:l>255?255:l;ba[14]=d<0?0:d>255?255:d;ra.putImageData(za,0,0);va.drawImage(qa,0,0);return sa}function na(a,b,c){a=(a-b)/(c-b);return a*a*(3-2*a)}function pa(a){a=(a+1)*0.5;return a<0?0:a>1?1:a}function ka(a,b){var c=b.x-a.x,d=b.y-a.y,e=c*c+d*d;e!=0&&(e=1/Math.sqrt(e),c*=e,d*=e,b.x+=c,b.y+=d,a.x-=c,a.y-=d)}var xa,Ha,U,ca;this.autoClear?this.clear():k.setTransform(1,0,0,-1,o,p);e.info.render.vertices=0;e.info.render.faces=0;g=l.projectScene(a,j,this.sortElements);h=g.elements;m=g.lights;(ya=m.length>0)&&i(m);xa=0;for(Ha=h.length;xa<Ha;xa++)if(U=h[xa],ca=U.material,ca=ca instanceof THREE.MeshFaceMaterial?U.faceMaterial:ca,!(ca==null||ca.opacity==0)){X.empty();if(U instanceof THREE.RenderableParticle)u=U,u.x*=o,u.y*=p,s(u,U,ca,a);else if(U instanceof THREE.RenderableLine)u=U.v1,r=U.v2,u.positionScreen.x*=o,u.positionScreen.y*=p,r.positionScreen.x*=o,r.positionScreen.y*=p,X.addPoint(u.positionScreen.x,u.positionScreen.y),X.addPoint(r.positionScreen.x,r.positionScreen.y),ma.intersects(X)&&w(u,r,U,ca,a);else if(U instanceof THREE.RenderableFace3)u=U.v1,r=U.v2,E=U.v3,u.positionScreen.x*=o,u.positionScreen.y*=p,r.positionScreen.x*=o,r.positionScreen.y*=p,E.positionScreen.x*=o,E.positionScreen.y*=p,ca.overdraw&&(ka(u.positionScreen,r.positionScreen),ka(r.positionScreen,E.positionScreen),ka(E.positionScreen,u.positionScreen)),X.add3Points(u.positionScreen.x,u.positionScreen.y,r.positionScreen.x,r.positionScreen.y,E.positionScreen.x,E.positionScreen.y),ma.intersects(X)&&C(u,r,E,0,1,2,U,ca,a);else if(U instanceof THREE.RenderableFace4)u=U.v1,r=U.v2,E=U.v3,N=U.v4,u.positionScreen.x*=o,u.positionScreen.y*=p,r.positionScreen.x*=o,r.positionScreen.y*=p,E.positionScreen.x*=o,E.positionScreen.y*=p,N.positionScreen.x*=o,N.positionScreen.y*=p,W.positionScreen.copy(r.positionScreen),da.positionScreen.copy(N.positionScreen),ca.overdraw&&(ka(u.positionScreen,r.positionScreen),ka(r.positionScreen,N.positionScreen),ka(N.positionScreen,u.positionScreen),ka(E.positionScreen,W.positionScreen),ka(E.positionScreen,da.positionScreen)),X.addPoint(u.positionScreen.x,u.positionScreen.y),X.addPoint(r.positionScreen.x,r.positionScreen.y),X.addPoint(E.positionScreen.x,E.positionScreen.y),X.addPoint(N.positionScreen.x,N.positionScreen.y),ma.intersects(X)&&Q(u,r,E,N,W,da,U,ca,a);Z.addRectangle(X)}k.setTransform(1,0,0,1,0,0)}};THREE.RenderableVertex=function(){this.positionWorld=new THREE.Vector3;this.positionScreen=new THREE.Vector4;this.visible=!0};THREE.RenderableVertex.prototype.copy=function(a){this.positionWorld.copy(a.positionWorld);this.positionScreen.copy(a.positionScreen)};THREE.RenderableFace3=function(){this.v1=new THREE.RenderableVertex;this.v2=new THREE.RenderableVertex;this.v3=new THREE.RenderableVertex;this.centroidWorld=new THREE.Vector3;this.centroidScreen=new THREE.Vector3;this.normalWorld=new THREE.Vector3;this.vertexNormalsWorld=[new THREE.Vector3,new THREE.Vector3,new THREE.Vector3];this.faceMaterial=this.material=null;this.uvs=[[]];this.z=null};THREE.RenderableFace4=function(){this.v1=new THREE.RenderableVertex;this.v2=new THREE.RenderableVertex;this.v3=new THREE.RenderableVertex;this.v4=new THREE.RenderableVertex;this.centroidWorld=new THREE.Vector3;this.centroidScreen=new THREE.Vector3;this.normalWorld=new THREE.Vector3;this.vertexNormalsWorld=[new THREE.Vector3,new THREE.Vector3,new THREE.Vector3,new THREE.Vector3];this.faceMaterial=this.material=null;this.uvs=[[]];this.z=null};THREE.RenderableObject=function(){this.z=this.object=null};THREE.RenderableParticle=function(){this.rotation=this.z=this.y=this.x=null;this.scale=new THREE.Vector2;this.material=null};THREE.RenderableLine=function(){this.z=null;this.v1=new THREE.RenderableVertex;this.v2=new THREE.RenderableVertex;this.material=null};
       
       
       
    function randomRange(t,i){return Math.random()*(i-t)+t}Particle3D=function(t){THREE.Particle.call(this,t),this.velocity=new THREE.Vector3(0,-2,0),this.velocity.rotateX(randomRange(-45,45)),this.velocity.rotateY(randomRange(0,360)),this.gravity=new THREE.Vector3(0,0,0),this.drag=1},Particle3D.prototype=new THREE.Particle,Particle3D.prototype.constructor=Particle3D,Particle3D.prototype.updatePhysics=function(){this.velocity.multiplyScalar(this.drag),this.velocity.addSelf(this.gravity),this.position.addSelf(this.velocity)};var TO_RADIANS=Math.PI/180;THREE.Vector3.prototype.rotateY=function(t){cosRY=Math.cos(t*TO_RADIANS),sinRY=Math.sin(t*TO_RADIANS);var i=this.z,o=this.x;this.x=o*cosRY+i*sinRY,this.z=o*-sinRY+i*cosRY},THREE.Vector3.prototype.rotateX=function(t){cosRY=Math.cos(t*TO_RADIANS),sinRY=Math.sin(t*TO_RADIANS);var i=this.z,o=this.y;this.y=o*cosRY+i*sinRY,this.z=o*-sinRY+i*cosRY},THREE.Vector3.prototype.rotateZ=function(t){cosRY=Math.cos(t*TO_RADIANS),sinRY=Math.sin(t*TO_RADIANS);var i=this.x,o=this.y;this.y=o*cosRY+i*sinRY,this.x=o*-sinRY+i*cosRY};
       
       
    $(function(){var container=document.querySelector(".snow-container");if(/MSIE 6|MSIE 7|MSIE 8/.test(navigator.userAgent)){return}else{if(/MSIE 9|MSIE 10/.test(navigator.userAgent)){$(container).css("height",$(window).height()).bind("click",function(){$(this).remove()})}}var containerWidth=$(container).width();var containerHeight=$(container).height();var particle;var camera;var scene;var renderer;var mouseX=0;var mouseY=0;var windowHalfX=window.innerWidth/2;var windowHalfY=window.innerHeight/2;var particles=[];var particleImage=new Image();particleImage.src="http://img14.360buyimg.com/cms/jfs/t595/323/625407732/3275/e86993e8/5476ba25Ne75aa640.png";var snowNum=500;function init(){camera=new THREE.PerspectiveCamera(75,containerWidth/containerHeight,1,10000);camera.position.z=1000;scene=new THREE.Scene();scene.add(camera);renderer=new THREE.CanvasRenderer();renderer.setSize(containerWidth,containerHeight);var material=new THREE.ParticleBasicMaterial({map:new THREE.Texture(particleImage)});for(var i=0;i<snowNum;i++){particle=new Particle3D(material);particle.position.x=Math.random()*2000-1000;particle.position.y=Math.random()*2000-1000;particle.position.z=Math.random()*2000-1000;particle.scale.x=particle.scale.y=1;scene.add(particle);particles.push(particle)}container.appendChild(renderer.domElement);document.addEventListener("mousemove",onDocumentMouseMove,false);document.addEventListener("touchstart",onDocumentTouchStart,false);document.addEventListener("touchmove",onDocumentTouchMove,false);setInterval(loop,1000/40)}function onDocumentMouseMove(event){mouseX=event.clientX-windowHalfX;mouseY=event.clientY-windowHalfY}function onDocumentTouchStart(event){if(event.touches.length==1){event.preventDefault();mouseX=event.touches[0].pageX-windowHalfX;mouseY=event.touches[0].pageY-windowHalfY}}function onDocumentTouchMove(event){if(event.touches.length==1){event.preventDefault();mouseX=event.touches[0].pageX-windowHalfX;mouseY=event.touches[0].pageY-windowHalfY}}function loop(){for(var i=0;i<particles.length;i++){var particle=particles[i];particle.updatePhysics();with(particle.position){if(y<-1000){y+=2000}if(x>1000){x-=2000}else{if(x<-1000){x+=2000}}if(z>1000){z-=2000}else{if(z<-1000){z+=2000}}}}camera.position.x+=(mouseX-camera.position.x)*0.005;camera.position.y+=(-mouseY-camera.position.y)*0.005;camera.lookAt(scene.position);renderer.render(scene,camera)}init()});
    
  2. themes/icarus/layout/layout.ejs的body标签内添加代码:

    <!-- 雪花特效 -->
        <script type="text/javascript" src="/js/src/snow.js"></script>
    

    若是3D飘雪,则是添加:

     <!--3D飘雪花特效 整理by yaxi.net-->
     <script type="text/javascript" src="/js/src/snow.js"></script>
     <style type="text/css">
         .snow-container{
         position:fixed;
         top:0;left:0;
         width:100%;
         height:100%;
         pointer-events:none;
         z-index:100001;
         }
     </style>
     <div class="snow-container"></div>
    
  3. 若没效果,请确认网页是否已载入JQurey,如果没有请在下雪代码之前引入JQ即可:

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
       
    

4.3 鼠标点击特效

  • 样式1:鼠标点击爱心效果

    themes/icarus/sourse/js/src目录下新建love.js文件,复制粘贴以下代码:

    !function(e,t,a){
        function n(){
            c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
            o(),
            r()
        }
        function r(){
            for(var e=0;e<d.length;e++)
                d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");
            requestAnimationFrame(r)
        }
        function o(){
            var t="function"==typeof e.onclick&&e.onclick;
            e.onclick=function(e){
                t&&t(),i(e)
            }
        }function i(e){
                var a=t.createElement("div");
                a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)
        }
        function c(e){
            var a=t.createElement("style");a.type="text/css";
            try{
                a.appendChild(t.createTextNode(e))
            }
            catch(t){
                a.styleSheet.cssText=e
            }
            t.getElementsByTagName("head")[0].appendChild(a)
        }
        function s(){
            return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        }
        var d=[];
        e.requestAnimationFrame=function(){
            return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){
                setTimeout(e,1e3/60)
            }
        }(),
        n()
    }
    (window,document);
    

    themes/icarus/layout/layout.ejs中的<!DOCTYPE html>下的一行添加:

    <!DOCTYPE html>
    <script src="/js/src/love.js"></script>       # 
    
  • 样式2:鼠标点击显示字体效果

    themes/icarus/sourse/js/src目录下新建click_show_text.js文件,复制粘贴以下代码:

    var a_idx = 0;
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
            var a = new Array
            ("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
            var $i = $("<span/>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
            y = e.pageY;
            $i.css({
                "z-index": 5,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "#FF0000"
            });
            $("body").append($i);
            $i.animate({
                "top": y - 180,
                "opacity": 0
            },
              3000,
              function() {
                  $i.remove();
              });
        });
        setTimeout('delay()', 2000);
    });
      
    function delay() {
        $(".buryit").removeAttr("onclick");
    }
    

    文字可自由替换。然后在themes/icarus/layout/layout.ejs末尾添加以下代码:

    <!--单击显示文字-->
    <script type="text/javascript" src="/js/src/click_show_text.js"></script>
    
  • 样式3:添加彩色滚动变换字体

    在你想要添加彩色滚动变换字体的地方写入以下代码即可,其中文字可自行更改:

    <div id="binft"></div>
      <script>
        var binft = function (r) {
          function t() {
            return b[Math.floor(Math.random() * b.length)]
          }  
          function e() {
            return String.fromCharCode(94 * Math.random() + 33)
          }
          function n(r) {
            for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
              var l = document.createElement("span");
              l.textContent = e(), l.style.color = t(), n.appendChild(l)
            }
            return n
          }
          function i() {
            var t = o[c.skillI];
            c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
          }
          var l = "",
          o = ["青青陵上柏,磊磊涧中石。", "人生天地间,忽如远行客。","斗酒相娱乐,聊厚不为薄。", "驱车策驽马,游戏宛与洛。","洛中何郁郁,冠带自相索。","长衢罗夹巷,王侯多第宅。","两宫遥相望,双阙百余尺。","极宴娱心意,戚戚何所迫?"].map(function (r) {
          return r + ""
          }),
          a = 2,
          g = 1,
          s = 5,
          d = 75,
          b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
          c = {
            text: "",
            prefixP: -s,
            skillI: 0,
            skillP: 0,
            direction: "forward",
            delay: a,
            step: g
          };
          i()
          };
          binft(document.getElementById('binft'));
      </script>
    

4.4 添加背景音乐

打开网页版网易云音乐,选择你准备添加的背景音乐,点击生成外链播放器,前提是要有版权,不然是无法生成外链播放器的,复制底下的HTML代码 。

然后将此代码放到你想要放的地方,比如放在博客的左侧,则打开 \themes\hexo-theme-spfk\layout_partial\left-col.ejs 文件,将复制的HTML代码粘贴进去,再进行适当的位置设置让播放器更美观,其中 auto=1 表示打开网页自动播放音乐,auto=0 表示关闭自动播放音乐。

这种网易云音乐外链的方式有很多局限性,因此推荐使用aplayer,GitHub地址为:https://github.com/MoePlayer/APlayer ,参考教程:《hexo上的aplayer应用》

4.5 添加文档目录

(未实现)

前期准备:

  1. 查看主题配置文件

    路径:themes/icarus/_config.yml,个性化定制主题。

    • 查看_config.yml,得知category(分类)属于sidebar(侧边栏)内的一个widget
  2. 查看网站的HTML页面结构文件

    使用ejs语法定义HTML的模板,路径:themes/icarus/layout/layout.ejs

    EJS(嵌入式JavaScript模板引擎),是一套简单的模板语言,利用普通的JavaScript代码生成HTML页面。语法参阅EJS中文文档ejs基本语法理解和运用

    • layout.ejs(<%- _partial('common/widget', { position: 'left' }) %>)调用widget.ejs文件(路径:themes/icarus/layout/common/widget.ejs

      • widget.ejs(<%- _partial('widget/' + widget.type, { widget }) %>)调用category插件(路径:themes/icarus/layout/widget/category.ejs),插件参数在主题配置文件内设置(widget.type)

        • category.ejs(<%- _partial('categories') %>)调用categories.ejs文件(路径:themes/icarus/layout/categories.ejs

          • 修改categories.ejs

            替换为Wikitten主题的category.ejs(路径:themes/Wikitten/layout/widget/category.ejs),然后修改HTML标签。

  3. 查看文章正文的结构文件

    路径:themes/icarus/layout/common/article.ejs,定义文章正文的HTML页面结构。

  4. 查看CSS文件

    路径:themes/icarus/source/css/style.styl,定义HTML标签的样式。

  5. 查看HTML源代码

    使用开发者工具(浏览器F12)查看HTML的页面结构。得知:

    • 侧边栏的标签名为:class="column "
    • 侧边栏内的插件的标签名为:class="card widget”

过程:

打算将icarus主题的分类替换为Wiitten主题的分类。

  1. 修改categories.ejs(路径:themes/icarus/layout/categories.ejs

    1. Wikitten主题的category.ejs(路径:themes/Wikitten/layout/widget/category.ejs

      <% if (site.categories.length) { %>
          <div class="widget-wrap" id='categories'>
              <h3 class="widget-title">
                  <span><%= __('widget.categories') %></span>
                  &nbsp;
                  <a id='allExpand' href="#">
                      <i class="fa fa-angle-double-<%- theme.customize.category_perExpand ? 'up' : 'down' %> fa-2x"></i>
                  </a>
              </h3>
                    
              <% 
                  function listCategories(categories, posts) {
                      function layArticles(posts) {
                          var classifiedArticles = {'_root': []};
                          posts.forEach(function(post,i){
                                  var last_post_cat;
                                  var post_info = {
                                  "title": post.title,
                                  "date": post.date,
                                  "path": url_for(post.path),
                                  "_id": post._id
                              };
                              if(post.categories.length) {
                                  last_cat_id = post.categories.data.slice(-1)[0]['_id'];
                                  if(!classifiedArticles[last_cat_id]) classifiedArticles[last_cat_id] = [];
                                  classifiedArticles[last_cat_id].push(post_info);
                              } else {
                                  classifiedArticles['_root'].push(post_info);
                              }
                          });
                          return classifiedArticles;
                      }
                      function prepareQuery(categories, parent) {
                          var query = {};
                          if (parent) {
                              query.parent = parent;
                          } else {
                              query.parent = {$exists: false};
                          }
                          return categories.find(query).sort('name', 1).filter(function(cat) {
                              return cat.length;
                          });
                      }
                      function hierarchicalList(tree, parent, classifiedArticles) {
                        if(!tree.name) tree = {"name": "_root", "_id": "_root", "children": [], "articles": classifiedArticles['_root']};
                        prepareQuery(categories, parent).forEach(function(cat, i) {
                            var now_category = {
                                "_id": cat._id, 
                                "name": cat.name, 
                                "children": [],
                                "articles": classifiedArticles[cat._id]
                            };
                            if(is_post() && now_category.articles) {
                                now_category.articles.forEach(function(post, i) {
                                    if(page._id == post._id) now_category["selected"] = true;
                                });
                            }
                            var childTree = hierarchicalList(now_category, cat._id, classifiedArticles);
                            if(childTree.selected) {tree["selected"] = true};
                            tree.children.push(childTree);
                        });
                        return tree;
                      }
                      var classifiedArticles = layArticles(posts);
                      var categoriesTree = hierarchicalList({}, null, classifiedArticles);
                      return categoriesTree;
                  }
              %>
              <% 
                  function visitTreePosts(branch, perExpand) {
                   %> <ul class="unstyled" id="tree" <% if(perExpand) { %>style="display: block;"<% } %>> <%
                      if(branch.children && branch.children.length) {
                          branch.children.forEach(function(category){
                          %>
                          <li class="directory<%- category.selected ? ' open' : '' %>">
                              <a href="#" data-role="directory">
                                  <i class="fa fa-folder<%- (perExpand || category.selected) ? '-open' : '' %>"></i>
                                  &nbsp;
                                  <%- category.name %>
                              </a>
                              <% visitTreePosts(category, perExpand) %>
                          </li> 
                          <%  
                          });
                      } 
                      if(branch.articles && branch.articles.length) {
                          branch.articles.sort(function(post0, post1) {
                              return new Date(post0.date) - new Date(post1.date)
                          }).forEach(function(post){
                              %> <li class="file<%- (is_post() && post._id == page._id) ? ' active' : '' %>"><a href="<%- post.path %>"><%- post.title %></a></li> <%
                          });
                      }
                   %> </ul> <%
                  }
              %>
              <%
                  var categoriesTree = listCategories(site.categories, site.posts);
                  visitTreePosts(categoriesTree, theme.customize.category_perExpand);
              %>
          </div>
          <script>
              $(document).ready(function() {
                  var iconFolderOpenClass  = 'fa-folder-open';
                  var iconFolderCloseClass = 'fa-folder';
                  var iconAllExpandClass = 'fa-angle-double-down';
                  var iconAllPackClass = 'fa-angle-double-up';
                  // Handle directory-tree expansion:
                  // 左键单独展开目录
                  $(document).on('click', '#categories a[data-role="directory"]', function (event) {
                      event.preventDefault();
            
                      var icon = $(this).children('.fa');
                      var expanded = icon.hasClass(iconFolderOpenClass);
                      var subtree = $(this).siblings('ul');
                      icon.removeClass(iconFolderOpenClass).removeClass(iconFolderCloseClass);
                      if (expanded) {
                          if (typeof subtree != 'undefined') {
                              subtree.slideUp({ duration: 100 });
                          }
                          icon.addClass(iconFolderCloseClass);
                      } else {
                          if (typeof subtree != 'undefined') {
                              subtree.slideDown({ duration: 100 });
                          }
                          icon.addClass(iconFolderOpenClass);
                      }
                  });
                  // 右键展开下属所有目录
                  $('#categories a[data-role="directory"]').bind("contextmenu", function(event){
                      event.preventDefault();
                            
                      var icon = $(this).children('.fa');
                      var expanded = icon.hasClass(iconFolderOpenClass);
                      var listNode = $(this).siblings('ul');
                      var subtrees = $.merge(listNode.find('li ul'), listNode);
                      var icons = $.merge(listNode.find('.fa'), icon);
                      icons.removeClass(iconFolderOpenClass).removeClass(iconFolderCloseClass);
                      if(expanded) {
                          subtrees.slideUp({ duration: 100 });
                          icons.addClass(iconFolderCloseClass);
                      } else {
                          subtrees.slideDown({ duration: 100 });
                          icons.addClass(iconFolderOpenClass);
                      }
                  })
                  // 展开关闭所有目录按钮
                  $(document).on('click', '#allExpand', function (event) {
                      event.preventDefault();
                            
                      var icon = $(this).children('.fa');
                      var expanded = icon.hasClass(iconAllExpandClass);
                      icon.removeClass(iconAllExpandClass).removeClass(iconAllPackClass);
                      if(expanded) {
                          $('#sidebar .fa.fa-folder').removeClass('fa-folder').addClass('fa-folder-open')
                          $('#categories li ul').slideDown({ duration: 100 });
                          icon.addClass(iconAllPackClass);
                      } else {
                          $('#sidebar .fa.fa-folder-open').removeClass('fa-folder-open').addClass('fa-folder')
                          $('#categories li ul').slideUp({ duration: 100 });
                          icon.addClass(iconAllExpandClass);
                      }
                  });  
              });
          </script>
      <% } %>
      
    2. 用Wikitten主题的category.ejs替换掉icarus的categories.ejs

      <% if (site.categories.length) { %>
          <div class="widget-wrap" id='categories'>
              <h3 class="widget-title">
                  <span><%= __('widget.categories') %></span>
                  &nbsp;
                  <a id='allExpand' href="#">
                      <i class="fa fa-angle-double-<%- theme.customize.category_perExpand ? 'up' : 'down' %> fa-2x"></i>
                  </a>
              </h3>
                    
              <% 
                  function listCategories(categories, posts) {
                      function layArticles(posts) {
                          var classifiedArticles = {'_root': []};
                          posts.forEach(function(post,i){
                                  var last_post_cat;
                                  var post_info = {
                                  "title": post.title,
                                  "date": post.date,
                                  "path": url_for(post.path),
                                  "_id": post._id
                              };
                              if(post.categories.length) {
                                  last_cat_id = post.categories.data.slice(-1)[0]['_id'];
                                  if(!classifiedArticles[last_cat_id]) classifiedArticles[last_cat_id] = [];
                                  classifiedArticles[last_cat_id].push(post_info);
                              } else {
                                  classifiedArticles['_root'].push(post_info);
                              }
                          });
                          return classifiedArticles;
                      }
                      function prepareQuery(categories, parent) {
                          var query = {};
                          if (parent) {
                              query.parent = parent;
                          } else {
                              query.parent = {$exists: false};
                          }
                          return categories.find(query).sort('name', 1).filter(function(cat) {
                              return cat.length;
                          });
                      }
                      function hierarchicalList(tree, parent, classifiedArticles) {
                        if(!tree.name) tree = {"name": "_root", "_id": "_root", "children": [], "articles": classifiedArticles['_root']};
                        prepareQuery(categories, parent).forEach(function(cat, i) {
                            var now_category = {
                                "_id": cat._id, 
                                "name": cat.name, 
                                "children": [],
                                "articles": classifiedArticles[cat._id]
                            };
                            if(is_post() && now_category.articles) {
                                now_category.articles.forEach(function(post, i) {
                                    if(page._id == post._id) now_category["selected"] = true;
                                });
                            }
                            var childTree = hierarchicalList(now_category, cat._id, classifiedArticles);
                            if(childTree.selected) {tree["selected"] = true};
                            tree.children.push(childTree);
                        });
                        return tree;
                      }
                      var classifiedArticles = layArticles(posts);
                      var categoriesTree = hierarchicalList({}, null, classifiedArticles);
                      return categoriesTree;
                  }
              %>
              <% 
                  function visitTreePosts(branch, perExpand) {
                   %> <ul class="unstyled" id="tree" <% if(perExpand) { %>style="display: block;"<% } %>> <%
                      if(branch.children && branch.children.length) {
                          branch.children.forEach(function(category){
                          %>
                          <li class="directory<%- category.selected ? ' open' : '' %>">
                              <a href="#" data-role="directory">
                                  <i class="fa fa-folder<%- (perExpand || category.selected) ? '-open' : '' %>"></i>
                                  &nbsp;
                                  <%- category.name %>
                              </a>
                              <% visitTreePosts(category, perExpand) %>
                          </li> 
                          <%  
                          });
                      } 
                      if(branch.articles && branch.articles.length) {
                          branch.articles.sort(function(post0, post1) {
                              return new Date(post0.date) - new Date(post1.date)
                          }).forEach(function(post){
                              %> <li class="file<%- (is_post() && post._id == page._id) ? ' active' : '' %>"><a href="<%- post.path %>"><%- post.title %></a></li> <%
                          });
                      }
                   %> </ul> <%
                  }
              %>
              <%
                  var categoriesTree = listCategories(site.categories, site.posts);
                  visitTreePosts(categoriesTree, theme.customize.category_perExpand);
              %>
          </div>
          <script>
              $(document).ready(function() {
                  var iconFolderOpenClass  = 'fa-folder-open';
                  var iconFolderCloseClass = 'fa-folder';
                  var iconAllExpandClass = 'fa-angle-double-down';
                  var iconAllPackClass = 'fa-angle-double-up';
                  // Handle directory-tree expansion:
                  // 左键单独展开目录
                  $(document).on('click', '#categories a[data-role="directory"]', function (event) {
                      event.preventDefault();
            
                      var icon = $(this).children('.fa');
                      var expanded = icon.hasClass(iconFolderOpenClass);
                      var subtree = $(this).siblings('ul');
                      icon.removeClass(iconFolderOpenClass).removeClass(iconFolderCloseClass);
                      if (expanded) {
                          if (typeof subtree != 'undefined') {
                              subtree.slideUp({ duration: 100 });
                          }
                          icon.addClass(iconFolderCloseClass);
                      } else {
                          if (typeof subtree != 'undefined') {
                              subtree.slideDown({ duration: 100 });
                          }
                          icon.addClass(iconFolderOpenClass);
                      }
                  });
                  // 右键展开下属所有目录
                  $('#categories a[data-role="directory"]').bind("contextmenu", function(event){
                      event.preventDefault();
                            
                      var icon = $(this).children('.fa');
                      var expanded = icon.hasClass(iconFolderOpenClass);
                      var listNode = $(this).siblings('ul');
                      var subtrees = $.merge(listNode.find('li ul'), listNode);
                      var icons = $.merge(listNode.find('.fa'), icon);
                      icons.removeClass(iconFolderOpenClass).removeClass(iconFolderCloseClass);
                      if(expanded) {
                          subtrees.slideUp({ duration: 100 });
                          icons.addClass(iconFolderCloseClass);
                      } else {
                          subtrees.slideDown({ duration: 100 });
                          icons.addClass(iconFolderOpenClass);
                      }
                  })
                  // 展开关闭所有目录按钮
                  $(document).on('click', '#allExpand', function (event) {
                      event.preventDefault();
                            
                      var icon = $(this).children('.fa');
                      var expanded = icon.hasClass(iconAllExpandClass);
                      icon.removeClass(iconAllExpandClass).removeClass(iconAllPackClass);
                      if(expanded) {
                          $('#sidebar .fa.fa-folder').removeClass('fa-folder').addClass('fa-folder-open')
                          $('#categories li ul').slideDown({ duration: 100 });
                          icon.addClass(iconAllPackClass);
                      } else {
                          $('#sidebar .fa.fa-folder-open').removeClass('fa-folder-open').addClass('fa-folder')
                          $('#categories li ul').slideUp({ duration: 100 });
                          icon.addClass(iconAllExpandClass);
                      }
                  });  
              });
          </script>
      <% } %>
            
      
    3. 根据icarus主题的HTML修改标签

      <% if (site.categories.length) { %>
        <div class="card widget" id='categories'>
            <div class="card-content">
                <div class="menu">
                    <h3 class="widget-title">
                        <span><%= __('分类') %></span>
                        &nbsp;
                        <a id='allExpand' href="#">
                            <i class="fa fa-angle-double-<%- theme.sidebar.category_perExpand ? 'up' : 'down' %> fa-2x"></i>
                        </a>
                    </h3>
                </div>
            </div>
        </div>
      <% } %>	
      
      1. 在主题配置文件(themes/icarus/_config.yml)内增加插件参数

        例如在sidebar下面新增“category_perExpand: false”

        sidebar:
            category_perExpand: false
        

        同时,将“theme.customize.category_perExpand”(Wikitten的命名)修改为“theme.sidebar.category_perExpand”(icarus的命名)。

感谢您的赞赏支持:

Copyright © 2020 komantao. All Rights Reserved.