+
+ 
+
+
+ );
+ }
+}
+
+export default App;
+
+```
+Ctrl + C
+
+Ctrl + V
+
+## 二、State是什么？
+
+
+英文翻译是状态。
+
+其实也可以理解为状态，一段文字中的某个值改变了，也可以理解为状态改变了。
+看一个简单的例子
+
+
+把 src/app.js的文件内容先改一下
+
+```javascript
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+class App extends Component {
+ state={Text:'我是state'}
+ render() {
+ return (
+
+ Edit src/App.js and save to reload.
+
+ 修改文件夹 src/App.js 保存时候之后自动加载.
+
+
+
+
+
+ );
+ }
+}
+
+export default App;
+```
+```javascript
+ state={Text:'我是state'}
+```
+
+这里的state是给state设置初值，不然会报错。不相信的话自己可以试一下。*（因为state是undefined，所以他里面取不到Text）*
+
+通过上面的例子可以知道state里面放的是XX的状态
+
+key value对应的
+
+this.state.xx就可以取到对应key的**状态**的*值*
+
+
+## 三、State如何改变？
+
+通常在JS里面，我们要改变某一个值可能就只需要 X = XX; 就可以。
+
+
+这里的state是一个状态。状态改变了，页面会自动刷新为最新的页面用最新的状态显示。
+下面我们做一个小实验。
+
+
+把 src/app.js的文件内容先改一下
+
+```javascript
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+class App extends Component {
+ state={Text:'我是state'}
+ render() {
+ return (
+ + State输出：{this.state.Text} +
+
+
+
+
+
+ );
+ }
+}
+
+export default App;
+```
+
+（不要在意细节！！！我们是测试按钮的样式不重要！！！）
+
+点击按钮之后，我们发现，state的值是改变了，但是页面上面显示的值不是我们想要的啊。
+
+
+
+那我要怎么才可以刷新页面出现我想要的state的值呢？
+
+官方提供的方法
+
+setState(updater, [callback])
+
+
+可以这么理解，针对上面的例子
+
+
+```javascript
+this.setState({Text:'我是通过this.state.Text改变的State'}, function(){})
+```
+
+后面的function，可以有，也可以没有。不需要的话就可以不用写-----------稍后会说
+
+所以只需要
+
+```javascript
+this.setState({Text:'我是通过this.state.Text改变的State'})
+```
+
+
+把 src/app.js的文件内容先改一下
+
+```javascript
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+class App extends Component {
+ state={Text:'我是state'}
+ render() {
+ return (
+ + State输出：{this.state.Text} +
+ +
+
+
+
+
+ );
+ }
+}
+
+export default App;
+```
+保存-热加载
+之后我们发现，状态是改变了，可是alert的值不是我们想要的，还是老的值（状态）的。
+
+可能你不知道我在说什么
+
+通过一个小例子我们仔细感受一下。官方的setState究竟在干什么。
+
+把 src/app.js的文件内容先改一下
+
+```javascript
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+class App extends Component {
+ state={
+ Text:'大家一起看log吧，我这次啥也不做',
+ conut:0,
+ }
+ render() {
+ return (
+ + State输出：{this.state.Text} +
+ +
+
+
+
+
+ );
+ }
+}
+
+export default App;
+```
+
+打开我们的react页面
+按Ctrl + Shift + I
+看log
+然后按钮
+
+
+
+诶，我不是setState了吗，为什么值没有改变还是初值呢？
+
+我们换一个方法试一下
+```javascript
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+class App extends Component {
+ state={
+ Text:'大家一起看log吧，我这次啥也不做',
+ conut:0,
+ }
+ render() {
+ return (
+ + State输出：{this.state.Text} +
+ +
+
+
+
+
+ );
+ }
+}
+
+export default App;
+```
+
+
+那我们是不是可以认为setState不是一个立刻生效的函数。
+
+有点类似异步的网络请求。
+
+
+
+这是一个坑，很多新手都会遇到的坑。我曾经也遇到所以写出来。
+
+那既然是类似异步的网络请求肯定也有callback咯？
+
+是的！
+
+我们把console.log放到刚刚我们没有写function里面。
+
+```javascript
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+class App extends Component {
+ state={
+ Text:'大家一起看log吧，我这次啥也不做',
+ conut:0,
+ }
+ render() {
+ return (
+ + State输出：{this.state.Text} +
+ +
+
+
+
+
+ );
+ }
+}
+
+export default App;
+```
+
+这样的好处我们不需要手动的控制等待时间的大小，因为根据设备的不同这个时间可能会太多或者太少。
+
+本人React小菜，有说的不对的地方还请大神指出。
diff --git a/source/_posts/Webpack-CleanWebpackPlugin-is-not-a-constructor.md b/source/_posts/Webpack-CleanWebpackPlugin-is-not-a-constructor.md
new file mode 100644
index 00000000..dca8b490
--- /dev/null
+++ b/source/_posts/Webpack-CleanWebpackPlugin-is-not-a-constructor.md
@@ -0,0 +1,60 @@
+---
+title: Webpack CleanWebpackPlugin is not a constructor
+date: 2019-06-22 15:55:56
+tags: [WebPack, clean-webpack-plugin]
+category: [WebPack]
+cover: /image/cover/webpack.png
+---
+
+## 前言
+今天自己跟着webpack官网的demo一步步走下来。发现了这个问题。
+
+
+
+查了一圈。发现了这个博主。nice！
+```
+// webpack版本：4.34.0
+
+// 抛错原写法
+const CleanWebpackPlugin = require("clean-webpack-plugin");
+
+...
+
+plugins: [
+ new CleanWebpackPlugin(['dist'])
+]
+
+...
+
+// 另一种错误写法
+
+const CleanWebpackPlugin = require("clean-webpack-plugin");
+
+...
+
+plugins: [
+ new CleanWebpackPlugin(['dist'], {
+ root: path.resolve(__dirname, '../'), //根目录
+ })
+]
+
+...
+
+// =============================分割线==============================
+
+// 正确写法
+
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+
+...
+
+plugins: [
+ new CleanWebpackPlugin()
+]
+
+```
+
+ 现在的版本不用指定文件路径了，直接调用new CleanWebpackPlugin()
+ 
+索引：https://blog.csdn.net/qq_36242361/article/details/90709258
+
diff --git "a/source/_posts/Web\345\211\215\347\253\257-\345\255\246\344\271\240\347\233\256\345\275\225-\345\255\246\344\271\240\346\241\206\346\236\266-\347\263\273\347\273\237\346\200\247\347\232\204\345\255\246\344\271\240Web\345\211\215\347\253\257.md" "b/source/_posts/Web\345\211\215\347\253\257-\345\255\246\344\271\240\347\233\256\345\275\225-\345\255\246\344\271\240\346\241\206\346\236\266-\347\263\273\347\273\237\346\200\247\347\232\204\345\255\246\344\271\240Web\345\211\215\347\253\257.md"
new file mode 100644
index 00000000..c6899a63
--- /dev/null
+++ "b/source/_posts/Web\345\211\215\347\253\257-\345\255\246\344\271\240\347\233\256\345\275\225-\345\255\246\344\271\240\346\241\206\346\236\266-\347\263\273\347\273\237\346\200\247\347\232\204\345\255\246\344\271\240Web\345\211\215\347\253\257.md"
@@ -0,0 +1,20 @@
+---
+title: Web前端 学习目录 学习框架 系统性的学习Web前端
+date: 2019-06-19 10:28:50
+tags: [系统性的学习, 学习目录, Web前端, 学习框架]
+category: [Web前端]
+cover: /image/cover/web.jpeg
+---
+
+## 前言
+
+
+这个是目前从网上偷来的，自己学习Web前端可能会用得到，特此记录一下
+
+
+> 每个 JavaScript 工程师都应懂的33个概念 @leonardomso
+
+https://github.com/stephentian/33-js-concepts
+
+
+
diff --git "a/source/_posts/ant-design-Form-\347\273\204\344\273\266\346\200\273\347\273\223-\347\273\223\345\220\210Modal-\350\207\252\345\256\232\344\271\211Modal\347\232\204\345\256\236\347\216\260-\357\274\210Upload-Input-Select-DatePicker-Cascader\357\274\211.md" "b/source/_posts/ant-design-Form-\347\273\204\344\273\266\346\200\273\347\273\223-\347\273\223\345\220\210Modal-\350\207\252\345\256\232\344\271\211Modal\347\232\204\345\256\236\347\216\260-\357\274\210Upload-Input-Select-DatePicker-Cascader\357\274\211.md"
new file mode 100644
index 00000000..e61fa0f8
--- /dev/null
+++ "b/source/_posts/ant-design-Form-\347\273\204\344\273\266\346\200\273\347\273\223-\347\273\223\345\220\210Modal-\350\207\252\345\256\232\344\271\211Modal\347\232\204\345\256\236\347\216\260-\357\274\210Upload-Input-Select-DatePicker-Cascader\357\274\211.md"
@@ -0,0 +1,629 @@
+---
+title: >-
+ Ant Design Form 组件总结 结合Modal 自定义Modal的实现 （Upload Input Select DatePicker
+ Cascader）
+date: 2019-06-19 10:24:07
+tags: [Ant-Design-Form, Ant-Design组件合集]
+category: [Ant-Design, JavaScript]
+cover: /image/cover/ANTD.png
+---
+
+## 起源
+
+最近在项目中发现要写多个弹框（用于查看、编辑、新建XX信息），如下图。
+
+
+
+像这样花里胡哨的弹框在一个大型的中台管理系统中，可能要写上好几遍的Modal
+但是其实他们大同小异。
+
+首先，他们的title是固定的（增、改、查）
+
+底下的内容也是固定的，无非就是Upload Input Select DatePicker Cascader
+
+（写不了<>。其实应该是ant design 的组件）
+
+
+## 改进
+
+所以我想自己写一个ModalView的组件。只需要传入这上面的数据类型，title之类的数据就可以完成渲染。
+
+如下，这个是我项目中的一个例子
+
+
+```
++ State输出：{this.state.Text} +
+ +
+
+ )
+ }
+
+ handleChange = (info) => {
+ if (info.file.status === 'uploading') {
+ this.setState({ loading: true });
+ return;
+ }
+ if (info.file.status === 'done') {
+ const {onChange} = this.props
+ this.setState({imageUrl: info.file.response.data[0], loading: false,})
+ onChange(info.file.response.data[0])
+ }
+ }
+
+ beforeUpload = (file) => {
+ const isJPG = file.type === 'image/jpeg';
+ if (!isJPG) {
+ message.error('只能上传JPG的图片!');
+ }
+ const isLt2M = file.size / 1024 / 1024 < 2;
+ if (!isLt2M) {
+ message.error('图片大小不能大于2MB!');
+ }
+ return isJPG && isLt2M;
+ }
+
+ upLoadProps = () => {
+ HEADER_BASE.user_id = window.sessionStorage.getItem('userId');
+ HEADER_BASE.token_id = window.sessionStorage.getItem('tokenId');
+ const props = {
+ name: 'file',
+ action: PICTURE_UPLOAD,
+ headers: HEADER_BASE,
+ onChange: this.handleChange,
+ showUploadList: false,
+ beforeUpload: this.beforeUpload,
+ };
+ return props;
+ };
+
+ render() {
+
+ const { imageUrl } = this.state;
+
+ return (
+ Upload
+ 首页
+ 登录 + + ) +} + +function Login() { + return ( + <> +登录页
+ 回首页 + + ); +} + +function App() { + return ( +首页
+ 登录 + + ) +} + +function Login() { + return ( + <> +登录页
+ 回首页 + + ); +} + +function App() { + return ( +
+
+ );
+ }
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render({text}
+Hello, world!
; +> ``` +> +> 它被称为 JSX，是一个 JavaScript 的语法扩展。 + +语法扩展，意思就是`JS`有的他都有的情况下，还有一些别的功能。可是这货，明显在`JavaScript`学习过程中没见过他呀。他能运行在`JavaScript`的环境中吗？打开`Chrome`控制台。 + + + + + + + +上来就是劈头盖脸的语法错误，看样子这部分就是多出来的功能了呗。那咋运行啊？ + + + +```js +{ + test: /\.(js|jsx)?$/, + // 开启缓存 + options: { cacheDirectory: true }, + loader: 'babel-loader', +}, +``` + +怎么样，熟悉不，意思是告诉`webpack`，解析`jsx`结尾的代码，需要用到`babel`。ok，也就是说要想运行`jsx`，就必须用`babel`解析。那好，什么是babel？ + +### babel + +拉一段`babel`官网上的一句话 + +> ## Babel 是一个 JavaScript 编译器 +> +> Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。 + +`babel`，其实就是帮我们解析我们写的代码，然后变成浏览器能够认识样式。比如`jsx`，比如新鲜的`es6`语法可以运行在老版本的浏览器上，让老版本的浏览器能够认识。 + +那问题又来了，jsx被babel变成什么样子了？ + +在线转换：https://babeljs.io/repl + +大家可以把上面的小demo，扔进去。 + + + + + + + +发现没有。我们`return`出去的东西变成了`React.createElement`。哈哈，这就是为什么我们即使没有用到`React`(解决了一到面试题！)，也需要在上面`import`，因为`jsx`最后是会被转化为`React.createElement`，会用到的！（不过现在最新的好像不需要引用也不会报错了，因为他自己识别了。 + +官网介绍：https://zh-hans.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html + +> ``` +> // 由编译器引入（禁止自己引入！） +> import {jsx as _jsx} from 'react/jsx-runtime'; +> +> function App() { +> return _jsx('h1', { children: 'Hello world' }); +> } +> ``` +> +> 注意，此时源代码**无需引入 React** 即可使用 JSX 了！（但仍需引入 React，以便使用 React 提供的 Hook 或其他导出。） + + + +回到之前`React`官网提到的 + +> 它被称为 JSX，是一个 JavaScript 的语法扩展。 + +有没有呼应起来了，确实`js`他都有，但是`js`没有的，他还有比如转化为`React.createElement`。 + + + +## createElement + +我们是来读源码学习的，我们既然知道了`jsx`的底层是调用`react`的函数，我们就来看看这个函数是个什么情况。 + +```javascript +export function createElement(type, config, children) { + // propName 变量用于储存后面需要用到的元素属性 + let propName; + // props 变量用于储存元素属性的键值对集合 + const props = {}; + // key、ref、self、source 均为 React 元素的属性，此处不必深究 + let key = null; + let ref = null; + let self = null; + let source = null; + + // config 对象中存储的是元素的属性 + if (config != null) { + // 进来之后做的第一件事，是依次对 ref、key、self 和 source 属性赋值 + if (hasValidRef(config)) { + ref = config.ref; + } + // 此处将 key 值字符串化 + if (hasValidKey(config)) { + key = '' + config.key; + } + self = config.__self === undefined ? null : config.__self; + source = config.__source === undefined ? null : config.__source; + // 接着就是要把 config 里面的属性都一个一个挪到 props 这个之前声明好的对象里面 + for (propName in config) { + if ( + // 筛选出可以提进 props 对象里的属性 + hasOwnProperty.call(config, propName) && + !RESERVED_PROPS.hasOwnProperty(propName) + ) { + props[propName] = config[propName]; + } + } + } + // childrenLength 指的是当前元素的子元素的个数，减去的 2 是 type 和 config 两个参数占用的长度 + const childrenLength = arguments.length - 2; + // 如果抛去type和config，就只剩下一个参数，一般意味着文本节点出现了 + if (childrenLength === 1) { + // 直接把这个参数的值赋给props.children + props.children = children; + // 处理嵌套多个子元素的情况 + } else if (childrenLength > 1) { + // 声明一个子元素数组 + const childArray = Array(childrenLength); + // 把子元素推进数组里 + for (let i = 0; i < childrenLength; i++) { + childArray[i] = arguments[i + 2]; + } + // 最后把这个数组赋值给props.children + props.children = childArray; + } + + // 处理 defaultProps + if (type && type.defaultProps) { + const defaultProps = type.defaultProps; + for (propName in defaultProps) { + if (props[propName] === undefined) { + props[propName] = defaultProps[propName]; + } + } + } + + // 最后返回一个调用ReactElement执行方法，并传入刚才处理过的参数 + return ReactElement( + type, + key, + ref, + self, + source, + ReactCurrentOwner.current, + props, + ); +} +``` + + + +先不看参数，我们就先看返回值的名字和这个函数的名字。我们初步猜测，`jsx`是通过`createElement`这个函数来创建一个`React`元素，然后由`ReactDOM.render`来渲染到我们指定名字的元素上。 + + + + + +ok，那么我们平常写的jsx元素就是`ReactElement`生成的东西。我们看看`ReactElement`生成的是个什么东西。 + +我们先把我们平常写的`jsx`给打印一下。 + + + + + + + +凭直觉，是不是感觉这个是一个`虚拟DOM`的节点，他有类型然后又是`div`，对应的会不会是`html`的`div`标签？还有`className`，这个很明显就是对应`class`。我们去一看究竟。 + +## ReactElement + + + +```javascript +const ReactElement = function(type, key, ref, self, source, owner, props) { + const element = { + // 这个是一个React结点的标识符 + $$typeof: REACT_ELEMENT_TYPE, + + // 很明显就是对应的html的标签 + type: type, + key: key, + ref: ref, + props: props, + + // 记录由谁创建的，暂时也不知道什么用。先挖个坑 + _owner: owner, + }; + + // 开发环境下的配置，主要就是Object.freeze，可以在MDN上面查一下。我就不多介绍了 + if (__DEV__) { + // The validation flag is currently mutative. We put it on + // an external backing store so that we can freeze the whole object. + // This can be replaced with a WeakMap once they are implemented in + // commonly used development environments. + element._store = {}; + + // To make comparing ReactElements easier for testing purposes, we make + // the validation flag non-enumerable (where possible, which should + // include every environment we run tests in), so the test framework + // ignores it. + Object.defineProperty(element._store, 'validated', { + configurable: false, + enumerable: false, + writable: true, + value: false, + }); + // self and source are DEV only properties. + Object.defineProperty(element, '_self', { + configurable: false, + enumerable: false, + writable: false, + value: self, + }); + // Two elements created in two different places should be considered + // equal for testing purposes and therefore we hide it from enumeration. + Object.defineProperty(element, '_source', { + configurable: false, + enumerable: false, + writable: false, + value: source, + }); + if (Object.freeze) { + Object.freeze(element.props); + Object.freeze(element); + } + } + + return element; +}; +``` + + + +看过之后，是不是和我们看到的节点一样，首先，标注一下`$$typeof`为`react节点`。然后就是正常的传参，比如`key`，`ref`，`props`等等。 + +## ReactDOM.render + +这个就是React节点渲染为真是节点的操作。话不多说，上源码！ + + + +```javascript +export function isValidContainer(node: mixed): boolean { + return !!( + node && + (node.nodeType === ELEMENT_NODE || + node.nodeType === DOCUMENT_NODE || + node.nodeType === DOCUMENT_FRAGMENT_NODE || + (node.nodeType === COMMENT_NODE && + (node: any).nodeValue === ' react-mount-point-unstable ')) + ); +} + +export function render( + element: React$Element
+
+ );
+ }
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render({text}
+
+
+
+I am a floated box!
+ I am content inside the container.
+This is some text outside the div element.
+ + + + +``` + +可以看到，那个float把底下的div盖住了。 + +我们随便弄一个BFC的特性中的一条：[`overflow`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow) 值不为 `visible` 的块元素。 + +```html + + + + + + + +
+
+
+I am a floated box!
+ I am content inside the container.
+This is some text outside the div element.
+ + + + +``` + +那就设置成`auto`吧~ + +有没有很神奇的发现！！！ + +再告诉大家一个黑科技：表格标题（元素的 [`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display) 为 `table-caption`，HTML表格标题默认为该值）。这个是没有副作用的哦。 + +```html + + + + + + + +
+
+
+I am a floated box!
+ I am content inside the container.
+This is some text outside the div element.
+ + + + +``` + +给 `` `display: flow-root` 属性后，`
` 中的所有内容都会参与 BFC，浮动的内容不会从底部溢出。
+
+关于值 `flow-root `的这个名字，当你明白你实际上是在创建一个行为类似于根元素 （浏览器中的``元素） 的东西时，就能发现这个名字的意义了——即创建一个上下文，里面将进行 flow layout。
+
+#### 外边距塌陷
+
+```html
+
+
+
+
+
+
+
+从零配置Webpack
+
+
+
+
+
+```
+
+OK
+
+万事俱备，我们运行：
+
+```
+npm run start
+```
+
+打包失败了。。。为什么呢？
+
+### 使用babel
+
+为什么我们上面写jsx会打包不了呢，因为webpack根本识别不了jsx语法，那怎么办？使用loader对文件进行预处理。
+其中，babel-loader，就是这样一个预处理插件，它加载 ES2015+ 代码，然后使用 Babel 转译为 ES5。那开始配置它吧！
+
+首先安装babel相关的模块：
+
+```
+npm install --save-dev babel-loader @babel/preset-react @babel/preset-env @babel/core babel-plugin-import
+```
+
+- **babel-loader：**使用Babel和webpack来转译JavaScript文件。
+- **@babel/preset-react：**转译react的JSX
+- **@babel/preset-env：**转译ES2015+的语法
+- **@babel/core：**babel的核心模块
+- **babel-plugin-import**：按需加载所需要的babel解析
+
+理论上我们可以直接在 `webpack.common.config.js` 中配置"options"，但最好在当前根目录，注意，一定要是根目录！！！ 新建一个配置文件 `.babelrc` 配置相关的"presets"：
+
+```js
+{
+ "presets": [
+ [
+ "@babel/preset-env",
+ {
+ "targets": {
+ // 大于相关浏览器版本无需用到 preset-env
+ "edge": 17,
+ "firefox": 60,
+ "chrome": 67,
+ "safari": 11,
+ // 兼容到android4 ios6
+ "browsers": ["Android >= 4.0", "ios >= 6"]
+ }
+ }
+ ],
+ "@babel/preset-react"
+ ],
+ "plugins": [
+ ["import", { "libraryName": "antd-mobile", "style": "css" }] // `style: true` 会加载 less 文件
+ ]
+}
+```
+
+这里有关[bebel的配置](https://www.babeljs.cn/docs/babel-preset-env)可上官网查询文档。
+
+再修改 `webpack.common.config.js` ，添加如下代码：
+
+```js
+const path = require('path');
+
+module.exports = {
+ // 配置入口文件
+ entry: {
+ app: './src/index.js',
+ },
+ // 打包📦之后的出口
+ output: {
+ // 如果不加哈希值，浏览器会有缓存，可能你部署了，但是用户看到的还是老页面
+ // 8是hash的长度，如果不设置，webpack会设置默认值为20。
+ filename: 'js/[name].[chunkhash:8].bundle.js',
+ /**
+ * Node.js 中，__dirname 总是指向被执行 js 文件的绝对路径，
+ * 所以当你在 /d1/d2/myscript.js 文件中写了 __dirname， 它的值就是 /d1/d2 。
+ * path.resolve
+ * 1.path.resolve()方法可以将路径或者路径片段解析成绝对路径
+ * 2.传入路径从右至左解析，遇到第一个绝对路径是完成解析，例如path.resolve('/foo', '/bar', 'baz') 将返回 /bar/baz
+ * 3.如果传入的绝对路径不存在，那么当前目录将被使用
+ * 4.当传入的参数没有/时，将被传入解析到当前根目录
+ * 5.零长度的路径将被忽略
+ * 6.如果没有传入参数，将返回当前根目录
+ *
+ * _dirname表示绝对路径
+ * 我们碰到的./xx就是相对路径
+ * 1.只传入__dirname也可以自动调用path.resolve方法
+ * 2.可以拼接路径字符串，但是不调用path.resolve()方法拼接失败
+ * 3.__dirname代表的是当前文件（a.js）的绝对路径
+ * 4.从右至左解析，遇到了绝对路径/src，因此直接返
+ */
+ path: path.resolve(__dirname, '../../dist')
+ },
+ module: {
+ /**
+ * test 规定了作用于以规则中匹配到的后缀结尾的文件，
+ * use 即是使用 babel-loader 必须的属性，
+ * exclude 告诉我们不需要去转译"node_modules"这里面的文件。
+ */
+ rules:[
+ {
+ test: /\.(js|jsx)?$/,
+ // 开启缓存
+ options: { cacheDirectory: true },
+ loader: 'babel-loader',
+ },
+ ]
+ }
+}
+```
+
+接下来激动人心的时刻：
+
+```
+npm run start
+```
+
+是不是能打包成功了呢？
+
+打开【dist/】你的html页面，看一下是否是“Hello World！”吧！
+
+### 使用webpack-merge🈴️
+
+我们将使用一个名为 [webpack-merge](https://github.com/survivejs/webpack-merge) 的工具。通过“通用”配置，我们不必在环境特定(environment-specific)的配置中重复代码。简单来说就是生产环境不同，我们要给的配置也有所不同，但是可以共用一个共有的配置。
+
+我们先从安装 [webpack-merge](https://github.com/survivejs/webpack-merge) 开始：
+
+```
+npm install --save-dev webpack-merge
+```
+
+安装结束之后，我们在 `config` 这个文件夹下新建两个文件，分别为 `webpack.prod.config.js` 和 `webpack.dev.config.js` ，这两个文件分别对应生产和开发两个环境的配置。当然你也可以添加test环境。名字也可以自己取，尽量保持一致。
+
+
+
+现在的目录结构：
+
+```diff
+ webpackInit
+ |- config
+ |- webpack
+ |- webpack.common.config.js
++ |- webpack.prod.config.js
+ 省略
+```
+
+在【webpack.prod.config.js】加入
+
+```js
+const merge = require('webpack-merge'); // 版本为4.x
+// webpack-merge 5.x版本应该改为 const { merge } = require('webpack-merge');
+const common = require('./webpack.common.config.js');
+
+module.exports = merge(common, {
+ mode: 'production',
+});
+```
+
+然后修改【package.json】
+
+```diff
+{
+ "name": "webpackInit",
+ "version": "1.0.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "start": "webpack --config ./config/webpack/webpack.common.config.js",
++ "build": "webpack --config ./config/webpack/webpack.prod.config.js"
+ },
+ "keywords": [],
+ "author": "",
+ "license": "ISC",
+ "devDependencies": {
+ "@babel/core": "^7.10.2",
+ "@babel/preset-env": "^7.10.2",
+ "@babel/preset-react": "^7.10.1",
+ "babel-loader": "^8.1.0",
+ "babel-plugin-import": "^1.13.0",
+ "webpack": "^4.43.0",
+ "webpack-cli": "^3.3.11",
+ "webpack-merge": "^4.2.2"
+ },
+ "dependencies": {
+ "react": "^16.13.1",
+ "react-dom": "^16.13.1"
+ }
+}
+
+```
+
+然后
+
+删除【dist文件夹】
+
+之后
+
+```
+npm run build
+```
+
+是不是也build也打包成功了！
+
+html是不是也可以正常访问！
+
+但是没有显示Hello World，仔细一看还报错了。。。为什么呢。。因为
+
+```
+// 如果不加哈希值，浏览器会有缓存，可能你部署了，但是用户看到的还是老页面
+ // 8是hash的长度，如果不设置，webpack会设置默认值为20。
+ filename: 'js/[name].[chunkhash:8].bundle.js',
+```
+
+我们给js文件设置了hash值。不能够直接在html里面加上【】这么一句，而且每次生成的hash值都会变，那么我们要怎么处理这个问题呢？
+
+
+
+### 使用[HtmlWebpackPlugin](https://www.webpackjs.com/plugins/html-webpack-plugin/)
+
+
+
+安装[HtmlWebpackPlugin](https://www.webpackjs.com/plugins/html-webpack-plugin/)
+
+在控制台执行以下代码：
+
+```
+npm install --save-dev html-webpack-plugin
+```
+
+修改【webpack.prod.config.js】
+
+```js
+const merge = require('webpack-merge'); // 版本为4.x
+// webpack-merge 5.x版本应该改为 const { merge } = require('webpack-merge');
+const common = require('./webpack.common.config.js');
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = merge(common, {
+ mode: 'production',
+ plugins: [
+ new HtmlWebpackPlugin({
+ filename: 'index.html', // 打包之后的html文件名字
+ // 这里有小伙伴可能会疑惑为什么不是 '../public/index.html'
+ // 我的理解是无论与要用的template是不是在一个目录，都是从根路径开始查找
+ template: 'public/index.html', // 以我们自己定义的html为模板生成，不然我们还要到打包之后的html文件中写script
+ inject: 'body',// 在body最底部引入js文件，如果是head，就是在head中引入js
+ minify: { // 压缩html文件
+ removeComments: true, // 去除注释
+ collapseWhitespace: true, // 去除空格
+ },
+ })
+ ]
+});
+```
+
+
+
+现在我们再来打包试试
+
+```
+npm run build
+```
+
+看看dist中是不是多出了html文件，并且自动引入了script，用浏览器打开它试试看是不是能正确输出内容了！
+
+起飞！！🛫️
+
+### 使用clean-webpack-plugin
+
+有些同学已经厌倦了每次都需要删除dist文件夹来验证是否成功。
+
+其实假如我们不删除的话，我们需要修改js文件，这样让webpack知道我们改了东西，他就会重新打包，但是我们每次测试都没有去修改，所以我们需要删除。
+
+但是，如果说我们不去删除dist文件夹的话，我们修改了【src/index.js】。然后再重新build，就会发现【dist/js】下面会又多出一个js文件，这样的话我们就需要观察日志，查看新鲜“出炉”的是哪一个，然后删掉别的。这样非常麻烦。
+
+OK，我们现在就来解决一下这个问题
+
+安装clean-webpack-plugin
+
+```
+npm install --save-dev clean-webpack-plugin
+```
+
+修改【webpck.prod.config.js】
+
+```diff
+const merge = require('webpack-merge'); // 版本为4.x
+// webpack-merge 5.x版本应该改为 const { merge } = require('webpack-merge');
+const common = require('./webpack.common.config.js');
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
++ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+module.exports = merge(common, {
+ mode: 'production',
+ plugins: [
+ new HtmlWebpackPlugin({
+ filename: 'index.html', // 打包之后的html文件名字
+ // 这里有小伙伴可能会疑惑为什么不是 '../public/index.html'
+ // 我的理解是无论与要用的template是不是在一个目录，都是从根路径开始查找
+ template: 'public/index.html', // 以我们自己定义的html为模板生成，不然我们还要到打包之后的html文件中写script
+ inject: 'body',// 在body最底部引入js文件，如果是head，就是在head中引入js
+ minify: { // 压缩html文件
+ removeComments: true, // 去除注释
+ collapseWhitespace: true, // 去除空格
+ },
+ }),
++ new CleanWebpackPlugin()
+ ]
+});
+```
+
+我们先查看现在的js文件前面的hash值。然后我们修改【src/index.js】，随便改成什么，再重新
+
+```
+npm run build
+```
+
+就会发现文件并没有新增，而且换了新鲜的哈希值。
+
+当然了，我之前说的那些话，同学不相信的话，可以把【new CleanWebpackPlugin()】这一行注释掉，然后再修改【src/index.js】，会发现【dist/js】下面的js文件会增多一条。
+
+### 使用webpack-dev-server
+
+既然刚刚都提到优化了，我们每次都需要build一下，感觉很呆。而webpack官方也提供热部署，那我们现在就使用起来
+
+安装webpack-dev-server
+
+```
+npm install webpack-dev-server --save-dev
+```
+
+新建文件【webpack.dev.config.js】📃
+
+```diff
+ webpackInit
+ |- config
+ |- webpack
+ |- webpack.common.config.js
+ |- webpack.prod.config.js
++ |- webpack.dev.config.js
+ 省略
+```
+
+然后加入如下代码
+
+```js
+const path = require('path');
+const merge = require('webpack-merge'); // 版本为4.x
+// webpack-merge 5.x版本应该改为 const { merge } = require('webpack-merge');
+const common = require('./webpack.common.config.js');
+
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = merge(common, {
+ mode: 'development',
+ output: {
+ filename: 'js/[name].[hash:8].bundle.js',
+ },
+ devServer: {
+ contentBase: path.resolve(__dirname, '../dist'),
+ open: true,
+ port: 9000,
+ compress: true,
+ hot: true
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: 'public/index.html',
+ inject: 'body',
+ hash: false
+ }),
+ new webpack.HotModuleReplacementPlugin()
+ ]
+});
+```
+
+修改文件【package.json】📃
+
+```diff
+"scripts": {
+- "start": "webpack --config ./config/webpack/webpack.common.config.js",
++ "start": "webpack-dev-server --inline --config ./config/webpack/webpack.dev.config.js",
+ "build": "webpack --config ./config/webpack/webpack.prod.config.js",
+ },
+```
+
+然后我们
+
+```
+npm run start
+```
+
+是不是自动开了一个端口为9000的网页，上面是我们写的页面内容，这和我们的配置都是一一对应的。
+现在你随意修改index.js中的代码，再回到页面看下是不是也跟着变了，那我们就整合webpack-dev-server成功！
+
+### 使用source-map
+
+source-map可以展示我们代码的错误位置，因为我们的代码都是被webpack打包过的，只有机器看得懂，我们人类无法正常识别。所以需要他。
+
+想试一下未开启是什么状态的同学可以自己故意把代码写错，然后看看控制台的报错。
+
+开启也十分简单。
+
+它的配置非常简单，只需要在 【webpack.dev.config.js】 中增加一个 `devtool` 属性即可！
+
+```diff
+module.exports = {
++ devtool: 'cheap-module-eval-source-map',
+ //...
+}
+```
+
+因为我们只有自己写代码的时候才需要查看，到生产环境就要关闭啦，不然我们的智慧结晶就要被【窃取】啦！所以我放在了
+
+## 中场休息
+
+这里回顾一下知识点。
+
+1. 我们先npm init 新建一个空白项目。
+2. 然后安装webpack，react。
+3. 发现无法编译jsx。
+4. 所以我们寻求了babel的帮助，并配置了所需要解析的内容。
+5. 觉得在html里面加入js很呆，所以引入了HtmlWebpackPlugin
+6. 因为觉得每次删除打包出来的东西很呆，所以引入了clean-webpack-plugin
+7. 因为每次都需要重新打包，所以使用webpack-dev
+8. 至于webpack-merge是为了打包和编译两个或者说多个状态做预备的，在上述的例子只有本地的dev和build两个环境。
+
+基本上上述的操作过程我都有解释，或者是注释，或者是在文章中说明。大家可以跟着节奏一步一步来，因为我也是一边写blog一边跑代码一边回顾知识点。
+
+至此，webpack算是告一……
+
+诶诶诶诶！js是可以解析了，那css呢！
+
+哦哦，好的，那我们继续启程
+
+## 重新起航
+
+### 使用css-loader和style-loader两兄弟
+
+假如我们直接引用css的话，会报错了。这里就不演示了，有兴趣的同学可以自己试试。
+
+所以，我们先走命令行敲击
+
+```
+npm install --save-dev style-loader css-loader
+```
+
+#### 两兄弟的关系
+
+来说说css-loader和style-loader他们这对鸳鸯的关系。
+
+首先css-loader会把你的CSS文件进行解析，因为webpack是用JS写的，运行在node环境，所以默认webpack打包的时候只会处理JS之间的依赖关系！
+
+所以我们之前的react里面的jsx需要babel的帮助，或者说需要【babel-loader】的帮助，所以我们的css同样需要【css-loader】的帮助，那么又关【style-loader】什么事？可不可以不装他呢？
+
+答案是：可以的，但是你使用起来会非常的麻烦。怎么个麻烦法呢？
+
+如果只用了【css-loader】解析出来的是这样的
+
+```
+["./src/index.css", ".test{↵ color: red;↵}", ""]
+```
+
+这样咋用嘛，你是解析了，可是你解析的是个XX。
+
+这个时候就需要我们的天降猛男【style-loader】
+
+style-loader 是通过一个JS脚本创建一个style标签，里面包含一些样式。style-loader是不能单独使用的，应为它并不负责解析 css 之前的依赖关系，每个loader的功能都是单一的，各自拆分独立。
+
+#### 上手！
+
+加入index.css
+
+```diff
+src
++ |- index.css
+ |- indexjs
+```
+
+index.css文件的内容如下
+
+```css
+.test{
+ color: red;
+}
+```
+
+修改index.js
+
+```js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css'
+
+const App = () => (
+
+
+
+
+
+
+
+
+```
+
+而且每个高阶组件的逻辑复用我们可能还要一个个去研读。
+
+
+
+### 复杂组件变得难以理解
+
+其实，这点非常好理解。举一个非常简单常见的例子大家就会明白了。
+
+场景：假如我有一个子组件Child，他的功能是这样的：父组建会给一个id，在组件创建的时候获取一下有关信息，在id改变的时候再重新获取。
+
+#### Class组件
+
+```javascript
+componentDidMount () {
+ this.fetch(this.props.id)
+ }
+componentDidUpdate (prevProps) {
+ if (prevProps.id !== this.props.id) {
+ this.fetch(this.props.id)
+ }
+}
+fetch = id => {
+ this.setState({ loading: true })
+ fetchInfo(id)
+ .then(info => this.setState({
+ info,
+ loading: false
+ }))
+}
+```
+
+#### React Hook：
+
+```javascript
+const fetch = id => {
+ this.setState({ loading: true })
+ fetchInfo(id)
+ .then(info => this.setState({
+ info,
+ loading: false
+ }))
+}
+useEffect(() => {
+ fetch(this.props.id)
+}, [this.props.id])
+```
+
+
+
+### 结论
+
+简单的说一下他的优点吧。
+
+1. 复用代码更加简单（需要什么就“钩”进来）
+2. 清爽的代码风格，一目了然。（useState支持数组和对象，可以清晰的定义特殊的字段等等）
+3. 代码量更少（可以看一下我之前的子父组建的例子）
+4. 更愿意去写一些小组件复用（我个人喜欢React就是因为他的组件写起来非常的顺手！ps：没有贬低其他框架的意思。。）
+5. 其实我个人认为React Hook在宣扬一个观念“按需加载”。
+
+## useState
+
+### 使用
+
+简单的使用在上面的探究-How里面有介绍，更多的在React官网也有介绍。
+
+#### 请回答以下代码的运行结果
+
+
+
+```javascript
+function Counter() {
+ const [count, setCount] = useState(0);
+
+ function handleAlertClick() {
+ setTimeout(() => {
+ alert('You clicked on: ' + count);
+ }, 3000);
+ }
+
+ return (
+ (initialState: (() => S) | S) {
+ const dispatcher = resolveDispatcher();
+ return dispatcher.useState(initialState);
+}
+```
+
+其实可以这样理解useState，useState其实就是useReducer的一个语法糖；但是这个不在这个问题的讨论范围内；
+
+好，收回来。
+
+其实我们在`const [xx, setXx] = useState(xx)`的时候就生成一个队列，我们暂时叫它为queue；所有这一轮运行读取到的state都被放到一个链表的队列里面去，然后再用do-while循环，每次都是拿到最新的值，但是不是Object.assgin的形式，而是直接赋值。话不多说直接源码。
+
+```js
+function updateReducer(reducer, initialArg, init) {
+// 获取初始化时的 hook
+ const hook = updateWorkInProgressHook();
+ const queue = hook.queue;
+
+ // 开始渲染更新
+ if (numberOfReRenders > 0) {
+ const dispatch = queue.dispatch;
+ if (renderPhaseUpdates !== null) {
+ // 获取Hook对象上的 queue，内部存有本次更新的一系列数据
+ const firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
+ if (firstRenderPhaseUpdate !== undefined) {
+ renderPhaseUpdates.delete(queue);
+ let newState = hook.memoizedState;
+ let update = firstRenderPhaseUpdate;
+ // 获取更新后的state
+ do {
+ const action = update.action;
+ // 此时的reducer是basicStateReducer，直接返回action的值
+ // 注意，这里是等于号所以
+ /**
+ *
+ * setObj({ a: 1, b: 1, c: 1 })
+ * setObj({ a: 2, b: 2 })
+ * setObj({ a: 3 })
+ *
+ * 到最后也只有只有{ a: 3 }，而b和c全没了
+ *
+ **/
+ newState = reducer(newState, action);
+ update = update.next;
+ } while (update !== null);
+ // 对 更新hook.memoized
+ hook.memoizedState = newState;
+ // 返回新的 state，及更新 hook 的 dispatch 方法
+ return [newState, dispatch];
+ }
+ }
+ }
+```
+
+
+
+## useEffect/useLayoutEffect
+
+### 提示
+
+在学习useEffect这个Hook的时候，淡化你知道的“生命周期”这个概念。
+
+#### useEffect和useLayoutEffect两兄弟的区别是什么？
+
+执行的时机不同
+
+那么具体哪里不同呢？
+
+其实在初始化useEffect和useLayoutEffect是没有区别的，他们真正的区别在于初始化之后；
+
+举个非常形象的例子🌰：
+
+除了初始化之后的一轮更新：
+
+> 浏览器：我要绘制了！
+>
+> React：等等，我有一个哥们临时有事要处理，他是：useLayoutEffect
+>
+> useLayoutEffect执行....
+>
+> React：好了，你可以开始绘制了～@浏览器
+>
+> 浏览器：好的
+>
+> 浏览器更新UI...
+>
+> 浏览器：我更新好了。你有什么事要做的吗？@React
+>
+> React：有的，useEffect你上
+>
+> useEffect执行....
+
+可能有点废话了。其实区别就是
+
+> useLayoutEffect()
+>
+> 浏览器绘制
+>
+> useEffect()
+
+这样其实大家也能很直接的看到弊端了。那就是useLayoutEffect如果有大量的计算的话，那样可能会阻塞UI更新，或者说UI渲染。所以还是要谨慎使用。
+
+一般来说他们没有什么太大的区别的，如果真的要使用useLayoutEffect的话要谨慎一些。不然可能会导致UI渲染阻塞之类的问题。
+
+但是，也不是没有使用场景。
+
+比如下面的这个代码就很需要useLayoutEffect
+
+```js
+function App() {
+ const [count, setCount] = useState(0);
+
+ useLayoutEffect(() => {
+ if (count === 0) {
+ const randomNum = 10 + Math.random()*200
+ setCount(10 + Math.random()*200);
+ }
+ }, [count]);
+
+ return (
+ (0)
+ const countRef = useRef(count)
+
+ useEffect(() => {
+ countRef.current = count
+ })
+
+ const handleCount = () => {
+ setTimeout(() => {
+ alert('current count: ' + countRef.current)
+ }, 3000);
+ }
+
+ //...
+}
+
+export default Counter
+```
+
+
+
+## memo
+
+#### memo没有回调函数的话是怎么浅比较的？
+
+先来看看memo没有回调函数的时候他做了什么。
+
+memo它是一个高阶组件（HOC）他与React.PureComponent十分相似。除了使用的地方不同（Class组件和Function组件）之外几乎一致。
+
+Memo内部和PureComponent一样使用Object.is用于前对比，如果传入的props内存地址不变的话，那就不会渲染了（或者说复用最近的一次渲染）。
+
+下面可以看源码事例
+
+```js
+function updateMemoComponent(
+ current: Fiber | null,
+ workInProgress: Fiber,
+ Component: any,
+ nextProps: any,
+ updateExpirationTime,
+ renderExpirationTime: ExpirationTime,
+): null | Fiber {
+
+ /* ...省略...*/
+
+ // 判断更新的过期时间是否小于渲染的过期时间
+ if (updateExpirationTime < renderExpirationTime) {
+ const prevProps = currentChild.memoizedProps;
+
+ // 如果自定义了compare函数，则采用自定义的compare函数，否则采用官方的shallowEqual(浅比较)函数。（下面有解析）
+ let compare = Component.compare;
+ compare = compare !== null ? compare : shallowEqual;
+
+ /**
+ * 1. 判断当前 props 与 nextProps 是否相等；
+ * 2. 判断即将渲染组件的引用是否与workInProgress Fiber中的引用是否一致；
+ *
+ * 只有两者都为真，才会退出渲染。
+ */
+ if (compare(prevProps, nextProps) && current.ref === workInProgress.ref) {
+ // 如果都为真，则退出渲染
+ return bailoutOnAlreadyFinishedWork(
+ current,
+ workInProgress,
+ renderExpirationTime,
+ );
+ }
+ }
+
+ /* ...省略...*/
+
+```
+
+shallowEqual（浅比较）
+
+```js
+// 用原型链的方法
+const hasOwn = Object.prototype.hasOwnProperty
+
+// 这个函数实际上是Object.is()的polyfill
+function is(x, y) {
+ if (x === y) {
+ return x !== 0 || y !== 0 || 1 / x === 1 / y
+ } else {
+ return x !== x && y !== y
+ }
+}
+
+export default function shallowEqual(objA, objB) {
+ // 首先对基本数据类型的比较
+ if (is(objA, objB)) return true
+ // 由于Obejct.is()可以对基本数据类型做一个精确的比较， 所以如果不等
+ // 只有一种情况是误判的，那就是object,所以在判断两个对象都不是object
+ // 之后，就可以返回false了
+ if (typeof objA !== 'object' || objA === null ||
+ typeof objB !== 'object' || objB === null) {
+ return false
+ }
+
+ // 过滤掉基本数据类型之后，就是对对象的比较了
+ // 首先拿出key值，对key的长度进行对比
+
+ const keysA = Object.keys(objA)
+ const keysB = Object.keys(objB)
+
+ // 长度不等直接返回false
+ if (keysA.length !== keysB.length) return false
+ // key相等的情况下，在去循环比较
+ for (let i = 0; i < keysA.length; i++) {
+ // key值相等的时候
+ // 借用原型链上真正的 hasOwnProperty 方法，判断ObjB里面是否有A的key的key值
+ // 属性的顺序不影响结果也就是{name:'daisy', age:'24'} 跟{age:'24'，name:'daisy' }是一样的
+ // 最后，对对象的value进行一个基本数据类型的比较，返回结果
+ if (!hasOwn.call(objB, keysA[i]) ||
+ !is(objA[keysA[i]], objB[keysA[i]])) {
+ return false
+ }
+ }
+
+ return truea
+}
+```
+
+由源码可以知道，加入没有传一个比较的回调函数会使用官方的浅比较。具体的可以看注释
+
+#### memo的回调函数
+
+我们都知道react的生命周期中有一个shouldComponentUpdate。在这个函数中返回true的话就代表本次render需要执行，而返回false就可以跳过本次的render。
+
+而memo正好相反，返回true表示本次跳过，返回false就表示本次需要执行render。
+
+具体怎么用呢？
+
+大家可以自己运行一下，看看效果。一定要自己试一下，不然很容易和shouldComponentUpdate弄混了。学习还是要自己动手才行。
+
+```js
+function ChangeLog({w = ''}){
+ // 省略
+ console.log('====render====')
+}
+export default memo(ChangeLog, (prevProps, nextProps) => {
+ if (prevProps.w !== nextProps.w) {
+ return false
+ }
+ return true
+});
+```
+
+## useMemo/useCallback
+
+ ### 前言
+
+之所以把这useMomo/useCallack两兄弟和在一起。是因为他们其实十分相似。
+
+> 一个是缓存变量（useMemo），一个是缓存函数（useCallback）。
+
+其实这么一说就清晰很多了。
+
+具体的使用和useEffect一样，都是第一个参数为调用时的回调函数，第二个参数是调用判断所监听的值（可以是变量，也可以是函数）
+
+```js
+const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
+const memoizedValue = useCallback(() => computeExpensiveValue(a, b), [a, b]);
+```
+
+useMemo() 返回的是一个 memoized 值，只有当依赖项（比如上面的 a,b 发生变化的时候，才会重新计算这个 memoized 值）
+
+memoized 值不变的情况下，不会重新触发渲染逻辑。
+
+说起渲染逻辑，需要记住的是 useMemo() 是在 render 期间执行的，所以不能进行一些额外的副操作，比如网络请求等。
+
+如果没有提供依赖数组（上面的 [a,b]）则每次都会重新计算 memoized 值，也就会 re-redner
+
+useCallback也是一样的，这里就不多赘述了。
+
+## useReducer/useContext
+
+### 前言
+
+帮他们两兄弟和在一起说主要说因为他们两兄弟在一般情况下是可以与Redux一战的。
+
+但是！！
+
+但是啊，但是如果你需要中间价，或者说需要“时间旅行”，又或者临时需要跨页面级的数据共享，那你还是需要redux来解决的。不过基本上的场景我们使用useReducer和useContext就可以完美的替代redux了。
+
+### 怎么做？
+
+其实之前由于要起一个新项目，但是突然发现有一个爷爷组件的值为需要通知给孙子组件，然后孙子组件可能会用掉回调函数调用爷爷组件的方法。那个时候其实已经用Hook写了一半了，懒得加Redux了，又不想一层层传props下去。怎么办？
+
+通过了解，我知道了useReducer/useContext刚刚好可以解决我的需求。
+
+```js
+const TodosDispatch = React.createContext(null);
+
+const initialState = { bar: null };
+
+function reducer(state, action) {
+ switch (action.type) {
+ case 'setCenter':
+ return { ...state, bar: action.bar };
+ default:
+ return state
+ }
+}
+
+// 虽然这个是自组件，但是哪怕是曾曾曾孙子组件都可以直接用useContext拿到dispatch
+function DeepChild(props) {
+ // 如果我们想要执行一个 action，我们可以从 context 中获取 dispatch。
+ const dispatch = useContext(TodosDispatch);
+
+ function handleClick() {
+ dispatch({ type: 'add', text: 'hello' });
+ }
+
+ return (
+
+ );
+}
+
+function TodosApp() {
+ // 提示：`dispatch` 不会在重新渲染之间变化
+ const [state, dispatch] = useReducer(reducer, initialState);
+
+ return (
+
+
+ );
+}
+```
+
+## useImperativeHandle/forwardRef
+
+这里就不多说了，基本上没有什么坑点和疑难点。
+
+说一下基本用法和ant-design form中的使用
+
+### 正常使用
+
+```js
+useImperativeHandle(ref, createHandle, [deps])
+```
+
+`useImperativeHandle` 可以让你在使用 `ref` 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。`useImperativeHandle` 应当与 `forwardRef`一起使用：
+
+```js
+function FancyInput(props, ref) {
+ const inputRef = useRef();
+ useImperativeHandle(ref, () => ({
+ focus: () => {
+ inputRef.current.focus();
+ }
+ }));
+ return ;
+}
+FancyInput = forwardRef(FancyInput);
+```
+
+在本例中，渲染('');
+ useDebugValue('debug');
+ return {
+ str, setStr
+ }
+}
+export default (): JSX.Element => {
+ const { str, setStr } = useTest();
+ return (
+ <>
+ ('');
+ useDebugValue(str, (value:string) => {
+ console.log(value);
+ return '这是改造后的' + value;
+ });
+ return {
+ str, setStr
+ }
+}
+export default (): JSX.Element => {
+ const { str, setStr } = useTest();
+ return (
+ <>
+
+ ,
+ container: Container,
+ callback: ?Function,
+ ) {
+ + console.log(222);
+ if (__DEV__) {
+ console.error(
+ 'ReactDOM.render is no longer supported in React 18. Use createRoot ' +
+ 'instead. Until you switch to the new API, your app will behave as ' +
+ "if it's running React 17. Learn " +
+ 'more: https://reactjs.org/link/switch-to-createroot',
+ );
+ }
+
+ invariant(
+ isValidContainerLegacy(container),
+ 'Target container is not a DOM element.',
+ );
+ if (__DEV__) {
+ const isModernRoot =
+ isContainerMarkedAsRoot(container) &&
+ container._reactRootContainer === undefined;
+ if (isModernRoot) {
+ console.error(
+ 'You are calling ReactDOM.render() on a container that was previously ' +
+ 'passed to ReactDOM.createRoot(). This is not supported. ' +
+ 'Did you mean to call root.render(element)?',
+ );
+ }
+ }
+ return legacyRenderSubtreeIntoContainer(
+ null,
+ element,
+ container,
+ false,
+ callback,
+ );
+ }
+ ```
+
+3. 打开React源码的项目
+4. 运行`yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE`重新打包
+5. 打开我们创建的React项目
+6. `yarn start`
+7. 打开控制台
+
+
+
+## 6. 后续
+
+每次修改源代码都需要
+
+1. 运行`yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE`重新打包
+2. 刷新一下我们的页面
+3. 确实很麻烦目前没有好的主意
+ 1. 可能这就是修行吧！
+
+# 结语
+
+有问题可以在下方留言，感觉有帮助。帮忙点个赞
\ No newline at end of file
diff --git "a/source/_posts/\345\211\215\347\253\257\350\277\233\351\230\266-\351\205\215\347\275\256\344\275\240\350\207\252\345\267\261\347\232\204\350\204\232\346\211\213\346\236\266.md" "b/source/_posts/\345\211\215\347\253\257\350\277\233\351\230\266-\351\205\215\347\275\256\344\275\240\350\207\252\345\267\261\347\232\204\350\204\232\346\211\213\346\236\266.md"
new file mode 100644
index 00000000..47086600
--- /dev/null
+++ "b/source/_posts/\345\211\215\347\253\257\350\277\233\351\230\266-\351\205\215\347\275\256\344\275\240\350\207\252\345\267\261\347\232\204\350\204\232\346\211\213\346\236\266.md"
@@ -0,0 +1,185 @@
+---
+title: 【前端进阶】从零搭建属于你的脚手架
+date: 2020-06-06 21:41:06
+tags: [脚手架]
+category: [前端]
+cover: /image/cover/web.jpeg
+---
+# 给自己搭建一个脚手架
+## 背景
+
+### 一丶跳出舒适区
+
+大部分前端选手，也包括我自己，经常都是vue-cli，或者create-react-app一把梭。不得不承认这些著名的脚手架写的确实好，能够给我们做项目提速。但是久而久之很容易进入自己的舒适区，最近不是很流行“跳出舒适区”吗？而且各大培训机构都做贩卖焦虑，就为了可以让更多的人可以去买课。
+
+这里我就不贩卖焦虑了。大家有自己的选择，只要自己不后悔就好。
+
+### 二丶市面上脚手架的缺陷
+
+虽然vue-cli等脚手架已经布置好了很多东西，包括router，css的解析等等。
+
+但是！
+
+但是啊，但是这些脚手架并不知道我们公司的或者说我们个人项目的网络请求，而且网络请求内部怎么封装的也没有统一的处理。也不知道我们的一些通用的登陆页等等。这些都需要我们重新的CV一下，或者自己重新做。
+
+### 三丶过分使用别人搭建的脚手架可能会带来以下问题
+
+- 忘记，或者不知道webpack或者路由的配置，经常会在面试的临时抱佛脚，不能够真正的掌握，终究是纸上谈兵
+- 一些常见的坑点都被别人踩过并铺好路了，在不了解原理又没有踩过坑的情况下如果碰到问题很容易耽误大量的时间
+- 一些新框架的升级，只能等别人的cli版本升级之后才可以享受。慢人一步！
+- 配置一些项目相关的东西，经常需要翻看文档。
+- ……
+
+### 四丶原因
+
+我们做脚手架有以下几个原因
+
+- 学习脚手架的思想
+- 了解脚手架的构成
+- 省略一下CV的操作，更快更灵活的开始自己公司或者自己个人项目
+- 可以深入的配置自己的项目
+
+
+
+## 开始
+
+### 准备工作
+
+#### commander
+
+用于node.js命令行界面的完整解决方案。基本上是前端脚手架必备的。
+
+这里只介绍
+
+- version
+- command
+- description
+- action
+
+简单使用，毕竟只是入门，后续一些复杂的定制化的就需要大家自己去探索了。
+
+好了，收！
+
+怎么用？
+
+```js
+const { program } = require('commander')
+program
+ .version(`react-cli-mobile ${packages.version}`)
+ .command('create ')
+ .description('初始化模板')
+ .action((projectName, cmd) => {
+ const options = cleanArgs(cmd)
+ creator(projectName, options)
+ })
+```
+
+
+
+#### fs-extra
+
+**fs-extra模块是系统fs模块的扩展，提供了更多便利的 API，并继承了fs模块的 API**
+
+这里只介绍
+
+- ### copy 复制文件
+
+- existsSync
+
+copy用于复制。网上的一些脚手架教程用的是[download-git-repo]库。我发现这个只能下载某个仓库的文件，这样的话会导致我的项目会有两个。一个用于脚手架的代码，另一个是template的仓库。这样我觉得不太适合我，因为我不是很想找脚手架上面下太多的功夫搞交互，我只是想可以更方便更快的新建我的项目，而且我也不想弄两个仓库，我觉得有点多余。
+
+当然了，这只代表我的个人想法，大家可以自行选择。
+
+
+
+怎么用？
+
+```js
+const fs = require('fs-extra')
+if(fs.existsSync(targetDir)) {
+ console.error('目录已经存在')
+ return
+}
+
+// 复制模板文件
+ await fs.copy(src, dest)
+```
+
+
+
+#### path
+
+很简单，字面意思，主要是用于配合【fs-extra】这个库来使用的，主要还是给copy提供路径，就不多介绍了
+
+
+
+怎么用？
+
+```js
+const path = require('path')
+const src = path.resolve(__dirname, dir);
+
+const dest = path.resolve(process.cwd(), projectName);
+
+// 复制模板文件
+await fs.copy(src, dest)
+```
+
+
+
+
+
+ok，至此差不多我们的一个脚手架就可以出来了，其他的一些log颜色，路径判断，单词差异优化都不在本次介绍的范围内，本文主要是完成一个脚手架，然后重头戏还是自己的template。
+
+
+
+### 步骤
+
+- 新建一个自己的文件夹
+- npm init配置
+- 获取用户输入的信息
+- 把自己的初始化项目放到template文件夹下面
+- cpoy 路径和自己template的路径，然后复制
+
+#### 代码
+
+代码的话这里就不贴了
+
+大家可以直接到 [react-cli-mobile]([https://github.com/DerrickTel/react-cli-mobile](react-cli-mobile))上面看，里面有一些更加细微的操作。
+
+
+
+## 结语
+
+本来自己从webpack配置开始，从零搭建一个由
+
+- fetch
+- webpack
+- less（配置了css module
+- react
+- react-router（实现react原生懒加载）
+- typescript
+- 移动端适配（使用VW适配）
+- babel兼容低版本
+
+大家可以
+
+- npm install react-cli-mobile -g
+- react-cli-mobile create xx
+- cd xx
+- npm install
+- npm start
+- 打开http://localhost:9000
+
+或者直接查看源码
+
+大家可以直接到 [react-cli-mobile]([https://github.com/DerrickTel/react-cli-mobile](react-cli-mobile))上面看
+
+
+
+## 最后的最后
+
+哪里写错了，或者写的不好，或者有不懂的欢迎大家在评论区交流
+
+> 后续会继续推出从零配置移动端的webpack等配置的文章！欢迎大家关注点赞！谢谢！
+
diff --git "a/source/_posts/\350\243\205\351\245\260\345\231\250(Decorator)\345\222\214React\351\253\230\351\230\266\347\273\204\344\273\266(HOC).md" "b/source/_posts/\350\243\205\351\245\260\345\231\250(Decorator)\345\222\214React\351\253\230\351\230\266\347\273\204\344\273\266(HOC).md"
new file mode 100644
index 00000000..0e545224
--- /dev/null
+++ "b/source/_posts/\350\243\205\351\245\260\345\231\250(Decorator)\345\222\214React\351\253\230\351\230\266\347\273\204\344\273\266(HOC).md"
@@ -0,0 +1,185 @@
+---
+title: 装饰器(Decorator)和React高阶组件(HOC)
+date: 2019-09-15 21:59:48
+tags: [React, ES6]
+category: [ES6]
+cover: /image/cover/decorator.png
+---
+## 什么是装饰器(Decorator)
+装饰器（Decorator）是一种`与类（class）相关`的语法，用来注释或修改类和类方法。
+装饰器是一种函数，写成`@ + 函数名`。它可以放在类和类方法的定义前面。
+其实只是一个语法糖. 还没有正式发布, 还需要插件`babel-plugin-transform-decorators-legacy`使用
+## 装饰器(Decorator)使用
+
+### 类的装饰器
+
+```javascript
+@testable
+class MyTestableClass {
+ // ...
+}
+
+function testable(target) {
+ target.isTestable = true;
+}
+
+MyTestableClass.isTestable // true
+```
+
+上面代码中，`@testable`就是一个装饰器。它修改了`MyTestableClass`这个类的行为，为它加上了静态属性`isTestable`。`testable`函数的参数`target`是`MyTestableClass`类本身。
+
+也就是说，装饰器是一个对类进行处理的函数。装饰器函数的第一个参数，就是所要装饰的目标类。
+
+```javascript
+function testable(target) {
+ // ...
+}
+```
+如果想传参，可以在装饰器外面再封装一层函数。
+
+```javascript
+function testable(isTestable) {
+ return function(target) {
+ target.isTestable = isTestable;
+ }
+}
+
+@testable(true)
+class MyTestableClass {}
+MyTestableClass.isTestable // true
+
+@testable(false)
+class MyClass {}
+MyClass.isTestable // false
+```
+上面代码中，装饰器`testable`可以接受参数，这就等于可以修改装饰器的行为。
+
+注意，装饰器对类的行为的改变，是代码编译时发生的，而不是在运行时。这意味着，装饰器能在编译阶段运行代码。也就是说，装饰器本质就是编译时执行的函数。
+
+前面的例子是为类添加一个静态属性，如果想添加实例属性，可以通过目标类的`prototype`对象操作。
+
+```javascript
+function testable(target) {
+ target.prototype.isTestable = true;
+}
+
+@testable
+class MyTestableClass {}
+
+let obj = new MyTestableClass();
+obj.isTestable // true
+```
+
+上面代码中，装饰器函数`testable`是在目标类的`prototype`对象上添加属性，因此就可以在实例上调用。
+
+
+
+```javascript
+function testable(target) {
+ target.prototype.isTestable = true;
+}
+
+@testable
+class MyTestableClass {}
+
+let obj = new MyTestableClass();
+obj.isTestable // true
+```
+
+
+ - 实际开发中，React 与 Redux 库结合使用时
+
+常常需要写成下面这样
+
+```javascript
+class MyReactComponent extends React.Component {}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);
+```
+
+有了装饰器，就可以改写上面的代码。
+
+```javascript
+@connect(mapStateToProps, mapDispatchToProps)
+export default class MyReactComponent extends React.Component {}
+```
+### 类的方法的装饰器
+
+```javascript
+function readonly(target, name, descriptor){
+ // descriptor对象原来的值如下
+ // {
+ // value: specifiedFunction,
+ // enumerable: false,
+ // configurable: true,
+ // writable: true
+ // };
+ descriptor.writable = false;
+ return descriptor;
+}
+
+readonly(Person.prototype, 'name', descriptor);
+// 类似于
+Object.defineProperty(Person.prototype, 'name', descriptor);
+```
+装饰器第一个参数是类的原型对象，上例是`Person.prototype`，装饰器的本意是要“装饰”类的实例，但是这个时候实例还没生成，所以只能去装饰原型（这不同于类的装饰，那种情况时`target`参数指的是类本身）；第二个参数是所要装饰的属性名，第三个参数是该属性的描述对象。
+
+> 其余使用方法与类的装饰器相同(参数变为3个了~)
+
+### 多个装饰器
+如果同一个方法有多个装饰器，会像剥洋葱一样，先从外到内进入，然后由内向外执行。
+
+```javascript
+function dec(id){
+ console.log('evaluated', id);
+ return (target, property, descriptor) => console.log('executed', id);
+}
+
+class Example {
+ @dec(1)
+ @dec(2)
+ method(){}
+}
+// evaluated 1
+// evaluated 2
+// executed 2
+// executed 1
+```
+### 装饰器不能作用于函数
+
+装饰器只能用于类和类的方法，不能用于函数，因为存在函数提升。
+
+## React高阶组件(HOC)
+
+```react
+import React from 'react';
+
+export default Component => class extends React.Component {
+ render() {
+ return `
+
+如果模块存在，可以查看该模块的一些基本信息：
+
+
+
+如果该模块名从未被使用过，则会抛出 404 错误：
+
+
+
+## version（版本号）
+
+- `version`和`name`组成在`npm`内部的一个唯一标识符。
+- 假如你不想发布的话那这个`name`和`version`就不是必填项了
+
+- 版本必须可由[node-semver](https://github.com/npm/node-semver)解析 ，它作为依赖项与 npm 捆绑在一起。（`npm install semver`自己使用。）
+- 我们可以执行以下命令查看模块的版本：
+
+```javascript
+npm view version # 查看某个模块的最新版本
+npm view versions # 查看某个模块的所有历史版本
+```
+
+- `npm view version`
+
+
+
+- `npm view versions`
+
+
+
+
+
+## description（项目描述）
+
+此文档是您需要了解的有关 `package.json` 文件中所需内容的全部信息。它必须是实际的 `JSON`，而不仅仅是 `JavaScript `对象文字。
+
+本文档中描述的许多行为受 中描述的配置设置的影响[`config`](https://docs.npmjs.com/cli/v7/using-npm/config)。
+
+## keywords
+
+把关键字放进去。它是一个字符串数组。这有助于人们发现您的包裹，因为它在 中列出`npm search`。
+
+## homepage（项目主页）
+
+项目主页的` url`。
+
+例子：
+
+```json
+"homepage" ：“https://github.com/owner/project#readme”
+```
+
+## bugs（问题追踪）
+
+项目问题跟踪器的 url 和/或应报告问题的电子邮件地址。这些对于遇到包裹问题的人很有帮助。
+
+它应该是这样的：
+
+```json
+{
+ "url" : "https://github.com/owner/project/issues" ,
+ "email" ："project@hostname.com"
+}
+```
+
+您可以指定一个或两个值。如果您只想提供一个 url，您可以将“bugs”的值指定为一个简单的字符串而不是一个对象。
+
+如果提供了` url`，它将被`npm bugs`命令使用。
+
+## license（执照）
+
+你应该为你的包指定一个许可证，以便人们知道他们如何被允许使用它，以及你对它施加的任何限制。
+
+如果您使用的是 BSD-2-Clause 或 MIT 等通用许可证，请为您使用的许可证添加当前的` SPDX` 许可证标识符，如下所示：
+
+```json
+{
+ "license" : "BSD-3-Clause"
+}
+```
+
+您可以查看[SPDX 许可证 ID 的完整列表](https://spdx.org/licenses/)。理想情况下，您应该选择 [OSI](https://opensource.org/licenses/alphabetical)批准的一种。
+
+如果您的软件包在多个通用许可下获得许可，请使用[SPDX 许可表达式语法版本 2.0 string](https://www.npmjs.com/package/spdx)，如下所示：
+
+```json
+{
+ "license" : "(ISC OR GPL-3.0)"
+}
+```
+
+如果您使用的许可证尚未分配` SPDX` 标识符，或者您使用的是自定义许可证，请使用如下字符串值：
+
+```json
+{
+ "license" : "SEE LICENSE IN "
+}
+```
+
+然后包含一个``在包的顶层命名的文件。
+
+一些旧包使用许可证对象或包含许可证对象数组的“许可证”属性：
+
+
+
+```json
+// 无效的元数据
+{
+ "license" : {
+ "type" : "ISC",
+ "url" : "https://opensource.org/licenses/ISC"
+ }
+}
+
+// 无效的元数据
+{
+ "licenses" : [
+ {
+ "type": "MIT",
+ "url": "https://www.opensource.org/licenses/mit-license.php"
+ },
+ {
+ "type": "Apache-2.0",
+ "url": "https://opensource.org/licenses/apache2.0.php"
+ }
+ ]
+}
+```
+
+这些样式现在已被弃用。相反，使用` SPDX `表达式，如下所示：
+
+```json
+{
+ "license": "ISC"
+}
+```
+
+```json
+{
+ "license": "(MIT OR Apache-2.0)"
+}
+```
+
+最后，如果您不希望根据任何条款授予他人使用私有或未发布包的权利：
+
+```json
+{
+ "license": "UNLICENSED"
+}
+```
+
+还要考虑设置`"private": true`以防止意外发布。
+
+## author, contributors（作者和贡献者）
+
+“作者”是一个人。“贡献者”是一群人。“person”是一个带有“name”字段和可选的“url”和“email”的对象，像这样：
+
+
+
+```json
+{
+ "name" : "Barney Rubble",
+ "email" : "b@rubble.com",
+ "url" : "http://barnyrubble.tumblr.com/"
+}
+```
+
+或者，您可以将其全部缩短为一个字符串，然后 npm 将为您解析它：
+
+
+
+```json
+{
+ "author": "Barney Rubble (http://barnyrubble.tumblr.com/)"
+}
+```
+
+email 和 url 都是可选的。
+
+npm 还使用您的 npm 用户信息设置顶级“维护者”字段。
+
+## funding（档案）
+
+可选`files`字段是一个文件模式数组，它描述了当您的包作为依赖项安装时要包含的条目。文件模式遵循与 类似的语法`.gitignore`，但相反：包含文件、目录或 glob 模式（`*`,`**/*`等）将使该文件在打包时包含在 tarball 中。省略该字段将使其默认为`["*"]`，这意味着它将包含所有文件。
+
+一些特殊的文件和目录也会被包含或排除，无论它们是否存在于`files`数组中（见下文）。
+
+您还可以`.npmignore`在包的根目录或子目录中提供一个文件，以防止文件被包含在内。在包的根目录中，它不会覆盖“文件”字段，但在子目录中会覆盖。该`.npmignore`文件就像一个`.gitignore`. 如果有一个`.gitignore`文件，并且`.npmignore`丢失了，`.gitignore`则将使用 的内容。
+
+文件包含了“的package.json＃文件”栏中*无法*通过排除`.npmignore`或`.gitignore`。
+
+无论设置如何，始终包含某些文件：
+
+- `package.json`
+- `README`
+- `CHANGES`/ `CHANGELOG`/`HISTORY`
+- `LICENSE` / `LICENCE`
+- `NOTICE`
+- “主要”字段中的文件
+
+`README`, `CHANGES`, `LICENSE`&`NOTICE`可以有任何大小写和扩展名。
+
+相反，一些文件总是被忽略：
+
+- `.git`
+- `CVS`
+- `.svn`
+- `.hg`
+- `.lock-wscript`
+- `.wafpickle-N`
+- `.*.swp`
+- `.DS_Store`
+- `._*`
+- `npm-debug.log`
+- `.npmrc`
+- `node_modules`
+- `config.gypi`
+- `*.orig`
+- `package-lock.json`（ [`npm-shrinkwrap.json`](https://docs.npmjs.com/cli/v7/configuring-npm/npm-shrinkwrap-json)如果您希望发布，请使用）
+
+## main（主要入口）
+
+- `main` 字段是 `package.json` 中的另一种元数据功能，它可以用来指定加载的入口文件。假如你的项目是一个 `npm` 包，当用户安装你的包后，`require('my-module')` 返回的是 `main` 字段中所列出文件的 `module.exports` 属性。
+
+- 当不指定`main` 字段时，默认值是模块根目录下面的`index.js` 文件。
+
+## browser（浏览器）
+
+如果您的模块打算在客户端使用，则应使用浏览器字段而不是主字段。这有助于提示用户它可能依赖于 Node.js 模块中不可用的原语。（例如 `window`）
+
+
+
+## bin（自定义命令）
+
+很多包都有一个或多个他们想要安装到 PATH 中的可执行文件。npm 使这变得非常简单（实际上，它使用此功能来安装“npm”可执行文件。）
+
+要使用它，请`bin`在 package.json 中提供一个字段，它是命令名到本地文件名的映射。在安装时，npm 会将该文件符号链接到`prefix/bin`全局安装或`./node_modules/.bin/`本地安装。
+
+给大家看看我自己做一个简单的demo：
+
+```json
+{
+ "name": "react-cli-library",
+ "version": "0.0.2",
+ "description": "",
+ "bin": {
+ "react-cli": "./bin/index.js"
+ },
+}
+```
+
+我的名称叫做react-cli-library。
+
+所以，`npm i react-cli-library`
+
+
+
+安装完成之后，执行react-cli就会有一些命令，他会执行我的根目录底下`./bin/index.js`这个文件。
+
+
+
+虽然我的项目名称是：`react-cli-library`。但是我执行的内容却是`react-cli`，这个取决于bin的内容
+
+## man（快捷入口）
+
+用来给Linux下的man命令查找文档地址，是个单一文件或者文件数组。 如果是单一文件，安装完成后，他就是man + 的结果，和此文件名无关，例如：
+
+```
+{
+ "name": "foo",
+ "version": "1.2.3",
+ "description": "A packaged foo fooer for fooing foos",
+ "main": "foo.js",
+ "man": "./man/doc.1"
+}
+```
+
+通过man foo命令会得到 ./man/doc.1 文件的内容。
+如果man文件名称不是以模块名称开头的，安装的时候会给加上模块名称前缀。因此，下面这段配置：
+
+```
+{
+ "name": "foo",
+ "version": "1.2.3",
+ "description": "A packaged foo fooer for fooing foos",
+ "main": "foo.js",
+ "man": [
+ "./man/foo.1",
+ "./man/bar.1"
+ ]
+}
+```
+
+会创建一些文件来作为man foo和man foo-bar命令的结果。
+man文件必须以数字结尾，或者如果被压缩了，以.gz结尾。数字表示文件将被安装到man的哪个部分。
+
+```
+{
+ "name": "foo",
+ "version": "1.2.3",
+ "description": "A packaged foo fooer for fooing foos",
+ "main": "foo.js",
+ "man": [
+ "./man/foo.1",
+ "./man/foo.2"
+ ]
+}
+```
+
+会创建 man foo 和 man 2 foo 两条命令。
+
+## directories（目录）
+
+CommonJS [Packages](http://wiki.commonjs.org/wiki/Packages/1.0)规范详细说明了一些可以使用`directories`对象指示包结构的方法。如果您查看[npm 的 package.json](https://registry.npmjs.org/npm/latest)，您会看到它包含 doc、lib 和 man 目录。
+
+将来，这些信息可能会以其他创造性的方式使用。
+
+#### 目录.bin
+
+如果在 中指定`bin`目录`directories.bin`，则将添加该文件夹中的所有文件。
+
+由于`bin`指令的工作方式，同时指定`bin`路径和设置`directories.bin`是错误的。如果要指定单个文件，请使用`bin`，对于现有`bin` 目录中的所有文件，请使用`directories.bin`。
+
+#### 目录.man
+
+一个充满手册页的文件夹。Sugar 通过遍历文件夹来生成“man”数组。
+
+## repository（代码存储位置）
+
+指定代码所在的位置。这对想要贡献的人很有帮助。如果 git repo 在 GitHub 上，那么该`npm docs` 命令将能够找到您。
+
+像这样做：
+
+
+
+```json
+{
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/npm/cli.git"
+ }
+}
+```
+
+URL 应该是一个公开可用的（可能是只读的）url，可以直接传递给 VCS 程序，无需任何修改。它不应该是您放入浏览器的 html 项目页面的 url。是给电脑用的。
+
+对于 GitHub、GitHub gist、Bitbucket 或 GitLab 存储库，您可以使用与 相同的快捷语法`npm install`：
+
+
+
+```json
+{
+ "repository": "npm/npm",
+
+ "repository": "github:user/repo",
+
+ "repository": "gist:11081aaa281",
+
+ "repository": "bitbucket:user/repo",
+
+ "repository": "gitlab:user/repo"
+}
+```
+
+如果`package.json`您的包的 不在根目录中（例如，如果它是 monorepo 的一部分），您可以指定它所在的目录：
+
+
+
+```json
+{
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/facebook/react.git",
+ "directory": "packages/react-dom"
+ }
+}
+```
+
+## config（配置内容）
+
+“config”对象可用于设置在升级过程中持续存在的包脚本中使用的配置参数。例如，如果一个包具有以下内容：
+
+
+
+```json
+{
+ "name": "foo",
+ "config": {
+ "port": "8080"
+ }
+}
+```
+
+然后有一个“开始”命令，然后引用 `npm_package_config_port`环境变量，然后用户可以通过执行`npm config set foo:port 8001`.
+
+查看[`config`](https://docs.npmjs.com/cli/v7/using-npm/config)和[`scripts`](https://docs.npmjs.com/cli/v7/using-npm/scripts)了解更多关于包配置的信息。
+
+
+
+## peerDependencies（对等依赖）
+
+在某些情况下，您希望表达您的包与主机工具或库的兼容性，而不必执行`require`此主机的操作。这通常称为*插件*。值得注意的是，您的模块可能会公开主机文档所预期和指定的特定接口。
+
+例如：
+
+
+
+```json
+{
+ "name": "tea-latte",
+ "version": "1.3.5",
+ "peerDependencies": {
+ "tea": "2.x"
+ }
+}
+```
+
+这确保您的软件包`tea-latte`只能与主机软件包的第二个主要版本*一起*安装`tea`。`npm install tea-latte`可能会产生以下依赖图：
+
+
+
+```bash
+├── tea-latte@1.3.5
+└── tea@2.2.0
+```
+
+在 npm 版本 3 到 6 中，`peerDependencies`不会自动安装，如果在树中发现对等依赖项的无效版本，则会发出警告。由于NPM V7的，peerDependencies*被* 默认安装。
+
+如果无法正确解析树，尝试安装具有冲突要求的另一个插件可能会导致错误。因此，请确保您的插件要求尽可能广泛，而不是将其锁定为特定的补丁版本。
+
+假设主机符合[semver](https://semver.org/)，只有主机包的主要版本中的更改才会破坏您的插件。因此，如果您使用过主机包的每个 1.x 版本，请使用`"^1.0"`或`"1.x"` 来表达这一点。如果您依赖 1.5.2 中引入的功能，请使用 `"^1.5.2"`.
+
+
+
+## peerDependenciesMeta（捆绑依赖）
+
+这定义了在发布包时将捆绑的包名称数组。
+
+如果您需要在本地保留 npm 包或通过单个文件下载使它们可用，您可以通过在`bundledDependencies` 数组中指定包名称并执行`npm pack`.
+
+例如：
+
+如果我们像这样定义 package.json：
+
+
+
+```json
+{
+ "name": "awesome-web-framework",
+ "version": "1.0.0",
+ "bundledDependencies": [
+ "renderized",
+ "super-streams"
+ ]
+}
+```
+
+我们可以`awesome-web-framework-1.0.0.tgz`通过运行获取文件`npm pack`。此文件包含的依赖关系`renderized`，并`super-streams`可以通过执行安装在一个新的项目`npm install awesome-web-framework-1.0.0.tgz`。请注意，包名称不包含任何版本，因为该信息在`dependencies`.
+
+如果这是拼写`"bundleDependencies"`，那么这也很荣幸。
+
+## optionalDependencies（可选依赖项）
+
+如果可以使用依赖项，但如果找不到或安装失败，您希望 npm 继续，那么您可以将其放入 `optionalDependencies`对象中。这是包名称到版本或 url 的映射，就像`dependencies`对象一样。不同之处在于构建失败不会导致安装失败。运行`npm install --no-optional`将阻止安装这些依赖项。
+
+处理缺少依赖项仍然是您的程序的责任。例如，这样的事情：
+
+
+
+```js
+try {
+ var foo = require('foo')
+ var fooVersion = require('foo/package.json').version
+} catch (er) {
+ foo = null
+}
+if ( notGoodFooVersion(fooVersion) ) {
+ foo = null
+}
+
+// .. then later in your program ..
+
+if (foo) {
+ foo.doFooThings()
+}
+```
+
+中的条目`optionalDependencies`将覆盖 中的同名条目 `dependencies`，因此通常最好只放在一个地方。
+
+
+
+## publishConfig（发布配置）
+
+这是一组将在发布时使用的配置值。如果您想设置标记、注册表或访问权限，这将特别方便，这样您就可以确保给定的包没有被标记为“最新”、未发布到全局公共注册表或默认情况下范围模块是私有的。
+
+查看[`config`](https://docs.npmjs.com/cli/v7/using-npm/config)可覆盖的配置选项列表。
+
+## workspaces（工作区）
+
+可选`workspaces`字段是一个文件模式数组，它描述了本地文件系统内的位置，安装客户端应该查找这些位置以找到需要符号链接到顶级文件夹的每个[工作区](https://docs.npmjs.com/cli/v7/using-npm/workspaces)`node_modules`。
+
+它可以描述要用作工作区的文件夹的直接路径，也可以定义将解析为这些相同文件夹的 glob。
+
+在以下示例中，`./packages`只要文件夹中包含有效`package.json`文件，位于文件夹内的所有文件夹 都将被视为工作区 ：
+
+
+
+```json
+{
+ "name": "workspace-example",
+ "workspaces": [
+ "./packages/*"
+ ]
+}
+```
+
+有关[`workspaces`](https://docs.npmjs.com/cli/v7/using-npm/workspaces)更多示例，请参见。
+
+# 总结
+
+本文几乎是全网最全的package.json的讲解了。一些常用的和不常用的都有区分，不常用的可以当百科全书查一下，面试主要也是会问一些主要内容。
+
+> 如果觉得本文对你有帮助的话，请点个赞。👍👍👍👍
+
+
+
+# 参考资料 📖
+
+https://docs.npmjs.com/cli/v7/configuring-npm/package-json#workspaces
diff --git "a/source/_posts/\351\235\242\350\257\225\345\256\230\357\274\232\345\260\217\344\274\231\345\255\220canvas\344\275\240\347\237\245\351\201\223\345\244\232\345\260\221\345\225\212-\345\245\270\347\254\221.md" "b/source/_posts/\351\235\242\350\257\225\345\256\230\357\274\232\345\260\217\344\274\231\345\255\220canvas\344\275\240\347\237\245\351\201\223\345\244\232\345\260\221\345\225\212-\345\245\270\347\254\221.md"
new file mode 100644
index 00000000..dd889c6e
--- /dev/null
+++ "b/source/_posts/\351\235\242\350\257\225\345\256\230\357\274\232\345\260\217\344\274\231\345\255\220canvas\344\275\240\347\237\245\351\201\223\345\244\232\345\260\221\345\225\212-\345\245\270\347\254\221.md"
@@ -0,0 +1,10 @@
+---
+title: 面试官：小伙子canvas你知道多少啊(奸笑)
+date: 2021-06-24 10:59:42
+tags: [JavaScript]
+category: [重拾前端]
+cover: /image/cover/webpack.png
+---
+
+https://developer.mozilla.org/zh-CN/docs/Web/CSS/font
+
diff --git a/source/about/index.md b/source/about/index.md
new file mode 100644
index 00000000..3688e0dc
--- /dev/null
+++ b/source/about/index.md
@@ -0,0 +1,14 @@
+---
+title: 关于我
+date: 2020-04-11 21:41:09
+---
+
+> Never put off till tomorrow what you can do today.
+> —— Thomas Jefferson
+
+- 姓名: Derrick
+- 地点: 杭州
+- 年龄: 1995
+- 性别: 男
+- 爱好: 健身, 📖
+
diff --git a/source/clean/index.md b/source/clean/index.md
new file mode 100644
index 00000000..50c2f5d6
--- /dev/null
+++ b/source/clean/index.md
@@ -0,0 +1,4 @@
+---
+title: clean
+date: 2020-04-11 22:34:16
+---
diff --git "a/image/AntDesignForm\346\200\273\347\273\223/modal.png" "b/source/image/AntDesignForm\346\200\273\347\273\223/modal.png"
similarity index 100%
rename from "image/AntDesignForm\346\200\273\347\273\223/modal.png"
rename to "source/image/AntDesignForm\346\200\273\347\273\223/modal.png"
diff --git "a/image/AntDesignPro\346\216\242\347\264\242/20190312150742764.png" "b/source/image/AntDesignPro\346\216\242\347\264\242/20190312150742764.png"
similarity index 100%
rename from "image/AntDesignPro\346\216\242\347\264\242/20190312150742764.png"
rename to "source/image/AntDesignPro\346\216\242\347\264\242/20190312150742764.png"
diff --git "a/image/AntDesignPro\346\216\242\347\264\242/20190312150929439.png" "b/source/image/AntDesignPro\346\216\242\347\264\242/20190312150929439.png"
similarity index 100%
rename from "image/AntDesignPro\346\216\242\347\264\242/20190312150929439.png"
rename to "source/image/AntDesignPro\346\216\242\347\264\242/20190312150929439.png"
diff --git "a/image/AntDesignPro\346\216\242\347\264\242/20190312151053807.png" "b/source/image/AntDesignPro\346\216\242\347\264\242/20190312151053807.png"
similarity index 100%
rename from "image/AntDesignPro\346\216\242\347\264\242/20190312151053807.png"
rename to "source/image/AntDesignPro\346\216\242\347\264\242/20190312151053807.png"
diff --git "a/image/AntDesignPro\346\216\242\347\264\242/2019031215120430.png" "b/source/image/AntDesignPro\346\216\242\347\264\242/2019031215120430.png"
similarity index 100%
rename from "image/AntDesignPro\346\216\242\347\264\242/2019031215120430.png"
rename to "source/image/AntDesignPro\346\216\242\347\264\242/2019031215120430.png"
diff --git "a/image/AntDesignPro\346\216\242\347\264\242/2019031215140926.png" "b/source/image/AntDesignPro\346\216\242\347\264\242/2019031215140926.png"
similarity index 100%
rename from "image/AntDesignPro\346\216\242\347\264\242/2019031215140926.png"
rename to "source/image/AntDesignPro\346\216\242\347\264\242/2019031215140926.png"
diff --git "a/image/AntDesignPro\346\216\242\347\264\242/2019031215175956.png" "b/source/image/AntDesignPro\346\216\242\347\264\242/2019031215175956.png"
similarity index 100%
rename from "image/AntDesignPro\346\216\242\347\264\242/2019031215175956.png"
rename to "source/image/AntDesignPro\346\216\242\347\264\242/2019031215175956.png"
diff --git "a/image/AntDesignPro\346\216\242\347\264\242/20190312151839845.png" "b/source/image/AntDesignPro\346\216\242\347\264\242/20190312151839845.png"
similarity index 100%
rename from "image/AntDesignPro\346\216\242\347\264\242/20190312151839845.png"
rename to "source/image/AntDesignPro\346\216\242\347\264\242/20190312151839845.png"
diff --git "a/image/AntDesignPro\346\216\242\347\264\242/20190312152011733.png" "b/source/image/AntDesignPro\346\216\242\347\264\242/20190312152011733.png"
similarity index 100%
rename from "image/AntDesignPro\346\216\242\347\264\242/20190312152011733.png"
rename to "source/image/AntDesignPro\346\216\242\347\264\242/20190312152011733.png"
diff --git a/image/BFC/1.png b/source/image/BFC/1.png
similarity index 100%
rename from image/BFC/1.png
rename to source/image/BFC/1.png
diff --git a/image/BFC/2.png b/source/image/BFC/2.png
similarity index 100%
rename from image/BFC/2.png
rename to source/image/BFC/2.png
diff --git "a/image/CSSModules\350\255\246\345\221\212/aHR0cDovL2kxLmZ1aW1nLmNvbS82OTE2NDMvMGM4ZDhiNjZlMGNmZTY0Ny5wbmc.jpeg" "b/source/image/CSSModules\350\255\246\345\221\212/aHR0cDovL2kxLmZ1aW1nLmNvbS82OTE2NDMvMGM4ZDhiNjZlMGNmZTY0Ny5wbmc.jpeg"
similarity index 100%
rename from "image/CSSModules\350\255\246\345\221\212/aHR0cDovL2kxLmZ1aW1nLmNvbS82OTE2NDMvMGM4ZDhiNjZlMGNmZTY0Ny5wbmc.jpeg"
rename to "source/image/CSSModules\350\255\246\345\221\212/aHR0cDovL2kxLmZ1aW1nLmNvbS82OTE2NDMvMGM4ZDhiNjZlMGNmZTY0Ny5wbmc.jpeg"
diff --git "a/image/CSSModules\350\255\246\345\221\212/aHR0cDovL2kxLmZ1aW1nLmNvbS82OTE2NDMvODU2M2ZjOGJhZTU1ODI3Yy5wbmc.jpeg" "b/source/image/CSSModules\350\255\246\345\221\212/aHR0cDovL2kxLmZ1aW1nLmNvbS82OTE2NDMvODU2M2ZjOGJhZTU1ODI3Yy5wbmc.jpeg"
similarity index 100%
rename from "image/CSSModules\350\255\246\345\221\212/aHR0cDovL2kxLmZ1aW1nLmNvbS82OTE2NDMvODU2M2ZjOGJhZTU1ODI3Yy5wbmc.jpeg"
rename to "source/image/CSSModules\350\255\246\345\221\212/aHR0cDovL2kxLmZ1aW1nLmNvbS82OTE2NDMvODU2M2ZjOGJhZTU1ODI3Yy5wbmc.jpeg"
diff --git "a/image/CSSModules\350\255\246\345\221\212/aHR0cDovL2kxLmZ1aW1nLmNvbS82OTE2NDMvYTkxMmI1YzhlNTk3YTYzYy5wbmc.jpeg" "b/source/image/CSSModules\350\255\246\345\221\212/aHR0cDovL2kxLmZ1aW1nLmNvbS82OTE2NDMvYTkxMmI1YzhlNTk3YTYzYy5wbmc.jpeg"
similarity index 100%
rename from "image/CSSModules\350\255\246\345\221\212/aHR0cDovL2kxLmZ1aW1nLmNvbS82OTE2NDMvYTkxMmI1YzhlNTk3YTYzYy5wbmc.jpeg"
rename to "source/image/CSSModules\350\255\246\345\221\212/aHR0cDovL2kxLmZ1aW1nLmNvbS82OTE2NDMvYTkxMmI1YzhlNTk3YTYzYy5wbmc.jpeg"
diff --git "a/image/CSSModules\350\255\246\345\221\212/aHR0cDovL2kxLmZ1aW1nLmNvbS82OTE2NDMvZWIwYzBmODU2NDE0OGZjMC5wbmc.jpeg" "b/source/image/CSSModules\350\255\246\345\221\212/aHR0cDovL2kxLmZ1aW1nLmNvbS82OTE2NDMvZWIwYzBmODU2NDE0OGZjMC5wbmc.jpeg"
similarity index 100%
rename from "image/CSSModules\350\255\246\345\221\212/aHR0cDovL2kxLmZ1aW1nLmNvbS82OTE2NDMvZWIwYzBmODU2NDE0OGZjMC5wbmc.jpeg"
rename to "source/image/CSSModules\350\255\246\345\221\212/aHR0cDovL2kxLmZ1aW1nLmNvbS82OTE2NDMvZWIwYzBmODU2NDE0OGZjMC5wbmc.jpeg"
diff --git "a/image/CSSModules\350\255\246\345\221\212/aHR0cDovL2kyLnRpaW1nLmNvbS82OTE2NDMvMmVmODNhMzcxNjA4OWEwZS5wbmc.jpeg" "b/source/image/CSSModules\350\255\246\345\221\212/aHR0cDovL2kyLnRpaW1nLmNvbS82OTE2NDMvMmVmODNhMzcxNjA4OWEwZS5wbmc.jpeg"
similarity index 100%
rename from "image/CSSModules\350\255\246\345\221\212/aHR0cDovL2kyLnRpaW1nLmNvbS82OTE2NDMvMmVmODNhMzcxNjA4OWEwZS5wbmc.jpeg"
rename to "source/image/CSSModules\350\255\246\345\221\212/aHR0cDovL2kyLnRpaW1nLmNvbS82OTE2NDMvMmVmODNhMzcxNjA4OWEwZS5wbmc.jpeg"
diff --git "a/image/React\345\205\245\351\227\250/20181123111537542.png" "b/source/image/React\345\205\245\351\227\250/20181123111537542.png"
similarity index 100%
rename from "image/React\345\205\245\351\227\250/20181123111537542.png"
rename to "source/image/React\345\205\245\351\227\250/20181123111537542.png"
diff --git "a/image/React\345\205\245\351\227\250/20181123134126335.png" "b/source/image/React\345\205\245\351\227\250/20181123134126335.png"
similarity index 100%
rename from "image/React\345\205\245\351\227\250/20181123134126335.png"
rename to "source/image/React\345\205\245\351\227\250/20181123134126335.png"
diff --git "a/image/React\345\205\245\351\227\250/20181123143905811.png" "b/source/image/React\345\205\245\351\227\250/20181123143905811.png"
similarity index 100%
rename from "image/React\345\205\245\351\227\250/20181123143905811.png"
rename to "source/image/React\345\205\245\351\227\250/20181123143905811.png"
diff --git a/image/SpringBootJWT/20190325103836546.png b/source/image/SpringBootJWT/20190325103836546.png
similarity index 100%
rename from image/SpringBootJWT/20190325103836546.png
rename to source/image/SpringBootJWT/20190325103836546.png
diff --git "a/image/SpringBoot\350\267\250\345\237\237/20190311105909443.png" "b/source/image/SpringBoot\350\267\250\345\237\237/20190311105909443.png"
similarity index 100%
rename from "image/SpringBoot\350\267\250\345\237\237/20190311105909443.png"
rename to "source/image/SpringBoot\350\267\250\345\237\237/20190311105909443.png"
diff --git "a/image/SpringBoot\350\267\250\345\237\237/20190311110721789.png" "b/source/image/SpringBoot\350\267\250\345\237\237/20190311110721789.png"
similarity index 100%
rename from "image/SpringBoot\350\267\250\345\237\237/20190311110721789.png"
rename to "source/image/SpringBoot\350\267\250\345\237\237/20190311110721789.png"
diff --git "a/image/SpringBoot\350\267\250\345\237\237/20190311110735834.png" "b/source/image/SpringBoot\350\267\250\345\237\237/20190311110735834.png"
similarity index 100%
rename from "image/SpringBoot\350\267\250\345\237\237/20190311110735834.png"
rename to "source/image/SpringBoot\350\267\250\345\237\237/20190311110735834.png"
diff --git a/image/WebpackCleanWebpackPlugin/20190622155123842.png b/source/image/WebpackCleanWebpackPlugin/20190622155123842.png
similarity index 100%
rename from image/WebpackCleanWebpackPlugin/20190622155123842.png
rename to source/image/WebpackCleanWebpackPlugin/20190622155123842.png
diff --git a/image/WebpackCleanWebpackPlugin/20190622155255789.png b/source/image/WebpackCleanWebpackPlugin/20190622155255789.png
similarity index 100%
rename from image/WebpackCleanWebpackPlugin/20190622155255789.png
rename to source/image/WebpackCleanWebpackPlugin/20190622155255789.png
diff --git "a/image/Web\345\211\215\347\253\257\345\255\246\344\271\240\350\267\257\347\272\277/20190328205449472.png" "b/source/image/Web\345\211\215\347\253\257\345\255\246\344\271\240\350\267\257\347\272\277/20190328205449472.png"
similarity index 100%
rename from "image/Web\345\211\215\347\253\257\345\255\246\344\271\240\350\267\257\347\272\277/20190328205449472.png"
rename to "source/image/Web\345\211\215\347\253\257\345\255\246\344\271\240\350\267\257\347\272\277/20190328205449472.png"
diff --git a/source/image/cover/ANTD.png b/source/image/cover/ANTD.png
new file mode 100644
index 00000000..d4a2e987
Binary files /dev/null and b/source/image/cover/ANTD.png differ
diff --git a/source/image/cover/HEXO.png b/source/image/cover/HEXO.png
new file mode 100644
index 00000000..99ac5aaf
Binary files /dev/null and b/source/image/cover/HEXO.png differ
diff --git a/source/image/cover/JWT.png b/source/image/cover/JWT.png
new file mode 100644
index 00000000..2e916980
Binary files /dev/null and b/source/image/cover/JWT.png differ
diff --git a/source/image/cover/JavaScript.png b/source/image/cover/JavaScript.png
new file mode 100644
index 00000000..262cd992
Binary files /dev/null and b/source/image/cover/JavaScript.png differ
diff --git a/source/image/cover/KDpgvguMpGfqaHPjicRK.svg b/source/image/cover/KDpgvguMpGfqaHPjicRK.svg
new file mode 100644
index 00000000..e9f8c2a9
--- /dev/null
+++ b/source/image/cover/KDpgvguMpGfqaHPjicRK.svg
@@ -0,0 +1,43 @@
+
+
\ No newline at end of file
diff --git a/source/image/cover/React.jpeg b/source/image/cover/React.jpeg
new file mode 100644
index 00000000..0ef62672
Binary files /dev/null and b/source/image/cover/React.jpeg differ
diff --git a/source/image/cover/antdP.png b/source/image/cover/antdP.png
new file mode 100644
index 00000000..499ee490
Binary files /dev/null and b/source/image/cover/antdP.png differ
diff --git a/source/image/cover/bg.jpg b/source/image/cover/bg.jpg
new file mode 100644
index 00000000..26eceba2
Binary files /dev/null and b/source/image/cover/bg.jpg differ
diff --git a/source/image/cover/css.png b/source/image/cover/css.png
new file mode 100644
index 00000000..80596e8f
Binary files /dev/null and b/source/image/cover/css.png differ
diff --git a/source/image/cover/decorator.png b/source/image/cover/decorator.png
new file mode 100644
index 00000000..b18fd042
Binary files /dev/null and b/source/image/cover/decorator.png differ
diff --git a/source/image/cover/github.jpg b/source/image/cover/github.jpg
new file mode 100644
index 00000000..cfe048f8
Binary files /dev/null and b/source/image/cover/github.jpg differ
diff --git a/source/image/cover/history.jpeg b/source/image/cover/history.jpeg
new file mode 100644
index 00000000..8a8c49c0
Binary files /dev/null and b/source/image/cover/history.jpeg differ
diff --git a/source/image/cover/http.png b/source/image/cover/http.png
new file mode 100644
index 00000000..dfaa4fe0
Binary files /dev/null and b/source/image/cover/http.png differ
diff --git a/source/image/cover/react.png b/source/image/cover/react.png
new file mode 100644
index 00000000..8d9a13f6
Binary files /dev/null and b/source/image/cover/react.png differ
diff --git a/source/image/cover/springboot.png b/source/image/cover/springboot.png
new file mode 100644
index 00000000..278c400a
Binary files /dev/null and b/source/image/cover/springboot.png differ
diff --git a/source/image/cover/web.jpeg b/source/image/cover/web.jpeg
new file mode 100644
index 00000000..87eefdcc
Binary files /dev/null and b/source/image/cover/web.jpeg differ
diff --git a/source/image/cover/webpack.png b/source/image/cover/webpack.png
new file mode 100644
index 00000000..9e3e5bc2
Binary files /dev/null and b/source/image/cover/webpack.png differ
diff --git "a/image/historyBack\345\207\275\346\225\260/20190318092239845.png" "b/source/image/historyBack\345\207\275\346\225\260/20190318092239845.png"
similarity index 100%
rename from "image/historyBack\345\207\275\346\225\260/20190318092239845.png"
rename to "source/image/historyBack\345\207\275\346\225\260/20190318092239845.png"
diff --git a/image/httpHttps/15fc2525666dc96e.jpg b/source/image/httpHttps/15fc2525666dc96e.jpg
similarity index 100%
rename from image/httpHttps/15fc2525666dc96e.jpg
rename to source/image/httpHttps/15fc2525666dc96e.jpg
diff --git a/source/image/package/init.gif b/source/image/package/init.gif
new file mode 100644
index 00000000..a9f5bded
Binary files /dev/null and b/source/image/package/init.gif differ
diff --git a/source/image/package/install.png b/source/image/package/install.png
new file mode 100644
index 00000000..d4aa7933
Binary files /dev/null and b/source/image/package/install.png differ
diff --git a/source/image/package/notFound.png b/source/image/package/notFound.png
new file mode 100644
index 00000000..7e86e280
Binary files /dev/null and b/source/image/package/notFound.png differ
diff --git a/source/image/package/use.png b/source/image/package/use.png
new file mode 100644
index 00000000..a7cd1df8
Binary files /dev/null and b/source/image/package/use.png differ
diff --git a/source/image/package/version.png b/source/image/package/version.png
new file mode 100644
index 00000000..1b5b8ee7
Binary files /dev/null and b/source/image/package/version.png differ
diff --git a/source/image/package/versions.png b/source/image/package/versions.png
new file mode 100644
index 00000000..4b823bb8
Binary files /dev/null and b/source/image/package/versions.png differ
diff --git a/source/image/package/view.png b/source/image/package/view.png
new file mode 100644
index 00000000..23e662cf
Binary files /dev/null and b/source/image/package/view.png differ
diff --git a/image/pr/commit.png b/source/image/pr/commit.png
similarity index 100%
rename from image/pr/commit.png
rename to source/image/pr/commit.png
diff --git a/image/pr/create.png b/source/image/pr/create.png
similarity index 100%
rename from image/pr/create.png
rename to source/image/pr/create.png
diff --git a/image/pr/pornhub.jpg b/source/image/pr/pornhub.jpg
similarity index 100%
rename from image/pr/pornhub.jpg
rename to source/image/pr/pornhub.jpg
diff --git a/image/pr/pr.png b/source/image/pr/pr.png
similarity index 100%
rename from image/pr/pr.png
rename to source/image/pr/pr.png
diff --git a/image/pr/push.png b/source/image/pr/push.png
similarity index 100%
rename from image/pr/push.png
rename to source/image/pr/push.png
diff --git a/image/pr/title.png b/source/image/pr/title.png
similarity index 100%
rename from image/pr/title.png
rename to source/image/pr/title.png
diff --git a/source/image/react1/bebel.png b/source/image/react1/bebel.png
new file mode 100644
index 00000000..9fa5c035
Binary files /dev/null and b/source/image/react1/bebel.png differ
diff --git a/source/image/react1/console.png b/source/image/react1/console.png
new file mode 100644
index 00000000..a071c3df
Binary files /dev/null and b/source/image/react1/console.png differ
diff --git a/source/image/react1/download.jpg b/source/image/react1/download.jpg
new file mode 100644
index 00000000..6085689d
Binary files /dev/null and b/source/image/react1/download.jpg differ
diff --git a/source/image/react1/element.png b/source/image/react1/element.png
new file mode 100644
index 00000000..095aeea6
Binary files /dev/null and b/source/image/react1/element.png differ
diff --git a/source/image/react1/offer.png b/source/image/react1/offer.png
new file mode 100644
index 00000000..6f2a9c4d
Binary files /dev/null and b/source/image/react1/offer.png differ
diff --git a/source/image/react1/stats.png b/source/image/react1/stats.png
new file mode 100644
index 00000000..6d2fcc74
Binary files /dev/null and b/source/image/react1/stats.png differ
diff --git a/source/image/reactDebugger/console.png b/source/image/reactDebugger/console.png
new file mode 100644
index 00000000..955c5bd5
Binary files /dev/null and b/source/image/reactDebugger/console.png differ
diff --git a/source/image/router/demo.gif b/source/image/router/demo.gif
new file mode 100644
index 00000000..0dd27848
Binary files /dev/null and b/source/image/router/demo.gif differ
diff --git "a/image/\344\275\240\347\234\237\347\232\204\346\207\202ReactHook\345\220\227/2019081821194714.png" "b/source/image/\344\275\240\347\234\237\347\232\204\346\207\202ReactHook\345\220\227/2019081821194714.png"
similarity index 100%
rename from "image/\344\275\240\347\234\237\347\232\204\346\207\202ReactHook\345\220\227/2019081821194714.png"
rename to "source/image/\344\275\240\347\234\237\347\232\204\346\207\202ReactHook\345\220\227/2019081821194714.png"
diff --git "a/image/\344\275\240\347\234\237\347\232\204\346\207\202ReactHook\345\220\227/20190818212347571.png" "b/source/image/\344\275\240\347\234\237\347\232\204\346\207\202ReactHook\345\220\227/20190818212347571.png"
similarity index 100%
rename from "image/\344\275\240\347\234\237\347\232\204\346\207\202ReactHook\345\220\227/20190818212347571.png"
rename to "source/image/\344\275\240\347\234\237\347\232\204\346\207\202ReactHook\345\220\227/20190818212347571.png"
diff --git "a/image/\345\234\260\345\235\200\346\240\217/dns.png" "b/source/image/\345\234\260\345\235\200\346\240\217/dns.png"
similarity index 100%
rename from "image/\345\234\260\345\235\200\346\240\217/dns.png"
rename to "source/image/\345\234\260\345\235\200\346\240\217/dns.png"
diff --git "a/image/\345\234\260\345\235\200\346\240\217/huishou.png" "b/source/image/\345\234\260\345\235\200\346\240\217/huishou.png"
similarity index 100%
rename from "image/\345\234\260\345\235\200\346\240\217/huishou.png"
rename to "source/image/\345\234\260\345\235\200\346\240\217/huishou.png"
diff --git "a/image/\345\234\260\345\235\200\346\240\217/woshou.png" "b/source/image/\345\234\260\345\235\200\346\240\217/woshou.png"
similarity index 100%
rename from "image/\345\234\260\345\235\200\346\240\217/woshou.png"
rename to "source/image/\345\234\260\345\235\200\346\240\217/woshou.png"
diff --git "a/image/\346\267\261\345\205\245\345\206\205\345\255\230\344\270\226\347\225\214/1.jpeg" "b/source/image/\346\267\261\345\205\245\345\206\205\345\255\230\344\270\226\347\225\214/1.jpeg"
similarity index 100%
rename from "image/\346\267\261\345\205\245\345\206\205\345\255\230\344\270\226\347\225\214/1.jpeg"
rename to "source/image/\346\267\261\345\205\245\345\206\205\345\255\230\344\270\226\347\225\214/1.jpeg"
diff --git "a/image/\346\267\261\345\205\245\345\206\205\345\255\230\344\270\226\347\225\214/2.png" "b/source/image/\346\267\261\345\205\245\345\206\205\345\255\230\344\270\226\347\225\214/2.png"
similarity index 100%
rename from "image/\346\267\261\345\205\245\345\206\205\345\255\230\344\270\226\347\225\214/2.png"
rename to "source/image/\346\267\261\345\205\245\345\206\205\345\255\230\344\270\226\347\225\214/2.png"
diff --git "a/image/\346\267\261\345\205\245\345\206\205\345\255\230\344\270\226\347\225\214/3.png" "b/source/image/\346\267\261\345\205\245\345\206\205\345\255\230\344\270\226\347\225\214/3.png"
similarity index 100%
rename from "image/\346\267\261\345\205\245\345\206\205\345\255\230\344\270\226\347\225\214/3.png"
rename to "source/image/\346\267\261\345\205\245\345\206\205\345\255\230\344\270\226\347\225\214/3.png"
diff --git "a/image/\346\267\261\346\213\267\350\264\235\346\265\205\346\213\267\350\264\235/20190428204522836.png" "b/source/image/\346\267\261\346\213\267\350\264\235\346\265\205\346\213\267\350\264\235/20190428204522836.png"
similarity index 100%
rename from "image/\346\267\261\346\213\267\350\264\235\346\265\205\346\213\267\350\264\235/20190428204522836.png"
rename to "source/image/\346\267\261\346\213\267\350\264\235\346\265\205\346\213\267\350\264\235/20190428204522836.png"
diff --git "a/image/\346\267\261\346\213\267\350\264\235\346\265\205\346\213\267\350\264\235/20190428204904611.png" "b/source/image/\346\267\261\346\213\267\350\264\235\346\265\205\346\213\267\350\264\235/20190428204904611.png"
similarity index 100%
rename from "image/\346\267\261\346\213\267\350\264\235\346\265\205\346\213\267\350\264\235/20190428204904611.png"
rename to "source/image/\346\267\261\346\213\267\350\264\235\346\265\205\346\213\267\350\264\235/20190428204904611.png"
diff --git "a/image/\346\267\261\346\213\267\350\264\235\346\265\205\346\213\267\350\264\235/20190428205243797.png" "b/source/image/\346\267\261\346\213\267\350\264\235\346\265\205\346\213\267\350\264\235/20190428205243797.png"
similarity index 100%
rename from "image/\346\267\261\346\213\267\350\264\235\346\265\205\346\213\267\350\264\235/20190428205243797.png"
rename to "source/image/\346\267\261\346\213\267\350\264\235\346\265\205\346\213\267\350\264\235/20190428205243797.png"
diff --git "a/image/\346\267\261\346\213\267\350\264\235\346\265\205\346\213\267\350\264\235/20190428205350562.png" "b/source/image/\346\267\261\346\213\267\350\264\235\346\265\205\346\213\267\350\264\235/20190428205350562.png"
similarity index 100%
rename from "image/\346\267\261\346\213\267\350\264\235\346\265\205\346\213\267\350\264\235/20190428205350562.png"
rename to "source/image/\346\267\261\346\213\267\350\264\235\346\265\205\346\213\267\350\264\235/20190428205350562.png"
diff --git "a/image/\346\267\261\346\213\267\350\264\235\346\265\205\346\213\267\350\264\235/20190428205853748.png" "b/source/image/\346\267\261\346\213\267\350\264\235\346\265\205\346\213\267\350\264\235/20190428205853748.png"
similarity index 100%
rename from "image/\346\267\261\346\213\267\350\264\235\346\265\205\346\213\267\350\264\235/20190428205853748.png"
rename to "source/image/\346\267\261\346\213\267\350\264\235\346\265\205\346\213\267\350\264\235/20190428205853748.png"
diff --git a/themes/butterfly/.github/ISSUE_TEMPLATE.md b/themes/butterfly/.github/ISSUE_TEMPLATE.md
new file mode 100644
index 00000000..ecbf408a
--- /dev/null
+++ b/themes/butterfly/.github/ISSUE_TEMPLATE.md
@@ -0,0 +1,45 @@
+
+
+## I want to create a new issue
+
+
+
+- [] Yes, I have read [Hexo Docs page](https://hexo.io/docs/), especially [Templates](https://hexo.io/docs/templates.html), [Variables](https://hexo.io/docs/variables.html), [Helpers](https://hexo.io/docs/helpers.html) and [Troubleshooting](https://hexo.io/docs/troubleshooting.html).
+- [] Yes, I have read [Hexo-theme-butterfly Documentation](https://jerryc.me/posts/21cfbf15/).
+- [] And yes, I already searched for current [issues](https://github.com/jerryc127/hexo-theme-butterfly/issues?utf8=%E2%9C%93&q=is%3Aissue) and this did not help me.
+
+## Butterfly Information
+
+
+
+**Butterfly Version:**
+
+
+**Platform:**
+
+
+**Browser:**
+
+## Expected behavior
+
+## Actual behavior
+
+
+
+
+## Steps to reproduce the behavior
+
+## Feature Request
+
+
+
+
+---
+
+
\ No newline at end of file
diff --git a/themes/butterfly/.github/stale.yml b/themes/butterfly/.github/stale.yml
new file mode 100644
index 00000000..355bbeea
--- /dev/null
+++ b/themes/butterfly/.github/stale.yml
@@ -0,0 +1,21 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 30
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+ - pinned
+ - security
+ - bug
+ - enhancement
+ - Solved
+ - documentation
+# Label to use when marking an issue as stale
+staleLabel: wontfix
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+ This issue has been automatically marked as stale because it has not had
+ recent activity. It will be closed if no further activity occurs. Thank you
+ for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false
\ No newline at end of file
diff --git a/themes/butterfly/LICENSE b/themes/butterfly/LICENSE
new file mode 100644
index 00000000..472ac236
--- /dev/null
+++ b/themes/butterfly/LICENSE
@@ -0,0 +1,8 @@
+MIT License
+Copyright (c)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/themes/butterfly/README.md b/themes/butterfly/README.md
new file mode 100644
index 00000000..0707089c
--- /dev/null
+++ b/themes/butterfly/README.md
@@ -0,0 +1,48 @@
+# hexo-theme-butterfly
+
+
+
+
+
+
+Demo: https://demo.jerryc.me/
+
+JerryC: https://jerryc.me/
+
+Based on [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody) theme.
+
+## Installation
+
+Stable branch:
+
+```
+git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
+```
+
+Dev branch:
+
+```
+git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
+```
+
+## Configuration
+
+ Set theme in the hexo work folder's root config file `_config.yml`:
+
+> theme: Butterfly
+
+ If you don't have pug & stylus renderer, try this:
+
+> npm install hexo-renderer-pug hexo-renderer-stylus
+
+## Documentation
+
+Find in [hexo-theme-butterfly docs](https://docs.jerryc.me) and [JerryC](https://jerryc.me/posts/21cfbf15). it supports `zh-TW`
+
+## Screenshots
+
+
+
+
+
+
\ No newline at end of file
diff --git a/themes/butterfly/README_CN.md b/themes/butterfly/README_CN.md
new file mode 100644
index 00000000..1ab85d38
--- /dev/null
+++ b/themes/butterfly/README_CN.md
@@ -0,0 +1,46 @@
+# hexo-theme-butterfly
+
+
+
+
+
+
+Demo: https://demo.jerryc.me/
+
+JerryC: https://jerryc.me/
+
+
+一款基於[hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody)修改的主題
+
+## 安裝
+
+在你的博客根目錄裡
+
+```
+git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
+```
+
+如果想要安裝比較新的dev分支，可以
+
+```
+git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
+```
+
+## 應用主題
+修改hexo配置文件`_config.yml`，把主題改為`Butterfly`
+
+```
+theme: Butterfly
+```
+
+>如果你沒有pug以及stylus的渲染器，請下載安裝： npm install hexo-renderer-pug hexo-renderer-stylus --save or yarn add hexo-renderer-pug hexo-renderer-stylus
+
+## 文檔
+
+可查看[hexo-theme-butterfly docs](https://docs.jerryc.me) 和 [JerryC](https://jerryc.me/posts/21cfbf15)
+
+## 截圖
+
+
+
+
\ No newline at end of file
diff --git a/themes/butterfly/_config.yml b/themes/butterfly/_config.yml
new file mode 100644
index 00000000..c0aad285
--- /dev/null
+++ b/themes/butterfly/_config.yml
@@ -0,0 +1,732 @@
+# Main menu navigation
+# ---------------
+# format: xxx: 連結 || icon
+# sub-menu
+# xxx || icon:
+# xxx || 連結 || icon
+menu:
+ 首页: / || fa fa-home
+ 归档: /archives/ || fa fa-archive
+ # Tags: /tags/ || fa fa-tags
+ # Categories: /categories/ || fa fa-folder-open
+ # Link: /link/ || fa fa-link
+ 关于我: /about/ || fa fa-about
+ # List||fa fa-list:
+ # - Music || /music/ || fa fa-music
+ # - Movie || /movies/ || fa fa-film
+
+# Favicon
+# ---------------
+favicon: /img/favicon.ico
+
+# PWA
+# See https://github.com/JLHwung/hexo-offline
+# ---------------
+# pwa:
+# enable: true
+# manifest: /img/pwa/manifest.json
+# theme_color: "#fff"
+# apple_touch_icon: /img/pwa/apple-touch-icon.png
+# favicon_32_32: /img/pwa/32.png
+# favicon_16_16: /img/pwa/16.png
+# mask_icon: /img/pwa/safari-pinned-tab.svg
+
+# Highlight theme
+# ---------------
+highlight_theme: light # default / darker / pale night / light / ocean
+highlight_copy: true #代碼複製按鈕
+highlight_lang: true #代碼語言顯示
+highlight_shrink: false # true 全部代碼框不展開，需點擊 '>' 打開 / false 代碼框展開，有'>'點擊按鈕 | none 代碼框展開，不顯示 '>' 按鈕
+
+code_word_wrap: false
+
+# copy setting
+# 是否禁止複製（如果禁止，highlight_copy的功能將無效)
+# copyright 複製的內容後面加上版權信息
+copy:
+ enable: true # true 開啟 / false 禁止
+ copyright: false
+
+# social settings
+# formal:
+# icon: link || the description
+# ---------------
+social:
+ fa fa-github: https://github.com/derricktel || Github
+ fa fa-envelope: derricktel@foxmail.com || Email
+ # fa fa-rss: /atom.xml || RSS
+
+#### search ####
+# Algolia search
+# ---------------
+algolia_search:
+ enable: false
+ hits:
+ per_page: 6
+
+ labels:
+ input_placeholder: Search for Posts
+ hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
+ hits_stats: "${hits} results found in ${time} ms"
+
+# Local search
+# Please see doc for more details: https://docs.jerryc.me/config.html#本地搜索
+# ---------------
+local_search:
+ enable: false
+ labels:
+ input_placeholder: Search for Posts
+ hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
+
+# MathJax
+# Please see doc for more details: https://docs.jerryc.me/config.html#mathjax
+# ---------------
+mathjax:
+ enable: false
+ # true 表示每一頁都加載mathjax.js
+ # false 需要時加載，須在使用的Markdown Front-matter 加上 mathjax: true
+ per_page: false
+
+# KaTeX
+# ---------------
+katex:
+ enable: false
+ # true 表示每一頁都加載katex.js
+ # false 需要時加載，須在使用的Markdown Front-matter 加上 katex: true
+ per_page: false
+ hide_scrollbar: true
+
+# mermaid
+# see https://github.com/knsv/mermaid
+# -------------------------------
+mermaid:
+ enable: false
+ # built-in themes: default/forest/dark/neutral
+ theme: default
+
+# Post info settings
+# ---------------
+avatar:
+ img: /img/avatar.png
+ effect: false # 頭像會一直轉圈
+
+# the banner image of index
+index_img:
+
+# if the banner of page not setting,it will show the top_img
+default_top_img: /img/index.jpg
+
+# the banner image of archive page
+archive_img:
+
+# the banner image of tag page
+# tag page, look like https://xxxxxxxxx.com/tags/butterfly
+tag_img:
+
+# the banner image of category page
+# category page, look like https://xxxxxxxxx.com/categories/butterfly
+category_img:
+
+# 如果你有使用hexo-douban，可配置這個
+# douban:
+# meta: false
+# movies_img:
+# books_img:
+# games_img:
+
+cover:
+ # 是否顯示文章封面
+ index_enable: true
+ aside_enable: true
+ archives_enable: true
+ # 封面顯示的位置
+ # 三個值可配置 left , right , both
+ position: both
+ # 當沒有設置cover時，默認的封面顯示
+ default_cover:
+ - /img/post.jpg
+
+# if the photo link cannot connect,it will show that
+lodding_bg:
+ flink: /img/friend_404.gif #404後圖片
+ post_page: /img/404.jpg #404後圖片
+# post: /img/loading.gif ##加載動畫
+
+# A simple 404 page
+error_404:
+ enable: false
+ subtitle: "Page Not Found"
+ background:
+
+post_meta:
+ page:
+ date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
+ categories: true # true or false 主頁是否顯示分類
+ tags: true # true or false 主頁是否顯示標籤
+ post:
+ date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
+ categories: true # true or false 文章頁是否顯示分類
+ tags: true # true or false 文章頁是否顯示標籤
+
+# Please see doc for more details: https://docs.jerryc.me/config.html#字數統計
+wordcount:
+ enable: false
+ post_wordcount: true
+ min2read: true
+ total_wordcount: true
+
+toc:
+ enable: true
+ number: true
+
+# auto open the sidebar in 'post'
+auto_open_sidebar:
+ enable: true
+
+post_copyright:
+ enable: true
+ decode: false
+ license: CC BY-NC-SA 4.0
+ license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
+
+# 自動節選
+auto_excerpt:
+ enable: true
+ length: 150
+
+#### Share System ####
+# -----------------------------------------
+addThis:
+ enable: false
+ pubid:
+
+sharejs:
+ enable: true
+ sites: facebook,twitter,wechat,weibo,qq
+
+# https://www.addtoany.com/
+addtoany:
+ enable: false
+ item:
+ - facebook
+ - twitter
+ - wechat
+ - sina_weibo
+ - facebook_messenger
+ - email
+ - copy_link
+
+#### Comments System ####
+# ------------------------------------
+disqus:
+ enable: false
+ shortname:
+ count: false # top_img顯示評論數
+
+# Disqus.js版評論系統，應對大陸長城的折中方案，兼容原版：https://github.com/SukkaW/DisqusJS
+# API 申請地址：https://disqus.com/api/applications/
+# 與 disqus 共用樣式
+disqusjs:
+ enable: false
+ shortname:
+ siteName:
+ apikey:
+ api: https://disqus.skk.moe/disqus/ #一般情況下無需修改 API 地址
+ admin:
+ adminLabel:
+ count: true # top_img顯示評論數
+
+laibili:
+ enable: false
+ uid:
+
+gitalk:
+ enable: false
+ client_id:
+ client_secret:
+ repo:
+ owner:
+ admin:
+ language: zh-CN # en , zh-CN , zh-TW
+ perPage: 10 # Pagination size, with maximum 100.
+ distractionFreeMode: false # Facebook-like distraction free mode.
+ pagerDirection: last # Comment sorting direction, available values are last and first.
+ createIssueManually: false # Gitalk will create a corresponding github issue for your every single page automatically
+ count: true # top_img顯示評論數
+
+# valine comment system. https://valine.js.org
+valine:
+ enable: false # if you want use valine,please set this value is true
+ appId: # leancloud application app id
+ appKey: # leancloud application app key
+ notify: false # valine mail notify (true/false) https://github.com/xCss/Valine/wiki
+ verify: false # valine verify code (true/false)
+ pageSize: 10 # comment list page size
+ avatar: monsterid # gravatar style https://valine.js.org/#/avatar
+ lang: en # i18n: zh-cn/en
+ placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )
+ guest_info: nick,mail,link #valine comment header info
+ recordIP: false # Record reviewer IP
+ serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
+ bg: /img/comment_bg.png # valine background
+ count: true # top_img顯示評論數
+
+# utterances
+# https://utteranc.es/
+utterances:
+ enable: false
+ repo:
+ # 可選 pathname/url/title/og:title
+ issue_term: pathname
+ # 可選 github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark
+ light_theme: github-light
+ dark_theme: photon-dark
+
+##### Footer Settings ####
+# ------------------------------------
+since: 2020
+
+footer_custom_text:
+
+footer_copyright:
+ enable: true
+
+ICP:
+ enable: false
+ url:
+ text:
+ icon: /img/icp.png
+
+#### Analysis ####
+# ---------------
+baidu_analytics:
+
+# Google Analytics
+google_analytics:
+
+# Tencent_analytics ID
+tencent_analytics:
+
+# Ads
+# ---------------
+# Google Adsense
+google_adsense:
+ enable: false
+ js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
+ client:
+ enable_page_level_ads: true
+
+# 廣告插入位置
+# 適用於開啓手動廣告的配置
+# ad:
+# index:
+# aside:
+# post:
+
+#### 站長驗證 ####
+# Google Webmaster tools verification setting
+# See: https://www.google.com/webmasters/
+google_site_verification:
+
+# Bing Webmaster tools verification setting
+# See: https://www.bing.com/webmaster/
+bing_site_verification:
+
+# Baidu Webmaster tools verification setting
+# See: https://ziyuan.baidu.com/site/
+baidu_site_verification:
+
+# 360 Webmaster tools verification setting
+# see http://zhanzhang.so.com/
+qihu_site_verification:
+
+# 打賞按鈕
+reward:
+ enable: true
+ QR_code:
+ - itemlist:
+ img: /img/DerrickWechat.png
+ text: 微信
+ - itemlist:
+ img: /img/DerrickAlipay.jpg
+ text: 支付寶
+
+# 推薦文章
+related_post:
+ enable: true
+ limit: 6 # 顯示推薦文章數目
+ date_type: created # or created or updated 文章日期顯示創建日或者更新日
+
+# figcaption
+# 圖片描述文字
+photofigcaption: false
+
+#### 美化/效果 ####
+#--------------------------------
+
+# Theme color for customize
+# Notice: color value must in double quotes like "#000" or may cause error!
+# ---------------
+# theme_color:
+# enable: true
+# main: "#49B1F5"
+# paginator: "#00c4b6"
+# button_hover: "#FF7242"
+# text_selection: "#00c4b6"
+# link_color: "#99a9bf"
+# meta_color: "#858585"
+# hr_color: "#A4D8FA"
+# code_foreground: "#F47466"
+# code_background: "rgba(27, 31, 35, .05)"
+# toc_color: "#00c4b6"
+# blockquote_padding_color: "#49b1f5"
+# blockquote_background_color: "#49b1f5"
+
+# 主頁設置
+# 默認top_img全屏，site_info在中間
+# 使用默認, 都無需填寫（建議默認）
+index_site_info_top: # 主頁標題距離頂部距離 例如 300px/300em/300rem/10%
+index_top_img_height: # 主頁top_img高度 例如 300px/300em/300rem 不能使用百分比
+
+# category和tag頁的UI設置
+# index 值代表 UI將與首頁的UI一樣
+# 默認跟archives頁面UI一樣
+category_ui: # 留空或index
+tag_ui: # 留空或index
+
+# 設置網站背景
+# 可設置圖片 或者 顔色
+# 圖片格式 background: url(http://xxxxxx.com/xxx.jpg)
+# 顔色 background: '#49B202'
+# 留空 顯示白色
+background:
+
+# footer是否顯示圖片背景(與top_img一致)
+footer_bg: false
+
+# 背景特效
+# 避免卡頓，建議只開啟一個
+# canvas_ribbon 禁止彩帶背景
+# See: https://github.com/hustcc/ribbon.js
+canvas_ribbon:
+ enable: false
+ size: 150
+ alpha: 0.6
+ zIndex: -1
+ click_to_change: false
+ mobile: false # false 手機端不顯示 true 手機端顯示
+
+# 動態彩帶
+canvas_ribbon_piao:
+ enable: false
+ mobile: false # false 手機端不顯示 true 手機端顯示
+
+# canvas_nest
+# https://github.com/hustcc/canvas-nest.js
+canvas_nest:
+ enable: false
+ color: "0,0,255" #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
+ opacity: 0.7 # the opacity of line (0~1), default: 0.5.
+ zIndex: -1 # z-index property of the background, default: -1.
+ count: 99 # the number of lines, default: 99.
+ mobile: false # false 手機端不顯示 true 手機端顯示
+
+# 打字效果
+activate_power_mode:
+ enable: false
+ colorful: true # 冒光特效
+ shake: true # 抖動特效
+
+# 鼠標點擊效果
+# 避免卡頓，建議只開啟一個
+# 點擊煙火特效
+fireworks:
+ enable: false
+
+# 點擊出現愛心
+click_heart:
+ enable: false
+
+# 點擊出現文字，文字可自行修改
+ClickShowText:
+ enable: false
+ text:
+ - 本人
+ - 超帥
+ fontSize: 15px
+
+# 網站顯示模式
+# light 默認模式
+# dark 黑暗模式（不建議）
+display_mode: light
+
+# 美化頁面顯示
+beautify:
+ enable: false
+ title-prefix-icon: '\f0c1'
+ title-prefix-icon-color: "#F47466"
+
+# 全局字體
+font:
+ enable: false
+ font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
+ code-font: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number
+
+# 網站名字字體
+# 左上角網站名字 主頁居中網站名字
+blog_title_font:
+ font_link: https://fonts.googleapis.com/css?family=Titillium+Web #字體鏈接
+ font-family: Titillium Web, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
+
+# 水平分隔綫
+hr:
+ enable: false
+ icon: '\f21c' #fontawesome上圖標的Unicode
+ icon-top: -20px
+
+# 主頁subtitle
+subtitle:
+ enable: true
+ # 打字效果
+ effect: true
+ # 循環或者只打字一次
+ loop: true
+ # source調用第三方服務
+ # source: false 關閉調用
+ # source: 1 調用金山詞霸的每日一句（簡體）
+ # source: 2 調用一言網的一句話（簡體） #https://hitokoto.cn/
+ # source: 3 調用一句網（簡體） http://yijuzhan.com/
+ # source: 4 調用今日詩詞（簡體） https://www.jinrishici.com/
+ # subtitle 會先顯示 source , 再顯示 sub 的內容
+ source: false
+ # (如果有英文逗號' , '，請使用轉義字符 ,)
+ # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
+ sub:
+ - 今日事,今日畢
+ - Never put off till tomorrow what you can do today
+
+# fontawesome圖標
+# 默認使用的是 fontawesome v4版本的圖標
+fontawesome_v5:
+ enable: false
+
+#### 側邊欄 ####
+#-------------------------------------
+# 側邊欄顯示設置
+aside:
+ enable: true
+ mobile: true # 手機頁面（ 顯示寬度 < 768px ）是否顯示aside內容
+ position: right # left or right
+ card_author: true
+ card_announcement: true
+ card_recent_post: true
+ card_categories: true
+ card_tags: true
+ card_archives: true
+ card_webinfo: true
+
+# 網站公告
+announcement:
+ content: 感谢访问，若喜欢请收藏或者转发哦 ^_^
+
+# busuanzi count for PV / UV in site
+# 訪問人數
+busuanzi:
+ site_uv: true
+ site_pv: true
+ page_pv: true
+
+# 網頁開通時間
+# 格式: 月/日/年 時間
+# 也可以寫成 年/月/日 時間
+runtimeshow:
+ enable: true
+ start_date: 6/7/2018 00:00:00
+
+#### 右下角按鈕 ####
+#----------------------------------------------
+# 簡繁轉換
+translate:
+ enable: true
+ # 默認按鈕顯示文字
+ default: 繁
+ #網站默認語言，1: 繁體中文, 2: 簡體中文
+ defaultEncoding: 2
+ #延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0
+ translateDelay: 0
+ #博客網址
+ cookieDomain: "https://xxx/"
+ #當文字是簡體時，按鈕顯示的文字
+ msgToTraditionalChinese: "繁"
+ #當文字是繁體時，按鈕顯示的文字
+ msgToSimplifiedChinese: "簡"
+
+#閲讀模式
+readmode:
+ enable: true
+
+# dark mode
+darkmode:
+ enable: true
+ # dark mode和 light mode切換按鈕
+ button: true
+ # 自動切換 dark mode和 light mode
+ # autoChangeMode: 1 跟隨系統而變化，不支持的瀏覽器/系統將按照時間晚上6點到早上6點之間切換為 dark mode
+ # autoChangeMode: 2 只按照時間晚上6點到早上6點之間切換為 dark mode
+ # autoChangeMode: false 取消自動切換
+ autoChangeMode: 1
+
+#### other ####
+#------------------------------------------------
+
+# 圖片大圖查看模式
+# 可選 medium_zoom 或者 fancybox
+# 只選一個 或者 兩個都不選
+#--------------------------------------------
+# medium_zoom https://github.com/francoischalifour/medium-zoom
+medium_zoom:
+ enable: false
+
+# fancybox http://fancyapps.com/fancybox/3/
+fancybox:
+ enable: true
+
+# Snackbar 彈窗
+# https://github.com/polonel/SnackBar
+# position 彈窗位置
+# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
+snackbar:
+ enable: false
+ position: bottom-left
+ bg_light: "#49b1f5" #light mode時彈窗背景
+ bg_dark: "#2d3035" #dark mode時彈窗背景
+
+#百度推送
+baidu_push:
+ enable: false
+
+# https://instant.page/
+# prefetch預加載
+instantpage:
+ enable: true
+
+# https://github.com/vinta/pangu.js
+# 中英文之間添加空格
+pangu:
+ enable: false
+ field: page # page/post
+
+# Note (Bootstrap Callout)
+# https://muse.theme-next.org/docs/tag-plugins/note
+note:
+ # Note tag style values:
+ # - simple bs-callout old alert style. Default.
+ # - modern bs-callout new (v2-v3) alert style.
+ # - flat flat callout style with background, like on Mozilla or StackOverflow.
+ # - disabled disable all CSS styles import of note tag.
+ style: flat
+ icons: true
+ border_radius: 3
+ # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
+ # Offset also applied to label tag variables. This option can work with disabled note tag.
+ light_bg_offset: 0
+
+# 圖片懶加載
+# https://github.com/aFarkas/lazysizes
+lazyload:
+ enable: true
+
+# 避免重複網址分散seo
+canonical: true
+
+# 禁止百度轉碼
+disable_baidu_transformation: true
+
+# twitter分享自動帶上樣式
+# https://i.loli.net/2019/09/08/qm3RfvUCKbct1Wz.png
+twitter_meta: true
+
+# facebook QQ 等 分享自動帶上樣式
+# https://i.loli.net/2019/09/08/2wbFJEKloisRvhj.png
+Open_Graph_meta: true
+
+# 開啟hexo自帶的緩存，加快生成速度
+fragment_cache: true
+
+# CDN
+# 網站必須
+# 可根據需要自行添加js/css
+CDN_USE:
+ css:
+ - /css/index.css
+
+ js:
+ - https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js #/js/third-party/jquery.min.js
+ - /js/utils.js
+ - /js/main.js
+
+# CDN
+# 非必要不要修改
+CDN:
+ # comments
+ blueimp_md5: https://cdn.jsdelivr.net/npm/blueimp-md5/js/md5.min.js
+ gitalk: https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js
+ gitalk_css: https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css
+ valine: https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js
+ disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1.2/dist/disqus.js
+ disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1.2/dist/disqusjs.css
+ utterances: https://utteranc.es/client.js
+
+ # share
+ addtoany: https://static.addtoany.com/menu/page.js
+ sharejs: https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js
+ sharejs_css: https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css
+
+ # search
+ local_search: /js/search/local-search.js
+ algolia_js: /js/search/algolia.js
+ algolia_search: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.js
+ algolia_search_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.css
+
+ # math
+ mathjax: https://cdn.jsdelivr.net/npm/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML
+ katex: https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css
+ katex_copytex: https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js
+ katex_copytex_css: https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css
+ mermaid: https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js
+
+ # count
+ busuanzi: //busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js
+
+ # background effect
+ canvas_ribbon: /js/third-party/canvas-ribbon.js
+ canvas_ribbon_piao: /js/third-party/piao.js
+ canvas_nest: /js/third-party/canvas-nest.js
+
+ lazyload: https://cdn.jsdelivr.net/npm/lazysizes@latest/lazysizes.min.js
+ instantpage: https://cdn.jsdelivr.net/npm/instant.page@latest/instantpage.min.js
+ typed: https://cdn.jsdelivr.net/npm/typed.js
+ js_cookies: https://cdn.jsdelivr.net/npm/js-cookie/dist/js.cookie.min.js
+ pangu: https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js
+
+ # photo
+ fancybox_css: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css
+ fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js
+ medium_zoom: https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js
+
+ # snackbar
+ snackbar_css: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css
+ snackbar: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js
+
+ # 鼠標點擊特效
+ anime: https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js
+ activate_power_mode: /js/third-party/activate-power-mode.js
+ fireworks: /js/third-party/fireworks.js
+ click_heart: /js/third-party/click_heart.js
+ ClickShowText: /js/third-party/ClickShowText.js
+
+ # fontawesome
+ fontawesome_v4: https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
+ fontawesome_v5: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css
+
+ translate: /js/tw_cn.js
diff --git a/themes/butterfly/languages/default.yml b/themes/butterfly/languages/default.yml
new file mode 100644
index 00000000..441e6d53
--- /dev/null
+++ b/themes/butterfly/languages/default.yml
@@ -0,0 +1,106 @@
+sidebar:
+ catalog: Catalog
+ have_read: You've read
+
+footer:
+ driven: Driven
+ theme: Theme
+
+copy:
+ success: Copy successfully
+ error: Copy error
+ noSupport: The browser does not support
+
+page:
+ articles: Articles
+ tag: Tag
+ category: Category
+ archives: Archives
+
+sticky: Sticky
+no_title: No title
+
+post:
+ created: Created
+ updated: Updated
+ wordcount: Word count
+ min2read: "Reading time: %s min"
+ page_pv: Post View
+ comments: Comments
+ copyright:
+ author: Author
+ link: Link
+ copyright_notice: Copyright Notice
+ copyright_content: 'All articles in this blog are licensed under %s unless stating additionally.'
+ recommend: Recommend
+
+search: Search
+algolia_search:
+ input_placeholder: Search for Posts
+ hits_empty: "We didn't find any results for the search: ${query}."
+ hits_stats: "${hits} results found in ${time} ms"
+
+local_search:
+ label: Local search
+ input_placeholder: Search for Posts
+ hits_empty: "We didn't find any results for the search: ${query}"
+ powered_by: Powered by
+
+pagination:
+ prev: Previous Post
+ next: Next Post
+
+comment: Comment
+
+aside:
+ articles: Articles
+ tags: Tags
+ categories: Categories
+ card_announcement: Announcement
+ card_categories: Categories
+ card_tags: Tags
+ card_archives: Archives
+ card_recent_post: Recent Post
+ card_bookmark: Add to bookmark
+ card_webinfo:
+ headline: Info
+ article_name: Article
+ runtime_name: Run time
+ site_wordcount: Total Count
+ site_uv_name: UV
+ site_pv_name: PV
+
+donate: Donate
+share: Share
+bookmark:
+ title: Bookmark
+
+rightside:
+ readmode_title: Read Mode
+ font_plus_title: Increase font size
+ font_minus_title: Decrease font size
+ translate_title: Traditional Chinese and Simplified Chinese Conversion
+ night_mode_title: Dark Mode
+ back_to_top: Back to top
+ toc: Table of Contents
+ scroll_to_comment: Scroll to comment
+ setting: Setting
+
+runtime_unit: days
+
+copy_copyright:
+ author: Author
+ link: Link
+ source: Source
+ info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
+
+Snackbar:
+ bookmark:
+ message_prev: Press
+ message_next: to bookmark this page
+ chs_to_cht: Traditional Chinese Activated Manually
+ cht_to_chs: Simplified Chinese Activated Manually
+ day_to_night: Dark Mode Activated Manually
+ night_to_day: Light Mode Activated Manually
+
+error_title: Page not found
diff --git a/themes/butterfly/languages/en.yml b/themes/butterfly/languages/en.yml
new file mode 100644
index 00000000..441e6d53
--- /dev/null
+++ b/themes/butterfly/languages/en.yml
@@ -0,0 +1,106 @@
+sidebar:
+ catalog: Catalog
+ have_read: You've read
+
+footer:
+ driven: Driven
+ theme: Theme
+
+copy:
+ success: Copy successfully
+ error: Copy error
+ noSupport: The browser does not support
+
+page:
+ articles: Articles
+ tag: Tag
+ category: Category
+ archives: Archives
+
+sticky: Sticky
+no_title: No title
+
+post:
+ created: Created
+ updated: Updated
+ wordcount: Word count
+ min2read: "Reading time: %s min"
+ page_pv: Post View
+ comments: Comments
+ copyright:
+ author: Author
+ link: Link
+ copyright_notice: Copyright Notice
+ copyright_content: 'All articles in this blog are licensed under %s unless stating additionally.'
+ recommend: Recommend
+
+search: Search
+algolia_search:
+ input_placeholder: Search for Posts
+ hits_empty: "We didn't find any results for the search: ${query}."
+ hits_stats: "${hits} results found in ${time} ms"
+
+local_search:
+ label: Local search
+ input_placeholder: Search for Posts
+ hits_empty: "We didn't find any results for the search: ${query}"
+ powered_by: Powered by
+
+pagination:
+ prev: Previous Post
+ next: Next Post
+
+comment: Comment
+
+aside:
+ articles: Articles
+ tags: Tags
+ categories: Categories
+ card_announcement: Announcement
+ card_categories: Categories
+ card_tags: Tags
+ card_archives: Archives
+ card_recent_post: Recent Post
+ card_bookmark: Add to bookmark
+ card_webinfo:
+ headline: Info
+ article_name: Article
+ runtime_name: Run time
+ site_wordcount: Total Count
+ site_uv_name: UV
+ site_pv_name: PV
+
+donate: Donate
+share: Share
+bookmark:
+ title: Bookmark
+
+rightside:
+ readmode_title: Read Mode
+ font_plus_title: Increase font size
+ font_minus_title: Decrease font size
+ translate_title: Traditional Chinese and Simplified Chinese Conversion
+ night_mode_title: Dark Mode
+ back_to_top: Back to top
+ toc: Table of Contents
+ scroll_to_comment: Scroll to comment
+ setting: Setting
+
+runtime_unit: days
+
+copy_copyright:
+ author: Author
+ link: Link
+ source: Source
+ info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
+
+Snackbar:
+ bookmark:
+ message_prev: Press
+ message_next: to bookmark this page
+ chs_to_cht: Traditional Chinese Activated Manually
+ cht_to_chs: Simplified Chinese Activated Manually
+ day_to_night: Dark Mode Activated Manually
+ night_to_day: Light Mode Activated Manually
+
+error_title: Page not found
diff --git a/themes/butterfly/languages/zh-CN.yml b/themes/butterfly/languages/zh-CN.yml
new file mode 100644
index 00000000..a78d07e4
--- /dev/null
+++ b/themes/butterfly/languages/zh-CN.yml
@@ -0,0 +1,108 @@
+sidebar:
+ catalog: 目录
+ have_read: 你已经读了
+
+footer:
+ driven: 驱动
+ theme: 主题
+
+copy:
+ success: 复制成功
+ error: 复制错误
+ noSupport: 浏览器不支持
+
+page:
+ articles: 文章总览
+ tag: 标签
+ category: 分类
+ archives: 归档
+
+sticky: 置顶
+no_title: 无题
+
+post:
+ created: 发表于
+ updated: 更新于
+ wordcount: 字数总计
+ min2read: "阅读时长: %s 分钟"
+ page_pv: 阅读量
+ comments: 评论数
+ copyright:
+ author: 文章作者
+ link: 文章链接
+ copyright_notice: 版权声明
+ copyright_content: '本博客所有文章除特别声明外，均采用
+ %s 许可协议。转载请注明来自 %s！'
+ recommend: 相关推荐
+
+search: 搜索
+algolia_search:
+ input_placeholder: 搜索文章
+ hits_empty: "找不到您查询的内容:${query}"
+ hits_stats: "找到 ${hits} 条结果，用时 ${time} 毫秒"
+
+local_search:
+ label: 本地搜索
+ input_placeholder: 搜索文章
+ hits_empty: "找不到您查询的内容:${query}"
+ powered: "提供支持"
+ by: 由
+
+pagination:
+ prev: 上一篇
+ next: 下一篇
+
+comment: 评论
+
+aside:
+ articles: 文章
+ tags: 标签
+ categories: 分类
+ card_announcement: 公告
+ card_categories: 分类
+ card_tags: 标签
+ card_archives: 归档
+ card_recent_post: 最新文章
+ card_bookmark: 加入书签
+ card_webinfo:
+ headline: 网站资讯
+ article_name: 文章数目
+ runtime_name: 已运行时间
+ site_wordcount: 本站总字数
+ site_uv_name: 本站访客数
+ site_pv_name: 本站总访问量
+
+donate: 打赏
+share: 分享
+bookmark:
+ title: 添加书签
+
+rightside:
+ readmode_title: 阅读模式
+ font_plus_title: 放大字体
+ font_minus_title: 缩小字体
+ translate_title: 简繁转换
+ night_mode_title: 夜间模式
+ back_to_top: 回到顶部
+ toc: 目录
+ scroll_to_comment: 直达评论
+ setting: 设置
+
+runtime_unit: 天
+
+copy_copyright:
+ author: 作者
+ link: 链接
+ source: 来源
+ info: 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
+
+Snackbar:
+ bookmark:
+ message_prev: 按
+ message_next: 键将本页加入书签
+ chs_to_cht: 你已切换为繁体
+ cht_to_chs: 你已切换为简体
+ day_to_night: 你已切换为深色模式
+ night_to_day: 你已切换为浅色模式
+
+error_title: 页面没有找到
diff --git a/themes/butterfly/languages/zh-TW.yml b/themes/butterfly/languages/zh-TW.yml
new file mode 100644
index 00000000..bbdf11a0
--- /dev/null
+++ b/themes/butterfly/languages/zh-TW.yml
@@ -0,0 +1,110 @@
+sidebar:
+ catalog: 目錄
+ have_read: 你已經讀了
+
+footer:
+ driven: Power by
+ theme: Theme
+
+copy:
+ success: 複製成功
+ error: 複製錯誤
+ noSupport: 瀏覽器不支持
+
+page:
+ articles: 文章總覽
+ tag: 標籤
+ category: 分類
+ archives: 歸檔
+
+sticky: 置頂
+no_title: 無題
+
+post:
+ created: 發表於
+ updated: 更新於
+ wordcount: 字數總計
+ min2read: "閱讀時長: %s 分鐘"
+ page_pv: 閱讀量
+ comments: 評論數
+ copyright:
+ author: 文章作者
+ link: 文章鏈接
+ copyright_notice: 版權聲明
+ copyright_content: '本博客所有文章除特別聲明外，均採用
+ %s 許可協議。轉載請註明來自 %s！'
+ recommend: 相關推薦
+
+search: 搜索
+algolia_search:
+ input_placeholder: 搜索文章
+ hits_empty: "找不到您查詢的內容:${query}"
+ hits_stats: "找到 ${hits} 條結果，用時 ${time} 毫秒"
+
+local_search:
+ label: 本地搜索
+ input_placeholder: 搜索文章
+ hits_empty: "找不到您查詢的內容:${query}"
+ powered: "提供支持"
+ by: 由
+
+pagination:
+ prev: 上一篇
+ next: 下一篇
+
+comment: 評論
+
+aside:
+ articles: 文章
+ tags: 標籤
+ categories: 分類
+ card_announcement: 公告
+ card_categories: 分類
+ card_tags: 標籤
+ card_archives: 歸檔
+ card_recent_post: 最新文章
+ card_bookmark: 加入書籤
+ card_webinfo:
+ headline: 網站資訊
+ article_name: 文章數目
+ runtime_name: 已運行時間
+ site_wordcount: 本站總字數
+ site_uv_name: 本站訪客數
+ site_pv_name: 本站總訪問量
+
+donate: 打賞
+share: 分享
+bookmark:
+ title: 添加書籤
+
+rightside:
+ readmode_title: 閱讀模式
+ font_plus_title: 放大字體
+ font_minus_title: 縮小字體
+ translate_title: 簡繁轉換
+ night_mode_title: 夜間模式
+ back_to_top: 回到頂部
+ toc: 目錄
+ scroll_to_comment: 直達評論
+ setting: 設置
+
+runtime_unit: 天
+
+copy_copyright:
+ author: 作者
+ link: 鏈接
+ source: 來源
+ info: 著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。
+
+Snackbar:
+ bookmark:
+ message_prev: 按
+ message_next: 鍵將本頁加入書籤
+ chs_to_cht: 你已切換為繁體
+ cht_to_chs: 你已切換為簡體
+ day_to_night: 你已切換為深色模式
+ night_to_day: 你已切換為淺色模式
+
+error_title: 頁面沒有找到
+
+
diff --git a/themes/butterfly/layout/404.pug b/themes/butterfly/layout/404.pug
new file mode 100644
index 00000000..4dc3c92e
--- /dev/null
+++ b/themes/butterfly/layout/404.pug
@@ -0,0 +1,23 @@
+- var top_img = theme.error_404.background || theme.default_top_img
+- var bg_img = `background-image: url(${top_img})`
+
+doctype html
+html(lang=config.language data-theme=theme.display_mode)
+ head
+ include includes/head.pug
+ body
+ if theme.fireworks && theme.fireworks.enable
+ canvas.fireworks
+
+ include includes/mobile-sidebar/index.pug
+
+ nav#nav.error-no-found(style=bg_img)
+ include includes/header/header.pug
+ #error_info.is-center
+ h1#error_title= '404'
+ #error_subtitle= theme.error_404.subtitle
+ include includes/rightside.pug
+ include includes/search/index.pug
+ each item in theme.CDN_USE.js
+ script(src=url_for(item))
+ include includes/additional-js.pug
diff --git a/themes/butterfly/layout/archive.pug b/themes/butterfly/layout/archive.pug
new file mode 100644
index 00000000..faa485c1
--- /dev/null
+++ b/themes/butterfly/layout/archive.pug
@@ -0,0 +1,8 @@
+extends includes/layout.pug
+
+block content
+ include ./includes/mixins/article-sort.pug
+ #archive
+ .article-sort-title= _p('page.articles') + ' - ' + site.posts.length
+ +articleSort(page.posts)
+ include includes/pagination.pug
\ No newline at end of file
diff --git a/themes/butterfly/layout/category.pug b/themes/butterfly/layout/category.pug
new file mode 100644
index 00000000..c8b5cb37
--- /dev/null
+++ b/themes/butterfly/layout/category.pug
@@ -0,0 +1,14 @@
+extends includes/layout.pug
+
+block content
+ if theme.category_ui == 'index'
+ include ./includes/mixins/UI.pug
+ #recent-posts.recent-posts.category_ui
+ +UI_NEW(page.posts)
+ include includes/pagination.pug
+ else
+ include ./includes/mixins/article-sort.pug
+ #category
+ .article-sort-title= _p('page.category') + ' - ' + page.category
+ +articleSort(page.posts)
+ include includes/pagination.pug
\ No newline at end of file
diff --git a/themes/butterfly/layout/flink.pug b/themes/butterfly/layout/flink.pug
new file mode 100644
index 00000000..532dcc58
--- /dev/null
+++ b/themes/butterfly/layout/flink.pug
@@ -0,0 +1,20 @@
+#page
+ .flink#article-container
+ each i in site.data.link
+ h2= i.class_name
+ .post-cards
+ .md-links
+ each item in i.link_list
+ .md-links-item
+ a(href=item.link title=item.name target="_blank")
+ if theme.lazyload.enable
+ img.lazyload(data-src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
+ else
+ img(src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
+ .md-links-title= item.name
+ .md-links-des= item.descr
+ != page.content
+ if page.comments !== false
+ include includes/comments/index.pug
+
+
diff --git a/themes/butterfly/layout/includes/additional-js.pug b/themes/butterfly/layout/includes/additional-js.pug
new file mode 100644
index 00000000..4393e511
--- /dev/null
+++ b/themes/butterfly/layout/includes/additional-js.pug
@@ -0,0 +1,65 @@
+if theme.translate && theme.translate.enable
+ script(src=url_for(theme.CDN.translate))
+
+if (theme.medium_zoom && theme.medium_zoom.enable)
+ script(src=url_for(theme.CDN.medium_zoom))
+
+if (theme.fancybox && theme.fancybox.enable)
+ script(src=url_for(theme.CDN.fancybox))
+
+include ./math/index.pug
+
+if theme.fireworks && theme.fireworks.enable
+ script(src=url_for(theme.CDN.anime))
+ script(src=url_for(theme.CDN.fireworks))
+
+if (theme.snackbar && theme.snackbar.enable)
+ script(src=url_for(theme.CDN.snackbar))
+
+if (theme.canvas_ribbon && theme.canvas_ribbon.enable)
+ include ./third-party/canvas-ribbon.pug
+
+if (theme.canvas_ribbon_piao && theme.canvas_ribbon_piao.enable)
+ include ./third-party/canvas-ribbon-piao.pug
+
+if (theme.canvas_nest && theme.canvas_nest.enable)
+ include ./third-party/canvas-nest.pug
+
+if theme.activate_power_mode.enable
+ script(src=url_for(theme.CDN.activate_power_mode))
+ script.
+ POWERMODE.colorful = #{theme.activate_power_mode.colorful};
+ POWERMODE.shake = #{theme.activate_power_mode.shake};
+ document.body.addEventListener('input', POWERMODE);
+
+if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
+ script(async src=url_for(theme.CDN.busuanzi))
+
+if theme.instantpage.enable
+ script(src=url_for(theme.CDN.instantpage) type="module")
+
+if theme.lazyload.enable
+ script(src=url_for(theme.CDN.lazyload) async="")
+
+//- 鼠標特效
+if theme.click_heart && theme.click_heart.enable
+ script(src=url_for(theme.CDN.click_heart))
+
+if theme.ClickShowText && theme.ClickShowText.enable
+ script(src=url_for(theme.CDN.ClickShowText))
+
+if theme.pangu && theme.pangu.enable
+ include ./third-party/pangu.pug
+
+//- search
+if theme.algolia_search && theme.algolia_search.enable
+ script(src=url_for(theme.CDN.algolia_js))
+else if theme.local_search && theme.local_search.enable
+ script(src=url_for(theme.CDN.local_search))
+
+//- mermaid
+if theme.mermaid.enable
+ include ./math/mermaid.pug
+
+if is_home()
+ include ./head/subtitle.pug
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/comments/disqus.pug b/themes/butterfly/layout/includes/comments/disqus.pug
new file mode 100644
index 00000000..661f53ff
--- /dev/null
+++ b/themes/butterfly/layout/includes/comments/disqus.pug
@@ -0,0 +1,24 @@
+#disqus_thread
+script.
+ var disqus_config = function () {
+ this.page.url = '!{ page.permalink }';
+ this.page.identifier = '!{ page.path }';
+ this.page.title = '!{ page.title }';
+ };
+ (function() {
+ var d = document, s = d.createElement('script');
+ s.src = 'https://!{theme.disqus.shortname}.disqus.com/embed.js';
+ s.setAttribute('data-timestamp', +new Date());
+ (d.head || d.body).appendChild(s);
+ })();
+
+if is_post() && theme.disqus.count
+ script.
+ function getDisqusCount() {
+ var d = document, s = d.createElement('script');
+ s.src = 'https://!{theme.disqus.shortname}.disqus.com/count.js';
+ s.id = 'dsq-count-scr';
+ (d.head || d.body).appendChild(s);
+ }
+
+ window.addEventListener('load', getDisqusCount, false);
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/comments/disqusjs.pug b/themes/butterfly/layout/includes/comments/disqusjs.pug
new file mode 100644
index 00000000..d1ddd2f0
--- /dev/null
+++ b/themes/butterfly/layout/includes/comments/disqusjs.pug
@@ -0,0 +1,24 @@
+#disqus_thread
+script(src=url_for(theme.CDN.disqusjs))
+script.
+ var dsqjs = new DisqusJS({
+ shortname: '!{theme.disqusjs.shortname}',
+ siteName: "!{theme.disqusjs.siteName}",
+ identifier: '!{ page.path }',
+ url: '!{ page.permalink }',
+ title: '!{ page.title }',
+ api: '!{theme.disqusjs.api}',
+ apikey: '!{theme.disqusjs.apikey}',
+ admin: '!{theme.disqusjs.admin}',
+ adminLabel: '!{theme.disqusjs.adminLabel}'
+ });
+
+if is_post() && theme.disqusjs.count
+ script.
+ function getDisqusCount() {
+ var d = document, s = d.createElement('script');
+ s.src = 'https://!{theme.disqusjs.shortname}.disqus.com/count.js';
+ s.id = 'dsq-count-scr';
+ (d.head || d.body).appendChild(s);
+ }
+ window.addEventListener('load', getDisqusCount, false);
diff --git a/themes/butterfly/layout/includes/comments/gitalk.pug b/themes/butterfly/layout/includes/comments/gitalk.pug
new file mode 100644
index 00000000..9a1fee97
--- /dev/null
+++ b/themes/butterfly/layout/includes/comments/gitalk.pug
@@ -0,0 +1,27 @@
+#gitalk-container
+script.
+ var gitalk = new Gitalk({
+ clientID: '!{theme.gitalk.client_id}',
+ clientSecret: '!{theme.gitalk.client_secret}',
+ repo: '!{theme.gitalk.repo}',
+ owner: '!{theme.gitalk.owner}',
+ admin: ['!{theme.gitalk.admin}'],
+ id: md5(decodeURI(location.pathname)),
+ language: '!{theme.gitalk.language}',
+ perPage: !{theme.gitalk.perPage},
+ distractionFreeMode: !{theme.gitalk.distractionFreeMode},
+ pagerDirection: '!{theme.gitalk.pagerDirection}',
+ createIssueManually: !{theme.gitalk.createIssueManually},
+ updateCountCallback: commentCount
+ })
+ gitalk.render('gitalk-container')
+
+ function commentCount(n){
+ try {
+ document.getElementsByClassName('gitalk-comment-count')[0].innerHTML= n
+ } catch (e) {
+ return false
+ }
+ }
+
+
diff --git a/themes/butterfly/layout/includes/comments/index.pug b/themes/butterfly/layout/includes/comments/index.pug
new file mode 100644
index 00000000..030ae23c
--- /dev/null
+++ b/themes/butterfly/layout/includes/comments/index.pug
@@ -0,0 +1,26 @@
+- var d = theme.disqus && theme.disqus.enable
+- var dj = theme.disqusjs && theme.disqusjs.enable
+- var l = theme.laibili && theme.laibili.enable
+- var gt = theme.gitalk && theme.gitalk.enable
+- var v = theme.valine && theme.valine.enable
+- var u = theme.utterances && theme.utterances.enable
+- var isComment = d || dj || l || gt || v || u
+
+if isComment
+ hr
+ #post-comment
+ .comment_headling
+ i.fa.fa-comments.fa-fw(aria-hidden="true")
+ span= ' ' + _p('comment')
+ if d
+ include ./disqus.pug
+ else if dj
+ include ./disqusjs.pug
+ else if l
+ include ./laibili.pug
+ else if gt
+ include ./gitalk.pug
+ else if v
+ include ./valine.pug
+ else if u
+ include ./utterances.pug
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/comments/laibili.pug b/themes/butterfly/layout/includes/comments/laibili.pug
new file mode 100644
index 00000000..cd0fc75f
--- /dev/null
+++ b/themes/butterfly/layout/includes/comments/laibili.pug
@@ -0,0 +1,10 @@
+#lv-container(data-id="city" data-uid=theme.laibili.uid)
+ script.
+ (function(d, s) {
+ var j, e = d.getElementsByTagName(s)[0];
+ if (typeof LivereTower === 'function') { return; }
+ j = d.createElement(s);
+ j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
+ j.async = true;
+ e.parentNode.insertBefore(j, e);
+ })(document, 'script');
diff --git a/themes/butterfly/layout/includes/comments/utterances.pug b/themes/butterfly/layout/includes/comments/utterances.pug
new file mode 100644
index 00000000..d9cc76db
--- /dev/null
+++ b/themes/butterfly/layout/includes/comments/utterances.pug
@@ -0,0 +1,21 @@
+script#utterances_comment(src=theme.CDN.utterances
+ repo=theme.utterances.repo
+ issue-term=theme.utterances.issue_term
+ theme= theme.display_mode === 'dark' ? theme.utterances.dark_theme : theme.utterances.light_theme
+ crossorigin="anonymous"
+ async)
+
+if theme.darkmode.enable
+ script.
+ var themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
+ document.getElementById('utterances_comment').setAttribute('theme',themeNow)
+
+ function utterancesTheme () {
+ var theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
+ const message = {
+ type: 'set-theme',
+ theme: theme
+ };
+ const iframe = document.querySelector('.utterances-frame');
+ iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+ }
diff --git a/themes/butterfly/layout/includes/comments/valine.pug b/themes/butterfly/layout/includes/comments/valine.pug
new file mode 100644
index 00000000..71a771cd
--- /dev/null
+++ b/themes/butterfly/layout/includes/comments/valine.pug
@@ -0,0 +1,23 @@
+#vcomment.vcomment
+script(src=url_for(theme.CDN.valine))
+script.
+ var GUEST_INFO = ['nick','mail','link'];
+ var guest_info = '#{ theme.valine.guest_info }'.split(',').filter(function(item){
+ return GUEST_INFO.indexOf(item) > -1
+ });
+ guest_info = guest_info.length == 0 ? GUEST_INFO :guest_info;
+
+ window.valine = new Valine({
+ el:'#vcomment',
+ notify: #{theme.valine.notify},
+ verify: #{theme.valine.verify},
+ appId: '#{theme.valine.appId}',
+ appKey: '#{theme.valine.appKey}',
+ placeholder: '#{theme.valine.placeholder}',
+ avatar: '#{theme.valine.avatar}',
+ meta: guest_info,
+ pageSize: '#{theme.valine.pageSize}',
+ lang: '#{theme.valine.lang}',
+ recordIP: #{theme.valine.recordIP},
+ serverURLs: '#{theme.valine.serverURLs}'
+ });
diff --git a/themes/butterfly/layout/includes/footer.pug b/themes/butterfly/layout/includes/footer.pug
new file mode 100644
index 00000000..30b238f1
--- /dev/null
+++ b/themes/butterfly/layout/includes/footer.pug
@@ -0,0 +1,24 @@
+#footer-wrap
+ - var now = new Date()
+ - var nowYear = now.getFullYear()
+ if theme.since && theme.since != nowYear
+ .copyright!= `©${theme.since} - ${nowYear} By ${config.author}`
+ else
+ .copyright!= `©${nowYear} By ${config.author}`
+ if theme.footer_copyright.enable
+ .framework-info
+ span= _p('footer.driven') + ' '
+ a(href='https://hexo.io')
+ span Hexo
+ span.footer-separator |
+ span= _p('footer.theme') + ' '
+ a(href='https://github.com/jerryc127/hexo-theme-butterfly')
+ span Butterfly
+ if theme.footer_custom_text
+ .footer_custom_text!=`${theme.footer_custom_text}`
+ if theme.ICP.enable
+ .icp
+ a(href=theme.ICP.url)
+ if theme.ICP.icon
+ img.icp-icon(src=url_for(theme.ICP.icon))
+ span=theme.ICP.text
diff --git a/themes/butterfly/layout/includes/head.pug b/themes/butterfly/layout/includes/head.pug
new file mode 100644
index 00000000..febb1ee9
--- /dev/null
+++ b/themes/butterfly/layout/includes/head.pug
@@ -0,0 +1,105 @@
+- var pageTitle
+- if (is_archive()) pageTitle = _p('page.archives')
+- else if (is_tag()) pageTitle = _p('page.tag') + ': ' + page.tag
+- else if (is_category()) pageTitle = _p('page.category') + ': ' + page.category
+- else if (is_month()) pageTitle += ': ' + page.month + '/' + page.year
+- else if (is_year()) pageTitle += ': ' + page.year
+- else if (is_current('/404.html', [strict])) pageTitle = _p('error_title')
+- else pageTitle = page.title || config.title || ''
+
+- var isSubtitle = config.subtitle ? ' - ' + config.subtitle : ''
+- var tabTitle = is_home() || !pageTitle ? config.title + isSubtitle : pageTitle + ' | ' + config.title
+
+- var pageDescription = page.description || page.title || config.description
+- var pageKeywords
+- if (page.tags && page.tags.data) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',')
+- else pageKeywords = Array.isArray(config.keywords) ? (config.keywords).join(','): ([]).join(',') || config.keywords
+- var pageAuthor = config.email ? config.author + ',' + config.email : config.author
+- var pageCopyright = config.copyright || config.author
+- var without_html = url.replace('index.html', '')
+
+meta(charset='UTF-8')
+meta(http-equiv="X-UA-Compatible" content="IE=edge")
+meta(name="viewport" content="width=device-width,initial-scale=1")
+title= tabTitle
+meta(name="description" content=pageDescription)
+if pageKeywords
+ meta(name="keywords" content=pageKeywords)
+meta(name="author" content=pageAuthor)
+meta(name="copyright" content=pageCopyright)
+meta(name ="format-detection" content="telephone=no")
+!=favicon_tag(theme.favicon || config.favicon)
+
+if theme.disable_baidu_transformation
+ meta(http-equiv="Cache-Control" content="no-transform")
+ meta(http-equiv="Cache-Control" content="no-siteapp")
+
+if page.hide == true
+ meta(name="robots" content="noindex")
+
+if theme.douban
+ if theme.douban.meta && (is_current('/movies/', [strict]) || is_current('/books/', [strict]) || is_current('/games/', [strict]))
+ meta(name="referrer" content="no-referrer")
+
+//- 預解析
+!=partial('includes/head/dns_prefetch', {}, {cache:theme.fragment_cache})
+
+//- 網站驗證
+!=partial('includes/head/site_verification', {}, {cache:theme.fragment_cache})
+
+//- Open_Graph
+include ./head/Open_Graph.pug
+
+//- PWA
+if (theme.pwa && theme.pwa.enable)
+ !=partial('includes/head/pwa', {}, {cache:theme.fragment_cache})
+
+script(src=url_for(theme.CDN.js_cookies))
+
+if theme.darkmode.enable
+ !=partial('includes/head/darkmode', {}, {cache:theme.fragment_cache})
+
+each item in theme.CDN_USE.css
+ link(rel='stylesheet', href=url_for(item))
+
+if theme.fontawesome_v5 && theme.fontawesome_v5.enable
+ link(rel='stylesheet', href=url_for(theme.CDN.fontawesome_v5))
+else
+ link(rel='stylesheet', href=url_for(theme.CDN.fontawesome_v4))
+
+if (theme.fancybox && theme.fancybox.enable)
+ link(rel='stylesheet', href=url_for(theme.CDN.fancybox_css))
+
+if (theme.snackbar && theme.snackbar.enable)
+ link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css))
+
+if theme.canonical
+ link(rel="canonical" href=without_html)
+
+if is_post()
+ if(page.prev)
+ link(rel="prev" title=page.prev.title href=url_for(page.prev.permalink) )
+ if(page.next)
+ link(rel="next" title=page.next.title href=url_for(page.next.permalink) )
+
+if theme.algolia_search.enable
+ link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.algolia_search_css))
+ script(src=url_for(theme.CDN.algolia_search) defer)
+
+//- comment css
+include ./head/comment.pug
+
+//- google_adsense
+!=partial('includes/head/google_adsense', {}, {cache:theme.fragment_cache})
+
+//- analytics
+!=partial('includes/head/analytics', {}, {cache:theme.fragment_cache})
+
+if theme.blog_title_font.font_link
+ link(rel='stylesheet', href=url_for(theme.blog_title_font.font_link))
+
+//- global config
+!=partial('includes/head/config', {}, {cache:theme.fragment_cache})
+
+include ./head/config_site.pug
+include ./head/noscript.pug
diff --git a/themes/butterfly/layout/includes/head/Open_Graph.pug b/themes/butterfly/layout/includes/head/Open_Graph.pug
new file mode 100644
index 00000000..ff4a39bc
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/Open_Graph.pug
@@ -0,0 +1,17 @@
+- var contentType = is_post() ? 'article' : 'website'
+
+//- twitter meta
+if theme.twitter_meta
+ meta(name="twitter:card" content="summary")
+ meta(name="twitter:title" content=pageTitle)
+ meta(name="twitter:description" content=pageDescription)
+ meta(name="twitter:image" content=full_url_for(page.cover || theme.avatar.img))
+
+//- Open_Graph
+if theme.Open_Graph_meta
+ meta(property="og:type" content=contentType)
+ meta(property="og:title" content=pageTitle)
+ meta(property="og:url" content=without_html)
+ meta(property="og:site_name" content=config.title)
+ meta(property="og:description" content=pageDescription)
+ meta(property="og:image" content=full_url_for(page.cover || theme.avatar.img))
diff --git a/themes/butterfly/layout/includes/head/analytics.pug b/themes/butterfly/layout/includes/head/analytics.pug
new file mode 100644
index 00000000..768b3e60
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/analytics.pug
@@ -0,0 +1,22 @@
+if theme.baidu_analytics
+ script.
+ var _hmt = _hmt || [];
+ (function() {
+ var hm = document.createElement("script");
+ hm.src = "https://hm.baidu.com/hm.js?!{theme.baidu_analytics}";
+ var s = document.getElementsByTagName("script")[0];
+ s.parentNode.insertBefore(hm, s);
+ })();
+
+if theme.google_analytics
+ script.
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', '!{theme.google_analytics}', 'auto');
+ ga('send', 'pageview');
+
+if theme.tencent_analytics
+ script(src=`https://tajs.qq.com/stats?sId=${theme.tencent_analytics}` charset="UTF-8")
diff --git a/themes/butterfly/layout/includes/head/comment.pug b/themes/butterfly/layout/includes/head/comment.pug
new file mode 100644
index 00000000..91d5cf05
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/comment.pug
@@ -0,0 +1,8 @@
+if (theme.disqusjs && theme.disqusjs.enable && page.comments !== false && !is_tag() && !is_category() && !is_archive() && !is_home())
+ link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.disqusjs_css))
+
+if (theme.gitalk && theme.gitalk.enable && page.comments !== false && !is_tag() && !is_category() && !is_archive() && !is_home())
+ link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.gitalk_css))
+ script(src=url_for(theme.CDN.gitalk))
+ script(src=url_for(theme.CDN.blueimp_md5))
+
diff --git a/themes/butterfly/layout/includes/head/config.pug b/themes/butterfly/layout/includes/head/config.pug
new file mode 100644
index 00000000..63e854b4
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/config.pug
@@ -0,0 +1,108 @@
+-
+ var algolia = 'undefined';
+ var env = process.env;
+ if (theme.algolia_search.enable) {
+ algolia = JSON.stringify({
+ appId: env.ALGOLIA_APP_ID || config.algolia.appId || config.algolia.applicationID,
+ apiKey: env.ALGOLIA_API_KEY || config.algolia.apiKey,
+ indexName: env.ALGOLIA_INDEX_NAME || config.algolia.indexName,
+ hits: theme.algolia_search.hits,
+ // search languages
+ languages: {
+ input_placeholder: _p("algolia_search.input_placeholder"),
+ hits_empty: _p("algolia_search.hits_empty"),
+ hits_stats: _p("algolia_search.hits_stats")
+ }
+ })
+ }
+
+ var localSearch = 'undefined';
+ if (theme.local_search && theme.local_search.enable) {
+ localSearch = JSON.stringify({
+ path: config.search.path,
+ languages: {
+ // search languages
+ hits_empty: _p("local_search.hits_empty")
+ }
+ })
+ }
+ var translate = 'undefined';
+ if (theme.translate && theme.translate.enable){
+ translate = JSON.stringify({
+ defaultEncoding: theme.translate.defaultEncoding,
+ translateDelay: theme.translate.translateDelay,
+ cookieDomain: theme.translate.cookieDomain,
+ msgToTraditionalChinese: theme.translate.msgToTraditionalChinese,
+ msgToSimplifiedChinese: theme.translate.msgToSimplifiedChinese
+ })
+ }
+
+ var copyright = 'undefined' ;
+ if (theme.copy.enable && theme.copy.copyright){
+ copyright = JSON.stringify({
+ languages: {
+ author: _p("copy_copyright.author") + ': ' + config.author,
+ link: _p("copy_copyright.link") + ': ',
+ source: _p("copy_copyright.source") + ': ' + config.title,
+ info: _p("copy_copyright.info")
+ }
+ })
+ }
+
+ var ClickShowText = 'undefined';
+ if (theme.ClickShowText && theme.ClickShowText.enable) {
+ ClickShowText = JSON.stringify({
+ text: theme.ClickShowText.text.join(","),
+ fontSize: theme.ClickShowText.fontSize
+ })
+ }
+
+
+ var Snackbar = 'undefined';
+ if (theme.snackbar && theme.snackbar.enable) {
+ Snackbar = JSON.stringify({
+ bookmark: {
+ message_prev: _p("Snackbar.bookmark.message_prev"),
+ message_next: _p("Snackbar.bookmark.message_next")
+ },
+ chs_to_cht: _p("Snackbar.chs_to_cht"),
+ cht_to_chs: _p("Snackbar.cht_to_chs"),
+ day_to_night: _p("Snackbar.day_to_night"),
+ night_to_day: _p("Snackbar.night_to_day"),
+ bgLight: theme.snackbar.bg_light,
+ bgDark: theme.snackbar.bg_dark,
+ position: theme.snackbar.position,
+ })
+ }
+
+script.
+ var GLOBAL_CONFIG = {
+ root: '!{config.root}',
+ algolia: !{algolia},
+ localSearch: !{localSearch},
+ translate: !{translate},
+ copy: {
+ success: '!{_p("copy.success")}',
+ error: '!{_p("copy.error")}',
+ noSupport: '!{_p("copy.noSupport")}'
+ },
+ bookmark: {
+ message_prev: '!{_p("Snackbar.bookmark.message_prev")}',
+ message_next: '!{_p("Snackbar.bookmark.message_next")}'
+ },
+ runtime_unit: '!{_p("runtime_unit")}',
+ runtime: !{theme.runtimeshow.enable},
+ copyright: !{copyright},
+ ClickShowText: !{ClickShowText},
+ medium_zoom: !{theme.medium_zoom.enable},
+ fancybox: !{theme.fancybox.enable},
+ Snackbar: !{Snackbar},
+ baiduPush: !{theme.baidu_push && theme.baidu_push.enable},
+ highlightCopy: !{theme.highlight_copy},
+ highlightLang: !{theme.highlight_lang},
+ highlightShrink: '!{theme.highlight_shrink}',
+ isFontAwesomeV5: !{theme.fontawesome_v5 && theme.fontawesome_v5.enable},
+ isPhotoFigcaption: !{theme.photofigcaption}
+
+ }
+
diff --git a/themes/butterfly/layout/includes/head/config_site.pug b/themes/butterfly/layout/includes/head/config_site.pug
new file mode 100644
index 00000000..1d7ae99b
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/config_site.pug
@@ -0,0 +1,7 @@
+script.
+ var GLOBAL_CONFIG_SITE = {
+ isPost: !{is_post()},
+ isHome: !{is_home()},
+ isSidebar: !{is_post() && page.toc !== false && theme.toc.enable && (toc(page.content) !== '' || page.encrypt == true )}
+ }
+
diff --git a/themes/butterfly/layout/includes/head/darkmode.pug b/themes/butterfly/layout/includes/head/darkmode.pug
new file mode 100644
index 00000000..bd5961f8
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/darkmode.pug
@@ -0,0 +1,47 @@
+script.
+ var autoChangeMode = '#{theme.darkmode.autoChangeMode}'
+ var t = Cookies.get("theme")
+ if (autoChangeMode == '1'){
+ var isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
+ var isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches
+ var isNotSpecified = window.matchMedia("(prefers-color-scheme: no-preference)").matches
+ var hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
+
+ if (t === undefined){
+ if (isLightMode) activateLightMode()
+ else if (isDarkMode) activateDarkMode()
+ else if (isNotSpecified || hasNoSupport){
+ console.log('You specified no preference for a color scheme or your browser does not support it. I Schedule dark mode during night time.')
+ var now = new Date()
+ var hour = now.getHours()
+ var isNight = hour < 6 || hour >= 18
+ isNight ? activateDarkMode() : activateLightMode()
+ }
+ } else if (t == 'light') activateLightMode()
+ else activateDarkMode()
+
+ } else if (autoChangeMode == '2'){
+ now = new Date();
+ hour = now.getHours();
+ isNight = hour < 6 || hour >= 18
+ if(t === undefined) isNight? activateDarkMode() : activateLightMode()
+ else if (t === 'light') activateLightMode()
+ else activateDarkMode()
+ } else {
+ if ( t == 'dark' ) activateDarkMode()
+ else if ( t == 'light') activateLightMode()
+ }
+
+ function activateDarkMode(){
+ document.documentElement.setAttribute('data-theme', 'dark')
+ if (document.querySelector('meta[name="theme-color"]') !== null){
+ document.querySelector('meta[name="theme-color"]').setAttribute('content','#000')
+ }
+ }
+ function activateLightMode(){
+ document.documentElement.setAttribute('data-theme', 'light')
+ if (document.querySelector('meta[name="theme-color"]') !== null){
+ document.querySelector('meta[name="theme-color"]').setAttribute('content','#fff')
+ }
+ }
+
diff --git a/themes/butterfly/layout/includes/head/dns_prefetch.pug b/themes/butterfly/layout/includes/head/dns_prefetch.pug
new file mode 100644
index 00000000..1bfccf74
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/dns_prefetch.pug
@@ -0,0 +1,16 @@
+link(rel="preconnect" href="//cdn.jsdelivr.net")
+
+if theme.google_analytics
+ link(rel="preconnect" href="https://www.google-analytics.com" crossorigin)
+
+if theme.baidu_analytics
+ link(rel="preconnect" href="https://hm.baidu.com")
+
+if theme.tencent_analytics
+ link(rel="preconnect" href="http://ta.qq.com")
+
+if theme.blog_title_font.font_link
+ link(rel="preconnect" href="https://fonts.googleapis.com" crossorigin)
+
+if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
+ link(rel="preconnect" href="//busuanzi.ibruce.info")
diff --git a/themes/butterfly/layout/includes/head/google_adsense.pug b/themes/butterfly/layout/includes/head/google_adsense.pug
new file mode 100644
index 00000000..b3210ef9
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/google_adsense.pug
@@ -0,0 +1,7 @@
+if (theme.google_adsense && theme.google_adsense.enable)
+ script(async src=theme.google_adsense.js)
+ script.
+ (adsbygoogle = window.adsbygoogle || []).push({
+ google_ad_client: '!{theme.google_adsense.client}',
+ enable_page_level_ads: '!{theme.google_adsense.enable_page_level_ads}'
+ });
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/head/noscript.pug b/themes/butterfly/layout/includes/head/noscript.pug
new file mode 100644
index 00000000..de8a2d8f
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/noscript.pug
@@ -0,0 +1,9 @@
+noscript.
+
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/head/pwa.pug b/themes/butterfly/layout/includes/head/pwa.pug
new file mode 100644
index 00000000..ca927dc8
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/pwa.pug
@@ -0,0 +1,13 @@
+link(rel="manifest" href=theme.pwa.manifest)
+if(theme.pwa.theme_color)
+ meta(name="theme-color" content=theme.pwa.theme_color)
+if(theme.pwa.theme_color)
+ meta(name="msapplication-TileColor" content=theme.pwa.theme_color)
+if(theme.pwa.apple_touch_icon)
+ link(rel="apple-touch-icon" sizes="180x180" href=theme.pwa.apple_touch_icon)
+if(theme.pwa.favicon_32_32)
+ link(rel="icon" type="image/png" sizes="32x32" href=theme.pwa.favicon_32_32)
+if(theme.pwa.favicon_16_16)
+ link(rel="icon" type="image/png" sizes="16x16" href=theme.pwa.favicon_16_16)
+if(theme.pwa.mask_icon)
+ link(rel="mask-icon" href=theme.pwa.mask_icon color="#5bbad5")
diff --git a/themes/butterfly/layout/includes/head/site_verification.pug b/themes/butterfly/layout/includes/head/site_verification.pug
new file mode 100644
index 00000000..969883ba
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/site_verification.pug
@@ -0,0 +1,11 @@
+if theme.google_site_verification
+ meta(name="google-site-verification" content=theme.google_site_verification)
+
+if theme.bing_site_verification
+ meta(name="msvalidate.01" content=theme.bing_site_verification)
+
+if theme.baidu_site_verification
+ meta(name="baidu-site-verification" content=theme.baidu_site_verification)
+
+if theme.qihu_site_verification
+ meta(name="360-site-verification" content=theme.qihu_site_verification)
diff --git a/themes/butterfly/layout/includes/head/subtitle.pug b/themes/butterfly/layout/includes/head/subtitle.pug
new file mode 100644
index 00000000..b216f0cf
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/subtitle.pug
@@ -0,0 +1,116 @@
+if theme.subtitle.enable
+ - var source = theme.subtitle.source
+ - var subtitleEffect = theme.subtitle.effect
+
+ if subtitleEffect
+ script(src=url_for(theme.CDN.typed))
+
+ if source == '1'
+ script.
+ var subtitleEffect = !{subtitleEffect}
+ fetch('https://api.ooopn.com/ciba/api.php',)
+ .then(function (res){
+ return res.json();
+ })
+ .then(function (data) {
+ if (subtitleEffect){
+ var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(",");
+ var both = sub.unshift(data['ciba-en'],data.ciba)
+ var typed = new Typed("#subtitle", {
+ strings: sub,
+ startDelay: 300,
+ typeSpeed: 150,
+ loop: !{theme.subtitle.loop},
+ backSpeed: 50
+ });
+ }else{
+ document.getElementById("subtitle").innerHTML = data['ciba-en']
+ }
+ })
+ .catch(function (err) {
+ console.error(err);
+ })
+
+ else if source == '2'
+ script.
+ var subtitleEffect = !{subtitleEffect}
+ fetch('https://v1.hitokoto.cn')
+ .then(function (res){
+ return res.json();
+ })
+ .then(function (data) {
+ if (subtitleEffect){
+ var from = '出自 ' + data.from
+ var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(",");
+ var both = sub.unshift(data.hitokoto,from)
+ var typed = new Typed("#subtitle", {
+ strings: sub,
+ startDelay: 300,
+ typeSpeed: 150,
+ loop: !{theme.subtitle.loop},
+ backSpeed: 50
+ });
+ }else{
+ document.getElementById("subtitle").innerHTML = data.hitokoto
+ }
+ })
+ .catch(function (err) {
+ console.error(err);
+ })
+
+ else if source == "3"
+ script(type="text/javascript" src="http://yijuzhan.com/api/word.php?m=js")
+ script.
+ var subtitleEffect = !{subtitleEffect}
+ var con = str[0];
+ if (subtitleEffect){
+ var from = "出自 " + str[1];
+ var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(",");
+ var both = sub.unshift(con,from)
+ var typed = new Typed("#subtitle", {
+ strings: sub,
+ startDelay: 300,
+ typeSpeed: 150,
+ loop: !{theme.subtitle.loop},
+ backSpeed: 50
+ });
+ }else{
+ document.getElementById("subtitle").innerHTML = con
+ }
+
+ else if source == '4'
+ script(type="text/javascript" src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8")
+ script.
+ var subtitleEffect = !{subtitleEffect}
+ jinrishici.load(function(result) {
+ if (subtitleEffect){
+ var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(",");
+ var content = result.data.content;
+ var both = sub.unshift(content)
+ var typed = new Typed("#subtitle", {
+ strings: sub,
+ startDelay: 300,
+ typeSpeed: 150,
+ loop: !{theme.subtitle.loop},
+ backSpeed: 50
+ });
+ }else{
+ document.getElementById("subtitle").innerHTML = result.data.content
+ }
+ })
+
+ else
+ - var subtitle = theme.subtitle.sub[0]
+ script.
+ var subtitleEffect = !{subtitleEffect}
+ if (subtitleEffect){
+ var typed = new Typed("#subtitle", {
+ strings: '!{theme.subtitle.sub}'.split(","),
+ startDelay: 300,
+ typeSpeed: 150,
+ loop: !{theme.subtitle.loop},
+ backSpeed: 50
+ })
+ }else{
+ document.getElementById("subtitle").innerHTML = '!{subtitle}'
+ }
diff --git a/themes/butterfly/layout/includes/header/header.pug b/themes/butterfly/layout/includes/header/header.pug
new file mode 100644
index 00000000..e6a22cc1
--- /dev/null
+++ b/themes/butterfly/layout/includes/header/header.pug
@@ -0,0 +1,18 @@
+#page-header
+ span#blog_name.pull_left
+ a#site-name.blog_title(href=url_for('/')) #[=config.title]
+
+ span.pull_right.menus
+ if (theme.algolia_search.enable || theme.local_search && theme.local_search.enable)
+ #search_button
+ a.site-page.social-icon.search
+ i.fa.fa-search.fa-fw
+ span=' '+_p('search')
+ .menus_items
+ include ./menu_item.pug
+
+ span.toggle-menu.close
+ a.site-page
+ i.fa.fa-bars.fa-fw(aria-hidden="true")
+
+
diff --git a/themes/butterfly/layout/includes/header/index.pug b/themes/butterfly/layout/includes/header/index.pug
new file mode 100644
index 00000000..3198591f
--- /dev/null
+++ b/themes/butterfly/layout/includes/header/index.pug
@@ -0,0 +1,43 @@
+if is_home()
+ - var top_img = theme.index_img || theme.default_top_img
+else if is_post()
+ - var top_img = page.top_img || page.cover || page.randomcover || theme.default_top_img
+else if is_archive()
+ - var top_img = theme.archive_img || theme.default_top_img
+else if is_tag()
+ - var top_img = theme.tag_img || theme.default_top_img
+else if is_category()
+ - var top_img = theme.category_img || theme.default_top_img
+else
+ - var top_img = page.top_img || theme.default_top_img
+
+if theme.douban
+ if is_current('/movies/', [strict])
+ - var top_img = theme.douban.movies_img || theme.default_top_img
+ else if is_current('/books/', [strict])
+ - var top_img = theme.douban.books_img || theme.default_top_img
+ else if is_current('/games/', [strict])
+ - var top_img = theme.douban.games_img || theme.default_top_img
+
+- var bg_img = top_img && top_img !== true ? `background-image: url(${top_img})` : ''
+- var site_title = is_archive() ? _p('page.archives') : page.title || page.tag || page.category || config.title
+- var isHomeClass = is_home() ? 'full_page' : 'not-index-bg'
+- is_post() ? isHomeClass = 'post-bg' : isHomeClass
+
+#nav(class=isHomeClass style=bg_img)
+ !=partial('includes/header/header', {}, {cache:theme.fragment_cache})
+ if is_home()
+ #site-info
+ h1#site_title=site_title
+ #site_subtitle
+ span#subtitle
+ if(theme.social)
+ #site_social_icons
+ !=partial('includes/header/social', {}, {cache:theme.fragment_cache})
+ #scroll_down
+ i.fa.fa-angle-down.scroll-down-effects
+ else if is_post()
+ include ./post-info.pug
+ else
+ #page_site-info
+ h1#site_title=site_title
diff --git a/themes/butterfly/layout/includes/header/menu_item.pug b/themes/butterfly/layout/includes/header/menu_item.pug
new file mode 100644
index 00000000..cb7c7197
--- /dev/null
+++ b/themes/butterfly/layout/includes/header/menu_item.pug
@@ -0,0 +1,18 @@
+each value, label in theme.menu
+ if !Array.isArray(value)
+ .menus_item
+ a.site-page(href=url_for(trim(value.split('||')[0])))
+ i.fa-fw(class=trim(value.split('||')[1]))
+ span=' '+label
+ else
+ .menus_item
+ a.site-page
+ i.fa-fw(class=trim(label.split('||')[1]) aria-hidden="true")
+ span=' '+ trim(label.split('||')[0])
+ i.fa.fa-chevron-down.menus-expand(aria-hidden="true")
+ ul.menus_item_child
+ each i in value
+ li
+ a.site-page(href=url_for(trim(i.split('||')[1])))
+ i.fa-fw(class=trim(i.split('||')[2]))
+ span=' '+trim(i.split('||')[0])
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/header/post-info.pug b/themes/butterfly/layout/includes/header/post-info.pug
new file mode 100644
index 00000000..9f7a0112
--- /dev/null
+++ b/themes/butterfly/layout/includes/header/post-info.pug
@@ -0,0 +1,84 @@
+#post-info
+ #post-title
+ .posttitle= page.title || _p('no_title')
+
+ #post-meta
+ .meta-firstline
+ if (theme.post_meta.post.date_type)
+ if (theme.post_meta.post.date_type === 'both')
+ time.post-meta__date
+ span.post-meta__date-created(title= _p('post.created')+' '+full_date(page.date))
+ i.fa.fa-calendar(aria-hidden="true")
+ =' '+_p('post.created')+' '+date(page.date, config.date_format)
+ span.post-meta__separator |
+ span.post-meta__date-updated(title= _p('post.updated')+' '+full_date(page.updated))
+ i.fa.fa-history(aria-hidden="true")
+ =' '+_p('post.updated')+' '+date(page.updated, config.date_format)
+ else
+ - var data_type_update = theme.post_meta.post.date_type === 'updated'
+ - var date_type = data_type_update ? 'updated' : 'date'
+ - var date_icon = data_type_update ? 'fa-history' :'fa-calendar'
+ - var data_info = data_type_update ? _p('post.updated') : _p('post.created')
+ time.post-meta__date(title=data_info + ' ' + full_date(page[date_type]))
+ i.fa(class=date_icon aria-hidden="true")
+ =' ' + data_info + ' ' + date(page[date_type], config.date_format)
+
+ if (theme.post_meta.post.categories && page.categories.data.length > 0)
+ span.post-meta__categories
+ if (theme.post_meta.post.date_type)
+ span.post-meta__separator |
+
+ each item, index in page.categories.data
+ i.fa.fa-inbox.post-meta__icon(aria-hidden="true")
+ a(href=url_for(item.path)).post-meta__categories #[=item.name]
+ if (index < page.categories.data.length - 1)
+ i.fa.fa-angle-right.post-meta__separator(aria-hidden="true")
+
+ .meta-secondline
+ - let postWordcount = theme.wordcount.enable && (theme.wordcount.post_wordcount || theme.wordcount.min2read)
+ if (postWordcount)
+ span.post-meta-wordcount
+ if theme.wordcount.post_wordcount
+ - var wordCountIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-file-word' : 'fa fa-file-word-o'
+ i.post-meta__icon(class=wordCountIcon aria-hidden="true")
+ span= _p('post.wordcount') + ':'
+ span.word-count= wordcount(page.content)
+ if theme.wordcount.min2read
+ span.post-meta__separator |
+ if theme.wordcount.min2read
+ - var readCountIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-clock' : 'fa fa-clock-o'
+ i.post-meta__icon(class=readCountIcon aria-hidden="true")
+ span= _p('post.min2read', min2read(page.content, {cn: 350, en: 160}))
+
+ .meta-thirdline
+ span.post-meta-pv-cv
+ if (postWordcount && theme.busuanzi.page_pv)
+ span.post-meta__separator |
+ if theme.busuanzi.page_pv
+ i.fa.fa-eye.post-meta__icon(aria-hidden="true")
+ span=_p('post.page_pv') + ':'
+ span#busuanzi_value_page_pv
+
+ span.post-meta-commentcount
+ - var commentCount = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-comments' : 'fa fa-comment-o'
+ if ((theme.disqus && theme.disqus.enable && theme.disqus.count && page.comments !== false) || (theme.disqusjs && theme.disqusjs.enable && theme.disqusjs.count && page.comments !== false))
+ if (theme.busuanzi && theme.busuanzi.page_pv)
+ span.post-meta__separator |
+ i.post-meta__icon(class=commentCount aria-hidden="true")
+ span= _p('post.comments') + ':'
+ span.disqus-comment-count.comment-count
+ a(href=full_url_for(page.path) + '#disqus_thread')
+ else if (theme.valine && theme.valine.enable && theme.valine.count && page.comments !== false)
+ if (theme.busuanzi && theme.busuanzi.page_pv)
+ span.post-meta__separator |
+ i.post-meta__icon(class=commentCount aria-hidden="true")
+ span= _p('post.comments') + ':'
+ a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
+ span.valine-comment-count.comment-count(data-xid=url_for(page.path) itemprop="commentCount")
+ else if (theme.gitalk && theme.gitalk.enable && theme.gitalk.count && page.comments !== false)
+ if (theme.busuanzi && theme.busuanzi.page_pv)
+ span.post-meta__separator |
+ i.post-meta__icon(class=commentCount aria-hidden="true")
+ span= _p('post.comments') + ':'
+ a(href=url_for(page.path) + '#post-comment')
+ span.gitalk-comment-count.comment-count
diff --git a/themes/butterfly/layout/includes/header/social.pug b/themes/butterfly/layout/includes/header/social.pug
new file mode 100644
index 00000000..6c0a49e4
--- /dev/null
+++ b/themes/butterfly/layout/includes/header/social.pug
@@ -0,0 +1,4 @@
+each url, icon in theme.social
+ a.social-icon(href=trim(url.split('||')[0]) target="_blank"
+ title=url.split('||')[1] === undefined ? '' : trim(url.split('||')[1]))
+ i(class=icon aria-hidden="true")
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/layout.pug b/themes/butterfly/layout/includes/layout.pug
new file mode 100644
index 00000000..e86899c2
--- /dev/null
+++ b/themes/butterfly/layout/includes/layout.pug
@@ -0,0 +1,50 @@
+- var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
+
+doctype html
+html(lang=config.language data-theme=theme.display_mode)
+ head
+ include ./head.pug
+ body
+ if theme.fireworks && theme.fireworks.enable
+ canvas.fireworks
+
+ !=partial('includes/mobile-sidebar/index', {}, {cache:theme.fragment_cache})
+
+ include ./sidebar.pug
+
+ #body-wrap
+ if theme.background
+ - var is_photo = theme.background.substring(3,0) === 'url' ? 'photo':'color'
+ #web_bg(data-type=is_photo)
+ include ./header/index.pug
+
+ if (!is_post())
+ main#content-inner.layout_page(class=hideAside)
+ if body
+ div!= body
+ else
+ block content
+ include widget/index.pug
+ else
+ main#content-inner.layout_post
+ if body
+ div!= body
+ else
+ block content
+
+ - var footer_bg = theme.footer_bg == false ? '' : bg_img
+ - var is_bg = theme.footer_bg == false ? 'color' : 'photo'
+ footer#footer(style=footer_bg data-type=is_bg)
+ !=partial('includes/footer', {}, {cache:theme.fragment_cache})
+
+ include ./rightside.pug
+
+ !=partial('includes/search/index', {}, {cache:theme.fragment_cache})
+
+ each item in theme.CDN_USE.js
+ script(src=url_for(item))
+
+ include ./additional-js.pug
+
+
+
diff --git a/themes/butterfly/layout/includes/math/index.pug b/themes/butterfly/layout/includes/math/index.pug
new file mode 100644
index 00000000..68b34164
--- /dev/null
+++ b/themes/butterfly/layout/includes/math/index.pug
@@ -0,0 +1,15 @@
+if theme.mathjax && theme.mathjax.enable
+ if theme.mathjax.per_page
+ if(!is_tag() && !is_category() && !is_archive() && !is_home())
+ include ./mathjax.pug
+ else
+ if page.mathjax
+ include ./mathjax.pug
+
+if theme.katex && theme.katex.enable
+ if theme.katex.per_page
+ if(!is_tag() && !is_category() && !is_archive() && !is_home())
+ include ./katex.pug
+ else
+ if page.katex
+ include ./katex.pug
diff --git a/themes/butterfly/layout/includes/math/katex.pug b/themes/butterfly/layout/includes/math/katex.pug
new file mode 100644
index 00000000..6690428e
--- /dev/null
+++ b/themes/butterfly/layout/includes/math/katex.pug
@@ -0,0 +1,7 @@
+link(rel="stylesheet" type="text/css" href=theme.CDN.katex)
+script(src=url_for(theme.CDN.katex_copytex))
+link(rel="stylesheet" type="text/css" href=theme.CDN.katex_copytex_css)
+script.
+ $(function () {
+ $('span.katex-display').wrap('')
+ })
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/math/mathjax.pug b/themes/butterfly/layout/includes/math/mathjax.pug
new file mode 100644
index 00000000..a28d1c0b
--- /dev/null
+++ b/themes/butterfly/layout/includes/math/mathjax.pug
@@ -0,0 +1,27 @@
+script(type="text/x-mathjax-config").
+ MathJax.Hub.Config({
+ tex2jax: {
+ inlineMath: [ ['$','$'], ["\\(","\\)"] ],
+ processEscapes: true,
+ skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
+ },
+ CommonHTML: {
+ linebreaks: { automatic: true, width: "90% container" }
+ },
+ "HTML-CSS": {
+ linebreaks: { automatic: true, width: "90% container" }
+ },
+ "SVG": {
+ linebreaks: { automatic: true, width: "90% container" }
+ }
+ });
+
+script(type="text/x-mathjax-config").
+ MathJax.Hub.Queue(function() {
+ var all = MathJax.Hub.getAllJax(), i;
+ for (i=0; i < all.length; i += 1) {
+ all[i].SourceElement().parentNode.className += ' has-jax';
+ }
+ });
+
+script(src=theme.CDN.mathjax)
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/math/mermaid.pug b/themes/butterfly/layout/includes/math/mermaid.pug
new file mode 100644
index 00000000..7984358f
--- /dev/null
+++ b/themes/butterfly/layout/includes/math/mermaid.pug
@@ -0,0 +1,8 @@
+script.
+ if (document.getElementsByClassName('mermaid').length) {
+ loadScript('!{theme.CDN.mermaid}',function () {
+ mermaid.initialize({
+ theme: '!{theme.mermaid.theme}',
+ })
+ })
+ }
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/mixins/UI.pug b/themes/butterfly/layout/includes/mixins/UI.pug
new file mode 100644
index 00000000..5cedd81c
--- /dev/null
+++ b/themes/butterfly/layout/includes/mixins/UI.pug
@@ -0,0 +1,65 @@
+mixin UI_NEW(posts)
+ - posts.each(function(article,index){
+ .recent-post-item
+ - var link = article.link || article.path
+ - var post_cover = article.cover
+ - var title = article.title || _p('no_title')
+ - var leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius'
+ - var no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
+ if post_cover && theme.cover.index_enable
+ .post_cover(class=leftOrRight)
+ a(href=url_for(link) title=title)
+ if theme.lazyload.enable
+ img.post_bg.lazyload(data-src=`${post_cover}` alt=title onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'`)
+ else
+ img.post_bg(src=`${post_cover}` alt=title onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'`)
+ .recent-post-info(class=no_cover)
+ a.article-title(href=url_for(link) title=title)= title
+ .article-meta-wrap
+ if (theme.post_meta.page.date_type)
+ if (theme.post_meta.page.date_type === 'both')
+ time.post-meta__date
+ span.post-meta__date-created(title=_p('post.created') + ' ' + full_date(article.date))
+ i.fa.fa-calendar(aria-hidden="true")
+ =date(article.date, config.date_format)
+ span.article-meta__separator |
+ span.post-meta__date-updated(title=_p('post.updated') + ' ' + full_date(article.updated))
+ i.fa.fa-history(aria-hidden="true")
+ =date(article.updated, config.date_format)
+ else
+ - var data_type_updated = theme.post_meta.page.date_type === 'updated'
+ - var date_type = data_type_updated ? 'updated' : 'date'
+ - var date_icon = data_type_updated ? 'fa-history' :'fa-calendar'
+ - var date_title = data_type_updated ? _p('post.updated') : _p('post.created')
+ time.post-meta__date(title=date_title + ' ' + full_date(article[date_type]))
+ i.fa(class=date_icon aria-hidden="true")
+ =date(article[date_type], config.date_format)
+ if (theme.post_meta.page.categories && article.categories.data.length > 0)
+ span.article-meta
+ span.article-meta__separator |
+ each item, index in article.categories.data
+ i.fa.fa-inbox.article-meta__icon(aria-hidden="true")
+ a(href=url_for(item.path)).article-meta__categories #[=item.name]
+ if (index < article.categories.data.length - 1)
+ i.fa.fa-angle-right(aria-hidden="true")
+ if (theme.post_meta.page.tags && article.tags.data.length > 0)
+ span.article-meta.tags
+ span.article-meta__separator |
+ each item, index in article.tags.data
+ i.fa.fa-tag.article-meta__icon(aria-hidden="true")
+ a(href=url_for(item.path)).article-meta__tags #[=item.name]
+ if (index < article.tags.data.length - 1)
+ span.article-meta__link -
+ if theme.auto_excerpt && theme.auto_excerpt.enable
+ - const content = strip_html(article.content)
+ - let expert = content.substring(0, theme.auto_excerpt.length)
+ - content.length > theme.auto_excerpt.length ? expert += ' ...' : ''
+ .content!= expert
+ else
+ .content!= article.description
+
+ if theme.ad && theme.ad.index
+ if (index + 1) % 3 == 0
+ .recent-post-item.ad_height!=theme.ad.index
+
+ - })
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/mixins/article-sort.pug b/themes/butterfly/layout/includes/mixins/article-sort.pug
new file mode 100644
index 00000000..25bf57a4
--- /dev/null
+++ b/themes/butterfly/layout/includes/mixins/article-sort.pug
@@ -0,0 +1,20 @@
+mixin articleSort(posts)
+ .article-sort
+ - var year
+ - posts.each(function (article) {
+ - var tempYear = date(article.date, 'YYYY')
+ - var no_cover = article.cover === false || !theme.cover.archives_enable ? 'no-article-cover' : ''
+ if tempYear !== year
+ - year = tempYear
+ .article-sort-item.year= year
+ .article-sort-item(class=no_cover)
+ if article.cover && theme.cover.archives_enable
+ .article-sort-img
+ a.article-sort-item__img(href=url_for(article.path))
+ img(src=article.cover alt=article.title || 'No Title' onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'`)
+ .article-sort-post
+ a.article-sort-item__post(href=url_for(article.path))
+ i.fa.fa-clock-o(aria-hidden="true")
+ time.article-sort-item__time(title=_p('post.created') + ' ' + full_date(article.date))= date(article.date, config.date_format)
+ .article-sort-item__title= article.title || 'No Title'
+ - })
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/mobile-sidebar/index.pug b/themes/butterfly/layout/includes/mobile-sidebar/index.pug
new file mode 100644
index 00000000..511a77cb
--- /dev/null
+++ b/themes/butterfly/layout/includes/mobile-sidebar/index.pug
@@ -0,0 +1,3 @@
+#mobile-sidebar
+ #menu_mask
+ include ../mobile-sidebar/mobile-menus.pug
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/mobile-sidebar/mobile-menus.pug b/themes/butterfly/layout/includes/mobile-sidebar/mobile-menus.pug
new file mode 100644
index 00000000..55580ec4
--- /dev/null
+++ b/themes/butterfly/layout/includes/mobile-sidebar/mobile-menus.pug
@@ -0,0 +1,27 @@
+#mobile-sidebar-menus
+ .mobile_author_icon
+ img.avatar-img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.lodding_bg.flink}'` alt="avatar")
+ .mobile_post_data
+ if site.posts.length
+ .mobile_data_item.is-center
+ .mobile_data_link
+ a(href=url_for(config.archive_dir) + '/')
+ .headline= _p('aside.articles')
+ .length_num= site.posts.length
+
+ if site.tags.length
+ .mobile_data_item.is-center
+ .mobile_data_link
+ a(href=url_for(config.tag_dir) + '/' )
+ .headline= _p('aside.tags')
+ .length_num= site.tags.length
+
+ if site.categories.length
+ .mobile_data_item.is-center
+ .mobile_data_link
+ a(href=url_for(config.category_dir) + '/')
+ .headline= _p('aside.categories')
+ .length_num= site.categories.length
+ hr
+ .menus_items
+ include ../header/menu_item.pug
diff --git a/themes/butterfly/layout/includes/pagination.pug b/themes/butterfly/layout/includes/pagination.pug
new file mode 100644
index 00000000..33bf9ae2
--- /dev/null
+++ b/themes/butterfly/layout/includes/pagination.pug
@@ -0,0 +1,39 @@
+-
+ var options = {
+ prev_text: '',
+ next_text: '',
+ mid_size: 1,
+ escape: false
+ }
+
+if(!is_post())
+ nav#pagination
+ div.pagination
+ !=paginator(options)
+else
+ nav#pagination.pagination_post
+ if(page.prev)
+ - var hasPageNext = page.prev ? 'pull_left' : 'pull-full'
+ .prev-post(class=hasPageNext)
+ - var pagination_cover = page.prev.cover === false ? page.prev.randomcover : page.prev.cover
+ a(href=url_for(page.prev.path))
+ if theme.lazyload.enable
+ img.prev_cover.lazyload(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` )
+ else
+ img.prev_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` )
+ .pagination-info
+ .label=_p('pagination.prev')
+ .prev_info=page.prev.title
+
+ if(page.next)
+ - var hasPagePrev = page.prev ? 'pull_right' : 'pull-full'
+ - var pagination_cover = page.next.cover == false ? page.next.randomcover : page.next.cover
+ .next-post(class=hasPagePrev)
+ a(href=url_for(page.next.path))
+ if theme.lazyload.enable
+ img.next_cover.lazyload(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+ else
+ img.next_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+ .pagination-info
+ .label=_p('pagination.next')
+ .next_info=page.next.title
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/post/post-copyright.pug b/themes/butterfly/layout/includes/post/post-copyright.pug
new file mode 100644
index 00000000..ee8c6596
--- /dev/null
+++ b/themes/butterfly/layout/includes/post/post-copyright.pug
@@ -0,0 +1,13 @@
+if (theme.post_copyright && theme.post_copyright.enable && page.copyright != false)
+ .post-copyright
+ .post-copyright__author
+ span.post-copyright-meta= _p('post.copyright.author') + ": "
+ span.post-copyright-info
+ a(href=`mailto:${config.email}`) #[=config.author]
+ .post-copyright__type
+ span.post-copyright-meta= _p('post.copyright.link') + ": "
+ span.post-copyright-info
+ a(href=url_for(page.permalink))= theme.post_copyright.decode ? decodeURI(page.permalink) : page.permalink
+ .post-copyright__notice
+ span.post-copyright-meta= _p('post.copyright.copyright_notice') + ": "
+ span.post-copyright-info!= _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)
diff --git a/themes/butterfly/layout/includes/post/reward.pug b/themes/butterfly/layout/includes/post/reward.pug
new file mode 100644
index 00000000..8aefea4a
--- /dev/null
+++ b/themes/butterfly/layout/includes/post/reward.pug
@@ -0,0 +1,11 @@
+.post-reward
+ a.reward-button.button--primary.button--animated
+ i.fa.fa-qrcode
+ = ' ' + _p('donate')
+ .reward-main
+ ul.reward-all
+ each item in theme.reward.QR_code
+ li.reward-item
+ img.lazyload.post-qr-code__img(src=url_for((item.itemlist||item).img) alt=(item.itemlist||item).text)
+ .post-qr-code__desc=(item.itemlist||item).text
+
diff --git a/themes/butterfly/layout/includes/recent-posts.pug b/themes/butterfly/layout/includes/recent-posts.pug
new file mode 100644
index 00000000..46fb9dec
--- /dev/null
+++ b/themes/butterfly/layout/includes/recent-posts.pug
@@ -0,0 +1,67 @@
+each article , index in page.posts.data
+ .recent-post-item
+ - var link = article.link || article.path
+ - var title = article.title || _p('no_title')
+ - var leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius'
+ - var post_cover = article.cover
+ - var no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
+ if post_cover && theme.cover.index_enable
+ .post_cover(class=leftOrRight)
+ a(href=url_for(link) title=title)
+ if theme.lazyload.enable
+ img.post_bg.lazyload(data-src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
+ else
+ img.post_bg(src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
+ .recent-post-info(class=no_cover)
+ a.article-title(href=url_for(link) title=title)= title
+ .article-meta-wrap
+ if (article.top)
+ span.article-meta
+ i.fa.fa-thumb-tack.article-meta__icon.sticky
+ span.sticky= _p('sticky')
+ span.article-meta__separator |
+ if (theme.post_meta.page.date_type)
+ if (theme.post_meta.page.date_type === 'both')
+ time.post-meta__date
+ span.post-meta__date-created(title=_p('post.created') + ' ' + full_date(article.date))
+ i.fa.fa-calendar(aria-hidden="true")
+ =date(article.date, config.date_format)
+ span.article-meta__separator |
+ span.post-meta__date-updated(title=_p('post.updated') + ' ' + full_date(article.updated))
+ i.fa.fa-history(aria-hidden="true")
+ =date(article.updated, config.date_format)
+ else
+ - var data_type_updated = theme.post_meta.page.date_type === 'updated'
+ - var date_type = data_type_updated ? 'updated' : 'date'
+ - var date_icon = data_type_updated ? 'fa-history' :'fa-calendar'
+ - var date_title = data_type_updated ? _p('post.updated') : _p('post.created')
+ time.post-meta__date(title=date_title + ' ' + full_date(article[date_type]))
+ i.fa(class=date_icon aria-hidden="true")
+ =date(article[date_type], config.date_format)
+ if (theme.post_meta.page.categories && article.categories.data.length > 0)
+ span.article-meta
+ span.article-meta__separator |
+ each item, index in article.categories.data
+ i.fa.fa-inbox.article-meta__icon(aria-hidden="true")
+ a(href=url_for(item.path)).article-meta__categories #[=item.name]
+ if (index < article.categories.data.length - 1)
+ i.fa.fa-angle-right(aria-hidden="true")
+ if (theme.post_meta.page.tags && article.tags.data.length > 0)
+ span.article-meta.tags
+ span.article-meta__separator |
+ each item, index in article.tags.data
+ i.fa.fa-tag.article-meta__icon(aria-hidden="true")
+ a(href=url_for(item.path)).article-meta__tags #[=item.name]
+ if (index < article.tags.data.length - 1)
+ span.article-meta__link -
+ if theme.auto_excerpt && theme.auto_excerpt.enable
+ - const content = strip_html(article.content)
+ - let expert = content.substring(0, theme.auto_excerpt.length)
+ - content.length > theme.auto_excerpt.length ? expert += ' ...' : ''
+ .content!= expert
+ else
+ .content!= article.description
+
+ if theme.ad && theme.ad.index
+ if (index + 1) % 3 == 0
+ .recent-post-item.ad_height!=theme.ad.index
diff --git a/themes/butterfly/layout/includes/rightside.pug b/themes/butterfly/layout/includes/rightside.pug
new file mode 100644
index 00000000..88b1ad8d
--- /dev/null
+++ b/themes/butterfly/layout/includes/rightside.pug
@@ -0,0 +1,23 @@
+section#rightside.rightside
+ #rightside-config-hide
+ if theme.readmode.enable && is_post()
+ i#readmode.fa.fa-book(title=_p('rightside.readmode_title'))
+ if is_post()
+ i#font_plus.fa.fa-plus(title=_p('rightside.font_plus_title'))
+ i#font_minus.fa.fa-minus(title=_p('rightside.font_minus_title'))
+ if theme.translate && theme.translate.enable
+ a#translateLink.translate_chn_to_cht(href="javascript:translatePage();" title=_p('rightside.translate_title') target="_self")= theme.translate.default
+ if theme.darkmode.enable && theme.darkmode.button
+ - var lightModeIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-sun' : 'fa fa-sun-o'
+ - var darkModeIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-moon' : 'fa fa-moon-o'
+ - var display_mode = theme.display_mode == 'dark' ? lightModeIcon : darkModeIcon
+ i#darkmode.darkmode(class=display_mode title=_p('rightside.night_mode_title'))
+ #rightside-config-show
+ #rightside_config(title=_p("rightside.setting"))
+ i.fa.fa-cog(aria-hidden="true")
+ if is_post() && page.comments !== false && isComment
+ a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
+ i.scroll_to_comment.fa.fa-comments
+ if is_post() && page.toc !== false && theme.toc.enable && (toc(page.content) !== '' || page.encrypt == true )
+ i#mobile-toc-button.fa.fa-list-ul.close(title=_p("rightside.toc") aria-hidden="true")
+ i.fa.fa-arrow-up#go-up(title=_p("rightside.back_to_top") aria-hidden="true")
diff --git a/themes/butterfly/layout/includes/search/algolia.pug b/themes/butterfly/layout/includes/search/algolia.pug
new file mode 100644
index 00000000..bf4e465b
--- /dev/null
+++ b/themes/butterfly/layout/includes/search/algolia.pug
@@ -0,0 +1,12 @@
+#algolia-search.search-dialog
+ #algolia-search-title.search-dialog__title Algolia
+ #algolia-input-panel
+ #algolia-search-input
+ hr
+ #algolia-search-results
+ #algolia-hits
+ #algolia-pagination
+ #algolia-stats
+ span.search-close-button
+ i.fa.fa-times
+.search-mask
diff --git a/themes/butterfly/layout/includes/search/index.pug b/themes/butterfly/layout/includes/search/index.pug
new file mode 100644
index 00000000..19dd228e
--- /dev/null
+++ b/themes/butterfly/layout/includes/search/index.pug
@@ -0,0 +1,5 @@
+if (theme.algolia_search.enable)
+ include ./algolia.pug
+if (theme.local_search)
+ if (!theme.algolia_search.enable && theme.local_search.enable)
+ include ./local-search.pug
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/search/local-search.pug b/themes/butterfly/layout/includes/search/local-search.pug
new file mode 100644
index 00000000..1262d550
--- /dev/null
+++ b/themes/butterfly/layout/includes/search/local-search.pug
@@ -0,0 +1,23 @@
+#local-search.search-dialog
+ #local-search-title.search-dialog__title=_p("local_search.label")
+ #local-input-panel
+ #local-search-input
+ .local-search-box
+ input(placeholder=_p("local_search.input_placeholder") type="text").local-search-box--input
+ hr
+ #local-search-results
+ #local-hits
+ #local-stats
+ #hr.local-search-stats__hr
+ case config.language
+ when "zh-CN"
+ span=_p("local_search.by")
+ | #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search]
+ | #[span=_p("local_search.powered")]
+ when "en"
+ default
+ span=_p("local_search.powered_by")
+ | #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search]
+ span.search-close-button
+ i.fa.fa-times
+.search-mask
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/share/add-this.pug b/themes/butterfly/layout/includes/share/add-this.pug
new file mode 100644
index 00000000..ab44267d
--- /dev/null
+++ b/themes/butterfly/layout/includes/share/add-this.pug
@@ -0,0 +1,2 @@
+.addthis_inline_share_toolbox
+script(src=`//s7.addthis.com/js/300/addthis_widget.js#pubid=${theme.addThis.pubid}` async)
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/share/addtoany.pug b/themes/butterfly/layout/includes/share/addtoany.pug
new file mode 100644
index 00000000..f6063ded
--- /dev/null
+++ b/themes/butterfly/layout/includes/share/addtoany.pug
@@ -0,0 +1,9 @@
+.addtoany
+ .a2a_kit.a2a_kit_size_32.a2a_default_style
+ each name in theme.addtoany.item
+ a(class="a2a_button_" + name)
+
+ a.a2a_dd(href="https://www.addtoany.com/share")
+script(async src=url_for(theme.CDN.addtoany))
+
+
diff --git a/themes/butterfly/layout/includes/share/index.pug b/themes/butterfly/layout/includes/share/index.pug
new file mode 100644
index 00000000..7b297963
--- /dev/null
+++ b/themes/butterfly/layout/includes/share/index.pug
@@ -0,0 +1,7 @@
+.post_share
+ if theme.addThis.enable
+ include ./add-this.pug
+ else if theme.sharejs && theme.sharejs.enable
+ include ./share-js.pug
+ else if theme.addtoany.enable
+ include ./addtoany.pug
diff --git a/themes/butterfly/layout/includes/share/share-js.pug b/themes/butterfly/layout/includes/share/share-js.pug
new file mode 100644
index 00000000..ec12a880
--- /dev/null
+++ b/themes/butterfly/layout/includes/share/share-js.pug
@@ -0,0 +1,4 @@
+if (theme.sharejs && theme.sharejs.enable)
+ .social-share(data-image= page.cover|| theme.avatar.img data-sites= theme.sharejs.sites)
+ link(rel="stylesheet" href=url_for(theme.CDN.sharejs_css))
+ script(src=url_for(theme.CDN.sharejs))
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/sidebar.pug b/themes/butterfly/layout/includes/sidebar.pug
new file mode 100644
index 00000000..435c73a6
--- /dev/null
+++ b/themes/butterfly/layout/includes/sidebar.pug
@@ -0,0 +1,25 @@
+- let showToc = is_post() && page.toc !== false && theme.toc.enable && (toc(page.content) !== '' || page.encrypt == true )
+- let autoOpenSidebar = theme.auto_open_sidebar.enable === true ? 'on' : ''
+
+-
+ let tocNumber
+ if (page.toc_number !== undefined) tocNumber = page.toc_number
+ else if (theme.toc.number !== undefined) tocNumber = theme.toc.number
+ else tocNumber = true
+-
+
+if(showToc)
+ i.fa.fa-arrow-right#toggle-sidebar(aria-hidden="true" class=autoOpenSidebar)
+ #sidebar
+ .sidebar-toc
+ div.sidebar-toc__title= _p('sidebar.catalog')
+ div.sidebar-toc__progress
+ span.progress-notice= _p('sidebar.have_read')
+ span.progress-num 0
+ span.progress-percentage %
+ div.sidebar-toc__progress-bar
+ if (page.encrypt == true)
+ div.sidebar-toc__content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber})
+ else
+ div.sidebar-toc__content!=toc(page.content, {list_number: tocNumber})
+
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/third-party/canvas-nest.pug b/themes/butterfly/layout/includes/third-party/canvas-nest.pug
new file mode 100644
index 00000000..bb790be5
--- /dev/null
+++ b/themes/butterfly/layout/includes/third-party/canvas-nest.pug
@@ -0,0 +1 @@
+script#canvas_nest(color=theme.canvas_nest.color opacity=theme.canvas_nest.opacity zIndex=theme.canvas_nest.zIndex count=theme.canvas_nest.count mobile=`${theme.canvas_nest.mobile}` src=url_for(theme.CDN.canvas_nest))
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/third-party/canvas-ribbon-piao.pug b/themes/butterfly/layout/includes/third-party/canvas-ribbon-piao.pug
new file mode 100644
index 00000000..505af833
--- /dev/null
+++ b/themes/butterfly/layout/includes/third-party/canvas-ribbon-piao.pug
@@ -0,0 +1 @@
+script(id="ribbon_piao" mobile=`${theme.canvas_ribbon_piao.mobile}` src=url_for(theme.CDN.canvas_ribbon_piao))
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/third-party/canvas-ribbon.pug b/themes/butterfly/layout/includes/third-party/canvas-ribbon.pug
new file mode 100644
index 00000000..9fc03fcd
--- /dev/null
+++ b/themes/butterfly/layout/includes/third-party/canvas-ribbon.pug
@@ -0,0 +1,3 @@
+script(defer id="ribbon" src=url_for(theme.CDN.canvas_ribbon) size=theme.canvas_ribbon.size
+alpha=theme.canvas_ribbon.alpha zIndex=theme.canvas_ribbon.zIndex mobile=`${theme.canvas_ribbon.mobile}` data-click=`${theme.canvas_ribbon.click_to_change}`)
+
diff --git a/themes/butterfly/layout/includes/third-party/pangu.pug b/themes/butterfly/layout/includes/third-party/pangu.pug
new file mode 100644
index 00000000..a3ff3181
--- /dev/null
+++ b/themes/butterfly/layout/includes/third-party/pangu.pug
@@ -0,0 +1,13 @@
+script(src=url_for(theme.CDN.pangu))
+if theme.pangu.field === 'post'
+ if is_post()
+ script.
+ document.addEventListener('DOMContentLoaded', function() {
+ pangu.spacingElementById('content-inner')
+ })
+else if theme.pangu.field === 'page'
+ script.
+ document.addEventListener('DOMContentLoaded', function() {
+ pangu.spacingElementById('content-inner')
+ })
+
diff --git a/themes/butterfly/layout/includes/widget/card_ad.pug b/themes/butterfly/layout/includes/widget/card_ad.pug
new file mode 100644
index 00000000..c05f7742
--- /dev/null
+++ b/themes/butterfly/layout/includes/widget/card_ad.pug
@@ -0,0 +1,2 @@
+.card-widget.card-ad
+ != theme.ad.aside
diff --git a/themes/butterfly/layout/includes/widget/card_announcement.pug b/themes/butterfly/layout/includes/widget/card_announcement.pug
new file mode 100644
index 00000000..4194cf40
--- /dev/null
+++ b/themes/butterfly/layout/includes/widget/card_announcement.pug
@@ -0,0 +1,6 @@
+.card-widget.card-announcement
+ .card-content
+ .item-headline
+ i.fa.fa-bullhorn.card-announcement-animation(aria-hidden="true")
+ span= _p('aside.card_announcement')
+ .announcement_content!= theme.announcement.content
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/widget/card_archives.pug b/themes/butterfly/layout/includes/widget/card_archives.pug
new file mode 100644
index 00000000..20f79d67
--- /dev/null
+++ b/themes/butterfly/layout/includes/widget/card_archives.pug
@@ -0,0 +1,6 @@
+.card-widget.card-archives
+ .card-content
+ .item-headline
+ i.fa.fa-archive(aria-hidden="true")
+ span= _p('aside.card_archives')
+ != list_archives({type:'monthly',format: 'YYYY年MM月'})
diff --git a/themes/butterfly/layout/includes/widget/card_author.pug b/themes/butterfly/layout/includes/widget/card_author.pug
new file mode 100644
index 00000000..c1381532
--- /dev/null
+++ b/themes/butterfly/layout/includes/widget/card_author.pug
@@ -0,0 +1,34 @@
+.card-widget.card-info
+ .card-content
+ .card-info-avatar.is-center
+ img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt="avatar")
+ .author-info__name= config.author
+ .author-info__description= config.description
+
+ .card-info-data
+ if site.posts.length
+ .card-info-data-item.is-center
+ a(href=url_for(config.archive_dir))
+ .headline= _p('aside.articles')
+ .length_num= site.posts.length
+
+ if site.tags.length
+ .card-info-data-item.is-center
+ a(href=url_for(config.tag_dir))
+ .headline= _p('aside.tags')
+ .length_num= site.tags.length
+
+ if site.categories.length
+ .card-info-data-item.is-center
+ a(href=url_for(config.category_dir))
+ .headline= _p('aside.categories')
+ .length_num= site.categories.length
+
+ .card-info-bookmark.is-center
+ a#bookmark-it.bookmark.button--primary.button--animated(href="javascript:;" title= _p('aside.card_bookmark') target="_self")
+ i.fa.fa-bookmark(aria-hidden="true")
+ span= _p('aside.card_bookmark') || 'Follow Me'
+
+ if(theme.social)
+ .card-info-social-icons.is-center
+ include ../header/social.pug
diff --git a/themes/butterfly/layout/includes/widget/card_categories.pug b/themes/butterfly/layout/includes/widget/card_categories.pug
new file mode 100644
index 00000000..94708210
--- /dev/null
+++ b/themes/butterfly/layout/includes/widget/card_categories.pug
@@ -0,0 +1,23 @@
+if site.categories.length
+ .card-widget.card-categories
+ .card-content
+ .item-headline
+ i.fa.fa-folder-open(aria-hidden="true")
+ span= _p('aside.card_categories')
+ ul.aside-category-item
+ mixin displayCategories(parent = undefined)
+ - site.categories.find({ parent }).sort("name").each(function(category) {
+ - var childCount = site.categories.find({ parent: category._id }).count();
+ li.aside-category-list
+ a.aside-category-list_link(href=url_for(category.path))
+ span.aside-category-list_name= category.name
+ span.aside-category-list_length= category.length
+
+ if childCount > 0
+ ul.aside-category-item.child
+ +displayCategories(category._id)
+ - })
+
+ +displayCategories()
+
+
diff --git a/themes/butterfly/layout/includes/widget/card_recent_post.pug b/themes/butterfly/layout/includes/widget/card_recent_post.pug
new file mode 100644
index 00000000..34088877
--- /dev/null
+++ b/themes/butterfly/layout/includes/widget/card_recent_post.pug
@@ -0,0 +1,25 @@
+.card-widget.card-recent-post
+ .card-content
+ .item-headline
+ i.fa.fa-history(aria-hidden="true")
+ span= _p('aside.card_recent_post')
+ .aside-recent-item
+ - site.posts.sort('date', -1).limit(5).each(function(article){
+ .aside-recent-post
+ - var link = article.link || article.path
+ - var title = article.title || _p('no_title')
+ - var no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-aside-cover' : ''
+ - var post_cover = article.cover
+
+ a(href=url_for(link))
+ if post_cover && theme.cover.aside_enable
+ .aside-post-cover
+ if theme.lazyload.enable
+ img.aside-post-bg.lazyload(data-src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` title=title alt=title)
+ else
+ img.aside-post-bg(src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` title=title alt=title)
+ .aside-post-title(class=no_cover)
+ .aside-post_title(href=url_for(link) title=article.title || _p('no_title'))= article.title || _p('no_title')
+ time.aside-post_meta.post-meta__date(title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)]
+
+ - })
diff --git a/themes/butterfly/layout/includes/widget/card_tags.pug b/themes/butterfly/layout/includes/widget/card_tags.pug
new file mode 100644
index 00000000..cd4806ae
--- /dev/null
+++ b/themes/butterfly/layout/includes/widget/card_tags.pug
@@ -0,0 +1,7 @@
+if site.tags.length
+ .card-widget.card-tags
+ .card-content
+ .item-headline
+ i.fa.fa-tags(aria-hidden="true")
+ span= _p('aside.card_tags')
+ .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: 200, color: true, start_color: '#999', end_color: '#99a9bf'})
diff --git a/themes/butterfly/layout/includes/widget/card_webinfo.pug b/themes/butterfly/layout/includes/widget/card_webinfo.pug
new file mode 100644
index 00000000..5e0f8526
--- /dev/null
+++ b/themes/butterfly/layout/includes/widget/card_webinfo.pug
@@ -0,0 +1,27 @@
+- var webinfoIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'fas fa-chart-line' : 'fa fa-line-chart'
+.card-widget.card-webinfo
+ .card-content
+ .item-headline
+ i(class=webinfoIcon aria-hidden="true")
+ span= _p('aside.card_webinfo.headline')
+ .webinfo
+ .webinfo-item
+ .webinfo-article-name= _p('aside.card_webinfo.article_name') + " :"
+ .webinfo-article-count= site.posts.length
+ if theme.runtimeshow.enable
+ .webinfo-item
+ .webinfo-runtime-name= _p('aside.card_webinfo.runtime_name') + " :"
+ #webinfo-runtime-count.webinfo-runtime-count(start_date=theme.runtimeshow.start_date)
+ if theme.wordcount.enable && theme.wordcount.total_wordcount
+ .webinfo-item
+ .webinfo-site-wordcount-name=_p('aside.card_webinfo.site_wordcount') + " :"
+ .webinfo-site-wordcount=totalcount(site)
+ if theme.busuanzi.site_uv
+ .webinfo-item
+ .webinfo-site-uv-name= _p('aside.card_webinfo.site_uv_name') + " :"
+ .webinfo-site-uv-count#busuanzi_value_site_uv
+ if theme.busuanzi.site_pv
+ .webinfo-item
+ .webinfo-site-name= _p('aside.card_webinfo.site_pv_name') + " :"
+ .webinfo-site-pv-count#busuanzi_value_site_pv
+
diff --git a/themes/butterfly/layout/includes/widget/index.pug b/themes/butterfly/layout/includes/widget/index.pug
new file mode 100644
index 00000000..dc789d41
--- /dev/null
+++ b/themes/butterfly/layout/includes/widget/index.pug
@@ -0,0 +1,19 @@
+if theme.aside.enable
+ if page.aside !== false
+ #aside_content.aside_content
+ if theme.aside.card_author
+ !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
+ if theme.aside.card_announcement
+ !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
+ if theme.aside.card_recent_post
+ !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
+ if theme.ad && theme.ad.aside
+ !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
+ if theme.aside.card_categories
+ !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache})
+ if theme.aside.card_tags
+ !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
+ if theme.aside.card_archives
+ !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
+ if theme.aside.card_webinfo
+ !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})
\ No newline at end of file
diff --git a/themes/butterfly/layout/index.pug b/themes/butterfly/layout/index.pug
new file mode 100644
index 00000000..36f68603
--- /dev/null
+++ b/themes/butterfly/layout/index.pug
@@ -0,0 +1,6 @@
+extends includes/layout.pug
+
+block content
+ #recent-posts.recent-posts
+ include includes/recent-posts.pug
+ include includes/pagination.pug
\ No newline at end of file
diff --git a/themes/butterfly/layout/page-tags.pug b/themes/butterfly/layout/page-tags.pug
new file mode 100644
index 00000000..47c569b6
--- /dev/null
+++ b/themes/butterfly/layout/page-tags.pug
@@ -0,0 +1,14 @@
+.tag-cloud
+ .tag-cloud__title= _p('page.tag')
+ | -
+ span.tag-cloud__amount= site.tags.length
+ .tag-cloud-tags
+ - site.tags.sort('path').each(function (tags){
+ - var fontSize = Math.floor(Math.random() * 15 + 15) + "px"; //15 ~ 30
+ - var color = "rgb(" + Math.floor(Math.random() * 201) + ", " + Math.floor(Math.random() * 201) +", " + Math.floor(Math.random() * 201) +")"; // 0,0,0 -> 200,200,200
+ a(href=url_for(tags.path) style='font-size:' + fontSize + ';color:' + color)=tags.name
+ -})
+ if page.comments !== false
+ include includes/comments/index.pug
+
+
diff --git a/themes/butterfly/layout/page.pug b/themes/butterfly/layout/page.pug
new file mode 100644
index 00000000..19411b18
--- /dev/null
+++ b/themes/butterfly/layout/page.pug
@@ -0,0 +1,21 @@
+extends includes/layout.pug
+
+block content
+ if page.type === 'tags'
+ include page-tags.pug
+ else if page.type === 'link'
+ include flink.pug
+ else if page.type === 'categories'
+ .category-content
+ .category-lists
+ .category__title= _p('page.category')
+ | -
+ span.category__amount= site.categories.length
+ div!= list_categories()
+ if page.comments !== false
+ include includes/comments/index.pug
+ else
+ #page
+ #article-container!= page.content
+ if page.comments !== false
+ include includes/comments/index.pug
\ No newline at end of file
diff --git a/themes/butterfly/layout/post.pug b/themes/butterfly/layout/post.pug
new file mode 100644
index 00000000..0411099b
--- /dev/null
+++ b/themes/butterfly/layout/post.pug
@@ -0,0 +1,25 @@
+extends includes/layout.pug
+
+block content
+ article#post(class="")
+ #article-container!=page.content
+ include includes/post/post-copyright.pug
+ .tag_share
+ if (theme.post_meta.post.tags)
+ .post-meta__tag-list
+ each item, index in page.tags.data
+ a(href=url_for(item.path)).post-meta__tags #[=item.name]
+ !=partial('includes/share/index', {}, {cache:theme.fragment_cache})
+
+ if theme.reward.enable
+ !=partial('includes/post/reward', {}, {cache:theme.fragment_cache})
+
+ //- ad
+ if theme.ad && theme.ad.post
+ .post-ad!=theme.ad.post
+
+ include includes/pagination.pug
+ if theme.related_post && theme.related_post.enable
+ != related_posts(page,site.posts)
+ if page.comments !== false
+ include includes/comments/index.pug
\ No newline at end of file
diff --git a/themes/butterfly/layout/tag.pug b/themes/butterfly/layout/tag.pug
new file mode 100644
index 00000000..ec2e31b2
--- /dev/null
+++ b/themes/butterfly/layout/tag.pug
@@ -0,0 +1,14 @@
+extends includes/layout.pug
+
+block content
+ if theme.tag_ui == 'index'
+ include ./includes/mixins/UI.pug
+ #recent-posts.recent-posts
+ +UI_NEW(page.posts)
+ include includes/pagination.pug
+ else
+ include ./includes/mixins/article-sort.pug
+ #tag
+ .article-sort-title= _p('page.tag') + ' - ' + page.tag
+ +articleSort(page.posts)
+ include includes/pagination.pug
\ No newline at end of file
diff --git a/themes/butterfly/package.json b/themes/butterfly/package.json
new file mode 100644
index 00000000..4fdd627c
--- /dev/null
+++ b/themes/butterfly/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "hexo-theme-butterfly",
+ "version": "2.2.5",
+ "description": "A Hexo Theme: Butterfly"
+}
\ No newline at end of file
diff --git a/themes/butterfly/scripts/events/404.js b/themes/butterfly/scripts/events/404.js
new file mode 100644
index 00000000..e0917449
--- /dev/null
+++ b/themes/butterfly/scripts/events/404.js
@@ -0,0 +1,8 @@
+hexo.extend.generator.register('404', function(locals){
+ if (!hexo.theme.config.error_404.enable) return
+ return {
+ path: '404.html',
+ data: locals.posts,
+ layout: ['404']
+ }
+});
\ No newline at end of file
diff --git a/themes/butterfly/scripts/events/replace-config.js b/themes/butterfly/scripts/events/replace-config.js
new file mode 100644
index 00000000..7d7612d8
--- /dev/null
+++ b/themes/butterfly/scripts/events/replace-config.js
@@ -0,0 +1,12 @@
+/**
+ * Note: configs in _data/butterfly.yml will replace configs in hexo.theme.config.
+ */
+
+hexo.on('generateBefore', function () {
+ const rootConfig = hexo.config
+ if (hexo.locals.get) {
+ const data = hexo.locals.get('data')
+ data && data.butterfly && (hexo.theme.config = data.butterfly)
+ }
+ hexo.theme.config.rootConfig = rootConfig
+})
\ No newline at end of file
diff --git a/themes/butterfly/scripts/filters/hide-post.js b/themes/butterfly/scripts/filters/hide-post.js
new file mode 100644
index 00000000..7ce8f84e
--- /dev/null
+++ b/themes/butterfly/scripts/filters/hide-post.js
@@ -0,0 +1,63 @@
+/**
+ * global hexo
+ * from printempw/hexo-hide-posts
+ * modify by Jerry
+ */
+
+'use strict';
+
+var public_generators = [];
+
+hexo.extend.filter.register('before_generate', function () {
+ this._bindLocals();
+
+ const all_posts = this.locals.get('posts');
+ const hidden_posts = all_posts.find({
+ 'hide': true
+ });
+ const normal_posts = all_posts.filter(post => !post['hide']);
+
+ this.locals.set('all_posts', all_posts);
+ this.locals.set('hidden_posts', hidden_posts);
+ this.locals.set('posts', normal_posts);
+});
+
+hexo.extend.filter.register('after_init', function () {
+
+ const original = {};
+ for (const name in hexo.extend.generator.list()) {
+ original[name] = hexo.extend.generator.get(name);
+ }
+
+ hexo.extend.generator.register('post', async function (locals) {
+ const fg = original.post.bind(this);
+
+ const generated_public = await fg(locals);
+ const generated_hidden = await fg(Object.assign({}, locals, {
+ posts: locals.hidden_posts
+ }));
+
+ // Remove post.prev and post.next for hidden posts
+ generated_hidden.forEach(ele => {
+ ele.data.prev = ele.data.next = null;
+ });
+
+ return generated_public.concat(generated_hidden);
+ });
+
+ // Then we hack into other generators if necessary
+ public_generators.filter(
+ name => Object.keys(original).includes(name)
+ ).forEach(name => {
+ // Overwrite original generator
+ hexo.extend.generator.register(name, function (locals) {
+ const fg = original[name].bind(this);
+
+ return fg(Object.assign({}, locals, {
+ posts: new locals.posts.constructor(
+ locals.posts.data.concat(locals.hidden_posts.data)
+ )
+ }));
+ });
+ });
+});
\ No newline at end of file
diff --git a/themes/butterfly/scripts/filters/post-lazyload.js b/themes/butterfly/scripts/filters/post-lazyload.js
new file mode 100644
index 00000000..c0a6624c
--- /dev/null
+++ b/themes/butterfly/scripts/filters/post-lazyload.js
@@ -0,0 +1,29 @@
+'use strict';
+
+const url_for = require('hexo-util').url_for.bind(hexo);
+
+function lazyProcess(htmlContent) {
+ var bg = url_for(hexo.theme.config.lodding_bg.post);
+ return htmlContent.replace(//gi, (str, p1, p2, p3) => {
+ if (/data-src/gi.test(str)) {
+ return str;
+ }
+ if (/class="(.*?)"/gi.test(str)){
+ str = str.replace(/class="(.*?)"/gi, (classStr, p1) => {
+ return classStr.replace(p1, `${p1} lazyload`);
+ })
+ str = str.replace(p2, `${bg}`)
+ return str.replace('>', ` data-src="${p2}">`);
+ }
+ str = str.replace(p2, `${bg}`)
+ return str.replace(p3, ` class="lazyload" data-src="${p2}" ${p3}`);
+ });
+}
+
+var processPost = function(data) {
+ if (!hexo.theme.config.lazyload.enable) return;
+ data.content = lazyProcess.call(this, data.content);
+ return data;
+};
+
+hexo.extend.filter.register('after_post_render', processPost);
\ No newline at end of file
diff --git a/themes/butterfly/scripts/filters/random-cover.js b/themes/butterfly/scripts/filters/random-cover.js
new file mode 100644
index 00000000..f660df10
--- /dev/null
+++ b/themes/butterfly/scripts/filters/random-cover.js
@@ -0,0 +1,23 @@
+hexo.extend.filter.register("before_post_render", function(data) {
+ if (data.cover == false) {
+ data.randomcover = random_cover();
+ return data;
+ }
+ data.cover = data.cover || random_cover();
+ return data;
+});
+
+var random_cover = function() {
+ var cover;
+ var num;
+ if (!Array.isArray(hexo.theme.config.cover.default_cover)) {
+ cover = hexo.theme.config.cover.default_cover;
+ return cover;
+ } else {
+ num = Math.floor(
+ Math.random() * hexo.theme.config.cover.default_cover.length
+ );
+ cover = hexo.theme.config.cover.default_cover[num];
+ return cover;
+ }
+};
diff --git a/themes/butterfly/scripts/helpers/list-archives.js b/themes/butterfly/scripts/helpers/list-archives.js
new file mode 100644
index 00000000..534d4fe8
--- /dev/null
+++ b/themes/butterfly/scripts/helpers/list-archives.js
@@ -0,0 +1,103 @@
+"use strict";
+
+hexo.extend.helper.register("list_archives", function(options = {}) {
+ const { config } = this;
+ const archiveDir = config.archive_dir;
+ const { timezone } = config;
+ const lang = this.page.lang || this.page.language || config.language;
+ let { format } = options;
+ const type = options.type || "monthly";
+ const { style = "list", transform, separator = ", " } = options;
+ const showCount = Object.prototype.hasOwnProperty.call(options, "show_count")
+ ? options.show_count
+ : true;
+ const order = options.order || -1;
+ const limit = 8;
+ let result = "";
+
+ var more_button;
+ if (lang === "zh-CN") {
+ more_button = "查看更多";
+ } else if (lang === "zh-TW") {
+ more_button = "查看更多";
+ } else {
+ more_button = "More";
+ }
+
+ if (!format) {
+ format = type === "monthly" ? "MMMM YYYY" : "YYYY";
+ }
+
+ const posts = this.site.posts.sort("date", order);
+ if (!posts.length) return result;
+
+ const data = [];
+ let length = 0;
+
+ posts.forEach(post => {
+ // Clone the date object to avoid pollution
+ let date = post.date.clone();
+
+ if (timezone) date = date.tz(timezone);
+ if (lang) date = date.locale(lang);
+
+ const year = date.year();
+ const month = date.month() + 1;
+ const name = date.format(format);
+ const lastData = data[length - 1];
+
+ if (!lastData || lastData.name !== name) {
+ length = data.push({
+ name,
+ year,
+ month,
+ count: 1
+ });
+ } else {
+ lastData.count++;
+ }
+ });
+
+ const link = item => {
+ let url = `${archiveDir}/${item.year}/`;
+
+ if (type === "monthly") {
+ if (item.month < 10) url += "0";
+ url += `${item.month}/`;
+ }
+
+ return this.url_for(url);
+ };
+
+ result += `
+
+
+
+
+```
+
+意外的发现，我们两个margin都是50px，理论上应该是100px啊，可是看起来怎么只有50px的样子。。。
+
+首先这不是 CSS 的 bug，我们可以理解为一种规范，**如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。**
+
+```html
+
+
+
+
+
+
+red inner
+
+
+
+
+
+
+
+
+
+
+
+```
+
+这时候，两个盒子边距就变成了 200px
+
+### BFC的约束条件
+
+- 内部的Box会在垂直方向上一个接一个的放置
+- 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）
+- 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
+- BFC的区域不会与float的元素区域重叠
+- 计算BFC的高度时，浮动子元素也参与计算
+- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
+
+
+
+## 补充
+
+### **IFC**
+
+> IFC(Inline Formatting Contexts)直译为"内联格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)
+> IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个ifc下的多个line box高度会不同。 IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
+> 那么IFC一般有什么用呢？
+> 水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
+> 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。
+
+### GFC
+
+> **GFC**
+> GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。
+> 那么GFC有什么用呢，和table又有什么区别呢？首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。
+
+### FFC
+
+> **FFC**
+> FFC(Flex Formatting Contexts)直译为"自适应格式化上下文"，display值为flex或者inline-flex的元素将会生成自适应容器（flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端也足够了，至少safari和chrome还是OK的，毕竟这俩在移动端才是王道。
+> Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。
+> 伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。
+
+
+
diff --git "a/source/_posts/\343\200\220\351\207\215\350\257\206\345\211\215\347\253\257\343\200\221\345\205\250\351\235\242\346\224\273\347\240\264this.md" "b/source/_posts/\343\200\220\351\207\215\350\257\206\345\211\215\347\253\257\343\200\221\345\205\250\351\235\242\346\224\273\347\240\264this.md"
new file mode 100644
index 00000000..40097785
--- /dev/null
+++ "b/source/_posts/\343\200\220\351\207\215\350\257\206\345\211\215\347\253\257\343\200\221\345\205\250\351\235\242\346\224\273\347\240\264this.md"
@@ -0,0 +1,1268 @@
+---
+title: 【重识前端】全面攻破this
+date: 2020-07-16 22:02:55
+tags: [this, JavaScript]
+category: [重拾前端]
+cover: /image/cover/web.jpeg
+---
+
+
+最近在写【重拾前端】系列，下面有几个快速通道，大家自取
+
+[【重识前端】原型/原型链和继承](https://juejin.im/post/6850418113944420359)
+
+[【重识前端】闭包与模块](https://juejin.im/post/6850418117508759566)
+
+[【重识前端】全面攻破this](https://juejin.im/post/6854573215658803208)
+
+[【重识前端】一次搞定JavaScript的执行机制](https://juejin.im/post/6859911609633767438)
+
+[【重识前端】什么是BFC、IFC、GFC 和 FFC](https://juejin.im/post/6860375101322461198)
+
+[【重识前端】深入内存世界](https://juejin.im/post/6865204092877144077)
+
+## 前言
+
+其实说起this，这个几乎是前端面试必考题，也是前端最多“脑经急转弯”的地方，也是让无数前端人烦恼的地方。今天我们就彻底的深入this，全面的攻破它！
+
+## 绑定规则
+
+我们来看看在函数的执行过程中调用位置如何决定 this 的绑定对象。
+
+你必须找到调用位置，然后判断需要应用下面四条规则中的哪一条。我们首先会分别解释 这四条规则，然后解释多条规则都可用时它们的优先级如何排列。
+
+this的绑定规则总共有以下5种：
+
+1. 默认绑定（最令人头疼的）
+ 1. 严格模式
+ 2. 非严格模式
+2. 隐式绑定
+3. 显式绑定
+ 1. bind
+ 2. call
+ 3. apply
+4. new绑定
+
+### 默认绑定
+
+默认绑定顾名思义，就是没人要的“孤儿”就会应用默认绑定。
+
+思考🤔一下👇的代码会输出什么？
+
+```js
+var a = 'out'
+function fnc() {
+ var a = 'in'
+ console.log(this.a)
+}
+fnc();
+```
+
+**答案是：'out'**
+
+我们可以看到当调用 `fnc()` 时，`this.a` 被解析成了全局变量 `a`。为什么?因为在本 例中，函数调用时应用了 `this` 的默认绑定，因此 `this` 指向全局对象。
+
+那我们怎么知道他是应用了默认绑定呢？
+
+我们发现 `fnc` 他只是孤零零的被调用，没有任何的修饰*（调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含，不过这种说法可能会造成一些误导。）*，所以它就相当于是没有人要的`孩子`，只能去`福利院`---默认绑定。
+
+这样说可能还不太明白默认绑定究竟是怎么一回事。等到后面的规则介绍的多了，你就会发现没有应用其他规则的“孤儿”只能来福利院 ---默认绑定的怀抱
+
+#### 严格模式
+
+在严格下，默认绑定不是绑定到`window`，而是`undefined`。
+
+```js
+var a = 'out'
+function fnc() {
+ "use strict";
+
+ var a = 'in'
+ console.log(this.a)
+}
+fnc();
+```
+
+**答案是：报错**
+
+为什么？因为我们想在`undefined`里面找`a`，那肯定是报错的
+
+### 隐式绑定
+
+隐式绑定，顾名思义就是悄悄的绑定，或者说公认的，但是没有明说的绑定。就好比一个男人和一个女人手牵手走在一起，他们基本上可以认定就是在情侣，但是还是有可能会是“偷情”（映射到隐式绑定的隐式丢失，等会会说到。）
+
+思考🤔一下👇的代码会输出什么？
+
+```js
+var a = 'out'
+function fnc() {
+ console.log(this.a)
+}
+var obj = {
+ a: 'in',
+ fnc: fnc
+}
+obj.fnc();
+```
+
+**答案是：'in'**
+
+我们可以注意到，`fnc` 是在什么情况下被调用的？是`obj` 调用的，说明这个`fnc`已经有主了，护花使者是`obj`，所以`fnc`说的话肯定是向着`obj`的，胳膊肘不会往外拐。
+
+其实这里面有一个小的点需要注意，那就是如果是多个对象引用的调用，那这个时候的执行上下文又是谁的呢？
+
+其实我们用常理就可以解释这个问题，A叫B去吃饭，但是B想叫C一起去，结果A和B起了冲突，你作为这个C你会向着谁？那肯定是B，因为有C叫你去，你们才会出现在这场聚会。所以这个问题不难回答。我们直接看一个例子🌰
+
+```js
+var name = 'aa'
+function fnc() {
+ console.log(this.name)
+}
+var bb = {
+ name: 'bb',
+ fnc: fnc
+}
+var cc = {
+ name: 'cc',
+ bb: bb
+}
+cc.bb.fnc();
+```
+
+**答案是：bb**
+
+为什么？因为能让`fnc`被调用的是`bb`，没有`bb`，`fnc`根本没有机会登场。
+
+#### 隐式丢失
+
+前面说过，虽然很多东西表上面看起来都很正常，但是也有可能有一些其他状况的出现。比如隐式绑定里面的隐式丢失。
+
+我们把之前的例子修改一下
+
+```js
+var name = 'aa'
+function fnc() {
+ console.log(this.name)
+}
+var bb = {
+ name: 'bb',
+ fnc: fnc
+}
+var cc = {
+ name: 'cc',
+ bb: bb
+}
+var aa = cc.bb.fnc;
+aa()
+```
+
+**答案是：aa**
+
+为什么？这个其实也很好理解，这个`fnc`并没有被`bb`调用，真正调用的地方是在`window`里面声明的一个变量`aa`。所以`bb`丢失了`fnc`的信任，`fnc`无处可去，只能去孤儿院。
+
+还是刚刚吃饭的例子，我们修改一下场景就很好理解了。
+
+A叫B去吃饭，B把C的联系方式不小心弄丢了，结果被一个陌生人D捡去了，刚刚好D也要参加聚会，就打电话叫了D一起参加聚会。但是C不认识D，叫他去的不是熟人B，所以谁也信不过。最终只能应用默认规则--默认绑定了。
+
+
+
+还有一种情况是非常常见的，也是隐式丢失，那就是回调函数。
+
+看下面的例子：
+
+```js
+var name = 'window'
+function fnc() {
+ console.log(this.name)
+}
+function ffnncc(fn) {
+ fn()
+}
+var obj = {
+ name: 'obj',
+ fnc: fnc,
+}
+ffnncc(obj.fnc)
+```
+
+**答案是：widnow**
+
+为什么？这和之前的那个例子一样，表面上看起来好像是`obj`调用的，但是其实是`obj`把调用`fnc`的方法转交给了别人，由`fnc`不认识的来调用了。
+
+再来看一个面试题经常考的题目：
+
+```js
+var name = 'window'
+function fnc() {
+ console.log(this.name)
+}
+var obj = {
+ name: 'obj',
+ fnc: fnc,
+}
+setTimeout(obj.fnc, 100)
+```
+
+**答案是：widnow**
+
+我相信不用解释你也找到为什么了吧？`fnc`的联系方式被`obj`转交给别人了！
+
+哈哈哈哈，有没有感觉this其实也不过如此，so easy！
+
+> 思考题：那么react中的函数调用为什么要用箭头函数或者为什么要在constructor里面bind一下。
+
+### 显式绑定
+
+我们刚刚看到的是隐式绑定，是偷偷摸摸的那种。接下来我们就介绍一下显式绑定，光明正大的那种。
+
+那么如果我们不想在对象内部包含函数引用，而想在某个对象上强制调用函数，该怎么
+
+做呢?
+
+JavaScript 中的“所有”函数都有一些有用的特性(这和它们的 [[ 原型 ]] 有关——之后我 们会详细介绍原型)，可以用来解决这个问题。具体点说，可以使用函数的 call(..) 和 apply(..) 方法。严格来说，JavaScript 的宿主环境有时会提供一些非常特殊的函数，它们 并没有这两个方法。但是这样的函数非常罕见，JavaScript 提供的绝大多数函数以及你自 己创建的所有函数都可以使用 call(..) 和 apply(..) 方法。
+
+看下面的例子：
+
+```js
+var a = 'window'
+function foo() {
+ console.log( this.a );
+}
+var obj = {
+ a:'obj'
+};
+foo.call( obj );
+foo()
+```
+
+**答案的先后顺序是：obj，window**
+
+通过 foo.call(..)，我们可以在调用 foo 时强制把它的 this 绑定到 obj 上。
+
+可惜，显式绑定仍然无法解决我们之前提出的丢失绑定问题。
+
+```js
+function sayHi(){
+ console.log('Hello,', this.name);
+}
+var person = {
+ name: 'YvetteLau',
+ sayHi: sayHi
+}
+var name = 'Wiliam';
+var Hi = function(fn) {
+ fn();
+}
+Hi.call(person, person.sayHi);
+```
+
+**答案是：Hello, Wiliam**
+
+其实我们不难发现，这个`fn`不是直接被调用的，所以造成了隐式丢失。我们的`call`绑定的`person`其实绑定在了`Hi`上面了，不信的话我们改一下你就会发现了。
+
+```js
+function sayHi(){
+ console.log('Hello,', this.name);
+}
+var person = {
+ name: 'YvetteLau',
+ sayHi: sayHi
+}
+var name = 'Wiliam';
+var Hi = function(fn) {
+ console.log(this.name)
+ fn();
+}
+Hi.call(person, person.sayHi);
+```
+
+输出了什么？
+
+**YvetteLau**
+
+**Hello, Wiliam**
+
+那么咋办呢？别怕显示绑定的变异版，硬绑定可以解决这个问题。
+
+#### 硬绑定
+
+硬绑定其实就是在最后一层给他进行显示绑定。
+
+请看代码：
+
+```js
+function sayHi(){
+ console.log('Hello,', this.name);
+}
+var person = {
+ name: 'YvetteLau',
+ sayHi: sayHi
+}
+var name = 'Wiliam';
+var Hi = function(fn) {
+ console.log(this.name)
+ fn.call(person);
+}
+Hi(person.sayHi);
+```
+
+输出了什么？
+
+**YvetteLau**
+
+**Hello, Wiliam**
+
+虽然我们调用`Hi`的时候，在`call`之前`this`还是指向了`window`，但是我们用`call`给他绑定上了`person`。无论之后如何调用函数 `fn`，它 总会手动在 `person` 上调用 `fn`。这种绑定是一种显式的强制绑定，因此我们称之为硬绑定。
+
+```js
+function foo() {
+ console.log( this.a );
+}
+
+var obj = {
+ a: 2
+};
+
+var bar = function() {
+ foo.call( obj );
+};
+
+bar(); // 2
+setTimeout( bar, 100 ); // 2
+
+// 硬绑定的bar不可能再修改它的this
+bar.call( window ); // 2
+```
+
+典型应用场景是创建一个包裹函数，负责接收参数并返回值。
+
+```js
+function foo(something) {
+ console.log( this.a, something );
+ return this.a + something;
+}
+
+var obj = {
+ a: 2
+};
+
+var bar = function() {
+ return foo.apply( obj, arguments );
+};
+
+var b = bar( 3 ); // 2 3
+console.log( b ); // 5
+```
+
+创建一个可以重复使用的辅助函数。
+
+```js
+function foo(something) {
+ console.log( this.a, something );
+ return this.a + something;
+}
+
+// 简单的辅助绑定函数
+function bind(fn, obj) {
+ return function() {
+ return fn.apply( obj, arguments );
+ }
+}
+
+var obj = {
+ a: 2
+};
+
+var bar = bind( foo, obj );
+
+var b = bar( 3 ); // 2 3
+console.log( b ); // 5
+```
+
+ES5内置了`Function.prototype.bind`，bind会返回一个硬绑定的新函数，用法如下。
+
+```js
+function foo(something) {
+ console.log( this.a, something );
+ return this.a + something;
+}
+
+var obj = {
+ a: 2
+};
+
+var bar = foo.bind( obj );
+
+var b = bar( 3 ); // 2 3
+console.log( b ); // 5
+```
+
+API调用的“上下文”
+
+JS许多内置函数提供了一个可选参数，被称之为“上下文”（context），其作用和`bind(..)`一样，确保回调函数使用指定的this。这些函数实际上通过`call(..)`和`apply(..)`实现了显式绑定。
+
+```js
+function foo(el) {
+ console.log( el, this.id );
+}
+
+var obj = {
+ id: "awesome"
+}
+
+var myArray = [1, 2, 3]
+// 调用foo(..)时把this绑定到obj
+myArray.forEach( foo, obj );
+// 1 awesome 2 awesome 3 awesome
+```
+
+### new 绑定
+
+使用 new 来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。
+
+1. 创建(或者说构造)一个全新的对象。
+2. 这个新对象会被执行[[原型]]连接。
+3. 这个新对象会绑定到函数调用的this。
+4. 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。
+
+思考下面的代码:
+
+```js
+var a = 4
+function foo(a) {
+ this.a = a;
+}
+var bar = new foo(2);
+console.log( bar.a ); // 2
+```
+
+使用`new`来调用`foo(..)`时，会构造一个新对象并把它（`bar`）绑定到`foo(..)`调用中的this。
+
+### 绑定优先级
+
+看完规则，我们肯定想知道如果这些规则撞在一起，我们又该听谁的呢？
+
+毫无疑问，默认绑定的优先级是四条规则中最低的，因为是没人应用任何规则才会去应用默认绑定。所以我们可以先不考虑它。 隐式绑定和显式绑定哪个优先级更高?我们来测试一下:
+
+
+
+```js
+function foo() {
+ console.log( this.a );
+}
+var obj1 = {
+ a: 2,
+ foo: foo
+};
+var obj2 = {
+ a: 3,
+ foo: foo
+};
+obj1.foo(); // 2
+obj2.foo(); // 3
+obj1.foo.call( obj2 ); // 3
+obj2.foo.call( obj1 ); // 2
+```
+
+可以看到，显式绑定优先级更高，也就是说在判断时应当先考虑是否可以应用显式绑定。 现在我们需要搞清楚 new 绑定和隐式绑定的优先级谁高谁低:
+
+```js
+function foo(something) {
+ this.a = something;
+}
+var obj1 = {
+ foo: foo
+};
+var obj2 = {};
+obj1.foo( 2 );
+console.log( obj1.a ); // 2
+obj1.foo.call( obj2, 3 );
+console.log( obj2.a ); // 3
+var bar = new obj1.foo( 4 );
+console.log( obj1.a ); // 2
+console.log( bar.a ); // 4
+```
+
+可以看到 new 绑定比隐式绑定优先级高。但是 new 绑定和显式绑定谁的优先级更高呢?
+
+> new 和 call/apply 无法一起使用，因此无法通过 new foo.call(obj1) 来直接 进行测试。但是我们可以使用硬绑定来测试它俩的优先级。
+>
+> 这是因为函数内部有两个不同的方法：`[[Call]]`和`[[Constructor]]`。 当使用普通函数调用时，`[[Call]]`会被执行。当使用构造函数调用时，`[[Constructor]]`会被执行。`call`、`apply`、`bind`和箭头函数内部没有`[[Constructor]]`方法。
+
+```js
+
+function foo(something) {
+ this.a = something;
+}
+var obj1 = {};
+var bar = foo.bind( obj1 );
+bar( 2 );
+console.log( obj1.a ); // 2
+var baz = new bar(3);
+console.log( obj1.a ); // 2
+console.log( baz.a ); // 3
+```
+
+我们可以看到new把bind的硬绑定给顶掉了
+
+所以new > 硬绑定
+
+#### 总结
+
+> new 绑定 > 显示绑定 > 隐式绑定 > 默认绑定
+
+### 绑定例外
+
+#### 被忽略的this
+
+把`null`或者`undefined`作为`this`的绑定对象传入`call`、`apply`或者`bind`，这些值在调用时会被忽略，实际应用的是默认规则。
+
+下面两种情况下会传入`null`
+
+- 使用`apply(..)`来“展开”一个数组，并当作参数传入一个函数
+- `bind(..)`可以对参数进行柯里化（预先设置一些参数）
+
+```js
+function foo(a, b) {
+ console.log( "a:" + a + "，b:" + b );
+}
+
+// 把数组”展开“成参数
+foo.apply( null, [2, 3] ); // a:2，b:3
+
+// 使用bind(..)进行柯里化
+var bar = foo.bind( null, 2 );
+bar( 3 ); // a:2，b:3
+```
+
+总是传入`null`来忽略this绑定可能产生一些副作用。如果某个函数确实使用了this，那默认绑定规则会把this绑定到全局对象中。
+
+> 更安全的this
+
+安全的做法就是传入一个特殊的对象（空对象），把this绑定到这个对象不会对你的程序产生任何副作用。
+
+JS中创建一个空对象最简单的方法是**`Object.create(null)`**，这个和`{}`很像，但是并不会创建`Object.prototype`这个委托，所以比`{}`更空。
+
+```js
+function foo(a, b) {
+ console.log( "a:" + a + "，b:" + b );
+}
+
+// 我们的空对象
+var ø = Object.create( null );
+
+// 把数组”展开“成参数
+foo.apply( ø, [2, 3] ); // a:2，b:3
+
+// 使用bind(..)进行柯里化
+var bar = foo.bind( ø, 2 );
+bar( 3 ); // a:2，b:3
+```
+
+#### 间接引用
+
+间接引用下，调用这个函数会应用默认绑定规则。间接引用最容易在**赋值**时发生。
+
+```js
+// p.foo = o.foo的返回值是目标函数的引用，所以调用位置是foo()而不是p.foo()或者o.foo()
+function foo() {
+ console.log( this.a );
+}
+
+var a = 2;
+var o = { a: 3, foo: foo };
+var p = { a: 4};
+
+o.foo(); // 3
+(p.foo = o.foo)(); // 2
+```
+
+#### 软绑定
+
+- 硬绑定可以把this强制绑定到指定的对象（`new`除外），防止函数调用应用默认绑定规则。但是会降低函数的灵活性，使用**硬绑定之后就无法使用隐式绑定或者显式绑定来修改this**。
+- **如果给默认绑定指定一个全局对象和undefined以外的值**，那就可以实现和硬绑定相同的效果，同时保留隐式绑定或者显示绑定修改this的能力。
+
+```js
+// 默认绑定规则，优先级排最后
+// 如果this绑定到全局对象或者undefined，那就把指定的默认对象obj绑定到this,否则不会修改this
+if(!Function.prototype.softBind) {
+ Function.prototype.softBind = function(obj) {
+ var fn = this;
+ // 捕获所有curried参数
+ var curried = [].slice.call( arguments, 1 );
+ var bound = function() {
+ return fn.apply(
+ (!this || this === (window || global)) ?
+ obj : this,
+ curried.concat.apply( curried, arguments )
+ );
+ };
+ bound.prototype = Object.create( fn.prototype );
+ return bound;
+ };
+}
+```
+
+使用：软绑定版本的foo()可以手动将this绑定到obj2或者obj3上，但如果应用默认绑定，则会将this绑定到obj。
+
+```js
+function foo() {
+ console.log("name:" + this.name);
+}
+
+var obj = { name: "obj" },
+ obj2 = { name: "obj2" },
+ obj3 = { name: "obj3" };
+
+// 默认绑定，应用软绑定，软绑定把this绑定到默认对象obj
+var fooOBJ = foo.softBind( obj );
+fooOBJ(); // name: obj
+
+// 隐式绑定规则
+obj2.foo = foo.softBind( obj );
+obj2.foo(); // name: obj2 <---- 看！！！
+
+// 显式绑定规则
+fooOBJ.call( obj3 ); // name: obj3 <---- 看！！！
+
+// 绑定丢失，应用软绑定
+setTimeout( obj2.foo, 10 ); // name: obj
+```
+
+### 箭头函数
+
+ES6新增一种特殊函数类型：箭头函数，箭头函数无法使用上述四条规则，而是根据外层（函数或者全局）作用域（**词法作用域**）来决定this。
+
+- `foo()`内部创建的箭头函数会捕获调用时`foo()`的this。由于`foo()`的this绑定到`obj1`，`bar`(引用箭头函数)的this也会绑定到`obj1`，**箭头函数的绑定无法被修改**(`new`也不行)。
+
+```js
+function foo() {
+ // 返回一个箭头函数
+ return (a) => {
+ // this继承自foo()
+ console.log( this.a );
+ };
+}
+
+var obj1 = {
+ a: 2
+};
+
+var obj2 = {
+ a: 3
+}
+
+var bar = foo.call( obj1 );
+bar.call( obj2 ); // 2，不是3！
+```
+
+
+
+箭头函数最常用于回调函数中，例如事件处理器或者定时器：
+
+
+
+```js
+
+function foo() {
+ setTimeout(() => {
+ // 这里的 this 在此法上继承自 foo()
+ console.log( this.a ); },100);
+ }
+var obj = {
+ a:2
+};
+foo.call( obj ); // 2
+
+```
+
+
+
+ES6之前和箭头函数类似的模式，采用的是词法作用域取代了传统的this机制。
+
+
+
+```js
+function foo() {
+ var self = this; // lexical capture of this
+ setTimeout( function() {
+ console.log( self.a ); // self只是继承了foo()函数的this绑定
+ }, 100 );
+}
+
+var obj = {
+ a: 2
+};
+
+foo.call(obj); // 2
+```
+
+## 实现call和apply
+
+### 了解call和apply
+
+为什么会有call和apply？ call和apply两个方法的作用基本相同，它们都是为了改变某个函数**执行时的上下文**（context）而建立的， 他的真正强大之处就是能够扩充函数赖以运行的作用域。通俗一点讲，就是改变函数体内部**this 的指向**。
+
+
+
+举个栗子：
+
+```
+window.color = "red";
+var o = {color: "blue"};
+function sayColor(){
+ alert(this.color);
+}
+sayColor();//red
+sayColor.call(this);//red，把函数体sayColor内部的this，绑到当前环境（作用域）(这段代码所处的环境)
+sayColor.call(window);//red，把函数体sayColor内部的this，绑到window（全局作用域）
+sayColor.call(o);//blue复制代码
+```
+
+
+
+> **解释：**上面的栗子，很明显函数sayColor是在全局作用域（环境/window）中调用的，而全局作用域中有一个color属性，值为"red"，sayColor.call(this)这一行代码就是表示**把函数体sayColor内部的this，绑到当前环境（作用域）**，而sayColor.call(window)这一行代码就是表示**把函数体sayColor内部的this，绑到window（全局作用域）**，之所以这两行的输出都是"red"就是因为他当前作用域的this就是window（this === window）； 最后，sayColor.call(o)这一行代码就表示**把函数体sayColor内部的this，绑到o这个对象的执行环境（上下文）中来**，也就是说sayColor内部的this——>**o**
+
+### call和apply的区别
+
+`call()` 和 `apply()`的区别在于，`call()`方法接受的是**若干个参数的列表**，而`apply()`方法接受的是**一个包含多个参数的数组**
+
+举个例子：
+
+```js
+var func = function(arg1, arg2) {
+ ...
+};
+
+func.call(this, arg1, arg2); // 使用 call，参数列表
+func.apply(this, [arg1, arg2]) // 使用 apply，参数数组
+```
+
+### 应用场景
+
+其实这些应用场景都有新的方法可以快速解决， 我只是想告诉大家一些小的知识点， 而且这些东西虽然有新的方法代替，但是面试的时候很可能会被问到。
+
+#### 合并两个数组
+
+
+
+```js
+var a = ['a', 'aa'];
+var b = ['b', 'bb'];
+
+Array.prototype.push.apply(a, b);
+console.log(a) // ['a', 'aa', 'b', 'bb']
+```
+
+其实现在有`concat`来代替了。或者其他奇淫技巧。但是，都不是我们的重点。
+
+> 当第二个数组(如示例中的 b )太大时不要使用这个方法来合并数组，因为**一个函数能够接受的参数个数是有限制**的。不同的引擎有不同的限制，JS核心限制在 65535，有些引擎会抛出异常，有些不抛出异常但丢失多余参数。
+
+那么要如何解决呢？
+
+我们可以把数组进行切割。然后分批次的调用。
+
+
+
+```js
+function myConcat(arr1, arr2, max = 32768) {
+ for(var i = 0; i < arr2.length; i += max) {
+ Array.prototype.push.apply(
+ arr1,
+ arr2.slice(i, i + max) // 小的知识点，第二个参数大于数组长度就一直取到数组的末尾
+ )
+ }
+}
+
+var a = [-2, -1];
+var b = [];
+for(var i = 0; i < 999999; i ++) {
+ b.push(i)
+}
+
+Array.prototype.push.apply(a, b) // Uncaught RangeError: Maximum call stack size exceeded
+
+
+myConcat(a, b)
+```
+
+#### 验证是否是数组
+
+####
+
+```js
+var arr = [];
+Object.prototype.toString.call(arr); // [object Array]
+//把函数体Object.prototype.toString()方法内部的this，绑到arr的执行环境（作用域）复制代码
+```
+
+
+
+#### 同样是检测对象类型，arr.toString()的结果和Object.prototype.toString.call(arr)的结果不一样，这是为什么？
+
+> 这是因为toString()为Object的原型方法，而Array ，function等引用类型作为Object的实例，都重写了toString方法。不同的对象类型调用toString方法时，根据原型链的知识，调用的是对应的**重写**之后的toString方法（function类型返回内容为函数体的字符串，Array类型返回元素组成的字符串.....），而不会去调用Object上原型toString方法，所以采用arr.toString()不能得到其对象类型，只能将arr转换为字符串类型；因此，在想要得到对象的具体类型时，应该调用Object上原型toString方法。
+
+#### 类数组对象（Array-like Object）使用数组方法
+
+```js
+var domNodes = document.getElementsByTagName("*");
+domNodes.unshift("h1");
+// TypeError: domNodes.unshift is not a function
+
+var domNodeArrays = Array.prototype.slice.call(domNodes);
+domNodeArrays.unshift("h1"); // 505 不同环境下数据不同
+// (505) ["h1", html.gr__hujiang_com, head, meta, ...]
+```
+
+类数组对象有下面两个特性
+
+- 1、具有：指向对象元素的数字索引下标和 `length` 属性
+- 2、不具有：比如 `push` 、`shift`、 `forEach` 以及 `indexOf`等数组对象具有的方法
+
+要说明的是，类数组对象是一个**对象**。JS中存在一种名为**类数组**的对象结构，比如 `arguments` 对象，还有DOM API 返回的 `NodeList` 对象都属于类数组对象，类数组对象不能使用 `push/pop/shift/unshift` 等数组方法，通过 `Array.prototype.slice.call` 转换成真正的数组，就可以使用 `Array`下所有方法。
+
+**类数组对象转数组**的其他方法：
+
+```js
+// 上面代码等同于
+var arr = [].slice.call(arguments)；
+
+ES6:
+let arr = Array.from(arguments);
+let arr = [...arguments];
+```
+
+`Array.from()` 可以将两类对象转为真正的数组：**类数组**对象和**可遍历**（iterable）对象（包括ES6新增的数据结构 Set 和 Map）。
+
+### 实现call
+
+这里会使用隐式绑定来实现。
+
+先丢出我们要测试的例子：
+
+```js
+var a = 1;
+function f () {
+ console.log(this.a)
+}
+var b = {
+ a: 2
+}
+f(); // 1
+f.call(b) // 2
+```
+
+OK, 我们现在就来实现以下自定义的call。应用隐式绑定的话就可以直接绑定上了。
+
+```js
+
+var a = 1;
+function f () {
+ console.log(this.a)
+}
+
+Function.prototype.myCall = function (context) {
+ context.fn = f;
+ context.fn();
+ delete context.fn;
+}
+
+var b = {
+ a: 2
+}
+f(); // 1
+f.myCall(b) // 2
+```
+
+很潇洒的完成了。但是好像不能接受参数诶，接受参数又要考虑边界情况，比如`undefined`，`null`之类的。而且！！而且！！而且`call`不传的话是默认应用`window`的；
+
+所以他有我们也要有！冲！
+
+```js
+Function.prototype.myCall = function(context) {
+ // 取得传入的对象（执行上下文），比如上文的foo对象，这里的context就相当于上文的foo
+ // 不传第一个参数，默认是window,
+ var context = context || window;
+ // 给context添加一个属性，这时的this指向调用myCall的函数，比如上文的bar函数
+ context.fn = this;//这里的context.fn就相当于上文的bar函数
+ // 通过展开运算符和解构赋值取出context后面的参数，上文的例子没有传入参数列表
+ var args = [...arguments].slice(1);
+ // 执行函数（相当于上文的bar(...args)）
+ var result = context.fn(...args);
+ // 删除函数
+ delete context.fn;
+ return result;
+};
+
+```
+
+### 实现apply
+
+因为他们两兄弟就参数不一样所以就不解释了，直接看代码吧。
+
+```js
+Function.prototype.myApply = function(context) {
+ var context = context || window;
+ context.fn = this;
+ var result;
+ // 判断第二个参数是否存在，也就是context后面有没有一个数组
+ // 如果存在，则需要展开第二个参数
+ if (arguments[1]) {
+ result = context.fn(...arguments[1]);
+ } else {
+ result = context.fn();
+ }
+ delete context.fn;
+ return result;
+}
+
+```
+
+
+
+## 实现bind
+
+#### 了解bind
+
+> `bind() 方法创建一个新的函数，在 `bind()` 被调用时，这个新函数的 `this` 被指定为 `bind()` 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
+>
+> 语法：`fun.bind(thisArg[, arg1[, arg2[, ...]]])`
+>
+> MDN
+
+#### bind和apply，call两兄弟的区别
+
+`bind` 方法与 `call / apply` 最大的不同就是前者返回一个绑定上下文的**函数**，而后两者是**直接执行**了函数。
+
+上代码！
+
+```js
+var value = 2;
+
+var foo = {
+ value: 1
+};
+
+function bar(name, age) {
+ return {
+ value: this.value,
+ name: name,
+ age: age
+ }
+};
+
+bar.call(foo, "Jack", 20); // 直接执行了函数
+// {value: 1, name: "Jack", age: 20}
+
+var bindFoo1 = bar.bind(foo, "Jack", 20); // 返回一个函数
+bindFoo1();
+// {value: 1, name: "Jack", age: 20}
+
+var bindFoo2 = bar.bind(foo, "Jack"); // 返回一个函数
+bindFoo2(20);
+// {value: 1, name: "Jack", age: 20}
+```
+
+通过上述代码可以看出`bind` 有如下特性：
+
+- 1、可以指定`this`
+- 2、返回一个函数
+- 3、可以传入参数
+- 4、柯里化
+
+#### 实现bind
+
+直接开干！
+
+```js
+Function.prototype.myBind = function (context) {
+ var that = this; // 这里利用的闭包保存了此时此刻的this，否则后面调用的话会隐式丢失
+ return function () {
+ return that.apply(context)
+ }
+}
+
+// 测试用例
+var value = 2;
+var foo = {
+ value: 1
+};
+
+function bar() {
+ return this.value;
+}
+
+var bindFoo = bar.myBind(foo);
+
+console.log(bindFoo()); // 1
+```
+
+Ok,接下来我们处理一下参数和柯里化吧。
+
+```js
+Function.prototype.myBind = function (context) {
+ // 因为参数是类数组没有slice方法，通过call绑定this之后使用slice拷贝数组，除了第一个需要绑定的this 之外，下面会用到
+ var args = Array.prototype.slice.call(arguments, 1)
+ var that = this; // 这里利用的闭包保存了此时此刻的this，否则后面调用的话会隐式丢失
+ return function () {
+ // 和上面一样拷贝参数
+ var nowArgs = Array.prototype.slice.call(arguments)
+ return that.apply(context, args.concat(nowArgs))
+ }
+}
+// 测试用例
+var value = 2;
+
+var foo = {
+ value: 1
+};
+
+function bar(name, age) {
+ return {
+ value: this.value,
+ name: name,
+ age: age
+ }
+};
+
+var bindFoo = bar.myBind(foo, "Jack");
+bindFoo(20);
+// {value: 1, name: "Jack", age: 20}
+
+```
+
+到现在已经完成大部分了，但是还有一个难点，`bind` 有以下一个特性
+
+> 一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器，提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。
+
+举例说明：正规的bind
+
+```js
+var value = 2;
+var foo = {
+ value: 1
+};
+function bar(name, age) {
+ this.habit = 'shopping';
+ console.log(this.value);
+ console.log(name);
+ console.log(age);
+}
+bar.prototype.friend = 'kevin';
+
+var bindFoo = bar.bind(foo, 'Jack');
+var obj = new bindFoo(20);
+// undefined
+// Jack
+// 20
+
+obj.habit;
+// shopping
+
+obj.friend;
+// kevin
+```
+
+上面例子中，运行结果`this.value` 输出为 `undefined`，这不是全局`value` 也不是`foo`对象中的`value`，这说明 `bind` 的 `this` 对象失效了，`new` 的实现中生成一个新的对象，这个时候的 `this`指向的是 `obj`。
+
+所以我们返回的时候需要判断一下他是不是作为了构造函数返回，如果是就返回当前的this，如果不是就绑定当前输入的`context`
+
+```js
+Function.prototype.myBind = function (context) {
+ // 因为参数是类数组没有slice方法，通过call绑定this之后使用slice拷贝数组，除了第一个需要绑定的this 之外，下面会用到
+ var args = Array.prototype.slice.call(arguments, 1)
+ var that = this; // 这里利用的闭包保存了此时此刻的this，否则后面调用的话会隐式丢失
+ var fnc = function () {
+ // 和上面一样拷贝参数
+ var nowArgs = Array.prototype.slice.call(arguments)
+ //当作为构造函数时，this 指向实例，此时 this instanceof fBound 结果为 true，可以让实例获得来自绑定函数的值，即上例中实例会具有 habit 属性。
+//当作为普通函数时，this 指向 window，此时结果为 false，将绑定函数的 this 指向 context
+ return that.apply(
+ this instanceof fnc ? this : context,
+ args.concat(nowArgs)
+ )
+ }
+ // 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承绑定函数的原型中的值，即上例中 obj 可以获取到 bar 原型上的 friend。
+ fnc.prototype = this.prototype
+ return fnc
+}
+```
+
+但是其实这样会有一个问题，我如果实例修改了原型，那么接下来的继承就会出现问题。
+
+这个时候我们需要拷贝一下我们原型上面的参数。会用到
+
+> 道格拉斯·克罗克福德在 2006 年写了一篇文章，题为 Prototypal Inheritance in JavaScript (JavaScript 10 中的原型式继承)。在这篇文章中，他介绍了一种实现继承的方法，这种方法并没有使用严格意义上的 构造函数。他的想法是借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。为 了达到这个目的，他给出了如下函数。
+>
+> ```js
+> function object(o){
+> function F(){}
+> F.prototype = o
+> return new F
+> }
+> ```
+>
+> 看起来非常简单
+>
+> 先在`object`函数内部创建一个临时的构造函数`F`, 然后将传入的这个对象`o`作为这个临时构造函数的原型, 最后返回这个临时构造函数的实例.
+>
+> 简单来说就是`object`对传入的对象进行了浅复制.
+
+这句话在我的《原型原型链和继承》里面有具体的介绍。想看的话可以点击头像查找文章。
+
+这边可以直接使用ES5的 `Object.create()`方法生成一个新对象
+
+```js
+fBound.prototype = Object.create(this.prototype);
+```
+
+不过 `bind` 和 `Object.create()`都是ES5方法，部分IE浏览器（IE < 9）并不支持，Polyfill中不能用 `Object.create()`实现 `bind`，不过原理是一样的。
+
+ok。那我们就修改一下
+
+```js
+Function.prototype.myBind = function (context) {
+ // 因为参数是类数组没有slice方法，通过call绑定this之后使用slice拷贝数组，除了第一个需要绑定的this 之外，下面会用到
+ var args = Array.prototype.slice.call(arguments, 1)
+ var that = this; // 这里利用的闭包保存了此时此刻的this，否则后面调用的话会隐式丢失
+ var fNOP = function () {};
+ var fnc = function () {
+ // 和上面一样拷贝参数
+ var nowArgs = Array.prototype.slice.call(arguments)
+ //当作为构造函数时，this 指向实例，此时 this instanceof fBound 结果为 true，可以让实例获得来自绑定函数的值，即上例中实例会具有 habit 属性。
+//当作为普通函数时，this 指向 window，此时结果为 false，将绑定函数的 this 指向 context
+ return that.apply(
+ this instanceof fNOP ? this : context,
+ args.concat(nowArgs)
+ )
+ }
+ // 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承绑定函数的原型中的值，即上例中 obj 可以获取到 bar 原型上的 friend。
+ fNOP.prototype = this.prototype
+ fnc.prototype = new FNOP()
+ return fnc
+}
+```
+
+到这里其实已经差不多了，突然想起来还有一个问题是调用 `bind` 的不是函数，这时候需要抛出异常。
+
+```js
+if (typeof this !== "function") {
+ throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
+}
+```
+
+所以
+
+#### 顶配
+
+```js
+Function.prototype.myBind = function (context) {
+ if (typeof this !== "function") {
+ throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
+ }
+ // 因为参数是类数组没有slice方法，通过call绑定this之后使用slice拷贝数组，除了第一个需要绑定的this 之外，下面会用到
+ var args = Array.prototype.slice.call(arguments, 1)
+ var that = this; // 这里利用的闭包保存了此时此刻的this，否则后面调用的话会隐式丢失
+ var fNOP = function () {};
+ var fnc = function () {
+ // 和上面一样拷贝参数
+ var nowArgs = Array.prototype.slice.call(arguments)
+ //当作为构造函数时，this 指向实例，此时 this instanceof fBound 结果为 true，可以让实例获得来自绑定函数的值，即上例中实例会具有 habit 属性。
+//当作为普通函数时，this 指向 window，此时结果为 false，将绑定函数的 this 指向 context
+ return that.apply(
+ this instanceof fNOP ? this : context,
+ args.concat(nowArgs)
+ )
+ }
+ // 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承绑定函数的原型中的值，即上例中 obj 可以获取到 bar 原型上的 friend。
+ fNOP.prototype = this.prototype
+ fnc.prototype = new FNOP()
+ return fnc
+}
+```
+
+
+
+
+
+## 实现new
+
+#### 了解new
+
+> **new 运算符**创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。 ——（来自于MDN）
+
+我们先试试现在有的new，他有什么功能，然后我们总结之后，在开始实现。
+
+看个🌰：
+
+```js
+function NEW (a) {
+ this.a = a;
+}
+NEW.prototype.sayA = function () {
+ console.log(this.a+'b')
+}
+var A = new NEW(1);
+A.sayA()
+A.a
+
+```
+
+我们可以看到A是NEW的一个实例。继承了构造函数（NEW）的属性和原型上的属性（sayA）。
+
+> **`new`** 关键字会进行如下的操作：
+>
+> 1. 创建一个空的简单JavaScript对象（即{}）；
+> 2. 链接该对象（即设置该对象的构造函数）到另一个对象 ；
+> 3. 将步骤1新创建的对象作为`this`的上下文 ；
+> 4. 如果该函数没有返回对象，则返回`this`。
+>
+> MDN
+
+
+
+#### 实现一个new
+
+说干就干：
+
+```js
+// new 是关键词，不可以直接覆盖。这里使用 create 来模拟实现 new 的效果。
+function create () {
+ // 1.
+ var obj = new Object();
+
+ // 获取构造函数
+ // 因为arguments是一个类数组对象，没有unshift方法，所以用了call，我们没有new这关键字，只能模拟，所以的一个参数我们认为他需要传递一个构造函数。
+ var Con = [].unshift.call(arguments)
+
+ // 2.
+ obj.__proto__ = Con.prototype
+
+ // 3、 绑定this。因为之前arguments已经被我们删除了第一个元素，所以剩下的就是我们所需要的参数了。
+ Con.apply(obj, arguments)
+
+ // 4. 简陋版
+ return obj
+
+}
+```
+
+构造函数返回值有如下三种情况：
+
+- 1、返回一个对象
+- 2、没有 `return`，即返回 `undefined`
+- 3、返回`undefined` 以外的基本类型
+
+```js
+function create() {
+ // 1、获得构造函数，同时删除 arguments 中第一个参数
+ Con = [].shift.call(arguments);
+ // 2、创建一个空的对象并链接到原型，obj 可以访问构造函数原型中的属性
+ var obj = Object.create(Con.prototype);
+ // 3、绑定 this 实现继承，obj 可以访问到构造函数中的属性
+ var ret = Con.apply(obj, arguments);
+ // 4、优先返回构造函数返回的对象
+ return ret instanceof Object ? ret : obj;
+};
+```
+
diff --git "a/source/_posts/\343\200\220\351\207\215\350\257\206\345\211\215\347\253\257\343\200\221\345\216\237\345\236\213\345\216\237\345\236\213\351\223\276\345\222\214\347\273\247\346\211\277.md" "b/source/_posts/\343\200\220\351\207\215\350\257\206\345\211\215\347\253\257\343\200\221\345\216\237\345\236\213\345\216\237\345\236\213\351\223\276\345\222\214\347\273\247\346\211\277.md"
new file mode 100644
index 00000000..f6f69164
--- /dev/null
+++ "b/source/_posts/\343\200\220\351\207\215\350\257\206\345\211\215\347\253\257\343\200\221\345\216\237\345\236\213\345\216\237\345\236\213\351\223\276\345\222\214\347\273\247\346\211\277.md"
@@ -0,0 +1,502 @@
+---
+title: 【重识前端】原型/原型链和继承
+date: 2020-07-13 23:51:21
+tags: [原型/原型链, JavaScript, 继承]
+category: [重拾前端]
+cover: /image/cover/web.jpeg
+---
+
+## 探究
+
+我觉得学习一个东西最重要的是搞懂三样东西
+
+What/How/Why
+
+### What
+
+什么是原型?什么是原型链?什么是继承?
+
+#### 原型
+
+在JavaScript中，**原型也是一个对象，通过原型可以实现对象的属性继承，**JavaScript的对象中都包含了一个" [[Prototype]]"内部属性，这个属性所对应的就是该对象的原型。
+
+"[[Prototype]]"作为对象的内部属性，是不能被直接访问的。所以为了方便查看一个对象的原型，Firefox和Chrome中提供了"__proto__"这个**非标准**（不是所有浏览器都支持）的访问器（ECMA引入了标准对象原型访问器"Object.getPrototype(object)"）。
+
+用一句话来概括就是: 原型是一个属性可以被继承的对象.原型也可以有自己的原型.
+
+#### 原型链
+
+原型也可以有自己的原型, 而一个个原型通过prototype链接起来的就叫做原型链
+
+#### 继承
+
+儿子可以通过继承获得父亲的属性或者方法;
+
+### why
+
+为什么会有原型/原型链和继承?
+
+摘自JavaScript高级程序设计:
+
+> 继承是OO语言中的一个最为人津津乐道的概念.许多OO语言都支持两种继承方式: **接口继承** 和 **实现继承** .接口继承只继承方法签名,而实现继承则继承实际的方法.由于js中方法没有签名,在ECMAScript中无法实现接口继承.ECMAScript只支持实现继承,而且其 `实现继承` 主要是依靠原型链来实现的.
+
+### How
+
+#### 原型
+
+怎么找到原型?
+
+我们打开浏览器, 打开控制台(F12), 可以直接输入 `const obj = {}`, 我们就可以把他直接点开.发现里面有一个`__proto__` 其实我们输入的这个对象, 是一个`Object`构造函数的实例. 我们可以通过实例的`__proto__`属性找到他的原型;
+
+#### 原型链
+
+怎么找到原型链?
+
+在找之前我们先了解一个原型与构造函数与实例直接的关系.
+
+假定我们有一个构造函数 `function A(){}`, 我们称他为A
+
+我们有一个实例B, 他是这样来的: `const B = new A()`, 我们称他为B
+
+A的原型为C
+
+接下里我们写一个等式来很好的展示他们之间的关系
+
+A = prototype => C = construct => A = new => B = `__proto__` => C
+
+解释一下: A有一个属性`prototype` 指向A的原型 C, 而C的属性`construct`指向A, A通过new方法可以创建实例B, 而B有一个属性`__proto__`指向了C(A的原型)
+
+
+
+OK, 理解完上面的东西之后, 我们再加一个知识点, A的原型C, 也是C的原型的一个实例.
+
+
+
+先别懂没懂, 我们看一下实战.
+
+书接上文中的原型, 我再复制一下, 方便阅读
+
+> 我们打开浏览器, 打开控制台(F12), 可以直接输入 `const obj = {}`, 我们就可以把他直接点开.发现里面有一个`__proto__` 其实我们输入的这个对象, 是一个`Object`构造函数的实例. 我们可以通过实例的`__proto__`属性找到他的原型;
+
+我们接着点开`__proto__`,发现里面有一堆"花里胡哨"的东西, 我们找到了其中一个很眼熟的"靓仔" -> `construct`;
+
+根据之前的了解
+
+> A = prototype => C = construct => A = new => B = `__proto__` => C
+
+我们点开的这个`construct`其实那个空对象的构造函数`Object`, 那么他应该有一个`prototype`指向了他的原型.
+
+我们找找, 确实发现了有这么一个属性(`prototype`); 那么点开之后应该与最早的空对象的`__proto__`的内容一致. 根据等式可得;
+
+ ##### 总结一下
+
+对象的 `__proto__` 属性指向原型， `__proto__` 将对象和原型连接起来组成了原型链
+
+接下来进入我们的重头戏继承
+
+### 继承
+
+其实继承又分为好多种: 原型链继承, 构造函数继承, 组合继承和寄生组合继承;
+
+#### 原型链继承
+
+
+
+```js
+function A(){
+ this.array = ["a", "b", "c"];
+}
+
+function B(){
+}
+
+//继承了 A
+B.prototype = new A()
+
+var b1 = new B()
+b1.array.push("d");
+console.log(b1.array); //"a,b,c,d"
+
+var b2 = new B();
+console.log(b2.array); //"a,b,c,d"
+
+b2.array.push("e")
+console.log(b2.array) //"a,b,c,d,e"
+console.log(b1.array) //"a,b,c,d,e"
+```
+
+我们定义了两个构造函数, A和B; 根据之前的知识, 我们让B的原型指向了构造函数A创造出来的实例(`new A()`); 然后我们用构造函数B创造了实例b1, 往 继承来的属性array 增加一个字符串"d"; 然后我们输出一下, 按照我们的逾期的多了一个"e"的情况下, 还有"a,b,c";
+
+接下来就有些问题了. 我们按照惯例, 通过构造函数B, 创造了b2. b2确实也有了继承来的属性"array", 可是这个array并不是我们想要的初始的`["a","b","c"]`; 我们放弃探究, 继续往这个`array`里面增加一个`e`, 输出一下`b1`的属性`array`. 确实是可以增加这个`e`;
+
+
+
+可是!
+
+
+
+当我们输出`b1.array`时, 发现b1也被改了, 和之前诡异的b2多出一个`d`一样.
+
+探究发现这个由于我们用的是引用类型, 所以他们存储的是指向同一个内存的内存地址; 所以才会发生这些问题. 这也暴露了原型链继承时的一个问题.引用类型带来的毛病;
+
+其次, 我们发现我们的B的原型指向A的构造函数时不能传递参数, 这也的话有点呆板
+
+综上原型链的继承在日常中是很少用到的
+
+
+
+##### 优点
+
+ 子类可以通过原型链的查找，实现父类的属性公用与子类的实例
+
+##### 缺点
+
+- 一些引用数据操作的时候会出问题，两个实例会公用继承实例的引用数据类
+- 谨慎定义方法，以免定义方法也继承对象原型的方法重名
+- 无法直接给父级构造函数使用参数
+
+
+
+#### 构造函数继承
+
+```js
+function A(){
+ this.array = ["a", "b", "c"];
+}
+
+function B(){
+ A.call(this)
+}
+
+//继承了 A
+B.prototype = new A()
+
+var b1 = new B()
+b1.array.push("d");
+console.log(b1.array); //"a,b,c,d"
+
+var b2 = new B();
+console.log(b2.array); //"a,b,c"
+
+b2.array.push("e")
+console.log(b2.array) //"a,b,c,e"
+console.log(b1.array) //"a,b,c,d"
+```
+
+我们奇迹般的发现, 构造函数的继承解决了我们之前发现的JavaScript引用问题.那函数传参的问...
+
+啪!
+
+停, 我们现在来传递一下参数!
+
+我们把上面的例子修改一下
+
+```js
+function A(name){
+ this.array = ["a", "b", "c"];
+ this.name = name
+}
+
+function B(){
+ A.call(this, 'B')
+}
+
+//继承了 A
+B.prototype = new A()
+
+var b1 = new B()
+b1.array.push("d");
+console.log(b1.array); //"a,b,c,d"
+console.log(b1.name); //"B"
+
+var b2 = new B();
+console.log(b2.array); //"a,b,c"
+console.log(b1.name); //"B"
+
+b2.array.push("e")
+console.log(b2.array) //"a,b,c,e"
+console.log(b1.array) //"a,b,c,d"
+```
+
+这样的话我们解决了原型链继承的两个问题(1.无法传参, 2.js引用问题);
+
+该不会有人认为这样就很完美了吧?不会吧!不会吧!
+
+我们冷静下来想想看, 其实这个传递参数是几乎算是写死的. 还不如直接在A里面直接写死好了, 根本就无法复用嘛; 而且，在超类型的原型中定义的方法，对子类型而言也是不可见的，结 果所有类型都只能使用构造函数模式。考虑到这些问题，借用构造函数的技术也是很少单独使用的。
+
+##### 优点
+
+- 解决了原型链继承的 引用类型操作问题
+- 解决了父类传递参数问题
+
+##### 缺点
+
+- 仅仅使用借用构造函数模式继承，无法摆脱够着函数。方法在构造函数中定义复用不可谈
+- 对于超类的原型定义的方法对于子类是不可使用的，子类的实例只是得到了父类的this绑定的属性 考虑到这些缺点，单独使用借用构造函数也是很少使用的
+
+
+
+#### 组合继承
+
+```js
+function A(name){
+ this.name = name
+ this.array = ['1', '2', '3']
+}
+A.prototype.sayName = function (){console.log(this.name)}
+
+function B(name, age){
+ A.call(this, name);
+ this.age = age;
+}
+
+B.prototype = new A();
+B.prototype.constructor = A; // 因为原型链继承，会把constructor指向改变，所以要重新指回自身
+B.prototype.sayAge = function (){console.log(this.age)}
+
+var a = new B('a', 10)
+a.array.push('a')
+console.log(a.array) // ["1", "2", "3", "a"]
+a.sayName() // 'a'
+a.sayAge() // 10
+
+var b = new B('b', 20)
+b.array.push('b')
+console.log(b.array) // ["1", "2", "3", "b"]
+b.sayName()// 'b'
+b.sayAge() // 20
+```
+
+在这个例子中, 构造函数A有两个内置属性`name`和`array`. A的原型定义了一个方法`sayName`; 构造函数B在调用A的构造函数时传入了一个参数`name`, 然后又给B的原型上定义了一个方法`sayAge`. 这样一来, 就可以让两个B的实例分别拥有自己的属性, 当然也包括了array, 还可以拥有相同的方法.
+
+组合继承避免了原型链和借用构造函数的缺陷，融合了它们的优点，成为 JavaScript 中最常用的继 承模式。而且(关键)，`instanceof` 和 `isPrototypeOf()`也能够用于识别基于组合继承创建的对象。
+
+##### 优点
+
+- 解决了原型链继承引用类型的实例操作导致引用改变
+- 解决了借构造函数继承方式的，父类原型子类实例可以使用
+
+##### 缺点
+
+父类的构造函数被实例换了两次 * 实例会有父类的构造函数的一些this属性、子类的构造函数（prototype）上也有一份实例的上有的属性
+
+#### 原型式继承
+
+道格拉斯·克罗克福德在 2006 年写了一篇文章，题为 Prototypal Inheritance in JavaScript (JavaScript 10 中的原型式继承)。在这篇文章中，他介绍了一种实现继承的方法，这种方法并没有使用严格意义上的 构造函数。他的想法是借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。为 了达到这个目的，他给出了如下函数。
+
+```js
+function object(o){
+ function F(){}
+ F.prototype = o
+ return new F
+}
+```
+
+看起来非常简单
+
+先在`object`函数内部创建一个临时的构造函数`F`, 然后将传入的这个对象`o`作为这个临时构造函数的原型, 最后返回这个临时构造函数的实例.
+
+简单来说就是`object`对传入的对象进行了浅复制.
+
+浅拷贝和深拷贝可以自行Google一下, 这算一个重要的知识点.
+
+举个🌰
+
+```js
+function object(o){
+ function F(){}
+ F.prototype = o
+ return new F
+}
+
+var a = {
+ name: 'a',
+ array: ['1', '2'],
+}
+
+var qq = object(a)
+console.log(qq.name)
+qq.array.push('qq')
+console.log(qq.array)
+
+var ww = object(a)
+console.log(ww.name)
+ww.array.push('ww')
+console.log(ww.array)
+console.log(qq.array)
+```
+
+有没有似曾相识的感觉....原型链继承的老毛病来了...
+
+不过他也不是没有优点的.
+
+在没有必要兴师动众地创建构造函数，而只想让一个对象与另一个对象保持类似的情况下，原型式 继承是完全可以胜任的。
+
+> ECMAScript 5 通过新增 Object.create()方法规范化了原型式继承。这个方法接收两个参数:一 个用作新对象原型的对象和(可选的)一个为新对象定义额外属性的对象。在传入一个参数的情况下， Object.create()与 object()方法的行为相同。有兴趣的话可以自己了解一下
+
+##### 优点
+
+再不用创建构造函数的情况下，实现了原型链继承，代码量减少一部分
+
+##### 缺点
+
+- 一些引用数据操作的时候会出问题，两个实例会公用继承实例的引用数据类
+- 谨慎定义方法，以免定义方法也继承对象原型的方法重名
+- 无法直接给父级构造函数使用参数
+
+#### 寄生继承
+
+寄生继承和原型式继承紧密相关, 同样也是由克罗克福德推而广 之的.寄生式继承的思路与寄生构造函数和工厂模式类似，即创建一个仅用于封装继承过程的函数，该 函数在内部以某种方式来增强对象，最后再像真地是它做了所有工作一样返回对象。以下代码示范了寄 生式继承模式。
+
+上代码
+
+```js
+function object(o){
+ function F(){}
+ F.prototype = o
+ return new F
+}
+
+function createAnother(original){
+ var clone=object(original); //通过调用函数创建一个新对象
+ clone.sayHi = function(){ //以某种方式来增强这个对象
+ alert("hi");
+ };
+ return clone;//返回这个对象
+ }
+```
+
+在这个例子中，createAnother()函数接收了一个参数，也就是将要作为新对象基础的对象。然 后，把这个对象(original)传递给 object()函数，将返回的结果赋值给 clone。再为 clone 对象 添加一个新方法 sayHi()，最后返回 clone 对象。
+
+```js
+var person = {
+ name: "Nicholas",
+ friends: ["Shelby", "Court", "Van"]
+};
+var anotherPerson = createAnother(person);
+anotherPerson.sayHi(); //"hi"
+```
+
+这个例子中的代码基于 person 返回了一个新对象——anotherPerson。新对象不仅具有 person 的所有属性和方法，而且还有自己的 sayHi()方法。
+
+在主要考虑对象而不是自定义类型和构造函数的情况下，寄生式继承也是一种有用的模式。前面示 范继承模式时使用的 object()函数不是必需的;任何能够返回新对象的函数都适用于此模式。
+
+> 使用寄生继承, 由于不能做到函数复用而降低效率, 这点和构造函数继承很像
+
+##### 优点
+
+- 再不用创建构造函数的情况下，实现了原型链继承，代码量减少一部分
+- 可以给备份的对象添加一些属性
+
+##### 缺点
+
+类似构造函数一样，创建寄生的方法需要在clone对象上面添加一些想要的属性，这些属性是放在clone上面的一些私有的属性
+
+#### 寄生组合继承(终极方案
+
+前面说过，组合继承是 JavaScript 最常用的继承模式;不过，它也有自己的不足。组合继承最大的 问题就是无论什么情况下，都会调用两次超类型构造函数:一次是在创建子类型原型的时候，另一次是 在子类型构造函数内部。没错，子类型最终会包含超类型对象的全部实例属性，但我们不得不在调用子 类型构造函数时重写这些属性。再来看一看下面组合继承的例子。
+
+```js
+function A(name){
+ this.name = name;
+ this.array = ['1','2','3']
+}
+A.prototype.sayName = function(){console.log(this.name)}
+
+function B(name, age){
+
+ A.call(this, name) //第二次调用
+ this.age = age
+}
+B.prototype.sayAge = function(){console.log(this.age)}
+
+B.prototype = new A() // 第一次调用
+B.prototype.constructor = B
+```
+
+第一次调用A构造函数的时候, B的原型上就拥有了A的两个属性和一个方法;
+
+第二次调用A的构造函数时, 为B的实例创建了A的两个的属性和一个方法, 于是实例的两个属性和一个方法就屏蔽了原型上的实例和方法;
+
+是不是感觉有点点浪费, 不过好在我们已经找到解决方案--->寄生组合继承
+
+举一个非常简单的🌰, 并且我尽量逐字逐句的讲清楚
+
+```js
+function object(o){
+ function F(){}
+ F.prototype = o
+ return new F
+} //也可以用Object.create替代
+
+function B(name){
+ this.name = name;
+ this.colors = ["red", "blue", "green"];
+}
+
+B.prototype.sayName = function(){ console.log(this.name);
+};
+
+function A(name, age){
+ B.call(this, name); // 只调用了这一次
+ this.age = age;
+}
+
+function inheritPrototype(A, B){
+ //让prototype可以拿到B的属性和方法...这是原型式继承
+ var prototype = object(B.prototype);
+ //由于重写了原型, 所以此时的constructor会指向Object, 所以必须指定一下constructor...那为什么会丢失呢?因为我们穿给object这个方法的是一个对象, 而对象的构造函数就是Object; 在原型那一小节我们说过了, 原型也是对象;
+ prototype.constructor = A;
+ // 继承属性之后就需要将原型给指向回去, 为了原型链的正确指向
+ A.prototype = prototype;
+}
+
+inheritPrototype(A, B);
+
+A.prototype.sayAge = function(){
+ console.log(this.age);
+}
+```
+
+基本思想：通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。实际上是**在组合继承的基础上，用超类型原型的副本代替调用超类型的构造函数给子类型指定原型**。
+
+本质上，是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。
+
+优点：只调用了一次超类型的构造函数，并且因此避免了在子类型的原型上创建不必要的、多余的属性。与此同时，原型链还能保持不变。因此，还能够正常使用`instanceof`和`isPrototypeOf()`。普遍认为寄生组合式继承是引用类型**最理想**的继承方式。
+
+##### 优点
+
+- 在少一次实例化父类的情况下，实现了原型链继承和借用构造函数
+- 减少了原型链查找的次数（子类直接继承超类的prototype，而不是父类的实例）
+
+##### 缺点
+
+暂无
+
+
+
+#### class继承
+
+```js
+class Parent{
+ constructor(name){
+ this.name = name;
+ }
+ getName(){
+ console.log(this.name);
+ }
+}
+class Child extends Parent{
+ constructor(val){
+ super(val);
+ }
+}
+let child = new Child('zhangsan');
+child.getName(); //zhangsan
+child instanceof Parent // true
+```
+
+**说明：**核心在于使用 extends 表明继承自哪个父类，并且在子类构造函数中必须调用 super。
+class 的本质还是函数，这种表达不过是一种语法糖。
+
+这里就不展开了.
\ No newline at end of file
diff --git "a/source/_posts/\343\200\220\351\207\215\350\257\206\345\211\215\347\253\257\343\200\221\345\234\260\345\235\200\346\240\217\344\270\255\350\276\223\345\205\245\347\275\221\345\235\200\345\220\216.md" "b/source/_posts/\343\200\220\351\207\215\350\257\206\345\211\215\347\253\257\343\200\221\345\234\260\345\235\200\346\240\217\344\270\255\350\276\223\345\205\245\347\275\221\345\235\200\345\220\216.md"
new file mode 100644
index 00000000..8ff352a0
--- /dev/null
+++ "b/source/_posts/\343\200\220\351\207\215\350\257\206\345\211\215\347\253\257\343\200\221\345\234\260\345\235\200\346\240\217\344\270\255\350\276\223\345\205\245\347\275\221\345\235\200\345\220\216.md"
@@ -0,0 +1,382 @@
+---
+title: 【重识前端】地址栏中输入网址后发生了什么
+date: 2020-10-09 10:08:31
+tags: [浏览器]
+category: [重拾前端]
+cover: /image/cover/web.jpeg
+---
+
+# 前言
+
+不说太多废话了，这个题目其实基本上是现在面试的高频考点了，现在我也想自己认认真真的捋一遍，到时候面试也可以流利的回答。
+
+# 开始
+
+let's go
+
+## URL解析
+
+其实有人一开始会有疑惑，至少我一开始也有疑惑，不是应该先DNS解析吗？
+
+其实不是的，现在的浏览器他会优先解析你是不是一个合法的URL，为什么呢？比如我们在Chrome输入中文“Derrick是帅哥吗”，这样的不是一个正常的合法的URL，就会优先调用你默认的搜索引擎开始搜索。
+
+当然了，合法的URL包括了协议和网络地址，最常用的协议是
+
+- HTTP（超文本传输协议）
+- FTP（文件传输协议）
+
+网络地址也可以是ip地址，以及端口号，没有端口默认是80端口
+
+## DNS域名解析
+
+这一步其实简单来说就是"baidu.com"这个域名，解析成一个整个的地址。
+
+比如我们的家庭住址都有一个门牌号，xx小区xx栋xx号
+
+这样的一串标识符就可以精准的找到我们的家庭住址，而每一个ip地址就是这样的一个门牌号，比如`baidu.com`这个不是一个门牌号，这个可以理解为百度的家，你告诉浏览器你要去百度的家，这个时候就会开始进行DNS解析他会解析成百度的门牌号，然后找到百度的家。
+
+### 缓存
+
+这里面又会涉及到缓存的概念，什么意思呢？
+
+就是之前我查过百度的家了，已经记录下来百度的家的门牌号了，就不需要重新的进行解析了，直接读取就好了，节约时间。
+
+
+
+这里面涉及的知识太多了，不在这次的讨论范围内。所以只简单的说一下。
+
+
+
+
+
+上图其实很好的解答了DNS的整个解析过程。
+
+1. 从浏览器获取缓存结果。
+2. 如果浏览器没有缓存就从本地系统的缓存中读取，比如host文件等等，像我们平常上GitHub如果慢的话我们都会修改host文件，给他配一个快一点的ip之类的等等。
+3. 然后是图里面没有提到的路由器缓存，一般的路由器也会有自己的缓存。
+4. 路由器也找不到只能开始解析了。本地域名服务器会向根域名服务器发送一个请求， 如果根域名服务器也不存在该域名时， 本地域名会向com顶级域名服务器发送一个请求， 依次类推下去。 直到最后找到目标网址所对应的 IP， 并将其缓存到本地， 以供下次使用。
+
+
+
+### DNS重定向
+
+这里顺便说一下DNS的重定向吧
+
+> DNS每次返回的ip地址可能会不一样，因为世界上不是只有一个机器可以处理"baidu.com"的这个请求，有很多机器可以处理，DNS只需要返回可以处理的机器的ip地址就可以了。例如可以根据每台机器的负载量， 该机器离用户地理位置的距离等等， 这种过程就是DNS负载均衡， 又叫做DNS重定向。
+
+很简单，几个例子，比如我在故宫的北门，打开地图要查询故宫肯定会让我从北门进去。而如果我在故宫的南门，要导航到故宫就会让我从南门进去。
+
+### DNS污染
+
+DNS 污染（DNS cache pollution）， 又称域名服务器缓存投毒（DNS cache poisoning）， 是指一些刻意制造或无意中制造出来的域名服务器数据包， 把域名指往**不正确的IP地址**。
+
+某些网络运营商为了某些目的， 对DNS进行了某些操作， 导致上网的用户无法通过域名取得正确的IP地址。 某些国家或地区出于某些目的为了防止某网站被访问， 而且其又掌握部分国际DNS根目录服务器或镜像， 也会利用此方法进行屏蔽。 （Google、 Facebook等）
+
+至于如果防止DNS污染， 这里只说一个方法就是修改hosts文件， 其他的自行搜索吧。
+
+
+
+## TCP建立连接
+
+其实我们解析之后，找到真正的服务器，我们就需要获取他的资源，最简单的就是获取他的HTML文件，来渲染对吧？怎么获取呢，我们需要TCP连接来获取。
+
+这里涉及到三次握手，和四次挥手以及UDP的一些细一点的知识点。
+
+说TCP之前我想把一些里面可能用到的东西先说说清楚，方便查找。
+
+> 位码即tcp标志位，有6种标示：SYN(synchronous建立联机) ACK(acknowledgement 确认) PSH(push传送) FIN(finish结束) RST(reset重置) URG(urgent紧急)Sequence number(顺序号码) Acknowledge number(确认号码)
+
+### 三次握手
+
+
+
+
+
+三次握手基本上就是👆的图片了，里面的位码在之前也有解释。
+
+这里重点说一下为什么是三次握手🤝，而不是两次或者四次。
+
+A在街上看见了隔了100米的B，（正常情况下如果面对面交流是没有问题的，但是街上很吵，各种车鸣声，店铺广告声之类的。）所以A想和B进行对话，（别问题为什么不打电话，节约钱！）
+
+A喊了B一声，不知道B听不听得见，所以只能在远处等B的回应。
+
+B听见了，也回应了A，但是他不知道A能不能听见所以也要等A回应。
+
+然后A给出了回应，之后A和B就快乐的交流起来。
+
+ok，我们再概括一下。
+
+对应到三次握手就是A -> client；B->server
+
+1. 第一次🤝（A喊B）是为了确认一下B能不能听见，也就是客户端要确认服务端的接受功能正不正常
+2. 第二次🤝（B喊A）是告诉A，我能听见，现在我现在知道你能不能听见，也就是服务端告诉客户端我接受功能正常，现在我想知道你接收功能正不正常。
+3. 第三次🤝（A喊B）是为了告诉B我听见了，也就是客户端让服务端知道客户端的接收功能正常，并且可以开始传输。
+
+为什么要三次握手，因为只有这三次可以完美的确认双方的接收和发送功能正常。
+
+为什么不是两次握手？按照上面的说法，B直接开始发送数据，可是他根本不知道A能不能接收啊，发出去岂不是浪费了，对吧？万一A不能接收呢？所以只能等待A的回应
+
+为什么不是四次握手？因为三次就已经完成了他们互相想知道的信息不需要继续浪费资源了，赶紧开始通信吧！
+
+### 四次挥手
+
+四次挥手其实后面才会讲到，但是因为知识点是一起的，所以就放在一起讲了
+
+老规矩，看图和上面的位码意思，就不多解释了。
+
+
+
+
+
+这里重点解释一下为什么是四次挥手👋
+
+看图我们可以很明显的看到其实就多了一次服务端告诉客户端要终止的消息。
+
+还是举刚刚A和B的例子吧。
+
+A觉得和B聊的差不多了，想结束对话，因为天色很晚了要回家吃饭🍚了。
+
+所以A告诉B，我想走了，不想聊了。
+
+B收到后告诉A，好的，我知道了，但是你等我一下，我撒泡尿，撒完一起走。
+
+B撒完尿之后，告诉A我撒完尿了。
+
+A收到两句话（1.B听到👂A想回家的消息，2.B撒完尿之后的一句话）后，告诉B，我走了。
+
+B听到后也回家了。
+
+ok，我们再概括一下。
+
+对应到三次握手就是A -> client；B->server
+
+1. 第一次👋 A告诉B我想回家吃饭了。也就是客户端告诉服务端，想断开连接了。
+2. 第二次👋B告诉A我收到你的消息了，不过我尿拉完就一起回家吧。也就是服务端告诉客户端我收到你的消息了，但是我这里还有一个文件没有传输完，搞定了就关闭链接。
+3. 第三次👋B告诉A我撒完尿了。也就是服务端告诉客户端我文件传输完了，可以关闭链接了。
+4. 第四次👋A告诉B你的两句话都听到了（1.B听到了A想回家的消息，2.B撒完尿了）。也就是客户端告诉服务端我关闭链接了，你也别发了。
+
+双方结束链接。
+
+相比于三次握手，多出来的那一次回收就是服务端需要有一个关闭传输的这么一个过程，这个过程可能需要时间，所以客户端需要等待传输。
+
+### UDP
+
+这里虽然不在范围内，但是我想讲都讲了，顺便吧UDP一起说吧！
+
+UDP协议全称是用户数据报协议，在网络中它与TCP协议一样用于处理数据包，是一种无连接的协议。在OSI模型中，在第四层——传输层，处于IP协议的上一层。UDP有不提供数据包分组、组装和不能对数据包进行排序的缺点，也就是说，当报文发送之后，是无法得知其是否安全完整到达的。
+
+它有以下几个特点：
+
+#### 1.面向无连接
+
+首先 UDP 是不需要和 TCP一样在发送数据前进行三次握手建立连接的，想发数据就可以开始发送了。并且也只是数据报文的搬运工，不会对数据报文进行任何拆分和拼接操作。
+
+具体来说就是：
+
+- 在发送端，应用层将数据传递给传输层的 UDP 协议，UDP 只会给数据增加一个 UDP 头标识下是 UDP 协议，然后就传递给网络层了
+- 在接收端，网络层将数据传递给传输层，UDP 只去除 IP 报文头就传递给应用层，不会任何拼接操作
+
+#### 2.有单播，多播，广播的功能
+
+UDP 不止支持一对一的传输方式，同样支持一对多，多对多，多对一的方式，也就是说 UDP 提供了单播，多播，广播的功能。
+
+#### 3.UDP是面向报文的
+
+发送方的UDP对应用程序交下来的报文，在添加首部后就向下交付IP层。UDP对应用层交下来的报文，既不合并，也不拆分，而是保留这些报文的边界。因此，应用程序必须选择合适大小的报文
+
+#### 4.不可靠性
+
+首先不可靠性体现在无连接上，通信都不需要建立连接，想发就发，这样的情况肯定不可靠。
+
+并且收到什么数据就传递什么数据，并且也不会备份数据，发送数据也不会关心对方是否已经正确接收到数据了。
+
+再者网络环境时好时坏，但是 UDP 因为没有拥塞控制，一直会以恒定的速度发送数据。即使网络条件不好，也不会对发送速率进行调整。这样实现的弊端就是在网络条件不好的情况下可能会导致丢包，但是优点也很明显，在某些实时性要求高的场景（比如电话会议）就需要使用 UDP 而不是 TCP。
+
+UDP只想把数据发出去，具体有没有成功他不关心
+
+#### 5.头部开销小，传输数据报文时是很高效的。
+
+UDP 头部包含了以下几个数据：
+
+- 两个十六位的端口号，分别为源端口（可选字段）和目标端口
+- 整个数据报文的长度
+- 整个数据报文的检验和（IPv4 可选 字段），该字段用于发现头部信息和数据中的错误
+
+因此 UDP 的头部开销小，只有八字节，相比 TCP 的至少二十字节要少得多，在传输数据报文时是很高效的
+
+#### 6.总结
+
+
+
+| | UDP | TCP |
+| ------------ | ------------------------------------------ | -------------------------------------- |
+| 是否连接 | 无连接 | 面向连接 |
+| 是否可靠 | 不可靠传输，不使用流量控制和拥塞控制 | 可靠传输，使用流量控制和拥塞控制 |
+| 连接对象个数 | 支持一对一，一对多，多对一和多对多交互通信 | 只能是一对一通信 |
+| 传输方式 | 面向报文 | 面向字节流 |
+| 首部开销 | 首部开销小，仅8字节 | 首部最小20字节，最大60字节 |
+| 适用场景 | 适用于实时应用（IP电话、视频会议、直播等） | 适用于要求可靠传输的应用，例如文件传输 |
+
+## SSL/TLS加密
+
+在HTTP请求之前，如果有加密的（就是HTTPS），需要先确认一下双方是否是自己想要找的那个人。
+
+怎么知道那个他是不是自己要找的人呢？有两种方法：对称加密和非对称加密
+
+### 对称加密
+
+对称加密其实就是A和B都有一个解密的规则，双方都心知肚明。这样就可以解密。
+
+对称加密的一大缺点是密钥的管理与分配，换句话说，如何把密钥发送到需要解密你的消息的人的手里是一个问题。在发送密钥的过程中，密钥有很大的风险会被黑客们拦截。现实中通常的做法是将对称加密的密钥进行非对称加密，然后传送给需要它的人。
+
+### 非对称加密
+
+那么什么是非对称加密呢？
+
+非对称加密为数据的加密与解密提供了一个非常安全的方法，它使用了一对密钥，公钥（public key）和私钥（private key）。私钥只能由一方安全保管，不能外泄，而公钥则可以发给任何请求它的人。非对称加密使用这对密钥中的一个进行加密，而解密则需要另一个密钥。比如，你向银行请求公钥，银行将公钥发给你，你使用公钥对消息加密，那么只有私钥的持有人--银行才能对你的消息解密。与对称加密不同的是，银行不需要将私钥通过网络发送出去，因此安全性大大提高。
+
+### 总结
+
+所以基本上都是先用非对称加密传输对称加密的秘钥。
+
+## HTTP请求
+
+HTTP请求得到资源文件，如果有gzip压缩的话还需要解压，然后是一些HTTP小的零碎知识点。
+
+### HTTP报文
+
+HTTP 报文是由 请求报文+响应报文 共同组成
+
+- 请求报文：
+ - 定义：所有经过传输协议，客户端传递给服务器的内容，都被成为请求报文
+ - 包含：
+ - 起始行
+ - 请求头（请求首部）
+ - 请求主体
+- 响应报文：
+ - 定义：所有经过传输协议，服务器返回给客户端的内容，都被成为响应报文
+ - 包含：
+ - HTTP状态码
+ - 响应头
+ - 响应主体
+
+
+
+### HTTP状态码
+
+1~5开头，三位数字
+
+- 1 开头的代表处理中，一般见不到
+- 2开头：都是成功
+ - 200：OK：成功
+ - 201：CREATED：一般应用于告诉服务器创建一个新文件，最后服务器创建成功后返回的状态码
+ - 204：NO CONTENT：对于某些请求（例如：PUT或者DELETE），服务器不想处理，可以返回空内容，并且用204状态码告知
+- 3开头：代表成功，只不过中间需要中转一下
+ - 301：Moved Permanently：永久重定向（永久转移）
+ - 302：Moved Temporarily：临时转移，很早以前基本上用302来做，但是现在主要用307来处理这个事情，
+ - 307的意思就是临时重定向Temporary Redirect =>主要用于：服务器的负载均衡等
+ - 304：Not Modified：设置HTTP的协商缓存
+- 4开头：都是失败
+ - 400：Bad Request：传递给服务器的参数错误
+ - 401：Unauthorized：无权限访问
+ - 404：Not Found：请求地址错误
+- 5开头：都是失败
+ - 500：Internal Server Error：未知服务器错误
+ - 503：Service Unavailable：服务器超负荷
+
+
+
+### HTTP请求方式
+
+其实正常会说到什么`POST`, `GET`之类的，但是我这里想说一下cors里面的东西。
+
+还是本着既然学到这里顺路搞搞清楚
+
+浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。
+
+#### 简单请求
+
+只要同时满足以下两大条件，就属于简单请求。
+
+> （1) 请求方法是以下三种方法之一：
+>
+> - HEAD
+> - GET
+> - POST
+>
+> （2）HTTP的头信息不超出以下几种字段：
+>
+> - Accept
+> - Accept-Language
+> - Content-Language
+> - Last-Event-ID
+> - Content-Type：只限于三个值`application/x-www-form-urlencoded`、`multipart/form-data`、`text/plain`
+
+
+
+
+
+#### 非简单请求
+
+凡是不同时满足上面两个条件，就属于非简单请求。
+
+非简单请求是那种对服务器有特殊要求的请求，比如请求方法是`PUT`或`DELETE`，或者`Content-Type`字段的类型是`application/json`。
+
+非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。
+
+浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的`XMLHttpRequest`请求，否则就报错。
+
+也就是我们常说的跨域，这个问题可以交由后端的同学设置白名单或者运维的同学设置。
+
+如果是前端的同学做这种跨域的问题的话不太方便
+
+比如
+
+- **JSONP**
+
+- #### **document.domain + iframe跨域**
+
+- #### **location.hash + iframe跨域**
+
+- #### **window.name + iframe跨域**
+
+- #### **postMessage跨域**
+
+但是基本上我们常用的就是`JSONP`
+
+具体这些方法和场景有机会的话具体说一下。
+
+## 断开TCP连接
+
+也就是之前的四次挥手，可以看一下上面的说的四次挥手
+
+## 浏览器渲染页面
+
+文件解码成功后会正式开始渲染流程，先会根据 HTML 构建 DOM 树，有 CSS 的话会去构建 CSSOM 树。如果遇到 script 标签的话，会判断是否存在 async 或者 defer ，前者会并行进行下载并执行 JS，后者会先下载文件，然后等待 HTML 解析完成后顺序执行。
+
+如果以上都没有，就会阻塞住渲染流程直到 JS 执行完毕。遇到文件下载的会去下载文件，这里如果使用 HTTP/2 协议的话会极大的提高多图的下载效率。
+
+CSSOM 树和 DOM 树构建完成后会开始生成 Render 树，这一步就是确定页面元素的布局、样式等等诸多方面的东西
+
+在生成 Render 树的过程中，浏览器就开始调用 GPU 绘制，合成图层，将内容显示在屏幕上了。
+
+
+
+# 总结
+
+1. URL解析
+2. DNS解析
+3. 建立连接
+4. 如果有加密的话要先解密
+5. 然后http请求获取资源
+6. 断开连接
+7. 得到资源之后如果有gzip压缩要先解压
+8. 然后先构建DOM树，CSS树。下载JS文件，然后下载图片。然后生成Render树，最后确定布局，GPU绘制。
+
+# 索引
+
+> https://www.ruanyifeng.com/blog/2016/04/cors.html
+>
+> 前端面试之道（掘金小册
+>
+> https://juejin.im/post/6844904162166063118#heading-30
\ No newline at end of file
diff --git "a/source/_posts/\343\200\220\351\207\215\350\257\206\345\211\215\347\253\257\343\200\221\346\232\264\350\265\260\347\232\204\345\274\202\346\255\245\347\274\226\347\250\213.md" "b/source/_posts/\343\200\220\351\207\215\350\257\206\345\211\215\347\253\257\343\200\221\346\232\264\350\265\260\347\232\204\345\274\202\346\255\245\347\274\226\347\250\213.md"
new file mode 100644
index 00000000..d0d979a7
--- /dev/null
+++ "b/source/_posts/\343\200\220\351\207\215\350\257\206\345\211\215\347\253\257\343\200\221\346\232\264\350\265\260\347\232\204\345\274\202\346\255\245\347\274\226\347\250\213.md"
@@ -0,0 +1,1047 @@
+---
+title: 【重识前端】暴走的异步编程
+date: 2020-08-28 22:47:09
+tags: [JavaScript]
+category: [重拾前端]
+cover: /image/cover/web.jpeg
+---
+
+最近在写【重拾前端】系列，下面有几个快速通道，大家自取
+
+[【重识前端】原型/原型链和继承](https://juejin.im/post/6850418113944420359)
+
+[【重识前端】闭包与模块](https://juejin.im/post/6850418117508759566)
+
+[【重识前端】全面攻破this](https://juejin.im/post/6854573215658803208)
+
+[【重识前端】一次搞定JavaScript的执行机制](https://juejin.im/post/6859911609633767438)
+
+[【重识前端】什么是BFC、IFC、GFC 和 FFC](https://juejin.im/post/6860375101322461198)
+
+[【重识前端】深入内存世界](https://juejin.im/post/6865204092877144077)
+
+[【重识前端】暴走的异步编程](https://juejin.im/post/6867814019055484942)
+
+## 前言
+
+老规矩，还是先了解一下什么是异步。异步其实是一个相对比较高级的一个概念。
+
+通常来说，程序都是顺序执行，同一时刻只会发生一件事。如果一个函数依赖于另一个函数的结果，它只能等待那个函数结束才能继续执行，从用户的角度来说，整个程序才算运行完毕.
+
+如果说一个事情需要等待上一件事情做完才能做，但是他们之前又没有强耦合关系。这样就在那里干等就毫无意义。特别是现在计算机普遍都有多核CPU的时代。
+
+举一个形象的🌰。
+
+我们现在要去吃海底捞（海底捞打钱！），我们发现要排队，需要排2个小时左右，这个时候我们要干嘛？难道是干等吗？肯定不是！那样蠢蠢的硬等很呆，我们可能会拿出手机刷刷朋友圈，或者玩一把紧张刺激的王者荣耀又或者去看一场电影等等....在我们做这些事情的时候我们的排队并没有被耽误，甚至可以和服务员说快到了打个电话给我（这个是常见的callback方法，待会讨论）
+
+> 这样你可以同时完成其他工作，这就是**异步编程**的出发点。
+
+本文总结了几个异步的方案，理解它们可以让你写出结构更合理、性能更出色、维护更方便的Javascript程序。
+
+## 异步callback
+
+上来就是一个英俊的例子
+
+```js
+var response = fetch('myImage.png');
+var blob = response.blob();
+```
+
+没有人可以完美预测到每种网络情况下这个response，是否可以完美获得fetch获得的内容，很有可能会报错。
+
+这个时候我们的callback就✨bu ling bu ling的登场啦。
+
+有些小伙伴可能觉得callback似乎和自己没有太大关系。。。emmmm....
+
+```js
+btn.addEventListener('click', () => {
+ alert('You clicked me!');
+});
+```
+
+这样呢？有没有感觉有点儿熟悉了，其他这个就相当于react中的
+
+```html
+{alert('You clicked me!');}}>
+ 点我
+
+```
+
+是不是很熟悉，这个其实就是最常见的callback（回调函数）。
+
+又或者比较常见的
+
+```js
+setTimeout(() => {
+ alert('You clicked me!');
+}，2000)
+```
+
+很常见，大致意思就是2秒钟之后会回调一下这个匿名函数，虽然不一定会准确执行，这个涉及到事件循环，感兴趣的可以去找一下我前阵子写的事件循环😊。
+
+## 发布-订阅模式
+
+发布-订阅模式：又称为观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态改变时，所有依赖于它的对象都将得到通知。
+
+在写React的时候，有一个非常非常非常常见的🌰：
+
+```jsx
+import React, {useState, useEffect} from 'react';
+const test = () => {
+ const [derrick, setDerrick] = useState(0)
+ useEffect(()=> {
+ console.log(derrick)
+ }, [derrick])
+ return(
+
+ )
+}
+```
+
+useEffect订阅了derrick这个变量的变化，然后监听到变化之后就会进行一次log，打印出derrick变量的值。
+
+## Promise
+
+### 回调救星
+
+之前介绍过回调函数这种异步编程。
+
+加入我希望在A执行完之后执行B，然后执行C，然后执行D....最后执行Z
+
+写出来的代码可能是这样的
+
+```js
+var sayhello = function (name, callback) {
+ setTimeout(function () {
+ console.log(name);
+ callback();
+ }, 1000);
+}
+sayhello("first", function () {
+ sayhello("second", function () {
+ sayhello("third", function () {
+ console.log("end");
+ });
+ });
+});
+```
+
+像本例一样嵌套多个方法调用会创建错综复杂的代码，会难以理解与调试。当想要实现更复 杂的功能时，回调函数也会存在问题:若想让两个异步操作并行运行，并且在它们都结束后 提醒你，那该怎么做?若想同时启动两个异步操作，但只采用首个结束的结果，那又该怎么 做?
+
+在这些情况下，你需要追踪多个回调函数并做清理操作， 不过好在promise横空出世拯救了世界。
+
+### 涉及面试题
+
+> promise用过吗？请你介绍一下promise。
+
+其实这里很多同学可能就不知道怎么介绍了，可能只停留在怎么用。我们可以从几个方面来介绍。
+
+- promise是什么？
+- promise解决了什么问题
+- promise的优缺点
+
+#### promise是什么？
+
+所谓`Promise`，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
+
+#### promise解决了什么问题？
+
+1. 解决可读性的问题
+2. 解决信任问题
+
+##### 可读性
+
+可读性，之前的回调地狱promise就可以优雅的解决。(还有更加优雅的，待会会介绍。)
+
+```js
+var sayhello = function (name) {
+ return new Promise(function (resolve, reject) {
+ setTimeout(function () {
+ console.log(name);
+ resolve(); //在异步操作执行完后执行 resolve() 函数
+ }, 10000);
+ });
+}
+sayhello("first").then(function () {
+ return sayhello("second"); //仍然返回一个 Promise 对象
+}).then(function () {
+ return sayhello("third");
+}).then(function () {
+ console.log('end');
+}).catch(function (err) {
+ console.log(err);
+})
+```
+
+##### 信任问题
+
+这个问题可以用promise的几个特点来解释：
+
+> （1）对象的状态不受外界影响。`Promise`对象代表一个异步操作，有三种状态：`pending`（进行中）、`fulfilled`（已成功）和`rejected`（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是`Promise`这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
+>
+> （2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。`Promise`对象的状态改变，只有两种可能：从`pending`变为`fulfilled`和从`pending`变为`rejected`。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对`Promise`对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
+
+由于Promise只能被决议一次，且决议之后无法改变，所以，即便是多次回调，也不会影响结果，决议之后的调用都会被忽略。
+
+```js
+//信任问题演示
+
+//回调
+function method(cb){
+ setTimeout(function(){
+ cb && cb();
+ //因为某些bug导致某个函数多执行了一次
+ cb && cb();
+ },1000);
+}
+
+//promise
+function method2(){
+ return new Promise(resolve=>{
+ setTimeout(function(){
+ resolve();
+ //resolve成功调用一次之后，后面的不会再执行
+ resolve();
+ },1000);
+ })
+}
+```
+
+控制反转。体现在对于函数的把控，比如this等。
+
+```js
+//回调
+function method(cb){
+ setTimeout(function(){
+ cb && cb.call({a:1,b:2});//执行回调，但是添油加醋
+ },1000);
+}
+
+//promise
+function method2(){
+ return new Promise(resolve=>{
+ setTimeout(function(){
+ resolve();//调用的resolve都是自己写的，改善了控制反转的问题
+ },1000);
+ })
+}
+```
+
+### 手撕A+规范的promise
+
+> 面试题：你知道promise的A+规范吗？（本人在浩鲸科技被问到的，当时答的支支吾吾。。。）
+
+我何止是知道，我甚至可以手写一个符合A+规范的promise！
+
+A+规范快速入口，[点我](https://promisesaplus.com/)
+
+
+
+```js
+function MyPromise(executor) {
+ // 报错this的指向，后面可能会有回调函数，然后会隐式丢失啊之类的。
+ let self = this;
+ // 当前的状态（fulfilled/rejected/pending），默认值为pending
+ self.status = 'pending';
+ // 存储成功的值
+ self.value = null;
+ // 存储失败的值
+ self.reason = null;
+ function resolve(value) {
+ // 2.1.1规定只有在pending状态的时候才可以转变
+ if(self.status === 'pending') {
+ // 存下成功的值
+ self.value = value
+ self.status = 'fulfilled';
+ }
+ }
+ function reject(reason) {
+ // 2.1.1规定只有在pending状态的时候才可以转变
+ if(self.status === 'pending') {
+ // 存下失败的值
+ self.reason = reason
+ self.status = 'rejected';
+ }
+ }
+
+ executor(resolve, reject);
+}
+```
+
+promise里面最难的就是then了，我们必须将这个方法写在他的原型链上面，并且他接受两个参数，一个是成功的回调，一个是失败的回调。
+
+废话不多说，开冲！
+
+#### 支持异步
+
+在此之前，我们需要加两个变量。
+
+```js
+function MyPromise(executor) {
+ // 报错this的指向，后面可能会有回调函数，然后会隐式丢失啊之类的。
+ let self = this;
+ // 当前的状态（fulfilled/rejected/pending），默认值为pending
+ self.status = 'pending';
+ // 存储成功的值
+ self.value = null;
+ // 存储失败的值
+ self.reason = null;
+ // 存储成功的回调
+ self.onResolved = [];
+ // 存储失败的回调
+ self.onRejected = [];
+
+ function resolve(value) {
+ // 2.1.1规定只有在pending状态的时候才可以转变
+ if(self.status === 'pending') {
+ // 存下成功的值
+ self.value = value
+ self.status = 'fulfilled';
+ }
+ }
+
+ function reject(reason) {
+ // 2.1.1规定只有在pending状态的时候才可以转变
+ if(self.status === 'pending') {
+ // 存下失败的值
+ self.reason = reason
+ self.status = 'rejected';
+ }
+ }
+
+ executor(resolve, reject);
+}
+```
+
+颜值高又细心的同学会发现，我多加了两个变量。
+
+```js
+// 存储成功的回调
+self.onResolved = [];
+// 存储失败的回调
+self.onRejected = [];
+```
+
+这两个变量呢，也非常好理解，就是存储回调的。那么有一个非常非常重要的问题，我写的时候也困扰了好久，为什么一定要是一个数组呢？我存储为一个函数不行吗？到时候执行就行啦。。。
+
+qs，和我想一样的帅哥靓女可能比较多。这里我统一回复：
+
+假如说。以下的情况出现的话，咋办。
+
+```js
+var p = new Promise((resolve, reject)=>{
+ setTimeout(()=>{
+ resolve(4)
+ }, 1000)
+})
+p.then((res)=>{
+ //4 res
+ console.log(res, 'res')
+})
+p.then((res1)=>{
+ //4 res1
+ console.log(res1, 'res1')
+})
+```
+
+这种情况出现，如果我们只是一个函数，那么我们的`console.log(res, 'res')`这辈子都无法问世，为什么？因为被后门的`console.log(res1, 'res')`给覆盖了呀。对不对，如果说这个`resolve`他延迟执行，这个时候我们需要做的是把`then`函数给保存下来，等到`resolve`被执行的时候，依次执行我们所有创建的`then`里面的回调函数。
+
+听懂掌声！
+
+没听懂的接着往下看，我们把剩余工作做完，然后举一个例子。马上就能明白了。
+
+刚刚说到，我们补充两个变量，然后写下我们的`then`函数。
+
+```js
+MyPromise.prototype.then = function(onFulfilled, onRejected){
+ let self = this;
+ // 当前的状态（fulfilled/rejected/pending），默认值为pending
+ if(self.status === 'fulfilled') {
+ onFulfilled(self.value);
+ }
+ // 当前的状态（fulfilled/rejected/pending），默认值为pending
+ if(self.status === 'rejected') {
+ onRejected(self.reason);
+ }
+ // 如果是pending应该存储当前的回调函数
+ if(self.status === 'pending') {
+ self.onResolved.push(() => {onFulfilled(self.value)})
+ self.onRejected.push(() => {onRejected(self.reason)})
+ }
+}
+```
+
+然后我们还需要在`resolve`或者`reject`的时候执行我们存储起来的这些函数。
+
+完整代码如下：
+
+```js
+function MyPromise(executor) {
+ // 报错this的指向，后面可能会有回调函数，然后会隐式丢失啊之类的。
+ let self = this;
+ // 当前的状态（fulfilled/rejected/pending），默认值为pending
+ self.status = 'pending';
+ // 存储成功的值
+ self.value = null;
+ // 存储失败的值
+ self.reason = null;
+ // 存储成功的回调
+ self.onResolved = [];
+ // 存储失败的回调
+ self.onRejected = [];
+
+ function resolve(value) {
+ // 2.1.1规定只有在pending状态的时候才可以转变
+ if(self.status === 'pending') {
+ // 存下成功的值
+ self.value = value
+ self.status = 'fulfilled';
+ // 执行我们存储的函数;
+ self.onResolved.forEach(fn => fn())
+ }
+ }
+
+ function reject(reason) {
+ // 2.1.1规定只有在pending状态的时候才可以转变
+ if(self.status === 'pending') {
+ // 存下失败的值
+ self.reason = reason
+ self.status = 'rejected';
+ // 执行我们存储的函数;
+ self.onRejected.forEach(fn => fn())
+ }
+ }
+
+ executor(resolve, reject);
+}
+
+MyPromise.prototype.then = function(onFulfilled, onRejected){
+ let self = this;
+ // 当前的状态（fulfilled/rejected/pending），默认值为pending
+ if(self.status === 'fulfilled') {
+ onFulfilled(self.value);
+ }
+ // 当前的状态（fulfilled/rejected/pending），默认值为pending
+ if(self.status === 'rejected') {
+ onRejected(self.reason);
+ }
+ // 如果是pending应该存储当前的回调函数
+ if(self.status === 'pending') {
+ self.onResolved.push(() => {onFulfilled(self.value)})
+ self.onRejected.push(() => {onRejected(self.reason)})
+ }
+}
+```
+
+OK。我们先试试我们自己写的promise。跑一下demo吧。为了给懒同学便捷的调试，直接CV下面就好啦。
+
+```js
+function MyPromise(executor) {
+ // 报错this的指向，后面可能会有回调函数，然后会隐式丢失啊之类的。
+ let self = this;
+ // 当前的状态（fulfilled/rejected/pending），默认值为pending
+ self.status = 'pending';
+ // 存储成功的值
+ self.value = null;
+ // 存储失败的值
+ self.reason = null;
+ // 存储成功的回调
+ self.onResolved = [];
+ // 存储失败的回调
+ self.onRejected = [];
+
+ function resolve(value) {
+ // 2.1.1规定只有在pending状态的时候才可以转变
+ if(self.status === 'pending') {
+ // 存下成功的值
+ self.value = value
+ self.status = 'fulfilled';
+ // 执行我们存储的函数;
+ self.onResolved.forEach(fn => fn())
+ }
+ }
+
+ function reject(reason) {
+ // 2.1.1规定只有在pending状态的时候才可以转变
+ if(self.status === 'pending') {
+ // 存下失败的值
+ self.reason = reason
+ self.status = 'rejected';
+ // 执行我们存储的函数;
+ self.onRejected.forEach(fn => fn())
+ }
+ }
+
+ executor(resolve, reject);
+}
+
+MyPromise.prototype.then = function(onFulfilled, onRejected){
+ let self = this;
+ // 当前的状态（fulfilled/rejected/pending），默认值为pending
+ if(self.status === 'fulfilled') {
+ onFulfilled(self.value);
+ }
+ // 当前的状态（fulfilled/rejected/pending），默认值为pending
+ if(self.status === 'rejected') {
+ onRejected(self.reason);
+ }
+ // 如果是pending应该存储当前的回调函数
+ if(self.status === 'pending') {
+ self.onResolved.push(() => {
+ onFulfilled(self.value)
+ })
+ self.onRejected.push(() => {
+ onRejected(self.reason)
+ })
+ }
+}
+
+var p = new MyPromise((resolve, reject)=>{
+ setTimeout(()=>{
+ resolve(4)
+ }, 1000)
+})
+p.then((res)=>{
+ //4 res
+ console.log(res, 'res')
+})
+p.then((res1)=>{
+ //4 res1
+ console.log(res1, 'res1')
+})
+```
+
+嗯~如愿输出了，那回到刚刚的问题。我们把回调的地方不要用数组而用函数呢？不用同学们打字了，直接CV👇的代码就好了。
+
+```js
+function MyPromise(executor) {
+ // 报错this的指向，后面可能会有回调函数，然后会隐式丢失啊之类的。
+ let self = this;
+ // 当前的状态（fulfilled/rejected/pending），默认值为pending
+ self.status = 'pending';
+ // 存储成功的值
+ self.value = null;
+ // 存储失败的值
+ self.reason = null;
+ // 存储成功的回调
+ self.onResolved = [];
+ // 存储失败的回调
+ self.onRejected = [];
+
+ function resolve(value) {
+ // 2.1.1规定只有在pending状态的时候才可以转变
+ if(self.status === 'pending') {
+ // 存下成功的值
+ self.value = value
+ self.status = 'fulfilled';
+ // 执行我们存储的函数;
+ self.onResolved.forEach(fn => fn())
+ }
+ }
+
+ function reject(reason) {
+ // 2.1.1规定只有在pending状态的时候才可以转变
+ if(self.status === 'pending') {
+ // 存下失败的值
+ self.reason = reason
+ self.status = 'rejected';
+ // 执行我们存储的函数;
+ self.onRejected.forEach(fn => fn())
+ }
+ }
+
+ executor(resolve, reject);
+}
+
+MyPromise.prototype.then = function(onFulfilled, onRejected){
+ let self = this;
+ // 当前的状态（fulfilled/rejected/pending），默认值为pending
+ if(self.status === 'fulfilled') {
+ onFulfilled(self.value);
+ }
+ // 当前的状态（fulfilled/rejected/pending），默认值为pending
+ if(self.status === 'rejected') {
+ onRejected(self.reason);
+ }
+ // 如果是pending应该存储当前的回调函数
+ if(self.status === 'pending') {
+ self.onResolved.push(() => {
+ onFulfilled(self.value)
+ })
+ self.onRejected.push(() => {
+ onRejected(self.reason)
+ })
+ }
+}
+
+var p = new MyPromise((resolve, reject)=>{
+ setTimeout(()=>{
+ resolve(4)
+ }, 1000)
+})
+p.then((res)=>{
+ //4 res
+ console.log(res, 'res')
+})
+p.then((res1)=>{
+ //4 res1
+ console.log(res1, 'res1')
+})
+```
+
+是不是只有`console.log(res1, 'res1')`啦？因为执行`then`的时候，我们的resolve还有没有被调用，如果我们有多个`then`的话，我们需要把他们存储起来，然后依次调用。所以我们需要用到数组，当然也可以是别的方法，核心思想就是把他们存起来，在需要调用的时候调用。
+
+是不是很好理解？！！
+
+听懂掌声！
+
+而且A+也要求了。
+
+> `2.2.6:then` may be called multiple times on the same promise.
+>
+> （promise 的 `then` 可以链式调用多次）
+>
+> 2.2.6.1：If/when `promise` is fulfilled, all respective `onFulfilled` callbacks must execute in the order of their originating calls to `then`.
+>
+> （如果或当 promise 转态是 fulfilled 时，所有的 onFulfilled 回调回以他们注册时的顺序依次执行）
+>
+> 2.2.6.2：If/when `promise` is rejected, all respective `onRejected` callbacks must execute in the order of their originating calls to `then`.
+>
+> （如果或当 promise 转态是 rejected 时，所有的 onRejected 回调回以他们注册时的顺序依次执行）
+
+我们对promise的理解更进一步了。记得把代码改回去，继续往下走。
+
+刚刚我们的demo还不够鲁棒，而且我们的测试用例都是完美情况下。
+
+接下来要剑走偏锋了。
+
+> A+:
+>
+> 2.2.1：Both `onFulfilled` and `onRejected` are optional arguments:
+>
+> （onFulfilled 和 onRejected 都是可选参数：）
+>
+> 2.2.1.1 If `onFulfilled` is not a function, it must be ignored.
+>
+> （如果 onFulfilled 不是函数，它会被忽略）
+>
+> 2.2.1.2 If `onRejected` is not a function, it must be ignored.
+>
+> （如果 onRejected 不是函数，它会被忽略）
+>
+> 2.2.7.2: If either `onFulfilled` or `onRejected` throws an exception `e`, `promise2` must be rejected with `e` as the reason.
+>
+> （如果 onFulfilled 或 onRejected 里抛出了一个异常，那么 promise2 必须捕获这个错误（接受一个 reason 参数））
+
+所以我们首先要做的就是，把错误给提前捕获，然后丢给`reject`
+
+emmm....接下我贴代码都是一起贴了，因为我怕有同学会掉队，里面也会有相应的注释帮助会走神的同学跟紧这辆五菱宏光。
+
+```js
+function MyPromise(executor) {
+ // 报错this的指向，后面可能会有回调函数，然后会隐式丢失啊之类的。
+ let self = this;
+ // 当前的状态（fulfilled/rejected/pending），默认值为pending
+ self.status = 'pending';
+ // 存储成功的值
+ self.value = null;
+ // 存储失败的值
+ self.reason = null;
+ // 存储成功的回调
+ self.onResolved = [];
+ // 存储失败的回调
+ self.onRejected = [];
+
+ function resolve(value) {
+ // 2.1.1规定只有在pending状态的时候才可以转变
+ if(self.status === 'pending') {
+ // 存下成功的值
+ self.value = value
+ self.status = 'fulfilled';
+ // 执行我们存储的函数;
+ self.onResolved.forEach(fn => fn())
+ }
+ }
+
+ function reject(reason) {
+ // 2.1.1规定只有在pending状态的时候才可以转变
+ if(self.status === 'pending') {
+ // 存下失败的值
+ self.reason = reason
+ self.status = 'rejected';
+ // 执行我们存储的函数;
+ self.onRejected.forEach(fn => fn())
+ }
+ }
+ // 捕获错误传给reject。法律规定！
+ try{
+ executor(resolve, reject);
+ } catch(e) {
+ reject(e);
+ }
+}
+
+MyPromise.prototype.then = function(onFulfilled, onRejected){
+ let self = this;
+ // 当前的状态（fulfilled/rejected/pending），默认值为pending
+ // 如果不是函数就忽略 2.2.1.1
+ if(self.status === 'fulfilled') {
+ typeof onFulfilled === 'function' && onFulfilled(self.value);
+ }
+ // 当前的状态（fulfilled/rejected/pending），默认值为pending
+ if(self.status === 'rejected') {
+ typeof onFulfilled === 'function' && onRejected(self.reason);
+ }
+ // 如果是pending应该存储当前的回调函数
+ // 如果不是函数就忽略 2.2.1.2
+ if(self.status === 'pending') {
+ // 如果不是函数就忽略 2.2.1.1
+ typeof onFulfilled === 'function' && self.onResolved.push(() => {
+ onFulfilled(self.value)
+ })
+ // 如果不是函数就忽略 2.2.1.2
+ typeof onFulfilled === 'function' && self.onRejected.push(() => {
+ onRejected(self.reason)
+ })
+ }
+}
+```
+
+#### 链式调用then
+
+开始准备进入promise的难点以及核心点：链式调用。
+
+> 2.2.7：`then` must return a promise
+>
+> （then 方法一定返回一个 promise）
+
+我们需要返回新的promise的话，可以简单实现，快速迭代。
+
+```js
+Promise.prototype.then = function (onFulfilled, onRejected) {
+ let promise2 = new Promise((resolve, reject)=>{
+ })
+ return promise2
+}
+```
+
+> 2.2.7.1：If either `onFulfilled` or `onRejected` returns a value `x`, run the Promise Resolution Procedure `[[Resolve]](promise2, x)`.
+>
+> （如果 onFulfilled 或 onRejected 返回的是一个 x，那么它会以[[Resolve]](promise2, x)` 处理解析）
+>
+> 2.2.7.2：If either `onFulfilled` or `onRejected` throws an exception `e`, `promise2` must be rejected with `e` as the reason.
+>
+> （如果 onFulfilled 或 onRejected 里抛出了一个异常，那么 promise2 必须捕获这个错误（接受一个 reason 参数））
+>
+> 2.2.7.3：If `onFulfilled` is not a function and `promise1` is fulfilled, `promise2` must be fulfilled with the same value as `promise1`.
+>
+> （如果 onFulfilled 不是一个函数，并且 promise1 状态是 fulfilled，那么 promise2 一定会接受到与 promse1 一样的值 value）
+>
+> 2.2.7.4：If `onRejected` is not a function and `promise1` is rejected, `promise2` must be rejected with the same reason as `promise1`.
+>
+> （如果 onRejected 不是一个函数，并且 promise1 状态是 rejected，promise2 一定会接受到与 promise1 一样的值 reason）
+
+我们需要将返回内容promise化，需要对onFulfilled和onRejected进行错误处理，这个我们之前就处理过了，如果onFulfilled和onRejected没有传参就继续传递，原生🌰来：
+
+```js
+var p = new Promise(function(resolve, reject){
+ setTimeout(function(){
+ resolve(3)
+ }, 1000)
+});
+p.then(1,1)
+.then('','')
+.then()
+.then(function(res){
+ //3
+ console.log(res)
+})
+```
+
+这里不管onFulfilled和onRejected传什么值，只要不是函数，就继续向下传入，直到有函数进行接收；要做的事情太多了，不当当是判断函数这种简单的判断了，所以我们要抽离一个新的函数来复用统一处理。因此我们进行如下完善：
+
+```js
+function MyPromise(executor) {
+ // 报错this的指向，后面可能会有回调函数，然后会隐式丢失啊之类的。
+ let self = this;
+ // 当前的状态（fulfilled/rejected/pending），默认值为pending
+ self.status = 'pending';
+ // 存储成功的值
+ self.value = null;
+ // 存储失败的值
+ self.reason = null;
+ // 存储成功的回调
+ self.onResolved = [];
+ // 存储失败的回调
+ self.onRejected = [];
+
+ function resolve(value) {
+ // 2.1.1规定只有在pending状态的时候才可以转变
+ if(self.status === 'pending') {
+ // 存下成功的值
+ self.value = value
+ self.status = 'fulfilled';
+ // 执行我们存储的函数;
+ self.onResolved.forEach(fn => fn())
+ }
+ }
+
+ function reject(reason) {
+ // 2.1.1规定只有在pending状态的时候才可以转变
+ if(self.status === 'pending') {
+ // 存下失败的值
+ self.reason = reason
+ self.status = 'rejected';
+ // 执行我们存储的函数;
+ self.onRejected.forEach(fn => fn())
+ }
+ }
+ // 捕获错误传给reject。法律规定！
+ try{
+ executor(resolve, reject);
+ } catch(e) {
+ reject(e);
+ }
+}
+
+function resolvePromise(promise2, res, resolve, reject) {
+ // 如果promise2和结果相同，就自己无限循环调用自己的then了，死亡循环。
+ // 举个🌰：var a = function(){return a}，这个then又会自己无限触发。所以就玩完了。
+ if(promise2 === res) {
+ return reject(new TypeError('循环引用'))
+ }
+ if(
+ res !== null
+ && (typeof res === 'object') || typeof res === 'function')
+ ) {
+ try {
+ // 保存是否已经调用过函数。
+ // 2.3.3.3.3 If both resolvePromise and rejectPromise are called, or multiple calls to the same argument are made, the first call takes precedence, and any further calls are ignored.(如果 resolvePromise 和 rejectPromise 已经被调用或以相同的参数多次调用的话吗，优先第一次的调用，并且之后的调用全部被忽略（避免多次调用）)
+ let used = false;
+
+ // 2.3.3.1：Let then be x.then. [3.5](把 x.then 赋值给 then 变量)
+ // 可以提防有人恶搞。像👇
+ // Object.defineProperty(Promise, 'then', {
+ // get: function(){
+ // throw Error('error')
+ // }
+ // })
+ // 这样的话我们取值就会报错。
+ let then = res.then;
+ // 如果then是函数，就默认是promise了
+ if(typeof then === 'function') {
+ then.call(
+ res,
+ value => {
+ if(used) {
+ return;
+ }
+ used = true;
+ // 递归解析，直到不是一个promise为止
+ resolvePromise(promise2, value, resolve, reject);
+ },
+ reason => {
+ if(used) {
+ return;
+ }
+ used = true;
+ reject(reason);
+ }
+ )
+ }
+ } catch (e) {
+ if(used) {
+ return;
+ }
+ used = true;
+ reject(e);
+ }
+ } else {
+ // 如果不是函数或者对象也不为空就直接继续传递这个值。
+ resolve(res);
+ }
+}
+
+MyPromise.prototype.then = function(onFulfilled, onRejected){
+ let self = this;
+ // 只有promise才可以持续的链式调用then,所以这里弄了一个新的promise
+ let promise2 = new MyPromise((resolve, reject) => {
+ // 当前的状态（fulfilled/rejected/pending），默认值为pending
+ if(self.status === 'fulfilled') {
+ let res = onFulfilled(self.value);
+ resolvePromise(promise2, res, resolve, reject);
+ }
+ // 当前的状态（fulfilled/rejected/pending），默认值为pending
+ if(self.status === 'rejected') {
+ let res = onRejected(self.reason);
+ resolvePromise(promise2, res, resolve, reject);
+ }
+ // 如果是pending应该存储当前的回调函数
+ if(self.status === 'pending') {
+ self.onResolved.push(() => {
+ let res = onFulfilled(self.value);
+ resolvePromise(promise2, res, resolve, reject);
+ })
+ self.onRejected.push(() => {
+ let res = onRejected(self.reason);
+ resolvePromise(promise2, res, resolve, reject);
+ })
+ }
+ })
+}
+```
+
+以上就是符合 Promise/A+ 规范的实现了，如果你对于这部分代码尚有疑问，欢迎在评论中与我互动。
+
+## Generator
+
+> 面试题：介绍一下generator吧。
+
+很多小伙伴可能和我一样，只是会用，但是你硬要我介绍，那我咋搞？generator的拼写是g e n e r a t o r？
+
+“哔………………………………”
+
+其实我重温了一下阮老师的es6课程，发现可以从以下几个方面来介绍。
+
+- 形式上
+ - generator和普通的函数不同点在于，对一个`*`号，函数内部使用了yield表达式
+- 语法上
+ - Generator函数封装了多个内部状态(通过yield表达式定义内部状态)。执行Generator函数时会返回一个遍历器对象(Iterator对象)。也就是说，Generator是遍历器对象生成函数，函数内部封装了多个状态。通过返回的Iterator对象，可以依次遍历(调用next方法)Generator函数的每个内部状态。
+- 调用上
+ - 普通函数在调用之后会立即执行，而Generator函数调用之后不会立即执行，而是会返回遍历器对象(Iterator对象)。通过Iterator对象的next方法来遍历内部yield表达式定义的每一个状态。
+
+其实我觉得，如果能把下面的这个案例弄清楚，generator就算过关了。
+
+```js
+function *foo(x) {
+ let y = 2 * (yield (x + 1))
+ let z = yield (y / 3)
+ return (x + y + z)
+}
+let it = foo(5)
+console.log(it.next()) // => {value: 6, done: false}
+console.log(it.next(12)) // => {value: 8, done: false}
+console.log(it.next(13)) // => {value: 42, done: true}
+```
+
+- 首先 `Generator` 函数调用和普通函数不同，它会返回一个迭代器
+- 当执行第一次 `next` 时，传参会被忽略，并且函数暂停在 `yield (x + 1)` 处，所以返回 `5 + 1 = 6`
+- 当执行第二次 `next` 时，传入的参数等于上一个 `yield` 的返回值，如果你不传参，`yield` 永远返回 `undefined`。此时 `let y = 2 * 12`，所以第二个 `yield` 等于 `2 * 12 / 3 = 8`
+- 当执行第三次 `next` 时，传入的参数会传递给 `z`，所以 `z = 13, x = 5, y = 24`，相加等于 `42`
+
+## async/await
+
+> 什么是async/await？
+
+其实就一句话：**async 函数就是 Generator 函数的语法糖。**
+
+generator：
+
+```js
+var gen = function* (){
+ var f1 = yield readFile('/etc/fstab');
+ var f2 = yield readFile('/etc/shells');
+ console.log(f1.toString());
+ console.log(f2.toString());
+};
+```
+
+Async:
+
+```js
+var asyncReadFile = async function (){
+ var f1 = await readFile('/etc/fstab');
+ var f2 = await readFile('/etc/shells');
+ console.log(f1.toString());
+ console.log(f2.toString());
+};
+```
+
+一比较就会发现，async 函数就是将 Generator 函数的星号（*）替换成 async，将 yield 替换成 await，仅此而已。
+
+async对generator进行了以下三点的改进：
+
+1. **内置执行器。** Generator 函数的执行必须靠执行器，所以才有了 co 函数库，而 async 函数自带执行器。也就是说，async 函数的执行，与普通函数一模一样，只要一行。
+2. **更好的语义。** async 和 await，比起星号和 yield，语义更清楚了。async 表示函数里有异步操作，await 表示紧跟在后面的表达式需要等待结果。
+3. **更广的适用性。** co 函数库约定，yield 命令后面只能是 Thunk 函数或 Promise 对象，而 async 函数的 await 命令后面，可以跟 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。
+
+一个函数如果加上了async，那么就会默认返回一个promise
+
+```js
+async function fn(args){
+ // ...
+}
+
+// 等同于
+
+function fn(args){
+ return spawn(function*() {
+ // ...
+ });
+}
+```
+
+### 注意
+
+await 命令后面的 Promise 对象，运行结果可能是 rejected，所以最好把 await 命令放在 try...catch 代码块中。
+
+```js
+async function myFunction() {
+ try {
+ await somethingThatReturnsAPromise();
+ } catch (err) {
+ console.log(err);
+ }
+}
+
+// 另一种写法
+
+async function myFunction() {
+ await somethingThatReturnsAPromise().catch(function (err){
+ console.log(err);
+ });
+}
+```
+
+await 命令只能用在 async 函数之中，如果用在普通函数，就会报错。
+
+```js
+async function dbFuc(db) {
+ let docs = [{}, {}, {}];
+
+ // 报错
+ docs.forEach(function (doc) {
+ await db.post(doc);
+ });
+}
+
+```
+
+
+
+## Reference
+
+> https://es6.ruanyifeng.com/#docs/generator
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git "a/source/_posts/\343\200\220\351\207\215\350\257\206\345\211\215\347\253\257\343\200\221\346\267\261\345\205\245\345\206\205\345\255\230\344\270\226\347\225\214.md" "b/source/_posts/\343\200\220\351\207\215\350\257\206\345\211\215\347\253\257\343\200\221\346\267\261\345\205\245\345\206\205\345\255\230\344\270\226\347\225\214.md"
new file mode 100644
index 00000000..e326689e
--- /dev/null
+++ "b/source/_posts/\343\200\220\351\207\215\350\257\206\345\211\215\347\253\257\343\200\221\346\267\261\345\205\245\345\206\205\345\255\230\344\270\226\347\225\214.md"
@@ -0,0 +1,502 @@
+---
+title: 【重识前端】深入内存世界
+date: 2020-08-25 23:05:00
+tags: [JavaScript]
+category: [重拾前端]
+cover: /image/cover/web.jpeg
+---
+
+最近在写【重拾前端】系列，下面有几个快速通道，大家自取
+
+[【重识前端】原型/原型链和继承](https://juejin.im/post/6850418113944420359)
+
+[【重识前端】闭包与模块](https://juejin.im/post/6850418117508759566)
+
+[【重识前端】全面攻破this](https://juejin.im/post/6854573215658803208)
+
+[【重识前端】一次搞定JavaScript的执行机制](https://juejin.im/post/6859911609633767438)
+
+[【重识前端】什么是BFC、IFC、GFC 和 FFC](https://juejin.im/post/6860375101322461198)
+
+[【重识前端】深入内存世界](https://juejin.im/post/6865204092877144077)
+
+## 前言
+
+用于记录本人的学习过程，希望可以帮助到大家~🤠
+
+JavaScript有自动垃圾回收机制，可能因为这个自动让我们前端开发人员忽略了对他的认识（包括我自己），但是阿里的面试官可不会和你嘻嘻哈哈。
+
+“垃圾回收的机制是什么？什么时候会去触发”
+
+我一脸懵逼....啥...这个不是他自己运行的吗...🤕
+
+还是老规矩，黄金圈法则：
+
+### 为什么有垃圾回收♻️，或者说垃圾回收的作用是什么？
+
+计算机在启动一个程序的时候，会为他分配一块内存，用来存放代码、运行中的数据和一个执行任务的主线程。我们知道电脑的内存其实是有限的，比如常见的8G、16G等等，甚至还有一些什么虚拟内存就讨论了。我们关注点在于内存是一个种稀缺资源，对于不用的东西我们不要#占着茅坑不拉屎#。
+
+**所以垃圾回收的作用就是释放一下不再使用的内存空间。**
+
+### 内存的结构
+
+JavaScript中，分为两种内存空间
+
+- 堆内存->存储引用类型
+- 栈内存->存储基本类型
+
+> 基本类型又叫原始类型；因为本人已经说习惯了基本类型，所以以下都叫做基本类型哈。
+
+
+
+## 引用类型、基本类型与堆栈的爱恨纠葛
+
+### 变量存放
+
+#### 基本类型
+
+截止北京时间2020年8月25日；
+
+在[MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures)中显示的基本类型（原始类型）有以下7种
+
+- [Boolean](https://developer.mozilla.org/zh-CN/docs/Glossary/Boolean)
+- [Null](https://developer.mozilla.org/zh-CN/docs/Glossary/Null)
+- [Undefined](https://developer.mozilla.org/zh-CN/docs/Glossary/undefined)
+- [Number](https://developer.mozilla.org/zh-CN/docs/Glossary/Number)
+- [BigInt](https://developer.mozilla.org/zh-CN/docs/Glossary/BigInt)
+- [String](https://developer.mozilla.org/zh-CN/docs/Glossary/字符串)
+- [Symbol](https://developer.mozilla.org/zh-CN/docs/Glossary/Symbol)
+
+基本类型是存储在栈内存里面的。栈内存里面还存着指向堆内存的内存地址。
+
+> PS：闭包中，基本类型也是存放在堆内存中的哦，要注意一下。
+
+#### 引用类型
+
+除了基本类型的数据结构就是引用类型，包括什么数组（Array）、函数（Function）、对象（Object）之类的都是引用类型。
+
+引用类型和闭包的变量都是存储在堆内存中的。而指针或者说内存地址是存在栈内存的。
+
+> 当查询引用类型的变量时， 先从**栈中读取内存地址**， 然后再通过地址**找到堆中的值**。对于这种，我们把它叫做按引用访问。
+
+干说有点难理解。身为马良的我给大家画一幅画，帮助理解。
+
+```js
+var a = 123;
+var b = true;
+var c = null;
+var d = '123';
+var e = undefined;
+var f = Symbol();
+var g = 123n;
+var h = new Date();
+// 字太丑了。。。代码可以看这里
+```
+
+
+
+
+
+### 堆内存和栈内存的总结
+
+| **栈内存** | 堆内存 |
+| ---------------------------- | ---------------------------- |
+| 存储基础数据类型以及内存地址 | 存储引用数据类型以及闭包变量 |
+| 按值访问 | 按引用（内存地址）访问 |
+| 存储的值大小固定 | 存储的值大小不定，可动态调整 |
+| 由系统自动分配内存空间 | 由代码进行指定分配 |
+| 空间小，运行效率高 | 空间大，运行效率相对较低 |
+
+
+
+## 深拷贝、浅拷贝、赋值铁人三项的不解渊源
+
+### 赋值
+
+赋值分两种情况：
+
+1. 创建新值
+
+ ```js
+ var a = 123;
+ var b = [1, 2, 3];
+ ```
+
+ 这种就是赋新值的情况。
+
+2. 赋值已有的变量的值
+
+ 在上面的例子基础上修改一下。
+
+ ```js
+ var a = 123;
+ var b = [1, 2, 3];
+ var A = a;
+ var B = b;
+ ```
+
+ 这种情况就是赋值已有变量。
+
+👌，接下来来看一个例子，还是把👆的🌰修改一下
+
+```js
+var a = 123;
+var b = [1, 2, 3];
+var A = a;
+var B = b;
+
+A = 1234;
+console.log(a);
+console.log(A);
+B.push(4);
+console.log(b);
+console.log(B);
+```
+
+
+
+带🔥自己打开控制台，参与进来！看完之后然后再看看和自己的理解是不是一样，如果是一样的话，说明你很👍，不是的话就一起来看看👇的解释吧。
+
+我们观察之后发现，我们只修改了`B`但是，我们英俊的`b`也被修改了。
+
+？？？（脑补黑人问号脸）
+
+其实我们在开发过程中肯定是不希望这种情况的发生的，我们修改的只是`B`，不希望修改`b`的，不然我们肯定会写`b.push(4)`。
+
+这时就需要用到铁人三项的另外两个项目：浅拷贝和深拷贝。
+
+### 浅拷贝和深拷贝
+
+刚刚说到引用类型其实是放在堆内存中的，而栈内存里面只存指向堆内存的地址。（有点拗口....🧘♂️）
+
+浅拷贝浅拷贝，顾名思义。就是浅一点的拷贝，有多浅呢？
+
+一层那么浅。
+
+也就是说除了第一层的东西，第一层之外更深的层级就不是拷贝了，叫拿别人的地址。
+
+口说无凭，我弄个demo给大家🔥see see。
+
+
+
+可以很清晰，清晰的不能再清晰的看到，浅拷贝出来的对象里面的属性`b`其实还是指向之前的对象，之前说过，再深的他就不拷贝了，验证的话就交给大家了，毕竟我们是一个动手节目组！
+
+那么浅拷贝有哪些方法呢？
+
+1. Object.assign()
+2. es6的扩展运算符`{...xxx}`
+3. Array.prototype.slice()
+
+### 深拷贝
+
+看看我那个完美的图就已经知道了，深拷贝就是完美的弄一个一模一样的出来。
+
+帅哥帅哥，深拷贝有啥办法捏？
+
+1. JSON.parse(JSON.stringify(object))
+ 1. 会忽略 `undefined`
+ 2. 会忽略 `symbol`
+ 3. 不能序列化函数
+ 4. 不能解决循环引用的对象
+ 5. 不能正确处理`new Date()
+ 6. 不能处理正则
+2. 自己写一个递归然后疯狂浅拷贝....
+3. 终极方案：lodash的[`cloneDeep`](https://www.lodashjs.com/docs/lodash.cloneDeep)
+
+### 总结
+
+| | 和原数据是否指向同一对象 | 第一层数据为基本数据类型 | 原数据中包含子对象 |
+| ------ | ------------------------ | ------------------------ | ------------------------ |
+| 赋值 | 是 | 改变会使原数据一起改变 | 改变会使原数据一起改变 |
+| 浅拷贝 | 否 | 改变不会使原数据一起改变 | 改变会使原数据一起改变 |
+| 深拷贝 | 否 | 改变不会使原数据一起改变 | 改变不会使原数据一起改变 |
+
+ ## 垃圾回收机制♻️
+
+JavaScript有自动垃圾收集机制，垃圾收集器会每隔一段时间或者达到某个阈值就执行一次释放操作，找出那些不再继续使用的值，然后释放其占用的内存。
+
+### 判断方式
+
+JavaScript是怎么判断某个变量是否需要被回收的？
+
+有以下几个方法
+
+### 标记清除
+
+比如一个函数内部声明的一个变量，一旦我们的主线程离开了这个函数，那么这个函数声明的一些变量外部就无法用到，那么就会被标记为"离开环境"。这样在下一个垃圾回收周期来领的时候，就自动释放了这些变量占用的内存。
+
+### 引用计数
+
+另一种不太常见的垃圾收集策略叫做引用计数(reference counting)。引用计数的含义是跟踪记录每 个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是 1。 如果同一个值又被赋给另一个变量，则该值的引用次数加 1。相反，如果包含对这个值引用的变量又取 得了另外一个值，则这个值的引用次数减 1。当这个值的引用次数变成 0 时，则说明没有办法再访问这 个值了，因而就可以将其占用的内存空间回收回来。这样，当垃圾收集器下次再运行时，它就会释放那 些引用次数为零的值所占用的内存。
+
+引用计数有一个非常严重的BUG就是，如果存在循环引用的话，系统就无法判断你这个内存到底要不要回收了。而且引用的数字永远都不会是0。举个例子
+
+```js
+var element = document.getElementById("some_element");
+var myObject = new Object();
+myObject.element = element;
+element.someObject = myObject;
+```
+
+这样的话`element`和`myObject`这对情侣就永远如胶似漆，系统无法将他们送上天堂。
+
+那咋办？要拆散他们有一个主意，就是在不用的时候给他们置为`null`
+
+```js
+myObject.element = null;
+element.someObject = null;
+```
+
+将变量设置为 null 意味着切断变量与它此前引用的值之间的连接。当垃圾收集器下次运行时，就 会删除这些值并回收它们占用的内存。
+
+插播一个小故事
+
+> IE 的垃圾收集器是根据内存分配量运行的，具体 一点说就是 256 个变量、4096 个对象(或数组)字面量和数组元素(slot)或者 64KB 的字符串。达到 上述任何一个临界值，垃圾收集器就会运行。这种实现方式的问题在于，如果一个脚本中包含那么多变 量，那么该脚本很可能会在其生命周期中一直保有那么多的变量。而这样一来，垃圾收集器就不得不频 繁地运行。结果，由此引发的严重性能问题促使 IE7 重写了其垃圾收集例程。
+>
+> 随着 IE7 的发布，其 JavaScript 引擎的垃圾收集例程改变了工作方式:触发垃圾收集的变量分配、 字面量和(或)数组元素的临界值被调整为动态修正。IE7 中的各项临界值在初始时与 IE6 相等。如果 垃圾收集例程回收的内存分配量低于 15%，则变量、字面量和(或)数组元素的临界值就会加倍。如果 例程回收了 85%的内存分配量，则将各种临界值重置回默认值。这一看似简单的调整，极大地提升了 IE 在运行包含大量 JavaScript 的页面时的性能。
+>
+> ----摘自JavaScript高级程序设计
+
+## V8垃圾回收策略
+
+### 什么是V8？
+
+简单介绍一下什么是V8？
+
+> **V8**是一个由[Google](https://zh.wikipedia.org/wiki/Google)开发的[开源](https://zh.wikipedia.org/wiki/开源)[JavaScript引擎](https://zh.wikipedia.org/wiki/JavaScript引擎)，用于[Google Chrome](https://zh.wikipedia.org/wiki/Google_Chrome)及[Chromium](https://zh.wikipedia.org/wiki/Chromium)中[[2\]](https://zh.wikipedia.org/wiki/V8_(JavaScript引擎)#cite_note-comic-2)。
+>
+> ---摘自维基百科
+
+既然V8是Chrome的引擎，那么别的浏览器呢？
+
+世界上主要的浏览器有以下三种。
+
+[**V8**](https://en.wikipedia.org/wiki/V8_(JavaScript_engine))——开源，由 Google 开发，使用 C++ 编写
+
+**[SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey_(JavaScript_engine))**——第一个 JavaScript 引擎，该引擎过去驱动 Netscape Navigator，如今驱动 Firefox 浏览器。
+
+**[JavaScriptCore](https://en.wikipedia.org/wiki/JavaScriptCore)**——开源，苹果公司为 Safair 浏览器开发的
+
+
+
+okokok，收！回归初心。
+
+### V8的垃圾回收策略
+
+我们的伟大的Chrome，根据不同的情况有不同的对策。他把内存分成两块
+
+- 新生代
+- 老生代
+
+#### 分代内存
+
+默认情况下，32位系统新生代内存大小为16MB，老生代内存大小为700MB，64位系统下，新生代内存大小为32MB，老生代内存大小为1.4GB。
+
+新生代平均分成两块相等的内存空间，叫做semispace，每块内存大小8MB（32位）或16MB（64位）。
+
+
+
+#### 新生代算法
+
+首先，我们科普一下什么是新生代。
+
+新生代的内存呢，就是存活时间比较短的对象。如果存活的时间比较长的话就会《晋升》为老生代。等一下会稍微详细的说一下《晋升》这个概念。
+
+新生代采用**Scavenge GC**垃圾回收算法，在算法实现时主要采用**Cheney**算法。
+
+Cheney算法呢是将内存一分为二，一块暂时把他叫做《From》，另一块暂时叫做《To》。看一下下图，就可以很清晰的知道V8是怎么分割内存的。
+
+
+
+内存的到来先进入From，然后等到From满了之后，新生代的GC就会启动。
+
+首先释放掉一些不再使用的内存，然后将From和To两个功能进行更换，也就是说之前的From -> To 之前的 To -> From。这样的话新生代的一轮GC就此结束了。
+
+这种算法有点类似空间换时间，而新生代的对象生命一般都是比较短的，所以所以非常适合新生代。
+
+#### 晋升
+
+对象的晋升其实主要有两个要求，就好像在来P6升P7有一堆的要求一样。
+
+1. 新生代算法刚刚我们已经学习过了，就是From和To的互换功能。如果一个对象他经历了两次的新生代的更替，还没有被回收内存，说明他很强。就需要晋升为老生代，让老生代的算法来对付他。就好像在阿里的一个P6两轮361都没有被淘汰说明他很有实力，所以直接升级他为P7。
+2. 如果一个对象在To的内存占比超过了25%，在第一次更替的时候就直接将他晋升为老生代了。可以理解为一个技术大牛，像马云，一去阿里就被星探发现，直接就是P7评级，不需要经过什么复杂的面试或者什么。
+
+
+
+#### 老生代算法
+
+根据刚刚对《晋升》的了解，我们知道了在老生代里面的对象都是一些难缠的选手，比如本来就占内存比例很大，或者经历过2次的新生代GC，依旧坚挺的选手。
+
+所以，V8在老生代中主要采用了**Mark-Sweep**和**Mark-Compact**相结合的方式进行垃圾回收。
+
+在介绍老生代算法之前，先科普一下**Mark-Sweep**和**Mark-Compact**。
+
+##### **Mark-Sweep**
+
+Mark-Sweep是标记清除的意思，它分为标记和清除两个阶段。
+
+与Scavenge不同，Mark-Sweep并不会将内存分为两份，所以不存在浪费一半空间的行为。Mark-Sweep在标记阶段遍历堆内存中的所有对象，并标记活着的对象，在随后的清除阶段，只清除没有被标记的对象。
+
+也就是说，Scavenge只复制活着的对象，而Mark-Sweep只清除死了的对象。活对象在新生代中只占较少部分，死对象在老生代中只占较少部分，这就是两种回收方式都能高效处理的原因。
+
+> 在标记大型对内存时，可能需要几百毫秒才能完成一次标记。这就会导致一些性能上的问题。为了解决这个问题，2011 年，V8 从 stop-the-world 标记切换到增量标志。在增量标记期间，GC 将标记工作分解为更小的模块，可以让 JS 应用逻辑在模块间隙执行一会，从而不至于让应用出现停顿情况。但在 2018 年，GC 技术又有了一个重大突破，这项技术名为并发标记。该技术可以让 GC 扫描和标记对象时，同时允许 JS 运行，你可以点击 [该博客](https://v8project.blogspot.com/2018/06/concurrent-marking.html) 详细阅读。
+
+
+
+##### **Mark-Compact**
+
+在清除完对象后，这些对象在内存内部就不是连续的。这样内存地址就无法很好地利用起来，因为他们需要连续的内存，有的大的对象就无法塞入刚刚释放的小内存当中。
+
+而Mark-Compact就是用于解决内存碎片的问题，他主要干的活就是移动这些对象，让他们变成紧凑起来。
+
+清除对象后会造成堆内存出现碎片的情况，当碎片超过一定限制后会启动压缩算法。在压缩过程中，将活的对象像一端移动，直到所有对象都移动完成然后清理掉不需要的内存。
+
+##### 总结
+
+在V8的回收策略中，Mark-Sweep和Mark-Conpact两者是结合使用的。
+
+由于Mark-Conpact需要移动对象，所以它的执行速度不可能很快，在取舍上，V8主要使用Mark-Sweep，在空间不足以对从新生代中晋升过来的对象进行分配时，才使用Mark-Compact。
+
+
+
+## JavaScript内存泄漏
+
+### 什么是内存泄漏
+
+程序的运行需要内存。只要程序提出要求，操作系统或者运行时（runtime）就必须供给内存。
+
+对于持续运行的服务进程（daemon），必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。
+
+**不再用到的内存，没有及时释放，就叫做内存泄漏**（memory leak）。
+
+### 常见的内存泄漏
+
+1. 定时器未及时清除
+
+2. 意外的全局变量
+
+ ```js
+ function foo(arg) {
+ bar = "this is a hidden global variable"; // 意外挂在在 window 全局变量，导致内存泄漏
+ }
+ ```
+
+ 这里是想说一下高程（JavaScript高级程序设计第三版）里面的一个非常经典的demo。
+
+3. 闭包的滥用
+
+### WeakMap与WeakSet
+
+其实这两个在这篇文章里面的意义相同，只需要介绍一个就行。
+
+我们知道Map是简单的key-value。而且key可以为任意类型，比如引用类型，如果我们的key是引用类型那么他所占据的内存就无法被释放了。
+
+又有同学问题了，我有毛病啊，我非要引用类型吗？我string和number他不香吗？
+
+基本上，如果你要往对象上添加数据，又不想干扰垃圾回收机制，就可以使用 WeakMap。一个典型应用场景是，在网页的 DOM 元素上添加数据，就可以使用`WeakMap`结构。当该 DOM 元素被清除，其所对应的`WeakMap`记录就会自动被移除。
+
+```javascript
+const wm = new WeakMap();
+
+const element = document.getElementById('example');
+
+wm.set(element, 'some information');
+wm.get(element) // "some information"
+```
+
+上面代码中，先新建一个 Weakmap 实例。然后，将一个 DOM 节点作为键名存入该实例，并将一些附加信息作为键值，一起存放在 WeakMap 里面。这时，WeakMap 里面对`element`的引用就是弱引用，不会被计入垃圾回收机制。
+
+也就是说，上面的 DOM 节点对象的引用计数是`1`，而不是`2`。这时，一旦消除对该节点的引用，它占用的内存就会被垃圾回收机制释放。Weakmap 保存的这个键值对，也会自动消失。
+
+总之，`WeakMap`的专用场合就是，它的键所对应的对象，可能会在将来消失。`WeakMap`结构有助于防止内存泄漏。
+
+更多的知识就不讨论了，这里是内存世界！不是什么WeakMap专场哦。
+
+怎么验证？emmmmm....这里我copy一下阮一峰老师的内容。
+
+### 阮老师的demo
+
+首先，打开 Node 命令行。
+
+```bash
+$ node --expose-gc
+```
+
+上面代码中，`--expose-gc`参数表示允许手动执行垃圾回收机制。
+
+然后，执行下面的代码。
+
+```javascript
+// 手动执行一次垃圾回收，保证获取的内存使用状态准确
+> global.gc();
+undefined
+
+// 查看内存占用的初始状态，heapUsed 为 4M 左右
+> process.memoryUsage();
+{ rss: 21106688,
+ heapTotal: 7376896,
+ heapUsed: 4153936,
+ external: 9059 }
+
+> let wm = new WeakMap();
+undefined
+
+// 新建一个变量 key，指向一个 5*1024*1024 的数组
+> let key = new Array(5 * 1024 * 1024);
+undefined
+
+// 设置 WeakMap 实例的键名，也指向 key 数组
+// 这时，key 数组实际被引用了两次，
+// 变量 key 引用一次，WeakMap 的键名引用了第二次
+// 但是，WeakMap 是弱引用，对于引擎来说，引用计数还是1
+> wm.set(key, 1);
+WeakMap {}
+
+> global.gc();
+undefined
+
+// 这时内存占用 heapUsed 增加到 45M 了
+> process.memoryUsage();
+{ rss: 67538944,
+ heapTotal: 7376896,
+ heapUsed: 45782816,
+ external: 8945 }
+
+// 清除变量 key 对数组的引用，
+// 但没有手动清除 WeakMap 实例的键名对数组的引用
+> key = null;
+null
+
+// 再次执行垃圾回收
+> global.gc();
+undefined
+
+// 内存占用 heapUsed 变回 4M 左右，
+// 可以看到 WeakMap 的键名引用没有阻止 gc 对内存的回收
+> process.memoryUsage();
+{ rss: 20639744,
+ heapTotal: 8425472,
+ heapUsed: 3979792,
+ external: 8956 }
+```
+
+上面代码中，只要外部的引用消失，WeakMap 内部的引用，就会自动被垃圾回收清除。由此可见，有了 WeakMap 的帮助，解决内存泄漏就会简单很多。
+
+## 看完几件事
+
+如果你觉得对你有帮助，就帮我点个赞吧，也算是对我的肯定。谢谢，如果有错误的地方欢迎大家指出来。一起讨论学习。我是Derrick，一名正在去阿里路上的前端开发工程师。
+
+## reference
+
+> [https://muyiy.cn/blog/1/1.3.html#%E6%A0%88%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84](https://muyiy.cn/blog/1/1.3.html#栈数据结构)
+>
+> http://www.ruanyifeng.com/blog/2017/04/memory-leak.html
+>
+> https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map
+>
+> https://juejin.im/post/6844903615300108302
+>
+> https://juejin.im/post/6844903591510016007
+>
+> JavaScript高级程序设计（第三版）
+
diff --git "a/source/_posts/\343\200\220\351\207\215\350\257\206\345\211\215\347\253\257\343\200\221\351\227\255\345\214\205\344\270\216\346\250\241\345\235\227.md" "b/source/_posts/\343\200\220\351\207\215\350\257\206\345\211\215\347\253\257\343\200\221\351\227\255\345\214\205\344\270\216\346\250\241\345\235\227.md"
new file mode 100644
index 00000000..02c17653
--- /dev/null
+++ "b/source/_posts/\343\200\220\351\207\215\350\257\206\345\211\215\347\253\257\343\200\221\351\227\255\345\214\205\344\270\216\346\250\241\345\235\227.md"
@@ -0,0 +1,613 @@
+---
+title: 【重识前端】闭包与模块
+date: 2020-07-15 18:18:21
+tags: [闭包, JavaScript, 模块]
+category: [重拾前端]
+cover: /image/cover/web.jpeg
+---
+
+
+最近在写【重拾前端】系列，下面有几个快速通道，大家自取
+
+[【重识前端】原型/原型链和继承](https://juejin.im/post/6850418113944420359)
+
+[【重识前端】闭包与模块](https://juejin.im/post/6850418117508759566)
+
+[【重识前端】全面攻破this](https://juejin.im/post/6854573215658803208)
+
+[【重识前端】一次搞定JavaScript的执行机制](https://juejin.im/post/6859911609633767438)
+
+[【重识前端】什么是BFC、IFC、GFC 和 FFC](https://juejin.im/post/6860375101322461198)
+
+[【重识前端】深入内存世界](https://juejin.im/post/6865204092877144077)
+
+## 前言
+
+回忆我前几年的时光，大量使用 JavaScript 但却完全不理解闭包是什么。总是感觉这门语 言有其隐蔽的一面，如果能够掌握将会功力大涨，但讽刺的是我始终无法掌握其中的门 道。
+
+> JavaScript中闭包无处不在，你只需要能够识别并拥抱它。
+>
+> 最后你恍然大悟:原来在我的代码中已经到处都是闭包了，现在我终于能理解它们了。理 解闭包就好像 Neo3 第一次见到矩阵 4 一样。
+
+## 定义
+
+当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用 域之外执行。
+
+```js
+function foo() {
+ var a = 2;
+ function bar() {
+ console.log( a ); // 2
+ }
+ bar();
+}
+foo();
+```
+
+这样可能还不够直观，我们再修改一下。
+
+```js
+function foo() {
+ var a = 2;
+ function bar() {
+ console.log( a ); // 2
+ }
+ return bar;
+}
+var baz = foo();
+baz(); // 2 —— 朋友，这就是闭包的效果。
+```
+
+其实，在正常情况下，我们调用完`foo`之后，JavaScript检测到后续不会再用到他了， 所以他的内部作用域就会被回收♻️。（涉及到垃圾回收机制，后续的文章我们会说到。）
+
+闭包的神奇之处就在于他可以阻止♻️的发生。因为事实上内部作用域已然存在，那么又有谁在使用呢？哦~是我们的`bar`在使用。
+
+拜 bar() 所声明的位置所赐，它拥有涵盖 foo() 内部作用域的闭包，使得该作用域能够一 直存活，以供 bar() 在之后任何时间进行引用。
+
+bar() 依然持有对该作用域的引用，而这个引用就叫作闭包。
+
+所以我说说我自己的理解：
+
+闭包是一个运行时的概念，如果只是声明或者定义。即使他符合闭包的要求那他也不能成为一个真正的闭包。为什么？因为内存地址并没有开始分配，闭包只是分配之后那一块地址没有被回收而已。
+
+再回到我们最开始的函数：
+
+```js
+function foo() {
+ var a = 2;
+ function bar() {
+ console.log( a ); // 2
+ }
+ bar();
+}
+foo();
+```
+
+一个函数foo内有一个函数bar。并且函数bar用到了函数foo的变量。那么我们就可以称这个引用过程为“闭包”。但是我们这个函数foo必须被调用，所以我们的例子地下调用了一下函数foo。
+
+再回到我们那个较为清晰的例子
+
+```js
+function foo() {
+ var a = 2;
+ function bar() {
+ console.log( a ); // 2
+ }
+ return bar;
+}
+var baz = foo();
+baz(); // 2 —— 朋友，这就是闭包的效果。
+```
+
+这个应该是大众认知上非常经典的一个闭包了吧？但是假如说这个foo函数没有被调用，那么我认为他就不是一个闭包。
+
+## 实践
+
+### 常见的闭包
+
+前面的代码片段有点死板，并且为了解释如何使用闭包而人为地在结构上进行了修饰。你已经写过的代码中一定到处都是闭包的身影。 现在让我们来搞懂这个事实。
+
+```js
+function wait(message) {
+ setTimeout(
+ function timer() {
+ console.log( message );
+ }, 1000 );
+}
+wait( "Hello, closure!" );
+```
+
+这个例子非常常见，代码很简单，就是1秒钟之后输出我们传入的参数。
+
+但是我们仔细看就能看见闭包的影子，一秒钟之后，`message`还是可以被`timer`访问到。并没有被回收♻️掉。
+
+> 这就是闭包
+
+本质上无论何时何地，如果将函数(访问它们各自的词法作用域)当作第一 级的值类型并到处传递，你就会看到闭包在这些函数中的应用。在定时器、事件监听器、 Ajax 请求、跨窗口通信、Web Workers 或者任何其他的异步(或者同步)任务中，只要使 用了回调函数，实际上就是在使用闭包!
+
+### 闭包与循环
+
+说到这里肯定有人马上就想到了最经典的面试题：请写出以下的输出内容
+
+```js
+for (var i=1; i<=5; i++) {
+ setTimeout( function timer() {
+ console.log( i );
+ }, i*1000 );
+}
+```
+
+正常情况下，我们对这段代码行为的预期是分别输出数字 1~5，每秒一次，每次一个。
+
+但实际上，这段代码在运行时会以每秒一次的频率输出五次 6。
+
+这是为什么?
+
+因为等到执行`console.log`的时候，那个时候的i已经在for的调教下变成了6了，所以他们去取只能取到6；
+
+（事实上， 当定时器运行时即使每个迭代中执行的是setTimeout(.., 0)，所有的回调函数依然是在循 环结束后才会被执行，因此会每次输出一个 6 出来。这个涉及到时间循环，后面的文章会具体的展开来讲）
+
+通过我们刚刚的学习知道，如果我们创造了一个闭包，这样的话这个i不就不会被回收了吗？
+
+ok，我们试试
+
+```js
+for (var i=1; i<=5; i++) {
+ (function() {
+ setTimeout( function timer() {
+ console.log( i );
+ }, i*1000 );
+ })();
+}
+
+```
+
+这样能行吗?试试吧，在Chrome或者node里面试试吧，我等着你。
+
+我不卖关子了。这样不行。但是为什么呢?我们现在显然拥有更多的词法作用域了。的确 每个延迟函数都会将 IIFE 在每次迭代中创建的作用域封闭起来。
+
+如果作用域是空的，那么仅仅将它们进行封闭是不够的。仔细看一下，我们的 IIFE 只是一 个什么都没有的空作用域。它需要包含一点实质内容才能为我们所用。
+
+它需要有自己的变量，用来在每个迭代中储存 i 的值
+
+```js
+
+for (var i=1; i<=5; i++) {
+ (function() {
+ var j = i;
+ setTimeout( function timer() {
+ console.log( j );
+ },j *1000 );
+ })();
+}
+```
+
+行了!它能正常工作了!。
+
+可以对这段代码进行一些改进:
+
+```js
+for (var i=1; i<=5; i++) {
+ (function(j) {
+ setTimeout( function timer() {
+ console.log( j );
+ },j *1000 );
+ })(i);
+}
+```
+
+当然，这些 IIFE 也不过就是函数，因此我们可以将 i 传递进去，如果愿意的话可以将变量
+
+名定为 j，当然也可以还叫作 i。无论如何这段代码现在可以工作了。
+ 在迭代内使用 IIFE 会为每个迭代都生成一个新的作用域，使得延迟函数的回调可以将新的
+
+作用域封闭在每个迭代内部，每个迭代中都会含有一个具有正确值的变量供我们访问。 问题解决啦!
+
+当然了，肯定有用块级作用域`let`的，那样其实是更完美的。
+
+```js
+for (let i=1; i<=5; i++) {
+ setTimeout( function timer() {
+ console.log( i );
+ },1000 );
+}
+```
+
+### 闭包与模块
+
+很早之前，我们引用的js文件内部的变量其实都是挂载在window上面的，久而久之变量名很可能会重复=>覆盖=>BUG=>难以追寻的BUG
+
+所以很需要模块的这个概念来解决。
+
+模块的发展我分为三块：上古时代，近现代，现代
+
+#### 上古时代的模块
+
+闭包最强大的功能=>《模块》
+
+看个例子
+
+```js
+function a(){
+ var q = 1;
+ var w = [1, 2];
+
+ function getQ(){
+ console.log(q)
+ }
+
+ function getW(){
+ console.log(w)
+ }
+ return {
+ getQ: getQ,
+ getW: getW,
+ }
+}
+
+var f = a();
+f.getQ(); // 1
+f.getW(); // [1, 2]
+```
+
+我们仔细的剖析一下这段代码， `a`是一个函数，我们用a创建了一个模块实例。注意一下：如果不执行 `getQ` 或者 `getW` 这个闭包就无法创建，因为在函数a内部的getQ和getW都只是对变量q和变了w的引用声明；没有实实在在的调用就没有创建作用域，也没有开辟内存空间。
+
+引用一句《你不知道的JavaScript-上》中的一句话：
+
+> 如果不执行 外部函数，内部作用域和闭包都无法被创建。
+
+其次，a() 返回一个用对象字面量语法 { key: value, ... } 来表示的对象。这 个返回的对象中含有对内部函数而不是内部数据变量的引用。我们保持内部数据变量是隐 藏且私有的状态。可以将这个对象类型的返回值看作本质上是模块的公共 API。
+
+这个对象类型的返回值最终被赋值给外部的变量 f，然后就可以通过它来访问 API 中的 属性方法，比如 f.getW()。
+
+> 从模块中返回一个实际的对象并不是必须的，也可以直接返回一个内部函 数。jQuery 就是一个很好的例子。jQuery 和 $ 标识符就是 jQuery 模块的公 共 API，但它们本身都是函数(由于函数也是对象，它们本身也可以拥有属 性)。
+
+其实我们这样每次调用一次`a函数`相当于创建了一个新的模块实例。
+
+假如，此时我们希望只要一个实例，那咋办呢？
+
+天降猛男----IIFE（立即执行函数）
+
+=》
+
+```js
+var f = (function a(){
+ var q = 1;
+ var w = [1, 2];
+
+ function getQ(){
+ console.log(q)
+ }
+
+ function getW(){
+ console.log(w)
+ }
+ return {
+ getQ: getQ,
+ getW: getW,
+ }
+})();
+
+f.getQ(); // 1
+f.getW(); // [1, 2]
+```
+
+这个模块只属于f一个人，要修改只能找f帮忙了。
+
+既然模块也是一个函数，那是不是也可以传参呀？
+
+是的，稍作修改就好了。
+
+```js
+function a(id){
+ var q = 1;
+ var w = [1, 2];
+
+ function getQ(){
+ console.log(q)
+ }
+
+ function getW(){
+ console.log(w)
+ }
+
+ function getId(){
+ console.log(id)
+ }
+ return {
+ getQ: getQ,
+ getW: getW,
+ getId: getId,
+ }
+}
+
+var f = a(99);
+f.getQ(); // 1
+f.getW(); // [1, 2]
+f.getId(); // 99
+```
+
+那我想修改模块内部的东西咋办捏？
+
+安排！
+
+```js
+function a(id){
+ var q = 1;
+ var w = [1, 2];
+
+ function getQ(){
+ console.log(q)
+ }
+
+ function getW(){
+ console.log(w)
+ }
+
+ function getId(){
+ console.log(id)
+ }
+
+ function change(){
+ q = q + 1
+ }
+ return {
+ getQ: getQ,
+ getW: getW,
+ getId: getId,
+ change: change,
+ }
+}
+
+var f = a(99);
+f.getQ(); // 1
+f.getW(); // [1, 2]
+f.getId(); // 99
+f.change(); // 99
+f.getQ(); // 2
+```
+
+通过在模块实例的内部保留对公共 API 对象的内部引用，可以从内部对模块实例进行修 改，包括添加或删除方法和属性，以及修改它们的值。
+
+#### 近现代的模块
+
+##### AMD（很少用到了）
+
+AMD 即Asynchronous Module Definition，中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范
+
+由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数，也就是大名鼎鼎RequireJS，实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出
+
+requireJS主要解决两个问题
+
+1、多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器
+2、js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长
+看一个使用requireJS的例子
+
+```js
+/*
+
+* a.js
+
+* 创建一个名为“a”的模块
+
+*/
+
+
+
+define('a', function(require, exports, module) {
+
+ exports.getTime = function() {
+
+ return new Date();
+
+ }
+
+});
+
+
+
+/*
+
+* b.js
+
+* 创建一个名为“b”的模块，同时使用依赖require、exports和名为“a”的模块：
+
+*/
+
+define('b', ['require', 'exports', 'a'], function(require, exports, a) { exports.test = function() {
+
+ return {
+
+ now: a.getTime()
+
+ };
+
+ }
+
+});
+
+
+
+/* main.js */
+
+require(['b'], function(b) {
+
+ console.log(b.test());
+
+});
+```
+
+**语法**
+
+requireJS定义了一个函数 define，它是全局变量，用来定义模块
+
+define(id?, dependencies?, factory);
+
+1. id：可选参数，用来定义模块的标识，如果没有提供该参数，脚本文件名（去掉拓展名）
+2. dependencies：是一个当前模块依赖的模块名称数组
+3. factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值
+ 在页面上使用require函数加载模块
+
+require([dependencies], function(){});
+require()函数接受两个参数
+
+1. 第一个参数是一个数组，表示所依赖的模块
+2. 第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块
+
+require()函数在加载依赖的函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。
+
+##### CMD（很少用到了）
+
+CMD 即Common Module Definition通用模块定义，CMD规范是国内发展出来的，就像AMD有个requireJS，CMD有个浏览器的实现SeaJS，SeaJS要解决的问题和requireJS一样，只不过在模块定义方式和模块加载（可以说运行、解析）时机上有所不同
+**语法**
+Sea.js 推崇一个模块一个文件，遵循统一的写法
+define(id?, deps?, factory)
+因为CMD推崇
+
+1. 一个文件一个模块，所以经常就用文件名作为模块id
+2. CMD推崇依赖就近，所以一般不在define的参数中写依赖，在factory中写
+
+factory是一个函数，有三个参数，function(require, exports, module)
+
+1. require 是一个方法，接受 模块标识 作为唯一参数，用来获取其他模块提供的接口：require(id)
+2. exports 是一个对象，用来向外提供模块接口
+3. module 是一个对象，上面存储了与当前模块相关联的一些属性和方法
+
+看个例子：
+
+```js
+/*
+
+* a.js
+
+* 一个文件就是一个模块
+
+*/
+
+define(function(require, exports, module) {
+
+ exports.getTime = function() {
+
+ return new Date();
+
+ }
+
+});
+
+
+
+/* main.js */
+
+define(function(require, exports, module) {
+
+ /* 按需加载a.js */
+
+ var a = require('./a');
+
+ console.log(a.getTime());
+
+});
+```
+
+##### AMD和CMD的区别
+
+最明显的区别就是在模块定义时对依赖的处理不同
+
+**1、AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块**
+**2、CMD推崇就近依赖，只有在用到某个模块的时候再去require**
+这种区别各有优劣，只是语法上的差距，而且requireJS和SeaJS都支持对方的写法
+
+AMD和CMD最大的区别是对依赖模块的执行时机处理不同，注意不是加载的时机或者方式不同
+
+很多人说requireJS是异步加载模块，SeaJS是同步加载模块，这么理解实际上是不准确的，其实加载模块都是异步的，只不过AMD依赖前置，js可以方便知道依赖模块是谁，立即加载，而CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块，这也是很多人诟病CMD的一点，牺牲性能来带来开发的便利性，实际上解析模块用的时间短到可以忽略
+
+为什么我们说两个的区别是依赖模块执行时机不同，为什么很多人认为ADM是异步的，CMD是同步的（除了名字的原因。。。）
+
+同样都是异步加载模块，AMD在加载模块完成后就会执行改模块，所有模块都加载执行完后会进入require的回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写顺序不一定一致，看网络速度，哪个先下载下来，哪个先执行，但是主逻辑一定在所有依赖加载完成后才执行
+
+CMD加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块，这样模块的执行顺序和书写顺序是完全一致的
+
+这也是很多人说AMD用户体验好，因为没有延迟，依赖模块提前执行了，CMD性能好，因为只有用户需要的时候才执行的原因
+
+
+
+#### 现代的模块
+
+##### CommonJS
+
+CommonJS 最早是 Node 在使用，目前也仍然广泛使用，比如在 Webpack 中你就能见到它，当然目前在 Node 中的模块管理已经和 CommonJS 有一些区别了。
+
+```js
+// a.js
+module.exports = {
+ a: 1
+}
+// or
+exports.a = 1
+
+// b.js
+var module = require('./a.js')
+module.a // -> log 1
+```
+
+因为 CommonJS 还是会使用到的，所以这里会对一些疑难点进行解析
+
+先说 `require` 吧
+
+```js
+var module = require('./a.js')
+module.a
+// 这里其实就是包装了一层立即执行函数，这样就不会污染全局变量了，
+// 重要的是 module 这里，module 是 Node 独有的一个变量
+module.exports = {
+ a: 1
+}
+// module 基本实现
+var module = {
+ id: 'xxxx', // 我总得知道怎么去找到他吧
+ exports: {} // exports 就是个空对象
+}
+// 这个是为什么 exports 和 module.exports 用法相似的原因
+var exports = module.exports
+var load = function (module) {
+ // 导出的东西
+ var a = 1
+ module.exports = a
+ return module.exports
+};
+// 然后当我 require 的时候去找到独特的
+// id，然后将要使用的东西用立即执行函数包装下，over
+```
+
+另外虽然 `exports` 和 `module.exports` 用法相似，但是不能对 `exports` 直接赋值。因为 `var exports = module.exports` 这句代码表明了 `exports` 和 `module.exports` 享有相同地址，通过改变对象的属性值会对两者都起效，但是如果直接对 `exports` 赋值就会导致两者不再指向同一个内存地址，修改并不会对 `module.exports` 起效。
+
+##### ES Module
+
+ES Module 是原生实现的模块化方案，与 CommonJS 有以下几个区别
+
+- CommonJS 支持动态导入，也就是 `require(${path}/xx.js)`，后者目前不支持，但是已有提案
+- CommonJS 是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响
+- CommonJS 在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。但是 ES Module 采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化
+- ES Module 会编译成 `require/exports` 来执行的
+
+```js
+// 引入模块 API
+import XXX from './a.js'
+import { XXX } from './a.js'
+// 导出模块 API
+export function a() {}
+export default function() {}
+```
+
+## 总结
+
+当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时 就产生了闭包。
+
+
+
+> 索引：https://juejin.im/post/5a422b036fb9a045211ef789
+
+
+
+
+
diff --git "a/source/_posts/\343\200\220\351\235\242\347\273\217\343\200\2212\345\271\264\345\211\215\347\253\257\346\235\255\345\267\236\351\235\242\350\257\225\351\233\206\345\220\210.md" "b/source/_posts/\343\200\220\351\235\242\347\273\217\343\200\2212\345\271\264\345\211\215\347\253\257\346\235\255\345\267\236\351\235\242\350\257\225\351\233\206\345\220\210.md"
new file mode 100644
index 00000000..803eb833
--- /dev/null
+++ "b/source/_posts/\343\200\220\351\235\242\347\273\217\343\200\2212\345\271\264\345\211\215\347\253\257\346\235\255\345\267\236\351\235\242\350\257\225\351\233\206\345\220\210.md"
@@ -0,0 +1,259 @@
+---
+title: 【面经】2年前端杭州面试集合
+date: 2020-10-28 21:53:09
+tags: [面经]
+categories: [面经]
+cover: /image/cover/bg.jpg
+---
+
+# 前言
+
+说一点废话吧，算是吐槽。
+
+现在杭州的氛围很怪，双休都可以拿出来吹的那种。唉，不过虽然是疫情，前端的岗位还是蛮多的，我基本上一天2个面试。在未来科技城和滨江两头跑。不过现在已经入职啦。
+
+# 公司列表
+
+- 安恒科技 -> 挂在4面副总裁。
+ - 看了知乎上面的评价然后去面的副总裁，发现加班严重，然后期望薪资开的比较高，而且副总裁期间一直在摆弄手机不知道是不是比较忙，场面经常冷静好一会。
+- 博圣生物 -> offer，但是薪资开的比较低，所以没去
+- 数秦科技 -> 已经入职啦
+- 火石创造 -> 挂在HR那边了，估计是我跳槽比较频繁，而且那天很晚过去的，人很疲惫没什么精神，HR还问我平常是不是也是这样没精神....尴尬
+- 博联智能 -> 后面发现前端团队只有一个人，而且面试官好像工作没多久。。。全是网上的题目，二面就没去了
+- 婚礼纪 -> 挂在2面，前端leader觉得我node不太熟悉，广度不够....
+- 数立信息 -> 挂在二面，不知道具体哪里不行....我感觉我都答上来了...
+- 阿里零售事业部 -> 一面就挂了，那个时候刚刚坐动车到杭州，确实也没怎么准备，很可惜！
+- 光云科技 -> 我期望开的太高了....然后挂在了HR
+
+# 面经
+
+## 阿里-零售部
+
+### 1面
+
+1. jsbridge的原理
+2. 跨域的场景你用到那些？
+3. jsonp的原理，jsonp怎么用
+4. 有数据相关的吗？比如PV，UV
+5. px to rem的原理能说一下吗？
+6. 具体怎么算的可以说一下吗？
+7. onClick是什么时候执行的？
+8. 如果我写了一个addListener，然后又写了onCLick，这个时候点击一下会发生什么事情？
+9. 前端性能优化
+10. happypack原理
+11. react的虚拟DOM算法
+
+## 安恒科技
+
+### 1面
+
+1. 类组件和函数式组件的区别，或者说一下你使用最直接的感受，以及他们的优缺点
+2. 有试过自己封装Hook吗？
+3. 改变this指向的方式除了bind以及箭头函数还有哪些？
+4. 为什么React中onClick在点击的时候会执行？
+5. React中key的作用
+6. React Fiber你了解吗？
+7. 说一下虚拟DOM的优缺点
+8. 开发中用到Redux是自己封装的吗？
+9. React类组件的extends和createElement有什么区别吗？
+10. 组件名字首字母为什么一定要大写？
+11. ES5中判断数组有什么方式？
+12. 怎么样并发请求？
+13. 前端性能优化
+14. 有用过Typescript吗？介绍一下你平常常用的
+15. 工作中遇到最难的问题
+16. 平常是怎么学习的
+
+### 2面
+
+本来要面试我的二面的面试官零时有事，这个是隔壁组的leader。。
+
+1. 封装一个网络请求是怎么封装的，要达到什么样的效果（因为我简历写了
+2. 说一下你封装表单组件的想法（也是简历。。。
+3. 说一下你的鉴权思路（也是简历
+4. 现在Typescript有用吗？你觉得自己Typescript用的怎么样？
+5. 说一下React最新的生命周期
+6. 有写过Redux的中间件吗？
+7. 说一下React Fiber做了一件什么事情
+
+### 3面
+
+忘记录音了。。。靠记忆力想想
+
+1. 说一下事件循环
+2. 我们写的onClick是事件捕获吗？和事件冒泡的顺序是怎么样的
+3. CSS的权重
+4. 对于跨域你是怎看待的
+5. 说一下你对JavaScript内存的理解
+6. 介绍一下Promise吧
+7. 输入URL到页面渲染发生了什么
+8. 平常是怎么学习的？
+
+题目太宽泛了。。。考察知识深度。。
+
+### 4面
+
+1. 为什么从上家公司离职
+2. 说一下你对加班的理解
+3. 对未来的规划
+
+## 博圣生物
+
+### 1面
+
+1. 离职原因
+2. 项目中印象中比较深刻的
+3. 对于移动端的适配
+4. 高清屏1px的兼容，高清屏变粗问题
+ 1. 要精确到每一行。。。
+5. 说一下防抖节流的原理
+6. JS拖拽原理
+7. 说一下flex的每个属性对应的意思
+8. CSS水平垂直居中
+9. 有自己写过webpack loader和plugin吗？他们的原理和区别
+
+### 2面
+
+1. React源码有读过吗？
+2. Fiber是怎么做调度的，js不是单线程吗？是怎么打断计算的？
+3. 说一下你平常用的Hooks吧
+4. 介绍前端性能优化
+5. 对于前端代码攻击你了解哪些？
+6. cookie的存储有哪些新的属性
+7. Http2有哪些新功能
+8. http和https有什么区别
+9. 介绍一下非对称加密
+10. JavaScript继承熟悉吗？有哪些方式？
+
+### 3面HR
+
+上来就源码我以为我要凉了，不过后面都有复习到，算是扳回一城。谈薪。
+
+## 火石创造
+
+是一家前端主导的团队，前端人超级多
+
+### 1面
+
+1. 说一下移动端适配的原理
+2. 说一下前端性能优化
+3. 平常对于跨域是怎么做的
+4. webpack的plugin有做过吗？
+5. JS的继承
+6. 看你有封装过echarts，你是怎么封装的
+7. Vue和React的区别
+8. 说一下CSS动画
+9. 说一下key在React和Vue中的作用，如果没有会怎么样？会有什么问题，具体
+10. RN有做过吗？Taro呢？
+11. 现在我有一个数组，我想针对每个元素的后面都加入一个新的元素，有哪些方法
+12. 假如我用for的索引来加，会有什么问题？
+
+### 2面HR
+
+可能是太晚了，火石是第三家面试了，而且我坐了很久的地铁，HR可能觉得我人没精神，也有可能我确实有毛病。。。
+
+## 博联智能
+
+### 1面
+
+基本上都是很基础的题目。感觉是之前团队全部跑路了，只有他一个前端，而且加班很严重，他的好像才刚刚毕业....
+
+## 婚礼纪
+
+### 1面
+
+1. 你用过哪些Hook
+2. Hook的规则原理
+3. 为什么要移除那些生命周期
+4. 说一下时间循环
+5. setState是同步还是异步？
+6. setState的回调函数是宏任务还是微任务
+7. webpack热更新原理
+8. webpack的loader的作用
+9. 为什么Fiber可以中断正在进行中的计算？
+10. JSX编译之后是什么样子的？
+11. React中那些props不能传递，为什么？
+12. 假如我要封装一下上拉加载的Hook要怎么封装？
+
+### 2面
+
+1. nodejs 常用命令你知道哪些？
+2. 介绍一下JavaScript的内存
+3. WeakMap和Map有什么区别
+4. Post和Get有什么区别
+5. 返回的状态码一定200就是对的吗？
+6. 那我返回300也可以是对的吗？
+7. electron用过吗？
+8. RN会吗？
+9. Webpack的原理
+10. 现在让你手写一个Webpack，你要怎么来写？
+11. Webpack优化知道哪些？
+
+凉凉。。。广度不够。。。555
+
+## 数立信息
+
+### 1面
+
+1. 什么是原型链
+2. 手写寄生组合继承
+3. this指向优先级
+4. 什么叫做闭包？
+5. useEffect的回调函数每次都会执行还是在卸载的时候执行？
+6. 类组件的this变量，在函数是组件中怎么表示？
+7. setState的链表是环形的吗？为什么？
+8. 跨域
+
+### 2面
+
+1. redux源码读过吗？
+2. redux中间件的设计理念是什么？
+3. sticky用过吗？
+4. px to rem的计算原理
+5. Webpack的tree shanking了解吗？原理？怎么写？
+6. BFC为什么会有那些特性？
+7. React事件集合原理
+8. 为什么虚拟DOM可以做跨平台
+
+## 光云科技
+
+### 1面
+
+1. var let const区别
+2. localStorage sessionStorage cookie token区别
+3. token的组成
+4. React为什么移除那些生命周期
+5. Hook的设计理念，Hook规则原理
+6. key的作用
+7. 说一下你了解的闭包
+8. 自定义loader写过吗？
+9. 跨域的方式方法
+
+### 2面
+
+1. https和http的区别
+2. http请求头的组成
+3. cookie的作用
+4. cookie的新的属性
+5. 怎么阻止第三方攻击
+6. 假如让你设计一个秒杀页面你会想到那些场景和应对方式
+
+# 总结
+
+我个人认为必考的几个点，如果复习好了的话。1面应该问题不大
+
+1. URL到页面渲染过程
+2. JavaScript继承
+3. 闭包
+4. Promise
+5. http请求头，码，方法之间的区别，http2，https
+6. 跨域
+7. React Fiber原理
+8. Hook规则原理
+9. setState是否异步
+10. 前端性能优化（Webpack，js，css，重绘，回流，防抖，节流
+11. React生命周期，官方的Hooks烂熟于心
+12. Flex，BFC，居中
+
+
+
diff --git "a/source/_posts/\344\273\216\351\233\266\351\205\215\347\275\256\344\275\240\347\232\204Webpack.md" "b/source/_posts/\344\273\216\351\233\266\351\205\215\347\275\256\344\275\240\347\232\204Webpack.md"
new file mode 100644
index 00000000..e67db40b
--- /dev/null
+++ "b/source/_posts/\344\273\216\351\233\266\351\205\215\347\275\256\344\275\240\347\232\204Webpack.md"
@@ -0,0 +1,1179 @@
+---
+title: 从零配置你的Webpack
+date: 2020-06-07 06:11:13
+tags: [Webpack]
+category: [Webpack]
+cover: /image/cover/webpack.png
+---
+
+# 从零配置你的Webpack
+
+## 前言
+
+上篇文章简单的介绍了一下，前端进阶之脚手架的搭建。其实我个人认为重要的还是Webpack的配置出来的template，至于脚手架的交互体验可以后期去优化，也可以更加的个性化。但是我们的核心还是放在Webpack等一系列的配置上。
+
+这篇文章的目的
+
+- 可以给自己一个回顾的地方
+- 加强对Webpack的理解，每个知识点都会认认真真的彻查！尽量让每一步都是非常清晰明了的！
+- 如果可以帮助到大家那是更好不过了
+
+好了，收！话不多说开始！
+
+
+
+## 前提
+
+相信来到这里的小伙伴，都是有一些些前端的经验了，至于什么node安装环境变量这里就不赘述了。本人使用的是mac os，如果是Windows的并且碰到问题的话，可以留言，或者直接Google。
+
+
+
+## 开始
+
+### 建立一个空的文件夹📁
+
+新建一个文件夹，名为【webpackInit】
+
+并且使用你的编辑器打开他，然后打开命令行执行：
+
+```js
+npm init -y
+```
+
+这个命令是node帮你初始化一个项目用的，帮你新建一个`package.json`。
+
+至于`-y`是用于默认都以**yes**继续执行。如果想了解一下里面到底有什么的同学可以不用*-y*继续跑一遍。其实里面的东西后期都可以自己修改`package.json`。所以不需要太在意。
+
+### 安装Webpack🔧
+
+现在是北京时间：2020/06/07 06:42:49。
+
+Webpack5有Beta版，这里就不考虑了，后续上正式版的话我应该会出新的文章介绍。
+
+因为我们使用的是 `webpack 4+` 版本，还需要安装 `webpack-cli` ，执行以下命令：
+
+```js
+npm install --save-dev webpack webpack-cli
+```
+
+因为Webpack主要是编译时使用所以放到“devDependencies”。
+
+确认一下现在的目录结构，以防有同学掉队！
+
+```diff
+webpackInit
+ |- node_modules
+ |- package-lock.json
+ |- package.json
+```
+
+这里说下题外话。
+
+##### package.json和package-lock.json的区别
+
+package.json 文件只能锁定大版本，也就是版本号的第一位，并不能锁定后面的小版本，`npm install` 都是拉取的该大版本下的最新的版本，为了稳定性考虑我们几乎是不敢随意升级依赖包的，这将导致多出来很多工作量，测试/适配等，所以 package-lock.json 文件出来了，当你每次安装一个依赖的时候就锁定在你安装的这个版本。
+
+那如果我们安装时的包有bug，后面需要更新怎么办？
+
+在以前可能就是直接改 package.json 里面的版本，然后再 `npm install` 了，但是 5 版本后就不支持这样做了，因为版本已经锁定在 package-lock.json 里了，所以我们只能 `npm install xxx@x.x.x` 这样去更新我们的依赖，然后 package-lock.json 也能随之更新。
+
+### 新建配置文件📃
+
+我们在根目录新建文件夹【config】用于存储一些相关的配置文件，然后在【config】里面新建一个文件夹【webpack】表示，专门用于存储webpack的配置文件。然后在【webpack】这个文件夹下面新建文件【webpack.common.config.js】
+
+并敲入以下代码
+
+
+
+```javascript
+const path = require('path');
+
+module.exports = {
+ // 配置入口文件
+ entry: {
+ app: './src/index.js',
+ },
+ // 打包📦之后的出口
+ output: {
+ // 如果不加哈希值，浏览器会有缓存，可能你部署了，但是用户看到的还是老页面
+ // 8是hash的长度，如果不设置，webpack会设置默认值为20。
+ filename: 'js/[name].[chunkhash:8].bundle.js',
+ /**
+ * Node.js 中，__dirname 总是指向被执行 js 文件的绝对路径，
+ * 所以当你在 /d1/d2/myscript.js 文件中写了 __dirname， 它的值就是 /d1/d2 。
+ * path.resolve
+ * 1.path.resolve()方法可以将路径或者路径片段解析成绝对路径
+ * 2.传入路径从右至左解析，遇到第一个绝对路径是完成解析，例如path.resolve('/foo', '/bar', 'baz') 将返回 /bar/baz
+ * 3.如果传入的绝对路径不存在，那么当前目录将被使用
+ * 4.当传入的参数没有/时，将被传入解析到当前根目录
+ * 5.零长度的路径将被忽略
+ * 6.如果没有传入参数，将返回当前根目录
+ *
+ * _dirname表示绝对路径
+ * 我们碰到的./xx就是相对路径
+ * 1.只传入__dirname也可以自动调用path.resolve方法
+ * 2.可以拼接路径字符串，但是不调用path.resolve()方法拼接失败
+ * 3.__dirname代表的是当前文件（a.js）的绝对路径
+ * 4.从右至左解析，遇到了绝对路径/src，因此直接返
+ */
+ path: path.resolve(__dirname, '../../dist')
+ }
+}
+```
+
+> webpack 配置是标准的 Node.js的CommonJS 模块，它通过require来引入其他模块，通过module.exports导出模块，由 webpack 根据对象定义的属性进行解析。
+
+在根目录新建【src】文件夹📁
+
+在【src】文件夹下新建文件index.js
+
+ok👌，确认一下目录结构
+
+```diff
+webpackInit
++ |- config
++ |- webpack
++ |- webpack.common.config.js
+ |- node_modules
++ |- src
++ |- index.js
+ |- package.json
+ |- package-lock.json
+```
+
+那我们怎么打包呢？在 `package.json` 中配置如下属性：
+
+```diff
+"scripts": {
+- "test": "echo \"Error: no test specified\" && exit 1",
++ "start": "webpack --config ./config/webpack/webpack.common.config.js"
+},
+
+```
+
+好了，我们试试怎么打包吧，虽然你的 `index.js` 中什么代码也没有。
+在控制台中输入以下代码：
+
+```
+npm run start
+```
+
+npm run xxxx 会去执行当前目录下package.json里面的script同名脚本
+
+我们的【npm run start】相当于直接执行了我们写在【start】里面的代码。
+
+执行之后，你会发现根目录多出了一个文件夹： `dist/js` ，其中有一个js文件： `bundle.js` ，那么至此，我们已经成功编译打包了一个js文件，即入口文件： `index.js` 。
+
+### 安装React
+
+在控制台输入以下代码：
+
+```
+npm install --save react react-dom
+```
+
+--save就是运行时会用到的代码
+
+具体和--dev-save的区别可以自己Google一下
+
+在【src/index.js】里面加入以下代码
+
+```js
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const App = () => (
+ <>
+ Hello World！
+
+)
+
+ReactDOM.render(
+ Hello World！!
+
+)
+
+ReactDOM.render(
+
+ );
+ }
+}
+```
+
+
+
+#### React Hook
+
+
+
+```javascript
+import React, { useState } from 'react';
+
+function Example() {
+ // 声明一个叫 "count" 的 state 变量 const [count, setCount] = useState(0);
+ return (
+ You clicked {this.state.count} times
+ +
+
+ );
+}
+```
+
+
+
+这样就算是完成了一个最简单的React Hook 实践，关于一些官方提供的Hook晚点会介绍。
+
+
+
+### Why
+
+- 为什么会有Hooks？
+- Hook能解决什么问题？
+
+做任何一件事情我觉得都应该理清这个两个问题，这样的话就会事半功倍。
+
+我们先看看React官方是怎么解释“Why”的
+
+> 1. 在组件之间复用状态逻辑很难
+> 2. 复杂组件变得难以理解
+> 3. 难以理解的 class
+
+本人个人认为第三点是来凑数的....
+
+为什么这么说？
+
+因为React用了这么久了基本都是在使用Class组件，这个是在之前，哪怕是现在学习React的必经之路吧！所以，这点我接下来就会跳过了😂
+
+### 在组件之间服用状态逻辑很难
+
+其实高阶组件或者说是props都是很好的解决了复杂的聚合业务逻辑，那为什么说在**组件之间服用状态逻辑很难**呢？
+
+其实道理非常简单。
+
+举个简单的例子，方便大家理解。
+
+场景：有 请求A，请求B，请求C，请求D。他们的请求都有相互依赖关系比如，发请求B的时候必须拿到请求A的结果中的某个值，而请求C也必须拿到请求B的结果中的某个值。以此类推请求D。
+
+Promise出来之前是怎么做的呢？
+
+```javascript
+$.ajax({
+ type:"post",
+ success: function(){//成功回调
+ //再次异步请求
+ $.ajax({
+ type:"post",
+ url:"...",
+ success:function(){//成功回调
+ //再次异步请求
+ $.ajax({
+ type:"post",
+ url:"...",
+ success:function(){
+ .......//如此循环
+ }
+ })
+ }
+ })
+ }
+})
+```
+
+这还只是3层，如果是100层呢？那看起来就非常的难受了！
+
+Promise较好的解决了这个问题
+
+```javascript
+new Promise(f1)
+ .then(f2)
+ .then(f3)
+ .then(f4)
+ .then(f5)
+ .then(f5)
+…………
+```
+
+然后是async/await。这里就不展开了，有兴趣的可以自己去了解一下。
+
+结论
+
+之所以这么大费周章的讲是为了解释，React中的高阶组件（HOC）。他的逻辑其实和回调地狱类似，一个两个其实都还算优雅或者说舒服，一旦多了的话。。。
+
+```javascript
+export default withHover(
+ withTheme(
+ withAuth(
+ withRepos(Profile)
+ )
+ )
+)
+
+// 就会变成这样，不够优雅
+You clicked {count} times
+ +
+
+ );
+}
+```
+
+你猜alert会弹出什么呢？会是5吗？— 这个值是alert的时候counter的实时状态。或者会是3吗？— 这个值是我点击时候的状态。
+
+> 分割线
+
+来自己 [试试吧！](https://codesandbox.io/s/w2wxl3yo0l)
+
+#### 答案是
+
+3
+
+这是为什么呢？function组建究竟是如果工作的呢？
+
+我们发现`count`在每一次函数调用中都是一个常量值。值得强调的是 — **我们的组件函数每次渲染都会被调用，但是每一次调用中`count`值都是常量，并且它被赋予了当前渲染中的状态值。**
+
+这并不是React特有的，普通的函数也有类似的行为：
+
+```jsx
+function sayHi(person) {
+ const name = person.name; setTimeout(() => {
+ alert('Hello, ' + name);
+ }, 3000);
+}
+
+let someone = {name: 'Dan'};
+sayHi(someone);
+
+someone = {name: 'Yuzhi'};
+sayHi(someone);
+
+someone = {name: 'Dominic'};
+sayHi(someone);
+```
+
+在 [这个例子](https://codesandbox.io/s/mm6ww11lk8)中, 外层的`someone`会被赋值很多次（就像在React中，*当前*的组件状态会改变一样）。**然后，在`sayHi`函数中，局部常量`name`会和某次调用中的`person`关联。**因为这个常量是局部的，所以每一次调用都是相互独立的。结果就是，当定时器回调触发的时候，每一个alert都会弹出它拥有的`name`。
+
+这就解释了我们的事件处理函数如何捕获了点击时候的`count`值。如果我们应用相同的替换原理，每一次渲染“看到”的是它自己的`count`：
+
+```jsx
+// During first render
+function Counter() {
+ const count = 0; // Returned by useState() // ...
+ function handleAlertClick() {
+ setTimeout(() => {
+ alert('You clicked on: ' + count);
+ }, 3000);
+ }
+ // ...
+}
+
+// After a click, our function is called again
+function Counter() {
+ const count = 1; // Returned by useState() // ...
+ function handleAlertClick() {
+ setTimeout(() => {
+ alert('You clicked on: ' + count);
+ }, 3000);
+ }
+ // ...
+}
+
+// After another click, our function is called again
+function Counter() {
+ const count = 2; // Returned by useState() // ...
+ function handleAlertClick() {
+ setTimeout(() => {
+ alert('You clicked on: ' + count);
+ }, 3000);
+ }
+ // ...
+}
+```
+
+所以实际上，每一次渲染都有一个“新版本”的`handleAlertClick`。每一个版本的`handleAlertClick`“记住” 了它自己的 `count`：
+
+```jsx
+// During first render
+function Counter() {
+ // ...
+ function handleAlertClick() {
+ setTimeout(() => {
+ alert('You clicked on: ' + 0); }, 3000);
+ }
+ // ...
+ // The one with 0 inside // ...
+}
+
+// After a click, our function is called again
+function Counter() {
+ // ...
+ function handleAlertClick() {
+ setTimeout(() => {
+ alert('You clicked on: ' + 1); }, 3000);
+ }
+ // ...
+ // The one with 1 inside // ...
+}
+
+// After another click, our function is called again
+function Counter() {
+ // ...
+ function handleAlertClick() {
+ setTimeout(() => {
+ alert('You clicked on: ' + 2); }, 3000);
+ }
+ // ...
+ // The one with 2 inside // ...
+}
+```
+
+这就是为什么[在这个demo中](https://codesandbox.io/s/w2wxl3yo0l)中，事件处理函数“属于”某一次特定的渲染，当你点击的时候，它会使用那次渲染中`counter`的状态值。
+
+**在任意一次渲染中，props和state是始终保持不变的。**如果props和state在不同的渲染中是相互独立的，那么使用到它们的任何值也是独立的（包括事件处理函数）。它们都“属于”一次特定的渲染。即便是事件处理中的异步函数调用“看到”的也是这次渲染中的`count`值。
+
+#### 请回答以下代码的运行结果
+
+```javascript
+function Counter() {
+ const [count, setCount] = useState(0);
+
+ const addCount = () => {
+ setCount(count+1)
+ setCount(count+2)
+ setCount(count+3)
+ setCount(count+4)
+ setCount(count+5)
+ }
+
+ console.log(count)
+
+ return (
+ You clicked {count} times
+ + +
+
+
+ );
+}
+```
+
+> 分割线
+
+#### 答案是
+
+5
+
+为什么呢？
+
+useState的更新究竟是如何工作的呢？
+
+我们进入`ReactHooks.js`来看看，发现`useState`的实现竟然异常简单，只有短短两行
+
+```js
+// ReactHooks.js
+export function useState setCount(0)}>{count}
+ );
+}
+
+// 我是分割线
+
+function App() {
+ const [count, setCount] = useState(0);
+
+ useEffect(() => {
+ if (count === 0) {
+ const randomNum = 10 + Math.random()*200
+ setCount(10 + Math.random()*200);
+ }
+ }, [count]);
+
+ return (
+ setCount(0)}>{count}
+ );
+}
+```
+
+其实明白的同学一下就看出来了，如果使用useEffect的话会出现闪烁，会先回到0然后再更新新的随机数。而反观useLayoutEffect则不会，他会很自然的过渡。
+
+总结：
+
+useLayoutEffect的使用场景为：有一个中间状态希望隐藏的时候再使用。
+
+大部分情况下useEffect可以适用于99%的场景。
+
+#### useEffect的错误事例。看看有没有你
+
+```js
+function SearchResults() {
+ const [query, setQuery] = useState('react');
+
+ // Imagine this function is also long
+ function getFetchUrl() {
+ return 'https://hn.algolia.com/api/v1/search?query=' + query;
+ }
+
+ // Imagine this function is also long
+ async function fetchData() {
+ const result = await axios(getFetchUrl());
+ setData(result.data);
+ }
+
+ useEffect(() => {
+ fetchData();
+ }, []);
+
+ // ...
+}
+```
+
+#### 为什么错了？
+
+不难看出上面代码的意思是。想要模仿componentDidMount的生命周期，在页面或者组件加载之后发送一个请求。咋一看好像没有什么问题（实际在运行的过程中也没有什么问题，在写这篇文章之前我也是这么做的。）
+
+但是大家可以想象一下，如果这个函数组件，是现在的5倍大，这个didMount里面调用的请求，未来依赖的东西你都可以100%的察觉到吗？
+
+我觉得难！难免会有疏忽。到时候可能就会出现state或者props读取错误的情况。因为每一次render的state和props都是独立的。
+
+那么，该如何解决呢？
+
+有一个很土的办法，直接把函数扔到useEffect里面去
+
+```jsx
+function SearchResults() {
+ // ...
+ useEffect(() => {
+ // We moved these functions inside!
+ function getFetchUrl() {
+ return 'https://hn.algolia.com/api/v1/search?query=react';
+ }
+ async function fetchData() {
+ const result = await axios(getFetchUrl());
+ setData(result.data);
+ }
+ fetchData();
+ }, []); // ✅ Deps are OK
+ // ...
+}
+```
+
+那高级点的办法呢？
+
+```js
+function SearchResults() {
+ // ✅ Preserves identity when its own deps are the same
+ const getFetchUrl = useCallback((query) => {
+ return 'https://hn.algolia.com/api/v1/search?query=' + query;
+ }, []); // ✅ Callback deps are OK
+
+ useEffect(() => {
+ const url = getFetchUrl('react');
+ // ... Fetch data and do something ...
+ }, [getFetchUrl]); // ✅ Effect deps are OK
+
+ // ...
+}
+```
+
+将函数用useCallback包裹，这样的话我们只需要做useEffect的依赖里面写上我们的函数，然后在useCallback里面写上我们的依赖。
+
+#### 我们都知道，每一次effect都是全新的state和props，那我要如何获得上一轮更新的state呢？
+
+
+
+```js
+function Counter() {
+ const [count, setCount] = useState(0);
+
+ const prevCountRef = useRef();
+ useEffect(() => {
+ prevCountRef.current = count;
+ });
+ const prevCount = prevCountRef.current;
+
+ return Now: {count}, before: {prevCount}
; +} +``` + +其实很好理解，如果看了前面useEffect和useLayoutEffect区别的同学一下就可以知道这个的实现原理。 + +首先，在一切都更新之后，然后会会执行useEffect内部的回调函数，将prevCount给赋值，由于没有触发渲染，所以只是单纯的赋值。这样就看起来prevCount的值永远都慢一步。 + +### 总结 + +其实在学习useEffect的时候。应该忘记你对React的一些知识。比如生命周期，在函数组件里面没有生命周期这个概念了。 + +每一次的render他都有自己的state和props。state和props更应该被看作一个常量，哪怕是const bar = xx这样的常量。这样理解起来useEffect这个副作用其实会更加顺畅，也不容易进入他的“陷阱” + +## useRef + +### 前言 + +为什么我把useRef单独拎出来说，不把他和`useImperativeHandle`放在一起讲，因为 + +> （官网原话）它创建的是一个普通 Javascript 对象。而 `useRef()` 和自建一个 `{current: ...}` 对象的唯一区别是，`useRef` 会在每次渲染时返回同一个 ref 对象。 + +记住`useRef`不单单用于获取`DOM节点和组件实例`，还有一个巧妙的用法就是`作为容器保留可变变量`，可以这样说：`无法自如地使用useRef会让你失去hook将近一半的能力` + +#### useRef 与 createRef 的区别 + +`useRef` 仅能用在 FunctionComponent，`createRef` 仅能用在 ClassComponent。 + +`useRef` 仅能用在 FunctionComponent，`createRef` 仅能用在 ClassComponent。 + +第一句话是显然的，因为 Hooks 不能用在 ClassComponent。 + +第二句话的原因是，`createRef` 并没有 Hooks 的效果，其值会随着 FunctionComponent 重复执行而不断被初始化： + +``` +function App() { + // 错误用法，永远也拿不到 ref + const valueRef = React.createRef(); + return ; +} +复制代码 +``` + +上述 `valueRef` 会随着 App 函数的 Render 而重复初始化，**这也是 Hooks 的独特之处，虽然用在普通函数中，但在 React 引擎中会得到超出普通函数的表现，比如初始化仅执行一次，或者引用不变**。 + +为什么 `createRef` 可以在 ClassComponent 正常运行呢？这是因为 ClassComponent 分离了生命周期，使例如 `componentDidMount` 等初始化时机仅执行一次。 + +#### 如何解决每次render带来类闭包问题？ + +首先，题目怎么理解？[题目](https://codesandbox.io/s/w2wxl3yo0l) + +如果我们希望他alert的时候可以获取到最新的值的话，可以使用useRef来解决 + +```js +const Counter = () => { + const [count, setCount] = useState{str}
+ + + ); +} +``` + + + + + + + +会在自定义的hooks标记到react的调试工具上面,主要用于调试工具调试使用 + +当传入第二个参数的情况下，第二个参数是一个回调函数，会把第一个参数当成自己的形参传入，进行一系列的操作，return回去，然后才会在react调试工具的hooks中打印出来，不然不会显示 + +```js +import React, { useDebugValue, useState } from 'react'; + +const useTest = () => { + const [str, setStr] = useState{str}
+ + + + ); +} +``` + +结果: + + + + +同时在控制台上打印了一个空字符 + + +由于str的初始值是空的，所以打印就是空的了，这只是调试使用，hooks差不多就这些了，没有其他的了 + + + +## 观看之后 + +如果有哪里写的不对或者有疑问的欢迎大家在评论区互动。🙏 + + + + diff --git "a/source/_posts/\345\205\250\347\275\221\346\234\200\345\205\250React\346\272\220\347\240\201\350\260\203\350\257\225\346\225\231\347\250\213.md" "b/source/_posts/\345\205\250\347\275\221\346\234\200\345\205\250React\346\272\220\347\240\201\350\260\203\350\257\225\346\225\231\347\250\213.md" new file mode 100644 index 00000000..5ef1ba89 --- /dev/null +++ "b/source/_posts/\345\205\250\347\275\221\346\234\200\345\205\250React\346\272\220\347\240\201\350\260\203\350\257\225\346\225\231\347\250\213.md" @@ -0,0 +1,126 @@ +--- +title: 全网最全React源码调试傻瓜式教程 +date: 2021-06-17 21:41:06 +tags: [react] +category: [react] +cover: /image/cover/react.png +--- +# 前言 + +之前在阅读React源码的时候，想调试一下，然后debugger看看变量已经数据是怎么传递的，无奈。还要装这么多东西。踩了不少坑，记录一下。帮助大家少踩坑，也为自己做一个笔记。 + +# 准备工作 + +- [Node](https://nodejs.org/) v8.0.0+、[Yarn](https://yarnpkg.com/en/) v1.2.0+。 +- 已安装 [JDK](https://www.oracle.com/technetwork/java/javase/downloads/index.html)。 +- 你已安装 `gcc`（或者你在有必要安装编译器的情况下也不觉得麻烦），因为一些依赖可能得经过编译，而在 OS X，Xcode 命令行工具会帮你处理；在 Ubuntu，`apt-get install build-essential` 会安装所需的 package（其它 Linux 发行版的类似命令也有效）；在 Windows 上得做些额外步骤，请参考 [`node-gyp` 安装步骤](https://github.com/nodejs/node-gyp#installation)。 +- 熟悉 Git。 + +- 一个可以运行React项目（本文采用create-react-app） + +# 开始 + +## 1.获取源代码 + +1. 打开源码地址：https://github.com/facebook/react +2. 克隆到自己的本地 + 1. 可以下载zip解压 + 2. 也可以Fork到自己的GitHub然后Clone + 1. 个人建议是Fork，然后可以修改，添加注释等等。可以记录一下自己学习历程 + 3. 也可以直接Clone + +## 2. 建立依赖连接 + +1. 打开项目 +2. 运行yarn安装依赖 +3. 运行`yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE`重新打包 +4. `cd build/node_modules/react`进入React这个包内部 +5. `yarn link`建立连接 +6. `cd 到原来的项目路径`返回，为了下一次进入react-dom做准备 +7. `cd build/node_modules/react-dom` +8. `yarn link` + +## 3.找到一个可以调试的React项目 + +这里我采用的是`create-react-app` + +1. `npx create-react-app my-app` +2. `cd my-app` + +## 4. 连接项目和React库 + +1. 删除刚刚建立的项目的`node_modules`中的`react`和`react-dom` +2. 打开React项目 +3. `yarn link react react-dom` + +## 5. 开始调试 + +1. 打开我们clone的项目 + +2. 找到想要调试的地方 + + 1. 这里改的地方是`packages/react-dom/src/client/ReactDOMLegacy.js` + 2. 内容如下 + + ```diff + export function render( + element: React$Element
+
+ }
+}
+```
+这个装饰器（高阶组件）接受一个 React 组件作为参数，然后返回一个新的 React 组件。实现很简单，就是包裹了一层 div，添加了一个 style，就这么简单。以后所有被它装饰的组件都会具有这个特征。
+除了style还可以传参数
+```react
+import React from 'react';
+
+export default Component => class extends React.Component {
+ render() {
+ return
+
+ }
+}
+```
+以后所有被它装饰的组件都可以从`props`里面获取到`test`. 他的值是`'qwe'`。
+
+## 扩展
+发挥你的想象, 你可以写无数个很方便的高阶组件, 通过装饰器的方式, 让你的代码更简洁, 更帅
+
+索引
+
+> http://es6.ruanyifeng.com/#docs/decorator
\ No newline at end of file
diff --git "a/source/_posts/\351\235\242\350\257\225\345\256\230\357\274\232\345\220\254\350\257\264\344\275\240\345\257\271package-json\345\276\210\347\206\237\357\274\237.md" "b/source/_posts/\351\235\242\350\257\225\345\256\230\357\274\232\345\220\254\350\257\264\344\275\240\345\257\271package-json\345\276\210\347\206\237\357\274\237.md"
new file mode 100644
index 00000000..f8f0eb6b
--- /dev/null
+++ "b/source/_posts/\351\235\242\350\257\225\345\256\230\357\274\232\345\220\254\350\257\264\344\275\240\345\257\271package-json\345\276\210\347\206\237\357\274\237.md"
@@ -0,0 +1,756 @@
+---
+title: 面试官：听说你对package.json很熟？
+date: 2021-06-22 20:11:07
+tags: [JavaScript]
+category: [重拾前端]
+cover: /image/cover/web.jpeg
+---
+
+
+
+# 前言
+
+平常在工作中，对`package.json`这个文件的接触非常非常少。
+
+- 一些同学可能还会看一下script里面有什么命令，执行了哪些方法。
+- 又或者了解一下`dependencies`和`devDependencies`
+- 其他大部分的同学可能直接就`npm i`和`npm start`就开始工作了。
+- 但是`package.json`的魅力远不止如此
+
+- 今天就和我一起探索一下这个项目中不可或缺的——`package.json`吧！
+
+
+
+# 由浅入深-核心内容
+
+## 准备工作
+
+手摸手新建一个空的package.json
+
+
+
+1. `npm init`
+2. `上万个回车`
+
+或者直接执行
+
+1. `npm init -y`
+2. 其意思就是全部都略过，和我们上面的无数个回车的效果一样
+
+先看看上面有的东西。
+
+```json
+{
+ "name": "package.json", # 项目名称
+ "version": "1.0.0", # 项目版本（格式：大版本.次要版本.小版本）
+ "description": "", # 项目描述
+ "main": "index.js", # 入口文件
+ "scripts": { # 指定运行脚本命令的 npm 命令行缩写
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "keywords": [], # 关键词
+ "author": "", # 作者
+ "license": "ISC" # 许可证
+}
+```
+
+
+
+## scripts（快捷脚本）
+
+- `scripts` 字段是 `package.json` 中的一种元数据功能，它接受一个对象，对象的属性为可以通过 `npm run `运行的脚本，值为实际运行的命令（通常是终端命令），如：
+
+```
+"scripts": {
+ "start": "node index.js"
+},
+复制代码
+```
+
+- 将终端命令放入 `scripts` 字段，既可以记录它们又可以实现轻松重用。
+
+## dependencies & devDependencies（项目依赖）
+
+- `dependencies` 字段指定了项目运行所依赖的模块
+ - 可以理解为我们的项目在生产环境运行中要用到的东西。
+ - 比如说我们常用的`antd`只能哪个代码块就会用到里面的组件，所以要放到`dependencies `里面去
+- `devDependencies`字段指定了项目开发所需要的模块
+ - 开发环境会用到的东西，比如说webpack。我们打包的时候会用到，但是项目运行的时候却用不到，所以只需要放到`devDependencies`中去就好了
+ - 类似的`eslint`之类的
+
+这里重点谈一下这些版本号直接的差异
+
+### ~1.1.1
+
+- `~1.2.3`:= `>=1.2.3 <1.(2+1).0`:=`>=1.2.3 <1.3.0-0`
+- `~1.2`:= `>=1.2.0 <1.(2+1).0`:= `>=1.2.0 <1.3.0-0`(同`1.2.x`)
+- `~1`:= `>=1.0.0 <(1+1).0.0`:= `>=1.0.0 <2.0.0-0`(同`1.x`)
+- `~0.2.3`:= `>=0.2.3 <0.(2+1).0`:=`>=0.2.3 <0.3.0-0`
+- `~0.2`:= `>=0.2.0 <0.(2+1).0`:= `>=0.2.0 <0.3.0-0`(同`0.2.x`)
+- `~0`:= `>=0.0.0 <(0+1).0.0`:= `>=0.0.0 <1.0.0-0`(同`0.x`)
+- `~1.2.3-beta.2`:=`>=1.2.3-beta.2 <1.3.0-0`请注意，`1.2.3`版本中的预发布将被允许，如果它们大于或等于`beta.2`. 所以，`1.2.3-beta.4`会被允许，但 `1.2.4-beta.2`不会，因为它是不同`[major, minor, patch]`元组的预发布。
+
+### ^1.1.1
+
+允许不修改`[major, minor, patch]`元组中最左边的非零元素的更改 。换句话说，这允许版本`1.0.0`及以上版本的补丁和次要更新，版本的补丁更新`0.X >=0.1.0`，以及版本的*不*更新`0.0.X`。
+
+许多作者将`0.x`版本视为`x`主要的“重大变化”指标。
+
+当作者可能在发行版`0.2.4`和`0.3.0`发行版之间进行重大更改时，插入符范围是理想的，这是一种常见做法。但是，它假定和之间*不会*有重大变化 。根据通常观察到的做法，它允许进行假定为附加（但不会破坏）的更改。`0.2.4``0.2.5`
+
+- `^1.2.3` := `>=1.2.3 <2.0.0-0`
+- `^0.2.3` := `>=0.2.3 <0.3.0-0`
+- `^0.0.3` := `>=0.0.3 <0.0.4-0`
+- `^1.2.3-beta.2`:=`>=1.2.3-beta.2 <2.0.0-0`请注意，`1.2.3`版本中的预发布将被允许，如果它们大于或等于`beta.2`. 所以，`1.2.3-beta.4`会被允许，但 `1.2.4-beta.2`不会，因为它是不同`[major, minor, patch]`元组的预发布。
+- `^0.0.3-beta`:=`>=0.0.3-beta <0.0.4-0` 请注意，*仅*允许`0.0.3`版本中的预发布 ，如果它们大于或等于. 所以，会被允许。`beta``0.0.3-pr.2`
+
+解析插入符范围时，缺失`patch`值会被减为数字`0`，但即使主要版本和次要版本都是`0`.
+
+- `^1.2.x` := `>=1.2.0 <2.0.0-0`
+- `^0.0.x` := `>=0.0.0 <0.1.0-0`
+- `^0.0` := `>=0.0.0 <0.1.0-0`
+
+缺失值`minor`和`patch`值将脱糖为零，但也允许在这些值内具有灵活性，即使主要版本为零。
+
+- `^1.x` := `>=1.0.0 <2.0.0-0`
+- `^0.x` := `>=0.0.0 <1.0.0-0`
+
+### 1.1.x
+
+任何的`X`，`x`或`*`可被用来“立场在”在数字值中的一个`[major, minor, patch]`元组。
+
+- `*`:= `>=0.0.0`(任何版本都满足)
+- `1.x`:= `>=1.0.0 <2.0.0-0`(匹配主要版本)
+- `1.2.x`:= `>=1.2.0 <1.3.0-0`（匹配主要和次要版本）
+
+部分版本范围被视为 X 范围，因此特殊字符实际上是可选的。
+
+- `""`（空字符串）:= `*`:=`>=0.0.0`
+- `1`:= `1.x.x`:=`>=1.0.0 <2.0.0-0`
+- `1.2`:= `1.2.x`:=`>=1.2.0 <1.3.0-0`
+
+### 1.1.1 - 1.1.2
+
+指定一个包含集。
+
+- `1.2.3 - 2.3.4` := `>=1.2.3 <=2.3.4`
+
+如果部分版本作为包含范围中的第一个版本提供，则缺失的部分将替换为零。
+
+- `1.2 - 2.3.4` := `>=1.2.0 <=2.3.4`
+
+如果部分版本作为包含范围中的第二个版本提供，则接受以元组提供的部分开头的所有版本，但不会大于提供的元组部分。
+
+- `1.2.3 - 2.3` := `>=1.2.3 <2.4.0-0`
+- `1.2.3 - 2` := `>=1.2.3 <3.0.0-0`
+
+
+
+## engines（指定项目 node 版本）
+
+- 有时候，新拉一个项目的时候，由于和其他开发使用的 `node` 版本不同，导致会出现很多奇奇怪怪的问题（如某些依赖安装报错、依赖安装完项目跑步起来等）。
+- 为了实现项目开箱即用的伟大理想，这时候可以使用 `package.json` 的 `engines` 字段来指定项目 node 版本：
+
+```
+"engines": {
+ "node": ">= 8.16.0"
+},
+复制代码
+```
+
+- 该字段也可以指定适用的 `npm` 版本：
+
+```
+"engines": {
+ "npm": ">= 6.9.0"
+ },
+复制代码
+```
+
+- 需要注意的是，engines属性仅起到一个说明的作用，当用户版本不符合指定值时也不影响依赖的安装。
+
+## os（模块适用系统）
+
+- 假如我们开发了一个模块，只能跑在 `darwin` 系统下，我们需要保证 `windows` 用户不会安装到该模块，从而避免发生不必要的错误。
+- 这时候，使用 `os` 属性则可以帮助我们实现以上的需求，该属性可以指定模块适用系统的系统，或者指定不能安装的系统黑名单（当在系统黑名单中的系统中安装模块则会报错）：
+
+```
+"os" : [ "darwin", "linux" ] # 适用系统
+"os" : [ "!win32" ] # 黑名单
+复制代码
+```
+
+> Tips：在 `node` 环境下可以使用 `process.platform` 来判断操作系统。
+
+
+## cpu（指定模块适用 cpu 架构）
+
+- 和上面的 `os` 字段类似，我们可以用 `cpu` 字段更精准的限制用户安装环境：
+
+```
+"cpu" : [ "x64", "ia32" ] # 适用 cpu
+"cpu" : [ "!arm", "!mips" ] # 黑名单
+复制代码
+```
+
+> Tips：在 `node` 环境下可以使用 `process.arch` 来判断 `cpu` 架构。
+
+## private（定义私有模块）
+
+- 一般公司的非开源项目，都会设置 `private` 属性的值为 `true`，这是因为 `npm` 拒绝发布私有模块，通过设置该字段可以防止私有模块被无意间发布出去。
+
+
+
+# 次重要（可以当百科全书）
+
+## name（项目名称）
+
+- 这个名称和你要发布项目到`npm`上的有关系。
+- 假如你不想发布的话那这个`name`和`version`就不是必填项了
+
+名字就是你的东西叫什么。（name名称）和（version版本号）构成一个唯一的标识符。
+
+名称的一些规则：
+
+- 名称必须小于或等于 214 个字符。这包括范围包的范围。
+- 作用域包的名称可以以点或下划线开头。这在没有范围的情况下是不允许的。
+- 新包的名称中不得包含大写字母。
+- 该名称最终成为 URL 的一部分、命令行上的参数和文件夹名称。因此，名称不能包含任何非 URL 安全字符。
+
+一些技巧：
+
+- 不要使用与核心节点模块相同的名称。
+- 不要在名称中加入“js”或“node”。假设它是 js，因为您正在编写 package.json 文件，并且您可以使用“engines”字段指定引擎。（见下文。）
+- 该名称可能会作为参数传递给 require()，因此它应该是简短的，但也应该具有合理的描述性。
+- 您可能需要检查 npm 注册表以查看是否已经存在使用该名称的内容，以免过于依赖它。 https://www.npmjs.com/
+ - 方法一：直接到npm官网去搜
+ - 方法二：`npm view
+
+
+
+
+Demo: https://demo.jerryc.me/
+
+JerryC: https://jerryc.me/
+
+Based on [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody) theme.
+
+## Installation
+
+Stable branch:
+
+```
+git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
+```
+
+Dev branch:
+
+```
+git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
+```
+
+## Configuration
+
+ Set theme in the hexo work folder's root config file `_config.yml`:
+
+> theme: Butterfly
+
+ If you don't have pug & stylus renderer, try this:
+
+> npm install hexo-renderer-pug hexo-renderer-stylus
+
+## Documentation
+
+Find in [hexo-theme-butterfly docs](https://docs.jerryc.me) and [JerryC](https://jerryc.me/posts/21cfbf15). it supports `zh-TW`
+
+## Screenshots
+
+
+
+
+
+
\ No newline at end of file
diff --git a/themes/butterfly/README_CN.md b/themes/butterfly/README_CN.md
new file mode 100644
index 00000000..1ab85d38
--- /dev/null
+++ b/themes/butterfly/README_CN.md
@@ -0,0 +1,46 @@
+# hexo-theme-butterfly
+
+
+
+
+
+
+Demo: https://demo.jerryc.me/
+
+JerryC: https://jerryc.me/
+
+
+一款基於[hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody)修改的主題
+
+## 安裝
+
+在你的博客根目錄裡
+
+```
+git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
+```
+
+如果想要安裝比較新的dev分支，可以
+
+```
+git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
+```
+
+## 應用主題
+修改hexo配置文件`_config.yml`，把主題改為`Butterfly`
+
+```
+theme: Butterfly
+```
+
+>如果你沒有pug以及stylus的渲染器，請下載安裝： npm install hexo-renderer-pug hexo-renderer-stylus --save or yarn add hexo-renderer-pug hexo-renderer-stylus
+
+## 文檔
+
+可查看[hexo-theme-butterfly docs](https://docs.jerryc.me) 和 [JerryC](https://jerryc.me/posts/21cfbf15)
+
+## 截圖
+
+
+
+
\ No newline at end of file
diff --git a/themes/butterfly/_config.yml b/themes/butterfly/_config.yml
new file mode 100644
index 00000000..c0aad285
--- /dev/null
+++ b/themes/butterfly/_config.yml
@@ -0,0 +1,732 @@
+# Main menu navigation
+# ---------------
+# format: xxx: 連結 || icon
+# sub-menu
+# xxx || icon:
+# xxx || 連結 || icon
+menu:
+ 首页: / || fa fa-home
+ 归档: /archives/ || fa fa-archive
+ # Tags: /tags/ || fa fa-tags
+ # Categories: /categories/ || fa fa-folder-open
+ # Link: /link/ || fa fa-link
+ 关于我: /about/ || fa fa-about
+ # List||fa fa-list:
+ # - Music || /music/ || fa fa-music
+ # - Movie || /movies/ || fa fa-film
+
+# Favicon
+# ---------------
+favicon: /img/favicon.ico
+
+# PWA
+# See https://github.com/JLHwung/hexo-offline
+# ---------------
+# pwa:
+# enable: true
+# manifest: /img/pwa/manifest.json
+# theme_color: "#fff"
+# apple_touch_icon: /img/pwa/apple-touch-icon.png
+# favicon_32_32: /img/pwa/32.png
+# favicon_16_16: /img/pwa/16.png
+# mask_icon: /img/pwa/safari-pinned-tab.svg
+
+# Highlight theme
+# ---------------
+highlight_theme: light # default / darker / pale night / light / ocean
+highlight_copy: true #代碼複製按鈕
+highlight_lang: true #代碼語言顯示
+highlight_shrink: false # true 全部代碼框不展開，需點擊 '>' 打開 / false 代碼框展開，有'>'點擊按鈕 | none 代碼框展開，不顯示 '>' 按鈕
+
+code_word_wrap: false
+
+# copy setting
+# 是否禁止複製（如果禁止，highlight_copy的功能將無效)
+# copyright 複製的內容後面加上版權信息
+copy:
+ enable: true # true 開啟 / false 禁止
+ copyright: false
+
+# social settings
+# formal:
+# icon: link || the description
+# ---------------
+social:
+ fa fa-github: https://github.com/derricktel || Github
+ fa fa-envelope: derricktel@foxmail.com || Email
+ # fa fa-rss: /atom.xml || RSS
+
+#### search ####
+# Algolia search
+# ---------------
+algolia_search:
+ enable: false
+ hits:
+ per_page: 6
+
+ labels:
+ input_placeholder: Search for Posts
+ hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
+ hits_stats: "${hits} results found in ${time} ms"
+
+# Local search
+# Please see doc for more details: https://docs.jerryc.me/config.html#本地搜索
+# ---------------
+local_search:
+ enable: false
+ labels:
+ input_placeholder: Search for Posts
+ hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
+
+# MathJax
+# Please see doc for more details: https://docs.jerryc.me/config.html#mathjax
+# ---------------
+mathjax:
+ enable: false
+ # true 表示每一頁都加載mathjax.js
+ # false 需要時加載，須在使用的Markdown Front-matter 加上 mathjax: true
+ per_page: false
+
+# KaTeX
+# ---------------
+katex:
+ enable: false
+ # true 表示每一頁都加載katex.js
+ # false 需要時加載，須在使用的Markdown Front-matter 加上 katex: true
+ per_page: false
+ hide_scrollbar: true
+
+# mermaid
+# see https://github.com/knsv/mermaid
+# -------------------------------
+mermaid:
+ enable: false
+ # built-in themes: default/forest/dark/neutral
+ theme: default
+
+# Post info settings
+# ---------------
+avatar:
+ img: /img/avatar.png
+ effect: false # 頭像會一直轉圈
+
+# the banner image of index
+index_img:
+
+# if the banner of page not setting,it will show the top_img
+default_top_img: /img/index.jpg
+
+# the banner image of archive page
+archive_img:
+
+# the banner image of tag page
+# tag page, look like https://xxxxxxxxx.com/tags/butterfly
+tag_img:
+
+# the banner image of category page
+# category page, look like https://xxxxxxxxx.com/categories/butterfly
+category_img:
+
+# 如果你有使用hexo-douban，可配置這個
+# douban:
+# meta: false
+# movies_img:
+# books_img:
+# games_img:
+
+cover:
+ # 是否顯示文章封面
+ index_enable: true
+ aside_enable: true
+ archives_enable: true
+ # 封面顯示的位置
+ # 三個值可配置 left , right , both
+ position: both
+ # 當沒有設置cover時，默認的封面顯示
+ default_cover:
+ - /img/post.jpg
+
+# if the photo link cannot connect,it will show that
+lodding_bg:
+ flink: /img/friend_404.gif #404後圖片
+ post_page: /img/404.jpg #404後圖片
+# post: /img/loading.gif ##加載動畫
+
+# A simple 404 page
+error_404:
+ enable: false
+ subtitle: "Page Not Found"
+ background:
+
+post_meta:
+ page:
+ date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
+ categories: true # true or false 主頁是否顯示分類
+ tags: true # true or false 主頁是否顯示標籤
+ post:
+ date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
+ categories: true # true or false 文章頁是否顯示分類
+ tags: true # true or false 文章頁是否顯示標籤
+
+# Please see doc for more details: https://docs.jerryc.me/config.html#字數統計
+wordcount:
+ enable: false
+ post_wordcount: true
+ min2read: true
+ total_wordcount: true
+
+toc:
+ enable: true
+ number: true
+
+# auto open the sidebar in 'post'
+auto_open_sidebar:
+ enable: true
+
+post_copyright:
+ enable: true
+ decode: false
+ license: CC BY-NC-SA 4.0
+ license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
+
+# 自動節選
+auto_excerpt:
+ enable: true
+ length: 150
+
+#### Share System ####
+# -----------------------------------------
+addThis:
+ enable: false
+ pubid:
+
+sharejs:
+ enable: true
+ sites: facebook,twitter,wechat,weibo,qq
+
+# https://www.addtoany.com/
+addtoany:
+ enable: false
+ item:
+ - facebook
+ - twitter
+ - wechat
+ - sina_weibo
+ - facebook_messenger
+ - email
+ - copy_link
+
+#### Comments System ####
+# ------------------------------------
+disqus:
+ enable: false
+ shortname:
+ count: false # top_img顯示評論數
+
+# Disqus.js版評論系統，應對大陸長城的折中方案，兼容原版：https://github.com/SukkaW/DisqusJS
+# API 申請地址：https://disqus.com/api/applications/
+# 與 disqus 共用樣式
+disqusjs:
+ enable: false
+ shortname:
+ siteName:
+ apikey:
+ api: https://disqus.skk.moe/disqus/ #一般情況下無需修改 API 地址
+ admin:
+ adminLabel:
+ count: true # top_img顯示評論數
+
+laibili:
+ enable: false
+ uid:
+
+gitalk:
+ enable: false
+ client_id:
+ client_secret:
+ repo:
+ owner:
+ admin:
+ language: zh-CN # en , zh-CN , zh-TW
+ perPage: 10 # Pagination size, with maximum 100.
+ distractionFreeMode: false # Facebook-like distraction free mode.
+ pagerDirection: last # Comment sorting direction, available values are last and first.
+ createIssueManually: false # Gitalk will create a corresponding github issue for your every single page automatically
+ count: true # top_img顯示評論數
+
+# valine comment system. https://valine.js.org
+valine:
+ enable: false # if you want use valine,please set this value is true
+ appId: # leancloud application app id
+ appKey: # leancloud application app key
+ notify: false # valine mail notify (true/false) https://github.com/xCss/Valine/wiki
+ verify: false # valine verify code (true/false)
+ pageSize: 10 # comment list page size
+ avatar: monsterid # gravatar style https://valine.js.org/#/avatar
+ lang: en # i18n: zh-cn/en
+ placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )
+ guest_info: nick,mail,link #valine comment header info
+ recordIP: false # Record reviewer IP
+ serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
+ bg: /img/comment_bg.png # valine background
+ count: true # top_img顯示評論數
+
+# utterances
+# https://utteranc.es/
+utterances:
+ enable: false
+ repo:
+ # 可選 pathname/url/title/og:title
+ issue_term: pathname
+ # 可選 github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark
+ light_theme: github-light
+ dark_theme: photon-dark
+
+##### Footer Settings ####
+# ------------------------------------
+since: 2020
+
+footer_custom_text:
+
+footer_copyright:
+ enable: true
+
+ICP:
+ enable: false
+ url:
+ text:
+ icon: /img/icp.png
+
+#### Analysis ####
+# ---------------
+baidu_analytics:
+
+# Google Analytics
+google_analytics:
+
+# Tencent_analytics ID
+tencent_analytics:
+
+# Ads
+# ---------------
+# Google Adsense
+google_adsense:
+ enable: false
+ js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
+ client:
+ enable_page_level_ads: true
+
+# 廣告插入位置
+# 適用於開啓手動廣告的配置
+# ad:
+# index:
+# aside:
+# post:
+
+#### 站長驗證 ####
+# Google Webmaster tools verification setting
+# See: https://www.google.com/webmasters/
+google_site_verification:
+
+# Bing Webmaster tools verification setting
+# See: https://www.bing.com/webmaster/
+bing_site_verification:
+
+# Baidu Webmaster tools verification setting
+# See: https://ziyuan.baidu.com/site/
+baidu_site_verification:
+
+# 360 Webmaster tools verification setting
+# see http://zhanzhang.so.com/
+qihu_site_verification:
+
+# 打賞按鈕
+reward:
+ enable: true
+ QR_code:
+ - itemlist:
+ img: /img/DerrickWechat.png
+ text: 微信
+ - itemlist:
+ img: /img/DerrickAlipay.jpg
+ text: 支付寶
+
+# 推薦文章
+related_post:
+ enable: true
+ limit: 6 # 顯示推薦文章數目
+ date_type: created # or created or updated 文章日期顯示創建日或者更新日
+
+# figcaption
+# 圖片描述文字
+photofigcaption: false
+
+#### 美化/效果 ####
+#--------------------------------
+
+# Theme color for customize
+# Notice: color value must in double quotes like "#000" or may cause error!
+# ---------------
+# theme_color:
+# enable: true
+# main: "#49B1F5"
+# paginator: "#00c4b6"
+# button_hover: "#FF7242"
+# text_selection: "#00c4b6"
+# link_color: "#99a9bf"
+# meta_color: "#858585"
+# hr_color: "#A4D8FA"
+# code_foreground: "#F47466"
+# code_background: "rgba(27, 31, 35, .05)"
+# toc_color: "#00c4b6"
+# blockquote_padding_color: "#49b1f5"
+# blockquote_background_color: "#49b1f5"
+
+# 主頁設置
+# 默認top_img全屏，site_info在中間
+# 使用默認, 都無需填寫（建議默認）
+index_site_info_top: # 主頁標題距離頂部距離 例如 300px/300em/300rem/10%
+index_top_img_height: # 主頁top_img高度 例如 300px/300em/300rem 不能使用百分比
+
+# category和tag頁的UI設置
+# index 值代表 UI將與首頁的UI一樣
+# 默認跟archives頁面UI一樣
+category_ui: # 留空或index
+tag_ui: # 留空或index
+
+# 設置網站背景
+# 可設置圖片 或者 顔色
+# 圖片格式 background: url(http://xxxxxx.com/xxx.jpg)
+# 顔色 background: '#49B202'
+# 留空 顯示白色
+background:
+
+# footer是否顯示圖片背景(與top_img一致)
+footer_bg: false
+
+# 背景特效
+# 避免卡頓，建議只開啟一個
+# canvas_ribbon 禁止彩帶背景
+# See: https://github.com/hustcc/ribbon.js
+canvas_ribbon:
+ enable: false
+ size: 150
+ alpha: 0.6
+ zIndex: -1
+ click_to_change: false
+ mobile: false # false 手機端不顯示 true 手機端顯示
+
+# 動態彩帶
+canvas_ribbon_piao:
+ enable: false
+ mobile: false # false 手機端不顯示 true 手機端顯示
+
+# canvas_nest
+# https://github.com/hustcc/canvas-nest.js
+canvas_nest:
+ enable: false
+ color: "0,0,255" #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
+ opacity: 0.7 # the opacity of line (0~1), default: 0.5.
+ zIndex: -1 # z-index property of the background, default: -1.
+ count: 99 # the number of lines, default: 99.
+ mobile: false # false 手機端不顯示 true 手機端顯示
+
+# 打字效果
+activate_power_mode:
+ enable: false
+ colorful: true # 冒光特效
+ shake: true # 抖動特效
+
+# 鼠標點擊效果
+# 避免卡頓，建議只開啟一個
+# 點擊煙火特效
+fireworks:
+ enable: false
+
+# 點擊出現愛心
+click_heart:
+ enable: false
+
+# 點擊出現文字，文字可自行修改
+ClickShowText:
+ enable: false
+ text:
+ - 本人
+ - 超帥
+ fontSize: 15px
+
+# 網站顯示模式
+# light 默認模式
+# dark 黑暗模式（不建議）
+display_mode: light
+
+# 美化頁面顯示
+beautify:
+ enable: false
+ title-prefix-icon: '\f0c1'
+ title-prefix-icon-color: "#F47466"
+
+# 全局字體
+font:
+ enable: false
+ font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
+ code-font: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number
+
+# 網站名字字體
+# 左上角網站名字 主頁居中網站名字
+blog_title_font:
+ font_link: https://fonts.googleapis.com/css?family=Titillium+Web #字體鏈接
+ font-family: Titillium Web, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
+
+# 水平分隔綫
+hr:
+ enable: false
+ icon: '\f21c' #fontawesome上圖標的Unicode
+ icon-top: -20px
+
+# 主頁subtitle
+subtitle:
+ enable: true
+ # 打字效果
+ effect: true
+ # 循環或者只打字一次
+ loop: true
+ # source調用第三方服務
+ # source: false 關閉調用
+ # source: 1 調用金山詞霸的每日一句（簡體）
+ # source: 2 調用一言網的一句話（簡體） #https://hitokoto.cn/
+ # source: 3 調用一句網（簡體） http://yijuzhan.com/
+ # source: 4 調用今日詩詞（簡體） https://www.jinrishici.com/
+ # subtitle 會先顯示 source , 再顯示 sub 的內容
+ source: false
+ # (如果有英文逗號' , '，請使用轉義字符 ,)
+ # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
+ sub:
+ - 今日事,今日畢
+ - Never put off till tomorrow what you can do today
+
+# fontawesome圖標
+# 默認使用的是 fontawesome v4版本的圖標
+fontawesome_v5:
+ enable: false
+
+#### 側邊欄 ####
+#-------------------------------------
+# 側邊欄顯示設置
+aside:
+ enable: true
+ mobile: true # 手機頁面（ 顯示寬度 < 768px ）是否顯示aside內容
+ position: right # left or right
+ card_author: true
+ card_announcement: true
+ card_recent_post: true
+ card_categories: true
+ card_tags: true
+ card_archives: true
+ card_webinfo: true
+
+# 網站公告
+announcement:
+ content: 感谢访问，若喜欢请收藏或者转发哦 ^_^
+
+# busuanzi count for PV / UV in site
+# 訪問人數
+busuanzi:
+ site_uv: true
+ site_pv: true
+ page_pv: true
+
+# 網頁開通時間
+# 格式: 月/日/年 時間
+# 也可以寫成 年/月/日 時間
+runtimeshow:
+ enable: true
+ start_date: 6/7/2018 00:00:00
+
+#### 右下角按鈕 ####
+#----------------------------------------------
+# 簡繁轉換
+translate:
+ enable: true
+ # 默認按鈕顯示文字
+ default: 繁
+ #網站默認語言，1: 繁體中文, 2: 簡體中文
+ defaultEncoding: 2
+ #延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0
+ translateDelay: 0
+ #博客網址
+ cookieDomain: "https://xxx/"
+ #當文字是簡體時，按鈕顯示的文字
+ msgToTraditionalChinese: "繁"
+ #當文字是繁體時，按鈕顯示的文字
+ msgToSimplifiedChinese: "簡"
+
+#閲讀模式
+readmode:
+ enable: true
+
+# dark mode
+darkmode:
+ enable: true
+ # dark mode和 light mode切換按鈕
+ button: true
+ # 自動切換 dark mode和 light mode
+ # autoChangeMode: 1 跟隨系統而變化，不支持的瀏覽器/系統將按照時間晚上6點到早上6點之間切換為 dark mode
+ # autoChangeMode: 2 只按照時間晚上6點到早上6點之間切換為 dark mode
+ # autoChangeMode: false 取消自動切換
+ autoChangeMode: 1
+
+#### other ####
+#------------------------------------------------
+
+# 圖片大圖查看模式
+# 可選 medium_zoom 或者 fancybox
+# 只選一個 或者 兩個都不選
+#--------------------------------------------
+# medium_zoom https://github.com/francoischalifour/medium-zoom
+medium_zoom:
+ enable: false
+
+# fancybox http://fancyapps.com/fancybox/3/
+fancybox:
+ enable: true
+
+# Snackbar 彈窗
+# https://github.com/polonel/SnackBar
+# position 彈窗位置
+# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
+snackbar:
+ enable: false
+ position: bottom-left
+ bg_light: "#49b1f5" #light mode時彈窗背景
+ bg_dark: "#2d3035" #dark mode時彈窗背景
+
+#百度推送
+baidu_push:
+ enable: false
+
+# https://instant.page/
+# prefetch預加載
+instantpage:
+ enable: true
+
+# https://github.com/vinta/pangu.js
+# 中英文之間添加空格
+pangu:
+ enable: false
+ field: page # page/post
+
+# Note (Bootstrap Callout)
+# https://muse.theme-next.org/docs/tag-plugins/note
+note:
+ # Note tag style values:
+ # - simple bs-callout old alert style. Default.
+ # - modern bs-callout new (v2-v3) alert style.
+ # - flat flat callout style with background, like on Mozilla or StackOverflow.
+ # - disabled disable all CSS styles import of note tag.
+ style: flat
+ icons: true
+ border_radius: 3
+ # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
+ # Offset also applied to label tag variables. This option can work with disabled note tag.
+ light_bg_offset: 0
+
+# 圖片懶加載
+# https://github.com/aFarkas/lazysizes
+lazyload:
+ enable: true
+
+# 避免重複網址分散seo
+canonical: true
+
+# 禁止百度轉碼
+disable_baidu_transformation: true
+
+# twitter分享自動帶上樣式
+# https://i.loli.net/2019/09/08/qm3RfvUCKbct1Wz.png
+twitter_meta: true
+
+# facebook QQ 等 分享自動帶上樣式
+# https://i.loli.net/2019/09/08/2wbFJEKloisRvhj.png
+Open_Graph_meta: true
+
+# 開啟hexo自帶的緩存，加快生成速度
+fragment_cache: true
+
+# CDN
+# 網站必須
+# 可根據需要自行添加js/css
+CDN_USE:
+ css:
+ - /css/index.css
+
+ js:
+ - https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js #/js/third-party/jquery.min.js
+ - /js/utils.js
+ - /js/main.js
+
+# CDN
+# 非必要不要修改
+CDN:
+ # comments
+ blueimp_md5: https://cdn.jsdelivr.net/npm/blueimp-md5/js/md5.min.js
+ gitalk: https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js
+ gitalk_css: https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css
+ valine: https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js
+ disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1.2/dist/disqus.js
+ disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1.2/dist/disqusjs.css
+ utterances: https://utteranc.es/client.js
+
+ # share
+ addtoany: https://static.addtoany.com/menu/page.js
+ sharejs: https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js
+ sharejs_css: https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css
+
+ # search
+ local_search: /js/search/local-search.js
+ algolia_js: /js/search/algolia.js
+ algolia_search: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.js
+ algolia_search_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.css
+
+ # math
+ mathjax: https://cdn.jsdelivr.net/npm/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML
+ katex: https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css
+ katex_copytex: https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js
+ katex_copytex_css: https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css
+ mermaid: https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js
+
+ # count
+ busuanzi: //busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js
+
+ # background effect
+ canvas_ribbon: /js/third-party/canvas-ribbon.js
+ canvas_ribbon_piao: /js/third-party/piao.js
+ canvas_nest: /js/third-party/canvas-nest.js
+
+ lazyload: https://cdn.jsdelivr.net/npm/lazysizes@latest/lazysizes.min.js
+ instantpage: https://cdn.jsdelivr.net/npm/instant.page@latest/instantpage.min.js
+ typed: https://cdn.jsdelivr.net/npm/typed.js
+ js_cookies: https://cdn.jsdelivr.net/npm/js-cookie/dist/js.cookie.min.js
+ pangu: https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js
+
+ # photo
+ fancybox_css: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css
+ fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js
+ medium_zoom: https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js
+
+ # snackbar
+ snackbar_css: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css
+ snackbar: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js
+
+ # 鼠標點擊特效
+ anime: https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js
+ activate_power_mode: /js/third-party/activate-power-mode.js
+ fireworks: /js/third-party/fireworks.js
+ click_heart: /js/third-party/click_heart.js
+ ClickShowText: /js/third-party/ClickShowText.js
+
+ # fontawesome
+ fontawesome_v4: https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
+ fontawesome_v5: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css
+
+ translate: /js/tw_cn.js
diff --git a/themes/butterfly/languages/default.yml b/themes/butterfly/languages/default.yml
new file mode 100644
index 00000000..441e6d53
--- /dev/null
+++ b/themes/butterfly/languages/default.yml
@@ -0,0 +1,106 @@
+sidebar:
+ catalog: Catalog
+ have_read: You've read
+
+footer:
+ driven: Driven
+ theme: Theme
+
+copy:
+ success: Copy successfully
+ error: Copy error
+ noSupport: The browser does not support
+
+page:
+ articles: Articles
+ tag: Tag
+ category: Category
+ archives: Archives
+
+sticky: Sticky
+no_title: No title
+
+post:
+ created: Created
+ updated: Updated
+ wordcount: Word count
+ min2read: "Reading time: %s min"
+ page_pv: Post View
+ comments: Comments
+ copyright:
+ author: Author
+ link: Link
+ copyright_notice: Copyright Notice
+ copyright_content: 'All articles in this blog are licensed under %s unless stating additionally.'
+ recommend: Recommend
+
+search: Search
+algolia_search:
+ input_placeholder: Search for Posts
+ hits_empty: "We didn't find any results for the search: ${query}."
+ hits_stats: "${hits} results found in ${time} ms"
+
+local_search:
+ label: Local search
+ input_placeholder: Search for Posts
+ hits_empty: "We didn't find any results for the search: ${query}"
+ powered_by: Powered by
+
+pagination:
+ prev: Previous Post
+ next: Next Post
+
+comment: Comment
+
+aside:
+ articles: Articles
+ tags: Tags
+ categories: Categories
+ card_announcement: Announcement
+ card_categories: Categories
+ card_tags: Tags
+ card_archives: Archives
+ card_recent_post: Recent Post
+ card_bookmark: Add to bookmark
+ card_webinfo:
+ headline: Info
+ article_name: Article
+ runtime_name: Run time
+ site_wordcount: Total Count
+ site_uv_name: UV
+ site_pv_name: PV
+
+donate: Donate
+share: Share
+bookmark:
+ title: Bookmark
+
+rightside:
+ readmode_title: Read Mode
+ font_plus_title: Increase font size
+ font_minus_title: Decrease font size
+ translate_title: Traditional Chinese and Simplified Chinese Conversion
+ night_mode_title: Dark Mode
+ back_to_top: Back to top
+ toc: Table of Contents
+ scroll_to_comment: Scroll to comment
+ setting: Setting
+
+runtime_unit: days
+
+copy_copyright:
+ author: Author
+ link: Link
+ source: Source
+ info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
+
+Snackbar:
+ bookmark:
+ message_prev: Press
+ message_next: to bookmark this page
+ chs_to_cht: Traditional Chinese Activated Manually
+ cht_to_chs: Simplified Chinese Activated Manually
+ day_to_night: Dark Mode Activated Manually
+ night_to_day: Light Mode Activated Manually
+
+error_title: Page not found
diff --git a/themes/butterfly/languages/en.yml b/themes/butterfly/languages/en.yml
new file mode 100644
index 00000000..441e6d53
--- /dev/null
+++ b/themes/butterfly/languages/en.yml
@@ -0,0 +1,106 @@
+sidebar:
+ catalog: Catalog
+ have_read: You've read
+
+footer:
+ driven: Driven
+ theme: Theme
+
+copy:
+ success: Copy successfully
+ error: Copy error
+ noSupport: The browser does not support
+
+page:
+ articles: Articles
+ tag: Tag
+ category: Category
+ archives: Archives
+
+sticky: Sticky
+no_title: No title
+
+post:
+ created: Created
+ updated: Updated
+ wordcount: Word count
+ min2read: "Reading time: %s min"
+ page_pv: Post View
+ comments: Comments
+ copyright:
+ author: Author
+ link: Link
+ copyright_notice: Copyright Notice
+ copyright_content: 'All articles in this blog are licensed under %s unless stating additionally.'
+ recommend: Recommend
+
+search: Search
+algolia_search:
+ input_placeholder: Search for Posts
+ hits_empty: "We didn't find any results for the search: ${query}."
+ hits_stats: "${hits} results found in ${time} ms"
+
+local_search:
+ label: Local search
+ input_placeholder: Search for Posts
+ hits_empty: "We didn't find any results for the search: ${query}"
+ powered_by: Powered by
+
+pagination:
+ prev: Previous Post
+ next: Next Post
+
+comment: Comment
+
+aside:
+ articles: Articles
+ tags: Tags
+ categories: Categories
+ card_announcement: Announcement
+ card_categories: Categories
+ card_tags: Tags
+ card_archives: Archives
+ card_recent_post: Recent Post
+ card_bookmark: Add to bookmark
+ card_webinfo:
+ headline: Info
+ article_name: Article
+ runtime_name: Run time
+ site_wordcount: Total Count
+ site_uv_name: UV
+ site_pv_name: PV
+
+donate: Donate
+share: Share
+bookmark:
+ title: Bookmark
+
+rightside:
+ readmode_title: Read Mode
+ font_plus_title: Increase font size
+ font_minus_title: Decrease font size
+ translate_title: Traditional Chinese and Simplified Chinese Conversion
+ night_mode_title: Dark Mode
+ back_to_top: Back to top
+ toc: Table of Contents
+ scroll_to_comment: Scroll to comment
+ setting: Setting
+
+runtime_unit: days
+
+copy_copyright:
+ author: Author
+ link: Link
+ source: Source
+ info: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
+
+Snackbar:
+ bookmark:
+ message_prev: Press
+ message_next: to bookmark this page
+ chs_to_cht: Traditional Chinese Activated Manually
+ cht_to_chs: Simplified Chinese Activated Manually
+ day_to_night: Dark Mode Activated Manually
+ night_to_day: Light Mode Activated Manually
+
+error_title: Page not found
diff --git a/themes/butterfly/languages/zh-CN.yml b/themes/butterfly/languages/zh-CN.yml
new file mode 100644
index 00000000..a78d07e4
--- /dev/null
+++ b/themes/butterfly/languages/zh-CN.yml
@@ -0,0 +1,108 @@
+sidebar:
+ catalog: 目录
+ have_read: 你已经读了
+
+footer:
+ driven: 驱动
+ theme: 主题
+
+copy:
+ success: 复制成功
+ error: 复制错误
+ noSupport: 浏览器不支持
+
+page:
+ articles: 文章总览
+ tag: 标签
+ category: 分类
+ archives: 归档
+
+sticky: 置顶
+no_title: 无题
+
+post:
+ created: 发表于
+ updated: 更新于
+ wordcount: 字数总计
+ min2read: "阅读时长: %s 分钟"
+ page_pv: 阅读量
+ comments: 评论数
+ copyright:
+ author: 文章作者
+ link: 文章链接
+ copyright_notice: 版权声明
+ copyright_content: '本博客所有文章除特别声明外，均采用
+ %s 许可协议。转载请注明来自 %s！'
+ recommend: 相关推荐
+
+search: 搜索
+algolia_search:
+ input_placeholder: 搜索文章
+ hits_empty: "找不到您查询的内容:${query}"
+ hits_stats: "找到 ${hits} 条结果，用时 ${time} 毫秒"
+
+local_search:
+ label: 本地搜索
+ input_placeholder: 搜索文章
+ hits_empty: "找不到您查询的内容:${query}"
+ powered: "提供支持"
+ by: 由
+
+pagination:
+ prev: 上一篇
+ next: 下一篇
+
+comment: 评论
+
+aside:
+ articles: 文章
+ tags: 标签
+ categories: 分类
+ card_announcement: 公告
+ card_categories: 分类
+ card_tags: 标签
+ card_archives: 归档
+ card_recent_post: 最新文章
+ card_bookmark: 加入书签
+ card_webinfo:
+ headline: 网站资讯
+ article_name: 文章数目
+ runtime_name: 已运行时间
+ site_wordcount: 本站总字数
+ site_uv_name: 本站访客数
+ site_pv_name: 本站总访问量
+
+donate: 打赏
+share: 分享
+bookmark:
+ title: 添加书签
+
+rightside:
+ readmode_title: 阅读模式
+ font_plus_title: 放大字体
+ font_minus_title: 缩小字体
+ translate_title: 简繁转换
+ night_mode_title: 夜间模式
+ back_to_top: 回到顶部
+ toc: 目录
+ scroll_to_comment: 直达评论
+ setting: 设置
+
+runtime_unit: 天
+
+copy_copyright:
+ author: 作者
+ link: 链接
+ source: 来源
+ info: 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
+
+Snackbar:
+ bookmark:
+ message_prev: 按
+ message_next: 键将本页加入书签
+ chs_to_cht: 你已切换为繁体
+ cht_to_chs: 你已切换为简体
+ day_to_night: 你已切换为深色模式
+ night_to_day: 你已切换为浅色模式
+
+error_title: 页面没有找到
diff --git a/themes/butterfly/languages/zh-TW.yml b/themes/butterfly/languages/zh-TW.yml
new file mode 100644
index 00000000..bbdf11a0
--- /dev/null
+++ b/themes/butterfly/languages/zh-TW.yml
@@ -0,0 +1,110 @@
+sidebar:
+ catalog: 目錄
+ have_read: 你已經讀了
+
+footer:
+ driven: Power by
+ theme: Theme
+
+copy:
+ success: 複製成功
+ error: 複製錯誤
+ noSupport: 瀏覽器不支持
+
+page:
+ articles: 文章總覽
+ tag: 標籤
+ category: 分類
+ archives: 歸檔
+
+sticky: 置頂
+no_title: 無題
+
+post:
+ created: 發表於
+ updated: 更新於
+ wordcount: 字數總計
+ min2read: "閱讀時長: %s 分鐘"
+ page_pv: 閱讀量
+ comments: 評論數
+ copyright:
+ author: 文章作者
+ link: 文章鏈接
+ copyright_notice: 版權聲明
+ copyright_content: '本博客所有文章除特別聲明外，均採用
+ %s 許可協議。轉載請註明來自 %s！'
+ recommend: 相關推薦
+
+search: 搜索
+algolia_search:
+ input_placeholder: 搜索文章
+ hits_empty: "找不到您查詢的內容:${query}"
+ hits_stats: "找到 ${hits} 條結果，用時 ${time} 毫秒"
+
+local_search:
+ label: 本地搜索
+ input_placeholder: 搜索文章
+ hits_empty: "找不到您查詢的內容:${query}"
+ powered: "提供支持"
+ by: 由
+
+pagination:
+ prev: 上一篇
+ next: 下一篇
+
+comment: 評論
+
+aside:
+ articles: 文章
+ tags: 標籤
+ categories: 分類
+ card_announcement: 公告
+ card_categories: 分類
+ card_tags: 標籤
+ card_archives: 歸檔
+ card_recent_post: 最新文章
+ card_bookmark: 加入書籤
+ card_webinfo:
+ headline: 網站資訊
+ article_name: 文章數目
+ runtime_name: 已運行時間
+ site_wordcount: 本站總字數
+ site_uv_name: 本站訪客數
+ site_pv_name: 本站總訪問量
+
+donate: 打賞
+share: 分享
+bookmark:
+ title: 添加書籤
+
+rightside:
+ readmode_title: 閱讀模式
+ font_plus_title: 放大字體
+ font_minus_title: 縮小字體
+ translate_title: 簡繁轉換
+ night_mode_title: 夜間模式
+ back_to_top: 回到頂部
+ toc: 目錄
+ scroll_to_comment: 直達評論
+ setting: 設置
+
+runtime_unit: 天
+
+copy_copyright:
+ author: 作者
+ link: 鏈接
+ source: 來源
+ info: 著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。
+
+Snackbar:
+ bookmark:
+ message_prev: 按
+ message_next: 鍵將本頁加入書籤
+ chs_to_cht: 你已切換為繁體
+ cht_to_chs: 你已切換為簡體
+ day_to_night: 你已切換為深色模式
+ night_to_day: 你已切換為淺色模式
+
+error_title: 頁面沒有找到
+
+
diff --git a/themes/butterfly/layout/404.pug b/themes/butterfly/layout/404.pug
new file mode 100644
index 00000000..4dc3c92e
--- /dev/null
+++ b/themes/butterfly/layout/404.pug
@@ -0,0 +1,23 @@
+- var top_img = theme.error_404.background || theme.default_top_img
+- var bg_img = `background-image: url(${top_img})`
+
+doctype html
+html(lang=config.language data-theme=theme.display_mode)
+ head
+ include includes/head.pug
+ body
+ if theme.fireworks && theme.fireworks.enable
+ canvas.fireworks
+
+ include includes/mobile-sidebar/index.pug
+
+ nav#nav.error-no-found(style=bg_img)
+ include includes/header/header.pug
+ #error_info.is-center
+ h1#error_title= '404'
+ #error_subtitle= theme.error_404.subtitle
+ include includes/rightside.pug
+ include includes/search/index.pug
+ each item in theme.CDN_USE.js
+ script(src=url_for(item))
+ include includes/additional-js.pug
diff --git a/themes/butterfly/layout/archive.pug b/themes/butterfly/layout/archive.pug
new file mode 100644
index 00000000..faa485c1
--- /dev/null
+++ b/themes/butterfly/layout/archive.pug
@@ -0,0 +1,8 @@
+extends includes/layout.pug
+
+block content
+ include ./includes/mixins/article-sort.pug
+ #archive
+ .article-sort-title= _p('page.articles') + ' - ' + site.posts.length
+ +articleSort(page.posts)
+ include includes/pagination.pug
\ No newline at end of file
diff --git a/themes/butterfly/layout/category.pug b/themes/butterfly/layout/category.pug
new file mode 100644
index 00000000..c8b5cb37
--- /dev/null
+++ b/themes/butterfly/layout/category.pug
@@ -0,0 +1,14 @@
+extends includes/layout.pug
+
+block content
+ if theme.category_ui == 'index'
+ include ./includes/mixins/UI.pug
+ #recent-posts.recent-posts.category_ui
+ +UI_NEW(page.posts)
+ include includes/pagination.pug
+ else
+ include ./includes/mixins/article-sort.pug
+ #category
+ .article-sort-title= _p('page.category') + ' - ' + page.category
+ +articleSort(page.posts)
+ include includes/pagination.pug
\ No newline at end of file
diff --git a/themes/butterfly/layout/flink.pug b/themes/butterfly/layout/flink.pug
new file mode 100644
index 00000000..532dcc58
--- /dev/null
+++ b/themes/butterfly/layout/flink.pug
@@ -0,0 +1,20 @@
+#page
+ .flink#article-container
+ each i in site.data.link
+ h2= i.class_name
+ .post-cards
+ .md-links
+ each item in i.link_list
+ .md-links-item
+ a(href=item.link title=item.name target="_blank")
+ if theme.lazyload.enable
+ img.lazyload(data-src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
+ else
+ img(src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
+ .md-links-title= item.name
+ .md-links-des= item.descr
+ != page.content
+ if page.comments !== false
+ include includes/comments/index.pug
+
+
diff --git a/themes/butterfly/layout/includes/additional-js.pug b/themes/butterfly/layout/includes/additional-js.pug
new file mode 100644
index 00000000..4393e511
--- /dev/null
+++ b/themes/butterfly/layout/includes/additional-js.pug
@@ -0,0 +1,65 @@
+if theme.translate && theme.translate.enable
+ script(src=url_for(theme.CDN.translate))
+
+if (theme.medium_zoom && theme.medium_zoom.enable)
+ script(src=url_for(theme.CDN.medium_zoom))
+
+if (theme.fancybox && theme.fancybox.enable)
+ script(src=url_for(theme.CDN.fancybox))
+
+include ./math/index.pug
+
+if theme.fireworks && theme.fireworks.enable
+ script(src=url_for(theme.CDN.anime))
+ script(src=url_for(theme.CDN.fireworks))
+
+if (theme.snackbar && theme.snackbar.enable)
+ script(src=url_for(theme.CDN.snackbar))
+
+if (theme.canvas_ribbon && theme.canvas_ribbon.enable)
+ include ./third-party/canvas-ribbon.pug
+
+if (theme.canvas_ribbon_piao && theme.canvas_ribbon_piao.enable)
+ include ./third-party/canvas-ribbon-piao.pug
+
+if (theme.canvas_nest && theme.canvas_nest.enable)
+ include ./third-party/canvas-nest.pug
+
+if theme.activate_power_mode.enable
+ script(src=url_for(theme.CDN.activate_power_mode))
+ script.
+ POWERMODE.colorful = #{theme.activate_power_mode.colorful};
+ POWERMODE.shake = #{theme.activate_power_mode.shake};
+ document.body.addEventListener('input', POWERMODE);
+
+if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
+ script(async src=url_for(theme.CDN.busuanzi))
+
+if theme.instantpage.enable
+ script(src=url_for(theme.CDN.instantpage) type="module")
+
+if theme.lazyload.enable
+ script(src=url_for(theme.CDN.lazyload) async="")
+
+//- 鼠標特效
+if theme.click_heart && theme.click_heart.enable
+ script(src=url_for(theme.CDN.click_heart))
+
+if theme.ClickShowText && theme.ClickShowText.enable
+ script(src=url_for(theme.CDN.ClickShowText))
+
+if theme.pangu && theme.pangu.enable
+ include ./third-party/pangu.pug
+
+//- search
+if theme.algolia_search && theme.algolia_search.enable
+ script(src=url_for(theme.CDN.algolia_js))
+else if theme.local_search && theme.local_search.enable
+ script(src=url_for(theme.CDN.local_search))
+
+//- mermaid
+if theme.mermaid.enable
+ include ./math/mermaid.pug
+
+if is_home()
+ include ./head/subtitle.pug
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/comments/disqus.pug b/themes/butterfly/layout/includes/comments/disqus.pug
new file mode 100644
index 00000000..661f53ff
--- /dev/null
+++ b/themes/butterfly/layout/includes/comments/disqus.pug
@@ -0,0 +1,24 @@
+#disqus_thread
+script.
+ var disqus_config = function () {
+ this.page.url = '!{ page.permalink }';
+ this.page.identifier = '!{ page.path }';
+ this.page.title = '!{ page.title }';
+ };
+ (function() {
+ var d = document, s = d.createElement('script');
+ s.src = 'https://!{theme.disqus.shortname}.disqus.com/embed.js';
+ s.setAttribute('data-timestamp', +new Date());
+ (d.head || d.body).appendChild(s);
+ })();
+
+if is_post() && theme.disqus.count
+ script.
+ function getDisqusCount() {
+ var d = document, s = d.createElement('script');
+ s.src = 'https://!{theme.disqus.shortname}.disqus.com/count.js';
+ s.id = 'dsq-count-scr';
+ (d.head || d.body).appendChild(s);
+ }
+
+ window.addEventListener('load', getDisqusCount, false);
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/comments/disqusjs.pug b/themes/butterfly/layout/includes/comments/disqusjs.pug
new file mode 100644
index 00000000..d1ddd2f0
--- /dev/null
+++ b/themes/butterfly/layout/includes/comments/disqusjs.pug
@@ -0,0 +1,24 @@
+#disqus_thread
+script(src=url_for(theme.CDN.disqusjs))
+script.
+ var dsqjs = new DisqusJS({
+ shortname: '!{theme.disqusjs.shortname}',
+ siteName: "!{theme.disqusjs.siteName}",
+ identifier: '!{ page.path }',
+ url: '!{ page.permalink }',
+ title: '!{ page.title }',
+ api: '!{theme.disqusjs.api}',
+ apikey: '!{theme.disqusjs.apikey}',
+ admin: '!{theme.disqusjs.admin}',
+ adminLabel: '!{theme.disqusjs.adminLabel}'
+ });
+
+if is_post() && theme.disqusjs.count
+ script.
+ function getDisqusCount() {
+ var d = document, s = d.createElement('script');
+ s.src = 'https://!{theme.disqusjs.shortname}.disqus.com/count.js';
+ s.id = 'dsq-count-scr';
+ (d.head || d.body).appendChild(s);
+ }
+ window.addEventListener('load', getDisqusCount, false);
diff --git a/themes/butterfly/layout/includes/comments/gitalk.pug b/themes/butterfly/layout/includes/comments/gitalk.pug
new file mode 100644
index 00000000..9a1fee97
--- /dev/null
+++ b/themes/butterfly/layout/includes/comments/gitalk.pug
@@ -0,0 +1,27 @@
+#gitalk-container
+script.
+ var gitalk = new Gitalk({
+ clientID: '!{theme.gitalk.client_id}',
+ clientSecret: '!{theme.gitalk.client_secret}',
+ repo: '!{theme.gitalk.repo}',
+ owner: '!{theme.gitalk.owner}',
+ admin: ['!{theme.gitalk.admin}'],
+ id: md5(decodeURI(location.pathname)),
+ language: '!{theme.gitalk.language}',
+ perPage: !{theme.gitalk.perPage},
+ distractionFreeMode: !{theme.gitalk.distractionFreeMode},
+ pagerDirection: '!{theme.gitalk.pagerDirection}',
+ createIssueManually: !{theme.gitalk.createIssueManually},
+ updateCountCallback: commentCount
+ })
+ gitalk.render('gitalk-container')
+
+ function commentCount(n){
+ try {
+ document.getElementsByClassName('gitalk-comment-count')[0].innerHTML= n
+ } catch (e) {
+ return false
+ }
+ }
+
+
diff --git a/themes/butterfly/layout/includes/comments/index.pug b/themes/butterfly/layout/includes/comments/index.pug
new file mode 100644
index 00000000..030ae23c
--- /dev/null
+++ b/themes/butterfly/layout/includes/comments/index.pug
@@ -0,0 +1,26 @@
+- var d = theme.disqus && theme.disqus.enable
+- var dj = theme.disqusjs && theme.disqusjs.enable
+- var l = theme.laibili && theme.laibili.enable
+- var gt = theme.gitalk && theme.gitalk.enable
+- var v = theme.valine && theme.valine.enable
+- var u = theme.utterances && theme.utterances.enable
+- var isComment = d || dj || l || gt || v || u
+
+if isComment
+ hr
+ #post-comment
+ .comment_headling
+ i.fa.fa-comments.fa-fw(aria-hidden="true")
+ span= ' ' + _p('comment')
+ if d
+ include ./disqus.pug
+ else if dj
+ include ./disqusjs.pug
+ else if l
+ include ./laibili.pug
+ else if gt
+ include ./gitalk.pug
+ else if v
+ include ./valine.pug
+ else if u
+ include ./utterances.pug
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/comments/laibili.pug b/themes/butterfly/layout/includes/comments/laibili.pug
new file mode 100644
index 00000000..cd0fc75f
--- /dev/null
+++ b/themes/butterfly/layout/includes/comments/laibili.pug
@@ -0,0 +1,10 @@
+#lv-container(data-id="city" data-uid=theme.laibili.uid)
+ script.
+ (function(d, s) {
+ var j, e = d.getElementsByTagName(s)[0];
+ if (typeof LivereTower === 'function') { return; }
+ j = d.createElement(s);
+ j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
+ j.async = true;
+ e.parentNode.insertBefore(j, e);
+ })(document, 'script');
diff --git a/themes/butterfly/layout/includes/comments/utterances.pug b/themes/butterfly/layout/includes/comments/utterances.pug
new file mode 100644
index 00000000..d9cc76db
--- /dev/null
+++ b/themes/butterfly/layout/includes/comments/utterances.pug
@@ -0,0 +1,21 @@
+script#utterances_comment(src=theme.CDN.utterances
+ repo=theme.utterances.repo
+ issue-term=theme.utterances.issue_term
+ theme= theme.display_mode === 'dark' ? theme.utterances.dark_theme : theme.utterances.light_theme
+ crossorigin="anonymous"
+ async)
+
+if theme.darkmode.enable
+ script.
+ var themeNow = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
+ document.getElementById('utterances_comment').setAttribute('theme',themeNow)
+
+ function utterancesTheme () {
+ var theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
+ const message = {
+ type: 'set-theme',
+ theme: theme
+ };
+ const iframe = document.querySelector('.utterances-frame');
+ iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+ }
diff --git a/themes/butterfly/layout/includes/comments/valine.pug b/themes/butterfly/layout/includes/comments/valine.pug
new file mode 100644
index 00000000..71a771cd
--- /dev/null
+++ b/themes/butterfly/layout/includes/comments/valine.pug
@@ -0,0 +1,23 @@
+#vcomment.vcomment
+script(src=url_for(theme.CDN.valine))
+script.
+ var GUEST_INFO = ['nick','mail','link'];
+ var guest_info = '#{ theme.valine.guest_info }'.split(',').filter(function(item){
+ return GUEST_INFO.indexOf(item) > -1
+ });
+ guest_info = guest_info.length == 0 ? GUEST_INFO :guest_info;
+
+ window.valine = new Valine({
+ el:'#vcomment',
+ notify: #{theme.valine.notify},
+ verify: #{theme.valine.verify},
+ appId: '#{theme.valine.appId}',
+ appKey: '#{theme.valine.appKey}',
+ placeholder: '#{theme.valine.placeholder}',
+ avatar: '#{theme.valine.avatar}',
+ meta: guest_info,
+ pageSize: '#{theme.valine.pageSize}',
+ lang: '#{theme.valine.lang}',
+ recordIP: #{theme.valine.recordIP},
+ serverURLs: '#{theme.valine.serverURLs}'
+ });
diff --git a/themes/butterfly/layout/includes/footer.pug b/themes/butterfly/layout/includes/footer.pug
new file mode 100644
index 00000000..30b238f1
--- /dev/null
+++ b/themes/butterfly/layout/includes/footer.pug
@@ -0,0 +1,24 @@
+#footer-wrap
+ - var now = new Date()
+ - var nowYear = now.getFullYear()
+ if theme.since && theme.since != nowYear
+ .copyright!= `©${theme.since} - ${nowYear} By ${config.author}`
+ else
+ .copyright!= `©${nowYear} By ${config.author}`
+ if theme.footer_copyright.enable
+ .framework-info
+ span= _p('footer.driven') + ' '
+ a(href='https://hexo.io')
+ span Hexo
+ span.footer-separator |
+ span= _p('footer.theme') + ' '
+ a(href='https://github.com/jerryc127/hexo-theme-butterfly')
+ span Butterfly
+ if theme.footer_custom_text
+ .footer_custom_text!=`${theme.footer_custom_text}`
+ if theme.ICP.enable
+ .icp
+ a(href=theme.ICP.url)
+ if theme.ICP.icon
+ img.icp-icon(src=url_for(theme.ICP.icon))
+ span=theme.ICP.text
diff --git a/themes/butterfly/layout/includes/head.pug b/themes/butterfly/layout/includes/head.pug
new file mode 100644
index 00000000..febb1ee9
--- /dev/null
+++ b/themes/butterfly/layout/includes/head.pug
@@ -0,0 +1,105 @@
+- var pageTitle
+- if (is_archive()) pageTitle = _p('page.archives')
+- else if (is_tag()) pageTitle = _p('page.tag') + ': ' + page.tag
+- else if (is_category()) pageTitle = _p('page.category') + ': ' + page.category
+- else if (is_month()) pageTitle += ': ' + page.month + '/' + page.year
+- else if (is_year()) pageTitle += ': ' + page.year
+- else if (is_current('/404.html', [strict])) pageTitle = _p('error_title')
+- else pageTitle = page.title || config.title || ''
+
+- var isSubtitle = config.subtitle ? ' - ' + config.subtitle : ''
+- var tabTitle = is_home() || !pageTitle ? config.title + isSubtitle : pageTitle + ' | ' + config.title
+
+- var pageDescription = page.description || page.title || config.description
+- var pageKeywords
+- if (page.tags && page.tags.data) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',')
+- else pageKeywords = Array.isArray(config.keywords) ? (config.keywords).join(','): ([]).join(',') || config.keywords
+- var pageAuthor = config.email ? config.author + ',' + config.email : config.author
+- var pageCopyright = config.copyright || config.author
+- var without_html = url.replace('index.html', '')
+
+meta(charset='UTF-8')
+meta(http-equiv="X-UA-Compatible" content="IE=edge")
+meta(name="viewport" content="width=device-width,initial-scale=1")
+title= tabTitle
+meta(name="description" content=pageDescription)
+if pageKeywords
+ meta(name="keywords" content=pageKeywords)
+meta(name="author" content=pageAuthor)
+meta(name="copyright" content=pageCopyright)
+meta(name ="format-detection" content="telephone=no")
+!=favicon_tag(theme.favicon || config.favicon)
+
+if theme.disable_baidu_transformation
+ meta(http-equiv="Cache-Control" content="no-transform")
+ meta(http-equiv="Cache-Control" content="no-siteapp")
+
+if page.hide == true
+ meta(name="robots" content="noindex")
+
+if theme.douban
+ if theme.douban.meta && (is_current('/movies/', [strict]) || is_current('/books/', [strict]) || is_current('/games/', [strict]))
+ meta(name="referrer" content="no-referrer")
+
+//- 預解析
+!=partial('includes/head/dns_prefetch', {}, {cache:theme.fragment_cache})
+
+//- 網站驗證
+!=partial('includes/head/site_verification', {}, {cache:theme.fragment_cache})
+
+//- Open_Graph
+include ./head/Open_Graph.pug
+
+//- PWA
+if (theme.pwa && theme.pwa.enable)
+ !=partial('includes/head/pwa', {}, {cache:theme.fragment_cache})
+
+script(src=url_for(theme.CDN.js_cookies))
+
+if theme.darkmode.enable
+ !=partial('includes/head/darkmode', {}, {cache:theme.fragment_cache})
+
+each item in theme.CDN_USE.css
+ link(rel='stylesheet', href=url_for(item))
+
+if theme.fontawesome_v5 && theme.fontawesome_v5.enable
+ link(rel='stylesheet', href=url_for(theme.CDN.fontawesome_v5))
+else
+ link(rel='stylesheet', href=url_for(theme.CDN.fontawesome_v4))
+
+if (theme.fancybox && theme.fancybox.enable)
+ link(rel='stylesheet', href=url_for(theme.CDN.fancybox_css))
+
+if (theme.snackbar && theme.snackbar.enable)
+ link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css))
+
+if theme.canonical
+ link(rel="canonical" href=without_html)
+
+if is_post()
+ if(page.prev)
+ link(rel="prev" title=page.prev.title href=url_for(page.prev.permalink) )
+ if(page.next)
+ link(rel="next" title=page.next.title href=url_for(page.next.permalink) )
+
+if theme.algolia_search.enable
+ link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.algolia_search_css))
+ script(src=url_for(theme.CDN.algolia_search) defer)
+
+//- comment css
+include ./head/comment.pug
+
+//- google_adsense
+!=partial('includes/head/google_adsense', {}, {cache:theme.fragment_cache})
+
+//- analytics
+!=partial('includes/head/analytics', {}, {cache:theme.fragment_cache})
+
+if theme.blog_title_font.font_link
+ link(rel='stylesheet', href=url_for(theme.blog_title_font.font_link))
+
+//- global config
+!=partial('includes/head/config', {}, {cache:theme.fragment_cache})
+
+include ./head/config_site.pug
+include ./head/noscript.pug
diff --git a/themes/butterfly/layout/includes/head/Open_Graph.pug b/themes/butterfly/layout/includes/head/Open_Graph.pug
new file mode 100644
index 00000000..ff4a39bc
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/Open_Graph.pug
@@ -0,0 +1,17 @@
+- var contentType = is_post() ? 'article' : 'website'
+
+//- twitter meta
+if theme.twitter_meta
+ meta(name="twitter:card" content="summary")
+ meta(name="twitter:title" content=pageTitle)
+ meta(name="twitter:description" content=pageDescription)
+ meta(name="twitter:image" content=full_url_for(page.cover || theme.avatar.img))
+
+//- Open_Graph
+if theme.Open_Graph_meta
+ meta(property="og:type" content=contentType)
+ meta(property="og:title" content=pageTitle)
+ meta(property="og:url" content=without_html)
+ meta(property="og:site_name" content=config.title)
+ meta(property="og:description" content=pageDescription)
+ meta(property="og:image" content=full_url_for(page.cover || theme.avatar.img))
diff --git a/themes/butterfly/layout/includes/head/analytics.pug b/themes/butterfly/layout/includes/head/analytics.pug
new file mode 100644
index 00000000..768b3e60
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/analytics.pug
@@ -0,0 +1,22 @@
+if theme.baidu_analytics
+ script.
+ var _hmt = _hmt || [];
+ (function() {
+ var hm = document.createElement("script");
+ hm.src = "https://hm.baidu.com/hm.js?!{theme.baidu_analytics}";
+ var s = document.getElementsByTagName("script")[0];
+ s.parentNode.insertBefore(hm, s);
+ })();
+
+if theme.google_analytics
+ script.
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', '!{theme.google_analytics}', 'auto');
+ ga('send', 'pageview');
+
+if theme.tencent_analytics
+ script(src=`https://tajs.qq.com/stats?sId=${theme.tencent_analytics}` charset="UTF-8")
diff --git a/themes/butterfly/layout/includes/head/comment.pug b/themes/butterfly/layout/includes/head/comment.pug
new file mode 100644
index 00000000..91d5cf05
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/comment.pug
@@ -0,0 +1,8 @@
+if (theme.disqusjs && theme.disqusjs.enable && page.comments !== false && !is_tag() && !is_category() && !is_archive() && !is_home())
+ link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.disqusjs_css))
+
+if (theme.gitalk && theme.gitalk.enable && page.comments !== false && !is_tag() && !is_category() && !is_archive() && !is_home())
+ link(rel="stylesheet" type="text/css" href=url_for(theme.CDN.gitalk_css))
+ script(src=url_for(theme.CDN.gitalk))
+ script(src=url_for(theme.CDN.blueimp_md5))
+
diff --git a/themes/butterfly/layout/includes/head/config.pug b/themes/butterfly/layout/includes/head/config.pug
new file mode 100644
index 00000000..63e854b4
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/config.pug
@@ -0,0 +1,108 @@
+-
+ var algolia = 'undefined';
+ var env = process.env;
+ if (theme.algolia_search.enable) {
+ algolia = JSON.stringify({
+ appId: env.ALGOLIA_APP_ID || config.algolia.appId || config.algolia.applicationID,
+ apiKey: env.ALGOLIA_API_KEY || config.algolia.apiKey,
+ indexName: env.ALGOLIA_INDEX_NAME || config.algolia.indexName,
+ hits: theme.algolia_search.hits,
+ // search languages
+ languages: {
+ input_placeholder: _p("algolia_search.input_placeholder"),
+ hits_empty: _p("algolia_search.hits_empty"),
+ hits_stats: _p("algolia_search.hits_stats")
+ }
+ })
+ }
+
+ var localSearch = 'undefined';
+ if (theme.local_search && theme.local_search.enable) {
+ localSearch = JSON.stringify({
+ path: config.search.path,
+ languages: {
+ // search languages
+ hits_empty: _p("local_search.hits_empty")
+ }
+ })
+ }
+ var translate = 'undefined';
+ if (theme.translate && theme.translate.enable){
+ translate = JSON.stringify({
+ defaultEncoding: theme.translate.defaultEncoding,
+ translateDelay: theme.translate.translateDelay,
+ cookieDomain: theme.translate.cookieDomain,
+ msgToTraditionalChinese: theme.translate.msgToTraditionalChinese,
+ msgToSimplifiedChinese: theme.translate.msgToSimplifiedChinese
+ })
+ }
+
+ var copyright = 'undefined' ;
+ if (theme.copy.enable && theme.copy.copyright){
+ copyright = JSON.stringify({
+ languages: {
+ author: _p("copy_copyright.author") + ': ' + config.author,
+ link: _p("copy_copyright.link") + ': ',
+ source: _p("copy_copyright.source") + ': ' + config.title,
+ info: _p("copy_copyright.info")
+ }
+ })
+ }
+
+ var ClickShowText = 'undefined';
+ if (theme.ClickShowText && theme.ClickShowText.enable) {
+ ClickShowText = JSON.stringify({
+ text: theme.ClickShowText.text.join(","),
+ fontSize: theme.ClickShowText.fontSize
+ })
+ }
+
+
+ var Snackbar = 'undefined';
+ if (theme.snackbar && theme.snackbar.enable) {
+ Snackbar = JSON.stringify({
+ bookmark: {
+ message_prev: _p("Snackbar.bookmark.message_prev"),
+ message_next: _p("Snackbar.bookmark.message_next")
+ },
+ chs_to_cht: _p("Snackbar.chs_to_cht"),
+ cht_to_chs: _p("Snackbar.cht_to_chs"),
+ day_to_night: _p("Snackbar.day_to_night"),
+ night_to_day: _p("Snackbar.night_to_day"),
+ bgLight: theme.snackbar.bg_light,
+ bgDark: theme.snackbar.bg_dark,
+ position: theme.snackbar.position,
+ })
+ }
+
+script.
+ var GLOBAL_CONFIG = {
+ root: '!{config.root}',
+ algolia: !{algolia},
+ localSearch: !{localSearch},
+ translate: !{translate},
+ copy: {
+ success: '!{_p("copy.success")}',
+ error: '!{_p("copy.error")}',
+ noSupport: '!{_p("copy.noSupport")}'
+ },
+ bookmark: {
+ message_prev: '!{_p("Snackbar.bookmark.message_prev")}',
+ message_next: '!{_p("Snackbar.bookmark.message_next")}'
+ },
+ runtime_unit: '!{_p("runtime_unit")}',
+ runtime: !{theme.runtimeshow.enable},
+ copyright: !{copyright},
+ ClickShowText: !{ClickShowText},
+ medium_zoom: !{theme.medium_zoom.enable},
+ fancybox: !{theme.fancybox.enable},
+ Snackbar: !{Snackbar},
+ baiduPush: !{theme.baidu_push && theme.baidu_push.enable},
+ highlightCopy: !{theme.highlight_copy},
+ highlightLang: !{theme.highlight_lang},
+ highlightShrink: '!{theme.highlight_shrink}',
+ isFontAwesomeV5: !{theme.fontawesome_v5 && theme.fontawesome_v5.enable},
+ isPhotoFigcaption: !{theme.photofigcaption}
+
+ }
+
diff --git a/themes/butterfly/layout/includes/head/config_site.pug b/themes/butterfly/layout/includes/head/config_site.pug
new file mode 100644
index 00000000..1d7ae99b
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/config_site.pug
@@ -0,0 +1,7 @@
+script.
+ var GLOBAL_CONFIG_SITE = {
+ isPost: !{is_post()},
+ isHome: !{is_home()},
+ isSidebar: !{is_post() && page.toc !== false && theme.toc.enable && (toc(page.content) !== '' || page.encrypt == true )}
+ }
+
diff --git a/themes/butterfly/layout/includes/head/darkmode.pug b/themes/butterfly/layout/includes/head/darkmode.pug
new file mode 100644
index 00000000..bd5961f8
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/darkmode.pug
@@ -0,0 +1,47 @@
+script.
+ var autoChangeMode = '#{theme.darkmode.autoChangeMode}'
+ var t = Cookies.get("theme")
+ if (autoChangeMode == '1'){
+ var isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
+ var isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches
+ var isNotSpecified = window.matchMedia("(prefers-color-scheme: no-preference)").matches
+ var hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
+
+ if (t === undefined){
+ if (isLightMode) activateLightMode()
+ else if (isDarkMode) activateDarkMode()
+ else if (isNotSpecified || hasNoSupport){
+ console.log('You specified no preference for a color scheme or your browser does not support it. I Schedule dark mode during night time.')
+ var now = new Date()
+ var hour = now.getHours()
+ var isNight = hour < 6 || hour >= 18
+ isNight ? activateDarkMode() : activateLightMode()
+ }
+ } else if (t == 'light') activateLightMode()
+ else activateDarkMode()
+
+ } else if (autoChangeMode == '2'){
+ now = new Date();
+ hour = now.getHours();
+ isNight = hour < 6 || hour >= 18
+ if(t === undefined) isNight? activateDarkMode() : activateLightMode()
+ else if (t === 'light') activateLightMode()
+ else activateDarkMode()
+ } else {
+ if ( t == 'dark' ) activateDarkMode()
+ else if ( t == 'light') activateLightMode()
+ }
+
+ function activateDarkMode(){
+ document.documentElement.setAttribute('data-theme', 'dark')
+ if (document.querySelector('meta[name="theme-color"]') !== null){
+ document.querySelector('meta[name="theme-color"]').setAttribute('content','#000')
+ }
+ }
+ function activateLightMode(){
+ document.documentElement.setAttribute('data-theme', 'light')
+ if (document.querySelector('meta[name="theme-color"]') !== null){
+ document.querySelector('meta[name="theme-color"]').setAttribute('content','#fff')
+ }
+ }
+
diff --git a/themes/butterfly/layout/includes/head/dns_prefetch.pug b/themes/butterfly/layout/includes/head/dns_prefetch.pug
new file mode 100644
index 00000000..1bfccf74
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/dns_prefetch.pug
@@ -0,0 +1,16 @@
+link(rel="preconnect" href="//cdn.jsdelivr.net")
+
+if theme.google_analytics
+ link(rel="preconnect" href="https://www.google-analytics.com" crossorigin)
+
+if theme.baidu_analytics
+ link(rel="preconnect" href="https://hm.baidu.com")
+
+if theme.tencent_analytics
+ link(rel="preconnect" href="http://ta.qq.com")
+
+if theme.blog_title_font.font_link
+ link(rel="preconnect" href="https://fonts.googleapis.com" crossorigin)
+
+if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
+ link(rel="preconnect" href="//busuanzi.ibruce.info")
diff --git a/themes/butterfly/layout/includes/head/google_adsense.pug b/themes/butterfly/layout/includes/head/google_adsense.pug
new file mode 100644
index 00000000..b3210ef9
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/google_adsense.pug
@@ -0,0 +1,7 @@
+if (theme.google_adsense && theme.google_adsense.enable)
+ script(async src=theme.google_adsense.js)
+ script.
+ (adsbygoogle = window.adsbygoogle || []).push({
+ google_ad_client: '!{theme.google_adsense.client}',
+ enable_page_level_ads: '!{theme.google_adsense.enable_page_level_ads}'
+ });
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/head/noscript.pug b/themes/butterfly/layout/includes/head/noscript.pug
new file mode 100644
index 00000000..de8a2d8f
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/noscript.pug
@@ -0,0 +1,9 @@
+noscript.
+
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/head/pwa.pug b/themes/butterfly/layout/includes/head/pwa.pug
new file mode 100644
index 00000000..ca927dc8
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/pwa.pug
@@ -0,0 +1,13 @@
+link(rel="manifest" href=theme.pwa.manifest)
+if(theme.pwa.theme_color)
+ meta(name="theme-color" content=theme.pwa.theme_color)
+if(theme.pwa.theme_color)
+ meta(name="msapplication-TileColor" content=theme.pwa.theme_color)
+if(theme.pwa.apple_touch_icon)
+ link(rel="apple-touch-icon" sizes="180x180" href=theme.pwa.apple_touch_icon)
+if(theme.pwa.favicon_32_32)
+ link(rel="icon" type="image/png" sizes="32x32" href=theme.pwa.favicon_32_32)
+if(theme.pwa.favicon_16_16)
+ link(rel="icon" type="image/png" sizes="16x16" href=theme.pwa.favicon_16_16)
+if(theme.pwa.mask_icon)
+ link(rel="mask-icon" href=theme.pwa.mask_icon color="#5bbad5")
diff --git a/themes/butterfly/layout/includes/head/site_verification.pug b/themes/butterfly/layout/includes/head/site_verification.pug
new file mode 100644
index 00000000..969883ba
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/site_verification.pug
@@ -0,0 +1,11 @@
+if theme.google_site_verification
+ meta(name="google-site-verification" content=theme.google_site_verification)
+
+if theme.bing_site_verification
+ meta(name="msvalidate.01" content=theme.bing_site_verification)
+
+if theme.baidu_site_verification
+ meta(name="baidu-site-verification" content=theme.baidu_site_verification)
+
+if theme.qihu_site_verification
+ meta(name="360-site-verification" content=theme.qihu_site_verification)
diff --git a/themes/butterfly/layout/includes/head/subtitle.pug b/themes/butterfly/layout/includes/head/subtitle.pug
new file mode 100644
index 00000000..b216f0cf
--- /dev/null
+++ b/themes/butterfly/layout/includes/head/subtitle.pug
@@ -0,0 +1,116 @@
+if theme.subtitle.enable
+ - var source = theme.subtitle.source
+ - var subtitleEffect = theme.subtitle.effect
+
+ if subtitleEffect
+ script(src=url_for(theme.CDN.typed))
+
+ if source == '1'
+ script.
+ var subtitleEffect = !{subtitleEffect}
+ fetch('https://api.ooopn.com/ciba/api.php',)
+ .then(function (res){
+ return res.json();
+ })
+ .then(function (data) {
+ if (subtitleEffect){
+ var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(",");
+ var both = sub.unshift(data['ciba-en'],data.ciba)
+ var typed = new Typed("#subtitle", {
+ strings: sub,
+ startDelay: 300,
+ typeSpeed: 150,
+ loop: !{theme.subtitle.loop},
+ backSpeed: 50
+ });
+ }else{
+ document.getElementById("subtitle").innerHTML = data['ciba-en']
+ }
+ })
+ .catch(function (err) {
+ console.error(err);
+ })
+
+ else if source == '2'
+ script.
+ var subtitleEffect = !{subtitleEffect}
+ fetch('https://v1.hitokoto.cn')
+ .then(function (res){
+ return res.json();
+ })
+ .then(function (data) {
+ if (subtitleEffect){
+ var from = '出自 ' + data.from
+ var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(",");
+ var both = sub.unshift(data.hitokoto,from)
+ var typed = new Typed("#subtitle", {
+ strings: sub,
+ startDelay: 300,
+ typeSpeed: 150,
+ loop: !{theme.subtitle.loop},
+ backSpeed: 50
+ });
+ }else{
+ document.getElementById("subtitle").innerHTML = data.hitokoto
+ }
+ })
+ .catch(function (err) {
+ console.error(err);
+ })
+
+ else if source == "3"
+ script(type="text/javascript" src="http://yijuzhan.com/api/word.php?m=js")
+ script.
+ var subtitleEffect = !{subtitleEffect}
+ var con = str[0];
+ if (subtitleEffect){
+ var from = "出自 " + str[1];
+ var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(",");
+ var both = sub.unshift(con,from)
+ var typed = new Typed("#subtitle", {
+ strings: sub,
+ startDelay: 300,
+ typeSpeed: 150,
+ loop: !{theme.subtitle.loop},
+ backSpeed: 50
+ });
+ }else{
+ document.getElementById("subtitle").innerHTML = con
+ }
+
+ else if source == '4'
+ script(type="text/javascript" src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8")
+ script.
+ var subtitleEffect = !{subtitleEffect}
+ jinrishici.load(function(result) {
+ if (subtitleEffect){
+ var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(",");
+ var content = result.data.content;
+ var both = sub.unshift(content)
+ var typed = new Typed("#subtitle", {
+ strings: sub,
+ startDelay: 300,
+ typeSpeed: 150,
+ loop: !{theme.subtitle.loop},
+ backSpeed: 50
+ });
+ }else{
+ document.getElementById("subtitle").innerHTML = result.data.content
+ }
+ })
+
+ else
+ - var subtitle = theme.subtitle.sub[0]
+ script.
+ var subtitleEffect = !{subtitleEffect}
+ if (subtitleEffect){
+ var typed = new Typed("#subtitle", {
+ strings: '!{theme.subtitle.sub}'.split(","),
+ startDelay: 300,
+ typeSpeed: 150,
+ loop: !{theme.subtitle.loop},
+ backSpeed: 50
+ })
+ }else{
+ document.getElementById("subtitle").innerHTML = '!{subtitle}'
+ }
diff --git a/themes/butterfly/layout/includes/header/header.pug b/themes/butterfly/layout/includes/header/header.pug
new file mode 100644
index 00000000..e6a22cc1
--- /dev/null
+++ b/themes/butterfly/layout/includes/header/header.pug
@@ -0,0 +1,18 @@
+#page-header
+ span#blog_name.pull_left
+ a#site-name.blog_title(href=url_for('/')) #[=config.title]
+
+ span.pull_right.menus
+ if (theme.algolia_search.enable || theme.local_search && theme.local_search.enable)
+ #search_button
+ a.site-page.social-icon.search
+ i.fa.fa-search.fa-fw
+ span=' '+_p('search')
+ .menus_items
+ include ./menu_item.pug
+
+ span.toggle-menu.close
+ a.site-page
+ i.fa.fa-bars.fa-fw(aria-hidden="true")
+
+
diff --git a/themes/butterfly/layout/includes/header/index.pug b/themes/butterfly/layout/includes/header/index.pug
new file mode 100644
index 00000000..3198591f
--- /dev/null
+++ b/themes/butterfly/layout/includes/header/index.pug
@@ -0,0 +1,43 @@
+if is_home()
+ - var top_img = theme.index_img || theme.default_top_img
+else if is_post()
+ - var top_img = page.top_img || page.cover || page.randomcover || theme.default_top_img
+else if is_archive()
+ - var top_img = theme.archive_img || theme.default_top_img
+else if is_tag()
+ - var top_img = theme.tag_img || theme.default_top_img
+else if is_category()
+ - var top_img = theme.category_img || theme.default_top_img
+else
+ - var top_img = page.top_img || theme.default_top_img
+
+if theme.douban
+ if is_current('/movies/', [strict])
+ - var top_img = theme.douban.movies_img || theme.default_top_img
+ else if is_current('/books/', [strict])
+ - var top_img = theme.douban.books_img || theme.default_top_img
+ else if is_current('/games/', [strict])
+ - var top_img = theme.douban.games_img || theme.default_top_img
+
+- var bg_img = top_img && top_img !== true ? `background-image: url(${top_img})` : ''
+- var site_title = is_archive() ? _p('page.archives') : page.title || page.tag || page.category || config.title
+- var isHomeClass = is_home() ? 'full_page' : 'not-index-bg'
+- is_post() ? isHomeClass = 'post-bg' : isHomeClass
+
+#nav(class=isHomeClass style=bg_img)
+ !=partial('includes/header/header', {}, {cache:theme.fragment_cache})
+ if is_home()
+ #site-info
+ h1#site_title=site_title
+ #site_subtitle
+ span#subtitle
+ if(theme.social)
+ #site_social_icons
+ !=partial('includes/header/social', {}, {cache:theme.fragment_cache})
+ #scroll_down
+ i.fa.fa-angle-down.scroll-down-effects
+ else if is_post()
+ include ./post-info.pug
+ else
+ #page_site-info
+ h1#site_title=site_title
diff --git a/themes/butterfly/layout/includes/header/menu_item.pug b/themes/butterfly/layout/includes/header/menu_item.pug
new file mode 100644
index 00000000..cb7c7197
--- /dev/null
+++ b/themes/butterfly/layout/includes/header/menu_item.pug
@@ -0,0 +1,18 @@
+each value, label in theme.menu
+ if !Array.isArray(value)
+ .menus_item
+ a.site-page(href=url_for(trim(value.split('||')[0])))
+ i.fa-fw(class=trim(value.split('||')[1]))
+ span=' '+label
+ else
+ .menus_item
+ a.site-page
+ i.fa-fw(class=trim(label.split('||')[1]) aria-hidden="true")
+ span=' '+ trim(label.split('||')[0])
+ i.fa.fa-chevron-down.menus-expand(aria-hidden="true")
+ ul.menus_item_child
+ each i in value
+ li
+ a.site-page(href=url_for(trim(i.split('||')[1])))
+ i.fa-fw(class=trim(i.split('||')[2]))
+ span=' '+trim(i.split('||')[0])
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/header/post-info.pug b/themes/butterfly/layout/includes/header/post-info.pug
new file mode 100644
index 00000000..9f7a0112
--- /dev/null
+++ b/themes/butterfly/layout/includes/header/post-info.pug
@@ -0,0 +1,84 @@
+#post-info
+ #post-title
+ .posttitle= page.title || _p('no_title')
+
+ #post-meta
+ .meta-firstline
+ if (theme.post_meta.post.date_type)
+ if (theme.post_meta.post.date_type === 'both')
+ time.post-meta__date
+ span.post-meta__date-created(title= _p('post.created')+' '+full_date(page.date))
+ i.fa.fa-calendar(aria-hidden="true")
+ =' '+_p('post.created')+' '+date(page.date, config.date_format)
+ span.post-meta__separator |
+ span.post-meta__date-updated(title= _p('post.updated')+' '+full_date(page.updated))
+ i.fa.fa-history(aria-hidden="true")
+ =' '+_p('post.updated')+' '+date(page.updated, config.date_format)
+ else
+ - var data_type_update = theme.post_meta.post.date_type === 'updated'
+ - var date_type = data_type_update ? 'updated' : 'date'
+ - var date_icon = data_type_update ? 'fa-history' :'fa-calendar'
+ - var data_info = data_type_update ? _p('post.updated') : _p('post.created')
+ time.post-meta__date(title=data_info + ' ' + full_date(page[date_type]))
+ i.fa(class=date_icon aria-hidden="true")
+ =' ' + data_info + ' ' + date(page[date_type], config.date_format)
+
+ if (theme.post_meta.post.categories && page.categories.data.length > 0)
+ span.post-meta__categories
+ if (theme.post_meta.post.date_type)
+ span.post-meta__separator |
+
+ each item, index in page.categories.data
+ i.fa.fa-inbox.post-meta__icon(aria-hidden="true")
+ a(href=url_for(item.path)).post-meta__categories #[=item.name]
+ if (index < page.categories.data.length - 1)
+ i.fa.fa-angle-right.post-meta__separator(aria-hidden="true")
+
+ .meta-secondline
+ - let postWordcount = theme.wordcount.enable && (theme.wordcount.post_wordcount || theme.wordcount.min2read)
+ if (postWordcount)
+ span.post-meta-wordcount
+ if theme.wordcount.post_wordcount
+ - var wordCountIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-file-word' : 'fa fa-file-word-o'
+ i.post-meta__icon(class=wordCountIcon aria-hidden="true")
+ span= _p('post.wordcount') + ':'
+ span.word-count= wordcount(page.content)
+ if theme.wordcount.min2read
+ span.post-meta__separator |
+ if theme.wordcount.min2read
+ - var readCountIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-clock' : 'fa fa-clock-o'
+ i.post-meta__icon(class=readCountIcon aria-hidden="true")
+ span= _p('post.min2read', min2read(page.content, {cn: 350, en: 160}))
+
+ .meta-thirdline
+ span.post-meta-pv-cv
+ if (postWordcount && theme.busuanzi.page_pv)
+ span.post-meta__separator |
+ if theme.busuanzi.page_pv
+ i.fa.fa-eye.post-meta__icon(aria-hidden="true")
+ span=_p('post.page_pv') + ':'
+ span#busuanzi_value_page_pv
+
+ span.post-meta-commentcount
+ - var commentCount = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-comments' : 'fa fa-comment-o'
+ if ((theme.disqus && theme.disqus.enable && theme.disqus.count && page.comments !== false) || (theme.disqusjs && theme.disqusjs.enable && theme.disqusjs.count && page.comments !== false))
+ if (theme.busuanzi && theme.busuanzi.page_pv)
+ span.post-meta__separator |
+ i.post-meta__icon(class=commentCount aria-hidden="true")
+ span= _p('post.comments') + ':'
+ span.disqus-comment-count.comment-count
+ a(href=full_url_for(page.path) + '#disqus_thread')
+ else if (theme.valine && theme.valine.enable && theme.valine.count && page.comments !== false)
+ if (theme.busuanzi && theme.busuanzi.page_pv)
+ span.post-meta__separator |
+ i.post-meta__icon(class=commentCount aria-hidden="true")
+ span= _p('post.comments') + ':'
+ a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
+ span.valine-comment-count.comment-count(data-xid=url_for(page.path) itemprop="commentCount")
+ else if (theme.gitalk && theme.gitalk.enable && theme.gitalk.count && page.comments !== false)
+ if (theme.busuanzi && theme.busuanzi.page_pv)
+ span.post-meta__separator |
+ i.post-meta__icon(class=commentCount aria-hidden="true")
+ span= _p('post.comments') + ':'
+ a(href=url_for(page.path) + '#post-comment')
+ span.gitalk-comment-count.comment-count
diff --git a/themes/butterfly/layout/includes/header/social.pug b/themes/butterfly/layout/includes/header/social.pug
new file mode 100644
index 00000000..6c0a49e4
--- /dev/null
+++ b/themes/butterfly/layout/includes/header/social.pug
@@ -0,0 +1,4 @@
+each url, icon in theme.social
+ a.social-icon(href=trim(url.split('||')[0]) target="_blank"
+ title=url.split('||')[1] === undefined ? '' : trim(url.split('||')[1]))
+ i(class=icon aria-hidden="true")
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/layout.pug b/themes/butterfly/layout/includes/layout.pug
new file mode 100644
index 00000000..e86899c2
--- /dev/null
+++ b/themes/butterfly/layout/includes/layout.pug
@@ -0,0 +1,50 @@
+- var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
+
+doctype html
+html(lang=config.language data-theme=theme.display_mode)
+ head
+ include ./head.pug
+ body
+ if theme.fireworks && theme.fireworks.enable
+ canvas.fireworks
+
+ !=partial('includes/mobile-sidebar/index', {}, {cache:theme.fragment_cache})
+
+ include ./sidebar.pug
+
+ #body-wrap
+ if theme.background
+ - var is_photo = theme.background.substring(3,0) === 'url' ? 'photo':'color'
+ #web_bg(data-type=is_photo)
+ include ./header/index.pug
+
+ if (!is_post())
+ main#content-inner.layout_page(class=hideAside)
+ if body
+ div!= body
+ else
+ block content
+ include widget/index.pug
+ else
+ main#content-inner.layout_post
+ if body
+ div!= body
+ else
+ block content
+
+ - var footer_bg = theme.footer_bg == false ? '' : bg_img
+ - var is_bg = theme.footer_bg == false ? 'color' : 'photo'
+ footer#footer(style=footer_bg data-type=is_bg)
+ !=partial('includes/footer', {}, {cache:theme.fragment_cache})
+
+ include ./rightside.pug
+
+ !=partial('includes/search/index', {}, {cache:theme.fragment_cache})
+
+ each item in theme.CDN_USE.js
+ script(src=url_for(item))
+
+ include ./additional-js.pug
+
+
+
diff --git a/themes/butterfly/layout/includes/math/index.pug b/themes/butterfly/layout/includes/math/index.pug
new file mode 100644
index 00000000..68b34164
--- /dev/null
+++ b/themes/butterfly/layout/includes/math/index.pug
@@ -0,0 +1,15 @@
+if theme.mathjax && theme.mathjax.enable
+ if theme.mathjax.per_page
+ if(!is_tag() && !is_category() && !is_archive() && !is_home())
+ include ./mathjax.pug
+ else
+ if page.mathjax
+ include ./mathjax.pug
+
+if theme.katex && theme.katex.enable
+ if theme.katex.per_page
+ if(!is_tag() && !is_category() && !is_archive() && !is_home())
+ include ./katex.pug
+ else
+ if page.katex
+ include ./katex.pug
diff --git a/themes/butterfly/layout/includes/math/katex.pug b/themes/butterfly/layout/includes/math/katex.pug
new file mode 100644
index 00000000..6690428e
--- /dev/null
+++ b/themes/butterfly/layout/includes/math/katex.pug
@@ -0,0 +1,7 @@
+link(rel="stylesheet" type="text/css" href=theme.CDN.katex)
+script(src=url_for(theme.CDN.katex_copytex))
+link(rel="stylesheet" type="text/css" href=theme.CDN.katex_copytex_css)
+script.
+ $(function () {
+ $('span.katex-display').wrap('')
+ })
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/math/mathjax.pug b/themes/butterfly/layout/includes/math/mathjax.pug
new file mode 100644
index 00000000..a28d1c0b
--- /dev/null
+++ b/themes/butterfly/layout/includes/math/mathjax.pug
@@ -0,0 +1,27 @@
+script(type="text/x-mathjax-config").
+ MathJax.Hub.Config({
+ tex2jax: {
+ inlineMath: [ ['$','$'], ["\\(","\\)"] ],
+ processEscapes: true,
+ skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
+ },
+ CommonHTML: {
+ linebreaks: { automatic: true, width: "90% container" }
+ },
+ "HTML-CSS": {
+ linebreaks: { automatic: true, width: "90% container" }
+ },
+ "SVG": {
+ linebreaks: { automatic: true, width: "90% container" }
+ }
+ });
+
+script(type="text/x-mathjax-config").
+ MathJax.Hub.Queue(function() {
+ var all = MathJax.Hub.getAllJax(), i;
+ for (i=0; i < all.length; i += 1) {
+ all[i].SourceElement().parentNode.className += ' has-jax';
+ }
+ });
+
+script(src=theme.CDN.mathjax)
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/math/mermaid.pug b/themes/butterfly/layout/includes/math/mermaid.pug
new file mode 100644
index 00000000..7984358f
--- /dev/null
+++ b/themes/butterfly/layout/includes/math/mermaid.pug
@@ -0,0 +1,8 @@
+script.
+ if (document.getElementsByClassName('mermaid').length) {
+ loadScript('!{theme.CDN.mermaid}',function () {
+ mermaid.initialize({
+ theme: '!{theme.mermaid.theme}',
+ })
+ })
+ }
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/mixins/UI.pug b/themes/butterfly/layout/includes/mixins/UI.pug
new file mode 100644
index 00000000..5cedd81c
--- /dev/null
+++ b/themes/butterfly/layout/includes/mixins/UI.pug
@@ -0,0 +1,65 @@
+mixin UI_NEW(posts)
+ - posts.each(function(article,index){
+ .recent-post-item
+ - var link = article.link || article.path
+ - var post_cover = article.cover
+ - var title = article.title || _p('no_title')
+ - var leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius'
+ - var no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
+ if post_cover && theme.cover.index_enable
+ .post_cover(class=leftOrRight)
+ a(href=url_for(link) title=title)
+ if theme.lazyload.enable
+ img.post_bg.lazyload(data-src=`${post_cover}` alt=title onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'`)
+ else
+ img.post_bg(src=`${post_cover}` alt=title onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'`)
+ .recent-post-info(class=no_cover)
+ a.article-title(href=url_for(link) title=title)= title
+ .article-meta-wrap
+ if (theme.post_meta.page.date_type)
+ if (theme.post_meta.page.date_type === 'both')
+ time.post-meta__date
+ span.post-meta__date-created(title=_p('post.created') + ' ' + full_date(article.date))
+ i.fa.fa-calendar(aria-hidden="true")
+ =date(article.date, config.date_format)
+ span.article-meta__separator |
+ span.post-meta__date-updated(title=_p('post.updated') + ' ' + full_date(article.updated))
+ i.fa.fa-history(aria-hidden="true")
+ =date(article.updated, config.date_format)
+ else
+ - var data_type_updated = theme.post_meta.page.date_type === 'updated'
+ - var date_type = data_type_updated ? 'updated' : 'date'
+ - var date_icon = data_type_updated ? 'fa-history' :'fa-calendar'
+ - var date_title = data_type_updated ? _p('post.updated') : _p('post.created')
+ time.post-meta__date(title=date_title + ' ' + full_date(article[date_type]))
+ i.fa(class=date_icon aria-hidden="true")
+ =date(article[date_type], config.date_format)
+ if (theme.post_meta.page.categories && article.categories.data.length > 0)
+ span.article-meta
+ span.article-meta__separator |
+ each item, index in article.categories.data
+ i.fa.fa-inbox.article-meta__icon(aria-hidden="true")
+ a(href=url_for(item.path)).article-meta__categories #[=item.name]
+ if (index < article.categories.data.length - 1)
+ i.fa.fa-angle-right(aria-hidden="true")
+ if (theme.post_meta.page.tags && article.tags.data.length > 0)
+ span.article-meta.tags
+ span.article-meta__separator |
+ each item, index in article.tags.data
+ i.fa.fa-tag.article-meta__icon(aria-hidden="true")
+ a(href=url_for(item.path)).article-meta__tags #[=item.name]
+ if (index < article.tags.data.length - 1)
+ span.article-meta__link -
+ if theme.auto_excerpt && theme.auto_excerpt.enable
+ - const content = strip_html(article.content)
+ - let expert = content.substring(0, theme.auto_excerpt.length)
+ - content.length > theme.auto_excerpt.length ? expert += ' ...' : ''
+ .content!= expert
+ else
+ .content!= article.description
+
+ if theme.ad && theme.ad.index
+ if (index + 1) % 3 == 0
+ .recent-post-item.ad_height!=theme.ad.index
+
+ - })
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/mixins/article-sort.pug b/themes/butterfly/layout/includes/mixins/article-sort.pug
new file mode 100644
index 00000000..25bf57a4
--- /dev/null
+++ b/themes/butterfly/layout/includes/mixins/article-sort.pug
@@ -0,0 +1,20 @@
+mixin articleSort(posts)
+ .article-sort
+ - var year
+ - posts.each(function (article) {
+ - var tempYear = date(article.date, 'YYYY')
+ - var no_cover = article.cover === false || !theme.cover.archives_enable ? 'no-article-cover' : ''
+ if tempYear !== year
+ - year = tempYear
+ .article-sort-item.year= year
+ .article-sort-item(class=no_cover)
+ if article.cover && theme.cover.archives_enable
+ .article-sort-img
+ a.article-sort-item__img(href=url_for(article.path))
+ img(src=article.cover alt=article.title || 'No Title' onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'`)
+ .article-sort-post
+ a.article-sort-item__post(href=url_for(article.path))
+ i.fa.fa-clock-o(aria-hidden="true")
+ time.article-sort-item__time(title=_p('post.created') + ' ' + full_date(article.date))= date(article.date, config.date_format)
+ .article-sort-item__title= article.title || 'No Title'
+ - })
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/mobile-sidebar/index.pug b/themes/butterfly/layout/includes/mobile-sidebar/index.pug
new file mode 100644
index 00000000..511a77cb
--- /dev/null
+++ b/themes/butterfly/layout/includes/mobile-sidebar/index.pug
@@ -0,0 +1,3 @@
+#mobile-sidebar
+ #menu_mask
+ include ../mobile-sidebar/mobile-menus.pug
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/mobile-sidebar/mobile-menus.pug b/themes/butterfly/layout/includes/mobile-sidebar/mobile-menus.pug
new file mode 100644
index 00000000..55580ec4
--- /dev/null
+++ b/themes/butterfly/layout/includes/mobile-sidebar/mobile-menus.pug
@@ -0,0 +1,27 @@
+#mobile-sidebar-menus
+ .mobile_author_icon
+ img.avatar-img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.lodding_bg.flink}'` alt="avatar")
+ .mobile_post_data
+ if site.posts.length
+ .mobile_data_item.is-center
+ .mobile_data_link
+ a(href=url_for(config.archive_dir) + '/')
+ .headline= _p('aside.articles')
+ .length_num= site.posts.length
+
+ if site.tags.length
+ .mobile_data_item.is-center
+ .mobile_data_link
+ a(href=url_for(config.tag_dir) + '/' )
+ .headline= _p('aside.tags')
+ .length_num= site.tags.length
+
+ if site.categories.length
+ .mobile_data_item.is-center
+ .mobile_data_link
+ a(href=url_for(config.category_dir) + '/')
+ .headline= _p('aside.categories')
+ .length_num= site.categories.length
+ hr
+ .menus_items
+ include ../header/menu_item.pug
diff --git a/themes/butterfly/layout/includes/pagination.pug b/themes/butterfly/layout/includes/pagination.pug
new file mode 100644
index 00000000..33bf9ae2
--- /dev/null
+++ b/themes/butterfly/layout/includes/pagination.pug
@@ -0,0 +1,39 @@
+-
+ var options = {
+ prev_text: '',
+ next_text: '',
+ mid_size: 1,
+ escape: false
+ }
+
+if(!is_post())
+ nav#pagination
+ div.pagination
+ !=paginator(options)
+else
+ nav#pagination.pagination_post
+ if(page.prev)
+ - var hasPageNext = page.prev ? 'pull_left' : 'pull-full'
+ .prev-post(class=hasPageNext)
+ - var pagination_cover = page.prev.cover === false ? page.prev.randomcover : page.prev.cover
+ a(href=url_for(page.prev.path))
+ if theme.lazyload.enable
+ img.prev_cover.lazyload(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` )
+ else
+ img.prev_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` )
+ .pagination-info
+ .label=_p('pagination.prev')
+ .prev_info=page.prev.title
+
+ if(page.next)
+ - var hasPagePrev = page.prev ? 'pull_right' : 'pull-full'
+ - var pagination_cover = page.next.cover == false ? page.next.randomcover : page.next.cover
+ .next-post(class=hasPagePrev)
+ a(href=url_for(page.next.path))
+ if theme.lazyload.enable
+ img.next_cover.lazyload(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+ else
+ img.next_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+ .pagination-info
+ .label=_p('pagination.next')
+ .next_info=page.next.title
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/post/post-copyright.pug b/themes/butterfly/layout/includes/post/post-copyright.pug
new file mode 100644
index 00000000..ee8c6596
--- /dev/null
+++ b/themes/butterfly/layout/includes/post/post-copyright.pug
@@ -0,0 +1,13 @@
+if (theme.post_copyright && theme.post_copyright.enable && page.copyright != false)
+ .post-copyright
+ .post-copyright__author
+ span.post-copyright-meta= _p('post.copyright.author') + ": "
+ span.post-copyright-info
+ a(href=`mailto:${config.email}`) #[=config.author]
+ .post-copyright__type
+ span.post-copyright-meta= _p('post.copyright.link') + ": "
+ span.post-copyright-info
+ a(href=url_for(page.permalink))= theme.post_copyright.decode ? decodeURI(page.permalink) : page.permalink
+ .post-copyright__notice
+ span.post-copyright-meta= _p('post.copyright.copyright_notice') + ": "
+ span.post-copyright-info!= _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)
diff --git a/themes/butterfly/layout/includes/post/reward.pug b/themes/butterfly/layout/includes/post/reward.pug
new file mode 100644
index 00000000..8aefea4a
--- /dev/null
+++ b/themes/butterfly/layout/includes/post/reward.pug
@@ -0,0 +1,11 @@
+.post-reward
+ a.reward-button.button--primary.button--animated
+ i.fa.fa-qrcode
+ = ' ' + _p('donate')
+ .reward-main
+ ul.reward-all
+ each item in theme.reward.QR_code
+ li.reward-item
+ img.lazyload.post-qr-code__img(src=url_for((item.itemlist||item).img) alt=(item.itemlist||item).text)
+ .post-qr-code__desc=(item.itemlist||item).text
+
diff --git a/themes/butterfly/layout/includes/recent-posts.pug b/themes/butterfly/layout/includes/recent-posts.pug
new file mode 100644
index 00000000..46fb9dec
--- /dev/null
+++ b/themes/butterfly/layout/includes/recent-posts.pug
@@ -0,0 +1,67 @@
+each article , index in page.posts.data
+ .recent-post-item
+ - var link = article.link || article.path
+ - var title = article.title || _p('no_title')
+ - var leftOrRight = index%2 == 0 ? 'left_radius' : 'right_radius'
+ - var post_cover = article.cover
+ - var no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
+ if post_cover && theme.cover.index_enable
+ .post_cover(class=leftOrRight)
+ a(href=url_for(link) title=title)
+ if theme.lazyload.enable
+ img.post_bg.lazyload(data-src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
+ else
+ img.post_bg(src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` alt=title)
+ .recent-post-info(class=no_cover)
+ a.article-title(href=url_for(link) title=title)= title
+ .article-meta-wrap
+ if (article.top)
+ span.article-meta
+ i.fa.fa-thumb-tack.article-meta__icon.sticky
+ span.sticky= _p('sticky')
+ span.article-meta__separator |
+ if (theme.post_meta.page.date_type)
+ if (theme.post_meta.page.date_type === 'both')
+ time.post-meta__date
+ span.post-meta__date-created(title=_p('post.created') + ' ' + full_date(article.date))
+ i.fa.fa-calendar(aria-hidden="true")
+ =date(article.date, config.date_format)
+ span.article-meta__separator |
+ span.post-meta__date-updated(title=_p('post.updated') + ' ' + full_date(article.updated))
+ i.fa.fa-history(aria-hidden="true")
+ =date(article.updated, config.date_format)
+ else
+ - var data_type_updated = theme.post_meta.page.date_type === 'updated'
+ - var date_type = data_type_updated ? 'updated' : 'date'
+ - var date_icon = data_type_updated ? 'fa-history' :'fa-calendar'
+ - var date_title = data_type_updated ? _p('post.updated') : _p('post.created')
+ time.post-meta__date(title=date_title + ' ' + full_date(article[date_type]))
+ i.fa(class=date_icon aria-hidden="true")
+ =date(article[date_type], config.date_format)
+ if (theme.post_meta.page.categories && article.categories.data.length > 0)
+ span.article-meta
+ span.article-meta__separator |
+ each item, index in article.categories.data
+ i.fa.fa-inbox.article-meta__icon(aria-hidden="true")
+ a(href=url_for(item.path)).article-meta__categories #[=item.name]
+ if (index < article.categories.data.length - 1)
+ i.fa.fa-angle-right(aria-hidden="true")
+ if (theme.post_meta.page.tags && article.tags.data.length > 0)
+ span.article-meta.tags
+ span.article-meta__separator |
+ each item, index in article.tags.data
+ i.fa.fa-tag.article-meta__icon(aria-hidden="true")
+ a(href=url_for(item.path)).article-meta__tags #[=item.name]
+ if (index < article.tags.data.length - 1)
+ span.article-meta__link -
+ if theme.auto_excerpt && theme.auto_excerpt.enable
+ - const content = strip_html(article.content)
+ - let expert = content.substring(0, theme.auto_excerpt.length)
+ - content.length > theme.auto_excerpt.length ? expert += ' ...' : ''
+ .content!= expert
+ else
+ .content!= article.description
+
+ if theme.ad && theme.ad.index
+ if (index + 1) % 3 == 0
+ .recent-post-item.ad_height!=theme.ad.index
diff --git a/themes/butterfly/layout/includes/rightside.pug b/themes/butterfly/layout/includes/rightside.pug
new file mode 100644
index 00000000..88b1ad8d
--- /dev/null
+++ b/themes/butterfly/layout/includes/rightside.pug
@@ -0,0 +1,23 @@
+section#rightside.rightside
+ #rightside-config-hide
+ if theme.readmode.enable && is_post()
+ i#readmode.fa.fa-book(title=_p('rightside.readmode_title'))
+ if is_post()
+ i#font_plus.fa.fa-plus(title=_p('rightside.font_plus_title'))
+ i#font_minus.fa.fa-minus(title=_p('rightside.font_minus_title'))
+ if theme.translate && theme.translate.enable
+ a#translateLink.translate_chn_to_cht(href="javascript:translatePage();" title=_p('rightside.translate_title') target="_self")= theme.translate.default
+ if theme.darkmode.enable && theme.darkmode.button
+ - var lightModeIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-sun' : 'fa fa-sun-o'
+ - var darkModeIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'far fa-moon' : 'fa fa-moon-o'
+ - var display_mode = theme.display_mode == 'dark' ? lightModeIcon : darkModeIcon
+ i#darkmode.darkmode(class=display_mode title=_p('rightside.night_mode_title'))
+ #rightside-config-show
+ #rightside_config(title=_p("rightside.setting"))
+ i.fa.fa-cog(aria-hidden="true")
+ if is_post() && page.comments !== false && isComment
+ a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
+ i.scroll_to_comment.fa.fa-comments
+ if is_post() && page.toc !== false && theme.toc.enable && (toc(page.content) !== '' || page.encrypt == true )
+ i#mobile-toc-button.fa.fa-list-ul.close(title=_p("rightside.toc") aria-hidden="true")
+ i.fa.fa-arrow-up#go-up(title=_p("rightside.back_to_top") aria-hidden="true")
diff --git a/themes/butterfly/layout/includes/search/algolia.pug b/themes/butterfly/layout/includes/search/algolia.pug
new file mode 100644
index 00000000..bf4e465b
--- /dev/null
+++ b/themes/butterfly/layout/includes/search/algolia.pug
@@ -0,0 +1,12 @@
+#algolia-search.search-dialog
+ #algolia-search-title.search-dialog__title Algolia
+ #algolia-input-panel
+ #algolia-search-input
+ hr
+ #algolia-search-results
+ #algolia-hits
+ #algolia-pagination
+ #algolia-stats
+ span.search-close-button
+ i.fa.fa-times
+.search-mask
diff --git a/themes/butterfly/layout/includes/search/index.pug b/themes/butterfly/layout/includes/search/index.pug
new file mode 100644
index 00000000..19dd228e
--- /dev/null
+++ b/themes/butterfly/layout/includes/search/index.pug
@@ -0,0 +1,5 @@
+if (theme.algolia_search.enable)
+ include ./algolia.pug
+if (theme.local_search)
+ if (!theme.algolia_search.enable && theme.local_search.enable)
+ include ./local-search.pug
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/search/local-search.pug b/themes/butterfly/layout/includes/search/local-search.pug
new file mode 100644
index 00000000..1262d550
--- /dev/null
+++ b/themes/butterfly/layout/includes/search/local-search.pug
@@ -0,0 +1,23 @@
+#local-search.search-dialog
+ #local-search-title.search-dialog__title=_p("local_search.label")
+ #local-input-panel
+ #local-search-input
+ .local-search-box
+ input(placeholder=_p("local_search.input_placeholder") type="text").local-search-box--input
+ hr
+ #local-search-results
+ #local-hits
+ #local-stats
+ #hr.local-search-stats__hr
+ case config.language
+ when "zh-CN"
+ span=_p("local_search.by")
+ | #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search]
+ | #[span=_p("local_search.powered")]
+ when "en"
+ default
+ span=_p("local_search.powered_by")
+ | #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search]
+ span.search-close-button
+ i.fa.fa-times
+.search-mask
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/share/add-this.pug b/themes/butterfly/layout/includes/share/add-this.pug
new file mode 100644
index 00000000..ab44267d
--- /dev/null
+++ b/themes/butterfly/layout/includes/share/add-this.pug
@@ -0,0 +1,2 @@
+.addthis_inline_share_toolbox
+script(src=`//s7.addthis.com/js/300/addthis_widget.js#pubid=${theme.addThis.pubid}` async)
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/share/addtoany.pug b/themes/butterfly/layout/includes/share/addtoany.pug
new file mode 100644
index 00000000..f6063ded
--- /dev/null
+++ b/themes/butterfly/layout/includes/share/addtoany.pug
@@ -0,0 +1,9 @@
+.addtoany
+ .a2a_kit.a2a_kit_size_32.a2a_default_style
+ each name in theme.addtoany.item
+ a(class="a2a_button_" + name)
+
+ a.a2a_dd(href="https://www.addtoany.com/share")
+script(async src=url_for(theme.CDN.addtoany))
+
+
diff --git a/themes/butterfly/layout/includes/share/index.pug b/themes/butterfly/layout/includes/share/index.pug
new file mode 100644
index 00000000..7b297963
--- /dev/null
+++ b/themes/butterfly/layout/includes/share/index.pug
@@ -0,0 +1,7 @@
+.post_share
+ if theme.addThis.enable
+ include ./add-this.pug
+ else if theme.sharejs && theme.sharejs.enable
+ include ./share-js.pug
+ else if theme.addtoany.enable
+ include ./addtoany.pug
diff --git a/themes/butterfly/layout/includes/share/share-js.pug b/themes/butterfly/layout/includes/share/share-js.pug
new file mode 100644
index 00000000..ec12a880
--- /dev/null
+++ b/themes/butterfly/layout/includes/share/share-js.pug
@@ -0,0 +1,4 @@
+if (theme.sharejs && theme.sharejs.enable)
+ .social-share(data-image= page.cover|| theme.avatar.img data-sites= theme.sharejs.sites)
+ link(rel="stylesheet" href=url_for(theme.CDN.sharejs_css))
+ script(src=url_for(theme.CDN.sharejs))
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/sidebar.pug b/themes/butterfly/layout/includes/sidebar.pug
new file mode 100644
index 00000000..435c73a6
--- /dev/null
+++ b/themes/butterfly/layout/includes/sidebar.pug
@@ -0,0 +1,25 @@
+- let showToc = is_post() && page.toc !== false && theme.toc.enable && (toc(page.content) !== '' || page.encrypt == true )
+- let autoOpenSidebar = theme.auto_open_sidebar.enable === true ? 'on' : ''
+
+-
+ let tocNumber
+ if (page.toc_number !== undefined) tocNumber = page.toc_number
+ else if (theme.toc.number !== undefined) tocNumber = theme.toc.number
+ else tocNumber = true
+-
+
+if(showToc)
+ i.fa.fa-arrow-right#toggle-sidebar(aria-hidden="true" class=autoOpenSidebar)
+ #sidebar
+ .sidebar-toc
+ div.sidebar-toc__title= _p('sidebar.catalog')
+ div.sidebar-toc__progress
+ span.progress-notice= _p('sidebar.have_read')
+ span.progress-num 0
+ span.progress-percentage %
+ div.sidebar-toc__progress-bar
+ if (page.encrypt == true)
+ div.sidebar-toc__content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber})
+ else
+ div.sidebar-toc__content!=toc(page.content, {list_number: tocNumber})
+
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/third-party/canvas-nest.pug b/themes/butterfly/layout/includes/third-party/canvas-nest.pug
new file mode 100644
index 00000000..bb790be5
--- /dev/null
+++ b/themes/butterfly/layout/includes/third-party/canvas-nest.pug
@@ -0,0 +1 @@
+script#canvas_nest(color=theme.canvas_nest.color opacity=theme.canvas_nest.opacity zIndex=theme.canvas_nest.zIndex count=theme.canvas_nest.count mobile=`${theme.canvas_nest.mobile}` src=url_for(theme.CDN.canvas_nest))
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/third-party/canvas-ribbon-piao.pug b/themes/butterfly/layout/includes/third-party/canvas-ribbon-piao.pug
new file mode 100644
index 00000000..505af833
--- /dev/null
+++ b/themes/butterfly/layout/includes/third-party/canvas-ribbon-piao.pug
@@ -0,0 +1 @@
+script(id="ribbon_piao" mobile=`${theme.canvas_ribbon_piao.mobile}` src=url_for(theme.CDN.canvas_ribbon_piao))
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/third-party/canvas-ribbon.pug b/themes/butterfly/layout/includes/third-party/canvas-ribbon.pug
new file mode 100644
index 00000000..9fc03fcd
--- /dev/null
+++ b/themes/butterfly/layout/includes/third-party/canvas-ribbon.pug
@@ -0,0 +1,3 @@
+script(defer id="ribbon" src=url_for(theme.CDN.canvas_ribbon) size=theme.canvas_ribbon.size
+alpha=theme.canvas_ribbon.alpha zIndex=theme.canvas_ribbon.zIndex mobile=`${theme.canvas_ribbon.mobile}` data-click=`${theme.canvas_ribbon.click_to_change}`)
+
diff --git a/themes/butterfly/layout/includes/third-party/pangu.pug b/themes/butterfly/layout/includes/third-party/pangu.pug
new file mode 100644
index 00000000..a3ff3181
--- /dev/null
+++ b/themes/butterfly/layout/includes/third-party/pangu.pug
@@ -0,0 +1,13 @@
+script(src=url_for(theme.CDN.pangu))
+if theme.pangu.field === 'post'
+ if is_post()
+ script.
+ document.addEventListener('DOMContentLoaded', function() {
+ pangu.spacingElementById('content-inner')
+ })
+else if theme.pangu.field === 'page'
+ script.
+ document.addEventListener('DOMContentLoaded', function() {
+ pangu.spacingElementById('content-inner')
+ })
+
diff --git a/themes/butterfly/layout/includes/widget/card_ad.pug b/themes/butterfly/layout/includes/widget/card_ad.pug
new file mode 100644
index 00000000..c05f7742
--- /dev/null
+++ b/themes/butterfly/layout/includes/widget/card_ad.pug
@@ -0,0 +1,2 @@
+.card-widget.card-ad
+ != theme.ad.aside
diff --git a/themes/butterfly/layout/includes/widget/card_announcement.pug b/themes/butterfly/layout/includes/widget/card_announcement.pug
new file mode 100644
index 00000000..4194cf40
--- /dev/null
+++ b/themes/butterfly/layout/includes/widget/card_announcement.pug
@@ -0,0 +1,6 @@
+.card-widget.card-announcement
+ .card-content
+ .item-headline
+ i.fa.fa-bullhorn.card-announcement-animation(aria-hidden="true")
+ span= _p('aside.card_announcement')
+ .announcement_content!= theme.announcement.content
\ No newline at end of file
diff --git a/themes/butterfly/layout/includes/widget/card_archives.pug b/themes/butterfly/layout/includes/widget/card_archives.pug
new file mode 100644
index 00000000..20f79d67
--- /dev/null
+++ b/themes/butterfly/layout/includes/widget/card_archives.pug
@@ -0,0 +1,6 @@
+.card-widget.card-archives
+ .card-content
+ .item-headline
+ i.fa.fa-archive(aria-hidden="true")
+ span= _p('aside.card_archives')
+ != list_archives({type:'monthly',format: 'YYYY年MM月'})
diff --git a/themes/butterfly/layout/includes/widget/card_author.pug b/themes/butterfly/layout/includes/widget/card_author.pug
new file mode 100644
index 00000000..c1381532
--- /dev/null
+++ b/themes/butterfly/layout/includes/widget/card_author.pug
@@ -0,0 +1,34 @@
+.card-widget.card-info
+ .card-content
+ .card-info-avatar.is-center
+ img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt="avatar")
+ .author-info__name= config.author
+ .author-info__description= config.description
+
+ .card-info-data
+ if site.posts.length
+ .card-info-data-item.is-center
+ a(href=url_for(config.archive_dir))
+ .headline= _p('aside.articles')
+ .length_num= site.posts.length
+
+ if site.tags.length
+ .card-info-data-item.is-center
+ a(href=url_for(config.tag_dir))
+ .headline= _p('aside.tags')
+ .length_num= site.tags.length
+
+ if site.categories.length
+ .card-info-data-item.is-center
+ a(href=url_for(config.category_dir))
+ .headline= _p('aside.categories')
+ .length_num= site.categories.length
+
+ .card-info-bookmark.is-center
+ a#bookmark-it.bookmark.button--primary.button--animated(href="javascript:;" title= _p('aside.card_bookmark') target="_self")
+ i.fa.fa-bookmark(aria-hidden="true")
+ span= _p('aside.card_bookmark') || 'Follow Me'
+
+ if(theme.social)
+ .card-info-social-icons.is-center
+ include ../header/social.pug
diff --git a/themes/butterfly/layout/includes/widget/card_categories.pug b/themes/butterfly/layout/includes/widget/card_categories.pug
new file mode 100644
index 00000000..94708210
--- /dev/null
+++ b/themes/butterfly/layout/includes/widget/card_categories.pug
@@ -0,0 +1,23 @@
+if site.categories.length
+ .card-widget.card-categories
+ .card-content
+ .item-headline
+ i.fa.fa-folder-open(aria-hidden="true")
+ span= _p('aside.card_categories')
+ ul.aside-category-item
+ mixin displayCategories(parent = undefined)
+ - site.categories.find({ parent }).sort("name").each(function(category) {
+ - var childCount = site.categories.find({ parent: category._id }).count();
+ li.aside-category-list
+ a.aside-category-list_link(href=url_for(category.path))
+ span.aside-category-list_name= category.name
+ span.aside-category-list_length= category.length
+
+ if childCount > 0
+ ul.aside-category-item.child
+ +displayCategories(category._id)
+ - })
+
+ +displayCategories()
+
+
diff --git a/themes/butterfly/layout/includes/widget/card_recent_post.pug b/themes/butterfly/layout/includes/widget/card_recent_post.pug
new file mode 100644
index 00000000..34088877
--- /dev/null
+++ b/themes/butterfly/layout/includes/widget/card_recent_post.pug
@@ -0,0 +1,25 @@
+.card-widget.card-recent-post
+ .card-content
+ .item-headline
+ i.fa.fa-history(aria-hidden="true")
+ span= _p('aside.card_recent_post')
+ .aside-recent-item
+ - site.posts.sort('date', -1).limit(5).each(function(article){
+ .aside-recent-post
+ - var link = article.link || article.path
+ - var title = article.title || _p('no_title')
+ - var no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-aside-cover' : ''
+ - var post_cover = article.cover
+
+ a(href=url_for(link))
+ if post_cover && theme.cover.aside_enable
+ .aside-post-cover
+ if theme.lazyload.enable
+ img.aside-post-bg.lazyload(data-src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` title=title alt=title)
+ else
+ img.aside-post-bg(src=`${post_cover}` onerror=`this.onerror=null;this.src='`+ url_for(theme.lodding_bg.post_page) + `'` title=title alt=title)
+ .aside-post-title(class=no_cover)
+ .aside-post_title(href=url_for(link) title=article.title || _p('no_title'))= article.title || _p('no_title')
+ time.aside-post_meta.post-meta__date(title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)]
+
+ - })
diff --git a/themes/butterfly/layout/includes/widget/card_tags.pug b/themes/butterfly/layout/includes/widget/card_tags.pug
new file mode 100644
index 00000000..cd4806ae
--- /dev/null
+++ b/themes/butterfly/layout/includes/widget/card_tags.pug
@@ -0,0 +1,7 @@
+if site.tags.length
+ .card-widget.card-tags
+ .card-content
+ .item-headline
+ i.fa.fa-tags(aria-hidden="true")
+ span= _p('aside.card_tags')
+ .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: 200, color: true, start_color: '#999', end_color: '#99a9bf'})
diff --git a/themes/butterfly/layout/includes/widget/card_webinfo.pug b/themes/butterfly/layout/includes/widget/card_webinfo.pug
new file mode 100644
index 00000000..5e0f8526
--- /dev/null
+++ b/themes/butterfly/layout/includes/widget/card_webinfo.pug
@@ -0,0 +1,27 @@
+- var webinfoIcon = theme.fontawesome_v5 && theme.fontawesome_v5.enable ? 'fas fa-chart-line' : 'fa fa-line-chart'
+.card-widget.card-webinfo
+ .card-content
+ .item-headline
+ i(class=webinfoIcon aria-hidden="true")
+ span= _p('aside.card_webinfo.headline')
+ .webinfo
+ .webinfo-item
+ .webinfo-article-name= _p('aside.card_webinfo.article_name') + " :"
+ .webinfo-article-count= site.posts.length
+ if theme.runtimeshow.enable
+ .webinfo-item
+ .webinfo-runtime-name= _p('aside.card_webinfo.runtime_name') + " :"
+ #webinfo-runtime-count.webinfo-runtime-count(start_date=theme.runtimeshow.start_date)
+ if theme.wordcount.enable && theme.wordcount.total_wordcount
+ .webinfo-item
+ .webinfo-site-wordcount-name=_p('aside.card_webinfo.site_wordcount') + " :"
+ .webinfo-site-wordcount=totalcount(site)
+ if theme.busuanzi.site_uv
+ .webinfo-item
+ .webinfo-site-uv-name= _p('aside.card_webinfo.site_uv_name') + " :"
+ .webinfo-site-uv-count#busuanzi_value_site_uv
+ if theme.busuanzi.site_pv
+ .webinfo-item
+ .webinfo-site-name= _p('aside.card_webinfo.site_pv_name') + " :"
+ .webinfo-site-pv-count#busuanzi_value_site_pv
+
diff --git a/themes/butterfly/layout/includes/widget/index.pug b/themes/butterfly/layout/includes/widget/index.pug
new file mode 100644
index 00000000..dc789d41
--- /dev/null
+++ b/themes/butterfly/layout/includes/widget/index.pug
@@ -0,0 +1,19 @@
+if theme.aside.enable
+ if page.aside !== false
+ #aside_content.aside_content
+ if theme.aside.card_author
+ !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
+ if theme.aside.card_announcement
+ !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
+ if theme.aside.card_recent_post
+ !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
+ if theme.ad && theme.ad.aside
+ !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
+ if theme.aside.card_categories
+ !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache})
+ if theme.aside.card_tags
+ !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
+ if theme.aside.card_archives
+ !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
+ if theme.aside.card_webinfo
+ !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})
\ No newline at end of file
diff --git a/themes/butterfly/layout/index.pug b/themes/butterfly/layout/index.pug
new file mode 100644
index 00000000..36f68603
--- /dev/null
+++ b/themes/butterfly/layout/index.pug
@@ -0,0 +1,6 @@
+extends includes/layout.pug
+
+block content
+ #recent-posts.recent-posts
+ include includes/recent-posts.pug
+ include includes/pagination.pug
\ No newline at end of file
diff --git a/themes/butterfly/layout/page-tags.pug b/themes/butterfly/layout/page-tags.pug
new file mode 100644
index 00000000..47c569b6
--- /dev/null
+++ b/themes/butterfly/layout/page-tags.pug
@@ -0,0 +1,14 @@
+.tag-cloud
+ .tag-cloud__title= _p('page.tag')
+ | -
+ span.tag-cloud__amount= site.tags.length
+ .tag-cloud-tags
+ - site.tags.sort('path').each(function (tags){
+ - var fontSize = Math.floor(Math.random() * 15 + 15) + "px"; //15 ~ 30
+ - var color = "rgb(" + Math.floor(Math.random() * 201) + ", " + Math.floor(Math.random() * 201) +", " + Math.floor(Math.random() * 201) +")"; // 0,0,0 -> 200,200,200
+ a(href=url_for(tags.path) style='font-size:' + fontSize + ';color:' + color)=tags.name
+ -})
+ if page.comments !== false
+ include includes/comments/index.pug
+
+
diff --git a/themes/butterfly/layout/page.pug b/themes/butterfly/layout/page.pug
new file mode 100644
index 00000000..19411b18
--- /dev/null
+++ b/themes/butterfly/layout/page.pug
@@ -0,0 +1,21 @@
+extends includes/layout.pug
+
+block content
+ if page.type === 'tags'
+ include page-tags.pug
+ else if page.type === 'link'
+ include flink.pug
+ else if page.type === 'categories'
+ .category-content
+ .category-lists
+ .category__title= _p('page.category')
+ | -
+ span.category__amount= site.categories.length
+ div!= list_categories()
+ if page.comments !== false
+ include includes/comments/index.pug
+ else
+ #page
+ #article-container!= page.content
+ if page.comments !== false
+ include includes/comments/index.pug
\ No newline at end of file
diff --git a/themes/butterfly/layout/post.pug b/themes/butterfly/layout/post.pug
new file mode 100644
index 00000000..0411099b
--- /dev/null
+++ b/themes/butterfly/layout/post.pug
@@ -0,0 +1,25 @@
+extends includes/layout.pug
+
+block content
+ article#post(class="")
+ #article-container!=page.content
+ include includes/post/post-copyright.pug
+ .tag_share
+ if (theme.post_meta.post.tags)
+ .post-meta__tag-list
+ each item, index in page.tags.data
+ a(href=url_for(item.path)).post-meta__tags #[=item.name]
+ !=partial('includes/share/index', {}, {cache:theme.fragment_cache})
+
+ if theme.reward.enable
+ !=partial('includes/post/reward', {}, {cache:theme.fragment_cache})
+
+ //- ad
+ if theme.ad && theme.ad.post
+ .post-ad!=theme.ad.post
+
+ include includes/pagination.pug
+ if theme.related_post && theme.related_post.enable
+ != related_posts(page,site.posts)
+ if page.comments !== false
+ include includes/comments/index.pug
\ No newline at end of file
diff --git a/themes/butterfly/layout/tag.pug b/themes/butterfly/layout/tag.pug
new file mode 100644
index 00000000..ec2e31b2
--- /dev/null
+++ b/themes/butterfly/layout/tag.pug
@@ -0,0 +1,14 @@
+extends includes/layout.pug
+
+block content
+ if theme.tag_ui == 'index'
+ include ./includes/mixins/UI.pug
+ #recent-posts.recent-posts
+ +UI_NEW(page.posts)
+ include includes/pagination.pug
+ else
+ include ./includes/mixins/article-sort.pug
+ #tag
+ .article-sort-title= _p('page.tag') + ' - ' + page.tag
+ +articleSort(page.posts)
+ include includes/pagination.pug
\ No newline at end of file
diff --git a/themes/butterfly/package.json b/themes/butterfly/package.json
new file mode 100644
index 00000000..4fdd627c
--- /dev/null
+++ b/themes/butterfly/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "hexo-theme-butterfly",
+ "version": "2.2.5",
+ "description": "A Hexo Theme: Butterfly"
+}
\ No newline at end of file
diff --git a/themes/butterfly/scripts/events/404.js b/themes/butterfly/scripts/events/404.js
new file mode 100644
index 00000000..e0917449
--- /dev/null
+++ b/themes/butterfly/scripts/events/404.js
@@ -0,0 +1,8 @@
+hexo.extend.generator.register('404', function(locals){
+ if (!hexo.theme.config.error_404.enable) return
+ return {
+ path: '404.html',
+ data: locals.posts,
+ layout: ['404']
+ }
+});
\ No newline at end of file
diff --git a/themes/butterfly/scripts/events/replace-config.js b/themes/butterfly/scripts/events/replace-config.js
new file mode 100644
index 00000000..7d7612d8
--- /dev/null
+++ b/themes/butterfly/scripts/events/replace-config.js
@@ -0,0 +1,12 @@
+/**
+ * Note: configs in _data/butterfly.yml will replace configs in hexo.theme.config.
+ */
+
+hexo.on('generateBefore', function () {
+ const rootConfig = hexo.config
+ if (hexo.locals.get) {
+ const data = hexo.locals.get('data')
+ data && data.butterfly && (hexo.theme.config = data.butterfly)
+ }
+ hexo.theme.config.rootConfig = rootConfig
+})
\ No newline at end of file
diff --git a/themes/butterfly/scripts/filters/hide-post.js b/themes/butterfly/scripts/filters/hide-post.js
new file mode 100644
index 00000000..7ce8f84e
--- /dev/null
+++ b/themes/butterfly/scripts/filters/hide-post.js
@@ -0,0 +1,63 @@
+/**
+ * global hexo
+ * from printempw/hexo-hide-posts
+ * modify by Jerry
+ */
+
+'use strict';
+
+var public_generators = [];
+
+hexo.extend.filter.register('before_generate', function () {
+ this._bindLocals();
+
+ const all_posts = this.locals.get('posts');
+ const hidden_posts = all_posts.find({
+ 'hide': true
+ });
+ const normal_posts = all_posts.filter(post => !post['hide']);
+
+ this.locals.set('all_posts', all_posts);
+ this.locals.set('hidden_posts', hidden_posts);
+ this.locals.set('posts', normal_posts);
+});
+
+hexo.extend.filter.register('after_init', function () {
+
+ const original = {};
+ for (const name in hexo.extend.generator.list()) {
+ original[name] = hexo.extend.generator.get(name);
+ }
+
+ hexo.extend.generator.register('post', async function (locals) {
+ const fg = original.post.bind(this);
+
+ const generated_public = await fg(locals);
+ const generated_hidden = await fg(Object.assign({}, locals, {
+ posts: locals.hidden_posts
+ }));
+
+ // Remove post.prev and post.next for hidden posts
+ generated_hidden.forEach(ele => {
+ ele.data.prev = ele.data.next = null;
+ });
+
+ return generated_public.concat(generated_hidden);
+ });
+
+ // Then we hack into other generators if necessary
+ public_generators.filter(
+ name => Object.keys(original).includes(name)
+ ).forEach(name => {
+ // Overwrite original generator
+ hexo.extend.generator.register(name, function (locals) {
+ const fg = original[name].bind(this);
+
+ return fg(Object.assign({}, locals, {
+ posts: new locals.posts.constructor(
+ locals.posts.data.concat(locals.hidden_posts.data)
+ )
+ }));
+ });
+ });
+});
\ No newline at end of file
diff --git a/themes/butterfly/scripts/filters/post-lazyload.js b/themes/butterfly/scripts/filters/post-lazyload.js
new file mode 100644
index 00000000..c0a6624c
--- /dev/null
+++ b/themes/butterfly/scripts/filters/post-lazyload.js
@@ -0,0 +1,29 @@
+'use strict';
+
+const url_for = require('hexo-util').url_for.bind(hexo);
+
+function lazyProcess(htmlContent) {
+ var bg = url_for(hexo.theme.config.lodding_bg.post);
+ return htmlContent.replace(/- `;
+
+ for (let i = 0, len = data.length; i < Math.min(len, limit); i++) {
+ const item = data[i];
+
+ result += `
- `; + + result += ``; + result += ``; + result += transform ? transform(item.name) : item.name; + result += ``; + + if (showCount) { + result += `${item.count}`; + } + result += ""; + result += " "; + } + + if (data.length > limit) { + result += `
- `; + result += + ``; + result += more_button; + result += ""; + result += " "; + } + result += "
'
+ result += ''
+ result += '
+ 
+
+
+
+ `
+}
+
+hexo.extend.tag.register('gallery', gallery, {ends: true});
+hexo.extend.tag.register('galleryGroup', galleryGroup);
diff --git a/themes/butterfly/scripts/tags/hide.js b/themes/butterfly/scripts/tags/hide.js
new file mode 100644
index 00000000..fd8e19dd
--- /dev/null
+++ b/themes/butterfly/scripts/tags/hide.js
@@ -0,0 +1,33 @@
+
+/**
+ * {% hideInline content,display,bg,color %}
+ * content不能包含當引號，可用 '
+ */
+function hideInline(args) {
+ args = args.join(' ').split(',')
+ let content = args[0].trim()
+ let display = args[1] || 'Click'
+ let bg = args[2] ==='' || typeof args[2] ==='undefined' ? '' : `background-color:${args[2]}`
+ let color = args[3] || '#fff'
+ return ``
+}
+
+/**
+ * {% hideBlock display,bg,color %}
+ * content
+ * {% endhideBlock %}
+ */
+function hideBlock(args,content) {
+ args = args.join(' ').split(',')
+ let display = args[0] || 'Click'
+ let bg = args[1] ==='' || typeof args[2] ==='undefined' ? '' : `background-color:${args[2]}`
+ let color = args[2] || '#fff'
+
+ return ``
+
+}
+
+hexo.extend.tag.register('hideInline', hideInline);
+hexo.extend.tag.register('hideBlock', hideBlock, {ends: true});
\ No newline at end of file
diff --git a/themes/butterfly/scripts/tags/mermaid.js b/themes/butterfly/scripts/tags/mermaid.js
new file mode 100644
index 00000000..319310eb
--- /dev/null
+++ b/themes/butterfly/scripts/tags/mermaid.js
@@ -0,0 +1,7 @@
+function mermaid(args, content) {
+ return `
' + + stats + + '' + + '
' +
+ ''
+ )
+ }
+ }
+ })
+ )
+
+ search.addWidget(
+ instantsearch.widgets.pagination({
+ container: '#algolia-pagination',
+ scrollTo: false,
+ showFirstLast: false,
+ labels: {
+ first: '',
+ last: '',
+ previous: '',
+ next: ''
+ },
+ cssClasses: {
+ root: 'pagination',
+ item: 'pagination-item',
+ link: 'page-number',
+ active: 'current',
+ disabled: 'disabled-item'
+ }
+ })
+ )
+ search.start()
+})
diff --git a/themes/butterfly/source/js/search/local-search.js b/themes/butterfly/source/js/search/local-search.js
new file mode 100644
index 00000000..efcec8ab
--- /dev/null
+++ b/themes/butterfly/source/js/search/local-search.js
@@ -0,0 +1,104 @@
+$(function () {
+ var loadFlag = false
+ $('a.social-icon.search').on('click', function () {
+ $('body').css({ width: '100%', overflow: 'hidden' })
+ $('.search-dialog').css('display', 'block')
+ $('#local-search-input input').focus()
+ $('.search-mask').fadeIn()
+ if (!loadFlag) {
+ search(GLOBAL_CONFIG.localSearch.path)
+ loadFlag = true
+ }
+
+ // shortcut: ESC
+ document.addEventListener('keydown', function f (event) {
+ if (event.code === 'Escape') {
+ closeSearch()
+ document.removeEventListener('keydown', f)
+ }
+ })
+ })
+
+ var closeSearch = function () {
+ $('body').css('width', '')
+ $('body').css('overflow', '')
+ $('.search-dialog').css({
+ animation: 'search_close .5s'
+ })
+
+ $('.search-dialog').animate({}, function () {
+ setTimeout(function () {
+ $('.search-dialog').css({
+ animation: '',
+ display: 'none'
+ })
+ }, 500)
+ })
+
+ $('.search-mask').fadeOut()
+ }
+ $('.search-mask, .search-close-button').on('click touchstart', closeSearch)
+
+ function search (path) {
+ $.ajax({
+ url: GLOBAL_CONFIG.root + path,
+ dataType: 'xml',
+ success: function (xmlResponse) {
+ // get the contents from search data
+ var datas = $('entry', xmlResponse).map(function () {
+ return {
+ title: $('title', this).text(),
+ content: $('content', this).text(),
+ url: $('url', this).text()
+ }
+ }).get()
+ var $input = $('#local-search-input input')[0]
+ var $resultContent = $('#local-hits')[0]
+ $input.addEventListener('input', function () {
+ var str = '
'
+
+ for (var i = 0; i < Math.min(relatedPosts.length, limit_num); i++) {
+ var cover = relatedPosts[i].cover === false ? relatedPosts[i].randomcover : relatedPosts[i].cover
+ result += '
'
+ return result;
+
+ }
+});
+
+function isTagRelated(tagName, TBDtags) {
+ var result = false;
+ TBDtags.forEach(function (tag) {
+ if (tagName == tag.name) {
+ result = true;
+ };
+ })
+ return result;
+}
+
+function findItem(arrayToSearch, attr, val) {
+ for (var i = 0; i < arrayToSearch.length; i++) {
+ if (arrayToSearch[i][attr] == val) {
+ return i
+ };
+ };
+ return -1;
+}
+
+function compare(attr) {
+ return function (a, b) {
+ var val1 = a[attr];
+ var val2 = b[attr];
+ return val2 - val1;
+ }
+}
\ No newline at end of file
diff --git a/themes/butterfly/scripts/tags/gallery.js b/themes/butterfly/scripts/tags/gallery.js
new file mode 100644
index 00000000..b4bcd28c
--- /dev/null
+++ b/themes/butterfly/scripts/tags/gallery.js
@@ -0,0 +1,27 @@
+const url_for = require('hexo-util').url_for.bind(hexo);
+
+function gallery(args, content) {
+ return `${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
+
`;
+}
+
+function galleryGroup(args){
+ const name = args[0]
+ const desrc = args[1]
+ const url = url_for(args[2])
+ const img = url_for(args[3])
+
+ return `
+ ${name}
+ ${desrc}
+ +
+ ${content}
+
`;
+}
+
+hexo.extend.tag.register('mermaid', mermaid, {ends: true});
\ No newline at end of file
diff --git a/themes/butterfly/scripts/tags/note.js b/themes/butterfly/scripts/tags/note.js
new file mode 100644
index 00000000..61acd3b8
--- /dev/null
+++ b/themes/butterfly/scripts/tags/note.js
@@ -0,0 +1,15 @@
+/**
+ * note.js
+ * transplant from hexo-theme-next
+ */
+
+'use strict';
+
+function postNote(args, content) {
+ return `
+ ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
+
`;
+}
+
+hexo.extend.tag.register('note', postNote, {ends: true});
+hexo.extend.tag.register('subnote', postNote, {ends: true});
\ No newline at end of file
diff --git a/themes/butterfly/source/css/_global/index.styl b/themes/butterfly/source/css/_global/index.styl
new file mode 100644
index 00000000..09bbb2a1
--- /dev/null
+++ b/themes/butterfly/source/css/_global/index.styl
@@ -0,0 +1,430 @@
+html
+ height: 100%
+ font-size: $rem
+
+body
+ position: relative
+ min-height: 100%
+ background: $body-bg
+ color: $font-black
+ font-size: $font-size
+ font-family: $font-family
+ line-height: $text-line-height
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+
+ if !hexo-config('copy.enable')
+ user-select: none
+ -moz-user-select: none
+ -webkit-user-select: none
+ -ms-user-select: none
+
+*::-webkit-scrollbar
+ width: 8px
+ height: 8px
+
+*::-webkit-scrollbar-thumb
+ background: $light-blue
+
+*::-webkit-scrollbar-track
+ background-color: transparent
+
+#web_bg
+ position: fixed
+ z-index: -999
+ width: 100%
+ height: 100%
+ background: $web-bg
+ background-attachment: local
+ background-position: center
+ background-size: cover
+ background-repeat: no-repeat
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+ position: relative
+ margin: 1rem 0 .7rem
+ color: lighten($font-color, 15%)
+ font-weight: bold
+
+ code
+ font-size: inherit !important
+
+*
+ box-sizing: border-box
+
+#toggle-sidebar
+ position: fixed
+ bottom: $sidebar-icon-top
+ left: $sidebar-icon-left
+ z-index: 100
+ font-size: $sidebar-icon-size
+ // opacity: 0
+ cursor: pointer
+ transition: all .2s
+
+hr
+ position: relative
+ margin: 2rem auto
+ width: calc(100% - 4px)
+ border: 2px dashed lighten($theme-hr-color, 50%)
+
+ &:hover
+ &:before
+ left: calc(95% - 20px)
+
+ &:before
+ position: absolute
+ top: $hr-icon-top
+ left: 5%
+ z-index: 1
+ color: $theme-hr-color
+ content: $hr-icon
+ font-style: normal
+ font-variant: normal
+ font-size: 20px
+ line-height: 1
+ transition: all 1s ease-in-out
+ text-rendering: auto
+ -webkit-font-smoothing: antialiased
+
+ if hexo-config('fontawesome_v5') && hexo-config('fontawesome_v5.enable')
+ font-weight: 600
+ font-family: 'Font Awesome 5 Free'
+ else
+ font-weight: normal
+ font-family: FontAwesome
+
+iframe
+ margin: 0 0 1rem
+
+table
+ display: block
+ overflow: auto
+ margin: 0 0 1rem
+ width: 100%
+ border-spacing: 0
+ border-collapse: collapse
+ empty-cells: show
+
+ thead
+ background: alpha($table-thead-bg, 10%)
+
+ th,
+ td
+ padding: .3rem .6rem
+ border: 1px solid darken($light-grey, 10%)
+ vertical-align: middle
+
+*::selection
+ background: $theme-text-selection-color
+ color: #F7F7F7
+
+// font
+#nav #site_title,
+#nav #site_subtitle,
+#site-name,
+#aside_content .author-info__name,
+#aside_content .author-info__description
+ font-family: $site-name-font
+
+.is_right
+ text-align: right
+
+.is_left
+ text-align: left
+
+.is-center
+ text-align: center
+
+.is_visible
+ display: block !important
+
+.is-visible-inline
+ display: inline-block !important
+
+.is_invisible
+ display: none !important
+
+.is_hidden
+ overflow: hidden
+
+.pull_left
+ float: left
+
+.pull_right
+ float: right
+
+// button hover
+.button--primary
+ color: $theme-button-hover-color
+
+.button--animated
+ transition-duration: 1s
+ transition-property: color
+
+ &:before
+ position: absolute
+ top: 0
+ right: 0
+ bottom: 0
+ left: 0
+ z-index: -1
+ background: $theme-button-hover-color
+ content: ''
+ transition-timing-function: ease-out
+ transition-duration: .5s
+ transition-property: transform
+ transform: scaleX(0)
+ transform-origin: 0 50%
+
+ &:hover
+ &:before
+ transition-timing-function: cubic-bezier(.45, 1.64, .47, .66)
+ transform: scaleX(1)
+
+img[src=''],
+img:not([src])
+ opacity: 0
+
+.img-alt
+ margin: -.5rem 0 .5rem
+
+// hexo tag video
+.video-container
+ position: relative
+ overflow: hidden
+ margin-bottom: .8rem
+ padding-top: 56.25%
+ height: 0
+
+ iframe
+ position: absolute
+ top: 0
+ left: 0
+ margin-top: 0
+ width: 100%
+ height: 100%
+
+// tag-hide
+.hide-inline,
+.hide-block
+ & > .hide-button
+ position: relative
+ z-index: 1
+ display: inline-block
+ padding: 0 1rem
+ background: $tag-hide-bg
+ text-align: center
+ cursor: pointer
+
+ &:hover
+ text-decoration: none !important
+
+ & > .hide-content
+ display: none
+
+.hide-inline
+ & > .hide-button
+ margin: 0 .3rem
+
+ & > .hide-content
+ margin: 0 .3rem
+
+.hide-block
+ margin: 0 0 .8rem
+
+.comment_headling
+ margin-bottom: 10px
+ font-weight: 700
+ font-size: 20px
+
+.post-ad
+ margin: 2rem 0 !important
+
+.ad_height
+ display: block !important
+ height: auto !important
+
+#content-inner,
+#footer
+ animation: main 1s
+
+#nav
+ animation: nav-effect 1s
+
+// #page-header
+// animation: header-effect 1s
+#site_title,
+#site_subtitle
+ animation: titlescale 1s
+
+canvas,
+#web_bg
+ animation: to_show 4s
+
+.card-announcement-animation
+ color: #FF0000
+ animation: announ_animation .8s linear infinite
+
+.scroll-down-effects
+ animation: scroll-down-effect 1.5s infinite
+
+if hexo-config('avatar.effect') == true
+ .avatar-img
+ animation: avatar_turn_around 2s linear infinite
+
+.reward-main
+ animation: donate_effcet .3s .1s ease both
+
+.tocOpenPc
+ .sidebar-toc__title
+ animation: tocsidebarLtoR .5s
+
+ .sidebar-toc__progress
+ animation: tocsidebarLtoR .7s
+
+ .sidebar-toc__content
+ animation: tocsidebarLtoR .9s
+
+.tocOpenMobile
+ .sidebar-toc__title
+ animation: tocsidebarRtoL .5s
+
+ .sidebar-toc__progress
+ animation: tocsidebarRtoL .7s
+
+ .sidebar-toc__content
+ animation: tocsidebarRtoL .9s
+
+@keyframes scroll-down-effect
+ 0%
+ top: 0
+ opacity: .4
+
+ 50%
+ top: -16px
+ opacity: 1
+
+ 100%
+ top: 0
+ opacity: .4
+
+@keyframes nav-effect
+ 0%
+ opacity: 0
+ transform: translateY(-50px)
+
+ 100%
+ opacity: 1
+ transform: translateY(0)
+
+@keyframes header-effect
+ 0%
+ opacity: 0
+
+ 60%
+ opacity: 0
+ transform: translateY(-30px)
+
+ 100%
+ opacity: 1
+ transform: translateY(0)
+
+@keyframes headerNoOpacity
+ 0%
+ transform: translateY(-50px)
+
+ 100%
+ transform: translateY(0)
+
+@keyframes main
+ 0%
+ opacity: 0
+ transform: translateY(50px)
+
+ 100%
+ opacity: 1
+ transform: translateY(0)
+
+@keyframes titlescale
+ 0%
+ opacity: 0
+ transform: scale(.7)
+
+ 100%
+ opacity: 1
+ transform: scale(1)
+
+@keyframes search_close
+ 0%
+ opacity: 1
+ transform: scale(1)
+
+ 100%
+ opacity: 0
+ transform: scale(.7)
+
+@keyframes to_show
+ 0%
+ opacity: 0
+
+ 100%
+ opacity: 1
+
+@keyframes avatar_turn_around
+ from
+ transform: rotate(0)
+
+ to
+ transform: rotate(360deg)
+
+@keyframes sub_menus
+ 0%
+ opacity: 0
+ transform: translateY(10px)
+
+ 100%
+ opacity: 1
+ transform: translateY(0)
+
+@keyframes donate_effcet
+ 0%
+ opacity: 0
+ transform: translateY(-20px)
+
+ 100%
+ opacity: 1
+ transform: translateY(0)
+
+@keyframes announ_animation
+ 0%,
+ to
+ transform: scale(1)
+
+ 50%
+ transform: scale(1.2)
+
+@keyframes sidebarItem
+ 0%
+ transform: translateX(200px)
+
+ 100%
+ transform: translateX(0)
+
+@keyframes tocsidebarRtoL
+ 0%
+ transform: translateX(200px)
+
+ 100%
+ transform: translateX(0)
+
+@keyframes tocsidebarLtoR
+ 0%
+ transform: translateX(-200px)
+
+ 100%
+ transform: translateX(0)
diff --git a/themes/butterfly/source/css/_highlight/diff.styl b/themes/butterfly/source/css/_highlight/diff.styl
new file mode 100644
index 00000000..19aa8d7d
--- /dev/null
+++ b/themes/butterfly/source/css/_highlight/diff.styl
@@ -0,0 +1,8 @@
+$highlight_theme = hexo-config('highlight_theme')
+
+if $highlight_theme == 'light'
+ $highlight-deletion = #fdd
+ $highlight-addition = #dfd
+else
+ $highlight-deletion = #008000
+ $highlight-addition = #800000
diff --git a/themes/butterfly/source/css/_highlight/highlight.styl b/themes/butterfly/source/css/_highlight/highlight.styl
new file mode 100644
index 00000000..12c81dff
--- /dev/null
+++ b/themes/butterfly/source/css/_highlight/highlight.styl
@@ -0,0 +1,276 @@
+// https://github.com/equinusocio/vsc-material-theme
+@require 'theme'
+@require 'diff'
+
+wordWrap = !hexo-config('rootConfig.highlight.line_number') && hexo-config('code_word_wrap')
+
+$code-block
+ overflow: auto
+ margin: 0 0 1rem
+ padding: 0
+ background: $highlight-background
+ color: $highlight-foreground
+ line-height: $line-height-code-block
+
+ if wordWrap
+ counter-reset: line
+ white-space: pre-wrap
+
+.code-area-wrap
+ position: relative
+ margin: 0 0 1rem
+
+figure.highlight
+ position: relative
+
+blockquote
+ margin: 0 0 1rem
+ padding: .1rem .8rem
+ border-left: .2rem solid $blockquote-padding-color
+ background-color: $blockquote-background-color
+ color: $blockquote-color
+
+ a
+ word-break: break-all
+
+ p
+ margin: 0 !important
+ padding: .5rem 0
+
+ footer
+ padding: 0 0 .5rem
+
+ cite
+ &:before
+ padding: 0 .3em
+ content: '—'
+
+#article-container
+ pre,
+ code
+ font-family: $code-font !important
+
+ code
+ padding: .1rem .2rem
+ background: $code-background
+ color: $code-foreground
+ word-wrap: break-word
+ word-break: break-word
+ overflow-wrap: break-word
+
+ pre
+ @extend $code-block
+ padding: 10px 20px
+
+ code
+ padding: 0
+ background: none
+ color: $highlight-foreground
+ text-shadow: none
+
+ figure.highlight
+ @extend $code-block
+ position: relative
+ border-radius: 1px
+
+ if hexo-config('highlight_shrink') == true
+ display: none
+
+ pre
+ margin: 0
+ padding: 8px 0
+ border: none
+
+ .line
+ &::selection
+ background: $highlight-selection
+ color: $highlight-foreground
+
+ if wordWrap
+ &:before
+ display: inline-block
+ padding: 0 .3rem 0 0
+ min-width: 1.6rem
+ color: $highlight-gutter.color
+ content: counter(line)
+ counter-increment: line
+ text-align: left
+
+ &.marked
+ background-color: $highlight-selection
+
+ table
+ position: relative
+ display: table
+ margin: 0
+ width: auto
+ border: none
+
+ td
+ padding: 0
+ border: none
+
+ figcaption
+ clearfix()
+ padding: .3rem 0 .1rem .7rem
+ color: $highlight-foreground
+ font-size: 1em
+ line-height: 1em
+
+ a
+ float: right
+ padding-right: 10px
+ color: $highlight-foreground
+
+ &:hover
+ border-bottom-color: $highlight-foreground
+
+ .gutter pre
+ padding-right: .5rem
+ padding-left: .5rem
+ background-color: $highlight-gutter.bg-color
+ color: $highlight-gutter.color
+ text-align: right
+
+ .code pre
+ padding-right: .5rem
+ padding-left: .5rem
+ width: 100%
+ background-color: $highlight-background
+
+ .line
+ height: 1rem
+
+ .gutter
+ user-select: none
+ -webkit-user-select: none
+ -moz-user-select: none
+ -ms-user-select: none
+
+ .gist table
+ width: auto
+
+ td
+ border: none
+
+ // For diff highlight
+ pre .deletion
+ background: $highlight-deletion
+
+ pre .addition
+ background: $highlight-addition
+
+ pre .meta
+ color: $highlight-purple
+
+ pre
+ .comment
+ color: $highlight-comment
+
+ &::selection
+ background: $highlight-selection
+ color: $highlight-foreground
+
+ .variable,
+ .attribute,
+ .regexp,
+ .ruby .constant,
+ .xml .tag .title,
+ .xml .pi,
+ .xml .doctype,
+ .html .doctype,
+ .css .id,
+ .tag .name,
+ .css .class,
+ .css .pseudo
+ color: $highlight-red
+
+ &::selection
+ background: $highlight-selection
+ color: $highlight-foreground
+
+ .tag
+ color: $highlight-aqua
+
+ &::selection
+ background: $highlight-selection
+ color: $highlight-foreground
+
+ .number,
+ .preprocessor,
+ .literal,
+ .params,
+ .constant,
+ .command
+ color: $highlight-orange
+
+ &::selection
+ background: $highlight-selection
+ color: $highlight-foreground
+
+ .built_in
+ color: $highlight-yellow
+
+ &::selection
+ background: $highlight-selection
+ color: $highlight-foreground
+
+ .ruby .class .title,
+ .css .rules .attribute,
+ .string,
+ .value,
+ .inheritance,
+ .header,
+ .ruby .symbol,
+ .xml .cdata,
+ .special,
+ .number,
+ .formula
+ color: $highlight-green
+
+ &::selection
+ background: $highlight-selection
+ color: $highlight-foreground
+
+ .keyword,
+ .title,
+ .css .hexcolor
+ color: $highlight-aqua
+
+ &::selection
+ background: $highlight-selection
+ color: $highlight-foreground
+
+ .function,
+ .python .decorator,
+ .python .title,
+ .ruby .function .title,
+ .ruby .title .keyword,
+ .perl .sub,
+ .javascript .title,
+ .coffeescript .title
+ color: $highlight-blue
+
+ &::selection
+ background: $highlight-selection
+ color: $highlight-foreground
+
+ .tag .attr,
+ .javascript .function
+ color: $highlight-purple
+
+ &::selection
+ background: $highlight-selection
+ color: $highlight-foreground
+
+.highlight-tools
+ position: relative
+ overflow: hidden
+ width: 100%
+ height: 1.4rem
+ background: darken($highlight-background, 5)
+ color: $highlight-foreground
+ font-size: 14px
+
+.highlight-close
+ height: 0 !important
\ No newline at end of file
diff --git a/themes/butterfly/source/css/_highlight/theme.styl b/themes/butterfly/source/css/_highlight/theme.styl
new file mode 100644
index 00000000..c956ce1b
--- /dev/null
+++ b/themes/butterfly/source/css/_highlight/theme.styl
@@ -0,0 +1,91 @@
+$highlight_theme = hexo-config('highlight_theme')
+
+if $highlight_theme == 'default'
+ $highlight-background = #263238
+ $highlight-current-line = #efefef
+ $highlight-selection = #80CBC420
+ $highlight-foreground = #EEFFFF
+ $highlight-comment = #546E7A
+ $highlight-red = #FF5370
+ $highlight-orange = #F78C6C
+ $highlight-yellow = #FFCB6B
+ $highlight-green = #C3E88D
+ $highlight-aqua = #89DDFF
+ $highlight-blue = #82AAFF
+ $highlight-purple = #C792EA
+ $highlight-gutter = {
+ color: #37474F,
+ bg-color: $highlight-background
+ }
+
+if $highlight_theme == 'darker'
+ $highlight-background = #212121
+ $highlight-current-line = #282a2e
+ $highlight-selection = #61616150
+ $highlight-foreground = #EEFFFF
+ $highlight-comment = #4A4A4A
+ $highlight-red = #FF5370
+ $highlight-orange = #F78C6C
+ $highlight-yellow = #FFCB6B
+ $highlight-green = #C3E88D
+ $highlight-aqua = #89DDFF
+ $highlight-blue = #82AAFF
+ $highlight-purple = #C792EA
+ $highlight-gutter = {
+ color: #424242,
+ bg-color: $highlight-background
+ }
+
+if $highlight_theme == 'pale night'
+ $highlight-background = #292D3E
+ $highlight-current-line = #393939
+ $highlight-selection = #717CB450
+ $highlight-foreground = #A6ACCD
+ $highlight-comment = #676E95
+ $highlight-red = #FF5370
+ $highlight-orange = #F78C6C
+ $highlight-yellow = #FFCB6B
+ $highlight-green = #C3E88D
+ $highlight-aqua = #89DDFF
+ $highlight-blue = #82AAFF
+ $highlight-purple = #C792EA
+ $highlight-gutter = {
+ color: #3A3F58,
+ bg-color: $highlight-background
+ }
+
+if $highlight_theme == 'ocean'
+ $highlight-background = #0F111A
+ $highlight-current-line = #000000
+ $highlight-selection = #717CB450
+ $highlight-foreground = #8F93A2
+ $highlight-comment = #464B5D
+ $highlight-red = #FF5370
+ $highlight-orange = #F78C6C
+ $highlight-yellow = #FFCB6B
+ $highlight-green = #C3E88D
+ $highlight-aqua = #89DDFF
+ $highlight-blue = #82AAFF
+ $highlight-purple = #C792EA
+ $highlight-gutter = {
+ color: #3B3F5180,
+ bg-color: $highlight-background
+ }
+
+if $highlight_theme == 'light'
+ $highlight-background = #F6F8FA
+ $highlight-current-line = #00346e
+ $highlight-selection = #80CBC440
+ $highlight-foreground = #90A4AE
+ $highlight-comment = #90A4AE90
+ $highlight-red = #E53935
+ $highlight-orange = #F76D47
+ $highlight-yellow = #FFB62C
+ $highlight-green = #91B859
+ $highlight-aqua = #39ADB5
+ $highlight-blue = #6182B8
+ $highlight-purple = #7C4DFF
+ $highlight-gutter = {
+ color: #CFD8DC,
+ bg-color: $highlight-background
+ }
diff --git a/themes/butterfly/source/css/_layout/404.styl b/themes/butterfly/source/css/_layout/404.styl
new file mode 100644
index 00000000..0ffb194e
--- /dev/null
+++ b/themes/butterfly/source/css/_layout/404.styl
@@ -0,0 +1,44 @@
+if hexo-config('error_404.enable')
+ #nav.error-no-found
+ display: flex
+ flex-direction: column
+ justify-content: center
+ height: 100vh
+
+ &:before
+ width: 100%
+ height: 100%
+ background-color: alpha($dark-black, .5)
+ content: ''
+
+ #error_info
+ position: absolute
+ padding: 0 4rem
+ width: 100%
+ letter-spacing: 3px
+ line-height: 1
+
+ #error_title,
+ #error_subtitle
+ margin: 0
+ padding: 0
+ color: $light-grey
+ letter-spacing: 5px
+ font-family: $site-name-font
+
+ #error_title
+ font-size: 10rem
+
+ #error_subtitle
+ font-size: 2rem
+
+ @media screen and (max-width: $sm)
+ #nav.error-no-found
+ #error_info
+ padding: 0 2rem
+
+ #error_title
+ font-size: 7rem !important
+
+ #error_subtitle
+ font-size: 1rem !important
diff --git a/themes/butterfly/source/css/_layout/aside.styl b/themes/butterfly/source/css/_layout/aside.styl
new file mode 100644
index 00000000..6ed0ff59
--- /dev/null
+++ b/themes/butterfly/source/css/_layout/aside.styl
@@ -0,0 +1,227 @@
+#aside_content
+ width: 25%
+
+ .card-widget:not(:first-child)
+ margin-top: 1rem
+
+ .card-widget
+ overflow: hidden
+ border-radius: 8px
+ background: $card-bg
+ box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+ transition: all .3s
+
+ &:hover
+ box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
+
+ .card-info
+ img
+ display: inline-block
+ width: 110px
+ height: 110px
+ border-radius: 70px
+ transition: all .3s
+
+ &:hover
+ transform: rotate(540deg)
+
+ .author-info
+ &__name
+ font-weight: 500
+ font-size: 1.1rem
+
+ &__description
+ margin-top: -.3rem
+
+ .card-info-data
+ padding: .7rem 0
+
+ & > .card-info-data-item
+ display: inline-block
+ width: 33.3%
+
+ a
+ .headline
+ display: block
+ overflow: hidden
+ color: $font-black
+ // text-transform: uppercase
+ text-overflow: ellipsis
+ white-space: nowrap
+ font-size: .7rem
+
+ .length_num
+ color: $dark-black
+ font-size: 1rem
+
+ .card-info-social-icons
+ margin: .3rem 0 -.3rem
+
+ .social-icon
+ margin: 0 .5rem
+ color: $font-black
+ font-size: 1rem
+ cursor: pointer
+
+ i
+ transition: all .3s
+
+ &:hover
+ transform: rotate(540deg)
+
+ #bookmark-it
+ position: relative
+ z-index: 1
+ display: block
+ background-color: $light-blue
+ color: $button-color
+ text-transform: uppercase
+ line-height: 1.6rem
+
+ span
+ padding-left: .5rem
+
+ .card-content
+ padding: 1rem 1.2rem
+
+ .item-headline
+ font-size: .8rem
+
+ span
+ margin-left: .5rem
+
+ .card-tag-cloud
+ a
+ word-break: keep-all
+
+ &:hover
+ color: $light-blue !important
+
+ .card-recent-post
+ .aside-recent-item
+ margin: 10px 0 -15px
+
+ & > .aside-recent-post
+ margin-bottom: 10px
+
+ & > a
+ color: $font-black
+
+ .aside-post-cover
+ float: left
+ overflow: hidden
+ width: 66px
+ height: 66px
+
+ .aside-post-bg
+ padding: 0
+ max-width: 100%
+ width: 100%
+ height: 100%
+ transition: all .6s
+ object-fit: cover
+
+ &:hover
+ box-shadow: none
+ transform: scale(1.1)
+
+ .aside-post-title
+ .aside-post_meta
+ padding-left: 10px
+ color: $theme-meta-color
+ font-size: .6rem
+
+ .aside-post_title
+ display: -webkit-box
+ overflow: hidden
+ padding-left: 10px
+ height: 40px
+ line-height: 1rem
+ -webkit-line-clamp: 2
+ -webkit-box-orient: vertical
+
+ &:hover
+ color: $light-blue !important
+
+ &.no-aside-cover
+ .aside-post_title
+ height: auto
+
+ .card-archives ul.archive-list,
+ .card-categories ul.aside-category-item
+ margin: 0
+ padding: .2rem 0 0
+ list-style: none
+
+ .card-archives ul.archive-list > .archive-list-item,
+ .card-categories ul.aside-category-item > .aside-category-list
+ padding: .2rem 1rem
+ cursor: pointer
+ transition: all .3s
+
+ &:hover
+ padding: .2rem .85rem
+ background-color: $light-blue
+
+ a
+ color: $font-black
+
+ span
+ display: inline-block
+ overflow: hidden
+ vertical-align: bottom
+ text-overflow: ellipsis
+ white-space: nowrap
+
+ &:first-child
+ width: 80%
+
+ &:last-child
+ width: 20%
+ text-align: right
+
+ .card-categories
+ .aside-category-item
+ &.child
+ padding: 0 0 0 1.2rem
+
+ .card-webinfo
+ .webinfo
+ padding: .2rem 1rem
+
+ .webinfo-item
+ display: block
+ padding: 4px 0 0
+
+ div
+ &:first-child
+ display: inline-block
+
+ &:last-child
+ display: inline-block
+ float: right
+
+@media screen and (max-width: 900px)
+ .layout_page
+ flex-direction: column
+
+ #recent-posts,
+ #aside_content
+ width: 100% !important
+
+ #aside_content
+ .card-widget:first-child
+ margin-top: 1rem
+
+@media screen and (min-width: 900px)
+ #aside_content
+ .card-widget
+ if hexo-config('aside.position') == 'right'
+ margin-left: 15px
+ else
+ margin-right: 15px
+
+if hexo-config('aside.mobile') == false
+ @media screen and (max-width: $sm)
+ #aside_content
+ display: none
diff --git a/themes/butterfly/source/css/_layout/category.styl b/themes/butterfly/source/css/_layout/category.styl
new file mode 100644
index 00000000..2150343c
--- /dev/null
+++ b/themes/butterfly/source/css/_layout/category.styl
@@ -0,0 +1,63 @@
+.category-content
+ ol,
+ ul
+ margin-top: .4rem
+ padding: 0 0 0 .8rem
+ list-style: none
+ counter-reset: li
+
+ p
+ margin: 0
+
+ ol,
+ ul
+ padding-left: .5rem
+
+ li
+ position: relative
+ margin: .3rem 0
+ padding: .1rem .5rem .1rem 1.5rem !important
+
+ &:hover
+ &:before
+ transform: rotate(360deg)
+
+ &:before
+ position: absolute
+ top: 0
+ left: 0
+ background: $light-blue
+ color: $card-bg
+ cursor: pointer
+ transition: all .3s ease-out
+
+ ol
+ li
+ &:before
+ margin-top: .2rem
+ width: w = 1.2rem
+ height: h = w
+ border-radius: .5 * w
+ content: counter(li)
+ counter-increment: li
+ text-align: center
+ font-size: .6rem
+ line-height: h
+
+ ul
+ li
+ &:hover
+ &:before
+ border-color: $theme-button-hover-color
+
+ &:before
+ $w = .3rem
+ top: 10px
+ margin-left: .45rem
+ width: w = $w
+ height: h = w
+ border: .5 * w solid $light-blue
+ border-radius: w
+ background: transparent
+ content: ''
+ line-height: h
diff --git a/themes/butterfly/source/css/_layout/flink.styl b/themes/butterfly/source/css/_layout/flink.styl
new file mode 100644
index 00000000..642478ec
--- /dev/null
+++ b/themes/butterfly/source/css/_layout/flink.styl
@@ -0,0 +1,85 @@
+.flink#article-container
+ .post-cards
+ margin: -10px 10px 0
+
+ .md-links
+ overflow: auto
+ text-align: center
+
+ & > .md-links-item
+ position: relative
+ float: left
+ overflow: hidden
+ margin: 20px 7px
+ width: calc(100% / 3 - 15px)
+ height: 90px
+ border-radius: 8px
+ line-height: 17px
+ transform: perspective(1px) translateZ(0)
+
+ &:hover
+ img
+ transform: rotate(540deg)
+
+ &:before
+ position: absolute
+ top: 0
+ right: 0
+ bottom: 0
+ left: 0
+ z-index: -1
+ background: $light-blue
+ content: ''
+ transition-timing-function: ease-out
+ transition-duration: .3s
+ transition-property: transform
+ transform: scale(0)
+
+ &:hover:before,
+ &:focus:before,
+ &:active:before
+ transform: scale(1)
+
+ a
+ color: $font-color
+ text-decoration: none
+
+ img
+ float: left
+ margin: 13px 0 0 10px
+ width: 65px
+ height: 65px
+ border-radius: 35px
+ transition: all .3s
+
+ .img-alt
+ display: none
+
+ .md-links-title
+ overflow: hidden
+ padding: 16px 10px 0 0
+ height: 40px
+ text-overflow: ellipsis
+ white-space: nowrap
+ font-weight: bold
+ font-size: 20px
+
+ .md-links-des
+ overflow: hidden
+ padding: 16px 10px
+ height: 50px
+ text-overflow: ellipsis
+ white-space: nowrap
+ font-size: 13px
+
+@media screen and (max-width: 1100px)
+ .flink
+ .md-links
+ .md-links-item
+ width: calc(50% - 15px) !important
+
+@media screen and (max-width: 600px)
+ .flink
+ .md-links
+ .md-links-item
+ width: calc(100% - 15px) !important
diff --git a/themes/butterfly/source/css/_layout/footer.styl b/themes/butterfly/source/css/_layout/footer.styl
new file mode 100644
index 00000000..23b7f4d7
--- /dev/null
+++ b/themes/butterfly/source/css/_layout/footer.styl
@@ -0,0 +1,35 @@
+#footer
+ position: relative
+ background: $light-blue
+ background-attachment: local
+ background-position: bottom
+ background-size: cover
+
+ if hexo-config('footer_bg') != false
+ &:before
+ position: absolute
+ width: 100%
+ height: 100%
+ background-color: alpha($dark-black, .5)
+ content: ''
+
+#footer-wrap
+ position: relative
+ padding: 2rem 1rem
+ color: $light-grey
+ text-align: center
+
+ a
+ color: $light-grey
+ cursor: pointer
+
+ &:hover
+ color: $theme-color
+ text-decoration: underline
+
+ .footer-separator
+ margin: 0 .2rem
+
+ .icp-icon
+ padding: 0 4px
+ vertical-align: text-bottom
diff --git a/themes/butterfly/source/css/_layout/gallery.styl b/themes/butterfly/source/css/_layout/gallery.styl
new file mode 100644
index 00000000..6c3b6f52
--- /dev/null
+++ b/themes/butterfly/source/css/_layout/gallery.styl
@@ -0,0 +1,112 @@
+figure.gallery-group
+ position: relative
+ float: left
+ overflow: hidden
+ margin: .3rem .2rem
+ width: calc(50% - .4rem)
+ height: 250px
+ border-radius: 8px
+ background: $dark-black
+ -webkit-transform: translate3d(0, 0, 0)
+
+ &:hover
+ img
+ opacity: .4
+ transform: translate3d(0, 0, 0)
+
+ .gallery-group-name::after
+ transform: translate3d(0, 0, 0)
+
+ p
+ opacity: 1
+ transform: translate3d(0, 0, 0)
+
+ img
+ position: relative
+ margin: 0 !important
+ max-width: none
+ width: calc(100% + 20px)
+ height: 250px
+ backface-visibility: hidden
+ opacity: .8
+ transition: opacity .35s, transform .35s
+ transform: translate3d(-10px, 0, 0)
+ object-fit: cover
+
+ figcaption
+ position: absolute
+ top: 0
+ left: 0
+ padding: 1.5rem
+ width: 100%
+ height: 100%
+ color: $gallery-color
+ text-transform: uppercase
+ backface-visibility: hidden
+
+ & > a
+ position: absolute
+ top: 0
+ right: 0
+ bottom: 0
+ left: 0
+ z-index: 1000
+ opacity: 0
+
+ p
+ display: -webkit-box
+ overflow: hidden
+ margin: 0
+ padding: .4rem 0 0
+ letter-spacing: 1px
+ font-size: .8rem
+ line-height: 1.5
+ opacity: 0
+ transition: opacity .35s, transform .35s
+ transform: translate3d(100%, 0, 0)
+ -webkit-line-clamp: 4
+ -webkit-box-orient: vertical
+
+ .gallery-group-name
+ position: relative
+ display: -webkit-box
+ overflow: hidden
+ margin: 0
+ padding: .4rem 0
+ font-weight: bold
+ font-size: 1.2rem
+ line-height: 1.5
+ -webkit-line-clamp: 2
+ -webkit-box-orient: vertical
+
+ &:after
+ position: absolute
+ bottom: 0
+ left: 0
+ width: 100%
+ height: 2px
+ background: $gallery-color
+ content: ''
+ transition: transform .35s
+ transform: translate3d(-100%, 0, 0)
+
+.gallery-group-main
+ overflow: auto
+ padding: 0 0 .8rem
+
+.justified-gallery
+ margin: 0 0 .8rem
+
+ img
+ opacity: 0
+
+ .img-alt
+ display: none
+
+ .fancybox
+ width: auto
+ text-align: inherit
+
+@media screen and (max-width: 600px)
+ figure.gallery-group
+ width: calc(100% - .4rem)
\ No newline at end of file
diff --git a/themes/butterfly/source/css/_layout/head.styl b/themes/butterfly/source/css/_layout/head.styl
new file mode 100644
index 00000000..2f1d84f6
--- /dev/null
+++ b/themes/butterfly/source/css/_layout/head.styl
@@ -0,0 +1,314 @@
+#nav
+ position: relative
+ width: 100%
+ background-color: $light-blue
+ background-attachment: local
+ background-position: center center
+ background-size: cover
+ background-repeat: no-repeat
+ transition: all .5s
+
+ // index
+ &.full_page
+ height: $index_top_img_height
+
+ #site-info
+ position: absolute
+ top: $index_site_info_top
+ padding: 0 .5rem
+ width: 100%
+
+ #site_title,
+ #site_subtitle,
+ #scroll_down .scroll-down-effects
+ color: $light-grey
+ text-align: center
+ text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
+ line-height: 1.5
+
+ #site_title
+ margin: 0
+ font-size: 1.3rem
+
+ #site_subtitle
+ font-size: .8rem
+
+ #site_social_icons
+ display: none
+ margin: 0 auto
+ width: 15rem
+ text-align: center
+
+ .social-icon
+ margin: 0 .5rem
+ color: $light-grey
+ text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
+ font-size: .9rem
+ cursor: pointer
+
+ #scroll_down
+ position: absolute
+ bottom: 0
+ width: 100%
+ cursor: pointer
+
+ .scroll-down-effects
+ position: relative
+ width: 100%
+ font-size: 30px
+
+ // page
+ &.not-index-bg
+ height: 20rem
+
+ #page_site-info
+ position: absolute
+ top: 10rem
+ padding: 0 .5rem
+ width: 100%
+
+ // post
+ &.post-bg
+ height: 20rem
+
+ &:before
+ position: absolute
+ top: 0
+ left: 0
+ display: block
+ width: 100%
+ height: 100%
+ background-color: alpha($dark-black, .5)
+ content: ''
+
+ #post-info
+ position: absolute
+ bottom: 1.5rem
+ padding: 0 8%
+ width: 100%
+ color: $light-grey
+ text-align: left
+
+ #post-title
+ margin-bottom: .4rem
+ font-size: 1.5rem
+
+ .posttitle
+ display: -webkit-box
+ overflow: hidden
+ line-height: 1.5
+ -webkit-line-clamp: 3
+ -webkit-box-orient: vertical
+
+ #post-meta
+ font-size: 95%
+
+ > .meta-secondline,
+ > .meta-thirdline
+ display: inline
+
+ .word-count,
+ #busuanzi_value_page_pv,
+ .comment-count
+ padding-left: .2rem
+
+ .post-meta
+ &__separator
+ margin: 0 .3rem
+
+ &__icon
+ margin-right: .2rem
+
+ a
+ color: $light-grey
+ transition: all .3s ease-out
+
+ &:hover
+ color: $light-blue
+ text-decoration: underline
+
+#page-header
+ position: absolute
+ top: 0
+ z-index: 99
+ padding: 10px 36px
+ width: 100%
+ height: 58px
+ border: none
+ font-size: 18px
+ opacity: 0
+ transition: all .5s
+
+ &:not(.fixed)
+ .menus
+ padding-right: 0 !important
+
+ .toggle-menu
+ display: none
+ padding: .1rem 0 0 .3rem
+ vertical-align: top
+
+ &:hover
+ color: $white
+
+ &.is-visible-inline
+ .site-page
+ font-size: inherit
+
+ a
+ color: $light-grey
+
+ &:hover
+ color: $white
+
+ &.fixed
+ position: fixed
+ top: -60px
+ z-index: 101
+ background: alpha($white, .8)
+ box-shadow: 0 5px 6px -5px alpha($grey, .6)
+ transition: transform .2s ease-in-out, opacity .2s ease-in-out
+
+ a,
+ #site-name,
+ .toggle-menu
+ color: $font-black
+ text-shadow: none
+
+ &:hover
+ color: $light-blue
+
+ &.visible
+ transition: all .5s
+ transform: translate3d(0, 100%, 0)
+
+ .menus_item_child
+ background-color: $white !important
+
+ #site-name
+ text-shadow: .1rem .1rem .2rem rgba($dark-black, .15)
+ font-weight: bold
+ cursor: pointer
+
+ .menus_items
+ display: inline
+
+ .menus_item
+ position: relative
+ display: inline-block
+ padding: 0 0 0 .7rem
+
+ &:hover
+ .menus_item_child
+ display: block
+
+ .menus-expand
+ transform: rotate(180deg) !important
+
+ .menus-expand
+ padding: 4px
+ transition: all .3s
+ transform: rotate(0)
+
+ & > a
+ &:after
+ position: absolute
+ bottom: 0
+ left: 0
+ z-index: -1
+ width: 0
+ height: 3px
+ background-color: lighten($theme-color, 30%)
+ content: ''
+ transition: all .3s ease-in-out
+
+ &:hover
+ &:after
+ width: 100%
+
+ .menus_item_child
+ position: absolute
+ right: 0
+ display: none
+ margin-top: 8px
+ padding: 0
+ width: max-content
+ background-color: alpha($white, .8)
+ box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
+ animation: sub_menus .3s .1s ease both
+
+ &:before
+ position: absolute
+ top: -8px
+ left: 0
+ width: 100%
+ height: 20px
+ content: ''
+
+ li
+ padding: 1px 10px
+ list-style: none
+ text-align: center
+
+ &:hover
+ background: $theme-color
+
+ a
+ color: $font-black
+ text-shadow: none
+
+ #search_button
+ display: inline
+ padding: 0 0 0 .7rem
+
+ .site-page
+ position: relative
+ padding-bottom: .3rem
+ text-shadow: .05rem .05rem .1rem rgba($dark-black, .3)
+ font-size: .7rem
+ cursor: pointer
+
+@media screen and (min-width: $sm)
+ #nav
+ #site_title
+ font-size: 2rem
+
+ #site_subtitle
+ font-size: 1.2rem
+
+@media screen and (max-width: $sm)
+ #page-header
+ padding: 10px .8rem
+
+ #nav
+ #site_social_icons
+ display: block
+
+ &.not-index-bg
+ height: 14rem
+
+ #page_site-info
+ top: 7rem
+
+ &.post-bg
+ height: 18rem
+
+ & > #post-info
+ bottom: 1rem
+ padding: 0 5%
+
+ & > #post-title
+ font-size: 1.2rem
+
+ & > #post-meta
+ font-size: 90%
+
+ .post-meta__categories
+ display: none
+
+ .meta-thirdline
+ display: block
+
+ .post-meta-pv-cv
+ .post-meta__separator:first-child
+ display: none
\ No newline at end of file
diff --git a/themes/butterfly/source/css/_layout/mobile-sidebar.styl b/themes/butterfly/source/css/_layout/mobile-sidebar.styl
new file mode 100644
index 00000000..a8f6583a
--- /dev/null
+++ b/themes/butterfly/source/css/_layout/mobile-sidebar.styl
@@ -0,0 +1,106 @@
+#mobile-sidebar
+ #menu_mask
+ position: fixed
+ top: 0
+ right: 0
+ bottom: 0
+ left: 0
+ z-index: 102
+ display: none
+ background: alpha($dark-black, .8)
+
+ #mobile-sidebar-menus
+ position: fixed
+ top: 0
+ right: -250px
+ z-index: 103
+ display: block
+ overflow: hidden
+ overflow-y: scroll
+ width: 250px
+ height: 100%
+ background: #f6f8fa
+ transition: all .5s
+
+ & > .mobile_author_icon
+ padding: 1.3rem 1.5rem 0
+ text-align: center
+
+ img
+ display: inline-block
+ padding: 0
+ width: 110px
+ height: 110px
+ border-radius: 70px
+ transition: all .3s
+
+ .mobile_post_data
+ padding: .6rem .5rem 0
+
+ .mobile_data_item
+ display: inline-block
+ width: 33.3%
+
+ .mobile_data_link
+ & > a > div
+ overflow: hidden
+ text-overflow: ellipsis
+ white-space: nowrap
+
+ .length_num
+ color: $dark-black
+ font-size: .9rem
+
+ .headline
+ display: block
+ color: $font-black
+ // text-transform: uppercase
+ font-size: .7rem
+
+ hr
+ margin: 1rem auto
+
+ .menus_items
+ margin-bottom: 5rem
+ padding: 0 .5rem
+
+ .site-page
+ position: relative
+ z-index: 0
+ display: block
+ overflow: hidden
+ margin: 0
+ padding: .3rem 1.5rem
+ color: $font-black
+ text-overflow: ellipsis
+ text-shadow: none
+ white-space: nowrap
+ font-size: .8rem
+ cursor: pointer
+
+ i
+ width: 30%
+ text-align: left
+
+ span
+ width: 70%
+
+ &:hover
+ color: $light-blue
+
+ .menus-expand
+ position: absolute
+ right: 0
+ padding: 6px
+ width: 30px !important
+ height: 30px
+ transition: all .3s
+ transform: rotate(0)
+
+ &.menus-closed
+ transition: all .3s
+ transform: rotate(180deg) !important
+
+ .menus_item_child
+ margin: 0
+ list-style: none
\ No newline at end of file
diff --git a/themes/butterfly/source/css/_layout/note.styl b/themes/butterfly/source/css/_layout/note.styl
new file mode 100644
index 00000000..69204071
--- /dev/null
+++ b/themes/butterfly/source/css/_layout/note.styl
@@ -0,0 +1,287 @@
+.note
+ $note-icons = hexo-config('note.icons')
+ $note-style = hexo-config('note.style')
+ position: relative
+ margin: 0 0 1rem
+ padding: 15px
+
+ if ($note-style == 'simple')
+ border: 1px solid $light-grey
+ border-left-width: 5px
+
+ if ($note-style == 'modern')
+ border: 1px solid transparent
+ background-color: $whitesmoke
+
+ if ($note-style == 'flat')
+ border: initial
+ border-left: 5px solid $light-grey
+ background-color: lighten($light-grey, 65%)
+
+ if hexo-config('note.border_radius') is a 'unit'
+ border-radius: unit(hexo-config('note.border_radius'), px)
+
+ h2,
+ h3,
+ h4,
+ h5,
+ h6
+ if $note-icons
+ margin-top: 3px
+ else
+ margin-top: 0
+
+ margin-bottom: 0
+ padding-top: 0 !important
+ border-bottom: initial
+
+ p,
+ ul,
+ ol,
+ table,
+ pre,
+ blockquote,
+ img
+ &:first-child
+ margin-top: 0 !important
+
+ &:last-child
+ margin-bottom: 0 !important
+
+ if $note-icons
+ &:not(.no-icon)
+ padding-left: 45px
+
+ &::before
+ position: absolute
+ top: 13px
+ left: 15px
+ font-size: larger
+
+ if hexo-config('fontawesome_v5') && hexo-config('fontawesome_v5.enable')
+ font-weight: 600
+ font-family: 'Font Awesome 5 Free'
+ else
+ font-family: 'FontAwesome'
+
+ &.default
+ if ($note-style == 'flat')
+ background-color: $note-default-bg
+
+ if ($note-style == 'modern')
+ border-color: $note-modern-default-border
+ background-color: $note-modern-default-bg
+ color: $note-modern-default-text
+
+ a,
+ span.exturl
+ &:not(.btn)
+ border-bottom: 1px solid $note-modern-default-text
+ color: $note-modern-default-text
+
+ &:hover
+ border-bottom: 1px solid $note-modern-default-hover
+ color: $note-modern-default-hover
+
+ if ($note-style != 'modern')
+ border-left-color: $note-default-border
+
+ h2,
+ h3,
+ h4,
+ h5,
+ h6
+ color: $note-default-text
+
+ if $note-icons
+ &:not(.no-icon)
+ &::before
+ content: $note-default-icon
+
+ if ($note-style != 'modern')
+ color: $note-default-text
+
+ &.primary
+ if ($note-style == 'flat')
+ background-color: $note-primary-bg
+
+ if ($note-style == 'modern')
+ border-color: $note-modern-primary-border
+ background-color: $note-modern-primary-bg
+ color: $note-modern-primary-text
+
+ a,
+ span.exturl
+ &:not(.btn)
+ border-bottom: 1px solid $note-modern-primary-text
+ color: $note-modern-primary-text
+
+ &:hover
+ border-bottom: 1px solid $note-modern-primary-hover
+ color: $note-modern-primary-hover
+
+ if ($note-style != 'modern')
+ border-left-color: $note-primary-border
+
+ h2,
+ h3,
+ h4,
+ h5,
+ h6
+ color: $note-primary-text
+
+ if $note-icons
+ &:not(.no-icon)
+ &::before
+ content: $note-primary-icon
+
+ if ($note-style != 'modern')
+ color: $note-primary-text
+
+ &.info
+ if ($note-style == 'flat')
+ background-color: $note-info-bg
+
+ if ($note-style == 'modern')
+ border-color: $note-modern-info-border
+ background-color: $note-modern-info-bg
+ color: $note-modern-info-text
+
+ a,
+ span.exturl
+ &:not(.btn)
+ border-bottom: 1px solid $note-modern-info-text
+ color: $note-modern-info-text
+
+ &:hover
+ border-bottom: 1px solid $note-modern-info-hover
+ color: $note-modern-info-hover
+
+ if ($note-style != 'modern')
+ border-left-color: $note-info-border
+
+ h2,
+ h3,
+ h4,
+ h5,
+ h6
+ color: $note-info-text
+
+ if $note-icons
+ &:not(.no-icon)
+ &::before
+ content: $note-info-icon
+
+ if ($note-style != 'modern')
+ color: $note-info-text
+
+ &.success
+ if ($note-style == 'flat')
+ background-color: $note-success-bg
+
+ if ($note-style == 'modern')
+ border-color: $note-modern-success-border
+ background-color: $note-modern-success-bg
+ color: $note-modern-success-text
+
+ a,
+ span.exturl
+ &:not(.btn)
+ border-bottom: 1px solid $note-modern-success-text
+ color: $note-modern-success-text
+
+ &:hover
+ border-bottom: 1px solid $note-modern-success-hover
+ color: $note-modern-success-hover
+
+ if ($note-style != 'modern')
+ border-left-color: $note-success-border
+
+ h2,
+ h3,
+ h4,
+ h5,
+ h6
+ color: $note-success-text
+
+ if $note-icons
+ &:not(.no-icon)
+ &::before
+ content: $note-success-icon
+
+ if ($note-style != 'modern')
+ color: $note-success-text
+
+ &.warning
+ if ($note-style == 'flat')
+ background-color: $note-warning-bg
+
+ if ($note-style == 'modern')
+ border-color: $note-modern-warning-border
+ background-color: $note-modern-warning-bg
+ color: $note-modern-warning-text
+
+ a,
+ span.exturl
+ &:not(.btn)
+ border-bottom: 1px solid $note-modern-warning-text
+ color: $note-modern-warning-text
+
+ &:hover
+ border-bottom: 1px solid $note-modern-warning-hover
+ color: $note-modern-warning-hover
+
+ if ($note-style != 'modern')
+ border-left-color: $note-warning-border
+
+ h2,
+ h3,
+ h4,
+ h5,
+ h6
+ color: $note-warning-text
+
+ if $note-icons
+ &:not(.no-icon)
+ &::before
+ content: $note-warning-icon
+
+ if ($note-style != 'modern')
+ color: $note-warning-text
+
+ &.danger
+ if ($note-style == 'flat')
+ background-color: $note-danger-bg
+
+ if ($note-style == 'modern')
+ border-color: $note-modern-danger-border
+ background-color: $note-modern-danger-bg
+ color: $note-modern-danger-text
+
+ a,
+ span.exturl
+ &:not(.btn)
+ border-bottom: 1px solid $note-modern-danger-text
+ color: $note-modern-danger-text
+
+ &:hover
+ border-bottom: 1px solid $note-modern-danger-hover
+ color: $note-modern-danger-hover
+
+ if ($note-style != 'modern')
+ border-left-color: $note-danger-border
+
+ h2,
+ h3,
+ h4,
+ h5,
+ h6
+ color: $note-danger-text
+
+ if $note-icons
+ &:not(.no-icon)
+ &::before
+ content: $note-danger-icon
+
+ if ($note-style != 'modern')
+ color: $note-danger-text
diff --git a/themes/butterfly/source/css/_layout/page.styl b/themes/butterfly/source/css/_layout/page.styl
new file mode 100644
index 00000000..5f9a8be3
--- /dev/null
+++ b/themes/butterfly/source/css/_layout/page.styl
@@ -0,0 +1,382 @@
+.layout_page
+ display: flex
+ align-items: flex-start
+ margin: 0 auto
+ padding: 2rem 15px
+ max-width: 1200px
+
+// index
+#recent-posts
+ width: 75%
+
+ & > .recent-post-item:not(:first-child)
+ margin-top: 1rem
+
+ & > .recent-post-item
+ display: flex
+ flex-direction: row
+ align-items: center
+ padding: 0
+ height: 280px
+ border-radius: 8px
+ background: $card-bg
+ box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+ transition: all .3s
+
+ &:hover
+ box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
+
+ img.post_bg
+ transform: scale(1.1)
+
+ if hexo-config('cover.position') == 'both'
+ .left_radius
+ border-radius: 8px 0 0 8px
+
+ .right_radius
+ order: 2
+ border-radius: 0 8px 8px 0
+ else if hexo-config('cover.position') == 'left'
+ .left_radius
+ border-radius: 8px 0 0 8px
+
+ .right_radius
+ border-radius: 8px 0 0 8px
+ else if hexo-config('cover.position') == 'right'
+ .left_radius
+ order: 2
+ border-radius: 0 8px 8px 0
+
+ .right_radius
+ order: 2
+ border-radius: 0 8px 8px 0
+
+ .post_cover
+ overflow: hidden
+ width: 45%
+ height: 280px
+ -webkit-mask-image: -webkit-radial-gradient(white, black)
+
+ img.post_bg
+ display: block
+ margin: 0
+ padding: 0
+ width: 100%
+ height: 100%
+ border: 0
+ transition: all .6s
+ object-fit: cover
+
+ &:hover
+ transform: scale(1.1)
+
+ & >.recent-post-info
+ display: inline-block
+ overflow: hidden
+ padding: 0 40px
+ width: 55%
+
+ &.no-cover
+ width: 100%
+
+ & > .article-title
+ display: -webkit-box
+ overflow: hidden
+ margin-bottom: .3rem
+ color: $font-black
+ text-overflow: ellipsis
+ word-wrap: break-word
+ font-size: 1.2rem
+ line-height: 1.4
+ transition: all .2s ease-in-out
+ -webkit-box-orient: vertical
+ -webkit-line-clamp: 2
+
+ &:hover
+ color: $light-blue !important
+
+ & > .article-meta-wrap
+ font-size: 95%
+
+ & > time
+ color: $theme-meta-color
+ cursor: pointer
+
+ & > .article-meta
+ color: $theme-meta-color
+
+ .sticky
+ color: $sticky-color
+
+ i
+ margin: 0 .2rem 0 0
+
+ .article-meta__separator,
+ .article-meta__link
+ margin: 0 .3rem
+
+ .fa-angle-right
+ margin: 0 .3rem
+
+ a.article-meta__categories,
+ a.article-meta__tags
+ color: $theme-meta-color
+
+ &:hover
+ color: $light-blue !important
+ text-decoration: underline
+
+ & > .content
+ display: -webkit-box
+ overflow: hidden
+ margin-top: .3rem
+ height: 85px
+ word-break: break-word
+ -webkit-line-clamp: 3
+ -webkit-box-orient: vertical
+
+// tags page
+.tag-cloud
+ a
+ display: inline-block
+ padding: 0 .4rem
+ cursor: pointer
+ transition: all .3s
+
+ &:hover
+ color: $theme-button-hover-color !important
+ transform: scale(1.1)
+
+ &__title
+ text-align: center
+ font-size: 1.8rem
+
+ &-tags
+ text-align: center
+
+.layout_post > #post,
+.layout_page > div:first-child:not(.recent-posts)
+ padding: 50px 40px
+ border-radius: 8px
+ background: $card-bg
+ box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+ transition: all .3s
+
+ &:hover
+ box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
+
+.layout_page
+ & > div:first-child:not(.recent-posts)
+ width: 75%
+
+.article-sort
+ margin-left: .5rem
+ padding-left: 1rem
+ border-left: 2px solid lighten($light-blue, 20)
+
+ &-title
+ position: relative
+ margin-left: .5rem
+ padding-bottom: 1.2rem
+ padding-left: 1rem
+ font-size: 1.2rem
+ line-height: 1
+
+ &:hover
+ &:before
+ border-color: $theme-button-hover-color
+
+ &:before
+ position: absolute
+ top: .25rem
+ left: calc(-.5rem + 1px)
+ z-index: 1
+ width: w = .5rem
+ height: h = w
+ border: .5 * w solid $light-blue
+ border-radius: w
+ background: $card-bg
+ content: ''
+ line-height: h
+ transition: all .2s ease-in-out
+
+ &:after
+ position: absolute
+ bottom: 0
+ left: 0
+ z-index: 0
+ width: .1rem
+ height: 1.3rem
+ background: lighten($light-blue, 20)
+ content: ''
+
+ &-item
+ position: relative
+ margin: 0 0 1rem .5rem
+ width: 100%
+ height: 80px
+ transition: all .2s ease-in-out
+
+ &:hover
+ &:before
+ border-color: $theme-button-hover-color
+
+ &:before
+ $w = .3rem
+ position: absolute
+ top: 1.8rem
+ left: calc(-1rem - 17px)
+ width: w = $w
+ height: h = w
+ border: .5 * w solid $light-blue
+ border-radius: w
+ background: $card-bg
+ content: ''
+ line-height: h
+ transition: all .2s ease-in-out
+
+ &.no-article-cover
+ display: flex
+ flex-direction: column
+ justify-content: center
+
+ .article-sort-post
+ padding: 0
+ width: 100%
+
+ &.year
+ height: auto
+ font-size: 1rem
+
+ &:hover
+ &:before
+ border-color: $light-blue
+
+ &:before
+ top: .7rem
+ border-color: $theme-button-hover-color
+
+ &__time
+ padding-left: .4rem
+ font-size: .7rem
+
+ &__title
+ display: -webkit-box
+ overflow: hidden
+ color: $font-black
+ font-size: .75rem
+ transition: all .3s
+ -webkit-line-clamp: 2
+ -webkit-box-orient: vertical
+
+ &:hover
+ color: $light-blue
+ transform: translateX(20px)
+
+ &__img
+ img
+ padding: 0
+ width: 100%
+ height: 100%
+ transition: all .6s
+ object-fit: cover
+
+ &:hover
+ transform: scale(1.1)
+
+ &__post
+ color: $theme-meta-color
+
+ &:hover
+ color: $theme-meta-color
+
+ &-img
+ float: left
+ overflow: hidden
+ width: 80px
+ height: 80px
+
+ &-post
+ display: inline-block
+ padding: 0 1rem
+ width: calc(100% - 80px)
+
+.category-lists
+ padding: 1rem 0 1.5rem
+
+ .category__title
+ text-align: center
+ font-size: 1.8rem
+
+.category-list
+ a
+ color: $font-black
+ cursor: pointer
+
+ .category-list-count
+ margin-left: .4rem
+ color: $theme-meta-color
+
+ &:before
+ content: '('
+
+ &:after
+ content: ')'
+
+// 隱藏aside
+.hide-aside
+ max-width: 1000px
+
+ & > div
+ width: 100% !important
+
+@media screen and (max-width: $sm)
+ .layout_page
+ padding: 1rem 5px !important
+
+ & > div:first-child:not(.recent-posts)
+ padding: 1.8rem .7rem
+
+ .category-lists
+ padding: 0
+
+ #recent-posts
+ .recent-post-item
+ flex-direction: column
+ height: auto !important
+
+ .post_cover
+ order: 1 !important
+ width: 100%
+ height: 230px
+ border-radius: 8px 8px 0 0
+
+ .recent-post-info
+ order: 2 !important
+ padding: 1rem 1rem 1.5rem
+ width: 100%
+
+ &.no-cover
+ padding: 1.5rem 1rem
+
+ .article-title
+ font-size: 1rem
+
+ .content
+ height: auto
+
+@media screen and (min-width: 900px)
+ if hexo-config('aside.position') == 'left'
+ #recent-posts,
+ #page,
+ .category-content,
+ #archive,
+ .tag-cloud,
+ #tag,
+ #category
+ order: 2
+
+@media screen and (max-width: 900px)
+ .layout_page
+ & > div:first-child:not(.recent-posts)
+ width: 100% !important
\ No newline at end of file
diff --git a/themes/butterfly/source/css/_layout/pagination.styl b/themes/butterfly/source/css/_layout/pagination.styl
new file mode 100644
index 00000000..f8935c86
--- /dev/null
+++ b/themes/butterfly/source/css/_layout/pagination.styl
@@ -0,0 +1,83 @@
+#pagination
+ overflow: hidden
+ margin-top: 1rem
+ width: 100%
+
+ .pagination
+ text-align: center
+
+ .page-number
+ display: inline-block
+ margin: 0 .2rem
+ min-width: w = 1.2rem
+ height: w
+ text-align: center
+ line-height: w
+ cursor: pointer
+
+ &.current
+ background: $theme-paginator-color
+ color: $button-color
+ cursor: default
+
+ img.prev_cover,
+ img.next_cover
+ position: absolute
+ width: 100%
+ height: 100%
+ opacity: .4
+ transition: all .6s
+ object-fit: cover
+
+ .pagination-info
+ position: absolute
+ top: 50%
+ padding: 1rem 2rem
+ width: 100%
+ transform: translate(0, -50%)
+
+ .prev_info,
+ .next_info
+ overflow: hidden
+ color: $button-color
+ text-overflow: ellipsis
+ white-space: nowrap
+ font-weight: 500
+
+ .next-post
+ .pagination-info
+ text-align: right
+
+ .pull-full
+ width: 100% !important
+
+ .prev-post .label,
+ .next-post .label
+ color: alpha($white, .9)
+ text-transform: uppercase
+ font-size: 90%
+
+ .prev-post,
+ .next-post
+ width: 50%
+
+ a
+ position: relative
+ display: block
+ overflow: hidden
+ height: 150px
+
+ &:hover
+ img.prev_cover,
+ img.next_cover
+ opacity: .8
+ transform: scale(1.1)
+
+ &.pagination_post
+ margin: 2rem 0 !important
+ background: $dark-black
+
+@media screen and (max-width: 768px)
+ .prev-post,
+ .next-post
+ width: 100% !important
diff --git a/themes/butterfly/source/css/_layout/post.styl b/themes/butterfly/source/css/_layout/post.styl
new file mode 100644
index 00000000..93f9ae47
--- /dev/null
+++ b/themes/butterfly/source/css/_layout/post.styl
@@ -0,0 +1,340 @@
+#article-container
+ if hexo-config('beautify.enable')
+ headStyle(fontsize)
+ padding-left: unit(fontsize + .4, 'rem')
+
+ code
+ font-size: unit(fontsize, 'rem')
+
+ &:before
+ margin-left: unit((-(fontsize + .2)), 'rem')
+ font-size: unit(fontsize, 'rem')
+
+ &:hover
+ padding-left: unit(fontsize + .6, 'rem')
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6
+ cursor: pointer
+ transition: all .2s ease-out
+
+ &:before
+ position: absolute
+ top: calc(50% - .35rem)
+ color: $title-prefix-icon-color
+ content: $title-prefix-icon
+ font-style: normal
+ font-variant: normal
+ line-height: 1
+ transition: all .2s ease-out
+ text-rendering: auto
+ -webkit-font-smoothing: antialiased
+
+ if hexo-config('fontawesome_v5') && hexo-config('fontawesome_v5.enable')
+ font-weight: 600
+ font-family: 'Font Awesome 5 Free'
+ else
+ font-weight: normal
+ font-family: FontAwesome
+
+ &:hover
+ &:before
+ color: $light-blue
+
+ h1
+ headStyle(1)
+
+ h2
+ headStyle(.9)
+
+ h3
+ headStyle(.8)
+
+ h4
+ headStyle(.7)
+
+ h5
+ headStyle(.6)
+
+ h6
+ headStyle(.6)
+
+ ol,
+ ul
+ margin-top: .4rem
+ padding: 0 0 0 .8rem
+ list-style: none
+ counter-reset: li
+
+ p
+ margin: 0 0 .5rem
+
+ ol,
+ ul
+ padding-left: .5rem
+
+ li
+ position: relative
+ margin: .2rem 0
+ padding: .1rem .5rem .1rem 1.5rem
+
+ &:hover
+ &:before
+ transform: rotate(360deg)
+
+ &:before
+ position: absolute
+ top: 0
+ left: 0
+ background: $light-blue
+ color: $card-bg
+ cursor: pointer
+ transition: all .3s ease-out
+
+ ol
+ > li
+ &:before
+ margin-top: .2rem
+ width: w = 1.2rem
+ height: h = w
+ border-radius: .5 * w
+ content: counter(li)
+ counter-increment: li
+ text-align: center
+ font-size: .6rem
+ line-height: h
+
+ ul
+ > li
+ &:hover
+ &:before
+ border-color: $theme-button-hover-color
+
+ &:before
+ $w = .3rem
+ top: 10px
+ margin-left: .45rem
+ width: w = $w
+ height: h = w
+ border: .5 * w solid $light-blue
+ border-radius: w
+ background: transparent
+ content: ''
+ line-height: h
+ else
+ ol,
+ ul
+ margin-top: .4rem
+ counter-reset: li
+
+ p
+ margin: 0 0 .5rem
+
+ ol,
+ ul
+ padding-left: .5rem
+
+ li
+ position: relative
+ margin: .3rem 0
+ padding-left: .3rem
+
+a
+ color: $a-link-color
+ text-decoration: none
+ word-wrap: break-word
+ transition: all .2s
+ overflow-wrap: break-word
+
+ &:hover
+ color: $light-blue
+
+a.fancybox
+ outline: none
+
+ &:focus
+ outline: none
+
+ display: inline-block
+ width: 100%
+ text-align: center
+
+p
+ margin: 0 0 .8rem
+
+img
+ max-width: 100%
+ transition: all .2s
+
+// highlight
+.highlight-tools
+ .code-expand
+ position: absolute
+ top: 0
+ z-index: 1
+ padding: 7px 10px
+ color: $highlight-foreground
+ cursor: pointer
+ transition: all .3s
+ transform: rotate(0)
+
+ & + .code-lang
+ left: 30px
+
+ &.code-closed
+ transition: all .3s
+ transform: rotate(-90deg) !important
+
+ .code-lang
+ position: absolute
+ left: 15px
+ z-index: 1
+ color: $highlight-foreground
+ text-transform: capitalize
+ font-weight: bold
+ font-size: .8rem
+ line-height: 1.4rem
+ cursor: pointer
+
+ .copy-notice
+ position: absolute
+ top: 0
+ right: 0
+ z-index: 1
+ background: darken($highlight-background, 5)
+ color: $highlight-aqua
+ opacity: 0
+
+ .fa-clipboard
+ position: absolute
+ top: .4rem
+ right: 10px
+ z-index: 1
+ color: $highlight-aqua
+ cursor: pointer
+ transition: color .2s
+
+ &:hover
+ color: darken($highlight-aqua, 20%)
+
+.katex-wrap
+ overflow: auto
+
+ if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
+ &::-webkit-scrollbar
+ display: none
+
+.layout_post
+ margin: 0 auto
+ padding: 2rem 15px
+ max-width: 1000px
+
+ img
+ display: block
+
+ .tag_share
+ .post-meta
+ &__tag-list
+ display: inline-block
+
+ &__tags
+ display: inline-block
+ margin: .4rem .4rem .4rem 0
+ padding: 0 .6rem
+ width: fit-content
+ border: 1px solid $light-blue
+ border-radius: .6rem
+ color: $light-blue
+ font-size: 12px
+ cursor: pointer
+ transition: all .2s ease-in-out
+
+ &:hover
+ background: $light-blue
+ color: $button-color
+
+ .post_share
+ display: inline-block
+ float: right
+ margin: .4rem 0
+ width: fit-content
+
+ .social-share
+ font-size: 12px
+
+ .social-share-icon
+ margin: 0 4px
+ width: 26px
+ height: 26px
+ font-size: 15px
+ line-height: 25px
+
+ .post-copyright
+ position: relative
+ margin: 2rem 0 .5rem
+ padding: .5rem .8rem
+ border: 1px solid $light-grey
+ transition: box-shadow .3s ease-in-out
+
+ &:before
+ position: absolute
+ top: t = .5rem
+ right: t
+ width: w = .8rem
+ height: w
+ border-radius: w
+ background: $light-blue
+ content: ''
+
+ &:after
+ position: absolute
+ top: t = .7rem
+ right: t
+ width: w = .4rem
+ height: w
+ border-radius: w
+ background: $white
+ content: ''
+
+ &:hover
+ box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
+
+ .post-copyright
+ &-meta
+ color: $light-blue
+ font-weight: bold
+
+ &-info
+ padding-left: .3rem
+
+ a
+ text-decoration: underline
+ word-break: break-word
+
+ &:hover
+ text-decoration: none
+
+#article-container
+ a
+ color: $theme-link-color
+
+ &:hover
+ text-decoration: underline
+
+ img
+ margin: 0 auto .8rem
+
+@media screen and (max-width: 1024px)
+ .layout_post
+ width: auto
+
+@media screen and (max-width: $sm)
+ .layout_post
+ padding: 1rem 5px
+
+ & > #post
+ padding: 1.8rem .7rem
\ No newline at end of file
diff --git a/themes/butterfly/source/css/_layout/relatedposts.styl b/themes/butterfly/source/css/_layout/relatedposts.styl
new file mode 100644
index 00000000..89ef1595
--- /dev/null
+++ b/themes/butterfly/source/css/_layout/relatedposts.styl
@@ -0,0 +1,61 @@
+.relatedPosts
+ margin-top: 1rem
+
+ .relatedPosts_headline
+ margin-bottom: 5px
+ font-weight: 700
+ font-size: 20px
+
+ .relatedPosts_item
+ position: relative
+ float: left
+ overflow: hidden
+ margin: 5px
+ width: calc(100% / 3 - 10px)
+ height: 200px
+ background: $dark-black
+
+ &:hover
+ .relatedPosts_cover
+ opacity: .8
+ transform: scale(1.1)
+
+ .relatedPosts_cover
+ width: 100%
+ height: 100%
+ opacity: .4
+ transition: all .6s
+ object-fit: cover
+
+ .relatedPosts_main
+ position: absolute
+ top: 50%
+ padding: 0 1rem
+ width: 100%
+ color: $white
+ transform: translate(0, -50%)
+
+ .relatedPosts_date
+ color: $light-grey
+ font-size: 90%
+
+ .relatedPosts_title
+ display: -webkit-box
+ overflow: hidden
+ -webkit-line-clamp: 2
+ -webkit-box-orient: vertical
+
+ .clear_both
+ clear: both
+
+@media screen and (max-width: 768px)
+ .relatedPosts
+ .relatedPosts_item
+ margin: 2px
+ width: calc(100% / 2 - 4px)
+ height: 150px
+
+@media screen and (max-width: 480px)
+ .relatedPosts
+ .relatedPosts_item
+ width: calc(100% - 4px)
diff --git a/themes/butterfly/source/css/_layout/reward.styl b/themes/butterfly/source/css/_layout/reward.styl
new file mode 100644
index 00000000..291b4744
--- /dev/null
+++ b/themes/butterfly/source/css/_layout/reward.styl
@@ -0,0 +1,74 @@
+.post-reward
+ margin: 75px auto 0
+ width: 100%
+ text-align: center
+
+ .reward-button
+ position: relative
+ z-index: 1
+ display: inline-block
+ width: 100px
+ background: $light-blue
+ color: $button-color
+ text-align: center
+ line-height: 36px
+ cursor: pointer
+
+ &:hover
+ .reward-main
+ display: block
+
+ .reward-main
+ position: absolute
+ bottom: 40px
+ left: 0
+ display: none
+ margin: 0
+ padding: 0 0 15px
+ width: 100%
+ transition: all .6s
+
+ .reward-all
+ display: inline-block
+ margin: 0 0 0 -110px
+ padding: 20px 10px 8px
+ width: 320px
+ border-radius: 4px
+ background: $reward-pop-up-bg
+
+ &:before
+ position: absolute
+ bottom: -10px
+ left: 0
+ width: 100%
+ height: 20px
+ content: ''
+
+ &:after
+ position: absolute
+ right: 0
+ bottom: 2px
+ left: 0
+ margin: 0 auto
+ width: 0
+ height: 0
+ border-top: 13px solid $reward-pop-up-bg
+ border-right: 13px solid transparent
+ border-left: 13px solid transparent
+ content: ''
+
+ .reward-item
+ display: inline-block
+ padding: 0 8px
+ list-style-type: none
+
+ img
+ position: relative
+ max-width: 130px
+ width: 130px
+ border-radius: 3px
+
+ .post-qr-code__desc
+ margin: -5px 0
+ color: $reward-pop-up-color
+ text-align: center
diff --git a/themes/butterfly/source/css/_layout/rightside.styl b/themes/butterfly/source/css/_layout/rightside.styl
new file mode 100644
index 00000000..730788eb
--- /dev/null
+++ b/themes/butterfly/source/css/_layout/rightside.styl
@@ -0,0 +1,60 @@
+#rightside
+ position: fixed
+ right: -38px
+ bottom: 40px
+ opacity: 0
+ transition: all .5s
+
+ #rightside-config-hide
+ transform: translate(35px, 0)
+
+ .rightside-in
+ transform: translate(0, 0) !important
+ animation: rightsideIn .3s
+
+ .rightside-out
+ animation: rightsideOut .3s
+
+ & > div
+ & > i,
+ & > a,
+ & > div
+ display: block
+ margin-bottom: 2px
+ width: 30px
+ height: 30px
+ background-color: $light-blue
+ color: $button-color
+ text-align: center
+ font-size: 16px
+ line-height: 29px
+ cursor: pointer
+
+ &:hover
+ background-color: $theme-button-hover-color
+
+ #rightside_config
+ i
+ animation: avatar_turn_around 2s linear infinite
+
+ #mobile-toc-button
+ display: none
+
+@media screen and (max-width: $bg)
+ #rightside
+ #mobile-toc-button
+ display: block
+
+@keyframes rightsideIn
+ 0%
+ transform: translate(30px, 0)
+
+ 100%
+ transform: translate(0, 0)
+
+@keyframes rightsideOut
+ 0%
+ transform: translate(0, 0)
+
+ 100%
+ transform: translate(30px, 0)
diff --git a/themes/butterfly/source/css/_layout/sidebar.styl b/themes/butterfly/source/css/_layout/sidebar.styl
new file mode 100644
index 00000000..823d203f
--- /dev/null
+++ b/themes/butterfly/source/css/_layout/sidebar.styl
@@ -0,0 +1,74 @@
+#sidebar
+ position: fixed
+ top: 0
+ left: -($sidebar-width)
+ z-index: 10
+ padding: 1rem 0 2rem .5rem
+ width: $sidebar-width
+ height: 100%
+ background: $sidebar-background
+ box-shadow: -.25rem 0 .25rem rgba($sidebar-background, .6) inset
+ opacity: .9
+
+ .sidebar-toc
+ ol,
+ li
+ list-style: none
+
+ ol
+ margin-top: .2rem
+ padding-left: .4rem
+
+ &__title
+ padding-right: .5rem
+ text-align: center
+ font-size: 1.3em
+
+ &__content
+ overflow-y: scroll
+ padding-bottom: 5rem
+ height: 90vh
+
+ .toc-link
+ display: block
+ padding-left: .2rem
+ border-right: 3px solid transparent
+ transition: all .2s ease-in-out
+
+ &.active
+ border-right-color: darken($theme-toc-color, 20%)
+ background: $theme-toc-color
+ color: $sidebar-active-color
+
+ &__progress
+ position: relative
+ margin-bottom: .3rem
+ padding-left: .6rem
+ color: $theme-toc-color
+
+ .progress-notice
+ margin-right: .4rem
+
+ .progress-num
+ display: inline-block
+ min-width: .9rem
+
+ &-bar
+ width: 0
+ height: 1px
+ background: $theme-toc-color
+
+@media screen and (max-width: $bg)
+ i#toggle-sidebar
+ display: none
+
+ #sidebar
+ right: -($mobile-sidebar-width)
+ left: auto
+ z-index: 103
+ width: $mobile-sidebar-width
+ opacity: 1
+ transition: all .4s
+
+ .toc-child
+ display: block !important
\ No newline at end of file
diff --git a/themes/butterfly/source/css/_layout/third-party.styl b/themes/butterfly/source/css/_layout/third-party.styl
new file mode 100644
index 00000000..e5e6519d
--- /dev/null
+++ b/themes/butterfly/source/css/_layout/third-party.styl
@@ -0,0 +1,88 @@
+if hexo-config('valine.enable')
+ // valine
+ #vcomment
+ button
+ padding: .3rem 1rem
+ border-color: $button-color
+ background-color: $light-blue
+ color: $button-color
+ font-size: .7rem
+
+ &:hover
+ background-color: $theme-button-hover-color
+
+ textarea
+ if hexo-config('valine.bg')
+ background: url(hexo-config('valine.bg')) 100% 100% no-repeat
+
+ .info
+ display: none
+
+ .vimg
+ border: 0
+
+ &:hover
+ transform: rotate(540deg)
+
+ .vat
+ padding: 0 .8rem
+ border: 1px solid $light-blue
+ border-radius: 5px
+ color: $light-blue
+ font-size: .7125rem
+
+ &:hover
+ background-color: $light-blue
+ color: $button-color
+
+if hexo-config('beautify.enable')
+ #article-container
+ .aplayer
+ ol,
+ ul
+ margin: 0
+ padding: 0
+
+ li
+ margin: 0
+ padding: 0 15px
+
+ &:before
+ content: none
+
+// third-party
+.fireworks
+ position: fixed
+ top: 0
+ left: 0
+ z-index: 999999
+ pointer-events: none
+
+.medium-zoom-image--opened
+ z-index: 99999 !important
+ margin: 0 !important
+
+.medium-zoom-overlay
+ z-index: 99999 !important
+
+.mermaid
+ overflow: auto
+ margin: 0 0 1rem
+ background: $white
+ text-align: center
+ opacity: 0
+ transition: all .3s
+
+ &[data-processed]
+ opacity: 1
+
+.utterances
+ max-width: 100%
+
+#gitalk-container
+ .gt-meta
+ margin: 0 0 .8em
+ padding: .3rem 0 .8em
+
+.has-jax
+ overflow: auto
\ No newline at end of file
diff --git a/themes/butterfly/source/css/_mode/darkmode.styl b/themes/butterfly/source/css/_mode/darkmode.styl
new file mode 100644
index 00000000..ed126562
--- /dev/null
+++ b/themes/butterfly/source/css/_mode/darkmode.styl
@@ -0,0 +1,370 @@
+if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
+ [data-theme='dark']
+ body
+ background-color: darken(#121212, 2)
+ color: alpha(#FFFFFF, .6)
+
+ ::-webkit-scrollbar-thumb
+ background: lighten(#121212, 5)
+
+ // 網站背景，footer背景
+ #web_bg[data-type=color],
+ #footer[data-type=color]
+ background: darken(#121212, 2)
+
+ #web_bg[data-type=photo]:before,
+ #footer[data-type=photo]:before
+ position: absolute
+ width: 100%
+ height: 100%
+ background-color: alpha($dark-black, .7)
+ content: ''
+
+ #nav,
+ .layout_post > #post,
+ .layout_page > div:first-child:not(.recent-posts)
+ background-color: #121212
+
+ #sidebar
+ background: #121212
+ box-shadow: -.25rem 0 .25rem #121212
+
+ #article-container code
+ background: #2c2c2c
+
+ .recent-posts
+ .recent-post-item
+ background: #121212 !important
+
+ .article-title
+ color: alpha(#FFFFFF, .8) !important
+
+ #page-header
+ &.fixed
+ background: alpha(#121212, .8)
+ box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
+
+ .toggle-menu,
+ #site-name,
+ a
+ color: alpha(#FFFFFF, .8)
+
+ .menus_item_child
+ background-color: lighten(#121212, 5) !important
+
+ li
+ &:hover
+ background: lighten(#121212, 20)
+
+ a
+ color: alpha(#FFFFFF, .6)
+
+ // 代碼框
+ #article-container pre,
+ #article-container pre code
+ background-color: lighten(#121212, 2)
+
+ .highlight-tools
+ background: lighten(#121212, 3)
+
+ #article-container .highlight:not(.js-file-line-container)
+ background-color: lighten(#121212, 2)
+
+ .code pre,
+ .gutter pre
+ background-color: lighten(#121212, 2)
+
+ table
+ .copy-notice
+ background: lighten(#121212, 3)
+
+ .copy-notice
+ background: lighten(#121212, 3)
+
+ blockquote
+ background-color: lighten(#121212, 10)
+ color: alpha(#FFFFFF, .6)
+
+ hr
+ border: 2px dashed alpha(#FFFFFF, .3)
+ background: 0
+
+ &:before
+ color: alpha(#FFFFFF, .6)
+
+ .layout_post .tag_share .post-meta__tags
+ border: 1px solid alpha(#FFFFFF, .6)
+ color: alpha(#FFFFFF, .6)
+
+ &:hover
+ background: darken(#FFFFFF, 60)
+
+ // 文章版權
+ .post-copyright
+ border: 1px solid alpha(#FFFFFF, .6)
+
+ .post-copyright-meta
+ color: alpha(#FFFFFF, .8)
+
+ .post-copyright-info
+ color: alpha(#FFFFFF, .6)
+
+ // 音樂播放器
+ .aplayer
+ filter: brightness(.7)
+ color: $dark-black
+
+ // 右下角按鈕
+ #rightside
+ & > div
+ & > i,
+ & > a,
+ & > div
+ background-color: lighten(#121212, 5) !important
+ color: alpha(#FFFFFF, .6) !important
+
+ &:hover
+ background: lighten(#121212, 20) !important
+
+ // 打賞按鈕
+ .post-reward
+ .reward-button
+ background-color: lighten(#121212, 10) !important
+
+ .reward-all
+ background-color: lighten(#121212, 10) !important
+
+ &:after
+ border-top: 13px solid lighten(#121212, 10) !important
+
+ .md-links-item:before,
+ .aside-category-list:hover,
+ .archive-list-item:hover,
+ #bookmark-it
+ background-color: lighten(#121212, 10) !important
+
+ img,
+ iframe:not(.utterances-frame),
+ .gist
+ filter: brightness(.7)
+
+ // 側邊欄
+ #aside_content
+ .card-widget
+ background: #121212 !important
+
+ .headline,
+ .length_num,
+ .aside-post_title,
+ .aside-category-list_link,
+ .archive-list-link,
+ .social-icon
+ color: alpha(#FFFFFF, .6) !important
+
+ .button--animated:before
+ background: lighten(#121212, 20) !important
+
+ // 頭部
+ #nav
+ &:before
+ position: absolute
+ top: 0
+ right: 0
+ bottom: 0
+ left: 0
+ background-color: alpha($dark-black, .7)
+ content: ''
+
+ #nav span,
+ #nav i,
+ #page-header a,
+ #page-header .toggle-menu,
+ #post-meta,
+ #post-meta a,
+ #footer-wrap,
+ #footer-wrap a
+ color: alpha(#FFFFFF, .6) !important
+
+ .posttitle,
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6
+ color: alpha(#FFFFFF, .8)
+
+ .recent-posts .post-meta__date,
+ .recent-posts .article-meta,
+ .recent-posts a,
+ .post-reward .reward-button,
+ .fa-clipboard,
+ .gutter pre,
+ #bookmark-it,
+ .copy-notice,
+ .md-links-item a,
+ .category-list-link,
+ .relatedPosts_date,
+ .prev-post .label,
+ .next-post .label
+ color: alpha(#FFFFFF, .6) !important
+
+ .prev_info,
+ .next_info,
+ .relatedPosts_title
+ color: alpha(#FFFFFF, .8) !important
+
+ // 時間軸界面
+ .article-sort-item__title
+ color: alpha(#FFFFFF, .6)
+
+ &:hover
+ color: #49b1f5
+
+ // 手機 MENU,TOC
+ #mobile-sidebar
+ #mobile-sidebar-menus
+ background: #121212
+
+ .headline
+ color: alpha(#FFFFFF, .6) !important
+
+ .length_num
+ color: alpha(#FFFFFF, .8) !important
+
+ a
+ color: alpha(#FFFFFF, .6) !important
+
+ // note
+ if hexo-config('note.style') == 'modern'
+ .note
+ filter: brightness(.7)
+
+ if hexo-config('note.style') == 'flat'
+ .note
+ filter: brightness(.7)
+ color: #4c4948
+
+ // 第三方
+ // 插件 hexo-blog-encrypt
+ #hexo-blog-encrypt
+ label,
+ input
+ color: alpha(#FFFFFF, .6) !important
+
+ input
+ background-color: #121212
+
+ if hexo-config('gitalk') && hexo-config('gitalk.enable')
+ #gitalk-container
+ .gt-header-textarea,
+ .gt-header-preview,
+ .gt-comment-content,
+ button,
+ .gt-popup
+ filter: brightness(.7)
+
+ svg
+ fill: alpha(#FFFFFF, .6) !important
+
+ if hexo-config('valine') && hexo-config('valine.enable')
+ // 評論
+ #vcomment
+ p,
+ a,
+ textarea,
+ .vemoji-btn,
+ .vpreview-btn,
+ input,
+ path,
+ .vcount,
+ .vnum,
+ .vtime,
+ .vsys,
+ .vsys,
+ .vnick
+ color: alpha(#FFFFFF, .6) !important
+
+ .vsys
+ background: rgb(97, 106, 107) !important
+
+ .vbtn,
+ .vat
+ border: 1px solid alpha(#FFFFFF, .6)
+ background: lighten(#121212, 5) !important
+ color: alpha(#FFFFFF, .6) !important
+
+ &:hover
+ background: lighten(#121212, 20) !important
+
+ .vwrap
+ border: 1px solid alpha(#FFFFFF, .6)
+
+ input
+ border-bottom: 1px dashed #616a6b
+
+ .vh
+ border-bottom: 1px dashed #616a6b
+
+ pre
+ border: 1px solid alpha(#FFFFFF, .6)
+ background-color: #121212
+
+ code
+ background: transparent
+
+ code
+ background-color: #2c2c2c
+ color: alpha(#FFFFFF, .6)
+
+ .vcontent.expand:before
+ background: linear-gradient(180deg, hsla(0, 0, 0, 0), hsl(218, 8%, 19%))
+
+ .vcontent.expand:after
+ background: hsla(204, 5%, 22%, 1)
+
+ if hexo-config('local_search') && hexo-config('local_search.enable')
+ #local-search
+ background: #121212
+
+ .local-search-box--input
+ background: #121212
+ color: alpha(#FFFFFF, .6)
+
+ .search-result-title
+ color: alpha(#FFFFFF, .6)
+
+ if hexo-config('algolia_search.enable')
+ #algolia-search
+ background: #121212
+
+ .ais-search-box--input
+ background: #121212
+ color: alpha(#FFFFFF, .6)
+
+ #algolia-search-results
+ .algolia-hit-item-link
+ color: alpha(#FFFFFF, .6)
+
+ if hexo-config('disqusjs.enable')
+ #disqus_thread
+ #dsqjs
+ .dsqjs-tab-active,
+ .dsqjs-no-comment
+ color: alpha(#FFFFFF, .6)
+
+ .dsqjs-order-label
+ background-color: lighten(#121212, 5)
+
+ .dsqjs-post-body
+ color: alpha(#FFFFFF, .6)
+
+ code,
+ pre
+ background: #2c2c2c
+
+ blockquote
+ color: alpha(#FFFFFF, .6)
+
+ .mermaid
+ filter: brightness(.7)
diff --git a/themes/butterfly/source/css/_mode/readmode.styl b/themes/butterfly/source/css/_mode/readmode.styl
new file mode 100644
index 00000000..c89cb924
--- /dev/null
+++ b/themes/butterfly/source/css/_mode/readmode.styl
@@ -0,0 +1,147 @@
+if hexo-config('readmode') && hexo-config('readmode.enable')
+ [data-theme='light']
+ .read-mode
+ background: #fff
+
+ #nav.post-bg
+ a
+ color: $font-black !important
+
+ #article-container
+ pre,
+ .highlight:not(.js-file-line-container)
+ background: #f7f7f7 !important
+
+ code
+ color: #4c4948
+
+ blockquote
+ border-left: .2rem solid #ddd
+ background-color: transparent
+
+ ol,
+ li
+ &:before
+ background: transparent
+ color: #4c4948
+
+ ul
+ >li
+ &:before
+ border: .2rem solid #90a4ae
+
+ hr
+ border: 2px dashed #d6dbdf
+ background: transparent
+
+ &:before
+ color: darken(#d6dbdf, 10)
+
+ .hide-button
+ background: darken(#d6dbdf, 10) !important
+
+ .note
+ border: 2px solid #eee
+ border-left-color: transparent
+ background-color: transparent
+
+ #mobile-sidebar-menus,
+ #rightside i,
+ #rightside a,
+ #rightside #rightside_config
+ background: darken(#d6dbdf, 10) !important
+
+ [data-theme='dark']
+ .read-mode
+ background: #0d0d0d
+
+ #article-container
+ code
+ color: rgba(255, 255, 255, .6)
+
+ blockquote
+ border-left: .2rem solid rgba(255, 255, 255, .6)
+ background-color: transparent
+
+ ol,
+ li
+ &:before
+ background: transparent
+ color: rgba(255, 255, 255, .6)
+
+ ul
+ >li
+ &:before
+ border: .15rem solid rgba(255, 255, 255, .6)
+
+ .note
+ border: 2px solid rgba(255, 255, 255, .6)
+ border-left-color: transparent
+ filter: none
+ background-color: transparent
+ color: rgba(255, 255, 255, .6)
+
+ .hide-button
+ background: #1f1f1f !important
+
+ .read-mode
+ #body-wrap
+ padding-left: 0 !important
+
+ #nav.post-bg
+ background-color: transparent
+ background-image: none !important
+
+ a
+ text-shadow: none !important
+
+ &:before
+ opacity: 0
+
+ & > #post-info
+ padding: 0
+ color: $font-black
+ text-align: center
+
+ .layout_post
+ > #post
+ background: transparent
+ box-shadow: none
+
+ &:hover
+ box-shadow: none
+
+ .highlight
+ display: block !important
+
+ #rightside
+ #darkmode
+ display: none
+
+ & > canvas
+ display: none !important
+
+ .code-area-wrap > .highlight-tools,
+ #footer,
+ #post > *:not(:first-child),
+ #to_comment,
+ #sidebar,
+ #toggle-sidebar,
+ #mobile-toc-button,
+ #page-header
+ display: none !important
+
+ #web_bg
+ background: none
+
+ #article-container
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6
+ padding: 0
+
+ &:before
+ content: ''
diff --git a/themes/butterfly/source/css/_search/algolia.styl b/themes/butterfly/source/css/_search/algolia.styl
new file mode 100644
index 00000000..6dab0833
--- /dev/null
+++ b/themes/butterfly/source/css/_search/algolia.styl
@@ -0,0 +1,73 @@
+#algolia-search
+ animation: titlescale .5s
+
+ .ais-search-box
+ margin: 0 auto
+ max-width: 100%
+ width: 100%
+
+ input
+ padding: .25rem .7rem
+ outline: none
+ border: 2px solid $search-color
+ border-radius: 2rem
+ background: $search-bg
+ font-size: 14px
+
+ .ais-hits--item.algolia-hit-item
+ position: relative
+ padding-left: 1.5rem
+
+ &:hover
+ &:before
+ border-color: $theme-button-hover-color
+
+ &:before
+ $w = .3rem
+ position: absolute
+ top: .4rem
+ left: 0
+ width: w = $w
+ height: h = w
+ border: .5 * w solid $search-color
+ border-radius: w
+ background: transparent
+ content: ''
+ line-height: h
+ transition: all .2s ease-in-out
+
+ a
+ display: block
+ color: $font-black
+ font-size: 14px
+ cursor: pointer
+
+ &:hover
+ color: $search-color
+
+ .ais-pagination.pagination
+ margin: .8rem 0 0
+ padding: 0
+ text-align: center
+
+ .ais-pagination--item
+ margin: 0 .2rem
+ padding: 0
+
+ a
+ display: inline-block
+ min-width: 1.2rem
+ height: 1.2rem
+ text-align: center
+ line-height: 1.2rem
+
+ .ais-pagination--item.current
+ a
+ background: $theme-paginator-color
+ color: #eee
+ cursor: default
+
+ .algolia-logo
+ padding-top: 2px
+ width: 4rem
+ height: 1.5rem
\ No newline at end of file
diff --git a/themes/butterfly/source/css/_search/index.styl b/themes/butterfly/source/css/_search/index.styl
new file mode 100644
index 00000000..bf3794e8
--- /dev/null
+++ b/themes/butterfly/source/css/_search/index.styl
@@ -0,0 +1,53 @@
+.search-dialog
+ position: fixed
+ top: 5rem
+ left: 50%
+ z-index: 1001
+ display: none
+ margin-left: -15rem
+ padding: 1rem
+ width: 30rem
+ background: $search-bg
+
+ hr
+ margin: 1rem auto
+
+ span.search-close-button
+ position: absolute
+ top: .8rem
+ right: 1rem
+ color: $grey
+ font-size: 1rem
+ line-height: 1
+ cursor: pointer
+ transition: color .2s ease-in-out
+
+ &:hover
+ color: $search-color
+
+ &__title
+ padding: 0 0 .7rem
+ color: $search-color
+ font-size: 1rem
+ line-height: 1
+
+.search-mask
+ position: fixed
+ top: 0
+ right: 0
+ bottom: 0
+ left: 0
+ z-index: 1000
+ display: none
+ background: rgba($dark-black, .6)
+
+@media screen and (max-width: $sm)
+ .search-dialog
+ top: 0
+ left: 0
+ margin: 0
+ width: 100%
+ height: 100%
+
+ .search-result-list
+ max-height: 100% !important
diff --git a/themes/butterfly/source/css/_search/local-search.styl b/themes/butterfly/source/css/_search/local-search.styl
new file mode 100644
index 00000000..e1861f99
--- /dev/null
+++ b/themes/butterfly/source/css/_search/local-search.styl
@@ -0,0 +1,55 @@
+#local-search
+ animation: titlescale .5s
+
+ .local-search-box
+ margin: 0 auto
+ max-width: 100%
+ width: 100%
+
+ input
+ padding: .25rem .7rem
+ width: 100%
+ outline: none
+ border: 2px solid $search-color
+ border-radius: 2rem
+ background: $search-bg
+ font-size: 14px
+ -webkit-appearance: none
+
+ .local-search__hit-item
+ position: relative
+ padding-left: 1.5rem
+
+ &:hover
+ &:before
+ border-color: $theme-button-hover-color
+
+ &:before
+ $w = .3rem
+ position: absolute
+ top: .4rem
+ left: 0
+ width: w = $w
+ height: h = w
+ border: .5 * w solid $search-color
+ border-radius: w
+ background: transparent
+ content: ''
+ line-height: h
+ transition: all .2s ease-in-out
+
+ a
+ display: block
+ color: $font-black
+ font-size: 14px
+ cursor: pointer
+
+ &:hover
+ color: $search-color
+
+ .local-search-stats__hr
+ display: none !important
+
+ .search-result-list
+ overflow-y: auto
+ max-height: 10.5rem
\ No newline at end of file
diff --git a/themes/butterfly/source/css/_third-party/normalize.min.css b/themes/butterfly/source/css/_third-party/normalize.min.css
new file mode 100644
index 00000000..1854c297
--- /dev/null
+++ b/themes/butterfly/source/css/_third-party/normalize.min.css
@@ -0,0 +1 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
\ No newline at end of file
diff --git a/themes/butterfly/source/css/index.styl b/themes/butterfly/source/css/index.styl
new file mode 100644
index 00000000..a7df5307
--- /dev/null
+++ b/themes/butterfly/source/css/index.styl
@@ -0,0 +1,17 @@
+@import 'nib'
+@import '_third-party/normalize.min.css'
+// project
+@import 'var'
+@import '_global'
+@import '_highlight/highlight'
+@import '_layout/*'
+@import '_mode/*'
+
+// search
+if hexo-config('algolia_search.enable')
+ @import '_search/index'
+ @import '_search/algolia'
+
+if hexo-config('local_search') && hexo-config('local_search.enable')
+ @import '_search/index'
+ @import '_search/local-search'
diff --git a/themes/butterfly/source/css/var.styl b/themes/butterfly/source/css/var.styl
new file mode 100644
index 00000000..84d34293
--- /dev/null
+++ b/themes/butterfly/source/css/var.styl
@@ -0,0 +1,144 @@
+// color
+$bright-blue = #49B1F5
+$strong-cyan = #00c4b6
+$light-orange = #FF7242
+$light-red = #F47466
+
+$themeColorEnable = hexo-config('theme_color') && hexo-config('theme_color.enable')
+$theme-color = $themeColorEnable ? convert(hexo-config('theme_color.main')) : $bright-blue
+$theme-paginator-color = $themeColorEnable ? convert(hexo-config('theme_color.paginator')) : $strong-cyan
+$theme-button-hover-color = $themeColorEnable ? convert(hexo-config('theme_color.button_hover')) : $light-orange
+$theme-text-selection-color = $themeColorEnable ? convert(hexo-config('theme_color.text_selection')) : $strong-cyan
+$theme-link-color = $themeColorEnable ? convert(hexo-config('theme_color.link_color')) : $bright-blue
+$theme-hr-color = $themeColorEnable ? convert(hexo-config('theme_color.hr_color')) : $bright-blue
+$code-foreground = $themeColorEnable ? convert(hexo-config('theme_color.code_foreground')) : $light-red
+$code-background = $themeColorEnable ? convert(hexo-config('theme_color.code_background')) : rgba(27, 31, 35, .05)
+$theme-toc-color = $themeColorEnable ? convert(hexo-config('theme_color.toc_color')) : $strong-cyan
+
+// font
+$fontEnable = hexo-config('font') && hexo-config('font.enable')
+$font-family = $fontEnable ? convert(hexo-config('font.font-family')) : Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
+$code-font = $fontEnable ? convert(hexo-config('font.code-font')) : consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number
+$site-name-font = convert(hexo-config('blog_title_font.font-family')) || '"Titillium Web",Lato,PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif'
+
+//hr
+$hrEnable = hexo-config('hr') && hexo-config('hr.enable')
+$hr-icon = $hrEnable ? hexo-config('hr.icon') : '\f0c4'
+$hr-icon-top = $hrEnable ? convert(hexo-config('hr.icon-top')) : -10px
+
+//page beatutify
+$beautifyEnable = hexo-config('beautify.enable')
+$title-prefix-icon = $beautifyEnable ? hexo-config('beautify.title-prefix-icon') : '\f0c1'
+$title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red
+
+// Global Variables
+$font-size = 14px
+$font-color = #1F2D3D
+$button-color = #fff
+$rem = 20px
+$text-line-height = 2
+$sm = 768px
+$bg = 1024px
+$web-bg = convert(hexo-config('background'))
+$index_top_img_height = convert(hexo-config('index_top_img_height')) || 100vh
+$index_site_info_top = convert(hexo-config('index_site_info_top')) || 43%
+// Global color & SVG
+$light-blue = $theme-color
+$dark-black = #000000
+$light-grey = #EEEEEE
+$grey = #858585
+$white = #FFFFFF
+$whitesmoke = #f5f5f5
+$font-black = #4C4948
+$card-bg = $white
+// code
+$code-font-family = $font-family
+$line-height-code-block = 20px
+$blockquote-color = #6a737d
+$blockquote-padding-color = $themeColorEnable ? convert(hexo-config('theme_color.blockquote_padding_color')) : #49B1F5
+$blockquote-background-color = $themeColorEnable ? alpha(convert(hexo-config('theme_color.blockquote_background_color')),.1) : alpha($blockquote-padding-color,.1)
+// page
+$body-bg = #fff
+$a-link-color = #99a9bf
+$sticky-color = $light-orange
+$theme-meta-color = $themeColorEnable ? convert(hexo-config('theme_color.meta_color')) : #858585
+// sidebar
+$sidebar-icon-top = 20px
+$sidebar-icon-left = $sidebar-icon-top - 4px
+$sidebar-icon-size = 16px
+$sidebar-width = 300px
+$sidebar-background = #f6f8fa
+$sidebar-active-color = #fff
+$mobile-sidebar-width = 250px
+// table
+$table-thead-bg = #99a9bf
+// reward
+$reward-pop-up-bg = #f5f5f5
+$reward-pop-up-color = #858585
+// search
+$search-bg = #f6f8fa
+$search-color = $theme-color
+//gallery
+$gallery-color = #fff
+// tag-hide
+$tag-hide-bg = $theme-color
+
+
+
+// Note colors
+// --------------------------------------------------
+hexo-config('note.light_bg_offset') is a 'unit' ? ($lbg = unit(hexo-config('note.light_bg_offset'), '%')) : ($lbg = 0)
+// Default
+$note-default-border = #777
+$note-default-bg = lighten(spin($note-default-border, 0), 94% + $lbg)
+$note-default-text = $note-default-border
+$note-default-icon = '\f0a9'
+$note-modern-default-border = #e1e1e1
+$note-modern-default-bg = lighten(spin($note-modern-default-border, 10), 60% + ($lbg * 4))
+$note-modern-default-text = #666
+$note-modern-default-hover = darken(spin($note-modern-default-text, -10), 32%)
+// Primary
+$note-primary-border = #6f42c1
+$note-primary-bg = lighten(spin($note-primary-border, 10), 92% + $lbg)
+$note-primary-text = $note-primary-border
+$note-primary-icon = '\f055'
+$note-modern-primary-border = #e1c2ff
+$note-modern-primary-bg = lighten(spin($note-modern-primary-border, 10), 40% + ($lbg * 4))
+$note-modern-primary-text = #6f42c1
+$note-modern-primary-hover = darken(spin($note-modern-primary-text, -10), 22%)
+// Info
+$note-info-border = #428bca
+$note-info-bg = lighten(spin($note-info-border, -10), 91% + $lbg)
+$note-info-text = $note-info-border
+$note-info-icon = '\f05a'
+$note-modern-info-border = #b3e5ef
+$note-modern-info-bg = lighten(spin($note-modern-info-border, 10), 50% + ($lbg * 4))
+$note-modern-info-text = #31708f
+$note-modern-info-hover = darken(spin($note-modern-info-text, -10), 32%)
+// Success
+$note-success-border = #5cb85c
+$note-success-bg = lighten(spin($note-success-border, 10), 90% + $lbg)
+$note-success-text = $note-success-border
+$note-success-icon = '\f058'
+$note-modern-success-border = #d0e6be
+$note-modern-success-bg = lighten(spin($note-modern-success-border, 10), 40% + ($lbg * 4))
+$note-modern-success-text = #3c763d
+$note-modern-success-hover = darken(spin($note-modern-success-text, -10), 27%)
+// Warning
+$note-warning-border = #f0ad4e
+$note-warning-bg = lighten(spin($note-warning-border, 10), 88% + $lbg)
+$note-warning-text = $note-warning-border
+$note-warning-icon = '\f06a'
+$note-modern-warning-border = #fae4cd
+$note-modern-warning-bg = lighten(spin($note-modern-warning-border, 10), 43% + ($lbg * 4))
+$note-modern-warning-text = #8a6d3b
+$note-modern-warning-hover = darken(spin($note-modern-warning-text, -10), 18%)
+// Danger
+$note-danger-border = #d9534f
+$note-danger-bg = lighten(spin($note-danger-border, -10), 92% + $lbg)
+$note-danger-text = $note-danger-border
+$note-danger-icon = '\f056'
+$note-modern-danger-border = #ebcdd2
+$note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4))
+$note-modern-danger-text = #a94442
+$note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%)
diff --git a/themes/butterfly/source/img/1avatar.png b/themes/butterfly/source/img/1avatar.png
new file mode 100644
index 00000000..90fb8569
Binary files /dev/null and b/themes/butterfly/source/img/1avatar.png differ
diff --git a/themes/butterfly/source/img/404.jpg b/themes/butterfly/source/img/404.jpg
new file mode 100644
index 00000000..4bab3c3f
Binary files /dev/null and b/themes/butterfly/source/img/404.jpg differ
diff --git a/themes/butterfly/source/img/DerrickAlipay.jpg b/themes/butterfly/source/img/DerrickAlipay.jpg
new file mode 100644
index 00000000..4feced37
Binary files /dev/null and b/themes/butterfly/source/img/DerrickAlipay.jpg differ
diff --git a/themes/butterfly/source/img/DerrickWechat.png b/themes/butterfly/source/img/DerrickWechat.png
new file mode 100644
index 00000000..8f210820
Binary files /dev/null and b/themes/butterfly/source/img/DerrickWechat.png differ
diff --git a/themes/butterfly/source/img/algolia.svg b/themes/butterfly/source/img/algolia.svg
new file mode 100644
index 00000000..47024234
--- /dev/null
+++ b/themes/butterfly/source/img/algolia.svg
@@ -0,0 +1,9 @@
+
diff --git a/themes/butterfly/source/img/avatar.png b/themes/butterfly/source/img/avatar.png
new file mode 100644
index 00000000..75b12906
Binary files /dev/null and b/themes/butterfly/source/img/avatar.png differ
diff --git a/themes/butterfly/source/img/comment_bg.png b/themes/butterfly/source/img/comment_bg.png
new file mode 100644
index 00000000..1ce39384
Binary files /dev/null and b/themes/butterfly/source/img/comment_bg.png differ
diff --git a/themes/butterfly/source/img/favicon.ico b/themes/butterfly/source/img/favicon.ico
new file mode 100644
index 00000000..e07d73ac
Binary files /dev/null and b/themes/butterfly/source/img/favicon.ico differ
diff --git a/themes/butterfly/source/img/friend_404.gif b/themes/butterfly/source/img/friend_404.gif
new file mode 100644
index 00000000..91dd56a2
Binary files /dev/null and b/themes/butterfly/source/img/friend_404.gif differ
diff --git a/themes/butterfly/source/img/icp.png b/themes/butterfly/source/img/icp.png
new file mode 100644
index 00000000..3b5539df
Binary files /dev/null and b/themes/butterfly/source/img/icp.png differ
diff --git a/themes/butterfly/source/img/index.jpg b/themes/butterfly/source/img/index.jpg
new file mode 100644
index 00000000..6e18f891
Binary files /dev/null and b/themes/butterfly/source/img/index.jpg differ
diff --git a/themes/butterfly/source/img/loading.gif b/themes/butterfly/source/img/loading.gif
new file mode 100644
index 00000000..46df25ad
Binary files /dev/null and b/themes/butterfly/source/img/loading.gif differ
diff --git a/themes/butterfly/source/img/post.jpg b/themes/butterfly/source/img/post.jpg
new file mode 100644
index 00000000..49a812c5
Binary files /dev/null and b/themes/butterfly/source/img/post.jpg differ
diff --git a/themes/butterfly/source/img/post_loadding.svg b/themes/butterfly/source/img/post_loadding.svg
new file mode 100644
index 00000000..ef01327f
--- /dev/null
+++ b/themes/butterfly/source/img/post_loadding.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/themes/butterfly/source/js/main.js b/themes/butterfly/source/js/main.js
new file mode 100644
index 00000000..7ce67048
--- /dev/null
+++ b/themes/butterfly/source/js/main.js
@@ -0,0 +1,751 @@
+$(function () {
+ const isSnackbar = GLOBAL_CONFIG.Snackbar !== undefined
+ const $pageHead = $('#page-header')
+ const $rightside = $('#rightside')
+ const $body = $('body')
+
+ /**
+ * 當menu過多時，自動適配，避免UI錯亂
+ * 傳入 1 sidebar打開時
+ * 傳入 2 正常狀態下
+ */
+ var blogNameWidth = $('#blog_name').width()
+ var menusWidth = $('.menus').width()
+ var sidebarWidth = $('#sidebar').width()
+
+ function isAdjust (n) {
+ var t
+ if (n === 1) {
+ t = blogNameWidth + menusWidth > $pageHead.width() - sidebarWidth - 20
+ } else if (n === 2) {
+ t = blogNameWidth + menusWidth > $pageHead.width() - 20
+ }
+
+ if (t) headerAdjust()
+ else headerAdjustBack()
+ }
+
+ function headerAdjust () {
+ $pageHead.find('.toggle-menu').addClass('is-visible-inline')
+ $pageHead.find('.menus_items').addClass('is_invisible')
+ $pageHead.find('#search_button span').addClass('is_invisible')
+ }
+
+ function headerAdjustBack () {
+ $pageHead.find('.toggle-menu').removeClass('is-visible-inline')
+ $pageHead.find('.menus_items').removeClass('is_invisible')
+ $pageHead.find('#search_button span').removeClass('is_invisible')
+ }
+
+ // 初始化header
+ function initAjust () {
+ if (window.innerWidth < 768) headerAdjust()
+ else isAdjust(2)
+ }
+
+ initAjust()
+ $('#page-header').css({ opacity: '1', animation: 'headerNoOpacity 1s' })
+
+ $(window).on('resize', function () {
+ if ($('#sidebar').hasClass('tocOpenPc') && $pageHead.hasClass('fixed')) {
+ isAdjust(1)
+ } else {
+ initAjust()
+ }
+ })
+
+ /**
+ * windows時 設置主頁top_img 為 fixed
+ */
+ if (GLOBAL_CONFIG_SITE.isHome) {
+ var isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)
+ if (!isSafari && isDesktop()) {
+ $('#nav').css('background-attachment', 'fixed')
+ }
+ }
+
+ /**
+ * 進入post頁sidebar處理
+ */
+ if (GLOBAL_CONFIG_SITE.isPost) {
+ if (window.innerWidth > 1024 && $('#toggle-sidebar').hasClass('on')) {
+ setTimeout(function () {
+ openSidebar()
+ }, 400)
+ }
+ }
+
+ /**
+ * 點擊左下角箭頭,顯示sidebar
+ */
+
+ function closeSidebar () {
+ $('#sidebar').removeClass('tocOpenPc')
+ $('.menus').animate({
+ paddingRight: 0
+ }, 400)
+ $('#body-wrap').animate({
+ paddingLeft: 0
+ }, 400)
+ $('#sidebar').animate({
+ left: '-300px'
+ }, 400)
+ $('#toggle-sidebar').css({
+ transform: 'rotateZ(0deg)',
+ color: '#1F2D3D',
+ opacity: '1'
+ })
+ setTimeout(function () {
+ isAdjust(2)
+ }, 400)
+ }
+
+ function openSidebar () {
+ $('#sidebar').addClass('tocOpenPc')
+ $('.menus').animate({
+ paddingRight: 300
+ }, 400)
+ $('#body-wrap').animate({
+ paddingLeft: 300
+ }, 400)
+ $('#sidebar').animate({
+ left: 0
+ }, 400)
+ $('#toggle-sidebar').css({
+ transform: 'rotateZ(180deg)',
+ color: '#99a9bf',
+ opacity: '1'
+ })
+ var isAdjustTimeCount = window.setInterval(function () {
+ if ($pageHead.hasClass('fixed')) isAdjust(1)
+ else isAdjust(2)
+ }, 100)
+ setTimeout(function () {
+ clearInterval(isAdjustTimeCount)
+ }, 400)
+ }
+
+ $('#toggle-sidebar').on('click', function () {
+ var isOpen = $(this).hasClass('on')
+ isOpen ? $(this).removeClass('on') : $(this).addClass('on')
+ if (isOpen) {
+ closeSidebar()
+ } else {
+ openSidebar()
+ }
+ })
+
+ /**
+ * 手機menu和toc按鈕點擊
+ * 顯示menu和toc的sidebar
+ */
+
+ var $toggleMenu = $('.toggle-menu')
+ var $mobileSidevarMenus = $('#mobile-sidebar-menus')
+ var $mobileTocButton = $('#mobile-toc-button')
+ var $menuMask = $('#menu_mask')
+
+ function openMobileSidebar (name) {
+ sidebarPaddingR()
+ $('body').css('overflow', 'hidden')
+ $menuMask.fadeIn()
+
+ if (name === 'menu') {
+ $toggleMenu.removeClass('close').addClass('open')
+ $mobileSidevarMenus.css('transform', 'translate3d(-100%,0,0)')
+ var $mobileSidevarMenusChild = $mobileSidevarMenus.children()
+ for (let i = 0; i <= $mobileSidevarMenusChild.length; i++) {
+ const duration = i / 5 + 0.2
+ $mobileSidevarMenusChild.eq(i).css('animation', 'sidebarItem ' + duration + 's')
+ }
+ }
+
+ if (name === 'toc') {
+ $mobileTocButton.removeClass('close').addClass('open')
+ $('#sidebar').addClass('tocOpenMobile')
+ $('#sidebar').css({ transform: 'translate3d(-100%,0,0)', left: '' })
+ }
+ }
+
+ function closeMobileSidebar (name) {
+ $('body').css({ overflow: '', 'padding-right': '' })
+ $menuMask.fadeOut()
+
+ if (name === 'menu') {
+ $toggleMenu.removeClass('open').addClass('close')
+ $mobileSidevarMenus.css('transform', '')
+ $('#mobile-sidebar-menus > div,#mobile-sidebar-menus > hr').css('animation', '')
+ }
+
+ if (name === 'toc') {
+ $mobileTocButton.removeClass('open').addClass('close')
+ $('#sidebar').removeClass('tocOpenMobile')
+ $('#sidebar').css({ transform: '' })
+ }
+ }
+
+ $toggleMenu.on('click', function () {
+ openMobileSidebar('menu')
+ })
+
+ $mobileTocButton.on('click', function () {
+ openMobileSidebar('toc')
+ })
+
+ $menuMask.on('click touchstart', function (e) {
+ if ($toggleMenu.hasClass('open')) {
+ closeMobileSidebar('menu')
+ }
+ if ($mobileTocButton.hasClass('open')) {
+ closeMobileSidebar('toc')
+ }
+ })
+
+ $(window).on('resize', function (e) {
+ if (!$toggleMenu.is(':visible')) {
+ if ($toggleMenu.hasClass('open')) closeMobileSidebar('menu')
+ }
+ })
+
+ const mql = window.matchMedia('(max-width: 1024px)')
+ mql.addListener(function (ev) {
+ if (ev.matches) {
+ if ($('#sidebar').hasClass('tocOpenPc')) closeSidebar()
+ } else {
+ if ($('#toggle-sidebar').hasClass('on')) openSidebar()
+ if ($mobileTocButton.hasClass('open')) closeMobileSidebar('toc')
+ }
+ })
+
+ /**
+ * 首頁top_img底下的箭頭
+ */
+ $('#scroll_down').on('click', function () {
+ scrollTo('#content-inner')
+ })
+
+ /**
+ * BOOKMARK 書簽
+ */
+ $('#bookmark-it').on('click', function () {
+ if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark
+ window.sidebar.addPanel(document.title, window.location.href, '')
+ } else if (window.external && ('AddFavorite' in window.external)) { // IE Favorite
+ window.external.AddFavorite(location.href, document.title)
+ } else if (window.opera && window.print) { // Opera Hotlist
+ this.title = document.title
+ return true
+ } else { // webkit - safari/chrome
+ if (isSnackbar) {
+ var bookmarkText = GLOBAL_CONFIG.Snackbar.bookmark.message_prev + ' ' + (navigator.userAgent.toLowerCase().indexOf('mac') !== -1 ? 'Command/Cmd' : 'CTRL') + '+ D ' + GLOBAL_CONFIG.Snackbar.bookmark.message_next + '.'
+ snackbarShow(bookmarkText)
+ } else {
+ alert(GLOBAL_CONFIG.bookmark.message_prev + ' ' + (navigator.userAgent.toLowerCase().indexOf('mac') !== -1 ? 'Command/Cmd' : 'CTRL') + '+ D ' + GLOBAL_CONFIG.bookmark.message_next + '.')
+ }
+ }
+ })
+
+ /**
+ * 代碼
+ */
+ const isHighlightCopy = GLOBAL_CONFIG.highlightCopy
+ const isHighlightLang = GLOBAL_CONFIG.highlightLang
+ const isHighlightShrink = GLOBAL_CONFIG.highlightShrink
+ const $figureHighlight = $('figure.highlight')
+ if (isHighlightCopy || isHighlightLang || isHighlightShrink !== 'none') {
+ $figureHighlight.wrap('').before('')
+ }
+
+ /**
+ * 代碼收縮
+ */
+ const $highlightTools = $('.highlight-tools')
+ if (isHighlightShrink === 'true') {
+ $highlightTools.append('')
+ } else if (isHighlightShrink === 'false') {
+ $highlightTools.append('')
+ }
+
+ $(document).on('click', '.highlight-tools >.code-expand', function () {
+ var $table = $(this).parent().next()
+ if ($(this).hasClass('code-closed')) {
+ $table.css('display', 'block')
+ $(this).removeClass('code-closed')
+ } else {
+ $table.css('display', 'none')
+ $(this).addClass('code-closed')
+ }
+ })
+
+ /**
+ * 代碼語言
+ */
+ if (isHighlightLang) {
+ var langNameIndex, langName
+ $figureHighlight.each(function () {
+ langNameIndex = langName = $(this).attr('class').split(' ')[1]
+ if (langNameIndex === 'plain') langName = 'Code'
+ $(this).prev().append('' + langName + '
')
+ })
+ }
+ /**
+ * 代碼copy
+ * copy function
+ */
+ if (isHighlightCopy) {
+ $highlightTools.append('')
+ var copy = function (text, ctx) {
+ if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
+ try {
+ document.execCommand('copy') // Security exception may be thrown by some browsers.
+ if (isSnackbar) {
+ snackbarShow(GLOBAL_CONFIG.copy.success)
+ } else {
+ $(ctx).prev('.copy-notice')
+ .text(GLOBAL_CONFIG.copy.success)
+ .animate({
+ opacity: 1,
+ right: 30
+ }, 450, function () {
+ setTimeout(function () {
+ $(ctx).prev('.copy-notice').animate({
+ opacity: 0,
+ right: 0
+ }, 650)
+ }, 400)
+ })
+ }
+ } catch (ex) {
+ if (isSnackbar) {
+ snackbarShow(GLOBAL_CONFIG.copy.success)
+ } else {
+ $(ctx).prev('.copy-notice')
+ .text(GLOBAL_CONFIG.copy.error)
+ .animate({
+ opacity: 1,
+ right: 30
+ }, 650, function () {
+ setTimeout(function () {
+ $(ctx).prev('.copy-notice').animate({
+ opacity: 0,
+ right: 0
+ }, 650)
+ }, 400)
+ })
+ return false
+ }
+ }
+ } else {
+ if (isSnackbar) {
+ snackbarShow(GLOBAL_CONFIG.copy.noSupport)
+ } else {
+ $(ctx).prev('.copy-notice').text(GLOBAL_CONFIG.copy.noSupport)
+ }
+ }
+ }
+
+ // click events
+ $(document).on('click', '.highlight-tools>.fa-clipboard', function () {
+ var selection = window.getSelection()
+ var range = document.createRange()
+ range.selectNodeContents($(this).parent().next().find('.code pre')[0])
+ selection.removeAllRanges()
+ selection.addRange(range)
+ var text = selection.toString()
+ copy(text, this)
+ selection.removeAllRanges()
+ })
+ }
+
+ /**
+ * justified-gallery 圖庫排版
+ */
+ var $justifiedGallery = $('.justified-gallery')
+ if ($justifiedGallery.length) {
+ var $imgList = $justifiedGallery.find('img')
+ $imgList.unwrap()
+ if ($imgList.length) {
+ $imgList.each(function (i, o) {
+ if ($(o).attr('data-src')) $(o).attr('src', $(o).attr('data-src'))
+ $(o).wrap('')
+ })
+ }
+ $('head').append('')
+ loadScript('https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js', function () {
+ $justifiedGallery.not($('.hide-content .justified-gallery')).justifiedGallery({
+ rowHeight: 220,
+ margins: 4
+ })
+ })
+ }
+
+ /**
+ * fancybox和 mediumZoom
+ */
+
+ var isMediumZoom = GLOBAL_CONFIG.medium_zoom
+ var isFancybox = GLOBAL_CONFIG.fancybox
+ if (isFancybox) {
+ var images = $('#article-container img:not(.gallery-group-img)').not($('a>img'))
+ images.each(function (i, o) {
+ var lazyloadSrc = $(o).attr('data-src') ? $(o).attr('data-src') : $(o).attr('src')
+ $(o).wrap(
+ ''
+ )
+ })
+
+ $().fancybox({
+ selector: '[data-fancybox]',
+ loop: true,
+ transitionEffect: 'slide',
+ protect: true,
+ buttons: ['slideShow', 'fullScreen', 'thumbs', 'close']
+ })
+ } else if (isMediumZoom) {
+ const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img'))
+ zoom.on('open', function (event) {
+ var photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff'
+ zoom.update({
+ background: photoBg
+ })
+ })
+ }
+
+ /**
+ * 滾動處理
+ */
+ var initTop = 0
+ $(window).scroll(function (event) {
+ var currentTop = $(this).scrollTop()
+ var isUp = scrollDirection(currentTop)
+ if (currentTop > 56) {
+ if (isUp) {
+ if ($pageHead.hasClass('visible')) $pageHead.removeClass('visible')
+ } else {
+ if (!$pageHead.hasClass('visible')) $pageHead.addClass('visible')
+ }
+ $pageHead.addClass('fixed')
+ if ($rightside.css('opacity') === '0') {
+ $rightside.css({ opacity: '1', transform: 'translateX(-38px)' })
+ }
+ } else {
+ if (currentTop === 0) {
+ $pageHead.removeClass('fixed').removeClass('visible')
+ }
+ $rightside.css({ opacity: '', transform: '' })
+ }
+ })
+
+ // find the scroll direction
+ function scrollDirection (currentTop) {
+ var result = currentTop > initTop // true is down & false is up
+ initTop = currentTop
+ return result
+ }
+
+ /**
+ * 點擊滾回頂部
+ */
+ $('#go-up').on('click', function () {
+ scrollTo('body')
+ })
+
+ /**
+ * toc
+ */
+
+ if (GLOBAL_CONFIG_SITE.isPost && GLOBAL_CONFIG_SITE.isSidebar) {
+ $('.toc-child').hide()
+
+ // main of scroll
+ $(window).scroll(throttle(function (event) {
+ var currentTop = $(this).scrollTop()
+ scrollPercent(currentTop)
+ findHeadPosition(currentTop)
+ autoScrollToc(currentTop)
+ }, 100))
+
+ // scroll
+ $('.toc-link').on('click', function (e) {
+ if (window.innerWidth <= 1024) {
+ closeMobileSidebar('toc')
+ } else {
+ e.preventDefault()
+ scrollTo($(this).attr('href'))
+ }
+ })
+
+ // expand toc-item
+ var expandToc = function ($item) {
+ if ($item.is(':visible')) {
+ return
+ }
+ $item.fadeIn(400)
+ }
+
+ var scrollPercent = function (currentTop) {
+ var docHeight = $('#article-container').height()
+ var winHeight = $(window).height()
+ var contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : ($(document).height() - winHeight)
+ var scrollPercent = (currentTop) / (contentMath)
+ var scrollPercentRounded = Math.round(scrollPercent * 100)
+ var percentage = (scrollPercentRounded > 100) ? 100
+ : (scrollPercentRounded <= 0) ? 0
+ : scrollPercentRounded
+ $('.progress-num').text(percentage)
+ $('.sidebar-toc__progress-bar').animate({
+ width: percentage + '%'
+ }, 100)
+ }
+
+ var updateAnchor = function (anchor) {
+ if (window.history.replaceState && anchor !== window.location.hash) {
+ window.history.replaceState(undefined, undefined, anchor)
+ }
+ }
+
+ // find head position & add active class
+ // DOM Hierarchy:
+ // ol.toc > (li.toc-item, ...)
+ // li.toc-item > (a.toc-link, ol.toc-child > (li.toc-item, ...))
+ var findHeadPosition = function (top) {
+ // assume that we are not in the post page if no TOC link be found,
+ // thus no need to update the status
+ if ($('.toc-link').length === 0) {
+ return false
+ }
+
+ var list = $('#article-container').find('h1,h2,h3,h4,h5,h6')
+ var currentId = ''
+ list.each(function () {
+ var head = $(this)
+ if (top > head.offset().top - 25) {
+ currentId = '#' + $(this).attr('id')
+ }
+ })
+
+ if (currentId === '') {
+ $('.toc-link').removeClass('active')
+ $('.toc-child').hide()
+ }
+
+ var currentActive = $('.toc-link.active')
+ if (currentId && currentActive.attr('href') !== currentId) {
+ updateAnchor(currentId)
+
+ $('.toc-link').removeClass('active')
+
+ var _this = $('.toc-link[href="' + currentId + '"]')
+ _this.addClass('active')
+
+ var parents = _this.parents('.toc-child')
+ // Returned list is in reverse order of the DOM elements
+ // Thus `parents.last()` is the outermost .toc-child container
+ // i.e. list of subsections
+ var topLink = (parents.length > 0) ? parents.last() : _this
+ expandToc(topLink.closest('.toc-item').find('.toc-child'))
+ topLink
+ // Find all top-level .toc-item containers, i.e. sections
+ // excluding the currently active one
+ .closest('.toc-item').siblings('.toc-item')
+ // Hide their respective list of subsections
+ .find('.toc-child').hide()
+ }
+ }
+
+ var autoScrollToc = function (currentTop) {
+ if ($('.toc-link').hasClass('active')) {
+ var activePosition = $('.active').offset().top
+ var sidebarScrolltop = $('#sidebar .sidebar-toc__content').scrollTop()
+ if (activePosition > (currentTop + $(window).height() - 100)) {
+ $('#sidebar .sidebar-toc__content').scrollTop(sidebarScrolltop + 100)
+ }
+ if (activePosition < currentTop + 100) {
+ $('#sidebar .sidebar-toc__content').scrollTop(sidebarScrolltop - 100)
+ }
+ }
+ }
+ }
+
+ /**
+ * 閲讀模式
+ */
+ $('#readmode').click(function () {
+ $('body').toggleClass('read-mode')
+ })
+
+ /**
+ * 字體調整
+ */
+ $('#font_plus').click(function () {
+ $body.css('font-size', parseFloat($body.css('font-size')) + 1)
+ })
+ $('#font_minus').click(function () {
+ $body.css('font-size', parseFloat($body.css('font-size')) - 1)
+ })
+
+ /**
+ * menu
+ * 側邊欄sub-menu 展開/收縮
+ * 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug)
+ */
+ $('#mobile-sidebar-menus .menus-expand').on('click', function () {
+ if ($(this).hasClass('menus-closed')) {
+ $(this).parents('.menus_item').find('.menus_item_child').slideDown()
+ $(this).removeClass('menus-closed')
+ } else {
+ $(this).parents('.menus_item').find('.menus_item_child').slideUp()
+ $(this).addClass('menus-closed')
+ }
+ })
+
+ $(window).on('touchmove', function (e) {
+ var $menusChild = $('#page-header .menus_item_child')
+ if ($menusChild.is(':visible')) {
+ $menusChild.css('display', 'none')
+ }
+ })
+
+ /**
+ * rightside 點擊設置 按鈕 展開
+ */
+ $('#rightside_config').on('click', function () {
+ if ($('#rightside-config-hide').hasClass('rightside-in')) {
+ $('#rightside-config-hide').removeClass('rightside-in').addClass('rightside-out')
+ } else {
+ $('#rightside-config-hide').removeClass('rightside-out').addClass('rightside-in')
+ }
+ })
+
+ /**
+ * 複製時加上版權信息
+ */
+ var copyright = GLOBAL_CONFIG.copyright
+ if (copyright !== undefined) {
+ document.body.oncopy = function (event) {
+ event.preventDefault()
+ let textFont; const copyFont = window.getSelection(0).toString()
+ if (copyFont.length > 45) {
+ textFont = copyFont + '\n' + '\n' + '\n' +
+ copyright.languages.author + '\n' +
+ copyright.languages.link + window.location.href + '\n' +
+ copyright.languages.source + '\n' +
+ copyright.languages.info
+ } else {
+ textFont = copyFont
+ }
+ if (event.clipboardData) {
+ return event.clipboardData.setData('text', textFont)
+ } else {
+ // 兼容IE
+ return window.clipboardData.setData('text', textFont)
+ }
+ }
+ }
+
+ /**
+ * Darkmode
+ */
+ var isFontAwesomeV5 = GLOBAL_CONFIG.isFontAwesomeV5
+ var $darkModeButtom = $('#darkmode')
+ if (typeof autoChangeMode !== 'undefined') {
+ document.documentElement.getAttribute('data-theme') === 'dark' ? changeLightIcon() : changeDarkIcon()
+ }
+
+ function changeLightIcon () {
+ isFontAwesomeV5 ? $darkModeButtom.removeClass('fa-moon').addClass('fa-sun') : $darkModeButtom.removeClass('fa-moon-o').addClass('fa-sun-o')
+ }
+
+ function changeDarkIcon () {
+ isFontAwesomeV5 ? $darkModeButtom.removeClass('fa-sun').addClass('fa-moon') : $darkModeButtom.removeClass('fa-sun-o').addClass('fa-moon-o')
+ }
+
+ function switchReadMode () {
+ var nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
+ if (nowMode === 'light') {
+ changeLightIcon()
+ activateDarkMode()
+ Cookies.set('theme', 'dark', { expires: 2 })
+ if (isSnackbar) snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
+ } else {
+ changeDarkIcon()
+ activateLightMode()
+ Cookies.set('theme', 'light', { expires: 2 })
+ if (isSnackbar) snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
+ }
+ }
+
+ $darkModeButtom.click(function () {
+ switchReadMode()
+ try {
+ utterancesTheme()
+ } catch (e) {
+ return false
+ }
+ })
+
+ /**
+ * 網頁運行時間
+ */
+ if (GLOBAL_CONFIG.runtime) {
+ // get user config
+ var $runtimeCount = $('#webinfo-runtime-count')
+ var startDate = $runtimeCount.attr('start_date')
+ var showDateTime = function () {
+ var BirthDay = new Date(startDate)
+ var today = new Date()
+ var timeold = (today.getTime() - BirthDay.getTime())
+ var daysold = Math.floor(timeold / (24 * 60 * 60 * 1000))
+ $runtimeCount.text(daysold + ' ' + GLOBAL_CONFIG.runtime_unit)
+ }
+ var interval
+ showDateTime()
+ clearInterval(interval)
+ interval = setInterval(showDateTime, 10000)
+ }
+
+ if (GLOBAL_CONFIG.baiduPush) {
+ (function () {
+ var bp = document.createElement('script')
+ var curProtocol = window.location.protocol.split(':')[0]
+ if (curProtocol === 'https') {
+ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'
+ } else {
+ bp.src = 'http://push.zhanzhang.baidu.com/push.js'
+ }
+ var s = document.getElementsByTagName('script')[0]
+ s.parentNode.insertBefore(bp, s)
+ })()
+ }
+
+ /**
+ * tag-hide
+ */
+ var $hideInline = $('.hide-button')
+ $hideInline.on('click', function (e) {
+ e.preventDefault()
+ $(this).hide()
+ var $hideContent = $(this).next('.hide-content')
+ $hideContent.show()
+ $hideContent.find('.justified-gallery').justifiedGallery({
+ rowHeight: 220,
+ margins: 4
+ })
+ })
+
+ function addPhotoFigcaption () {
+ var images = $('#article-container img')
+ images.each(function (i, o) {
+ var $this = $(o)
+ if ($this.attr('alt')) {
+ var t = $('' + $this.attr('alt') + '
')
+ $this.after(t)
+ }
+ })
+ }
+ if (GLOBAL_CONFIG.isPhotoFigcaption) addPhotoFigcaption()
+})
diff --git a/themes/butterfly/source/js/search/algolia.js b/themes/butterfly/source/js/search/algolia.js
new file mode 100644
index 00000000..8f024599
--- /dev/null
+++ b/themes/butterfly/source/js/search/algolia.js
@@ -0,0 +1,133 @@
+$(function () {
+ $('a.social-icon.search').on('click', function () {
+ $('body').css({ width: '100%', overflow: 'hidden' })
+ $('.search-dialog').css('display', 'block')
+ $('.ais-search-box--input').focus()
+ $('.search-mask').fadeIn()
+ // shortcut: ESC
+ document.addEventListener('keydown', function f (event) {
+ if (event.code === 'Escape') {
+ closeSearch()
+ document.removeEventListener('keydown', f)
+ }
+ })
+ })
+
+ var closeSearch = function () {
+ $('body').css('width', '')
+ $('body').css('overflow', '')
+ $('.search-dialog').css({
+ animation: 'search_close .5s'
+ })
+
+ $('.search-dialog').animate({}, function () {
+ setTimeout(function () {
+ $('.search-dialog').css({
+ animation: '',
+ display: 'none'
+ })
+ }, 500)
+ })
+
+ $('.search-mask').fadeOut()
+ }
+ $('.search-mask, .search-close-button').on('click touchstart', closeSearch)
+
+ var algolia = GLOBAL_CONFIG.algolia
+ var isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName
+ if (!isAlgoliaValid) {
+ return console.error('Algolia setting is invalid!')
+ }
+
+ var search = instantsearch({
+ appId: algolia.appId,
+ apiKey: algolia.apiKey,
+ indexName: algolia.indexName,
+ searchParameters: {
+ hitsPerPage: algolia.hits.per_page || 10
+ },
+ searchFunction: function (helper) {
+ var searchInput = $('#algolia-search-input').find('input')
+
+ if (searchInput.val()) {
+ helper.search()
+ }
+ }
+ })
+
+ search.addWidget(
+ instantsearch.widgets.searchBox({
+ container: '#algolia-search-input',
+ reset: false,
+ magnifier: false,
+ placeholder: GLOBAL_CONFIG.algolia.languages.input_placeholder
+ })
+ )
+ search.addWidget(
+ instantsearch.widgets.hits({
+ container: '#algolia-hits',
+ templates: {
+ item: function (data) {
+ var link = data.permalink ? data.permalink : (GLOBAL_CONFIG.root + data.path)
+ return (
+ '' +
+ data._highlightResult.title.value +
+ ''
+ )
+ },
+ empty: function (data) {
+ return (
+ '' +
+ GLOBAL_CONFIG.algolia.languages.hits_empty.replace(/\$\{query}/, data.query) +
+ '
'
+ )
+ }
+ },
+ cssClasses: {
+ item: 'algolia-hit-item'
+ }
+ })
+ )
+
+ search.addWidget(
+ instantsearch.widgets.stats({
+ container: '#algolia-stats',
+ templates: {
+ body: function (data) {
+ var stats = GLOBAL_CONFIG.algolia.languages.hits_stats
+ .replace(/\$\{hits}/, data.nbHits)
+ .replace(/\$\{time}/, data.processingTimeMS)
+ return (
+ '' + + stats + + '' + + '
' +
+ ''
+ )
+ }
+ }
+ })
+ )
+
+ search.addWidget(
+ instantsearch.widgets.pagination({
+ container: '#algolia-pagination',
+ scrollTo: false,
+ showFirstLast: false,
+ labels: {
+ first: '',
+ last: '',
+ previous: '',
+ next: ''
+ },
+ cssClasses: {
+ root: 'pagination',
+ item: 'pagination-item',
+ link: 'page-number',
+ active: 'current',
+ disabled: 'disabled-item'
+ }
+ })
+ )
+ search.start()
+})
diff --git a/themes/butterfly/source/js/search/local-search.js b/themes/butterfly/source/js/search/local-search.js
new file mode 100644
index 00000000..efcec8ab
--- /dev/null
+++ b/themes/butterfly/source/js/search/local-search.js
@@ -0,0 +1,104 @@
+$(function () {
+ var loadFlag = false
+ $('a.social-icon.search').on('click', function () {
+ $('body').css({ width: '100%', overflow: 'hidden' })
+ $('.search-dialog').css('display', 'block')
+ $('#local-search-input input').focus()
+ $('.search-mask').fadeIn()
+ if (!loadFlag) {
+ search(GLOBAL_CONFIG.localSearch.path)
+ loadFlag = true
+ }
+
+ // shortcut: ESC
+ document.addEventListener('keydown', function f (event) {
+ if (event.code === 'Escape') {
+ closeSearch()
+ document.removeEventListener('keydown', f)
+ }
+ })
+ })
+
+ var closeSearch = function () {
+ $('body').css('width', '')
+ $('body').css('overflow', '')
+ $('.search-dialog').css({
+ animation: 'search_close .5s'
+ })
+
+ $('.search-dialog').animate({}, function () {
+ setTimeout(function () {
+ $('.search-dialog').css({
+ animation: '',
+ display: 'none'
+ })
+ }, 500)
+ })
+
+ $('.search-mask').fadeOut()
+ }
+ $('.search-mask, .search-close-button').on('click touchstart', closeSearch)
+
+ function search (path) {
+ $.ajax({
+ url: GLOBAL_CONFIG.root + path,
+ dataType: 'xml',
+ success: function (xmlResponse) {
+ // get the contents from search data
+ var datas = $('entry', xmlResponse).map(function () {
+ return {
+ title: $('title', this).text(),
+ content: $('content', this).text(),
+ url: $('url', this).text()
+ }
+ }).get()
+ var $input = $('#local-search-input input')[0]
+ var $resultContent = $('#local-hits')[0]
+ $input.addEventListener('input', function () {
+ var str = ''
+ var keywords = this.value.trim().toLowerCase().split(/[\s]+/)
+ $resultContent.innerHTML = ''
+ if (this.value.trim().length <= 0) {
+ $('.local-search-stats__hr').hide()
+ return
+ }
+ var count = 0
+ // perform local searching
+ datas.forEach(function (data) {
+ var isMatch = true
+ var dataTitle = data.title.trim().toLowerCase()
+ var dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase()
+ var dataUrl = data.url
+ var indexTitle = -1
+ var indexContent = -1
+ // only match artiles with not empty titles and contents
+ if (dataTitle !== '' && dataContent !== '') {
+ keywords.forEach(function (keyword, i) {
+ indexTitle = dataTitle.indexOf(keyword)
+ indexContent = dataContent.indexOf(keyword)
+ if (indexTitle < 0 && indexContent < 0) {
+ isMatch = false
+ } else {
+ if (indexContent < 0) {
+ indexContent = 0
+ }
+ }
+ })
+ }
+ // show search results
+ if (isMatch) {
+ str += 'parseInt(c.height)&&(l.overflowY="scroll"):l.overflow="hidden",d.textContent=t.value.substring(0,n),"INPUT"===t.nodeName&&(d.textContent=d.textContent.replace(/\s/g," "));var u=document.createElement("span");u.textContent=t.value.substring(n)||".",d.appendChild(u);var p={top:u.offsetTop+parseInt(c.borderTopWidth),left:u.offsetLeft+parseInt(c.borderLeftWidth)};return i?u.style.backgroundColor="#aaa":document.body.removeChild(d),p}void 0!==t&&void 0!==t.exports?t.exports=n:window.getCaretCoordinates=n}()}])}));
\ No newline at end of file
diff --git a/themes/butterfly/source/js/third-party/canvas-nest.js b/themes/butterfly/source/js/third-party/canvas-nest.js
new file mode 100644
index 00000000..50d3e870
--- /dev/null
+++ b/themes/butterfly/source/js/third-party/canvas-nest.js
@@ -0,0 +1,88 @@
+! function () {
+ var cn = document.getElementById('canvas_nest');
+ var mb = cn.getAttribute("mobile");
+
+ if (mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
+ return;
+ }
+
+ function o(w, v, i) {
+ return w.getAttribute(v) || i
+ }
+
+ function j(i) {
+ return document.getElementsByTagName(i)
+ }
+
+ function l() {
+ var i = j("script"),
+ w = i.length,
+ v = i[w - 1];
+ return {
+ l: w,
+ z: o(v, "zIndex", -1),
+ o: o(v, "opacity", 0.5),
+ c: o(v, "color", "0,0,0"),
+ n: o(v, "count", 99)
+ }
+ }
+
+ function k() {
+ r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+ }
+
+ function b() {
+ e.clearRect(0, 0, r, n);
+ var w = [f].concat(t);
+ var x, v, A, B, z, y;
+ t.forEach(function (i) {
+ i.x += i.xa, i.y += i.ya, i.xa *= i.x > r || i.x < 0 ? -1 : 1, i.ya *= i.y > n || i.y < 0 ? -1 : 1, e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
+ for (v = 0; v < w.length; v++) {
+ x = w[v];
+ if (i !== x && null !== x.x && null !== x.y) {
+ B = i.x - x.x, z = i.y - x.y, y = B * B + z * z;
+ y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())
+ }
+ }
+ w.splice(w.indexOf(i), 1)
+ }), m(b)
+ }
+ var u = document.createElement("canvas"),
+ s = l(),
+ c = "c_n" + s.l,
+ e = u.getContext("2d"),
+ r, n, m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) {
+ window.setTimeout(i, 1000 / 45)
+ },
+ a = Math.random,
+ f = {
+ x: null,
+ y: null,
+ max: 20000
+ };
+ u.id = c;
+ u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
+ j("body")[0].appendChild(u);
+ k(), window.onresize = k;
+ window.onmousemove = function (i) {
+ i = i || window.event, f.x = i.clientX, f.y = i.clientY
+ }, window.onmouseout = function () {
+ f.x = null, f.y = null
+ };
+ for (var t = [], p = 0; s.n > p; p++) {
+ var h = a() * r,
+ g = a() * n,
+ q = 2 * a() - 1,
+ d = 2 * a() - 1;
+ t.push({
+ x: h,
+ y: g,
+ xa: q,
+ ya: d,
+ max: 6000
+ })
+ }
+ setTimeout(function () {
+ b()
+ }, 100)
+}();
\ No newline at end of file
diff --git a/themes/butterfly/source/js/third-party/canvas-ribbon.js b/themes/butterfly/source/js/third-party/canvas-ribbon.js
new file mode 100644
index 00000000..74bce999
--- /dev/null
+++ b/themes/butterfly/source/js/third-party/canvas-ribbon.js
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2016 hustcc
+ * License: MIT
+ * Version: v1.0.1
+ * GitHub: https://github.com/hustcc/ribbon.js
+ **/
+
+!(function () {
+
+ var script = document.getElementById('ribbon');
+ var mb = script.getAttribute("mobile");
+ if (mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
+ return;
+ }
+
+ config = {
+ z: attr(script, 'zIndex', -1), // z-index
+ a: attr(script, 'alpha', 0.6), // alpha
+ s: attr(script, 'size', 90), // size
+ c: attr(script, 'data-click', true) // click-to-change
+ }
+
+
+ function attr (node, attr, default_value) {
+ if (default_value === true) {
+ return node.getAttribute(attr) || default_value
+ }
+ return Number(node.getAttribute(attr)) || default_value
+ }
+
+ var canvas = document.createElement('canvas'),
+ g2d = canvas.getContext('2d'),
+ pr = window.devicePixelRatio || 1,
+ width = window.innerWidth,
+ height = window.innerHeight,
+ f = config.s,
+ q,
+ t,
+ m = Math,
+ r = 0,
+ pi = m.PI * 2,
+ cos = m.cos,
+ random = m.random
+ canvas.width = width * pr
+ canvas.height = height * pr
+ g2d.scale(pr, pr)
+ g2d.globalAlpha = config.a
+ canvas.style.cssText =
+ 'opacity: ' +
+ config.a +
+ ';position:fixed;top:0;left:0;z-index: ' +
+ config.z +
+ ';width:100%;height:100%;pointer-events:none;'
+ // create canvas
+ document.getElementsByTagName('body')[0].appendChild(canvas)
+
+ function redraw () {
+ g2d.clearRect(0, 0, width, height)
+ q = [{ x: 0, y: height * 0.7 + f }, { x: 0, y: height * 0.7 - f }]
+ while (q[1].x < width + f) draw(q[0], q[1])
+ }
+ function draw (i, j) {
+ g2d.beginPath()
+ g2d.moveTo(i.x, i.y)
+ g2d.lineTo(j.x, j.y)
+ var k = j.x + (random() * 2 - 0.25) * f,
+ n = line(j.y)
+ g2d.lineTo(k, n)
+ g2d.closePath()
+ r -= pi / -50
+ g2d.fillStyle =
+ '#' +
+ (
+ ((cos(r) * 127 + 128) << 16) |
+ ((cos(r + pi / 3) * 127 + 128) << 8) |
+ (cos(r + (pi / 3) * 2) * 127 + 128)
+ ).toString(16)
+ g2d.fill()
+ q[0] = q[1]
+ q[1] = { x: k, y: n }
+ }
+ function line (p) {
+ t = p + (random() * 2 - 1.1) * f
+ return t > height || t < 0 ? line(p) : t
+ }
+ if (config.c !== 'false') {
+ document.onclick = redraw
+ document.ontouchstart = redraw
+ }
+ redraw()
+})()
\ No newline at end of file
diff --git a/themes/butterfly/source/js/third-party/click_heart.js b/themes/butterfly/source/js/third-party/click_heart.js
new file mode 100644
index 00000000..21aeef9b
--- /dev/null
+++ b/themes/butterfly/source/js/third-party/click_heart.js
@@ -0,0 +1,73 @@
+!(function(e, t, a) {
+ function r(e) {
+ var a = t.createElement("div");
+ (a.className = "heart"),
+ n.push({
+ el: a,
+ x: e.clientX - 5,
+ y: e.clientY - 5,
+ scale: 1,
+ alpha: 1,
+ color:
+ "rgb(" +
+ ~~(255 * Math.random()) +
+ "," +
+ ~~(255 * Math.random()) +
+ "," +
+ ~~(255 * Math.random()) +
+ ")"
+ }),
+ t.body.appendChild(a);
+ }
+ var n = [];
+ (e.requestAnimationFrame =
+ e.requestAnimationFrame ||
+ e.webkitRequestAnimationFrame ||
+ e.mozRequestAnimationFrame ||
+ e.oRequestAnimationFrame ||
+ e.msRequestAnimationFrame ||
+ function(e) {
+ setTimeout(e, 1e3 / 60);
+ }),
+ (function(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);
+ })(
+ ".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;}"
+ ),
+ (function() {
+ var t = "function" == typeof e.onclick && e.onclick;
+ e.onclick = function(e) {
+ t && t(), r(e);
+ };
+ })(),
+ (function e() {
+ for (var a = 0; a < n.length; a++)
+ n[a].alpha <= 0
+ ? (t.body.removeChild(n[a].el), n.splice(a, 1))
+ : (n[a].y--,
+ (n[a].scale += 0.004),
+ (n[a].alpha -= 0.013),
+ (n[a].el.style.cssText =
+ "left:" +
+ n[a].x +
+ "px;top:" +
+ n[a].y +
+ "px;opacity:" +
+ n[a].alpha +
+ ";transform:scale(" +
+ n[a].scale +
+ "," +
+ n[a].scale +
+ ") rotate(45deg);background:" +
+ n[a].color +
+ ";z-index:99999"));
+ requestAnimationFrame(e);
+ })();
+})(window, document);
diff --git a/themes/butterfly/source/js/third-party/fireworks.js b/themes/butterfly/source/js/third-party/fireworks.js
new file mode 100644
index 00000000..91993a71
--- /dev/null
+++ b/themes/butterfly/source/js/third-party/fireworks.js
@@ -0,0 +1,129 @@
+var canvasEl = document.querySelector('.fireworks')
+if (canvasEl) {
+ var ctx = canvasEl.getContext('2d')
+ var numberOfParticules = 30
+ var pointerX = 0
+ var pointerY = 0
+ // var tap = ('ontouchstart' in window || navigator.msMaxTouchPoints) ? 'touchstart' : 'mousedown'
+ // Fixed the mobile scroll
+ var tap = 'mousedown'
+ var colors = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']
+
+ var setCanvasSize = debounce(function () {
+ canvasEl.width = window.innerWidth
+ canvasEl.height = window.innerHeight
+ canvasEl.style.width = window.innerWidth + 'px'
+ canvasEl.style.height = window.innerHeight + 'px'
+ canvasEl.getContext('2d').scale(1, 1)
+ }, 500)
+
+ var render = anime({
+ duration: Infinity,
+ update: function () {
+ ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
+ }
+ })
+
+ document.addEventListener(tap, function (e) {
+ if (e.target.id !== 'sidebar' && e.target.id !== 'toggle-sidebar' && e.target.nodeName !== 'A' && e.target.nodeName !== 'IMG') {
+ render.play()
+ updateCoords(e)
+ animateParticules(pointerX, pointerY)
+ }
+ }, false)
+
+ setCanvasSize()
+ window.addEventListener('resize', setCanvasSize, false)
+}
+
+function updateCoords (e) {
+ pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left
+ pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top
+}
+
+function setParticuleDirection (p) {
+ var angle = anime.random(0, 360) * Math.PI / 180
+ var value = anime.random(50, 180)
+ var radius = [-1, 1][anime.random(0, 1)] * value
+ return {
+ x: p.x + radius * Math.cos(angle),
+ y: p.y + radius * Math.sin(angle)
+ }
+}
+
+function createParticule (x, y) {
+ var p = {}
+ p.x = x
+ p.y = y
+ p.color = colors[anime.random(0, colors.length - 1)]
+ p.radius = anime.random(16, 32)
+ p.endPos = setParticuleDirection(p)
+ p.draw = function () {
+ ctx.beginPath()
+ ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
+ ctx.fillStyle = p.color
+ ctx.fill()
+ }
+ return p
+}
+
+function createCircle (x, y) {
+ var p = {}
+ p.x = x
+ p.y = y
+ p.color = '#F00'
+ p.radius = 0.1
+ p.alpha = 0.5
+ p.lineWidth = 6
+ p.draw = function () {
+ ctx.globalAlpha = p.alpha
+ ctx.beginPath()
+ ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
+ ctx.lineWidth = p.lineWidth
+ ctx.strokeStyle = p.color
+ ctx.stroke()
+ ctx.globalAlpha = 1
+ }
+ return p
+}
+
+function renderParticule (anim) {
+ for (var i = 0; i < anim.animatables.length; i++) {
+ anim.animatables[i].target.draw()
+ }
+}
+
+function animateParticules (x, y) {
+ var circle = createCircle(x, y)
+ var particules = []
+ for (var i = 0; i < numberOfParticules; i++) {
+ particules.push(createParticule(x, y))
+ }
+ anime.timeline().add({
+ targets: particules,
+ x: function (p) {
+ return p.endPos.x
+ },
+ y: function (p) {
+ return p.endPos.y
+ },
+ radius: 0.1,
+ duration: anime.random(1200, 1800),
+ easing: 'easeOutExpo',
+ update: renderParticule
+ })
+ .add({
+ targets: circle,
+ radius: anime.random(80, 160),
+ lineWidth: 0,
+ alpha: {
+ value: 0,
+ easing: 'linear',
+ duration: anime.random(600, 800)
+ },
+ duration: anime.random(1200, 1800),
+ easing: 'easeOutExpo',
+ update: renderParticule,
+ offset: 0
+ })
+}
\ No newline at end of file
diff --git a/themes/butterfly/source/js/third-party/piao.js b/themes/butterfly/source/js/third-party/piao.js
new file mode 100644
index 00000000..1e020baf
--- /dev/null
+++ b/themes/butterfly/source/js/third-party/piao.js
@@ -0,0 +1,334 @@
+
+ (function (name, factory) {
+ if (typeof window === "object") {
+ window[name] = factory()
+ }
+ })("Ribbons", function () {
+ var _w = window,
+ _b = document.body,
+ _d = document.documentElement;
+ var random = function () {
+ if (arguments.length === 1) {
+ if (Array.isArray(arguments[0])) {
+ var index = Math.round(random(0, arguments[0].length - 1));
+ return arguments[0][index]
+ }
+ return random(0, arguments[0])
+ } else if (arguments.length === 2) {
+ return Math.random() * (arguments[1] - arguments[0]) + arguments[0]
+ }
+ return 0
+ };
+ var screenInfo = function (e) {
+ var width = Math.max(0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0),
+ height = Math.max(0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0),
+ scrollx = Math.max(0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0) - (_d.clientLeft || 0),
+ scrolly = Math.max(0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0) - (_d.clientTop || 0);
+ return {
+ width: width,
+ height: height,
+ ratio: width / height,
+ centerx: width / 2,
+ centery: height / 2,
+ scrollx: scrollx,
+ scrolly: scrolly
+ }
+ };
+ var mouseInfo = function (e) {
+ var screen = screenInfo(e),
+ mousex = e ? Math.max(0, e.pageX || e.clientX || 0) : 0,
+ mousey = e ? Math.max(0, e.pageY || e.clientY || 0) : 0;
+ return {
+ mousex: mousex,
+ mousey: mousey,
+ centerx: mousex - screen.width / 2,
+ centery: mousey - screen.height / 2
+ }
+ };
+ var Point = function (x, y) {
+ this.x = 0;
+ this.y = 0;
+ this.set(x, y)
+ };
+ Point.prototype = {
+ constructor: Point,
+ set: function (x, y) {
+ this.x = x || 0;
+ this.y = y || 0
+ },
+ copy: function (point) {
+ this.x = point.x || 0;
+ this.y = point.y || 0;
+ return this
+ },
+ multiply: function (x, y) {
+ this.x *= x || 1;
+ this.y *= y || 1;
+ return this
+ },
+ divide: function (x, y) {
+ this.x /= x || 1;
+ this.y /= y || 1;
+ return this
+ },
+ add: function (x, y) {
+ this.x += x || 0;
+ this.y += y || 0;
+ return this
+ },
+ subtract: function (x, y) {
+ this.x -= x || 0;
+ this.y -= y || 0;
+ return this
+ },
+ clampX: function (min, max) {
+ this.x = Math.max(min, Math.min(this.x, max));
+ return this
+ },
+ clampY: function (min, max) {
+ this.y = Math.max(min, Math.min(this.y, max));
+ return this
+ },
+ flipX: function () {
+ this.x *= -1;
+ return this
+ },
+ flipY: function () {
+ this.y *= -1;
+ return this
+ }
+ };
+ var Factory = function (options) {
+ this._canvas = null;
+ this._context = null;
+ this._sto = null;
+ this._width = 0;
+ this._height = 0;
+ this._scroll = 0;
+ this._ribbons = [];
+ this._options = {
+ colorSaturation: "80%",
+ colorBrightness: "60%",
+ colorAlpha: 0.65,
+ colorCycleSpeed: 6,
+ verticalPosition: "center",
+ horizontalSpeed: 150,
+ ribbonCount: 5,
+ strokeSize: 5,
+ parallaxAmount: -0.5,
+ animateSections: true
+ };
+ this._onDraw = this._onDraw.bind(this);
+ this._onResize = this._onResize.bind(this);
+ this._onScroll = this._onScroll.bind(this);
+ this.setOptions(options);
+ this.init()
+ };
+ Factory.prototype = {
+ constructor: Factory,
+ setOptions: function (options) {
+ if (typeof options === "object") {
+ for (var key in options) {
+ if (options.hasOwnProperty(key)) {
+ this._options[key] = options[key]
+ }
+ }
+ }
+ },
+ init: function () {
+ try {
+ this._canvas = document.createElement("canvas");
+ this._canvas.style["display"] = "block";
+ this._canvas.style["position"] = "fixed";
+ this._canvas.style["margin"] = "0";
+ this._canvas.style["padding"] = "0";
+ this._canvas.style["border"] = "0";
+ this._canvas.style["outline"] = "0";
+ this._canvas.style["left"] = "0";
+ this._canvas.style["top"] = "0";
+ this._canvas.style["width"] = "100%";
+ this._canvas.style["height"] = "100%";
+ this._canvas.style["z-index"] = "-1";
+ this._onResize();
+ this._context = this._canvas.getContext("2d");
+ this._context.clearRect(0, 0, this._width, this._height);
+ this._context.globalAlpha = this._options.colorAlpha;
+ window.addEventListener("resize", this._onResize);
+ window.addEventListener("scroll", this._onScroll);
+ document.body.appendChild(this._canvas)
+ } catch (e) {
+ console.warn("Canvas Context Error: " + e.toString());
+ return
+ }
+ this._onDraw()
+ },
+ addRibbon: function () {
+ var dir = Math.round(random(1, 9)) > 5 ? "right" : "left",
+ stop = 1000,
+ hide = 200,
+ min = 0 - hide,
+ max = this._width + hide,
+ movex = 0,
+ movey = 0,
+ startx = dir === "right" ? min : max,
+ starty = Math.round(random(0, this._height));
+ if (/^(top|min)$/i.test(this._options.verticalPosition)) {
+ starty = 0 + hide
+ } else if (/^(middle|center)$/i.test(this._options.verticalPosition)) {
+ starty = this._height / 2
+ } else if (/^(bottom|max)$/i.test(this._options.verticalPosition)) {
+ starty = this._height - hide
+ }
+ var ribbon = [],
+ point1 = new Point(startx, starty),
+ point2 = new Point(startx, starty),
+ point3 = null,
+ color = Math.round(random(0, 360)),
+ delay = 0;
+ while (true) {
+ if (stop <= 0) break;
+ stop--;
+ movex = Math.round((Math.random() * 1 - 0.2) * this._options.horizontalSpeed);
+ movey = Math.round((Math.random() * 1 - 0.5) * (this._height * 0.25));
+ point3 = new Point();
+ point3.copy(point2);
+ if (dir === "right") {
+ point3.add(movex, movey);
+ if (point2.x >= max) break
+ } else if (dir === "left") {
+ point3.subtract(movex, movey);
+ if (point2.x <= min) break
+ }
+ ribbon.push({
+ point1: new Point(point1.x, point1.y),
+ point2: new Point(point2.x, point2.y),
+ point3: point3,
+ color: color,
+ delay: delay,
+ dir: dir,
+ alpha: 0,
+ phase: 0
+ });
+ point1.copy(point2);
+ point2.copy(point3);
+ delay += 4;
+ color += this._options.colorCycleSpeed
+ }
+ this._ribbons.push(ribbon)
+ },
+ _drawRibbonSection: function (section) {
+ if (section) {
+ if (section.phase >= 1 && section.alpha <= 0) {
+ return true
+ }
+ if (section.delay <= 0) {
+ section.phase += 0.02;
+ section.alpha = Math.sin(section.phase) * 1;
+ section.alpha = section.alpha <= 0 ? 0 : section.alpha;
+ section.alpha = section.alpha >= 1 ? 1 : section.alpha;
+ if (this._options.animateSections) {
+ var mod = Math.sin(1 + section.phase * Math.PI / 2) * 0.1;
+ if (section.dir === "right") {
+ section.point1.add(mod, 0);
+ section.point2.add(mod, 0);
+ section.point3.add(mod, 0)
+ } else {
+ section.point1.subtract(mod, 0);
+ section.point2.subtract(mod, 0);
+ section.point3.subtract(mod, 0)
+ }
+ section.point1.add(0, mod);
+ section.point2.add(0, mod);
+ section.point3.add(0, mod)
+ }
+ } else {
+ section.delay -= 0.5
+ }
+ var s = this._options.colorSaturation,
+ l = this._options.colorBrightness,
+ c = "hsla(" + section.color + ", " + s + ", " + l + ", " + section.alpha + " )";
+ this._context.save();
+ if (this._options.parallaxAmount !== 0) {
+ this._context.translate(0, this._scroll * this._options.parallaxAmount)
+ }
+ this._context.beginPath();
+ this._context.moveTo(section.point1.x, section.point1.y);
+ this._context.lineTo(section.point2.x, section.point2.y);
+ this._context.lineTo(section.point3.x, section.point3.y);
+ this._context.fillStyle = c;
+ this._context.fill();
+ if (this._options.strokeSize > 0) {
+ this._context.lineWidth = this._options.strokeSize;
+ this._context.strokeStyle = c;
+ this._context.lineCap = "round";
+ this._context.stroke()
+ }
+ this._context.restore()
+ }
+ return false
+ },
+ _onDraw: function () {
+ for (var i = 0, t = this._ribbons.length; i < t; ++i) {
+ if (!this._ribbons[i]) {
+ this._ribbons.splice(i, 1)
+ }
+ }
+ this._context.clearRect(0, 0, this._width, this._height);
+ for (var a = 0; a < this._ribbons.length; ++a) {
+ var ribbon = this._ribbons[a],
+ numSections = ribbon.length,
+ numDone = 0;
+ for (var b = 0; b < numSections; ++b) {
+ if (this._drawRibbonSection(ribbon[b])) {
+ numDone++
+ }
+ }
+ if (numDone >= numSections) {
+ this._ribbons[a] = null
+ }
+ }
+ if (this._ribbons.length < this._options.ribbonCount) {
+ this.addRibbon()
+ }
+ requestAnimationFrame(this._onDraw)
+ },
+ _onResize: function (e) {
+ var screen = screenInfo(e);
+ this._width = screen.width;
+ this._height = screen.height;
+ if (this._canvas) {
+ this._canvas.width = this._width;
+ this._canvas.height = this._height;
+ if (this._context) {
+ this._context.globalAlpha = this._options.colorAlpha
+ }
+ }
+ },
+ _onScroll: function (e) {
+ var screen = screenInfo(e);
+ this._scroll = screen.scrolly
+ }
+ };
+ return Factory
+ });
+
+ var cn = document.getElementById('ribbon_piao');
+ var mb = cn.getAttribute("mobile");
+
+ if ( mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
+
+ } else {
+ new Ribbons({
+ colorSaturation: "60%",
+ colorBrightness: "50%",
+ colorAlpha: 0.5,
+ colorCycleSpeed: 5,
+ verticalPosition: "random",
+ horizontalSpeed: 200,
+ ribbonCount: 3,
+ strokeSize: 0,
+ parallaxAmount: -0.2,
+ animateSections: true
+ });
+ }
+
diff --git a/themes/butterfly/source/js/tw_cn.js b/themes/butterfly/source/js/tw_cn.js
new file mode 100644
index 00000000..660bfb8d
--- /dev/null
+++ b/themes/butterfly/source/js/tw_cn.js
@@ -0,0 +1,123 @@
+var translate = GLOBAL_CONFIG.translate;
+var Snackbar_tl = GLOBAL_CONFIG.Snackbar;
+
+var defaultEncoding = translate.defaultEncoding; // 網站默認語言，1: 繁體中文, 2: 簡體中文
+var translateDelay = translate.translateDelay; //延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0
+var cookieDomain = translate.cookieDomain; //更改為你的博客網址
+var msgToTraditionalChinese = translate.msgToTraditionalChinese; //此處可以更改為你想要顯示的文字
+var msgToSimplifiedChinese = translate.msgToSimplifiedChinese; //同上，但兩處均不建議更改
+var translateButtonId = "translateLink"; //默認互換id
+var currentEncoding = defaultEncoding;
+var targetEncodingCookie = "targetEncoding" + cookieDomain.replace(/\./g, "");
+var targetEncoding =
+ Cookies.get(targetEncodingCookie) == null
+ ? defaultEncoding
+ : Cookies.get(targetEncodingCookie);
+var translateButtonObject;
+var isSnackbar = GLOBAL_CONFIG.Snackbar !== undefined ? true : false;
+
+function translateText(txt) {
+ if (txt == "" || txt == null) return "";
+ if (currentEncoding == 1 && targetEncoding == 2) return Simplized(txt);
+ else if (currentEncoding == 2 && targetEncoding == 1)
+ return Traditionalized(txt);
+ else return txt;
+}
+function translateBody(fobj) {
+ if (typeof fobj == "object") var objs = fobj.childNodes;
+ else var objs = document.body.childNodes;
+ for (var i = 0; i < objs.length; i++) {
+ var obj = objs.item(i);
+ if (
+ "||BR|HR|TEXTAREA|".indexOf("|" + obj.tagName + "|") > 0 ||
+ obj == translateButtonObject
+ )
+ continue;
+ if (obj.title != "" && obj.title != null)
+ obj.title = translateText(obj.title);
+ if (obj.alt != "" && obj.alt != null) obj.alt = translateText(obj.alt);
+ if (
+ obj.tagName == "INPUT" &&
+ obj.value != "" &&
+ obj.type != "text" &&
+ obj.type != "hidden"
+ )
+ obj.value = translateText(obj.value);
+ if (obj.nodeType == 3) obj.data = translateText(obj.data);
+ else translateBody(obj);
+ }
+}
+function translatePage() {
+ if (targetEncoding == 1) {
+ currentEncoding = 1;
+ targetEncoding = 2;
+ translateButtonObject.innerHTML = msgToTraditionalChinese;
+ Cookies.set(targetEncodingCookie, targetEncoding, {
+ expires: 7,
+ path: "/"
+ });
+ translateBody();
+ if (isSnackbar) snackbarShow(Snackbar_tl.cht_to_chs);
+ } else if (targetEncoding == 2) {
+ currentEncoding = 2;
+ targetEncoding = 1;
+ translateButtonObject.innerHTML = msgToSimplifiedChinese;
+ Cookies.set(targetEncodingCookie, targetEncoding, {
+ expires: 7,
+ path: "/"
+ });
+ translateBody();
+ if (isSnackbar) snackbarShow(Snackbar_tl.chs_to_cht);
+ }
+}
+function JTPYStr() {
+ return "万与丑专业丛东丝丢两严丧个丬丰临为丽举么义乌乐乔习乡书买乱争于亏云亘亚产亩亲亵亸亿仅从仑仓仪们价众优伙会伛伞伟传伤伥伦伧伪伫体余佣佥侠侣侥侦侧侨侩侪侬俣俦俨俩俪俭债倾偬偻偾偿傥傧储傩儿兑兖党兰关兴兹养兽冁内冈册写军农冢冯冲决况冻净凄凉凌减凑凛几凤凫凭凯击凼凿刍划刘则刚创删别刬刭刽刿剀剂剐剑剥剧劝办务劢动励劲劳势勋勐勚匀匦匮区医华协单卖卢卤卧卫却卺厂厅历厉压厌厍厕厢厣厦厨厩厮县参叆叇双发变叙叠叶号叹叽吁后吓吕吗吣吨听启吴呒呓呕呖呗员呙呛呜咏咔咙咛咝咤咴咸哌响哑哒哓哔哕哗哙哜哝哟唛唝唠唡唢唣唤唿啧啬啭啮啰啴啸喷喽喾嗫呵嗳嘘嘤嘱噜噼嚣嚯团园囱围囵国图圆圣圹场坂坏块坚坛坜坝坞坟坠垄垅垆垒垦垧垩垫垭垯垱垲垴埘埙埚埝埯堑堕塆墙壮声壳壶壸处备复够头夸夹夺奁奂奋奖奥妆妇妈妩妪妫姗姜娄娅娆娇娈娱娲娴婳婴婵婶媪嫒嫔嫱嬷孙学孪宁宝实宠审宪宫宽宾寝对寻导寿将尔尘尧尴尸尽层屃屉届属屡屦屿岁岂岖岗岘岙岚岛岭岳岽岿峃峄峡峣峤峥峦崂崃崄崭嵘嵚嵛嵝嵴巅巩巯币帅师帏帐帘帜带帧帮帱帻帼幂幞干并广庄庆庐庑库应庙庞废庼廪开异弃张弥弪弯弹强归当录彟彦彻径徕御忆忏忧忾怀态怂怃怄怅怆怜总怼怿恋恳恶恸恹恺恻恼恽悦悫悬悭悯惊惧惨惩惫惬惭惮惯愍愠愤愦愿慑慭憷懑懒懔戆戋戏戗战戬户扎扑扦执扩扪扫扬扰抚抛抟抠抡抢护报担拟拢拣拥拦拧拨择挂挚挛挜挝挞挟挠挡挢挣挤挥挦捞损捡换捣据捻掳掴掷掸掺掼揸揽揿搀搁搂搅携摄摅摆摇摈摊撄撑撵撷撸撺擞攒敌敛数斋斓斗斩断无旧时旷旸昙昼昽显晋晒晓晔晕晖暂暧札术朴机杀杂权条来杨杩杰极构枞枢枣枥枧枨枪枫枭柜柠柽栀栅标栈栉栊栋栌栎栏树栖样栾桊桠桡桢档桤桥桦桧桨桩梦梼梾检棂椁椟椠椤椭楼榄榇榈榉槚槛槟槠横樯樱橥橱橹橼檐檩欢欤欧歼殁殇残殒殓殚殡殴毁毂毕毙毡毵氇气氢氩氲汇汉污汤汹沓沟没沣沤沥沦沧沨沩沪沵泞泪泶泷泸泺泻泼泽泾洁洒洼浃浅浆浇浈浉浊测浍济浏浐浑浒浓浔浕涂涌涛涝涞涟涠涡涢涣涤润涧涨涩淀渊渌渍渎渐渑渔渖渗温游湾湿溃溅溆溇滗滚滞滟滠满滢滤滥滦滨滩滪漤潆潇潋潍潜潴澜濑濒灏灭灯灵灾灿炀炉炖炜炝点炼炽烁烂烃烛烟烦烧烨烩烫烬热焕焖焘煅煳熘爱爷牍牦牵牺犊犟状犷犸犹狈狍狝狞独狭狮狯狰狱狲猃猎猕猡猪猫猬献獭玑玙玚玛玮环现玱玺珉珏珐珑珰珲琎琏琐琼瑶瑷璇璎瓒瓮瓯电画畅畲畴疖疗疟疠疡疬疮疯疱疴痈痉痒痖痨痪痫痴瘅瘆瘗瘘瘪瘫瘾瘿癞癣癫癯皑皱皲盏盐监盖盗盘眍眦眬着睁睐睑瞒瞩矫矶矾矿砀码砖砗砚砜砺砻砾础硁硅硕硖硗硙硚确硷碍碛碜碱碹磙礼祎祢祯祷祸禀禄禅离秃秆种积称秽秾稆税稣稳穑穷窃窍窑窜窝窥窦窭竖竞笃笋笔笕笺笼笾筑筚筛筜筝筹签简箓箦箧箨箩箪箫篑篓篮篱簖籁籴类籼粜粝粤粪粮糁糇紧絷纟纠纡红纣纤纥约级纨纩纪纫纬纭纮纯纰纱纲纳纴纵纶纷纸纹纺纻纼纽纾线绀绁绂练组绅细织终绉绊绋绌绍绎经绐绑绒结绔绕绖绗绘给绚绛络绝绞统绠绡绢绣绤绥绦继绨绩绪绫绬续绮绯绰绱绲绳维绵绶绷绸绹绺绻综绽绾绿缀缁缂缃缄缅缆缇缈缉缊缋缌缍缎缏缐缑缒缓缔缕编缗缘缙缚缛缜缝缞缟缠缡缢缣缤缥缦缧缨缩缪缫缬缭缮缯缰缱缲缳缴缵罂网罗罚罢罴羁羟羡翘翙翚耢耧耸耻聂聋职聍联聩聪肃肠肤肷肾肿胀胁胆胜胧胨胪胫胶脉脍脏脐脑脓脔脚脱脶脸腊腌腘腭腻腼腽腾膑臜舆舣舰舱舻艰艳艹艺节芈芗芜芦苁苇苈苋苌苍苎苏苘苹茎茏茑茔茕茧荆荐荙荚荛荜荞荟荠荡荣荤荥荦荧荨荩荪荫荬荭荮药莅莜莱莲莳莴莶获莸莹莺莼萚萝萤营萦萧萨葱蒇蒉蒋蒌蓝蓟蓠蓣蓥蓦蔷蔹蔺蔼蕲蕴薮藁藓虏虑虚虫虬虮虽虾虿蚀蚁蚂蚕蚝蚬蛊蛎蛏蛮蛰蛱蛲蛳蛴蜕蜗蜡蝇蝈蝉蝎蝼蝾螀螨蟏衅衔补衬衮袄袅袆袜袭袯装裆裈裢裣裤裥褛褴襁襕见观觃规觅视觇览觉觊觋觌觍觎觏觐觑觞触觯詟誉誊讠计订讣认讥讦讧讨让讪讫训议讯记讱讲讳讴讵讶讷许讹论讻讼讽设访诀证诂诃评诅识诇诈诉诊诋诌词诎诏诐译诒诓诔试诖诗诘诙诚诛诜话诞诟诠诡询诣诤该详诧诨诩诪诫诬语诮误诰诱诲诳说诵诶请诸诹诺读诼诽课诿谀谁谂调谄谅谆谇谈谊谋谌谍谎谏谐谑谒谓谔谕谖谗谘谙谚谛谜谝谞谟谠谡谢谣谤谥谦谧谨谩谪谫谬谭谮谯谰谱谲谳谴谵谶谷豮贝贞负贠贡财责贤败账货质贩贪贫贬购贮贯贰贱贲贳贴贵贶贷贸费贺贻贼贽贾贿赀赁赂赃资赅赆赇赈赉赊赋赌赍赎赏赐赑赒赓赔赕赖赗赘赙赚赛赜赝赞赟赠赡赢赣赪赵赶趋趱趸跃跄跖跞践跶跷跸跹跻踊踌踪踬踯蹑蹒蹰蹿躏躜躯车轧轨轩轪轫转轭轮软轰轱轲轳轴轵轶轷轸轹轺轻轼载轾轿辀辁辂较辄辅辆辇辈辉辊辋辌辍辎辏辐辑辒输辔辕辖辗辘辙辚辞辩辫边辽达迁过迈运还这进远违连迟迩迳迹适选逊递逦逻遗遥邓邝邬邮邹邺邻郁郄郏郐郑郓郦郧郸酝酦酱酽酾酿释里鉅鉴銮錾钆钇针钉钊钋钌钍钎钏钐钑钒钓钔钕钖钗钘钙钚钛钝钞钟钠钡钢钣钤钥钦钧钨钩钪钫钬钭钮钯钰钱钲钳钴钵钶钷钸钹钺钻钼钽钾钿铀铁铂铃铄铅铆铈铉铊铋铍铎铏铐铑铒铕铗铘铙铚铛铜铝铞铟铠铡铢铣铤铥铦铧铨铪铫铬铭铮铯铰铱铲铳铴铵银铷铸铹铺铻铼铽链铿销锁锂锃锄锅锆锇锈锉锊锋锌锍锎锏锐锑锒锓锔锕锖锗错锚锜锞锟锠锡锢锣锤锥锦锨锩锫锬锭键锯锰锱锲锳锴锵锶锷锸锹锺锻锼锽锾锿镀镁镂镃镆镇镈镉镊镌镍镎镏镐镑镒镕镖镗镙镚镛镜镝镞镟镠镡镢镣镤镥镦镧镨镩镪镫镬镭镮镯镰镱镲镳镴镶长门闩闪闫闬闭问闯闰闱闲闳间闵闶闷闸闹闺闻闼闽闾闿阀阁阂阃阄阅阆阇阈阉阊阋阌阍阎阏阐阑阒阓阔阕阖阗阘阙阚阛队阳阴阵阶际陆陇陈陉陕陧陨险随隐隶隽难雏雠雳雾霁霉霭靓静靥鞑鞒鞯鞴韦韧韨韩韪韫韬韵页顶顷顸项顺须顼顽顾顿颀颁颂颃预颅领颇颈颉颊颋颌颍颎颏颐频颒颓颔颕颖颗题颙颚颛颜额颞颟颠颡颢颣颤颥颦颧风飏飐飑飒飓飔飕飖飗飘飙飚飞飨餍饤饥饦饧饨饩饪饫饬饭饮饯饰饱饲饳饴饵饶饷饸饹饺饻饼饽饾饿馀馁馂馃馄馅馆馇馈馉馊馋馌馍馎馏馐馑馒馓馔馕马驭驮驯驰驱驲驳驴驵驶驷驸驹驺驻驼驽驾驿骀骁骂骃骄骅骆骇骈骉骊骋验骍骎骏骐骑骒骓骔骕骖骗骘骙骚骛骜骝骞骟骠骡骢骣骤骥骦骧髅髋髌鬓魇魉鱼鱽鱾鱿鲀鲁鲂鲄鲅鲆鲇鲈鲉鲊鲋鲌鲍鲎鲏鲐鲑鲒鲓鲔鲕鲖鲗鲘鲙鲚鲛鲜鲝鲞鲟鲠鲡鲢鲣鲤鲥鲦鲧鲨鲩鲪鲫鲬鲭鲮鲯鲰鲱鲲鲳鲴鲵鲶鲷鲸鲹鲺鲻鲼鲽鲾鲿鳀鳁鳂鳃鳄鳅鳆鳇鳈鳉鳊鳋鳌鳍鳎鳏鳐鳑鳒鳓鳔鳕鳖鳗鳘鳙鳛鳜鳝鳞鳟鳠鳡鳢鳣鸟鸠鸡鸢鸣鸤鸥鸦鸧鸨鸩鸪鸫鸬鸭鸮鸯鸰鸱鸲鸳鸴鸵鸶鸷鸸鸹鸺鸻鸼鸽鸾鸿鹀鹁鹂鹃鹄鹅鹆鹇鹈鹉鹊鹋鹌鹍鹎鹏鹐鹑鹒鹓鹔鹕鹖鹗鹘鹚鹛鹜鹝鹞鹟鹠鹡鹢鹣鹤鹥鹦鹧鹨鹩鹪鹫鹬鹭鹯鹰鹱鹲鹳鹴鹾麦麸黄黉黡黩黪黾";
+}
+function FTPYStr() {
+ return "萬與醜專業叢東絲丟兩嚴喪個爿豐臨為麗舉麼義烏樂喬習鄉書買亂爭於虧雲亙亞產畝親褻嚲億僅從侖倉儀們價眾優夥會傴傘偉傳傷倀倫傖偽佇體餘傭僉俠侶僥偵側僑儈儕儂俁儔儼倆儷儉債傾傯僂僨償儻儐儲儺兒兌兗黨蘭關興茲養獸囅內岡冊寫軍農塚馮衝決況凍淨淒涼淩減湊凜幾鳳鳧憑凱擊氹鑿芻劃劉則剛創刪別剗剄劊劌剴劑剮劍剝劇勸辦務勱動勵勁勞勢勳猛勩勻匭匱區醫華協單賣盧鹵臥衛卻巹廠廳曆厲壓厭厙廁廂厴廈廚廄廝縣參靉靆雙發變敘疊葉號歎嘰籲後嚇呂嗎唚噸聽啟吳嘸囈嘔嚦唄員咼嗆嗚詠哢嚨嚀噝吒噅鹹呱響啞噠嘵嗶噦嘩噲嚌噥喲嘜嗊嘮啢嗩唕喚呼嘖嗇囀齧囉嘽嘯噴嘍嚳囁嗬噯噓嚶囑嚕劈囂謔團園囪圍圇國圖圓聖壙場阪壞塊堅壇壢壩塢墳墜壟壟壚壘墾坰堊墊埡墶壋塏堖塒塤堝墊垵塹墮壪牆壯聲殼壺壼處備複夠頭誇夾奪奩奐奮獎奧妝婦媽嫵嫗媯姍薑婁婭嬈嬌孌娛媧嫻嫿嬰嬋嬸媼嬡嬪嬙嬤孫學孿寧寶實寵審憲宮寬賓寢對尋導壽將爾塵堯尷屍盡層屭屜屆屬屢屨嶼歲豈嶇崗峴嶴嵐島嶺嶽崠巋嶨嶧峽嶢嶠崢巒嶗崍嶮嶄嶸嶔崳嶁脊巔鞏巰幣帥師幃帳簾幟帶幀幫幬幘幗冪襆幹並廣莊慶廬廡庫應廟龐廢廎廩開異棄張彌弳彎彈強歸當錄彠彥徹徑徠禦憶懺憂愾懷態慫憮慪悵愴憐總懟懌戀懇惡慟懨愷惻惱惲悅愨懸慳憫驚懼慘懲憊愜慚憚慣湣慍憤憒願懾憖怵懣懶懍戇戔戲戧戰戩戶紮撲扡執擴捫掃揚擾撫拋摶摳掄搶護報擔擬攏揀擁攔擰撥擇掛摯攣掗撾撻挾撓擋撟掙擠揮撏撈損撿換搗據撚擄摑擲撣摻摜摣攬撳攙擱摟攪攜攝攄擺搖擯攤攖撐攆擷擼攛擻攢敵斂數齋斕鬥斬斷無舊時曠暘曇晝曨顯晉曬曉曄暈暉暫曖劄術樸機殺雜權條來楊榪傑極構樅樞棗櫪梘棖槍楓梟櫃檸檉梔柵標棧櫛櫳棟櫨櫟欄樹棲樣欒棬椏橈楨檔榿橋樺檜槳樁夢檮棶檢欞槨櫝槧欏橢樓欖櫬櫚櫸檟檻檳櫧橫檣櫻櫫櫥櫓櫞簷檁歡歟歐殲歿殤殘殞殮殫殯毆毀轂畢斃氈毿氌氣氫氬氳彙漢汙湯洶遝溝沒灃漚瀝淪滄渢溈滬濔濘淚澩瀧瀘濼瀉潑澤涇潔灑窪浹淺漿澆湞溮濁測澮濟瀏滻渾滸濃潯濜塗湧濤澇淶漣潿渦溳渙滌潤澗漲澀澱淵淥漬瀆漸澠漁瀋滲溫遊灣濕潰濺漵漊潷滾滯灩灄滿瀅濾濫灤濱灘澦濫瀠瀟瀲濰潛瀦瀾瀨瀕灝滅燈靈災燦煬爐燉煒熗點煉熾爍爛烴燭煙煩燒燁燴燙燼熱煥燜燾煆糊溜愛爺牘犛牽犧犢強狀獷獁猶狽麅獮獰獨狹獅獪猙獄猻獫獵獼玀豬貓蝟獻獺璣璵瑒瑪瑋環現瑲璽瑉玨琺瓏璫琿璡璉瑣瓊瑤璦璿瓔瓚甕甌電畫暢佘疇癤療瘧癘瘍鬁瘡瘋皰屙癰痙癢瘂癆瘓癇癡癉瘮瘞瘺癟癱癮癭癩癬癲臒皚皺皸盞鹽監蓋盜盤瞘眥矓著睜睞瞼瞞矚矯磯礬礦碭碼磚硨硯碸礪礱礫礎硜矽碩硤磽磑礄確鹼礙磧磣堿镟滾禮禕禰禎禱禍稟祿禪離禿稈種積稱穢穠穭稅穌穩穡窮竊竅窯竄窩窺竇窶豎競篤筍筆筧箋籠籩築篳篩簹箏籌簽簡籙簀篋籜籮簞簫簣簍籃籬籪籟糴類秈糶糲粵糞糧糝餱緊縶糸糾紆紅紂纖紇約級紈纊紀紉緯紜紘純紕紗綱納紝縱綸紛紙紋紡紵紖紐紓線紺絏紱練組紳細織終縐絆紼絀紹繹經紿綁絨結絝繞絰絎繪給絢絳絡絕絞統綆綃絹繡綌綏絛繼綈績緒綾緓續綺緋綽緔緄繩維綿綬繃綢綯綹綣綜綻綰綠綴緇緙緗緘緬纜緹緲緝縕繢緦綞緞緶線緱縋緩締縷編緡緣縉縛縟縝縫縗縞纏縭縊縑繽縹縵縲纓縮繆繅纈繚繕繒韁繾繰繯繳纘罌網羅罰罷羆羈羥羨翹翽翬耮耬聳恥聶聾職聹聯聵聰肅腸膚膁腎腫脹脅膽勝朧腖臚脛膠脈膾髒臍腦膿臠腳脫腡臉臘醃膕齶膩靦膃騰臏臢輿艤艦艙艫艱豔艸藝節羋薌蕪蘆蓯葦藶莧萇蒼苧蘇檾蘋莖蘢蔦塋煢繭荊薦薘莢蕘蓽蕎薈薺蕩榮葷滎犖熒蕁藎蓀蔭蕒葒葤藥蒞蓧萊蓮蒔萵薟獲蕕瑩鶯蓴蘀蘿螢營縈蕭薩蔥蕆蕢蔣蔞藍薊蘺蕷鎣驀薔蘞藺藹蘄蘊藪槁蘚虜慮虛蟲虯蟣雖蝦蠆蝕蟻螞蠶蠔蜆蠱蠣蟶蠻蟄蛺蟯螄蠐蛻蝸蠟蠅蟈蟬蠍螻蠑螿蟎蠨釁銜補襯袞襖嫋褘襪襲襏裝襠褌褳襝褲襇褸襤繈襴見觀覎規覓視覘覽覺覬覡覿覥覦覯覲覷觴觸觶讋譽謄訁計訂訃認譏訐訌討讓訕訖訓議訊記訒講諱謳詎訝訥許訛論訩訟諷設訪訣證詁訶評詛識詗詐訴診詆謅詞詘詔詖譯詒誆誄試詿詩詰詼誠誅詵話誕詬詮詭詢詣諍該詳詫諢詡譸誡誣語誚誤誥誘誨誑說誦誒請諸諏諾讀諑誹課諉諛誰諗調諂諒諄誶談誼謀諶諜謊諫諧謔謁謂諤諭諼讒諮諳諺諦謎諞諝謨讜謖謝謠謗諡謙謐謹謾謫譾謬譚譖譙讕譜譎讞譴譫讖穀豶貝貞負貟貢財責賢敗賬貨質販貪貧貶購貯貫貳賤賁貰貼貴貺貸貿費賀貽賊贄賈賄貲賃賂贓資賅贐賕賑賚賒賦賭齎贖賞賜贔賙賡賠賧賴賵贅賻賺賽賾贗讚贇贈贍贏贛赬趙趕趨趲躉躍蹌蹠躒踐躂蹺蹕躚躋踴躊蹤躓躑躡蹣躕躥躪躦軀車軋軌軒軑軔轉軛輪軟轟軲軻轤軸軹軼軤軫轢軺輕軾載輊轎輈輇輅較輒輔輛輦輩輝輥輞輬輟輜輳輻輯轀輸轡轅轄輾轆轍轔辭辯辮邊遼達遷過邁運還這進遠違連遲邇逕跡適選遜遞邐邏遺遙鄧鄺鄔郵鄒鄴鄰鬱郤郟鄶鄭鄆酈鄖鄲醞醱醬釅釃釀釋裏钜鑒鑾鏨釓釔針釘釗釙釕釷釺釧釤鈒釩釣鍆釹鍚釵鈃鈣鈈鈦鈍鈔鍾鈉鋇鋼鈑鈐鑰欽鈞鎢鉤鈧鈁鈥鈄鈕鈀鈺錢鉦鉗鈷缽鈳鉕鈽鈸鉞鑽鉬鉭鉀鈿鈾鐵鉑鈴鑠鉛鉚鈰鉉鉈鉍鈹鐸鉶銬銠鉺銪鋏鋣鐃銍鐺銅鋁銱銦鎧鍘銖銑鋌銩銛鏵銓鉿銚鉻銘錚銫鉸銥鏟銃鐋銨銀銣鑄鐒鋪鋙錸鋱鏈鏗銷鎖鋰鋥鋤鍋鋯鋨鏽銼鋝鋒鋅鋶鐦鐧銳銻鋃鋟鋦錒錆鍺錯錨錡錁錕錩錫錮鑼錘錐錦鍁錈錇錟錠鍵鋸錳錙鍥鍈鍇鏘鍶鍔鍤鍬鍾鍛鎪鍠鍰鎄鍍鎂鏤鎡鏌鎮鎛鎘鑷鐫鎳鎿鎦鎬鎊鎰鎔鏢鏜鏍鏰鏞鏡鏑鏃鏇鏐鐔钁鐐鏷鑥鐓鑭鐠鑹鏹鐙鑊鐳鐶鐲鐮鐿鑔鑣鑞鑲長門閂閃閆閈閉問闖閏闈閑閎間閔閌悶閘鬧閨聞闥閩閭闓閥閣閡閫鬮閱閬闍閾閹閶鬩閿閽閻閼闡闌闃闠闊闋闔闐闒闕闞闤隊陽陰陣階際陸隴陳陘陝隉隕險隨隱隸雋難雛讎靂霧霽黴靄靚靜靨韃鞽韉韝韋韌韍韓韙韞韜韻頁頂頃頇項順須頊頑顧頓頎頒頌頏預顱領頗頸頡頰頲頜潁熲頦頤頻頮頹頷頴穎顆題顒顎顓顏額顳顢顛顙顥纇顫顬顰顴風颺颭颮颯颶颸颼颻飀飄飆飆飛饗饜飣饑飥餳飩餼飪飫飭飯飲餞飾飽飼飿飴餌饒餉餄餎餃餏餅餑餖餓餘餒餕餜餛餡館餷饋餶餿饞饁饃餺餾饈饉饅饊饌饢馬馭馱馴馳驅馹駁驢駔駛駟駙駒騶駐駝駑駕驛駘驍罵駰驕驊駱駭駢驫驪騁驗騂駸駿騏騎騍騅騌驌驂騙騭騤騷騖驁騮騫騸驃騾驄驏驟驥驦驤髏髖髕鬢魘魎魚魛魢魷魨魯魴魺鮁鮃鯰鱸鮋鮓鮒鮊鮑鱟鮍鮐鮭鮚鮳鮪鮞鮦鰂鮜鱠鱭鮫鮮鮺鯗鱘鯁鱺鰱鰹鯉鰣鰷鯀鯊鯇鮶鯽鯒鯖鯪鯕鯫鯡鯤鯧鯝鯢鯰鯛鯨鯵鯴鯔鱝鰈鰏鱨鯷鰮鰃鰓鱷鰍鰒鰉鰁鱂鯿鰠鼇鰭鰨鰥鰩鰟鰜鰳鰾鱈鱉鰻鰵鱅鰼鱖鱔鱗鱒鱯鱤鱧鱣鳥鳩雞鳶鳴鳲鷗鴉鶬鴇鴆鴣鶇鸕鴨鴞鴦鴒鴟鴝鴛鴬鴕鷥鷙鴯鴰鵂鴴鵃鴿鸞鴻鵐鵓鸝鵑鵠鵝鵒鷳鵜鵡鵲鶓鵪鶤鵯鵬鵮鶉鶊鵷鷫鶘鶡鶚鶻鶿鶥鶩鷊鷂鶲鶹鶺鷁鶼鶴鷖鸚鷓鷚鷯鷦鷲鷸鷺鸇鷹鸌鸏鸛鸘鹺麥麩黃黌黶黷黲黽";
+}
+function Traditionalized(cc) {
+ var str = "";
+ var ss = JTPYStr();
+ var tt = FTPYStr();
+ for (var i = 0; i < cc.length; i++) {
+ if (cc.charCodeAt(i) > 10000 && ss.indexOf(cc.charAt(i)) != -1)
+ str += tt.charAt(ss.indexOf(cc.charAt(i)));
+ else str += cc.charAt(i);
+ }
+ return str;
+}
+function Simplized(cc) {
+ var str = "";
+ var ss = JTPYStr();
+ var tt = FTPYStr();
+ for (var i = 0; i < cc.length; i++) {
+ if (cc.charCodeAt(i) > 10000 && tt.indexOf(cc.charAt(i)) != -1)
+ str += ss.charAt(tt.indexOf(cc.charAt(i)));
+ else str += cc.charAt(i);
+ }
+ return str;
+}
+function translateInitilization() {
+ translateButtonObject = document.getElementById(translateButtonId);
+ if (translateButtonObject) {
+ with (translateButtonObject) {
+ if (typeof document.all != "object") {
+ href = "javascript:translatePage();";
+ } else {
+ href = "#";
+ onclick = new Function("translatePage(); return false;");
+ }
+ }
+ if (currentEncoding != targetEncoding) {
+ setTimeout("translateBody()", translateDelay);
+ if (targetEncoding == 1)
+ translateButtonObject.innerHTML = msgToSimplifiedChinese;
+ else translateButtonObject.innerHTML = msgToTraditionalChinese;
+ }
+ }
+}
+
+(function() {
+ translateInitilization()
+})()
diff --git a/themes/butterfly/source/js/utils.js b/themes/butterfly/source/js/utils.js
new file mode 100644
index 00000000..038bc5e9
--- /dev/null
+++ b/themes/butterfly/source/js/utils.js
@@ -0,0 +1,126 @@
+function debounce (func, wait, immediate) {
+ var timeout
+ return function () {
+ var context = this
+ var args = arguments
+ var later = function () {
+ timeout = null
+ if (!immediate) func.apply(context, args)
+ }
+ var callNow = immediate && !timeout
+ clearTimeout(timeout)
+ timeout = setTimeout(later, wait)
+ if (callNow) func.apply(context, args)
+ }
+};
+
+function throttle (func, wait, options) {
+ var timeout, context, args
+ var previous = 0
+ if (!options) options = {}
+
+ var later = function () {
+ previous = options.leading === false ? 0 : new Date().getTime()
+ timeout = null
+ func.apply(context, args)
+ if (!timeout) context = args = null
+ }
+
+ var throttled = function () {
+ var now = new Date().getTime()
+ if (!previous && options.leading === false) previous = now
+ var remaining = wait - (now - previous)
+ context = this
+ args = arguments
+ if (remaining <= 0 || remaining > wait) {
+ if (timeout) {
+ clearTimeout(timeout)
+ timeout = null
+ }
+ previous = now
+ func.apply(context, args)
+ if (!timeout) context = args = null
+ } else if (!timeout && options.trailing !== false) {
+ timeout = setTimeout(later, remaining)
+ }
+ }
+
+ return throttled
+}
+
+function sidebarPaddingR() {
+ let innerWidth = window.innerWidth
+ let clientWidth = document.body.clientWidth
+ let paddingRight = innerWidth - clientWidth
+ if (innerWidth !== clientWidth) {
+ $('body').css('padding-right', paddingRight)
+ }
+}
+
+// iPadOS
+function isIpad () {
+ return navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1
+}
+
+function isTMobile () {
+ var ua = navigator.userAgent
+ var pa = /iPad|iPhone|iPod|Android|Opera Mini|BlackBerry|webOS|UCWEB|Blazer|PSP|IEMobile|Symbian/g
+ return window.screen.width < 992 && pa.test(ua)
+}
+
+function isMobile () {
+ return this.isIpad() || this.isTMobile()
+}
+
+function isDesktop () {
+ return !this.isMobile()
+}
+
+function scrollTo (name) {
+ var scrollOffset = $(name).offset()
+ $('body,html').animate({
+ scrollTop: scrollOffset.top
+ })
+};
+
+function loadScript (url, callback) {
+ var script = document.createElement('script')
+ script.type = 'text/javascript'
+ if (script.readyState) { // IE
+ script.onreadystatechange = function () {
+ if (script.readyState === 'loaded' ||
+ script.readyState === 'complete') {
+ script.onreadystatechange = null
+ callback()
+ }
+ }
+ } else { // Others
+ script.onload = function () {
+ callback()
+ }
+ }
+ script.src = url
+ document.body.appendChild(script)
+};
+
+function snackbarShow (text, showAction, duration) {
+ var a = (typeof showAction !== 'undefined') ? showAction : false
+ var d = (typeof duration !== 'undefined') ? duration : 2000
+ var position = GLOBAL_CONFIG.Snackbar.position
+ var bg = document.documentElement.getAttribute('data-theme') === 'light' ? GLOBAL_CONFIG.Snackbar.bgLight : GLOBAL_CONFIG.Snackbar.bgDark
+ Snackbar.show({
+ text: text,
+ backgroundColor: bg,
+ showAction: a,
+ duration: d,
+ pos: position
+ })
+}
+
+window.debounce = debounce
+
+window.throttle = throttle
+
+window.isMobile = isMobile
+
+window.loadScript = loadScript
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 00000000..cb84ba5f
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,1924 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@types/babel-types@*", "@types/babel-types@^7.0.0":
+ version "7.0.9"
+ resolved "https://registry.yarnpkg.com/@types/babel-types/-/babel-types-7.0.9.tgz#01d7b86949f455402a94c788883fe4ba574cad41"
+ integrity sha512-qZLoYeXSTgQuK1h7QQS16hqLGdmqtRmN8w/rl3Au/l5x/zkHx+a4VHrHyBsi1I1vtK2oBHxSzKIu0R5p6spdOA==
+
+"@types/babylon@^6.16.2":
+ version "6.16.5"
+ resolved "https://registry.yarnpkg.com/@types/babylon/-/babylon-6.16.5.tgz#1c5641db69eb8cdf378edd25b4be7754beeb48b4"
+ integrity sha512-xH2e58elpj1X4ynnKp9qSnWlsRTIs6n3tgLGNfwAGHwePw0mulHQllV34n0T25uYSu1k0hRKkWXF890B1yS47w==
+ dependencies:
+ "@types/babel-types" "*"
+
+"@types/color-name@^1.1.1":
+ version "1.1.1"
+ resolved "https://registry.npm.taobao.org/@types/color-name/download/@types/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
+ integrity sha1-HBJhu+qhCoBVu8XYq4S3sq/IRqA=
+
+JSONStream@^1.0.7:
+ version "1.3.5"
+ resolved "https://registry.npm.taobao.org/JSONStream/download/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
+ integrity sha1-MgjB8I06TZkmGrZPkjArwV4RHKA=
+ dependencies:
+ jsonparse "^1.2.0"
+ through ">=2.2.7 <3"
+
+a-sync-waterfall@^1.0.0:
+ version "1.0.1"
+ resolved "https://registry.npm.taobao.org/a-sync-waterfall/download/a-sync-waterfall-1.0.1.tgz#75b6b6aa72598b497a125e7a2770f14f4c8a1fa7"
+ integrity sha1-dba2qnJZi0l6El56J3DxT0yKH6c=
+
+abbrev@1, abbrev@^1.1.1:
+ version "1.1.1"
+ resolved "https://registry.npm.taobao.org/abbrev/download/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+ integrity sha1-+PLIh60Qv2f2NPAFtph/7TF5qsg=
+
+accepts@~1.3.5:
+ version "1.3.7"
+ resolved "https://registry.npm.taobao.org/accepts/download/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
+ integrity sha1-UxvHJlF6OytB+FACHGzBXqq1B80=
+ dependencies:
+ mime-types "~2.1.24"
+ negotiator "0.6.2"
+
+acorn-globals@^3.0.0:
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-3.1.0.tgz#fd8270f71fbb4996b004fa880ee5d46573a731bf"
+ integrity sha1-/YJw9x+7SZawBPqIDuXUZXOnMb8=
+ dependencies:
+ acorn "^4.0.4"
+
+acorn@^3.1.0:
+ version "3.3.0"
+ resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+ integrity sha1-ReN/s56No/JbruP/U2niu18iAXo=
+
+acorn@^4.0.4, acorn@~4.0.2:
+ version "4.0.13"
+ resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
+ integrity sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=
+
+acorn@^7.0.0:
+ version "7.1.1"
+ resolved "https://registry.npm.taobao.org/acorn/download/acorn-7.1.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Facorn%2Fdownload%2Facorn-7.1.1.tgz#e35668de0b402f359de515c5482a1ab9f89a69bf"
+ integrity sha1-41Zo3gtALzWd5RXFSCoaufiaab8=
+
+align-text@^0.1.1, align-text@^0.1.3:
+ version "0.1.4"
+ resolved "https://registry.npm.taobao.org/align-text/download/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
+ integrity sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=
+ dependencies:
+ kind-of "^3.0.2"
+ longest "^1.0.1"
+ repeat-string "^1.5.2"
+
+amdefine@>=0.0.4:
+ version "1.0.1"
+ resolved "https://registry.npm.taobao.org/amdefine/download/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+ integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
+
+ansi-regex@^5.0.0:
+ version "5.0.1"
+ resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+ integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-styles@^3.2.1:
+ version "3.2.1"
+ resolved "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+ integrity sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=
+ dependencies:
+ color-convert "^1.9.0"
+
+ansi-styles@^4.1.0:
+ version "4.2.1"
+ resolved "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359"
+ integrity sha1-kK51xCTQCNJiTFvynq0xd+v881k=
+ dependencies:
+ "@types/color-name" "^1.1.1"
+ color-convert "^2.0.1"
+
+anymatch@~3.1.1:
+ version "3.1.1"
+ resolved "https://registry.npm.taobao.org/anymatch/download/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
+ integrity sha1-xV7PAhheJGklk5kxDBc84xIzsUI=
+ dependencies:
+ normalize-path "^3.0.0"
+ picomatch "^2.0.4"
+
+archy@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.npm.taobao.org/archy/download/archy-1.0.0.tgz#f9c8c13757cc1dd7bc379ac77b2c62a5c2868c40"
+ integrity sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=
+
+argparse@^1.0.7:
+ version "1.0.10"
+ resolved "https://registry.npm.taobao.org/argparse/download/argparse-1.0.10.tgz?cache=0&sync_timestamp=1571657259891&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fargparse%2Fdownload%2Fargparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+ integrity sha1-vNZ5HqWuCXJeF+WtmIE0zUCz2RE=
+ dependencies:
+ sprintf-js "~1.0.2"
+
+asap@^2.0.3, asap@~2.0.3:
+ version "2.0.6"
+ resolved "https://registry.npm.taobao.org/asap/download/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+ integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
+
+async@~0.2.6:
+ version "0.2.10"
+ resolved "https://registry.npm.taobao.org/async/download/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
+ integrity sha1-trvgsGdLnXGXCMo43owjfLUmw9E=
+
+atob@^2.1.2:
+ version "2.1.2"
+ resolved "https://registry.npm.taobao.org/atob/download/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
+ integrity sha1-bZUX654DDSQ2ZmZR6GvZ9vE1M8k=
+
+babel-runtime@^6.26.0:
+ version "6.26.0"
+ resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+ integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
+ dependencies:
+ core-js "^2.4.0"
+ regenerator-runtime "^0.11.0"
+
+babel-types@^6.26.0:
+ version "6.26.0"
+ resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
+ integrity sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=
+ dependencies:
+ babel-runtime "^6.26.0"
+ esutils "^2.0.2"
+ lodash "^4.17.4"
+ to-fast-properties "^1.0.3"
+
+babylon@^6.18.0:
+ version "6.18.0"
+ resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+ integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
+
+balanced-match@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+ integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
+
+basic-auth@~2.0.1:
+ version "2.0.1"
+ resolved "https://registry.npm.taobao.org/basic-auth/download/basic-auth-2.0.1.tgz#b998279bf47ce38344b4f3cf916d4679bbf51e3a"
+ integrity sha1-uZgnm/R844NEtPPPkW1Gebv1Hjo=
+ dependencies:
+ safe-buffer "5.1.2"
+
+binary-extensions@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.npm.taobao.org/binary-extensions/download/binary-extensions-2.0.0.tgz#23c0df14f6a88077f5f986c0d167ec03c3d5537c"
+ integrity sha1-I8DfFPaogHf1+YbA0WfsA8PVU3w=
+
+bluebird@^3.2.2, bluebird@^3.5.0, bluebird@^3.5.1, bluebird@^3.5.2, bluebird@^3.5.5:
+ version "3.7.2"
+ resolved "https://registry.npm.taobao.org/bluebird/download/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+ integrity sha1-nyKcFb4nJFT/qXOs4NvueaGww28=
+
+brace-expansion@^1.1.7:
+ version "1.1.11"
+ resolved "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+ integrity sha1-PH/L9SnYcibz0vUrlm/1Jx60Qd0=
+ dependencies:
+ balanced-match "^1.0.0"
+ concat-map "0.0.1"
+
+braces@^3.0.1, braces@~3.0.2:
+ version "3.0.2"
+ resolved "https://registry.npm.taobao.org/braces/download/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+ integrity sha1-NFThpGLujVmeI23zNs2epPiv4Qc=
+ dependencies:
+ fill-range "^7.0.1"
+
+bytes@3.0.0:
+ version "3.0.0"
+ resolved "https://registry.npm.taobao.org/bytes/download/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
+ integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
+
+call-bind@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+ integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+ dependencies:
+ function-bind "^1.1.1"
+ get-intrinsic "^1.0.2"
+
+camel-case@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.npm.taobao.org/camel-case/download/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
+ integrity sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=
+ dependencies:
+ no-case "^2.2.0"
+ upper-case "^1.1.1"
+
+camel-case@^4.0.0:
+ version "4.1.1"
+ resolved "https://registry.npm.taobao.org/camel-case/download/camel-case-4.1.1.tgz#1fc41c854f00e2f7d0139dfeba1542d6896fe547"
+ integrity sha1-H8QchU8A4vfQE53+uhVC1olv5Uc=
+ dependencies:
+ pascal-case "^3.1.1"
+ tslib "^1.10.0"
+
+camelcase@^1.0.2:
+ version "1.2.1"
+ resolved "https://registry.npm.taobao.org/camelcase/download/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+ integrity sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=
+
+center-align@^0.1.1:
+ version "0.1.3"
+ resolved "https://registry.npm.taobao.org/center-align/download/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+ integrity sha1-qg0yYptu6XIgBBHL1EYckHvCt60=
+ dependencies:
+ align-text "^0.1.3"
+ lazy-cache "^1.0.3"
+
+chalk@^2.4.1, chalk@^2.4.2:
+ version "2.4.2"
+ resolved "https://registry.npm.taobao.org/chalk/download/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+ integrity sha1-zUJUFnelQzPPVBpJEIwUMrRMlCQ=
+ dependencies:
+ ansi-styles "^3.2.1"
+ escape-string-regexp "^1.0.5"
+ supports-color "^5.3.0"
+
+chalk@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.npm.taobao.org/chalk/download/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+ integrity sha1-P3PCv1JlkfV0zEksUeJFY0n4ROQ=
+ dependencies:
+ ansi-styles "^4.1.0"
+ supports-color "^7.1.0"
+
+character-parser@^2.1.1:
+ version "2.2.0"
+ resolved "https://registry.yarnpkg.com/character-parser/-/character-parser-2.2.0.tgz#c7ce28f36d4bcd9744e5ffc2c5fcde1c73261fc0"
+ integrity sha1-x84o821LzZdE5f/CxfzeHHMmH8A=
+ dependencies:
+ is-regex "^1.0.3"
+
+chokidar@^3.0.0, chokidar@^3.3.0:
+ version "3.3.1"
+ resolved "https://registry.npm.taobao.org/chokidar/download/chokidar-3.3.1.tgz?cache=0&sync_timestamp=1584609518131&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchokidar%2Fdownload%2Fchokidar-3.3.1.tgz#c84e5b3d18d9a4d77558fef466b1bf16bbeb3450"
+ integrity sha1-yE5bPRjZpNd1WP70ZrG/FrvrNFA=
+ dependencies:
+ anymatch "~3.1.1"
+ braces "~3.0.2"
+ glob-parent "~5.1.0"
+ is-binary-path "~2.1.0"
+ is-glob "~4.0.1"
+ normalize-path "~3.0.0"
+ readdirp "~3.3.0"
+ optionalDependencies:
+ fsevents "~2.1.2"
+
+clean-css@^4.1.11:
+ version "4.2.3"
+ resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
+ integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
+ dependencies:
+ source-map "~0.6.0"
+
+cliui@^2.1.0:
+ version "2.1.0"
+ resolved "https://registry.npm.taobao.org/cliui/download/cliui-2.1.0.tgz?cache=0&sync_timestamp=1573943292170&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcliui%2Fdownload%2Fcliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
+ integrity sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=
+ dependencies:
+ center-align "^0.1.1"
+ right-align "^0.1.1"
+ wordwrap "0.0.2"
+
+color-convert@^1.9.0:
+ version "1.9.3"
+ resolved "https://registry.npm.taobao.org/color-convert/download/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+ integrity sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=
+ dependencies:
+ color-name "1.1.3"
+
+color-convert@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+ integrity sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=
+ dependencies:
+ color-name "~1.1.4"
+
+color-name@1.1.3:
+ version "1.1.3"
+ resolved "https://registry.npm.taobao.org/color-name/download/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+ integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+color-name@~1.1.4:
+ version "1.1.4"
+ resolved "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+ integrity sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=
+
+command-exists@^1.2.8:
+ version "1.2.8"
+ resolved "https://registry.npm.taobao.org/command-exists/download/command-exists-1.2.8.tgz#715acefdd1223b9c9b37110a149c6392c2852291"
+ integrity sha1-cVrO/dEiO5ybNxEKFJxjksKFIpE=
+
+commander@^3.0.2:
+ version "3.0.2"
+ resolved "https://registry.npm.taobao.org/commander/download/commander-3.0.2.tgz#6837c3fb677ad9933d1cfba42dd14d5117d6b39e"
+ integrity sha1-aDfD+2d62ZM9HPukLdFNURfWs54=
+
+compressible@~2.0.16:
+ version "2.0.18"
+ resolved "https://registry.npm.taobao.org/compressible/download/compressible-2.0.18.tgz?cache=0&sync_timestamp=1578286264482&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcompressible%2Fdownload%2Fcompressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
+ integrity sha1-r1PMprBw1MPAdQ+9dyhqbXzEb7o=
+ dependencies:
+ mime-db ">= 1.43.0 < 2"
+
+compression@^1.7.4:
+ version "1.7.4"
+ resolved "https://registry.npm.taobao.org/compression/download/compression-1.7.4.tgz#95523eff170ca57c29a0ca41e6fe131f41e5bb8f"
+ integrity sha1-lVI+/xcMpXwpoMpB5v4TH0Hlu48=
+ dependencies:
+ accepts "~1.3.5"
+ bytes "3.0.0"
+ compressible "~2.0.16"
+ debug "2.6.9"
+ on-headers "~1.0.2"
+ safe-buffer "5.1.2"
+ vary "~1.1.2"
+
+concat-map@0.0.1:
+ version "0.0.1"
+ resolved "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+ integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+
+connect@^3.7.0:
+ version "3.7.0"
+ resolved "https://registry.npm.taobao.org/connect/download/connect-3.7.0.tgz#5d49348910caa5e07a01800b030d0c35f20484f8"
+ integrity sha1-XUk0iRDKpeB6AYALAw0MNfIEhPg=
+ dependencies:
+ debug "2.6.9"
+ finalhandler "1.1.2"
+ parseurl "~1.3.3"
+ utils-merge "1.0.1"
+
+constantinople@^3.0.1, constantinople@^3.1.2:
+ version "3.1.2"
+ resolved "https://registry.yarnpkg.com/constantinople/-/constantinople-3.1.2.tgz#d45ed724f57d3d10500017a7d3a889c1381ae647"
+ integrity sha512-yePcBqEFhLOqSBtwYOGGS1exHo/s1xjekXiinh4itpNQGCu4KA1euPh1fg07N2wMITZXQkBz75Ntdt1ctGZouw==
+ dependencies:
+ "@types/babel-types" "^7.0.0"
+ "@types/babylon" "^6.16.2"
+ babel-types "^6.26.0"
+ babylon "^6.18.0"
+
+core-js@^2.4.0:
+ version "2.6.12"
+ resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+ integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
+cross-spawn@^6.0.5:
+ version "6.0.5"
+ resolved "https://registry.npm.taobao.org/cross-spawn/download/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
+ integrity sha1-Sl7Hxk364iw6FBJNus3uhG2Ay8Q=
+ dependencies:
+ nice-try "^1.0.4"
+ path-key "^2.0.1"
+ semver "^5.5.0"
+ shebang-command "^1.2.0"
+ which "^1.2.9"
+
+cross-spawn@^7.0.0:
+ version "7.0.2"
+ resolved "https://registry.npm.taobao.org/cross-spawn/download/cross-spawn-7.0.2.tgz#d0d7dcfa74e89115c7619f4f721a94e1fdb716d6"
+ integrity sha1-0Nfc+nTokRXHYZ9PchqU4f23FtY=
+ dependencies:
+ path-key "^3.1.0"
+ shebang-command "^2.0.0"
+ which "^2.0.1"
+
+css-parse@1.7.x:
+ version "1.7.0"
+ resolved "https://registry.npm.taobao.org/css-parse/download/css-parse-1.7.0.tgz#321f6cf73782a6ff751111390fc05e2c657d8c9b"
+ integrity sha1-Mh9s9zeCpv91ERE5D8BeLGV9jJs=
+
+css-parse@~2.0.0:
+ version "2.0.0"
+ resolved "https://registry.npm.taobao.org/css-parse/download/css-parse-2.0.0.tgz#a468ee667c16d81ccf05c58c38d2a97c780dbfd4"
+ integrity sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=
+ dependencies:
+ css "^2.0.0"
+
+css@^2.0.0:
+ version "2.2.4"
+ resolved "https://registry.npm.taobao.org/css/download/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
+ integrity sha1-xkZ1XHOXHyu6amAeLPL9cbEpiSk=
+ dependencies:
+ inherits "^2.0.3"
+ source-map "^0.6.1"
+ source-map-resolve "^0.5.2"
+ urix "^0.1.0"
+
+cuid@^2.1.4:
+ version "2.1.8"
+ resolved "https://registry.npm.taobao.org/cuid/download/cuid-2.1.8.tgz#cbb88f954171e0d5747606c0139fb65c5101eac0"
+ integrity sha1-y7iPlUFx4NV0dgbAE5+2XFEB6sA=
+
+debug@*:
+ version "4.1.1"
+ resolved "https://registry.npm.taobao.org/debug/download/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
+ integrity sha1-O3ImAlUQnGtYnO4FDx1RYTlmR5E=
+ dependencies:
+ ms "^2.1.1"
+
+debug@2.6.9:
+ version "2.6.9"
+ resolved "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+ integrity sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=
+ dependencies:
+ ms "2.0.0"
+
+debug@~3.1.0:
+ version "3.1.0"
+ resolved "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+ integrity sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=
+ dependencies:
+ ms "2.0.0"
+
+decamelize@^1.0.0:
+ version "1.2.0"
+ resolved "https://registry.npm.taobao.org/decamelize/download/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+ integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
+
+decode-uri-component@^0.2.0:
+ version "0.2.0"
+ resolved "https://registry.npm.taobao.org/decode-uri-component/download/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+ integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
+
+deepmerge@^4.2.2:
+ version "4.2.2"
+ resolved "https://registry.npm.taobao.org/deepmerge/download/deepmerge-4.2.2.tgz?cache=0&sync_timestamp=1572279720382&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdeepmerge%2Fdownload%2Fdeepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+ integrity sha1-RNLqNnm49NT/ujPwPYZfwee/SVU=
+
+depd@~1.1.2:
+ version "1.1.2"
+ resolved "https://registry.npm.taobao.org/depd/download/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+ integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
+
+depd@~2.0.0:
+ version "2.0.0"
+ resolved "https://registry.npm.taobao.org/depd/download/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+ integrity sha1-tpYWPMdXVg0JzyLMj60Vcbeedt8=
+
+destroy@~1.0.4:
+ version "1.0.4"
+ resolved "https://registry.npm.taobao.org/destroy/download/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+ integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
+
+doctypes@^1.1.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/doctypes/-/doctypes-1.1.0.tgz#ea80b106a87538774e8a3a4a5afe293de489e0a9"
+ integrity sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=
+
+dom-serializer@^0.2.1:
+ version "0.2.2"
+ resolved "https://registry.npm.taobao.org/dom-serializer/download/dom-serializer-0.2.2.tgz?cache=0&sync_timestamp=1573447907918&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdom-serializer%2Fdownload%2Fdom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
+ integrity sha1-GvuB9TNxcXXUeGVd68XjMtn5u1E=
+ dependencies:
+ domelementtype "^2.0.1"
+ entities "^2.0.0"
+
+domelementtype@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.npm.taobao.org/domelementtype/download/domelementtype-2.0.1.tgz#1f8bdfe91f5a78063274e803b4bdcedf6e94f94d"
+ integrity sha1-H4vf6R9aeAYydOgDtL3O326U+U0=
+
+domhandler@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.npm.taobao.org/domhandler/download/domhandler-3.0.0.tgz#51cd13efca31da95bbb0c5bee3a48300e333b3e9"
+ integrity sha1-Uc0T78ox2pW7sMW+46SDAOMzs+k=
+ dependencies:
+ domelementtype "^2.0.1"
+
+domutils@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.npm.taobao.org/domutils/download/domutils-2.0.0.tgz#15b8278e37bfa8468d157478c58c367718133c08"
+ integrity sha1-Fbgnjje/qEaNFXR4xYw2dxgTPAg=
+ dependencies:
+ dom-serializer "^0.2.1"
+ domelementtype "^2.0.1"
+ domhandler "^3.0.0"
+
+ee-first@1.1.1:
+ version "1.1.1"
+ resolved "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+ integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
+
+ejs@^2.6.1:
+ version "2.7.4"
+ resolved "https://registry.npm.taobao.org/ejs/download/ejs-2.7.4.tgz?cache=0&sync_timestamp=1585507353335&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fejs%2Fdownload%2Fejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
+ integrity sha1-SGYSh1c9zFPjZsehrlLDoSDuybo=
+
+encodeurl@~1.0.2:
+ version "1.0.2"
+ resolved "https://registry.npm.taobao.org/encodeurl/download/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+ integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
+
+entities@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.npm.taobao.org/entities/download/entities-2.0.0.tgz#68d6084cab1b079767540d80e56a39b423e4abf4"
+ integrity sha1-aNYITKsbB5dnVA2A5Wo5tCPkq/Q=
+
+escape-html@~1.0.3:
+ version "1.0.3"
+ resolved "https://registry.npm.taobao.org/escape-html/download/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+ integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
+
+escape-string-regexp@^1.0.5:
+ version "1.0.5"
+ resolved "https://registry.npm.taobao.org/escape-string-regexp/download/escape-string-regexp-1.0.5.tgz?cache=0&sync_timestamp=1586278520081&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fescape-string-regexp%2Fdownload%2Fescape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+ integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
+
+escape-string-regexp@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.npm.taobao.org/escape-string-regexp/download/escape-string-regexp-2.0.0.tgz?cache=0&sync_timestamp=1586278520081&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fescape-string-regexp%2Fdownload%2Fescape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
+ integrity sha1-owME6Z2qMuI7L9IPUbq9B8/8o0Q=
+
+esprima@^4.0.0:
+ version "4.0.1"
+ resolved "https://registry.npm.taobao.org/esprima/download/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+ integrity sha1-E7BM2z5sXRnfkatph6hpVhmwqnE=
+
+esutils@^2.0.2:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+ integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+etag@~1.8.1:
+ version "1.8.1"
+ resolved "https://registry.npm.taobao.org/etag/download/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+ integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
+
+fill-range@^7.0.1:
+ version "7.0.1"
+ resolved "https://registry.npm.taobao.org/fill-range/download/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+ integrity sha1-GRmmp8df44ssfHflGYU12prN2kA=
+ dependencies:
+ to-regex-range "^5.0.1"
+
+finalhandler@1.1.2:
+ version "1.1.2"
+ resolved "https://registry.npm.taobao.org/finalhandler/download/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
+ integrity sha1-t+fQAP/RGTjQ/bBTUG9uur6fWH0=
+ dependencies:
+ debug "2.6.9"
+ encodeurl "~1.0.2"
+ escape-html "~1.0.3"
+ on-finished "~2.3.0"
+ parseurl "~1.3.3"
+ statuses "~1.5.0"
+ unpipe "~1.0.0"
+
+fresh@0.5.2:
+ version "0.5.2"
+ resolved "https://registry.npm.taobao.org/fresh/download/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+ integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
+
+fs.realpath@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.npm.taobao.org/fs.realpath/download/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+ integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
+
+fsevents@~2.1.2:
+ version "2.1.2"
+ resolved "https://registry.npm.taobao.org/fsevents/download/fsevents-2.1.2.tgz?cache=0&sync_timestamp=1584609355366&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffsevents%2Fdownload%2Ffsevents-2.1.2.tgz#4c0a1fb34bc68e543b4b82a9ec392bfbda840805"
+ integrity sha1-TAofs0vGjlQ7S4Kp7Dkr+9qECAU=
+
+function-bind@^1.1.1:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+ integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+get-intrinsic@^1.0.2:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
+ integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
+ dependencies:
+ function-bind "^1.1.1"
+ has "^1.0.3"
+ has-symbols "^1.0.1"
+
+glob-parent@~5.1.0:
+ version "5.1.2"
+ resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+ integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+ dependencies:
+ is-glob "^4.0.1"
+
+glob@7.0.x:
+ version "7.0.6"
+ resolved "https://registry.npm.taobao.org/glob/download/glob-7.0.6.tgz?cache=0&sync_timestamp=1573078121947&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fglob%2Fdownload%2Fglob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
+ integrity sha1-IRuvr0nlJbjNkyYNFKsTYVKz9Xo=
+ dependencies:
+ fs.realpath "^1.0.0"
+ inflight "^1.0.4"
+ inherits "2"
+ minimatch "^3.0.2"
+ once "^1.3.0"
+ path-is-absolute "^1.0.0"
+
+glob@^6.0.1:
+ version "6.0.4"
+ resolved "https://registry.npm.taobao.org/glob/download/glob-6.0.4.tgz?cache=0&sync_timestamp=1573078121947&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fglob%2Fdownload%2Fglob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
+ integrity sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=
+ dependencies:
+ inflight "^1.0.4"
+ inherits "2"
+ minimatch "2 || 3"
+ once "^1.3.0"
+ path-is-absolute "^1.0.0"
+
+glob@^7.1.3:
+ version "7.1.6"
+ resolved "https://registry.npm.taobao.org/glob/download/glob-7.1.6.tgz?cache=0&sync_timestamp=1573078121947&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fglob%2Fdownload%2Fglob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+ integrity sha1-FB8zuBp8JJLhJVlDB0gMRmeSeKY=
+ dependencies:
+ fs.realpath "^1.0.0"
+ inflight "^1.0.4"
+ inherits "2"
+ minimatch "^3.0.4"
+ once "^1.3.0"
+ path-is-absolute "^1.0.0"
+
+graceful-fs@^4.1.11, graceful-fs@^4.1.3:
+ version "4.2.3"
+ resolved "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
+ integrity sha1-ShL/G2A3bvCYYsIJPt2Qgyi+hCM=
+
+has-flag@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.npm.taobao.org/has-flag/download/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+ integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
+
+has-flag@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+ integrity sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=
+
+has-symbols@^1.0.1, has-symbols@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
+ integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
+
+has@^1.0.3:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+ integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+ dependencies:
+ function-bind "^1.1.1"
+
+hexo-bunyan@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.npm.taobao.org/hexo-bunyan/download/hexo-bunyan-2.0.0.tgz#020d7a51104cc7fe50df9005020c359ac504309e"
+ integrity sha1-Ag16URBMx/5Q35AFAgw1msUEMJ4=
+ optionalDependencies:
+ moment "^2.10.6"
+ mv "~2"
+ safe-json-stringify "~1"
+
+hexo-cli@^3.0.0:
+ version "3.1.0"
+ resolved "https://registry.npm.taobao.org/hexo-cli/download/hexo-cli-3.1.0.tgz#a7414d4647333fe73762f86d77e5660659c0d05b"
+ integrity sha1-p0FNRkczP+c3Yvhtd+VmBlnA0Fs=
+ dependencies:
+ abbrev "^1.1.1"
+ acorn "^7.0.0"
+ bluebird "^3.5.5"
+ chalk "^2.4.2"
+ command-exists "^1.2.8"
+ hexo-fs "^2.0.0"
+ hexo-log "^1.0.0"
+ hexo-util "^1.4.0"
+ minimist "^1.2.0"
+ resolve "^1.11.0"
+ tildify "^2.0.0"
+
+hexo-deployer-git@^2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/hexo-deployer-git/-/hexo-deployer-git-2.1.0.tgz#2e72f05d7b318dbe29929d156ea13f9132354ff1"
+ integrity sha512-0rx8YVd1UrwD9vUzIPrB7mljLdcmUv0zRj3MAMCBxY7HqI2RM5ZEV0uKxi34qB7LYA80BNl3FWHl2ghO/tKVTA==
+ dependencies:
+ bluebird "^3.5.0"
+ chalk "^3.0.0"
+ hexo-fs "^2.0.0"
+ hexo-util "^1.0.0"
+ moment "^2.18.0"
+ swig-templates "^2.0.2"
+
+hexo-front-matter@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.npm.taobao.org/hexo-front-matter/download/hexo-front-matter-1.0.0.tgz#0b48b1c1ed143e8cb25b3b223a9037385d910655"
+ integrity sha1-C0ixwe0UPoyyWzsiOpA3OF2RBlU=
+ dependencies:
+ js-yaml "^3.13.1"
+
+hexo-fs@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.npm.taobao.org/hexo-fs/download/hexo-fs-2.0.0.tgz#0bc421bc0c975a85a25061aca9537fb59292d279"
+ integrity sha1-C8QhvAyXWoWiUGGsqVN/tZKS0nk=
+ dependencies:
+ bluebird "^3.5.1"
+ chokidar "^3.0.0"
+ escape-string-regexp "^2.0.0"
+ graceful-fs "^4.1.11"
+
+hexo-generator-archive@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.npm.taobao.org/hexo-generator-archive/download/hexo-generator-archive-1.0.0.tgz#ad2afb12232a65e2f8608fc1ca3f19162fb63786"
+ integrity sha1-rSr7EiMqZeL4YI/Byj8ZFi+2N4Y=
+ dependencies:
+ hexo-pagination "1.0.0"
+
+hexo-generator-category@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.npm.taobao.org/hexo-generator-category/download/hexo-generator-category-1.0.0.tgz#cd2a2b03eb326da3ef821d6e29408488cc132eb5"
+ integrity sha1-zSorA+sybaPvgh1uKUCEiMwTLrU=
+ dependencies:
+ hexo-pagination "1.0.0"
+
+hexo-generator-index@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.npm.taobao.org/hexo-generator-index/download/hexo-generator-index-1.0.0.tgz#8c9f157dcfa0af4f8417f77a4eb5b3831f69a719"
+ integrity sha1-jJ8Vfc+gr0+EF/d6TrWzgx9ppxk=
+ dependencies:
+ hexo-pagination "1.0.0"
+
+hexo-generator-tag@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.npm.taobao.org/hexo-generator-tag/download/hexo-generator-tag-1.0.0.tgz#54ec23de9409c75584ea81e36057a59031b022f1"
+ integrity sha1-VOwj3pQJx1WE6oHjYFelkDGwIvE=
+ dependencies:
+ hexo-pagination "1.0.0"
+
+hexo-i18n@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.npm.taobao.org/hexo-i18n/download/hexo-i18n-1.0.0.tgz#7983fb3a313e90615b84dd8fa946a71c489ef5bd"
+ integrity sha1-eYP7OjE+kGFbhN2PqUanHEie9b0=
+ dependencies:
+ sprintf-js "^1.0.3"
+
+hexo-log@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.npm.taobao.org/hexo-log/download/hexo-log-1.0.0.tgz?cache=0&sync_timestamp=1576460624180&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhexo-log%2Fdownload%2Fhexo-log-1.0.0.tgz#6f0d39e0e9e76b04a4617b242c3e101d5c4283c7"
+ integrity sha1-bw054OnnawSkYXskLD4QHVxCg8c=
+ dependencies:
+ chalk "^2.4.1"
+ hexo-bunyan "^2.0.0"
+
+hexo-pagination@1.0.0:
+ version "1.0.0"
+ resolved "https://registry.npm.taobao.org/hexo-pagination/download/hexo-pagination-1.0.0.tgz#c9c0ca3665267b9e9d0a89fc3edcaf3276907dc1"
+ integrity sha1-ycDKNmUme56dCon8PtyvMnaQfcE=
+
+hexo-renderer-ejs@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.npm.taobao.org/hexo-renderer-ejs/download/hexo-renderer-ejs-1.0.0.tgz#43c4de49eeae224036a457df860eb1c14c68b4b4"
+ integrity sha1-Q8TeSe6uIkA2pFffhg6xwUxotLQ=
+ dependencies:
+ ejs "^2.6.1"
+
+hexo-renderer-marked@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.npm.taobao.org/hexo-renderer-marked/download/hexo-renderer-marked-2.0.0.tgz#458540b014141e7cf72145a82ec591be359cdba1"
+ integrity sha1-RYVAsBQUHnz3IUWoLsWRvjWc26E=
+ dependencies:
+ hexo-util "1.0.0"
+ marked "^0.7.0"
+ strip-indent "^3.0.0"
+
+hexo-renderer-pug@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/hexo-renderer-pug/-/hexo-renderer-pug-1.0.0.tgz#e23cfa53d308a0985ae8ec2b25a4f8d24c4b4dcc"
+ integrity sha512-lzTSZvPxInGsYJGpv8Z9TQ0n1ZWI6fuSbtyvRmX5tloWPQNNdBhlDIlOsSc2KYQ28QOGuti8GkJ0wPBqLeKf8A==
+ dependencies:
+ pug "^2.0.1"
+
+hexo-renderer-stylus@^1.1.0:
+ version "1.1.0"
+ resolved "https://registry.npm.taobao.org/hexo-renderer-stylus/download/hexo-renderer-stylus-1.1.0.tgz#7a0a107bcf4b74fdf88f28da2db47b8dc9e208e5"
+ integrity sha1-egoQe89LdP34jyjaLbR7jcniCOU=
+ dependencies:
+ nib "^1.1.2"
+ stylus "^0.54.5"
+
+hexo-server@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.npm.taobao.org/hexo-server/download/hexo-server-1.0.0.tgz#af89fcc0a07740ad2a7f33d1d003889aab22927e"
+ integrity sha1-r4n8wKB3QK0qfzPR0AOImqsikn4=
+ dependencies:
+ bluebird "^3.5.5"
+ chalk "^2.4.2"
+ compression "^1.7.4"
+ connect "^3.7.0"
+ mime "^2.4.3"
+ morgan "^1.9.1"
+ open "^6.3.0"
+ serve-static "^1.14.1"
+
+hexo-util@1.0.0:
+ version "1.0.0"
+ resolved "https://registry.npm.taobao.org/hexo-util/download/hexo-util-1.0.0.tgz#2545efcd66e345ef92fe48a73a35470cd65f0b2a"
+ integrity sha1-JUXvzWbjRe+S/kinOjVHDNZfCyo=
+ dependencies:
+ bluebird "^3.5.2"
+ camel-case "^3.0.0"
+ cross-spawn "^6.0.5"
+ highlight.js "^9.13.1"
+ html-entities "^1.2.1"
+ striptags "^3.1.1"
+
+hexo-util@^1.0.0:
+ version "1.9.1"
+ resolved "https://registry.yarnpkg.com/hexo-util/-/hexo-util-1.9.1.tgz#15dc10d0dca474c978cdba9c20e8d0417ac993de"
+ integrity sha512-B6+nVi4Zpy7NPzlIcTLn9YBGb2Ly0q11mRzg6DyFWg0IfcrfF4tlWO0vRXqJVhvRyg+tIfUihmgypkiUW1IjNQ==
+ dependencies:
+ bluebird "^3.5.2"
+ camel-case "^4.0.0"
+ cross-spawn "^7.0.0"
+ deepmerge "^4.2.2"
+ highlight.js "^9.13.1"
+ htmlparser2 "^4.0.0"
+ prismjs "^1.17.1"
+ punycode.js "^2.1.0"
+ strip-indent "^3.0.0"
+ striptags "^3.1.1"
+
+hexo-util@^1.4.0, hexo-util@^1.8.0:
+ version "1.9.0"
+ resolved "https://registry.npm.taobao.org/hexo-util/download/hexo-util-1.9.0.tgz#0018429319720599253b2a3ddde0c5e4e4cfc652"
+ integrity sha1-ABhCkxlyBZklOyo93eDF5OTPxlI=
+ dependencies:
+ bluebird "^3.5.2"
+ camel-case "^4.0.0"
+ cross-spawn "^7.0.0"
+ deepmerge "^4.2.2"
+ highlight.js "^9.13.1"
+ htmlparser2 "^4.0.0"
+ prismjs "^1.17.1"
+ punycode.js "^2.1.0"
+ strip-indent "^3.0.0"
+ striptags "^3.1.1"
+
+hexo@^4.0.0:
+ version "4.2.0"
+ resolved "https://registry.npm.taobao.org/hexo/download/hexo-4.2.0.tgz#dd306abe801ca47623cae7c86818af4425b466ec"
+ integrity sha1-3TBqvoAcpHYjyufIaBivRCW0Zuw=
+ dependencies:
+ abbrev "^1.1.1"
+ archy "^1.0.0"
+ bluebird "^3.5.2"
+ chalk "^3.0.0"
+ hexo-cli "^3.0.0"
+ hexo-front-matter "^1.0.0"
+ hexo-fs "^2.0.0"
+ hexo-i18n "^1.0.0"
+ hexo-log "^1.0.0"
+ hexo-util "^1.8.0"
+ js-yaml "^3.12.0"
+ lodash "^4.17.11"
+ micromatch "^4.0.2"
+ moment "^2.22.2"
+ moment-timezone "^0.5.21"
+ nunjucks "^3.1.3"
+ pretty-hrtime "^1.0.3"
+ resolve "^1.8.1"
+ strip-ansi "^6.0.0"
+ strip-indent "^3.0.0"
+ swig-extras "0.0.1"
+ swig-templates "^2.0.3"
+ text-table "^0.2.0"
+ tildify "^2.0.0"
+ titlecase "^1.1.2"
+ warehouse "^3.0.1"
+
+highlight.js@^9.13.1:
+ version "9.18.5"
+ resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
+ integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
+
+html-entities@^1.2.1:
+ version "1.2.1"
+ resolved "https://registry.npm.taobao.org/html-entities/download/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
+ integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
+
+htmlparser2@^4.0.0:
+ version "4.1.0"
+ resolved "https://registry.npm.taobao.org/htmlparser2/download/htmlparser2-4.1.0.tgz#9a4ef161f2e4625ebf7dfbe6c0a2f52d18a59e78"
+ integrity sha1-mk7xYfLkYl6/ffvmwKL1LRilnng=
+ dependencies:
+ domelementtype "^2.0.1"
+ domhandler "^3.0.0"
+ domutils "^2.0.0"
+ entities "^2.0.0"
+
+http-errors@~1.7.2:
+ version "1.7.3"
+ resolved "https://registry.npm.taobao.org/http-errors/download/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
+ integrity sha1-bGGeT5xgMIw4UZSYwU+7EKrOuwY=
+ dependencies:
+ depd "~1.1.2"
+ inherits "2.0.4"
+ setprototypeof "1.1.1"
+ statuses ">= 1.5.0 < 2"
+ toidentifier "1.0.0"
+
+inflight@^1.0.4:
+ version "1.0.6"
+ resolved "https://registry.npm.taobao.org/inflight/download/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+ integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
+ dependencies:
+ once "^1.3.0"
+ wrappy "1"
+
+inherits@2, inherits@2.0.4, inherits@^2.0.3:
+ version "2.0.4"
+ resolved "https://registry.npm.taobao.org/inherits/download/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+ integrity sha1-D6LGT5MpF8NDOg3tVTY6rjdBa3w=
+
+is-binary-path@~2.1.0:
+ version "2.1.0"
+ resolved "https://registry.npm.taobao.org/is-binary-path/download/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+ integrity sha1-6h9/O4DwZCNug0cPhsCcJU+0Wwk=
+ dependencies:
+ binary-extensions "^2.0.0"
+
+is-buffer@^1.1.5:
+ version "1.1.6"
+ resolved "https://registry.npm.taobao.org/is-buffer/download/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+ integrity sha1-76ouqdqg16suoTqXsritUf776L4=
+
+is-core-module@^2.2.0:
+ version "2.4.0"
+ resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.4.0.tgz#8e9fc8e15027b011418026e98f0e6f4d86305cc1"
+ integrity sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==
+ dependencies:
+ has "^1.0.3"
+
+is-expression@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/is-expression/-/is-expression-3.0.0.tgz#39acaa6be7fd1f3471dc42c7416e61c24317ac9f"
+ integrity sha1-Oayqa+f9HzRx3ELHQW5hwkMXrJ8=
+ dependencies:
+ acorn "~4.0.2"
+ object-assign "^4.0.1"
+
+is-extglob@^2.1.1:
+ version "2.1.1"
+ resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+ integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+
+is-glob@^4.0.1, is-glob@~4.0.1:
+ version "4.0.1"
+ resolved "https://registry.npm.taobao.org/is-glob/download/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
+ integrity sha1-dWfb6fL14kZ7x3q4PEopSCQHpdw=
+ dependencies:
+ is-extglob "^2.1.1"
+
+is-number@^7.0.0:
+ version "7.0.0"
+ resolved "https://registry.npm.taobao.org/is-number/download/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+ integrity sha1-dTU0W4lnNNX4DE0GxQlVUnoU8Ss=
+
+is-plain-object@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.npm.taobao.org/is-plain-object/download/is-plain-object-3.0.0.tgz#47bfc5da1b5d50d64110806c199359482e75a928"
+ integrity sha1-R7/F2htdUNZBEIBsGZNZSC51qSg=
+ dependencies:
+ isobject "^4.0.0"
+
+is-promise@^2.0.0:
+ version "2.2.2"
+ resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
+ integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
+
+is-regex@^1.0.3:
+ version "1.1.3"
+ resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.3.tgz#d029f9aff6448b93ebbe3f33dac71511fdcbef9f"
+ integrity sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==
+ dependencies:
+ call-bind "^1.0.2"
+ has-symbols "^1.0.2"
+
+is-wsl@^1.1.0:
+ version "1.1.0"
+ resolved "https://registry.npm.taobao.org/is-wsl/download/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
+ integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
+
+isexe@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.npm.taobao.org/isexe/download/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+ integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
+
+isobject@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.npm.taobao.org/isobject/download/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0"
+ integrity sha1-PxyRVec7GSAiqAgZus0DQ3EWl7A=
+
+js-stringify@^1.0.1:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/js-stringify/-/js-stringify-1.0.2.tgz#1736fddfd9724f28a3682adc6230ae7e4e9679db"
+ integrity sha1-Fzb939lyTyijaCrcYjCufk6Weds=
+
+js-yaml@^3.12.0, js-yaml@^3.13.1:
+ version "3.13.1"
+ resolved "https://registry.npm.taobao.org/js-yaml/download/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
+ integrity sha1-r/FRswv9+o5J4F2iLnQV6d+jeEc=
+ dependencies:
+ argparse "^1.0.7"
+ esprima "^4.0.0"
+
+jsonparse@^1.2.0:
+ version "1.3.1"
+ resolved "https://registry.npm.taobao.org/jsonparse/download/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
+ integrity sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=
+
+jstransformer@1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/jstransformer/-/jstransformer-1.0.0.tgz#ed8bf0921e2f3f1ed4d5c1a44f68709ed24722c3"
+ integrity sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=
+ dependencies:
+ is-promise "^2.0.0"
+ promise "^7.0.1"
+
+kind-of@^3.0.2:
+ version "3.2.2"
+ resolved "https://registry.npm.taobao.org/kind-of/download/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+ integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
+ dependencies:
+ is-buffer "^1.1.5"
+
+lazy-cache@^1.0.3:
+ version "1.0.4"
+ resolved "https://registry.npm.taobao.org/lazy-cache/download/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+ integrity sha1-odePw6UEdMuAhF07O24dpJpEbo4=
+
+lodash@^4.17.11:
+ version "4.17.21"
+ resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+ integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+lodash@^4.17.4:
+ version "4.17.20"
+ resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+ integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+
+longest@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.npm.taobao.org/longest/download/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+ integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
+
+lower-case@^1.1.1:
+ version "1.1.4"
+ resolved "https://registry.npm.taobao.org/lower-case/download/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
+ integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
+
+lower-case@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.npm.taobao.org/lower-case/download/lower-case-2.0.1.tgz#39eeb36e396115cc05e29422eaea9e692c9408c7"
+ integrity sha1-Oe6zbjlhFcwF4pQi6uqeaSyUCMc=
+ dependencies:
+ tslib "^1.10.0"
+
+markdown@~0.5.0:
+ version "0.5.0"
+ resolved "https://registry.npm.taobao.org/markdown/download/markdown-0.5.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmarkdown%2Fdownload%2Fmarkdown-0.5.0.tgz#28205b565a8ae7592de207463d6637dc182722b2"
+ integrity sha1-KCBbVlqK51kt4gdGPWY33BgnIrI=
+ dependencies:
+ nopt "~2.1.1"
+
+marked@^0.7.0:
+ version "0.7.0"
+ resolved "https://registry.npm.taobao.org/marked/download/marked-0.7.0.tgz#b64201f051d271b1edc10a04d1ae9b74bb8e5c0e"
+ integrity sha1-tkIB8FHScbHtwQoE0a6bdLuOXA4=
+
+micromatch@^4.0.2:
+ version "4.0.2"
+ resolved "https://registry.npm.taobao.org/micromatch/download/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
+ integrity sha1-T8sJmb+fvC/L3SEvbWKbmlbDklk=
+ dependencies:
+ braces "^3.0.1"
+ picomatch "^2.0.5"
+
+mime-db@1.43.0, "mime-db@>= 1.43.0 < 2":
+ version "1.43.0"
+ resolved "https://registry.npm.taobao.org/mime-db/download/mime-db-1.43.0.tgz?cache=0&sync_timestamp=1578281104943&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmime-db%2Fdownload%2Fmime-db-1.43.0.tgz#0a12e0502650e473d735535050e7c8f4eb4fae58"
+ integrity sha1-ChLgUCZQ5HPXNVNQUOfI9OtPrlg=
+
+mime-types@~2.1.24:
+ version "2.1.26"
+ resolved "https://registry.npm.taobao.org/mime-types/download/mime-types-2.1.26.tgz#9c921fc09b7e149a65dfdc0da4d20997200b0a06"
+ integrity sha1-nJIfwJt+FJpl39wNpNIJlyALCgY=
+ dependencies:
+ mime-db "1.43.0"
+
+mime@1.6.0:
+ version "1.6.0"
+ resolved "https://registry.npm.taobao.org/mime/download/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+ integrity sha1-Ms2eXGRVO9WNGaVor0Uqz/BJgbE=
+
+mime@^2.4.3:
+ version "2.4.4"
+ resolved "https://registry.npm.taobao.org/mime/download/mime-2.4.4.tgz#bd7b91135fc6b01cde3e9bae33d659b63d8857e5"
+ integrity sha1-vXuRE1/GsBzePpuuM9ZZtj2IV+U=
+
+min-indent@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.npm.taobao.org/min-indent/download/min-indent-1.0.0.tgz#cfc45c37e9ec0d8f0a0ec3dd4ef7f7c3abe39256"
+ integrity sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY=
+
+"minimatch@2 || 3", minimatch@^3.0.2, minimatch@^3.0.4:
+ version "3.0.4"
+ resolved "https://registry.npm.taobao.org/minimatch/download/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+ integrity sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=
+ dependencies:
+ brace-expansion "^1.1.7"
+
+minimist@^1.2.0, minimist@^1.2.5:
+ version "1.2.5"
+ resolved "https://registry.npm.taobao.org/minimist/download/minimist-1.2.5.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fminimist%2Fdownload%2Fminimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+ integrity sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI=
+
+minimist@~0.0.1:
+ version "0.0.10"
+ resolved "https://registry.npm.taobao.org/minimist/download/minimist-0.0.10.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fminimist%2Fdownload%2Fminimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
+ integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
+
+mkdirp@0.5.x, mkdirp@~0.5.1, mkdirp@~0.5.x:
+ version "0.5.5"
+ resolved "https://registry.npm.taobao.org/mkdirp/download/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+ integrity sha1-2Rzv1i0UNsoPQWIOJRKI1CAJne8=
+ dependencies:
+ minimist "^1.2.5"
+
+moment-timezone@^0.5.21:
+ version "0.5.28"
+ resolved "https://registry.npm.taobao.org/moment-timezone/download/moment-timezone-0.5.28.tgz#f093d789d091ed7b055d82aa81a82467f72e4338"
+ integrity sha1-8JPXidCR7XsFXYKqgagkZ/cuQzg=
+ dependencies:
+ moment ">= 2.9.0"
+
+"moment@>= 2.9.0", moment@^2.10.6, moment@^2.22.2:
+ version "2.24.0"
+ resolved "https://registry.npm.taobao.org/moment/download/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+ integrity sha1-DQVdU/UFKqZTyfbraLtdEr9cK1s=
+
+moment@^2.18.0:
+ version "2.29.1"
+ resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+ integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
+morgan@^1.9.1:
+ version "1.10.0"
+ resolved "https://registry.npm.taobao.org/morgan/download/morgan-1.10.0.tgz#091778abc1fc47cd3509824653dae1faab6b17d7"
+ integrity sha1-CRd4q8H8R801CYJGU9rh+qtrF9c=
+ dependencies:
+ basic-auth "~2.0.1"
+ debug "2.6.9"
+ depd "~2.0.0"
+ on-finished "~2.3.0"
+ on-headers "~1.0.2"
+
+ms@2.0.0:
+ version "2.0.0"
+ resolved "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+ integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
+
+ms@2.1.1:
+ version "2.1.1"
+ resolved "https://registry.npm.taobao.org/ms/download/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
+ integrity sha1-MKWGTrPrsKZvLr5tcnrwagnYbgo=
+
+ms@^2.1.1:
+ version "2.1.2"
+ resolved "https://registry.npm.taobao.org/ms/download/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+ integrity sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk=
+
+mv@~2:
+ version "2.1.1"
+ resolved "https://registry.npm.taobao.org/mv/download/mv-2.1.1.tgz#ae6ce0d6f6d5e0a4f7d893798d03c1ea9559b6a2"
+ integrity sha1-rmzg1vbV4KT32JN5jQPB6pVZtqI=
+ dependencies:
+ mkdirp "~0.5.1"
+ ncp "~2.0.0"
+ rimraf "~2.4.0"
+
+ncp@~2.0.0:
+ version "2.0.0"
+ resolved "https://registry.npm.taobao.org/ncp/download/ncp-2.0.0.tgz?cache=0&sync_timestamp=1583168467545&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fncp%2Fdownload%2Fncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
+ integrity sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=
+
+negotiator@0.6.2:
+ version "0.6.2"
+ resolved "https://registry.npm.taobao.org/negotiator/download/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
+ integrity sha1-/qz3zPUlp3rpY0Q2pkiD/+yjRvs=
+
+nib@^1.1.2:
+ version "1.1.2"
+ resolved "https://registry.npm.taobao.org/nib/download/nib-1.1.2.tgz#6a69ede4081b95c0def8be024a4c8ae0c2cbb6c7"
+ integrity sha1-amnt5AgblcDe+L4CSkyK4MLLtsc=
+ dependencies:
+ stylus "0.54.5"
+
+nice-try@^1.0.4:
+ version "1.0.5"
+ resolved "https://registry.npm.taobao.org/nice-try/download/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
+ integrity sha1-ozeKdpbOfSI+iPybdkvX7xCJ42Y=
+
+no-case@^2.2.0:
+ version "2.3.2"
+ resolved "https://registry.npm.taobao.org/no-case/download/no-case-2.3.2.tgz?cache=0&sync_timestamp=1576721537540&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fno-case%2Fdownload%2Fno-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
+ integrity sha1-YLgTOWvjmz8SiKTB7V0efSi0ZKw=
+ dependencies:
+ lower-case "^1.1.1"
+
+no-case@^3.0.3:
+ version "3.0.3"
+ resolved "https://registry.npm.taobao.org/no-case/download/no-case-3.0.3.tgz?cache=0&sync_timestamp=1576721537540&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fno-case%2Fdownload%2Fno-case-3.0.3.tgz#c21b434c1ffe48b39087e86cfb4d2582e9df18f8"
+ integrity sha1-whtDTB/+SLOQh+hs+00lgunfGPg=
+ dependencies:
+ lower-case "^2.0.1"
+ tslib "^1.10.0"
+
+nopt@~2.1.1:
+ version "2.1.2"
+ resolved "https://registry.npm.taobao.org/nopt/download/nopt-2.1.2.tgz?cache=0&sync_timestamp=1583704549918&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnopt%2Fdownload%2Fnopt-2.1.2.tgz#6cccd977b80132a07731d6e8ce58c2c8303cf9af"
+ integrity sha1-bMzZd7gBMqB3MdbozljCyDA8+a8=
+ dependencies:
+ abbrev "1"
+
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+ version "3.0.0"
+ resolved "https://registry.npm.taobao.org/normalize-path/download/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+ integrity sha1-Dc1p/yOhybEf0JeDFmRKA4ghamU=
+
+nunjucks@^3.1.3:
+ version "3.2.1"
+ resolved "https://registry.npm.taobao.org/nunjucks/download/nunjucks-3.2.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnunjucks%2Fdownload%2Fnunjucks-3.2.1.tgz#f229539281e92c6ad25d8c578c9bdb41655caf83"
+ integrity sha1-8ilTkoHpLGrSXYxXjJvbQWVcr4M=
+ dependencies:
+ a-sync-waterfall "^1.0.0"
+ asap "^2.0.3"
+ commander "^3.0.2"
+ optionalDependencies:
+ chokidar "^3.3.0"
+
+object-assign@^4.0.1, object-assign@^4.1.0:
+ version "4.1.1"
+ resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+ integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
+on-finished@~2.3.0:
+ version "2.3.0"
+ resolved "https://registry.npm.taobao.org/on-finished/download/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+ integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
+ dependencies:
+ ee-first "1.1.1"
+
+on-headers@~1.0.2:
+ version "1.0.2"
+ resolved "https://registry.npm.taobao.org/on-headers/download/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
+ integrity sha1-dysK5qqlJcOZ5Imt+tkMQD6zwo8=
+
+once@^1.3.0:
+ version "1.4.0"
+ resolved "https://registry.npm.taobao.org/once/download/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+ integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+ dependencies:
+ wrappy "1"
+
+open@^6.3.0:
+ version "6.4.0"
+ resolved "https://registry.npm.taobao.org/open/download/open-6.4.0.tgz#5c13e96d0dc894686164f18965ecfe889ecfc8a9"
+ integrity sha1-XBPpbQ3IlGhhZPGJZez+iJ7PyKk=
+ dependencies:
+ is-wsl "^1.1.0"
+
+optimist@~0.6:
+ version "0.6.1"
+ resolved "https://registry.npm.taobao.org/optimist/download/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+ integrity sha1-2j6nRob6IaGaERwybpDrFaAZZoY=
+ dependencies:
+ minimist "~0.0.1"
+ wordwrap "~0.0.2"
+
+parseurl@~1.3.3:
+ version "1.3.3"
+ resolved "https://registry.npm.taobao.org/parseurl/download/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
+ integrity sha1-naGee+6NEt/wUT7Vt2lXeTvC6NQ=
+
+pascal-case@^3.1.1:
+ version "3.1.1"
+ resolved "https://registry.npm.taobao.org/pascal-case/download/pascal-case-3.1.1.tgz?cache=0&sync_timestamp=1579861579813&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpascal-case%2Fdownload%2Fpascal-case-3.1.1.tgz#5ac1975133ed619281e88920973d2cd1f279de5f"
+ integrity sha1-WsGXUTPtYZKB6Ikglz0s0fJ53l8=
+ dependencies:
+ no-case "^3.0.3"
+ tslib "^1.10.0"
+
+path-is-absolute@^1.0.0:
+ version "1.0.1"
+ resolved "https://registry.npm.taobao.org/path-is-absolute/download/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+ integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+path-key@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.npm.taobao.org/path-key/download/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+ integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
+
+path-key@^3.1.0:
+ version "3.1.1"
+ resolved "https://registry.npm.taobao.org/path-key/download/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+ integrity sha1-WB9q3mWMu6ZaDTOA3ndTKVBU83U=
+
+path-parse@^1.0.6:
+ version "1.0.7"
+ resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+ integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.0.7:
+ version "2.2.2"
+ resolved "https://registry.npm.taobao.org/picomatch/download/picomatch-2.2.2.tgz?cache=0&sync_timestamp=1584790434095&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpicomatch%2Fdownload%2Fpicomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
+ integrity sha1-IfMz6ba46v8CRo9RRupAbTRfTa0=
+
+pretty-hrtime@^1.0.3:
+ version "1.0.3"
+ resolved "https://registry.npm.taobao.org/pretty-hrtime/download/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
+ integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
+
+prismjs@^1.17.1:
+ version "1.25.0"
+ resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.25.0.tgz#6f822df1bdad965734b310b315a23315cf999756"
+ integrity sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg==
+
+promise@^7.0.1:
+ version "7.3.1"
+ resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+ integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
+ dependencies:
+ asap "~2.0.3"
+
+pug-attrs@^2.0.4:
+ version "2.0.4"
+ resolved "https://registry.yarnpkg.com/pug-attrs/-/pug-attrs-2.0.4.tgz#b2f44c439e4eb4ad5d4ef25cac20d18ad28cc336"
+ integrity sha512-TaZ4Z2TWUPDJcV3wjU3RtUXMrd3kM4Wzjbe3EWnSsZPsJ3LDI0F3yCnf2/W7PPFF+edUFQ0HgDL1IoxSz5K8EQ==
+ dependencies:
+ constantinople "^3.0.1"
+ js-stringify "^1.0.1"
+ pug-runtime "^2.0.5"
+
+pug-code-gen@^2.0.2:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/pug-code-gen/-/pug-code-gen-2.0.3.tgz#122eb9ada9b5bf601705fe15aaa0a7d26bc134ab"
+ integrity sha512-r9sezXdDuZJfW9J91TN/2LFbiqDhmltTFmGpHTsGdrNGp3p4SxAjjXEfnuK2e4ywYsRIVP0NeLbSAMHUcaX1EA==
+ dependencies:
+ constantinople "^3.1.2"
+ doctypes "^1.1.0"
+ js-stringify "^1.0.1"
+ pug-attrs "^2.0.4"
+ pug-error "^1.3.3"
+ pug-runtime "^2.0.5"
+ void-elements "^2.0.1"
+ with "^5.0.0"
+
+pug-error@^1.3.3:
+ version "1.3.3"
+ resolved "https://registry.yarnpkg.com/pug-error/-/pug-error-1.3.3.tgz#f342fb008752d58034c185de03602dd9ffe15fa6"
+ integrity sha512-qE3YhESP2mRAWMFJgKdtT5D7ckThRScXRwkfo+Erqga7dyJdY3ZquspprMCj/9sJ2ijm5hXFWQE/A3l4poMWiQ==
+
+pug-filters@^3.1.1:
+ version "3.1.1"
+ resolved "https://registry.yarnpkg.com/pug-filters/-/pug-filters-3.1.1.tgz#ab2cc82db9eeccf578bda89130e252a0db026aa7"
+ integrity sha512-lFfjNyGEyVWC4BwX0WyvkoWLapI5xHSM3xZJFUhx4JM4XyyRdO8Aucc6pCygnqV2uSgJFaJWW3Ft1wCWSoQkQg==
+ dependencies:
+ clean-css "^4.1.11"
+ constantinople "^3.0.1"
+ jstransformer "1.0.0"
+ pug-error "^1.3.3"
+ pug-walk "^1.1.8"
+ resolve "^1.1.6"
+ uglify-js "^2.6.1"
+
+pug-lexer@^4.1.0:
+ version "4.1.0"
+ resolved "https://registry.yarnpkg.com/pug-lexer/-/pug-lexer-4.1.0.tgz#531cde48c7c0b1fcbbc2b85485c8665e31489cfd"
+ integrity sha512-i55yzEBtjm0mlplW4LoANq7k3S8gDdfC6+LThGEvsK4FuobcKfDAwt6V4jKPH9RtiE3a2Akfg5UpafZ1OksaPA==
+ dependencies:
+ character-parser "^2.1.1"
+ is-expression "^3.0.0"
+ pug-error "^1.3.3"
+
+pug-linker@^3.0.6:
+ version "3.0.6"
+ resolved "https://registry.yarnpkg.com/pug-linker/-/pug-linker-3.0.6.tgz#f5bf218b0efd65ce6670f7afc51658d0f82989fb"
+ integrity sha512-bagfuHttfQOpANGy1Y6NJ+0mNb7dD2MswFG2ZKj22s8g0wVsojpRlqveEQHmgXXcfROB2RT6oqbPYr9EN2ZWzg==
+ dependencies:
+ pug-error "^1.3.3"
+ pug-walk "^1.1.8"
+
+pug-load@^2.0.12:
+ version "2.0.12"
+ resolved "https://registry.yarnpkg.com/pug-load/-/pug-load-2.0.12.tgz#d38c85eb85f6e2f704dea14dcca94144d35d3e7b"
+ integrity sha512-UqpgGpyyXRYgJs/X60sE6SIf8UBsmcHYKNaOccyVLEuT6OPBIMo6xMPhoJnqtB3Q3BbO4Z3Bjz5qDsUWh4rXsg==
+ dependencies:
+ object-assign "^4.1.0"
+ pug-walk "^1.1.8"
+
+pug-parser@^5.0.1:
+ version "5.0.1"
+ resolved "https://registry.yarnpkg.com/pug-parser/-/pug-parser-5.0.1.tgz#03e7ada48b6840bd3822f867d7d90f842d0ffdc9"
+ integrity sha512-nGHqK+w07p5/PsPIyzkTQfzlYfuqoiGjaoqHv1LjOv2ZLXmGX1O+4Vcvps+P4LhxZ3drYSljjq4b+Naid126wA==
+ dependencies:
+ pug-error "^1.3.3"
+ token-stream "0.0.1"
+
+pug-runtime@^2.0.5:
+ version "2.0.5"
+ resolved "https://registry.yarnpkg.com/pug-runtime/-/pug-runtime-2.0.5.tgz#6da7976c36bf22f68e733c359240d8ae7a32953a"
+ integrity sha512-P+rXKn9un4fQY77wtpcuFyvFaBww7/91f3jHa154qU26qFAnOe6SW1CbIDcxiG5lLK9HazYrMCCuDvNgDQNptw==
+
+pug-strip-comments@^1.0.4:
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/pug-strip-comments/-/pug-strip-comments-1.0.4.tgz#cc1b6de1f6e8f5931cf02ec66cdffd3f50eaf8a8"
+ integrity sha512-i5j/9CS4yFhSxHp5iKPHwigaig/VV9g+FgReLJWWHEHbvKsbqL0oP/K5ubuLco6Wu3Kan5p7u7qk8A4oLLh6vw==
+ dependencies:
+ pug-error "^1.3.3"
+
+pug-walk@^1.1.8:
+ version "1.1.8"
+ resolved "https://registry.yarnpkg.com/pug-walk/-/pug-walk-1.1.8.tgz#b408f67f27912f8c21da2f45b7230c4bd2a5ea7a"
+ integrity sha512-GMu3M5nUL3fju4/egXwZO0XLi6fW/K3T3VTgFQ14GxNi8btlxgT5qZL//JwZFm/2Fa64J/PNS8AZeys3wiMkVA==
+
+pug@^2.0.1:
+ version "2.0.4"
+ resolved "https://registry.yarnpkg.com/pug/-/pug-2.0.4.tgz#ee7682ec0a60494b38d48a88f05f3b0ac931377d"
+ integrity sha512-XhoaDlvi6NIzL49nu094R2NA6P37ijtgMDuWE+ofekDChvfKnzFal60bhSdiy8y2PBO6fmz3oMEIcfpBVRUdvw==
+ dependencies:
+ pug-code-gen "^2.0.2"
+ pug-filters "^3.1.1"
+ pug-lexer "^4.1.0"
+ pug-linker "^3.0.6"
+ pug-load "^2.0.12"
+ pug-parser "^5.0.1"
+ pug-runtime "^2.0.5"
+ pug-strip-comments "^1.0.4"
+
+punycode.js@^2.1.0:
+ version "2.1.0"
+ resolved "https://registry.npm.taobao.org/punycode.js/download/punycode.js-2.1.0.tgz#f3937f7a914152c2dc17e9c280a2cf86a26b7cda"
+ integrity sha1-85N/epFBUsLcF+nCgKLPhqJrfNo=
+
+range-parser@~1.2.1:
+ version "1.2.1"
+ resolved "https://registry.npm.taobao.org/range-parser/download/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
+ integrity sha1-PPNwI9GZ4cJNGlW4SADC8+ZGgDE=
+
+readdirp@~3.3.0:
+ version "3.3.0"
+ resolved "https://registry.npm.taobao.org/readdirp/download/readdirp-3.3.0.tgz#984458d13a1e42e2e9f5841b129e162f369aff17"
+ integrity sha1-mERY0ToeQuLp9YQbEp4WLzaa/xc=
+ dependencies:
+ picomatch "^2.0.7"
+
+regenerator-runtime@^0.11.0:
+ version "0.11.1"
+ resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+ integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
+
+repeat-string@^1.5.2:
+ version "1.6.1"
+ resolved "https://registry.npm.taobao.org/repeat-string/download/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+ integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
+
+resolve-url@^0.2.1:
+ version "0.2.1"
+ resolved "https://registry.npm.taobao.org/resolve-url/download/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
+ integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
+
+resolve@^1.1.6:
+ version "1.20.0"
+ resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
+ integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
+ dependencies:
+ is-core-module "^2.2.0"
+ path-parse "^1.0.6"
+
+resolve@^1.11.0, resolve@^1.8.1:
+ version "1.15.1"
+ resolved "https://registry.npm.taobao.org/resolve/download/resolve-1.15.1.tgz#27bdcdeffeaf2d6244b95bb0f9f4b4653451f3e8"
+ integrity sha1-J73N7/6vLWJEuVuw+fS0ZTRR8+g=
+ dependencies:
+ path-parse "^1.0.6"
+
+rfdc@^1.1.4:
+ version "1.1.4"
+ resolved "https://registry.npm.taobao.org/rfdc/download/rfdc-1.1.4.tgz#ba72cc1367a0ccd9cf81a870b3b58bd3ad07f8c2"
+ integrity sha1-unLME2egzNnPgahws7WL060H+MI=
+
+right-align@^0.1.1:
+ version "0.1.3"
+ resolved "https://registry.npm.taobao.org/right-align/download/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+ integrity sha1-YTObci/mo1FWiSENJOFMlhSGE+8=
+ dependencies:
+ align-text "^0.1.1"
+
+rimraf@~2.4.0:
+ version "2.4.5"
+ resolved "https://registry.npm.taobao.org/rimraf/download/rimraf-2.4.5.tgz?cache=0&sync_timestamp=1581229865753&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Frimraf%2Fdownload%2Frimraf-2.4.5.tgz#ee710ce5d93a8fdb856fb5ea8ff0e2d75934b2da"
+ integrity sha1-7nEM5dk6j9uFb7Xqj/Di11k0sto=
+ dependencies:
+ glob "^6.0.1"
+
+safe-buffer@5.1.2:
+ version "5.1.2"
+ resolved "https://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+ integrity sha1-mR7GnSluAxN0fVm9/St0XDX4go0=
+
+safe-json-stringify@~1:
+ version "1.2.0"
+ resolved "https://registry.npm.taobao.org/safe-json-stringify/download/safe-json-stringify-1.2.0.tgz#356e44bc98f1f93ce45df14bcd7c01cda86e0afd"
+ integrity sha1-NW5EvJjx+TzkXfFLzXwBzahuCv0=
+
+safer-buffer@^2.1.2:
+ version "2.1.2"
+ resolved "https://registry.npm.taobao.org/safer-buffer/download/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+ integrity sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo=
+
+sax@0.5.x:
+ version "0.5.8"
+ resolved "https://registry.npm.taobao.org/sax/download/sax-0.5.8.tgz#d472db228eb331c2506b0e8c15524adb939d12c1"
+ integrity sha1-1HLbIo6zMcJQaw6MFVJK25OdEsE=
+
+sax@~1.2.4:
+ version "1.2.4"
+ resolved "https://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+ integrity sha1-KBYjTiN4vdxOU1T6tcqold9xANk=
+
+semver@^5.5.0:
+ version "5.7.1"
+ resolved "https://registry.npm.taobao.org/semver/download/semver-5.7.1.tgz?cache=0&sync_timestamp=1586534511518&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+ integrity sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=
+
+semver@^6.0.0:
+ version "6.3.0"
+ resolved "https://registry.npm.taobao.org/semver/download/semver-6.3.0.tgz?cache=0&sync_timestamp=1586534511518&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+ integrity sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=
+
+send@0.17.1:
+ version "0.17.1"
+ resolved "https://registry.npm.taobao.org/send/download/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
+ integrity sha1-wdiwWfeQD3Rm3Uk4vcROEd2zdsg=
+ dependencies:
+ debug "2.6.9"
+ depd "~1.1.2"
+ destroy "~1.0.4"
+ encodeurl "~1.0.2"
+ escape-html "~1.0.3"
+ etag "~1.8.1"
+ fresh "0.5.2"
+ http-errors "~1.7.2"
+ mime "1.6.0"
+ ms "2.1.1"
+ on-finished "~2.3.0"
+ range-parser "~1.2.1"
+ statuses "~1.5.0"
+
+serve-static@^1.14.1:
+ version "1.14.1"
+ resolved "https://registry.npm.taobao.org/serve-static/download/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9"
+ integrity sha1-Zm5jbcTwEPfvKZcKiKZ0MgiYsvk=
+ dependencies:
+ encodeurl "~1.0.2"
+ escape-html "~1.0.3"
+ parseurl "~1.3.3"
+ send "0.17.1"
+
+setprototypeof@1.1.1:
+ version "1.1.1"
+ resolved "https://registry.npm.taobao.org/setprototypeof/download/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
+ integrity sha1-fpWsskqpL1iF4KvvW6ExMw1K5oM=
+
+shebang-command@^1.2.0:
+ version "1.2.0"
+ resolved "https://registry.npm.taobao.org/shebang-command/download/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+ integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=
+ dependencies:
+ shebang-regex "^1.0.0"
+
+shebang-command@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.npm.taobao.org/shebang-command/download/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+ integrity sha1-zNCvT4g1+9wmW4JGGq8MNmY/NOo=
+ dependencies:
+ shebang-regex "^3.0.0"
+
+shebang-regex@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.npm.taobao.org/shebang-regex/download/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+ integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
+
+shebang-regex@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.npm.taobao.org/shebang-regex/download/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+ integrity sha1-rhbxZE2HPsrYQ7AwexQzYtTEIXI=
+
+source-map-resolve@^0.5.2:
+ version "0.5.3"
+ resolved "https://registry.npm.taobao.org/source-map-resolve/download/source-map-resolve-0.5.3.tgz?cache=0&sync_timestamp=1584829515586&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsource-map-resolve%2Fdownload%2Fsource-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
+ integrity sha1-GQhmvs51U+H48mei7oLGBrVQmho=
+ dependencies:
+ atob "^2.1.2"
+ decode-uri-component "^0.2.0"
+ resolve-url "^0.2.1"
+ source-map-url "^0.4.0"
+ urix "^0.1.0"
+
+source-map-url@^0.4.0:
+ version "0.4.0"
+ resolved "https://registry.npm.taobao.org/source-map-url/download/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
+ integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
+
+source-map@0.1.x:
+ version "0.1.43"
+ resolved "https://registry.npm.taobao.org/source-map/download/source-map-0.1.43.tgz?cache=0&sync_timestamp=1571657176668&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsource-map%2Fdownload%2Fsource-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
+ integrity sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=
+ dependencies:
+ amdefine ">=0.0.4"
+
+source-map@^0.6.1, source-map@~0.6.0:
+ version "0.6.1"
+ resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+ integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+source-map@^0.7.3:
+ version "0.7.3"
+ resolved "https://registry.npm.taobao.org/source-map/download/source-map-0.7.3.tgz?cache=0&sync_timestamp=1571657176668&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsource-map%2Fdownload%2Fsource-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+ integrity sha1-UwL4FpAxc1ImVECS5kmB91F1A4M=
+
+source-map@~0.5.1:
+ version "0.5.7"
+ resolved "https://registry.npm.taobao.org/source-map/download/source-map-0.5.7.tgz?cache=0&sync_timestamp=1571657176668&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsource-map%2Fdownload%2Fsource-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+ integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
+
+sprintf-js@^1.0.3:
+ version "1.1.2"
+ resolved "https://registry.npm.taobao.org/sprintf-js/download/sprintf-js-1.1.2.tgz#da1765262bf8c0f571749f2ad6c26300207ae673"
+ integrity sha1-2hdlJiv4wPVxdJ8q1sJjACB65nM=
+
+sprintf-js@~1.0.2:
+ version "1.0.3"
+ resolved "https://registry.npm.taobao.org/sprintf-js/download/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+ integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
+
+"statuses@>= 1.5.0 < 2", statuses@~1.5.0:
+ version "1.5.0"
+ resolved "https://registry.npm.taobao.org/statuses/download/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+ integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
+
+strip-ansi@^6.0.0:
+ version "6.0.0"
+ resolved "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-6.0.0.tgz?cache=0&sync_timestamp=1573280518303&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstrip-ansi%2Fdownload%2Fstrip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
+ integrity sha1-CxVx3XZpzNTz4G4U7x7tJiJa5TI=
+ dependencies:
+ ansi-regex "^5.0.0"
+
+strip-indent@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.npm.taobao.org/strip-indent/download/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
+ integrity sha1-wy4c7pQLazQyx3G8LFS8znPNMAE=
+ dependencies:
+ min-indent "^1.0.0"
+
+striptags@^3.1.1:
+ version "3.2.0"
+ resolved "https://registry.yarnpkg.com/striptags/-/striptags-3.2.0.tgz#cc74a137db2de8b0b9a370006334161f7dd67052"
+ integrity sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw==
+
+stylus@0.54.5:
+ version "0.54.5"
+ resolved "https://registry.npm.taobao.org/stylus/download/stylus-0.54.5.tgz#42b9560931ca7090ce8515a798ba9e6aa3d6dc79"
+ integrity sha1-QrlWCTHKcJDOhRWnmLqeaqPW3Hk=
+ dependencies:
+ css-parse "1.7.x"
+ debug "*"
+ glob "7.0.x"
+ mkdirp "0.5.x"
+ sax "0.5.x"
+ source-map "0.1.x"
+
+stylus@^0.54.5:
+ version "0.54.7"
+ resolved "https://registry.npm.taobao.org/stylus/download/stylus-0.54.7.tgz#c6ce4793965ee538bcebe50f31537bfc04d88cd2"
+ integrity sha1-xs5Hk5Ze5Ti86+UPMVN7/ATYjNI=
+ dependencies:
+ css-parse "~2.0.0"
+ debug "~3.1.0"
+ glob "^7.1.3"
+ mkdirp "~0.5.x"
+ safer-buffer "^2.1.2"
+ sax "~1.2.4"
+ semver "^6.0.0"
+ source-map "^0.7.3"
+
+supports-color@^5.3.0:
+ version "5.5.0"
+ resolved "https://registry.npm.taobao.org/supports-color/download/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+ integrity sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=
+ dependencies:
+ has-flag "^3.0.0"
+
+supports-color@^7.1.0:
+ version "7.1.0"
+ resolved "https://registry.npm.taobao.org/supports-color/download/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
+ integrity sha1-aOMlkd9z4lrRxLSRCKLsUHliv9E=
+ dependencies:
+ has-flag "^4.0.0"
+
+swig-extras@0.0.1:
+ version "0.0.1"
+ resolved "https://registry.npm.taobao.org/swig-extras/download/swig-extras-0.0.1.tgz#b503fede372ab9c24c6ac68caf656bcef1872328"
+ integrity sha1-tQP+3jcqucJMasaMr2VrzvGHIyg=
+ dependencies:
+ markdown "~0.5.0"
+
+swig-templates@^2.0.2, swig-templates@^2.0.3:
+ version "2.0.3"
+ resolved "https://registry.npm.taobao.org/swig-templates/download/swig-templates-2.0.3.tgz#6b4c43b462175df2a8da857a2043379ec6ea6fd0"
+ integrity sha1-a0xDtGIXXfKo2oV6IEM3nsbqb9A=
+ dependencies:
+ optimist "~0.6"
+ uglify-js "2.6.0"
+
+text-table@^0.2.0:
+ version "0.2.0"
+ resolved "https://registry.npm.taobao.org/text-table/download/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+ integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
+
+"through@>=2.2.7 <3":
+ version "2.3.8"
+ resolved "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+ integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
+
+tildify@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.npm.taobao.org/tildify/download/tildify-2.0.0.tgz#f205f3674d677ce698b7067a99e949ce03b4754a"
+ integrity sha1-8gXzZ01nfOaYtwZ6melJzgO0dUo=
+
+titlecase@^1.1.2:
+ version "1.1.3"
+ resolved "https://registry.npm.taobao.org/titlecase/download/titlecase-1.1.3.tgz#fc6d65ff582b0602410768ef1a09b70506313dc3"
+ integrity sha1-/G1l/1grBgJBB2jvGgm3BQYxPcM=
+
+to-fast-properties@^1.0.3:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
+ integrity sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=
+
+to-regex-range@^5.0.1:
+ version "5.0.1"
+ resolved "https://registry.npm.taobao.org/to-regex-range/download/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+ integrity sha1-FkjESq58jZiKMmAY7XL1tN0DkuQ=
+ dependencies:
+ is-number "^7.0.0"
+
+toidentifier@1.0.0:
+ version "1.0.0"
+ resolved "https://registry.npm.taobao.org/toidentifier/download/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
+ integrity sha1-fhvjRw8ed5SLxD2Uo8j013UrpVM=
+
+token-stream@0.0.1:
+ version "0.0.1"
+ resolved "https://registry.yarnpkg.com/token-stream/-/token-stream-0.0.1.tgz#ceeefc717a76c4316f126d0b9dbaa55d7e7df01a"
+ integrity sha1-zu78cXp2xDFvEm0LnbqlXX598Bo=
+
+tslib@^1.10.0:
+ version "1.11.1"
+ resolved "https://registry.npm.taobao.org/tslib/download/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
+ integrity sha1-6xXRKIJ/vuKEFUnhcfRe0zisfjU=
+
+uglify-js@2.6.0:
+ version "2.6.0"
+ resolved "https://registry.npm.taobao.org/uglify-js/download/uglify-js-2.6.0.tgz?cache=0&sync_timestamp=1585357516255&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fuglify-js%2Fdownload%2Fuglify-js-2.6.0.tgz#25eaa1cc3550e39410ceefafd1cfbb6b6d15f001"
+ integrity sha1-JeqhzDVQ45QQzu+v0c+7a20V8AE=
+ dependencies:
+ async "~0.2.6"
+ source-map "~0.5.1"
+ uglify-to-browserify "~1.0.0"
+ yargs "~3.10.0"
+
+uglify-js@^2.6.1:
+ version "2.8.29"
+ resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
+ integrity sha1-KcVzMUgFe7Th913zW3qcty5qWd0=
+ dependencies:
+ source-map "~0.5.1"
+ yargs "~3.10.0"
+ optionalDependencies:
+ uglify-to-browserify "~1.0.0"
+
+uglify-to-browserify@~1.0.0:
+ version "1.0.2"
+ resolved "https://registry.npm.taobao.org/uglify-to-browserify/download/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
+ integrity sha1-bgkk1r2mta/jSeOabWMoUKD4grc=
+
+unpipe@~1.0.0:
+ version "1.0.0"
+ resolved "https://registry.npm.taobao.org/unpipe/download/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+ integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
+
+upper-case@^1.1.1:
+ version "1.1.3"
+ resolved "https://registry.npm.taobao.org/upper-case/download/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+ integrity sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=
+
+urix@^0.1.0:
+ version "0.1.0"
+ resolved "https://registry.npm.taobao.org/urix/download/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
+ integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
+
+utils-merge@1.0.1:
+ version "1.0.1"
+ resolved "https://registry.npm.taobao.org/utils-merge/download/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+ integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
+
+vary@~1.1.2:
+ version "1.1.2"
+ resolved "https://registry.npm.taobao.org/vary/download/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+ integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
+
+void-elements@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+ integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
+
+warehouse@^3.0.1:
+ version "3.0.2"
+ resolved "https://registry.npm.taobao.org/warehouse/download/warehouse-3.0.2.tgz#4c02f6fcf2b33130656f3d033c44bf5673af0433"
+ integrity sha1-TAL2/PKzMTBlbz0DPES/VnOvBDM=
+ dependencies:
+ JSONStream "^1.0.7"
+ bluebird "^3.2.2"
+ cuid "^2.1.4"
+ graceful-fs "^4.1.3"
+ is-plain-object "^3.0.0"
+ rfdc "^1.1.4"
+
+which@^1.2.9:
+ version "1.3.1"
+ resolved "https://registry.npm.taobao.org/which/download/which-1.3.1.tgz?cache=0&sync_timestamp=1574116720213&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwhich%2Fdownload%2Fwhich-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+ integrity sha1-pFBD1U9YBTFtqNYvn1CRjT2nCwo=
+ dependencies:
+ isexe "^2.0.0"
+
+which@^2.0.1:
+ version "2.0.2"
+ resolved "https://registry.npm.taobao.org/which/download/which-2.0.2.tgz?cache=0&sync_timestamp=1574116720213&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwhich%2Fdownload%2Fwhich-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+ integrity sha1-fGqN0KY2oDJ+ELWckobu6T8/UbE=
+ dependencies:
+ isexe "^2.0.0"
+
+window-size@0.1.0:
+ version "0.1.0"
+ resolved "https://registry.npm.taobao.org/window-size/download/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+ integrity sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=
+
+with@^5.0.0:
+ version "5.1.1"
+ resolved "https://registry.yarnpkg.com/with/-/with-5.1.1.tgz#fa4daa92daf32c4ea94ed453c81f04686b575dfe"
+ integrity sha1-+k2qktrzLE6pTtRTyB8EaGtXXf4=
+ dependencies:
+ acorn "^3.1.0"
+ acorn-globals "^3.0.0"
+
+wordwrap@0.0.2:
+ version "0.0.2"
+ resolved "https://registry.npm.taobao.org/wordwrap/download/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+ integrity sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=
+
+wordwrap@~0.0.2:
+ version "0.0.3"
+ resolved "https://registry.npm.taobao.org/wordwrap/download/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+ integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
+
+wrappy@1:
+ version "1.0.2"
+ resolved "https://registry.npm.taobao.org/wrappy/download/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+ integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+
+yargs@~3.10.0:
+ version "3.10.0"
+ resolved "https://registry.npm.taobao.org/yargs/download/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+ integrity sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=
+ dependencies:
+ camelcase "^1.0.2"
+ cliui "^2.1.0"
+ decamelize "^1.0.0"
+ window-size "0.1.0"
' + dataTitle + '' + '
'
+ count += 1
+ $('.local-search-stats__hr').show()
+ }
+ })
+ if (count === 0) {
+ str += '' + GLOBAL_CONFIG.localSearch.languages.hits_empty.replace(/\$\{query}/, this.value.trim()) +
+ '
'
+ }
+ $resultContent.innerHTML = str
+ })
+ }
+ })
+ }
+})
diff --git a/themes/butterfly/source/js/third-party/ClickShowText.js b/themes/butterfly/source/js/third-party/ClickShowText.js
new file mode 100644
index 00000000..d17ac766
--- /dev/null
+++ b/themes/butterfly/source/js/third-party/ClickShowText.js
@@ -0,0 +1,42 @@
+function co(){
+ var colorElements = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
+ var colorArray = colorElements.split(",");
+ var color ="#";
+ for(var i =0;i<6;i++){
+ color+=colorArray[Math.floor(Math.random()*16)];
+ }
+ return color;
+};
+var a_idx = 0;
+jQuery(document).ready(function($) {
+ $("body").click(function (e) {
+
+ var config = GLOBAL_CONFIG.ClickShowText;
+
+ /*这个数组中的每一个字符是你要浮动显示的词或句子，每次点击鼠标后按顺序出现*/
+ var a = config.text.split(",");
+ var $i = $("").text(a[a_idx]);
+ a_idx = (a_idx + 1) % a.length;
+ var x = e.pageX,
+ y = e.pageY;
+ $i.css({
+ "z-index": 150,
+ "top": y - 20,
+ "left": x -40,
+ "position": "absolute",
+ "font-weight": "bold",
+ "color": co(),
+ "cursor": "default",
+ "font-size": config.fontSize || "inherit"
+ });
+ $("body").append($i);
+ $i.animate({
+ "top": y - 180,
+ "opacity": 0
+ },
+ 1500,
+ function() {
+ $i.remove();
+ });
+});
+});
\ No newline at end of file
diff --git a/themes/butterfly/source/js/third-party/activate-power-mode.js b/themes/butterfly/source/js/third-party/activate-power-mode.js
new file mode 100644
index 00000000..975190b8
--- /dev/null
+++ b/themes/butterfly/source/js/third-party/activate-power-mode.js
@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.POWERMODE=e():t.POWERMODE=e()}(this,(function(){return function(t){var e={};function o(n){if(e[n])return e[n].exports;var r=e[n]={exports:{},id:n,loaded:!1};return t[n].call(r.exports,r,r.exports,o),r.loaded=!0,r.exports}return o.m=t,o.c=e,o.p="",o(0)}([function(t,e,o){"use strict";var n=document.createElement("canvas");n.width=window.innerWidth,n.height=window.innerHeight,n.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999",window.addEventListener("resize",(function(){n.width=window.innerWidth,n.height=window.innerHeight})),document.body.appendChild(n);var r=n.getContext("2d"),i=[],a=0,d=!1;function l(t,e){return Math.random()*(e-t)+t}function c(t){if(p.colorful){var e=l(0,360);return"hsla("+l(e-10,e+10)+", 100%, "+l(50,80)+"%, 1)"}return window.getComputedStyle(t).color}function u(t,e,o){return{x:t,y:e,alpha:1,color:o,velocity:{x:2*Math.random()-1,y:2*Math.random()-3.5}}}function p(){for(var t=function(){var t,e=document.activeElement;if("TEXTAREA"===e.tagName||"INPUT"===e.tagName&&"text"===e.getAttribute("type")){var n=o(1)(e,e.selectionEnd);return t=e.getBoundingClientRect(),{x:n.left+t.left,y:n.top+t.top,color:c(e)}}var r=window.getSelection();if(r.rangeCount){var i=r.getRangeAt(0),a=i.startContainer;return a.nodeType===document.TEXT_NODE&&(a=a.parentNode),{x:(t=i.getBoundingClientRect()).left,y:t.top,color:c(a)}}return{x:0,y:0,color:"transparent"}}(),e=5+Math.round(10*Math.random());e--;)i[a]=u(t.x,t.y,t.color),a=(a+1)%500;if(p.shake){var n=1+2*Math.random(),r=n*(Math.random()>.5?-1:1),l=n*(Math.random()>.5?-1:1);document.body.style.marginLeft=r+"px",document.body.style.marginTop=l+"px",setTimeout((function(){document.body.style.marginLeft="",document.body.style.marginTop=""}),75)}d||requestAnimationFrame(f)}function f(){d=!0,r.clearRect(0,0,n.width,n.height);for(var t=!1,e=n.getBoundingClientRect(),o=0;o