diff --git "a/2020/05/08/\345\211\215\347\253\257/Vue/02-Vue3/index.html" "b/2020/05/08/\345\211\215\347\253\257/Vue/02-Vue3/index.html" new file mode 100644 index 0000000000..3cb1659f1c --- /dev/null +++ "b/2020/05/08/\345\211\215\347\253\257/Vue/02-Vue3/index.html" @@ -0,0 +1,945 @@ +Vue 3.0 笔记 | WaterBoat的博客
加载头像
原创

Vue 3.0 笔记

发表于更新于
长沙

Vue 3.0 笔记

Node（后端）中的 MVC 与 前端中的 MVVM 之间的区别（了解内容）

    +
  • MVC 主要是后端的分层开发思想；把 一个完整的后端项目，分成了三个部分：
      +
    • Model：（数据层）主要负责 数据库的操作；
      • +
    • View：（视图层）所有前端页面，统称为 View 层
      • +
    • Controller：（业务逻辑层）主要处理对应的业务逻辑；（对于后台来说，这是开发的重点）
      • +
    +
    • +
  • MVVM 是前端页面的分层开发思想，主要关注于 视图层 分离，也就是说：MVVM 把前端的视图层，分为了 三部分 Model, View, ViewModel
      +
    • Model 是 页面中，需要用到的数据
      • +
    • View 是页面中的 HTML 结构；
      • +
    • ViewModel 是 一个 中间的调度者,提供了双向数据绑定的概念；
      • +
    +
    • +
  • 为什么有了 MVC 还要有 MVVM
      +
    • 因为 MVC 是后端的开发思想，并没有明确定义前端的页面该如何开发；
      • +
    • MVVM 是前端的页面的开发思想，把每个页面，分成了三个部分，同时 VM 作为 MVVM 的核心，提供了双向数据绑定的概念，前端程序员，不需要手动渲染页面了，而且，页面数据发送变化，也不需要程序员手动把 数据的变化同步到 Model 中；这所有的操作，都是 VM 自动完成的！
      • +
    • 有了 MVVM 的思想以后，前端只关心 页面交互逻辑，不关心页面如何渲染；
      • +
    +
    • +
+

MVVMMVC和MVVM

+

Vue.js 基本代码 和 MVVM 之间的对应关系

    +
  1. 注意：Vue 中，不推荐程序员手动操作 DOM 元素；所以，在 Vue 项目中，没有极其变态的需求，一般不要引入 Jquery；
    2. +
  2. Vue 代码解析执行的步骤：
      +
    1. 当 VM 实例对象，被 创建完成之后 把模板和数据进行绑定 存储到内存中；
      2. +
    2. 当 VM 调用 mount()方法的时候 ，看到 mount(元素)把内存中已经渲染好的 html 结构插入到元素中去
      3. +
    +
    3. +
  3. 注意：每当 vm 实例对象，监听到 data 中数据发生了变化，就会立即 重新解析 重新指向 model 内，所有的代码；
    4. +
+

什么是 Vue 中的指令

定义： Vue 中，通过一些特殊的语法，扩展了 HTML 的能力；

+
    +
  • 将来 创建 Vue 实例的时候，Vue 会把 这些指令 都进行解析，从而，根据不同的指令，执行不同的操作、渲染不同的结果；
    • +
+

8.1 Vue 指令之 插值表达式 {\{ }\}

    +

  1. 基本使用演示
    在指定的位置动态插入内容，例如：

    +
    1
    <p>{{msg}}</p>
    +
    2. +

  2. 在插值表达式中 使用简单的语句

    +
    3. +

  3. 注意：插值表达式只能用在元素的内容区域；不能用在元素的属性节点中；

    +
    4. +
+

8.2 Vue 指令之 v-cloak

    +
  1. 解决的问题
      +
    • 插值表达式有闪烁的问题（v-cloak 指令来解决闪烁问题）
      • +
    +
    2. +
  2. 应用场景
      +
    • 当 网络比较卡的时候，我们可以为 最外层的 元素，添加 v-cloak ，防止用户看到 插值表达式
      • +
    +
    3. +
+

8.3 Vue 指令之 v-text

    +

  1. 基本使用
    在 元素的属性节点上，添加v-text指令，例如：

    +
    1
    <p v-text="msg"></p>
    +
    2. +

  2. 在v-text中 使用简单的语句

    +
    3. +

  3. v-text 与 {{}} 的区别

    +
      +
    • 是否覆盖内容
      • +
    • 指令闪烁问题
      • +
    +
    4. +

  4. 应用场景

    +
      +
    • 向指定元素的内容区域中，渲染指定的文本；
      • +
    +
    5. +
+

8.4 Vue 指令之 v-html

    +

  1. 基本使用
    在 元素的属性节点上，添加v-html指令，例如：

    +
    1
    <div v-html="msg"></div>
    +
    2. +

  2. 应用场景
    当 服务器返回的数据中，包含的 HTML 的标签，此时，这些标签只能使用 v-html 来渲染；

    +
    3. +
+

8.5 Vue 指令之 v-bind: 属性绑定

    +

  1. 基本使用

    +
      +

    • v-bind: 是为 html 属性节点动态绑定数据的，例如：

      +
      1
      <button v-bind:title="titleStr">按钮</button>
      • +
    +
    2. +

  2. 应用场景

    +
      +
    • 如果元素的属性值，需要动态地进行绑定，则需要使用v-bind: 指令
      • +
    +
    3. +

  3. 简写形式

    +
      +

    • v-bind: 指令可以简写成 :，例如，可以简写成如下格式：

      +
      1
      <button :title="titleStr">按钮</button>
      • +
    +
    4. +
+

8.6 Vue 指令之 v-on: 事件绑定

    +

  1. 基本使用：
    v-on: 的作用，是为 HTML 元素，绑定 事件处理函数，例如：

    +
    1
    <input type="button" value="按钮" v-on:click="事件处理函数名" />
    +
    2. +

  2. 绑定事件处理函数并传参：

    +
    1
    <input type="button" value="按钮" v-on:click="show(123)" />
    +
    3. +

  3. 简写形式：
    v-on: 指令可以简写成 @，例如，可以简写成如下格式：

    +
    1
    <input type="button" value="按钮" @click="事件处理函数名" />
    4. +
+

8.7 【案例】跑马灯效果

8.8 Vue 指令之 v-model 实现 双向数据绑定

    +
  1. 基本使用：
    2. +
+
    +

  • 可以把页面上数据的变化，自动同步更新到 VM 实例的 data 中。例如：

    +
    1
    <input type="text" v-model="msg" />
    • +
+
    +
  1. 和 v-bind:的区别：
      +
    • v-bind: 只能实现单向的数据同步 data ---> 页面；
      • +
    • v-model 可以实现双向的数据同步 data <--> 页面；
      • +
    +
    2. +
  2. 注意：
      +
    • v-model 只能 和 表单元素 配合使用，例如 input、select、textarea 等；
      • +
    • v-model 是 Vue 中 唯一支持 双向数据绑定的指令；
      • +
    +
    3. +
  3. 应用场景：
      +
    • 【案例】自动计算文本框中，字符串的长度
      • +
    • 【案例】简易加法计算器
      • +
    +
    4. +
+

8.9 在 Vue 中使用 class 样式

    +

  1. 类名数组：

    +
      +
    • 通过 v-bind: 为元素的 class 绑定具体的类名：
      • +
    +
    1
    <p :class="['thin', 'red', 'big']">彬哥最帅</p>
    +
    2. +

  2. 类名数组中使用三元表达式，按需为元素添加某些类名

    +
    1
    <p :class="['thin', flag ? 'red' : '']">彬哥最帅a a a</p>
    +
    3. +

  3. 应用场景

    +
      +
    • 【案例】网页开关灯
      • +
    +
    4. +
+

Vue 常用特性

表单基本操作

    +

  • 获取单选框中的值

    +
      +
    • 通过 v-model
      • +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!-- 
    		1、 两个单选框需要同时通过v-model 双向绑定 一个值 
            2、 每一个单选框必须要有value属性  且value 值不能一样 
    		3、 当某一个单选框选中的时候 v-model  会将当前的 value值 改变 data 中的 数据

    		gender 的值就是选中的值，我们只需要实时监控他的值就可以了
    	-->
    <input type="radio" id="male" value="1" v-model="gender" />
    <label for="male">男</label>

    <input type="radio" id="female" value="2" v-model="gender" />
    <label for="female">女</label>

    <script>
      new Vue({
        data: {
          // 默认会让当前的 value 值为 2 的单选框选中
          gender: 2,
        },
      });
    </script>
    +
    • +

  • 获取复选框中的值

    +
      +
    • 通过 v-model
      • +
    • 和获取单选框中的值一样
      • +
    • 复选框 checkbox 这种的组合时 data 中的 hobby 我们要定义成数组 否则无法实现多选
      • +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <!-- 
    		1、 复选框需要同时通过v-model 双向绑定 一个值 
            2、 每一个复选框必须要有value属性  且value 值不能一样 
    		3、 当某一个单选框选中的时候 v-model  会将当前的 value值 改变 data 中的 数据

    		hobby 的值就是选中的值，我们只需要实时监控他的值就可以了
    	-->

    <div>
      <span>爱好：</span>
      <input type="checkbox" id="ball" value="1" v-model="hobby" />
      <label for="ball">篮球</label>
      <input type="checkbox" id="sing" value="2" v-model="hobby" />
      <label for="sing">唱歌</label>
      <input type="checkbox" id="code" value="3" v-model="hobby" />
      <label for="code">写代码</label>
    </div>
    <script>
      new Vue({
        data: {
          // 默认会让当前的 value 值为 2 和 3 的复选框选中
          hobby: ["2", "3"],
        },
      });
    </script>
    +
    • +

  • 获取下拉框和文本框中的值

    +
      +
    • 通过 v-model
      • +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <div>
      <span>职业：</span>
      <!--
    			1、 需要给select  通过v-model 双向绑定 一个值 
                2、 每一个option  必须要有value属性  且value 值不能一样 
    		    3、 当某一个option选中的时候 v-model  会将当前的 value值 改变 data 中的 数据
    		     occupation 的值就是选中的值，我们只需要实时监控他的值就可以了
    		-->
      <!-- multiple  多选 -->
      <select v-model="occupation" multiple>
        <option value="0">请选择职业...</option>
        <option value="1">教师</option>
        <option value="2">软件工程师</option>
        <option value="3">律师</option>
      </select>
      <!-- textarea 是 一个双标签   不需要绑定value 属性的  -->
      <textarea v-model="desc"></textarea>
    </div>
    <script>
      new Vue({
        data: {
          // 默认会让当前的 value 值为 2 和 3 的下拉框选中
          occupation: ["2", "3"],
          desc: "nihao",
        },
      });
    </script>
    • +
+

表单修饰符

    +

  • .number 转换为数值

    +
      +
    • 注意点：
      • +
    • 当开始输入非数字的字符串时，因为 Vue 无法将字符串转换成数值
      • +
    • 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。
      • +
    +
    • +

  • .trim 自动过滤用户输入的首尾空白字符

    +
      +
    • 只能去掉首尾的 不能去除中间的空格
      • +
    +
    • +

  • .lazy 将 input 事件切换成 change 事件

    +
      +
    • .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上
      • +
    +
    • +

  • 在失去焦点 或者 按下回车键时才更新

    +
    1
    2
    3
    4
    5
    6
    7
    8
    <!-- 自动将用户的输入值转为数值类型 -->
    <input v-model.number="age" type="number" />

    <!--自动过滤用户输入的首尾空白字符   -->
    <input v-model.trim="msg" />

    <!-- 在“change”时而非“input”时更新 -->
    <input v-model.lazy="msg" />
    • +
+

自定义指令

    +
  • 内置指令不能满足我们特殊的需求
    • +
  • Vue 允许我们自定义指令
    • +
+

Vue.directive 注册全局指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 
  使用自定义的指令，只需在对用的元素中，加上'v-'的前缀形成类似于内部指令'v-if'，'v-text'的形式。 
-->
<input type="text" v-focus />
<script>
  // 注意点：
  //   1、 在自定义指令中  如果以驼峰命名的方式定义 如  Vue.directive('focusA',function(){})
  //   2、 在HTML中使用的时候 只能通过 v-focus-a 来使用

  // 注册一个全局自定义指令 v-focus
  Vue.directive("focus", {
    // 当绑定元素插入到 DOM 中。 其中 el为dom元素
    inserted: function (el) {
      // 聚焦元素
      el.focus();
    },
  });
  new Vue({
    el: "#app",
  });
</script>
+ +

Vue.directive 注册全局指令 带参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<input type="text" v-color="msg" />
<script type="text/javascript">
  /*
      自定义指令-带参数
      bind - 只调用一次，在指令第一次绑定到元素上时候调用

    */
  Vue.directive("color", {
    // bind声明周期, 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
    // el 为当前自定义指令的DOM元素
    // binding 为自定义的函数形参   通过自定义属性传递过来的值 存在 binding.value 里面
    bind: function (el, binding) {
      // 根据指令的参数设置背景色
      // console.log(binding.value.color)
      el.style.backgroundColor = binding.value.color;
    },
  });
  var vm = new Vue({
    el: "#app",
    data: {
      msg: {
        color: "blue",
      },
    },
  });
</script>
+ +

自定义指令局部指令

    +
  • 局部指令，需要定义在 directives 的选项 用法和全局用法一样
    • +
  • 局部指令只能在当前组件里面使用
    • +
  • 当全局指令和局部指令同名时以局部指令为准
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<input type="text" v-color="msg" />
<input type="text" v-focus />
<script type="text/javascript">
  /*
      自定义指令-局部指令
    */
  var vm = new Vue({
    el: "#app",
    data: {
      msg: {
        color: "red",
      },
    },
    //局部指令，需要定义在  directives 的选项
    directives: {
      color: {
        bind: function (el, binding) {
          el.style.backgroundColor = binding.value.color;
        },
      },
      focus: {
        inserted: function (el) {
          el.focus();
        },
      },
    },
  });
</script>
+ +

计算属性 computed

    +
  • 模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁
    • +
  • 计算属性是基于它们的响应式依赖进行缓存的
    • +
  • computed 比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="computed-basics">
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        author: {
          name: "John Doe",
          books: [
            "Vue 2 - Advanced Guide",
            "Vue 3 - Basic Guide",
            "Vue 4 - The Mystery",
          ],
        },
      };
    },
    computed: {
      // 计算属性的 getter
      publishedBooksMessage() {
        // `this` points to the vm instance
        return this.author.books.length > 0 ? "Yes" : "No";
      },
    },
  }).mount("#computed-basics");
</script>
+ +

侦听器 watch

    +
  • 使用 watch 来响应数据的变化
    • +
  • 一般用于异步或者开销较大的操作
    • +
  • watch 中的属性 一定是 data 中 已经存在的数据
    • +
  • 当需要监听一个对象的改变时，普通的 watch 方法无法监听到对象内部属性的改变，只有 data 中的数据才能够监听到变化，此时就需要 deep 属性对对象进行深度监听
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!doctype html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="lib/vue3.0.global.js"></script>
  </head>

  <body>
    <div id="app">
      <div>
        <span>名：</span>
        <span>
          <input type="text" v-model="firstName" />
        </span>
      </div>
      <div>
        <span>姓：</span>
        <span>
          <input type="text" v-model="lastName" />
        </span>
      </div>
      <div>{{fullName}}</div>
    </div>

    <script type="text/javascript">
      let vm = Vue.createApp({
        data() {
          return {
            firstName: "Jim",
            lastName: "Green",
            // fullName: 'Jim Green'
          };
        },
        //watch  属性 定义 和 data 已经 methods 平级
        watch: {
          //   注意：  这里firstName  对应着data 中的 firstName
          //   当 firstName 值 改变的时候  会自动触发 watch
          firstName: function (val) {
            this.fullName = val + " " + this.lastName;
            // console.log(1);
          },
          //   注意：  这里 lastName 对应着data 中的 lastName
          lastName: function (val) {
            this.fullName = this.firstName + " " + val;
          },
        },
      });
      vm.mount("#app");
    </script>
  </body>
</html>
+ +

过滤器

    +
  • Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化。
    • +
  • 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。
    • +
  • 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示
    • +
  • 支持级联操作
    • +
  • 过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本
    • +
  • 全局注册时是 filter，没有 s 的。而局部过滤器是 filters，是有 s 的
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div id="app">
  <input type="text" v-model="msg" />
  <!-- upper 被定义为接收单个参数的过滤器函数，表达式  msg  的值将作为参数传入到函数中 -->
  <div>{{msg | upper}}</div>
  <!--  
      支持级联操作
      upper  被定义为接收单个参数的过滤器函数，表达式msg 的值将作为参数传入到函数中。
	  然后继续调用同样被定义为接收单个参数的过滤器 lower ，将upper 的结果传递到lower中
 	-->
  <div>{{msg | upper | lower}}</div>
  <div :abc="msg | upper">测试数据</div>
</div>

<script type="text/javascript">
  //  lower  为全局过滤器
  Vue.filter("lower", function (val) {
    return val.charAt(0).toLowerCase() + val.slice(1);
  });
  var vm = new Vue({
    el: "#app",
    data: {
      msg: "",
    },
    //filters  属性 定义 和 data 已经 methods 平级
    //  定义filters 中的过滤器为局部过滤器
    filters: {
      //   upper  自定义的过滤器名字
      //    upper 被定义为接收单个参数的过滤器函数，表达式  msg  的值将作为参数传入到函数中
      upper: function (val) {
        //  过滤器中一定要有返回值 这样外界使用过滤器的时候才能拿到结果
        return val.charAt(0).toUpperCase() + val.slice(1);
      },
    },
  });
</script>
+ +

过滤器中传递参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="box">
  <!--
			filterA 被定义为接收三个参数的过滤器函数。
  			其中 message 的值作为第一个参数，
			普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。
		-->
  {{ message | filterA('arg1', 'arg2') }}
</div>
<script>
  // 在过滤器中 第一个参数 对应的是  管道符前面的数据   n  此时对应 message
  // 第2个参数  a 对应 实参  arg1 字符串
  // 第3个参数  b 对应 实参  arg2 字符串
  Vue.filter("filterA", function (n, a, b) {
    if (n < 10) {
      return n + a;
    } else {
      return n + b;
    }
  });

  new Vue({
    el: "#box",
    data: {
      message: "哈哈哈",
    },
  });
</script>
+ +

生命周期

    +
  • 事物从出生到死亡的过程
    • +
  • Vue 实例从创建 到销毁的过程 ，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数
    • +
+

####常用的 钩子函数

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
beforeCreate在实例初始化之后，数据观测和事件配置之前被调用 此时 data 和 methods 以及页面的 DOM 结构都没有初始化 什么都做不了
created在实例创建完成后被立即调用此时 data 和 methods 已经可以使用 但是页面还没有渲染出来
beforeMount在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已
mountedel 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件
beforeUpdate数据更新时调用，发生在虚拟 DOM 打补丁之前。 页面上数据还是旧的
updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的
beforeDestroy实例销毁之前调用
destroyed实例销毁后调用
+

数组变异方法

    +
  • 在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变
    • +
  • 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展
    • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
push()往数组最后面添加一个元素，成功返回当前数组的长度
pop()删除数组的最后一个元素，成功返回删除元素的值
shift()删除数组的第一个元素，成功返回删除元素的值
unshift()往数组最前面添加一个元素，成功返回当前数组的长度
splice()有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值
sort()sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse()reverse() 将数组倒序，成功返回倒序后的数组
+

替换数组

    +
  • 不会改变原始数组，但总是返回一个新数组
    • +
+ + + + + + + + + + + + + + + +
filterfilter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
concatconcat() 方法用于连接两个或多个数组。该方法不会改变现有的数组
sliceslice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组
+

动态数组响应式数据

    +
  • Vue.set(a,b,c) 让 触发视图重新更新一遍，数据动态起来
    • +
  • a 是要更改的数据 、 b 是数据的第几项、 c 是更改后的数据
    • +
+

图书列表案例

    +
  • 静态列表效果
    • +
  • 基于数据实现模板效果
    • +
  • 处理每行的操作按钮
    • +
+

1、 提供的静态数据

    +
  • 数据存放在 vue 中 data 属性中
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
var vm = new Vue({
  el: "#app",
  data: {
    books: [
      {
        id: 1,
        name: "三国演义",
        date: "",
      },
      {
        id: 2,
        name: "水浒传",
        date: "",
      },
      {
        id: 3,
        name: "红楼梦",
        date: "",
      },
      {
        id: 4,
        name: "西游记",
        date: "",
      },
    ],
  },
});
var vm = new Vue({
  el: "#app",
  data: {
    books: [
      {
        id: 1,
        name: "三国演义",
        date: "",
      },
      {
        id: 2,
        name: "水浒传",
        date: "",
      },
      {
        id: 3,
        name: "红楼梦",
        date: "",
      },
      {
        id: 4,
        name: "西游记",
        date: "",
      },
    ],
  },
});
+ +

2、 把提供好的数据渲染到页面上

    +
  • 利用 v-for 循环 遍历 books 将每一项数据渲染到对应的数据中
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<tbody>
  <tr :key="item.id" v-for="item in books">
    <!-- 对应的id 渲染到页面上 -->
    <td>{{item.id}}</td>
    <!-- 对应的name 渲染到页面上 -->
    <td>{{item.name}}</td>
    <td>{{item.date}}</td>
    <td>
      <!-- 阻止 a 标签的默认跳转 -->
      <a href="" @click.prevent>修改</a>
      <span>|</span>
      <a href="" @click.prevent>删除</a>
    </td>
  </tr>
</tbody>
+ +

3、 添加图书

    +
  • 通过双向绑定获取到输入框中的输入内容
    • +
  • 给按钮添加点击事件
    • +
  • 把输入框中的数据存储到 data 中的 books 里面
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<div>
  <h1>图书管理</h1>
  <div class="book">
    <div>
      <label for="id"> 编号： </label>
      <!-- 3.1、通过双向绑定获取到输入框中的输入的 id  -->
      <input type="text" id="id" v-model="id" />
      <label for="name"> 名称： </label>
      <!-- 3.2、通过双向绑定获取到输入框中的输入的 name  -->
      <input type="text" id="name" v-model="name" />
      <!-- 3.3、给按钮添加点击事件  -->
      <button @click="handle">提交</button>
    </div>
  </div>
</div>
<script type="text/javascript">
  /*
      图书管理-添加图书
    */
  var vm = new Vue({
    el: "#app",
    data: {
      id: "",
      name: "",
      books: [
        {
          id: 1,
          name: "三国演义",
          date: "",
        },
        {
          id: 2,
          name: "水浒传",
          date: "",
        },
        {
          id: 3,
          name: "红楼梦",
          date: "",
        },
        {
          id: 4,
          name: "西游记",
          date: "",
        },
      ],
    },
    methods: {
      handle: function () {
        // 3.4 定义一个新的对象book 存储 获取到输入框中 书 的id和名字
        var book = {};
        book.id = this.id;
        book.name = this.name;
        book.date = "";
        // 3.5 把book  通过数组的变异方法 push 放到    books 里面
        this.books.push(book);
        //3.6 清空输入框
        this.id = "";
        this.name = "";
      },
    },
  });
</script>
+ +

4 修改图书-上

    +
  • 点击修改按钮的时候 获取到要修改的书籍名单
      +
    • 4.1 给修改按钮添加点击事件， 需要把当前的图书的 id 传递过去 这样才知道需要修改的是哪一本书籍
      • +
    +
    • +
  • 把需要修改的书籍名单填充到表单里面
      +
    • 4.2 根据传递过来的 id 查出 books 中 对应书籍的详细信息
      • +
    • 4.3 把获取到的信息填充到表单
      • +
    +
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<div id="app">
  <div class="grid">
    <div>
      <h1>图书管理</h1>
      <div class="book">
        <div>
          <label for="id"> 编号： </label>
          <input type="text" id="id" v-model="id" :disabled="flag" />
          <label for="name"> 名称： </label>
          <input type="text" id="name" v-model="name" />
          <button @click="handle">提交</button>
        </div>
      </div>
    </div>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr :key="item.id" v-for="item in books">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.date}}</td>
          <td>
            <!--- 
				4.1  给修改按钮添加点击事件，  需要把当前的图书的id 传递过去 
				这样才知道需要修改的是哪一本书籍
  				--->
            <a href="" @click.prevent="toEdit(item.id)">修改</a>
            <span>|</span>
            <a href="" @click.prevent>删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<script type="text/javascript">
  /*
      图书管理-添加图书
    */
  var vm = new Vue({
    el: "#app",
    data: {
      flag: false,
      id: "",
      name: "",
      books: [
        {
          id: 1,
          name: "三国演义",
          date: "",
        },
        {
          id: 2,
          name: "水浒传",
          date: "",
        },
        {
          id: 3,
          name: "红楼梦",
          date: "",
        },
        {
          id: 4,
          name: "西游记",
          date: "",
        },
      ],
    },
    methods: {
      handle: function () {
        // 3.4 定义一个新的对象book 存储 获取到输入框中 书 的id和名字
        var book = {};
        book.id = this.id;
        book.name = this.name;
        book.date = "";
        // 3.5 把book  通过数组的变异方法 push 放到    books 里面
        this.books.push(book);
        //3.6 清空输入框
        this.id = "";
        this.name = "";
      },
      toEdit: function (id) {
        console.log(id);
        //4.2  根据传递过来的id 查出books 中 对应书籍的详细信息
        var book = this.books.filter(function (item) {
          return item.id == id;
        });
        console.log(book);
        //4.3 把获取到的信息填充到表单
        // this.id   和  this.name 通过双向绑定 绑定到了表单中  一旦数据改变视图自动更新
        this.id = book[0].id;
        this.name = book[0].name;
      },
    },
  });
</script>
+ +

5 修改图书-下

    +
  • 5.1 定义一个标识符， 主要是控制 编辑状态下当前编辑书籍的 id 不能被修改 即 处于编辑状态下 当前控制书籍编号的输入框禁用
    • +
  • 5.2 通过属性绑定给书籍编号的 绑定 disabled 的属性 flag 为 true 即为禁用
    • +
  • 5.3 flag 默认值为 false 处于编辑状态 要把 flag 改为 true 即当前表单为禁用
    • +
  • 5.4 复用添加方法 用户点击提交的时候依然执行 handle 中的逻辑如果 flag 为 true 即 表单处于不可输入状态 此时执行的用户编辑数据数据
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<div id="app">
  <div class="grid">
    <div>
      <h1>图书管理</h1>
      <div class="book">
        <div>
          <label for="id"> 编号： </label>
          <!-- 5.2 通过属性绑定 绑定 disabled 的属性  flag 为 true 即为禁用      -->
          <input type="text" id="id" v-model="id" :disabled="flag" />
          <label for="name"> 名称： </label>
          <input type="text" id="name" v-model="name" />
          <button @click="handle">提交</button>
        </div>
      </div>
    </div>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr :key="item.id" v-for="item in books">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.date}}</td>
          <td>
            <a href="" @click.prevent="toEdit(item.id)">修改</a>
            <span>|</span>
            <a href="" @click.prevent>删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<script type="text/javascript">
  /*图书管理-添加图书*/
  var vm = new Vue({
    el: "#app",
    data: {
      // 5.1  定义一个标识符， 主要是控制 编辑状态下当前编辑书籍的id 不能被修改
      // 即 处于编辑状态下 当前控制书籍编号的输入框禁用
      flag: false,
      id: "",
      name: "",
    },
    methods: {
      handle: function () {
        /*
                     5.4  复用添加方法   用户点击提交的时候依然执行 handle 中的逻辑
                 		 如果 flag为true 即 表单处于不可输入状态 此时执行的用户编辑数据数据	
                   */

        if (this.flag) {
          // 编辑图书
          // 5.5  根据当前的ID去更新数组中对应的数据
          this.books.some((item) => {
            if (item.id == this.id) {
              // 箭头函数中 this 指向父级作用域的this
              item.name = this.name;
              // 完成更新操作之后，需要终止循环
              return true;
            }
          });
          // 5.6 编辑完数据后表单要处以可以输入的状态
          this.flag = false;
          //  5.7  如果 flag为false  表单处于输入状态 此时执行的用户添加数据
        } else {
          var book = {};
          book.id = this.id;
          book.name = this.name;
          book.date = "";
          this.books.push(book);
          // 清空表单
          this.id = "";
          this.name = "";
        }
        // 清空表单
        this.id = "";
        this.name = "";
      },
      toEdit: function (id) {
        /*
                     5.3  flag 默认值为false   处于编辑状态 要把 flag 改为true 即当前表单为禁					  用 
                     */

        this.flag = true;
        console.log(id);
        var book = this.books.filter(function (item) {
          return item.id == id;
        });
        console.log(book);
        this.id = book[0].id;
        this.name = book[0].name;
      },
    },
  });
</script>
+ +

6 删除图书

    +
  • 6.1 给删除按钮添加事件 把当前需要删除的书籍 id 传递过来
    • +
  • 6.2 根据 id 从数组中查找元素的索引
    • +
  • 6.3 根据索引删除数组元素
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<tbody>
  <tr :key="item.id" v-for="item in books">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td>{{item.date}}</td>
    <td>
      <a href="" @click.prevent="toEdit(item.id)">修改</a>
      <span>|</span>
      <!--  6.1 给删除按钮添加事件 把当前需要删除的书籍id 传递过来  -->
      <a href="" @click.prevent="deleteBook(item.id)">删除</a>
    </td>
  </tr>
</tbody>
<script type="text/javascript">
  /*
    图书管理-添加图书
  */
  var vm = new Vue({
    methods: {
      deleteBook: function(id){
        // 删除图书
        #// 6.2 根据id从数组中查找元素的索引
        // var index = this.books.findIndex(function(item){
        //   return item.id == id;
        // });
        #// 6.3 根据索引删除数组元素
        // this.books.splice(index, 1);
        // -------------------------
       #// 方法二：通过filter方法进行删除

        # 6.4  根据filter 方法 过滤出来id 不是要删除书籍的id
        # 因为 filter 是替换数组不会修改原始数据 所以需要 把 不是要删除书籍的id  赋值给 books
        this.books = this.books.filter(function(item){
          return item.id != id;
        });
      }
    }
  });
</script>
+ +

常用特性应用场景

1 过滤器

    +
  • Vue.filter 定义一个全局过滤器
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<tr :key="item.id" v-for="item in books">
  <td>{{item.id}}</td>
  <td>{{item.name}}</td>
  <!-- 1.3  调用过滤器 -->
  <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
  <td>
    <a href="" @click.prevent="toEdit(item.id)">修改</a>
    <span>|</span>
    <a href="" @click.prevent="deleteBook(item.id)">删除</a>
  </td>
</tr>

<script>
      	#1.1  Vue.filter  定义一个全局过滤器
  	    Vue.filter('format', function(value, arg) {
                function dateFormat(date, format) {
                  if (typeof date === "string") {
                    var mts = date.match(/(\/Date\((\d+)\)\/)/);
                    if (mts && mts.length >= 3) {
                      date = parseInt(mts[2]);
                    }
                  }
                  date = new Date(date);
                  if (!date || date.toUTCString() == "Invalid Date") {
                    return "";
                  }
                  var map = {
                    "M": date.getMonth() + 1, //月份
                    "d": date.getDate(), //日
                    "h": date.getHours(), //小时
                    "m": date.getMinutes(), //分
                    "s": date.getSeconds(), //秒
                    "q": Math.floor((date.getMonth() + 3) / 3), //季度
                    "S": date.getMilliseconds() //毫秒
                  };
                  format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
                    var v = map[t];
                    if (v !== undefined) {
                      if (all.length > 1) {
                        v = '0' + v;
                        v = v.substr(v.length - 2);
                      }
                      return v;
                    } else if (t === 'y') {
                      return (date.getFullYear() + '').substr(4 - all.length);
                    }
                    return all;
                  });
                  return format;
                }
                return dateFormat(value, arg);
              })
  #1.2  提供的数据 包含一个时间戳   为毫秒数
     [{
            id: 1,
            name: '三国演义',
            date: 2525609975000
          },{
            id: 2,
            name: '水浒传',
            date: 2525609975000
          },{
            id: 3,
            name: '红楼梦',
            date: 2525609975000
          },{
            id: 4,
            name: '西游记',
            date: 2525609975000
          }];
</script>
+ +

2 自定义指令

    +
  • 让表单自动获取焦点
    • +
  • 通过 Vue.directive 自定义指定
    • +
+
1
2
3
4
5
6
7
8
9
10
11
<!-- 2.2  通过v-自定义属性名 调用自定义指令 -->
<input type="text" id="id" v-model="id" :disabled="flag" v-focus />

<script>
     # 2.1   通过Vue.directive 自定义指定
  Vue.directive('focus', {
       inserted: function (el) {
         el.focus();
       }
     });
</script>
+ +

3 计算属性

    +
  • 通过计算属性计算图书的总数
      +
    • 图书的总数就是计算数组的长度
      • +
    +
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="total">
  <span>图书总数：</span>
  <!-- 3.2 在页面上 展示出来 -->
  <span>{{total}}</span>
</div>

<script type="text/javascript">
  /*
      计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存
    */
  var vm = new Vue({
    data: {
      flag: false,
      submitFlag: false,
      id: "",
      name: "",
      books: [],
    },
    computed: {
      total: function () {
        // 3.1  计算图书的总数
        return this.books.length;
      },
    },
  });
</script>
+ +

生命周期

    +
  • 2.0
    • +
+

lifecycle

+
    +
  • 3.0
    • +
+

vue3.0说明图

+

组件

组件

    +
  • 组件 (Component) 是 Vue.js 最强大的功能之一
    • +
  • 组件可以扩展 HTML 元素，封装可重用的代码
    • +
+

组件注册

全局注册

    +
  • vm.component(‘组件名称’, { }) 第 1 个参数是标签名称，第 2 个参数是一个选项对象
    • +
  • 全局组件注册后，任何vue 实例都可以用
    • +
+
组件基础用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="example">
  <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用  -->
  <my-component></my-component>
</div>
<script>
  //   注册组件
  // 1、 my-component 就是组件中自定义的标签名
  Vue.component("my-component", {
    template: "<div>A custom component!</div>",
  });

  // 创建根实例
  new Vue({
    el: "#example",
  });
</script>
+ +
组件注意事项
    +
  • 组件参数的 data 值必须是函数同时这个函数要求返回一个对象
    • +
  • 组件模板必须是单个根元素
    • +
  • 组件模板的内容可以是模板字符串
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<div id="app">
  <!-- 
		4、  组件可以重复使用多次 
	      因为data中返回的是一个对象所以每个组件中的数据是私有的
		  即每个实例可以维护一份被返回对象的独立的拷贝   
	-->
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
  <!-- 8、必须使用短横线的方式使用组件 -->
  <hello-world></hello-world>
</div>

<script type="text/javascript">
  //5  如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，
  // 7、但是在普通的标签模板中，必须使用短横线的方式使用组件
  Vue.component("HelloWorld", {
    data: function () {
      return {
        msg: "HelloWorld",
      };
    },
    template: "<div>{{msg}}</div>",
  });

  Vue.component("button-counter", {
    // 1、组件参数的data值必须是函数
    // 同时这个函数要求返回一个对象
    data: function () {
      return {
        count: 0,
      };
    },
    //  2、组件模板必须是单个根元素
    //  3、组件模板的内容可以是模板字符串
    template: `
        <div>
          <button @click="handle">点击了{{count}}次</button>
          <button>测试123</button>
			#  6 在字符串模板中可以使用驼峰的方式使用组件	
		   <HelloWorld></HelloWorld>
        </div>
      `,
    methods: {
      handle: function () {
        this.count += 2;
      },
    },
  });
  var vm = new Vue({
    el: "#app",
    data: {},
  });
</script>
+ +

局部注册

    +
  • 只能在当前注册它的 vue 实例中使用
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
  <my-component></my-component>
</div>

<script>
  // 定义组件的模板
  var Child = {
    template: "<div>A custom component!</div>",
  };
  new Vue({
    //局部注册组件
    components: {
      // <my-component> 将只在父模板可用  一定要在实例上注册了才能在html文件中使用
      "my-component": Child,
    },
  });
</script>
+ +

Vue 调试工具

Vue 组件之间传值

父组件向子组件传值

    +
  • 父组件发送的形式是以属性的形式绑定值到子组件身上。
    • +
  • 然后子组件用属性 props 接收
    • +
  • 在 props 中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div id="app">
  <div>{{pmsg}}</div>
  <!--1、menu-item  在 APP中嵌套着 故 menu-item   为  子组件      -->
  <!-- 给子组件传入一个静态的值 -->
  <menu-item title="来自父组件的值"></menu-item>
  <!-- 2、 需要动态的数据的时候 需要属性绑定的形式设置 此时 ptitle  来自父组件data 中的数据 . 
		  传的值可以是数字、对象、数组等等
	-->
  <menu-item :title="ptitle" content="hello"></menu-item>
</div>

<script type="text/javascript">
  Vue.component("menu-item", {
    // 3、 子组件用属性props接收父组件传递过来的数据
    props: ["title", "content"],
    data: function () {
      return {
        msg: "子组件本身的数据",
      };
    },
    template: '<div>{{msg + "----" + title + "-----" + content}}</div>',
  });
  var vm = new Vue({
    el: "#app",
    data: {
      pmsg: "父组件中内容",
      ptitle: "动态绑定属性",
    },
  });
</script>
+ +

子组件向父组件传值

    +
  • 子组件用$emit()触发事件
    • +
  • $emit() 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据
    • +
  • 父组件用 v-on 监听子组件的事件
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div id="app">
  <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
  <!-- 2 父组件用v-on 监听子组件的事件
		这里 enlarge-text  是从 $emit 中的第一个参数对应   handle 为对应的事件处理函数	
	-->
  <menu-item :parr="parr" @enlarge-text="handle($event)"></menu-item>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
  /*
      子组件向父组件传值-携带参数
    */

  Vue.component("menu-item", {
    props: ["parr"],
    template: `
        <div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
			###  1、子组件用$emit()触发事件
			### 第一个参数为 自定义的事件名称   第二个参数为需要传递的数据  
          <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
          <button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button>
        </div>
      `,
  });
  var vm = new Vue({
    el: "#app",
    data: {
      pmsg: "父组件中内容",
      parr: ["apple", "orange", "banana"],
      fontSize: 10,
    },
    methods: {
      handle: function (val) {
        // 扩大字体大小
        this.fontSize += val;
      },
    },
  });
</script>
+ +

兄弟之间的传递

    +
  • 兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
      +
    • 提供事件中心 var hub = new Vue()
      • +
    +
    • +
  • 传递数据方，通过一个事件触发 hub.$emit(方法名，传递的数据)
    • +
  • 接收数据方，通过 mounted(){} 钩子中 触发 hub.$on()方法名
    • +
  • 销毁事件 通过 hub.$off()方法名销毁之后无法进行传递数据
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<div id="app">
  <div>父组件</div>
  <div>
    <button @click="handle">销毁事件</button>
  </div>
  <test-tom></test-tom>
  <test-jerry></test-jerry>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
  /*
      兄弟组件之间数据传递
    */
  //1、 提供事件中心
  var hub = new Vue();

  Vue.component("test-tom", {
    data: function () {
      return {
        num: 0,
      };
    },
    template: `
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
    methods: {
      handle: function () {
        //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件
        hub.$emit("jerry-event", 2);
      },
    },
    mounted: function () {
      // 3、接收数据方，通过mounted(){} 钩子中  触发hub.$on(方法名
      hub.$on("tom-event", (val) => {
        this.num += val;
      });
    },
  });
  Vue.component("test-jerry", {
    data: function () {
      return {
        num: 0,
      };
    },
    template: `
        <div>
          <div>JERRY:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
    methods: {
      handle: function () {
        //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件
        hub.$emit("tom-event", 1);
      },
    },
    mounted: function () {
      // 3、接收数据方，通过mounted(){} 钩子中  触发hub.$on()方法名
      hub.$on("jerry-event", (val) => {
        this.num += val;
      });
    },
  });
  var vm = new Vue({
    el: "#app",
    data: {},
    methods: {
      handle: function () {
        //4、销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据
        hub.$off("tom-event");
        hub.$off("jerry-event");
      },
    },
  });
</script>
+ +

vue-cli

安装与启动

1
2
3
4
5
6
7
8
9
10
11
12
# 1
npm install -g @vue/cli
# OR
yarn global add @vue/cli

# 2
npm install -g @vue/cli @vue/cli-service-global
# or
yarn global add @vue/cli @vue/cli-service-global

# 3 创建项目
vue create 项目名称
+ +

使用 sass 全局方法 @mixnin

    +
  • 先运行 vue add style-resources-loader
    • +
+

配置 vue.config.js

+
1
2
3
4
5
6
7
8
9
10
const path = require("path");
module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "scss",
      patterns: [path.resolve(__dirname, "./src/mixnin.scss")]
    }
  }
};

+ +

样式穿透

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md

+

vue-router

安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#下载 vue-router包
npm install vue-router@next

# 在src文件夹里面新建routes文件夹
├─.browserslistrc
├─.eslintrc.js
├─.gitignore
├─babel.config.js
├─package.json
├─README.md
├─yarn.lock
├─src #在这里新建
|  ├─App.vue
|  ├─main.js
|  ├─routes # 新建我!!!
|  |   └index.js #在这里面写vue-router的配置文件
|  ├─components
|  |     └HelloWorld.vue
|  ├─assets
|  |   └logo.png
├─public
|   ├─favicon.ico
|   └index.html

+ +

配置文件书写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*
|  ├─routes # 新建我!!!
|  |   └index.js 我是配置文件哦!!
*/

import { createRouter, createWebHashHistory } from "vue-router";

// 导入组件
import HelloWorld from "../components/HelloWorld";
const routes = [
  {
    name: "home",
    path: "/home",
    component: HelloWorld,
  },
];
// 3.创建路由
const router = createRouter({
  history: createWebHashHistory(),
  // 定义好的路由
  routes,
});
// 导出 router
export default router;
+ +

main.js 文件的书写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*
├─src #在这里新建
|  ├─App.vue
|  ├─main.js
*/

import { createApp } from "vue";
import App from "./App.vue";
// 引入路由配置
import routes from "./routes";
createApp(App)
  //使用路由
  .use(routes)
  .mount("#app");
+ +

路由重定向 router-redirect

1
2
3
4
5
6
7
8
let routes = [
  // 重定向
  {
    path: "原路由",
    redirect: "要跳转到哪个路由",
  },
  { 其他路由规则 },
];
+ +

嵌套路由 router-nest

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let routes = [
  // 重定向
  {
    path: "父组件路由规则",
    component: "组件名",
    children: [
      // 子路由规则
      {
        path: "父组件路由规则",
        component: "组件名",
        // children: [{}]
      },
    ],
  },
];
+ +

路由传参 router-dynamic

直接接收

在路由规则中

+
1
2
3
4
5
6
7
let routes = [
  // 重定向
  {
    path: "父组件路由规则/:占位符名称",
    component: "组件名",
  },
];
+ +

在对应组件中

+
1
2
3
4
5
6
7
8
9
10
11
<template>
  <div>
    <p>{{ $router.params.占位符名称 }}</p>
  </div>
</template>

<script>
export default {};
</script>

<style></style>
+ +

通过 props 属性

在路由规则中

+
1
2
3
4
5
6
7
8
let routes = [
  // 重定向
  {
    path: "父组件路由规则/:占位符名称",
    component: "组件名",
    props: true,
  },
];
+ +

在对应组件中

+
1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div>
    <p>{{ 占位符名称 }}</p>
  </div>
</template>

<script>
export default {
  props: ["占位符名称"],
};
</script>

<style></style>
+ +

通过回调函数

在路由规则中

+
1
2
3
4
5
6
7
8
9
 let routes = [
  // 重定向
   {
    path: "父组件路由规则/:占位符名称",
    component: "组件名",
    // 通过回调函数的方式传值给组件,对应组件通过props获取传入的参数
    props: router=>({属性名: router.params.占位符名称,属性名:属性值,...})
  }
]
+ +

在对应组件中

+
1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div>
    <p>{{ 属性名 }}</p>
  </div>
</template>

<script>
export default {
  props: ["属性名","属性名",...]
};
</script>

<style></style>
+ +

编程式导航 router-program

1
2
//  如果在methods中 在created 在watch这样的方法中 使用this.$router.push() 跳转到另外的路由
//  如果想前进一步(go(1)、forwar()) 后退一步(go(-1)、back())
+ +

命名路由

在路由规则中

+
1
2
3
4
5
6
7
 let routes = [
   {
    name: "路由的名字"
    path: "父组件路由规则/:占位符名称",
    component: "组件名",
  }
]
+ +

在对应组件中

+
1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <!-- 如果传入了参数记得去router/index.js里面开启props -->
  <router-link :to="{ name: '路由的名字', params: { 属性名: 属性值 } }"
    >超链接</router-link
  >
</template>

<script>
export default {};
</script>

<style></style>
+ +

Vuex 统一状态管理

VueX 概述

为什么要学习 VueX

父向子传值：父元素 v-bind 属性绑定数据，子元素使用 props 接受父元素传递的数据
子向父传值：父元素 v-on 事件绑定，子元素使用$emit 触发，并通过回调函数把值传递给父元素
兄弟组件之间共享数据：EventBus(mitt)
emitter.on() 接收数据的那个组件
emitter.emit() 发送数据的那个组件

+

VueX 简介

image-20201027154214547.

+

Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享

+

使用 Vuex 管理数据的好处：
A.能够在 vuex 中集中管理共享的数据，便于开发和后期进行维护
B.能够高效的实现组件之间的数据共享，提高开发效率
C.存储在 vuex 中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新

+

注意,不是任何数据都适合放在vuex中的，一般情况下，只有组件之间共享的数据，才有必要存储到vuex 中；对于组件中的私有数据，依旧存储在组件自身的data 中即可

+

VueX 的基本使用

1.安装

+
1
2
# If using Vue 3.0 + Vuex 4.0:
npm install vuex@next --save
+ +

2.配置(store/index.js)

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 引入VueX
import { createStore } from "vuex";

export default createStore({
  // state提供唯一的公共数据源，所有共享的数据都要统一放到Store的state中进行存储
  state() {
    return {};
  },
  // mutations用于修改Store中的数据 相当于methods
  mutations: {},
  // actions用于处理异步任务
  actions: {},
  // getters 用于对Store中的数据进行加工处理形成新的数据。 相当于computed计算属性
  getters: {},
});
+ +

3.挂载(src/main.js)

+
1
2
3
4
import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";
createApp(App).use(store).mount("#app");
+ +

VueX 的核心概念

State(类似于 Vue 中的 data 选项)

State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储

+

定义语法:

+
1
2
3
4
5
6
7
const store = createStore({
  state() {
    return {
      属性名: 属性值,
    };
  },
});
+ +

访问:

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 组件的script中访问(方法1)
this.$store.state.全局数据属性名

// 组件的script中访问(方法2)
// 1.首先在store中定义数据(store/index.js)
import { createStore } from "vuex";

export default createStore({
  state() {
    return {
      count: 0,
      msg: "Welcome to Your Vue2"
    };
  },
  mutations: {},
  actions: {},
  modules: {}
});

// 2.在需要用到这个数据的组件中
<script>
import { mapState } from "vuex";
export default {
  name: "HelloWorld",
  computed: {
    // count() {
    //   return this.$store.state.count;
    // },
    // msg() {
    //   return this.$store.state.msga;
    // },
    ...mapState(["count", "msg"])
  }
};
</script>
+ +

mutation 相当于 Vue 中 methods

Mutation 用于修改 Store 中的数据。 1.只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。 2.通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

+
方法 1(未传参数)

1.store/index.js

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 定义Mutation
import { createStore } from "vuex";

export default createStore({
  state() {
    return {
      aname: "张三",
    };
  },
  mutations: {
    // 1.获取state中的数据
    // 2.传参问题
    changeName(state) {
      state.aname = "李四";
    },
  },
});
+ +

2.在某一个组件文件中

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// 触发mutation
<template>
  <div class="hello">
    <h1 @click="changeName">{{ msg }}</h1>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      name: "我最喜欢福原爱",
    };
  },
  // created(){
  //   this.handleChange();
  // },
  methods: {
    // 这个方法是用来触发store中的mutations中的changeName方法的
    handleChange() {
      this.$store.commit("changeName");
    },
  },
  computed: {
    ...mapState(["aname"]),
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
+ +
方法 2(传参数)

1.store/index.js

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { createStore } from "vuex";

export default createStore({
  state() {
    return {
      aname: "张三",
    };
  },
  mutations: {
    // 1.获取state中的数据
    // 2.传参问题
    changeOtherName(state, name1) {
      state.aname = name1;
    },
  },
});
+ +

2.在某一个组件文件中

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<template>
  <div class="hello">
    <h1 @click="changeName">{{ msg }}</h1>
    <h2 @click="changeOtherName(name)">{{aname}}</h2>
  </div>
</template>

<script>
import {mapState,mapMutations} from "vuex"
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data(){
    return {
      name: "我最喜欢福原爱"
    }
  },
  // created(){
  //   this.handleChange();
  // },
  methods: {
    // 这个方法是用来触发store中的mutations中的changeName方法的
    handelOtherChange(){
       let name = this.name;
       this.$store.commit("changeOtherName",name);
     }
    ...mapMutations(['changeName','changeOtherName'])
  },
  computed: {
    ...mapState(['aname'])
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

+ +
方法 3

1.store/index.js

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { createStore } from "vuex";

export default createStore({
  state() {
    return {
      aname: "张三",
    };
  },
  mutations: {
    // 1.获取state中的数据
    // 2.传参问题
    changeName(state) {
      state.aname = "李四";
    },
    changeOtherName(state, name1) {
      state.aname = name1;
    },
  },
});
+ +

2.在某一个组件文件中

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<template>
  <div class="hello">
    <h1 @click="changeName">{{ msg }}</h1>
    <h2 @click="changeOtherName(name)">{{aname}}</h2>
  </div>
</template>

<script>
import {mapState,mapMutations} from "vuex"
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data(){
    return {
      name: "我最喜欢福原爱"
    }
  },
  // created(){
  //   this.handleChange();
  // },
  methods: {
    ...mapMutations(['changeName','changeOtherName'])
  },
  computed: {
    ...mapState(['aname'])
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>


+ +

action 用于异步处理数据

Action 用于处理异步任务。
如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，
但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。

+
方法 1

1.store/index.js

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { createStore } from "vuex";

export default createStore({
  // 让计数器 每秒加2
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    add(state, val) {
      state.count += val;
    },
  },
  actions: {
    // context就是上下文
    asyncAdd(context, val) {
      console.log(context);
      setInterval(function () {
        // 用commit触发同步方法
        context.commit("add", val);
      }, 1000);
    },
  },
  getters: {},
});
+ +

2.在某一个组件中

+
1
2
3
4
5
6
7
methods: {
  handle() {
    // 在调用dispatch 函数，
    // 触发actions 时携带参数
    this.$store.dispatch('addNAsync', 5)
  }
}
+ +
方法 2

2.在某一个组件中使用

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<template>
  <div class="hello">
    <h1 @click="asyncAdd(2)">{{ msg }}</h1>
    <p>{{ count }}</p>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  computed: {
    ...mapState(["count"])
  },
  methods: {
    ...mapActions(["asyncAdd"])
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

+ +

getter 相当于 Vue 中 computed

Getter 用于对 Store 中的数据进行加工处理形成新的数据。
1.Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。
2.Store 中数据发生变化，Getter 的数据也会跟着变化

+
方法 1

1.store/index.js

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { createStore } from "vuex";

export default createStore({
  // 第一步: 声明数据
  // 第二步: 写按钮 让数据变化
  // 第三步: 当数据变化的时候 把数据同步更新到页面上
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    add(state) {
      state.count++;
    },
  },
  actions: {},
  getters: {
    num(state) {
      return state.count;
    },
  },
});
+ +

2.在某一个组件中使用

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="add">点我让数字自增{{num}}</button>
  </div>
</template>

<script>
import {mapMutations,mapGetters} from "vuex"
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  methods: {
    ...mapMutations(['add'])
  },
  computed: {
  	// this.$srote.getters.num
    ...mapGetters(['num'])
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>


+ +
+

https://www.v2ex.com/t/347227 > https://bigdata.bihell.com/language/javascript/vue/vuex.html#揭开-vuex-的神秘面纱 > https://cn.vuejs.org/v2/guide/state-management.html#简单状态管理起步使用

+
+

总结

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 一个完整的 vuex 例子
import { createStore } from "vuex";

export default createStore({
  state() {
    return {
      str: "123",
    };
  },
  // 同步方法
  mutations: {
    editStr(state, payload) {
      state.str = payload;
    },
  },
  actions: {
    asyncEditStr(context, payload) {
      context.commit("editStr", payload);
    },
  },
  modules: {},
});
+ +

vue-compositionAPI 的使用

+

定义变量 ref、reactive

    +
  • ref 定义简单数据类型
    • +
  • reactive 定义复杂数据类型
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<template>
  <div class="box">
    <h1>这里相当于 optionsAPI里面的data</h1>
    <div>{{ hello }}</div>
    <div>{{ obj }}</div>
  </div>
</template>

<script>
// 注意要引入vue里面的方法才可以使用
import { reactive, ref } from "vue";
export default {
  name: "App",
  // components: {}
  setup() {
    let hello = ref("hello");
    let obj = reactive({
      name: "罗老师",
      age: 18,
    });
    // 导出变量
    return {
      hello,
      obj,
    };
  },
};
</script>

<style scoped>
.box {
  text-align: center;
  background-color: skyblue;
}
</style>
+ +

方法的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<template>
  <div class="box">
    <h1>这里相当于 optionsAPI里面的 methods</h1>
    <h2>
      您将学习到修改 ref 和 reactive 里面的值和使用
      在compositions里面使用optionsAPI里面的methods
    </h2>
    <div>{{ hello }}</div>
    <div>{{ obj }}</div>
    <button @click="changeName">点击我修改值</button>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
export default {
  name: "App",
  // components: {}
  setup() {
    let hello = ref("hello");
    let obj = reactive({
      name: "罗老师别这样",
      age: 18,
    });

    function changeName() {
      hello.value = "不hello";
      obj.name = "罗老师";
    }
    // 导出
    return {
      hello,
      obj,
      changeName,
    };
  },
};
</script>

<style scoped>
.box {
  text-align: center;
  background-color: pink;
}
</style>
+ +

watch 监听值的变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<template>
  <div class="box">
    <h1>这里相当于 optionsAPI里面的 watch</h1>
    <h2>
      您将学习到在compositions里面使用optionsAPI里面的watch 注意看控制台
    </h2>
    <div>{{ num }}--{{ num2 }}</div>
    <button @click="changeNum">点击我数字变化</button>
  </div>
</template>

<script>
import { ref, watch } from "vue";
export default {
  name: "App",
  // components: {}
  setup() {
    let num = ref(100);
    let num2 = ref(200);

    function changeNum() {
      setInterval(() => {
        num.value++;
        num2.value++;
      }, 500);
    }
    // 监听单一的值;
    watch(
      () => num.value, //监听num
      (count, prevCount) => {
        console.log("num 变化后的值", count, "num 变化前的值", prevCount);
      }
    );
    //监听多个值
    watch(
      [num, num2], //监听num
      ([num, num2], [prevNum, prevNum2]) => {
        console.log("num 变化后的值", num, "num 变化前的值", prevNum);
        console.log("num2 变化后的值", num2, "num2 变化前的值", prevNum2);
      }
    );
    // 导出
    return {
      num,
      num2,
      changeNum
    };
  }
};
</script>

<style scoped>
.box {
  text-align: center;
  background-color: skyblue;
}
</style>

+ +

watchEffect

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<template>
  <div class="box">
    <h1>这里相当于 optionsAPI里面的 watch</h1>
    <h2>您将学习到在compositions里面使用optionsAPI里面的watch 注意看控制台</h2>
    <div>{{ num }}--{{ num2 }}</div>
    <button @click="changeNum">点击我数字变化</button>
  </div>
</template>

<script>
import { ref, watchEffect } from "vue";
export default {
  name: "App",
  // components: {}
  setup() {
    let num = ref(100);
    let num2 = ref(200);

    function changeNum() {
      setInterval(() => {
        num.value++;
        num2.value++;
      }, 500);
    }

    //监听多个值
    watchEffect(() => {
      console.log(num.value);
      console.log(num2.value);
    });

    // 导出
    return {
      num,
      num2,
      changeNum,
    };
  },
};
</script>

<style scoped>
.box {
  text-align: center;
  background-color: pink;
}
</style>
+ +

computed

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<template>
  <div class="box">
    <h1>这里相当于 optionsAPI 里面的 computed</h1>
    <h2>注意看控制台</h2>
    <div>helloComputed={{ helloComputed }}</div>
    <div>numComputed={{ numComputed }}</div>
  </div>
</template>

<script>
// 注意要引入vue里面的方法才可以使用
import { computed, ref } from "vue";
export default {
  name: "App",
  // components: {}
  setup() {
    let hello = ref("hello");
    let helloComputed = computed(() => {
      return hello.value + "World"; //计算完毕之后变成helloWorld
    });
    let num = ref(21);
    let numComputed = computed({
      get: () => num.value + 11, //直接调用执行这里
      set: (val) => {
        // 2.执行这里
        console.log("numComputed.value=", val);
      },
    });
    // 1.给 numComputed 赋值
    numComputed.value = 20;
    // 导出变量
    return {
      helloComputed,
      numComputed,
    };
  },
};
</script>

<style scoped>
.box {
  text-align: center;
  background-color: skyblue;
}
</style>
+ +

调用 vuex

    +
  • App.vue
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<template>
  <div class="box">
    <h2>您将学习到修改 如何调用 vuex里面的值和方法</h2>
    <div>vuex里面的msg的值是---{{ msg }}</div>
    <div>vuex里面的msg被计算属性之后的值----{{ msgComputed }}</div>
    <button @click="changeMsg">点击修改vuex-msg</button>
  </div>
</template>

<script>
import { computed } from "vue";
import { useStore } from "vuex";
export default {
  name: "vuex",
  // components: {}
  setup() {
    let store = useStore();
    //获取 state() 里面的属性
    let msg = computed(() => store.state.msg);
    //获取 getters()里面的属性
    let msgComputed = computed(() => store.getters.msg);
    function changeMsg() {
      // 调用mutations的方法
      store.commit("changeMsg");
      // 调用actios里面的方法
      store.dispatch("fn");
    }
    return {
      msg,
      changeMsg,
      msgComputed,
    };
  },
};
</script>

<style scoped>
.box {
  text-align: center;
  background-color: pink;
}
</style>
+ +
    +
  • store/index.js
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { createStore } from "vuex";

export default createStore({
  state() {
    return {
      msg: "here is vuex",
    };
  },
  mutations: {
    changeMsg(state) {
      state.msg = "msg被修改了";
    },
  },
  actions: {
    async fn() {
      let a;
      setTimeout(() => {
        a = 90;
      }, 0);
      a = 90;

      console.log(a);
    },
  },
  modules: {},
  getters: {
    msg(state) {
      return state.msg + "计算属性";
    },
  },
});
+ +

vue 获取元素

https://blog.csdn.net/weixin_43233914/article/details/108776124

+

https://v3.cn.vuejs.org/guide/composition-api-template-refs.html#%E4%BE%A6%E5%90%AC%E6%A8%A1%E6%9D%BF%E5%BC%95%E7%94%A8

+

vue3 语法糖

rfcs/0000-script-setup.md at script-setup-2 · vuejs/rfcs (github.com)

+
头像头像
WaterBoat
正因你我生于繁华，弥足之花方显珍贵
原创Vue 3.0 笔记
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
Vue6
喜欢这篇文章的人也看了
avatar
正因你我生于繁华，弥足之花方显珍贵

WaterBoat

正因你我生于繁华，弥足之花方显珍贵
文章目录
  1. 1. Node（后端）中的 MVC 与 前端中的 MVVM 之间的区别（了解内容）
  2. 2. Vue.js 基本代码 和 MVVM 之间的对应关系
  3. 3. 什么是 Vue 中的指令
    1. 3.1. 8.1 Vue 指令之 插值表达式 {\{ }\}
    2. 3.2. 8.2 Vue 指令之 v-cloak
    3. 3.3. 8.3 Vue 指令之 v-text
    4. 3.4. 8.4 Vue 指令之 v-html
    5. 3.5. 8.5 Vue 指令之 v-bind: 属性绑定
    6. 3.6. 8.6 Vue 指令之 v-on: 事件绑定
    7. 3.7. 8.7 【案例】跑马灯效果
    8. 3.8. 8.8 Vue 指令之 v-model 实现 双向数据绑定
    9. 3.9. 8.9 在 Vue 中使用 class 样式
  4. 4. Vue 常用特性
    1. 4.1. 表单基本操作
    2. 4.2. 表单修饰符
    3. 4.3. 自定义指令
      1. 4.3.1. Vue.directive 注册全局指令
      2. 4.3.2. Vue.directive 注册全局指令 带参数
      3. 4.3.3. 自定义指令局部指令
    4. 4.4. 计算属性 computed
    5. 4.5. 侦听器 watch
    6. 4.6. 过滤器
      1. 4.6.1. 过滤器中传递参数
    7. 4.7. 生命周期
    8. 4.8. 数组变异方法
    9. 4.9. 替换数组
    10. 4.10. 动态数组响应式数据
    11. 4.11. 图书列表案例
      1. 4.11.1. 1、 提供的静态数据
      2. 4.11.2. 2、 把提供好的数据渲染到页面上
      3. 4.11.3. 3、 添加图书
      4. 4.11.4. 4 修改图书-上
      5. 4.11.5. 5 修改图书-下
      6. 4.11.6. 6 删除图书
    12. 4.12. 常用特性应用场景
      1. 4.12.1. 1 过滤器
      2. 4.12.2. 2 自定义指令
      3. 4.12.3. 3 计算属性
      4. 4.12.4. 生命周期
  5. 5. 组件
    1. 5.1. 组件
    2. 5.2. 组件注册
      1. 5.2.1. 全局注册
        1. 5.2.1.1. 组件基础用
        2. 5.2.1.2. 组件注意事项
      2. 5.2.2. 局部注册
    3. 5.3. Vue 调试工具
    4. 5.4. Vue 组件之间传值
      1. 5.4.1. 父组件向子组件传值
      2. 5.4.2. 子组件向父组件传值
      3. 5.4.3. 兄弟之间的传递
  6. 6. vue-cli
    1. 6.1. 安装与启动
    2. 6.2. 使用 sass 全局方法 @mixnin
    3. 6.3. 样式穿透
  7. 7. vue-router
    1. 7.1. 安装
      1. 7.1.1. 配置文件书写
      2. 7.1.2. main.js 文件的书写
    2. 7.2. 路由重定向 router-redirect
    3. 7.3. 嵌套路由 router-nest
    4. 7.4. 路由传参 router-dynamic
      1. 7.4.1. 直接接收
      2. 7.4.2. 通过 props 属性
      3. 7.4.3. 通过回调函数
    5. 7.5. 编程式导航 router-program
    6. 7.6. 命名路由
  8. 8. Vuex 统一状态管理
    1. 8.1. VueX 概述
      1. 8.1.1. 为什么要学习 VueX
      2. 8.1.2. VueX 简介
    2. 8.2. VueX 的基本使用
    3. 8.3. VueX 的核心概念
      1. 8.3.1. State(类似于 Vue 中的 data 选项)
      2. 8.3.2. mutation 相当于 Vue 中 methods
        1. 8.3.2.1. 方法 1(未传参数)
        2. 8.3.2.2. 方法 2(传参数)
        3. 8.3.2.3. 方法 3
      3. 8.3.3. action 用于异步处理数据
        1. 8.3.3.1. 方法 1
        2. 8.3.3.2. 方法 2
      4. 8.3.4. getter 相当于 Vue 中 computed
        1. 8.3.4.1. 方法 1
    4. 8.4. 总结
  9. 9. vue-compositionAPI 的使用
    1. 9.1. 定义变量 ref、reactive
    2. 9.2. 方法的使用
    3. 9.3. watch 监听值的变化
    4. 9.4. watchEffect
    5. 9.5. computed
    6. 9.6. 调用 vuex
  10. 10. vue 获取元素
  11. 11. vue3 语法糖
最近发布
Solidity 龟速入门教程
Solidity 龟速入门教程
Cypress 使用指南
Cypress 使用指南
npm 别名---让小明变成小红
npm 别名---让小明变成小红
发布-订阅模式
发布-订阅模式
Vue Cli 配置
Vue Cli 配置
引用到评论
随便逛逛博客分类文章标签
复制地址关闭热评深色模式轉為繁體
\ No newline at end of file diff --git "a/2020/05/08/\345\211\215\347\253\257/Vue/03-Vue3-\347\273\204\345\220\210\345\274\217 API/index.html" "b/2020/05/08/\345\211\215\347\253\257/Vue/03-Vue3-\347\273\204\345\220\210\345\274\217 API/index.html" new file mode 100644 index 0000000000..57e09e9d21 --- /dev/null +++ "b/2020/05/08/\345\211\215\347\253\257/Vue/03-Vue3-\347\273\204\345\220\210\345\274\217 API/index.html" @@ -0,0 +1,908 @@ +Vue 3.0 组合式 API | WaterBoat的博客
加载头像
原创

Vue 3.0 组合式 API

发表于更新于
长沙

Vue 3.0 组合式 API

1. 为什么学习 Vue3

+

目标: 了解学习 Vue3 的必要性。

+
+
    +

  • Vue3 运行性能大幅提升，速度是 Vue2 的 1.5 倍左右

    +
    • +

  • Vue3 支持 tree shaking，可以进行按需编译，编译后的文件体积比 Vue2 更小

    +
    • +

  • Vue3 组合式 API 使应用中的功能代码更聚合，使组件间公共逻辑的抽取更容易

    +
    • +

  • Vue3 对 TypeScript 的支持更加友好，对大型前端应用的支持更加游刃有余

    +
    • +

  • Vue3 中提供了更加先进的功能，比如 teleport，suspense 等

    +
    • +

  • Vue 是目前国内前端使用者最多的框架，Vue3 是将来的必然趋势

    +
    • +
+ + +

Vue3 官方中文文档

+

2. 使用 Vite 创建项目

+

目标: 能够使用 vite 构建工具创建 Vue 应用。Vite 官方

+
+

Vite 是一款新型的前端构建工具，核心卖点就是快，启用速度快，编译速度快。

+
    +
  1. 创建应用：npm init vite-app vue-tutorial 或者 npx create-vite-app vue-tutorial
    2. +
  2. 切换至应用根目录：cd vue-tutorial
    3. +
  3. 下载应用依赖：npm install
    4. +
  4. 启动应用：npm run dev
    5. +
  5. 访问应用：localhost:3000
    6. +
+ + +

Vite 虽然构建速度非常快，但目前它默认安装的插件非常少，随着开发过程依赖增多，需要自己额外配置，所以做项目时仍然使用 vue-cli

+

3. 安装编辑器插件

+

目标：安装 VSCode 编辑器插件

+
+
    +
  1. Volar: Vue3 语法支持
    2. +
  2. Vue.js AutoImport: 引用组件
    3. +
  3. Vue3 Snippets: Vue3 代码片段
    4. +
  4. Prettier-Code formatter: 代码格式化
    5. +
  5. ESLint: 代码质量检查
    6. +
  6. EditorConfig for VS Code: 覆盖编辑器编码风格配置
    7. +
  7. Material Icon Theme: 编辑器主题
    8. +
  8. Chinese (Simplified) Language Pack for Visual Studio Code: 中文语言支持
    9. +
+

4. 组合式 API 的优势

+

目标：掌握组合式 API 相比较选项式 API，它的优势是什么。

+
+

在选项式 API 中，它将数据和逻辑进行了分离，所有不相关的数据被放置在了一起，所以不相关的逻辑被放置在了一起，随着应用规模的增加，项目将会变得越来越难以维护。

+ + +

在组合式 API 中，它将同一个功能的逻辑和数据放置在了一起，使同一个的功能代码更加聚合。

+ + +

同一个功能的代码可以被抽取到单独的文件中，使应用代码更加维护。

+ + +

5. 组合式 API 入口

+

目标：掌握 setup 函数的基本使用。

+
+
+
    +
  • 讲解 setup 函数的执行时机以及 this 指向
    • +
  • 讲解 setup 函数的返回值
    • +
  • 讲解 setup 函数如何使用
    • +
+
+

setup 函数是一个新的组件选项，作为在组件中使用组合式 API 的入口

+

setup 函数在任何生命周期函数之前执行，且函数内部 this 为 undefined，它不绑定组件实例对象

+
1
2
3
4
5
6
7
8
export default {
  setup() {
    console.log(this); // 1. undefined
  },
  beforeCreate() {
    console.log("before create"); // 2. before create
  },
};
+ +

setup 函数的返回值为对象类型，对象中的属性可以在其他选项和模板中使用, 因为对象中的属性会被添加到组件实例对象中

+
1
2
3
4
5
6
7
8
9
10
export default {
  setup() {
    let name = "张三";
    let age = 20;
    return { name, age };
  },
  beforeCreate() {
    console.log(this.name);
  },
};
+ +
1
<template>{{ name }} | {{ age }}</template>
+ +

注意：在 setup 方法中声明的变量虽然可以在模板中显示，但它不是响应式数据，就是说当数据更改后界面不会发生变化。

+
1
2
3
4
5
6
7
8
9
10
11
export default {
  setup() {
    let name = "张三";
    let age = 20;
    const onClickHandler = () => {
      name = "李四";
      age = 30;
    };
    return { name, age, onClickHandler };
  },
};
+ +
1
2
3
4
<template>
  {{ name }} | {{ age }}
  <button @click="onClickHandler">button</button>
</template>
+ +

6. 响应式组件状态 ref

+

目标：掌握使用 ref 方法创建、修改响应式数据的方式。

+
+
+
    +
  • 讲解 ref 函数的作用是什么
    • +
  • 讲解如何使用 ref 方法创建、修改基本数据类型的响应式数据
    • +
  • 讲解如何使用 ref 方法创建、修改引用数据类型的响应式数据
    • +
+
+

ref 函数用于创建响应式数据，即数据变化视图更新。

+
+

使用 ref 函数创建基本数据类型的响应式数据。

+
1
2
3
4
5
6
7
8
import { ref } from "vue";
export default {
  setup() {
    const name = ref("张三");
    const age = ref(20);
    return { name, age };
  },
};
+ +

使用 ref 创建的数据在模板中可以直接使用。

+
1
<template>{{ name }} | {{ age }}</template>
+ +

在 JavaScript 中通过 value 属性修改数据。

+
1
2
3
4
5
6
7
8
9
10
11
export default {
  setup() {
    const name = ref("张三");
    const age = ref(20);
    const onClickHandler = () => {
      name.value = "李四";
      age.value = 30;
    };
    return { name, age, onClickHandler };
  },
};
+ +
1
2
3
4
<template>
  {{ name }} | {{ age }}
  <button @click="onClickHandler">button</button>
</template>
+ +
+

使用 ref 函数创建引用数据类型的响应式数据。

+
1
2
3
4
5
6
7
8
9
10
11
12
export default {
  setup() {
    const person = ref({ name: "张三", age: 30 });
    const onClickHandler = () => {
      person.value.name = "王五";
      person.value.age = 50;
      // 重新为 person 赋值也是可以的
      // person.value = {name: '李四', age: 40}
    };
    return { person, onClickHandler };
  },
};
+ +
1
2
3
4
<template>
  {{ person.name }} | {{ person.age }}
  <button @click="onClickHandler">button</button>
</template>
+ +

7. 响应式组件状态 reactive

+

目标: 掌握使用 reactive 函数创建响应式数据的方式, 掌握 reactive 函数和 ref 函数的区别

+
+
+
    +
  • 讲解 reactive 函数的作用
    • +
  • 讲解如何使用 reactive 函数创建基于引用数据类型的响应式数据
    • +
  • 讲解 reactive 函数在使用时的注意事项
    • +
  • 对比 ref 方法和 reactive 方法在使用上的不同
    • +
+
+

reactive 函数也可以用来创建响应式数据。

+
+

使用 reactive 函数创建基于引用数据类型的响应式数据。

+
1
2
3
4
5
6
7
8
9
10
11
import { reactive } from "vue";
export default {
  setup() {
    const person = reactive({ name: "张三", age: 20 });
    const onClickHandler = () => {
      person.name = "李四";
      person.age = 50;
    };
    return { person, onClickHandler };
  },
};
+ +
1
2
3
4
<template>
  {{ person.name }} | {{ person.age }}
  <button @click="onClickHandler">button</button>
</template>
+ +
+

reactive 函数只能基于引用数据类型创建响应式数据，对于基本数据类型它是不起作用的。

+
1
2
3
4
5
6
7
8
9
10
11
export default {
  setup() {
    let name = reactive("张三");
    const onClickHandler = () => {
      // name = "李四"
      // name.value = "李四"
      name = reactive("李四");
    };
    return { name, onClickHandler };
  },
};
+ +

需求: 在点击按钮后将 newPerson 中的值赋值给 person

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default {
  name: "App",
  setup() {
    let person = reactive({ name: "张三", age: 30 });
    const newPerson = { name: "李四", age: 50 };
    const onClickHandler = () => {
      for (const attr in newPerson) {
        person[attr] = newPerson[attr];
      }
      // Object.assign(person, newPerson);
    };
    return { person, onClickHandler };
  },
};
+ +
+

ref 既可以创建基于基本数据类型的响应式数据也可以创建基于引用数据类型的响应式数据，reactive 只用于创建基于引用数据类型的响应式数据

+

ref 在 JS 中使用时需要点上 value, 而 reactive 在 JS 中使用时不需要点上 value，在模板中使用时都不需要加 value

+

ref 创建的响应式数据可以被直接整体赋值，而 reactive 创建的响应式数据不可以，若要整体赋值需要使用遍历的方式

+
+

为什么使用 ref 方法创建的响应式数据在修改时需要使用 value 属性，而使用 reactive 方法创建的响应式数据不需要?

+

ref 既可以创建基于基本数据类型的响应式数据, 也可以创建基于引用数据类型的响应式数据, 基本数据类型的响应式是通过类的属性访问器实现的, 引用数据类型的响应式是通过代理对象实现的, 虽然内部实现不同, 但是为了更好的 API 使用体验, 内部封装了统一的调用入口, 即 value 属性, 具体通过哪种方式创建响应式数据由内部统一处理.

+

reactive 只用于创建基于引用数据类型的响应式数据, 不需要供统一的调用入口, 所以没有必要使用 value 属性.

+

8. 计算属性 computed

+

目标：掌握使用 computed 函数创建计算属性的方式

+
+
+
    +
  • 说明 computed 方法的作用及使用方式
    • +
  • 通过名字搜索案例学习 computed 方法的使用
    • +
+
+

接收回调函数作为参数，基于回调函数中使用的响应式数据进行计算属性的创建. 回调函数的返回值就是计算结果.

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { ref, computed } from "vue";
export default {
  setup() {
    const names = ref([
      "林俊杰",
      "孙燕姿",
      "周杰伦",
      "张惠妹",
      "刘若英",
      "林宥嘉",
      "刘德华",
      "张韶涵",
      "周笔畅",
      "孙楠",
    ]);
    const search = ref("");
    const filterNames = computed(() =>
      names.value.filter((name) => name.includes(search.value)),
    );
    return { search, filterNames };
  },
};
+ +
1
2
3
4
5
6
<template>
  <input type="text" v-model="search" />
  <ul>
    <li v-for="name in filterNames">{{ name }}</li>
  </ul>
</template>
+ +

9. 监听状态 watch

+

目标：掌握 watch 函数监听数据的方式

+
+
+
    +
  • 说明 watch 函数的作用是什么
    • +
  • 如何使用 watch 函数监听基于 ref 创建的响应式数据 (基本数据类型、引用数据类型)
    • +
  • 如何使用 watch 监听响应式数据内部的具体属性 (基本数据类型、引用数据类型)
    • +
  • 如何使用 watch 监听多个值的变化
    • +
  • 说明 watch 方法中的 immediate 配置选项的作用
    • +
+
+

watch 函数用于监听响应式数据的变化。

+
+

使用 watch 函数监听基于 ref 创建的响应式数据 (基本数据类型)。

+
1
2
3
4
5
6
7
8
9
10
11
import { ref, watch } from "vue";
export default {
  setup() {
    const text = ref("");
    watch(text, (current, previous) => {
      console.log("current", current);
      console.log("previous", previous);
    });
    return { text };
  },
};
+ +
1
2
3
<template>
  <input type="text" v-model="text" />
</template>
+ +

使用 watch 监听基于 ref 创建的响应式数据 (引用数据类型)。

+
1
2
3
4
5
6
7
8
9
10
11
import { ref, watch } from "vue";

export default {
  name: "App",
  setup() {
    const person = ref({ name: "张三" });
    watch(person.value, (current) => {
      console.log(current);
    });
  },
};
+ +
1
2
3
<template>
  <button @click="onClickHandler">{{ person.name }}</button>
</template>
+ +

使用 watch 监听响应式数据内部的具体属性 (基本数据类型)

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { ref, watch } from "vue";

export default {
  name: "App",
  setup() {
    const person = ref({ name: "张三" });
    watch(
      () => person.value.name,
      (current) => {
        console.log(current);
      },
    );
    return { person };
  },
};
+ +
+

使用 watch 监听响应式数据内部的具体属性 (引用数据类型)

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <p>{{ person.brand.title }} {{ person.name }}</p>
  <button @click="changeBrandTitle">title</button>
  <button @click="changeName">name</button>
</template>

<script>
import { ref, watch } from "vue";
export default {
  name: "App",
  setup() {
    const person = ref({ brand: { title: "宝马" }, name: "张三" });
    const changeBrandTitle = () => {
      person.value.brand.title = "奔驰";
    };
    const changeName = () => {
      person.value.name = "李四";
    };
    watch(person.value.brand, (current) => {
      console.log(current);
    });
    return { person, changeBrandTitle, changeName };
  },
};
</script>
+ +

使用 watch 监听基于 reactive 创建的响应式数据。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
import { reactive, watch } from "vue";
export default {
  setup() {
    const person = reactive({ name: "张三" });
    const onClickHandler = () => {
      person.name = "李四";
    };
    watch(person, (current, previous) => {
      console.log(current);
    });
    return { person, onClickHandler };
  },
};
+ +
1
2
3
4
<template>
  {{ person.name }}
  <button @click="onClickHandler">button</button>
</template>
+ +
+

使用 watch 监听多个值的变化

+
1
2
3
4
5
6
7
8
9
10
11
import { ref, watch } from "vue";
export default {
  setup() {
    const firstName = ref("");
    const lastName = ref("");
    watch([firstName, lastName], (current) => {
      console.log(current);
    });
    return { firstName, lastName };
  },
};
+ +
1
2
3
4
<template>
  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
</template>
+ +

使 watch 监听数据在初始时执行一次

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { ref, watch } from "vue";
export default {
  setup() {
    const firstName = ref("hello");
    const lastName = ref("world");
    watch(
      [firstName, lastName],
      (current) => {
        console.log(current);
      },
      {
        immediate: true,
      },
    );
    return { firstName, lastName };
  },
};
+ +

10. 监听状态 watchEffect

+

目标：掌握使用 watchEffect 监听数据的方式

+
+
+
    +
  • 说明 watchEffect 方法的作用
    • +
  • 说明 watchEffect 方法的使用方式
    • +
+
+

watchEffect 和 watch 一样，都是用于监听响应式数据的变化。

+
+

watchEffect 只关心数据的最新值，不关心旧值是什么，而且 watchEffect 默认会在初始时执行一次。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { ref, watchEffect } from "vue";

export default {
  name: "App",
  setup() {
    const firstName = ref("");
    const lastName = ref("");
    watchEffect(() => {
      console.log(firstName.value);
      console.log(lastName.value);
    });
    return { firstName, lastName };
  },
};
+ +
1
2
3
4
<template>
  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
</template>
+ +

11. toRef 函数

+

目标：掌握 toRef 函数的使用方式及应用场景

+
+
+
    +
  • 通过一段基础的 JavaScript 代码回顾基本数据类型的在赋值时的值传递特性, 为讲解 toRef 方法做铺垫
    • +
  • 通过一段基础的 Vue 代码了解在不使用 toRef 方法时存在的问题
    • +
  • 说明 toRef 方法的作用并使用 toRef 方法解决问题
    • +
  • 说明 toRef 方法的应用场景
    • +
+
+

说出以下代码的输出结果是什么?

+
1
2
3
4
5
let person = { name: "张三" };
let name = person.name;
person.name = "李四";
console.log(person.name); // "李四"
console.log(name); // ?
+ +
+

当按钮被点击时模板中的数据会发生更新吗?

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <p>{{ name }}</p>
  <p>{{ person }}</p>
  <button @click="onClickHandler">button</button>
</template>
<script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    const person = ref({ name: "张三" });
    const onClickHandler = () => {
      person.value.name = "李四";
    };
    return {
      name: person.value.name,
      person,
      onClickHandler,
    };
  },
};
</script>
+ +
+

toRef 方法用于将响应式数据内部的普通数据转换为响应式数据，并且转换后的数据和原始数据存在引用关系，存在引用关系意味着当原始数据发生变化后，toRef 转换后的数据也会跟着变化。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <p>{{ name }}</p>
  <p>{{ person }}</p>
  <button @click="onClickHandler">button</button>
</template>

<script>
import { ref, toRef } from "vue";
export default {
  name: "App",
  setup() {
    const person = ref({ name: "张三" });
    const onClickHandler = () => {
      person.value.name = "李四";
    };
    return {
      name: toRef(person.value, "name"),
      person,
      onClickHandler,
    };
  },
};
</script>
+ +
+

需求: 当响应式数据的结构层级比较深时，在模板中使用起来也比较繁琐，能不能在模板中使用时简化结构层级呢？

+
1
2
3
4
5
6
export default {
  setup() {
    const person = ref({ brand: { name: "宝马" } });
    return { person };
  },
};
+ +
1
<template>{{ person.brand.name }}</template>
+ +

如果能够将模板中的 person.brand.name 简化成 brandName 的话，模板代码会更加简洁，所以按照想法代码很自然的就写成了下面这样。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <p>{{ person }}</p>
  <p>{{ brandName }}</p>
  <button @click="onClickHandler">button</button>
</template>

<script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    const person = ref({ brand: { name: "宝马" } });
    const onClickHandler = () => {
      person.value.brand.name = "奔驰";
    };
    return {
      person,
      brandName: person.value.brand.name,
      onClickHandler,
    };
  },
};
</script>
+ +
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <p>{{ person }}</p>
  <p>{{ brandName }}</p>
  <button @click="onClickHandler">button</button>
</template>

<script>
import { ref, toRef } from "vue";
export default {
  name: "App",
  setup() {
    const person = ref({ brand: { name: "宝马" } });
    const onClickHandler = () => {
      person.value.brand.name = "奔驰";
    };
    return {
      person,
      brandName: toRef(person.value.brand, "name"),
      onClickHandler,
    };
  },
};
</script>
+ +

12. toRefs 函数

+

目标：掌握 toRefs 方法批量转换响应式数据的方式。

+
+
+
    +
  • 说明 toRefs 方法的作用是什么以及基本用法
    • +
  • 通过例子验证 toRefs 方法的使用方式
    • +
+
+

通过 toRef 方法一次只能转换一个数据，通过 toRefs 方法可以实现批量数据转换。

+

toRefs 方法接收引用数据类型的响应式数据，它可以将数据中的第一层属性全部转换为响应式数据, 返回值是一个对象, 对象中存储了所有转换之后的响应式数据。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
import { reactive, toRefs } from "vue";

export default {
  name: "App",
  setup() {
    const person = reactive({
      name: "张三",
      age: 20,
      brand: { title: "宝马", year: 1 },
    });
    return { ...toRefs(person) };
  },
};
+ +
1
<template>{{ name }} {{ age }} {{ brand.title }} {{ brand.year }}</template>
+ +

对引用数据类型内部的数据进行转换

+
1
2
3
4
5
6
7
8
9
10
11
12
13
import { reactive, toRefs } from "vue";

export default {
  name: "App",
  setup() {
    const person = reactive({
      name: "张三",
      age: 20,
      brand: { title: "宝马", year: 1 },
    });
    return { ...toRefs(person), ...toRefs(person.brand) };
  },
};
+ +
1
<template>{{ name }} {{ age }} {{ title }} {{ year }}</template>
+ +

13. 组件通讯

+

目标：掌握组合式 API 中父子组件通信的方式

+
+
+
    +
  • 讲解父组件如何向子组件传递数据
    • +
  • 讲解子组件如何更改父组件传递过来的数据
    • +
+
+

父组件通过 props 向子组件传递数据

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div>I am parent component</div>
  <hr />
  <ChildComp :msg="msg"></ChildComp>
</template>

<script>
  import ChildComp from "./components/ChildComp.vue";
  import { ref } from "vue";
  export default {
    components: { ChildComp },
    setup() {
      const msg = ref("a message from parent");
      return { msg };
    },
  };
</script>
+ +
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div>
    {{ childMsg }}
    <hr />
    {{ msg }}
  </div>
</template>
<script>
import { computed } from "vue";
export default {
  name: "ChildComponent",
  props: ["msg"],
  setup(props) {
    // 当父组件更新 props 时 setup 函数是不会重新执行的
    // 所以在 setup 函数中使用 props 时需要用到 computed 或者 watch 来响应 props 的变化
    // 注意: 直接在模板中使用 props 数据是没有这个问题的
    const childMsg = computed(() => props.msg + "😀😀");
    return { childMsg };
  },
};
</script>
+ +

子组件通过自定义事件向父组件传递数据

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div>
    {{ childMsg }}
    <hr />
    {{ msg }}
    <hr />
    <button @click="onMsgChanged">change msg</button>
  </div>
</template>
<script>
import { computed } from "vue";

export default {
  name: "ChildComponent",
  props: ["msg"],
  setup(props, { emit }) {
    const onMsgChanged = () => {
      emit("onMsgChanged", "changed msg from children");
    };
    return { onMsgChanged };
  },
};
</script>
+ +
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <ChildComponent :msg="msg" @onMsgChanged="onMsgChanged" />
</template>

<script>
  import { ref } from "vue";
  import ChildComponent from "./components/child-component.vue";
  export default {
    components: { ChildComponent },
    name: "App",
    setup() {
      const msg = ref("i am a message");
      const onMsgChanged = (data) => {
        msg.value = data;
      };
      return { msg, onMsgChanged };
    },
  };
</script>
+ +

注意事项：在 Vue2 中，模板需要被一个根元素包裹，但是在 Vue3 中是不需要的，Vue3 支持在模板中编写代码片段。

+
1
2
3
4
<template>
  <div>{{ childMsg }}</div>
  <button @click="onClickHandler">change msg</button>
</template>
+ +

如果在模板中使用代码片段, 自定义事件需要被显式的声明在 emits 选项中.

+
1
emits: ["onMsgChanged"],
+ +

14. 组件生命周期

+

目标：掌握组件生命周期函数的使用方式 VUE3 生命周期函数

+
+
+
    +
  • 说明 setup 函数的执行时机
    • +
  • 说明 onMounted、onUpdated、onUnmounted 组件生命周期函数的执行时机
    • +
+
+

setup: Vue3 中组合式 API 的入口, 它会在创建组件实例对象前执行, 会在每次组件重新挂载时执行。

+

创建组件实例对象前执行

+
1
2
3
4
5
6
7
8
export default {
  setup() {
    console.log("setup");
  },
  beforeCreate() {
    console.log("before create");
  },
};
+ +

每次组件重新挂载时执行

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- App组件 父组件  -->
<template>
  <button @click="show = !show">toggle</button>
  <ChildComponent v-if="show"></ChildComponent>
</template>

<script>
import { ref } from "vue";
import ChildComponent from "./components/child-component.vue";
export default {
  components: { ChildComponent },
  name: "App",
  setup() {
    const show = ref(true);
    return { show };
  },
};
</script>
+ +
1
2
3
4
5
6
7
8
9
10
11
<!-- ChildComponent 组件 子组件 -->
<template>child component</template>
<script>
export default {
  name: "ChildComponent",
  setup() {
    // setup 函数会在组件每次重新渲染时执行
    console.log("setup");
  },
};
</script>
+ +

onMounted 组件挂载完成后执行

+

onUpdated 组件数据更新后执行

+

onUnmounted 组件卸载后执行

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!-- child-component  -->
<template>{{ count }} <button @click="onClickHandler">button</button></template>
<script>
import { onMounted, onUnmounted, onUpdated, ref } from "vue";

export default {
  name: "ChildComponent",
  setup() {
    let timer = null;
    // 组件挂载完成之后开启定时器
    onMounted(() => {
      timer = setInterval(() => {
        console.log("timer...");
      }, 1000);
    });
    // 组件卸载完成之后清除定时器
    onUnmounted(() => {
      clearInterval(timer);
    });
    const count = ref(0);
    const onClickHandler = () => {
      count.value = count.value + 1;
    };
    // 组件更新之后在控制台中输出 onUpdated
    onUpdated(() => {
      console.log("onUpdated");
    });
    return { count, onClickHandler };
  },
};
</script>
+ +

15. 与服务端通信

+

目标：掌握在组合式 API 中实现与服务器端通讯的方式

+
+
+
    +
  • 通过例子说明如何在组合式 API 中实现与服务器端通讯的方式
    • +
  • 讲解抽取可重用逻辑的方式, 充分发挥组合式 API 的优势
    • +
+
+

向服务器端发送请求获取列表数据渲染列表数据, 没有数据要显示暂无数据, 如果请求报错展示错误信息, 加载过程显示 loading.

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script>
import { ref } from "vue";
import axios from "axios";

export default {
  name: "App",
  setup() {
    // 用于存储列表数据
    const data = ref(null);
    // 用于标识加载状态
    const loading = ref(false);
    // 用于存储错误信息
    const error = ref(null);
    // 用于发送请求的方法
    async function getPosts() {
      // 更新加载状态
      loading.value = true;
      try {
        // 发送请求
        let response = await axios.get(
          "https://jsonplaceholder.typicode.com/posts",
        );
        // 存储列表数据
        data.value = response.data;
      } catch (err) {
        // 存储错误信息
        error.value = err.message;
      }
      // 更新加载状态
      loading.value = false;
    }
    // 调用方法 发送请求
    getPosts();
    // 返回模板所需数据
    return { data, loading, error };
  },
};
</script>
+ +
1
2
3
4
5
6
7
8
9
10
<template>
  <div v-if="loading">loading...</div>
  <div v-else-if="error">{{ error }}</div>
  <div v-else-if="data && data.length > 0">
    <ul>
      <li v-for="item in data">{{ item.title }}</li>
    </ul>
  </div>
  <div v-else>暂无数据</div>
</template>
+ +

注意: 如果在导入 axios 时报错，重新启动应用程序即可。

+

将获取 Posts 数据的逻辑抽取单独文件中，使其可以在多个组件中被重复使用。

+
1
2
3
4
5
6
7
8
export default {
  name: "App",
  setup() {
    const { data, loading, error, getPosts } = usePosts();
    getPosts();
    return { data, loading, error };
  },
};
+ +
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { ref } from "vue";
import axios from "axios";

function usePosts() {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);
  async function getPosts() {
    loading.value = true;
    try {
      let response = await axios.get(
        "https://jsonplaceholder.typicode.com/posts",
      );
      data.value = response.data;
    } catch (err) {
      error.value = err.message;
    }
    loading.value = false;
  }
  return { data, loading, error, getPosts };
}
+ +

16. 获取 DOM 对象

+

目标：掌握在组合式 API 中获取 DOM 对象的方式

+
+
+
    +
  • 说明如何使用 ref 获取单个 DOM 对象
    • +
  • 说明如何使用 ref 获取一组 DOM 对象
    • +
+
+

获取单个 DOM 对象

+
1
2
3
4
5
6
7
8
9
10
import { ref, onMounted } from "vue";
export default {
  setup() {
    const divRef = ref(null);
    onMounted(() => {
      console.log(divRef.value);
    });
    return { divRef };
  },
};
+ +
1
2
3
<template>
  <div ref="divRef">Hello Ref</div>
</template>
+ +

获取一组 DOM 对象

+
1
2
3
4
5
6
7
8
9
10
11
import { ref, onMounted, onUpdated } from "vue";
export default {
  setup() {
    const list = ref(["a", "b", "c"]);
    const elms = ref([]);
    const onClickHandler = () => list.value.push("d");
    onMounted(() => console.log(elms.value));
    onUpdated(() => console.log(elms.value));
    return { list, elms, onClickHandler };
  },
};
+ +
1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <ul>
    <li
      v-for="(item, index) in list"
      :key="index"
      :ref="(el) => (elms[index] = el)"
    >
      {{ item }}
    </li>
  </ul>
  <button @click="onClickHandler">button</button>
</template>
+ +

17. provide、inject 函数-跨组件层级传递数据的方式

+

目标：掌握跨组件层级传递数据的方式

+
+

通过 provide、inject 函数的配合使用，可以实现跨组件传递数据（组件与组件存在嵌套关系）

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- 父组件 App -->
<template>
  <ChildComponent />
</template>

<script>
import { ref, provide } from "vue";
import ChildComponent from "./components/ChildComponent.vue";

export default {
  components: { ChildComponent },
  name: "App",
  setup() {
    const person = ref({ name: "张三" });
    const changePerson = () => {
      person.value.name = "李四";
    };
    provide("person", person);
    provide("changePerson", changePerson);
  },
};
</script>
+ +
1
2
3
4
5
6
7
8
9
10
11
<!-- 子组件 -->
<template>
  <LastComponent />
</template>
<script>
  import LastComponent from "./LastComponent.vue";
  export default {
    components: { LastComponent },
    name: "ChildComponent",
  };
</script>
+ +
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 孙组件 -->
<template>
  {{ person.name }}
  <button @click="changePerson">button</button>
</template>
<script>
  import { inject } from "vue";
  export default {
    name: "LastComponent",
    setup() {
      const person = inject("person");
      const changePerson = inject("changePerson");
      return { person, changePerson };
    },
  };
</script>
+ +

18. teleport 传送门组件

+

目标：掌握 teleport 组件的使用方式

+
+
+
    +
  • 说明 teleport 组件的作用
    • +
  • 通过案例验证 teleport 组件的用法
    • +
+
+

teleport 组件可以将指定组件渲染到应用外部的其他位置。

+

比如弹框组件，它可能在任意组件中使用，但它不属于任意组件，所以不能在使用它的组件中渲染它，我们需要将它渲染到指定位置。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!-- Modal.vue -->
<template>
  <div class="wrapper">
    <div class="content">
      <a class="close" href="javascript:">关闭</a>
    </div>
  </div>
</template>
<script>
export default {
  name: "Modal",
};
</script>
<style scoped>
.wrapper {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
}
.content {
  width: 660px;
  height: 400px;
  background: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.close {
  position: absolute;
  right: 10px;
  top: 10px;
  color: #999;
  text-decoration: none;
}
</style>
+ +
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- App.vue -->
<template>
  <teleport to="#modal">
    <Modal />
  </teleport>
</template>
<script>
  import Modal from "./components/Modal.vue";
  export default {
    components: { Modal },
    name: "App",
  };
</script>
+ +
1
2
<!-- index.html -->
<div id="modal"></div>
+ +

19. Suspense 组件-确保组件中的 setup 函数调用和模板渲染之间的执行顺序

+

目标：掌握 Suspense 组件的使用方式

+
+
+
    +
  • 说明 suspense 组件的作用及使用场景
    • +
  • 通过代码验证 suspense 组件的使用方式
    • +
+
+

Suspense 用于确保组件中的 setup 函数调用和模板渲染之间的执行顺序。先执行 setup 后渲染模板。

+

当组件中的 setup 被写成异步函数的形式, 代码执行的顺序就变成了先渲染模板后执行 setup 函数了。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Posts.vue -->
<template>
  <pre>{{ data }}</pre>
</template>
<script>
import axios from "axios";

export default {
  name: "Posts",
  async setup() {
    let response = await axios.get(
      "https://jsonplaceholder.typicode.com/posts",
    );
    return { data: response.data };
  },
};
</script>
+ +
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- App.vue -->
<template>
  <Suspense>
    <Posts />
  </Suspense>
</template>
<script>
import Posts from "./components/Posts.vue";
export default {
  components: { Posts },
  name: "App",
};
</script>
+ +

通过 suspense 组件还可以为异步操作添加等待提示效果。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- App.vue -->
<template>
  <Suspense>
    <template v-slot:default>
      <Posts />
    </template>
    <template v-slot:fallback> loading... </template>
  </Suspense>
</template>
<script>
  import Posts from "./components/Posts.vue";
  export default {
    components: { Posts },
    name: "App",
  };
</script>
+ +

20. 过渡动画

+

目标：掌握 transition 组件的使用方式

+
+

20.1 概述

Vue 提供了 transition 组件供我们执行过渡动画, 我们只需要使用 transition 组件包裹你要执行动画的元素即可。

+

执行过渡动画的前提条件是元素具有创建与销毁的操作。

+
1
2
3
<transition>
  <h1>hello world</h1>
</transition>
+ +

当创建元素时, transiton 组件会为执行动画的元素添加三个类名, 我们可以通过这三个类名为元素添加入场动画。

+
1
2
3
4
5
6
.enter-from {
} // 元素执行动画的初始样式 (动画起点样式)
.enter-to {
} // 元素执行动画的目标样式 (动画终点样式)
.enter-active {
} // 可以用于指定元素指定动画的类型
+ +
1
2
3
4
5
6
7
8
9
.enter-from {
  opacity: 0;
}
.enter-to {
  opacity: 1;
}
.enter-active {
  transition: opacity 2s ease-in;
} // ease-in 先慢后快
+ +

当销毁元素时, transition 组件会为执行动画的元素添加三个类名, 我们可以通过这个三个类名为元素添加离场动画样式。

+
1
2
3
4
5
6
.leave-from {
} // 元素执行动画的初始样式 (动画起点样式)
.leave-to {
} // 元素执行动画的目标样式 (动画终点样式)
.leave-active {
} // 可以用于指定元素指定动画的类型
+ +
1
2
3
4
5
6
7
8
9
.leave-from {
  opacity: 1;
}
.leave-to {
  opacity: 0;
}
.leave-active {
  transition: opacity 2s ease-out;
} // ease-out 先快后慢
+ +

如果在页面中有多个元素要执行动画, 而多个元素要执行的动画不同时, 为了对多个元素的动画样式进行区分, 在调用 transiton 组件时需要为它添加 name 属性以区分样式类名。

+
1
2
3
<transition name="fade">
  <h1>hello world</h1>
</transition>
+ +
1
2
3
4
5
6
7
8
9
10
11
12
13
.fade-enter-from {
}
.fade-enter-to {
}
.fade-enter-active {
}

.fade-leave-from {
}
.fade-leave-to {
}
.fade-leave-active {
}
+ +

20.2 示例

需求: 点击按钮让元素显示隐藏 (执行动画)

+
1
2
3
4
<transition name="fade">
  <h2 v-if="show">hello world</h2>
</transition>
<button @click="show = !show">button</button>
+ +
1
const show = ref(false);
+ +
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.fade-enter-from {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-enter-active {
  transition: opacity 2s ease-in;
}

.fade-leave-from {
  opacity: 1;
}
.fade-leave-to {
  opacity: 0;
}
.fade-leave-active {
  transition: opacity 2s ease-out;
}
+ +

21. 状态管理 Vuex

+

掌握 Vuex 实现全局状态管理的方式

+
+

21.1 问题

在不使用全局状态管理库时, 应用状态由组件管理, 当多个组件需要共享使用同一个应用状态时, 应用状态需要通过 props 或自定义事件在组件之间进行传递, 在组件与组件之间的关系比较疏远时, 手递手的这种传递方式显得特别混乱, 使得应用的维护变得困难.

+ + +

在使用了全局状态管理库后, 需要共享的应用状态被单独存储在一个独立于组件的 Store 对象中, 所有组件可以直接从这个对象中获取状态, 省去了繁琐的组件状态传递过程. 而且当 Store 中的状态发生变化后，组件也会自动更新。

+ + +

21.2 Vuex 工作流程

State: 用于存储应用状态 (store.state)

+

Action: 用于执行异步操作 (dispatch)

+

Mutation: 用于修改 state 中的应用状态 (commit)

+

Getter: vuex 中的计算属性 (store.getters)

+

Module: 模块, 用于对状态进行拆分

+

在组件中开发者可以调用 dispatch 方法触发 Action 执行异步操作, 当异步操作执行完成后, 在 Action 中可以继续调用 commit 方法触发 mutation 修改状态, 当状态被修改以后, 视图更新.

+ + +

21.3 下载

Vuex 目前有两个版本, 一个是 3.6.2, 另一个是 4.0.2, 3.x 的版本是供 Vue2 使用的, 4.x 版本是供 Vue3 使用的.

+

在下载 Vuex 的时候如果不加版本号，默认下载的是 3.x 版本, 而我们要使用的是 4.x 的版本, 所以在下载时千万记得加版本号.

+

npm install vuex@4.0.2

+

21.4 创建 Store

1
2
3
// src/store/index.js
import { createStore } from "vuex";
export default createStore({});
+ +
1
2
3
4
// src/main.js
import store from "./store";
const app = createApp(App);
app.use(store);
+ +

21.5 state

在应用状态对象中存储 username 状态.

+
1
2
3
4
5
export default createStore({
  state: {
    username: "张三",
  },
});
+ +

在组件中获取 username 状态

+
1
<template> {{$store.state.username}} </template>
+ +
1
2
3
4
5
6
7
8
9
<script>
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    console.log(store.state.username);
  },
};
</script>
+ +

21.6 getters

getters 是 vuex 中的计算属性, 基于现有状态计算出新的状态。

+
1
2
3
4
5
6
7
export default createStore({
  getters: {
    newUsername(state) {
      return state.username + "😀😀😀😀";
    },
  },
});
+ +
1
2
3
<template>
  {{ $store.getters.newUsername }}
</template>
+ +
1
2
3
4
5
6
7
<script>
export default {
  setup() {
    console.log(store.getters.newUsername);
  },
};
</script>
+ +

21.7 mutations

mutations 是 vuex 中用于修改状态的方法。

+
1
2
3
4
5
6
7
export default createStore({
  mutations: {
    updateUsername(state, username) {
      state.username = username;
    },
  },
});
+ +
1
2
3
4
5
<template>
  <button @click="$store.commit('updateUsername', '李四')">
    change username
  </button>
</template>
+ +

21.8 actions

actions 在 Vuex 中用于执行异步操作, 当异步操作执行完成以后可以调用 commit 方法触发 mutation 来修改应用状态

+
1
2
3
4
5
6
7
8
9
export default createStore({
  actions: {
    updateName(ctx) {
      setTimeout(() => {
        ctx.commit("updateName", "李四");
      }, 1000);
    },
  },
});
+ +
1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <button @click="onClickHandler">button</button>
</template>
<script>
  export default {
    setup() {
      const onClickHandler = () => {
        store.dispatch("updateName");
      };
      return { onClickHandler };
    },
  };
</script>
+ +

21.9 module

21.9.1 概述

Vuex 允许开发者通过模块对状态进行拆分，允许开发者将不同功能的状态代码拆分到不同的模块中。

+

模块分为两种，一种是不具备命名空间的模块，另一种是具备命名空间的模块，推荐使用命名空间，命名空间使模块更加独立。

+

21.9.2 非命名空间模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { createStore } from "vuex";

const moduleA = {
  state() {
    return {
      name: "模块A",
    };
  },
};
const moduleB = {
  state() {
    return {
      name: "模块B",
    };
  },
};

export default createStore({
  modules: {
    a: moduleA,
    b: moduleB,
  },
});
+ +
1
2
3
4
5
6
7
8
9
10
11
12
<template> {{$store.state['a'].name}} {{$store.state['b'].name}} </template>
<script>
  import { useStore } from "vuex";
  export default {
    name: "App",
    setup() {
      const store = useStore();
      console.log(store.state.a.name);
      console.log(store.state.b.name);
    },
  };
</script>
+ +

非命名空间模块中的 mutation 方法, 当 updateName 方法被触发后，所有定义了此方法的模块都会调用该方法。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { createStore } from "vuex";

const moduleA = {
  mutations: {
    updateName(state) {
      state.name = "😀模块A😀";
    },
  },
};
const moduleB = {
  mutations: {
    updateName(state) {
      state.name = "😝模块B😝";
    },
  },
};

export default createStore({
  modules: {
    a: moduleA,
    b: moduleB,
  },
});
+ +
1
2
3
4
<template>
  {{$store.state['a'].name}} {{$store.state['b'].name}}
  <button @click="$store.commit('updateName')">updateName</button>
</template>
+ +

非命名空间模块中的 getter，不能在两个模块中定义相同的 getter 以避免程序报错。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { createStore } from "vuex";

const moduleA = {
  getters: {
    newName(state) {
      return state.name + "😀";
    },
  },
};
const moduleB = {
  getters: {
    newName(state) {
      return state.name + "😝";
    },
  },
};

export default createStore({
  modules: {
    a: moduleA,
    b: moduleB,
  },
});
+ +
1
<template> {{$store.getters.newName}} </template>
+ + + +

21.9.3 命名空间模块

命名空间模块需要在模块对象中添加 namespaced: true 选项。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { createStore } from "vuex";

const moduleA = {
  namespaced: true,
  state() {
    return { name: "模块A" };
  },
};
const moduleB = {
  namespaced: true,
  state() {
    return { name: "模块B" };
  },
};

export default createStore({
  modules: {
    a: moduleA,
    b: moduleB,
  },
});
+ +
1
<template> {{$store.state['a'].name}} {{$store.state['b'].name}} </template>
+ +

具有命名空间的模块状态更加独立，比如可以在不同的命令空间中定义相同的 getter

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { createStore } from "vuex";

const moduleA = {
  namespaced: true,
  getters: {
    newName(state) {
      return state.name + "😀";
    },
  },
};
const moduleB = {
  namespaced: true,
  getters: {
    newName(state) {
      return state.name + "😀";
    },
  },
};

export default createStore({
  modules: {
    a: moduleA,
    b: moduleB,
  },
});
+ +
1
2
3
<template>
  {{$store.getters['a/newName']}} {{$store.getters['b/newName']}}
</template>
+ +

在不同的命名空间模块中定义相同的变异方法

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { createStore } from "vuex";

const moduleA = {
  namespaced: true,
  mutations: {
    updateName(state) {
      state.name = "我是模块A";
    },
  },
};
const moduleB = {
  namespaced: true,
  mutations: {
    updateName(state) {
      state.name = "我是模块B";
    },
  },
};

export default createStore({
  modules: {
    a: moduleA,
    b: moduleB,
  },
});
+ +
1
2
3
4
5
6
<template>
  {{ $store.getters["a/newName"] }}
  {{ $store.getters["b/newName"] }}
  <button @click="$store.commit('a/updateName')">update moduleA</button>
  <button @click="$store.commit('b/updateName')">update moduleb</button>
</template>
+ +

22. 代理对象

+

目标: 了解代理对象的使用方式

+
+

什么是数据响应式?

+

数据驱动视图, 即数据和视图进行绑定, 当数据发生变化后, 视图自动更新.

+

如何实现数据响应式?

+

实现数据响应式的核心在于监听数据的变化, 当数据发生变化后, 执行视图更新操作.

+

Vue3 使用代理对象监听数据变化.

+

创建对象的代理对象, 从而实现对对象操作的拦截和自定义.

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// person 对象, 源数据对象
const person = { name: "张三", age: 20 };
// p 对象, person 对象的代理对象
// 对 p 对象进行的所有操作都会映射到 person 对象
const p = new Proxy(person, {});
// 查询代码对象
console.log(p); // Proxy { name: "张三", age: 20 }
// 修改代理对象中的 name 属性
p.name = "李四";
// 输出源数据对象中的 name 属性
console.log(person.name); // 李四
// 删除代理对象中的 age 属性
delete p.age;
// 输出源数据对象中的 age 属性
console.log(person.age); // undefined
// 在代理对象中增加 sex 属性
p.sex = "男";
// 输出源数据对象中的 sex 属性
console.log(person.sex);
+ +
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// person 对象, 源数据对象
const person = {
  name: "张三",
  age: 20,
  brand: { group: { title: "宝马" } },
};
// p 对象, person 对象的代理对象
// 对 p 对象进行的所有操作都会映射到 person 对象
const p = new Proxy(person, {
  get(target, property) {
    console.log("拦击到了获取操作");
    return target[property];
  },
  set(target, property, value) {
    console.log("拦截到了设置或者新增操作");
    target[property] = value;
  },
  deleteProperty(target, property) {
    console.log("拦截到了删除操作");
    return delete target[property];
  },
});

// console.log(p.name);
// p.name = "李四";
// delete p.name;
// p.sex = "男";
// proxy 代理的是整个对象, 不论对象层级有多深, 都可以进行拦截.
console.log(p.brand.group.title);

console.log(person);
+ +

23. 双向数据绑定

23.1 实现表单双向数据绑定

1. 什么是双向数据绑定?

+

双向指的是视图(template)和逻辑(script), 双向数据绑定是指视图更新数据后自动同步到逻辑, 逻辑更新数据后自动同步到视图。

+

2. 如何实现双向数据绑定?

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <input type="text" v-model="firstName" />
  <button @click="onClickHandler">button</button>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const firstName = ref("张三");
    const onClickHandler = () => {
      firstName.value = "李四";
    };
    return { firstName, onClickHandler };
  },
};
</script>
+ +

3. 如何监听双向数据绑定中数据的变化

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <input
    type="text"
    v-model="firstName"
    @update:modelValue="onFirstNameChanged($event)"
  />
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const firstName = ref("张三");
    const onFirstNameChanged = (event) => {
      console.log(event);
    };
    return { firstName, onFirstNameChanged };
  },
};
</script>
+ +

23.2 实现组件双向数据绑定

1. 普通版

App.vue

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <Test
    :firstName="firstName"
    @onFirstNameChanged="onFirstNameChanged($event)"
  />
  <button @click="onClickHandler">我是App组件中的 button</button>
</template>
<script>
import Test from "./components/Test.vue";
import { ref } from "vue";
export default {
  components: { Test },
  name: "App",
  setup() {
    const firstName = ref("张三");
    const onClickHandler = () => {
      firstName.value = "李四";
    };
    const onFirstNameChanged = (event) => {
      firstName.value = event;
    };
    return { firstName, onClickHandler, onFirstNameChanged };
  },
};
</script>
+ +

Test.vue

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div>
    {{ firstName }}
    <button @click="onClickHandler">我是Test组件中的button</button>
  </div>
</template>
<script>
export default {
  props: ["firstName"],
  setup(props, { emit }) {
    const onClickHandler = () => {
      emit("onFirstNameChanged", "王五");
    };
    return { onClickHandler };
  },
};
</script>
+ +

2. 升级版

App.vue

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <Test v-model="firstName" />
  <button @click="onClickHandler">我是App组件中的 button</button>
</template>
<script>
import Test from "./components/Test.vue";
import { ref } from "vue";
export default {
  components: { Test },
  name: "App",
  setup() {
    const firstName = ref("张三");
    const onClickHandler = () => {
      firstName.value = "李四";
    };
    return { firstName, onClickHandler };
  },
};
</script>
+ +

Test.vue

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div>
    {{ modelValue }}
    <button @click="onClickHandler">我是Test组件中的button</button>
  </div>
</template>
<script>
export default {
  props: ["modelValue"],
  setup(props, { emit }) {
    const onClickHandler = () => {
      emit("update:modelValue", "王五");
    };
    return { onClickHandler };
  },
};
</script>
+ +

3. 终极版

App.vue

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <Test v-model:firstName="firstName" v-model:lastName="lastName" />
  <button @click="onClickHandler">我是App组件中的 button</button>
</template>
<script>
import Test from "./components/Test.vue";
import { ref } from "vue";
export default {
  components: { Test },
  name: "App",
  setup() {
    const firstName = ref("张三");
    const lastName = ref("李四");
    const onClickHandler = () => {
      firstName.value = "孙悟空";
      lastName.value = "猪八戒";
    };
    return { firstName, lastName, onClickHandler };
  },
};
</script>
+ +

Test.vue

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <div>
    {{ firstName }} {{ lastName }}
    <button @click="onClickHandler">我是Test组件中的button</button>
  </div>
</template>
<script>
export default {
  props: ["firstName", "lastName"],
  setup(props, { emit }) {
    const onClickHandler = () => {
      emit("update:firstName", "刘备");
      emit("update:lastName", "诸葛亮");
    };
    return { onClickHandler };
  },
};
</script>
+ +

24. customRef

创建具有自定义行为的响应式数据, 通过拦截响应式数据的读取和设置实现。

+

防抖: 监听用户的连续操作, 最终只响应连续操作中的最后一次操作。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<template>
  <input type="text" v-model="keyword" />
  {{ keyword }}
</template>
<script>
import { customRef } from "vue";
export default {
  name: "App",
  setup() {
    const keyword = useDebounceRef("Hello", 400);
    return { keyword };
  },
};

function useDebounceRef(initialValue, delay) {
  let timer = null;
  return customRef((track, trigger) => {
    return {
      get() {
        // 跟踪 initialValue 值的变量
        track();
        return initialValue;
      },
      set(newValue) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          initialValue = newValue;
          // 触发视图更新
          trigger();
        }, delay);
      },
    };
  });
}
</script>
+
头像头像
WaterBoat
正因你我生于繁华，弥足之花方显珍贵
原创Vue 3.0 组合式 API
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
Vue6
喜欢这篇文章的人也看了
avatar
正因你我生于繁华，弥足之花方显珍贵

WaterBoat

正因你我生于繁华，弥足之花方显珍贵
最近发布
Solidity 龟速入门教程
Solidity 龟速入门教程
Cypress 使用指南
Cypress 使用指南
npm 别名---让小明变成小红
npm 别名---让小明变成小红
发布-订阅模式
发布-订阅模式
Vue Cli 配置
Vue Cli 配置
引用到评论
随便逛逛博客分类文章标签
复制地址关闭热评深色模式轉為繁體
\ No newline at end of file diff --git "a/2020/05/20/\345\216\237\347\245\236/\345\216\237\347\245\236\346\212\275\345\215\241\350\256\260\345\275\225\346\212\223\345\217\226/index.html" "b/2020/05/20/\345\216\237\347\245\236/\345\216\237\347\245\236\346\212\275\345\215\241\350\256\260\345\275\225\346\212\223\345\217\226/index.html" new file mode 100644 index 0000000000..14b2e76b48 --- /dev/null +++ "b/2020/05/20/\345\216\237\347\245\236/\345\216\237\347\245\236\346\212\275\345\215\241\350\256\260\345\275\225\346\212\223\345\217\226/index.html" @@ -0,0 +1,377 @@ +原神抽卡记录抓取 | WaterBoat的博客
加载头像
原创

原神抽卡记录抓取

发表于更新于
长沙

原神抽卡记录抓取

日志文件

原神的日志文件存储在本地

+
1
2
3
4
5
6
7
8
var os = require("os");
var path = require("path");
// 获取原神日志路径
let outputPath = path.join(
  os.userInfo().homedir,
  "/AppData/LocalLow/miHoYo/原神/output_log.txt",
);
console.log(outputPath);
+ +

进入游戏后访问自己的抽卡记录，日志里面就会生成对应的访问链接，里面带有用户的 token。

+

OnGetWebViewPageFinish

+

抓包得到的 API

https://hk4e-api.mihoyo.com/event/gacha_info/api/getGachaLog

+

关键参数

+ + + + + + + + + + + + + + + + + + + +
参数含义
size每页多少条（最多 20）
page第多少页（不知道上限 获取到没有为止）
gacha_type抽卡的类型枚举，分别代表新手、常驻、角色 up 池、武器 up 池
+
头像头像
WaterBoat
正因你我生于繁华，弥足之花方显珍贵
原创原神抽卡记录抓取
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
原神1
avatar
正因你我生于繁华，弥足之花方显珍贵

WaterBoat

正因你我生于繁华，弥足之花方显珍贵
最近发布
Solidity 龟速入门教程
Solidity 龟速入门教程
Cypress 使用指南
Cypress 使用指南
npm 别名---让小明变成小红
npm 别名---让小明变成小红
发布-订阅模式
发布-订阅模式
Vue Cli 配置
Vue Cli 配置
引用到评论
随便逛逛博客分类文章标签
复制地址关闭热评深色模式轉為繁體
\ No newline at end of file diff --git "a/2021/03/08/\345\211\215\347\253\257/TypeScript/01.TypeScript\347\254\224\350\256\260/index.html" "b/2021/03/08/\345\211\215\347\253\257/TypeScript/01.TypeScript\347\254\224\350\256\260/index.html" new file mode 100644 index 0000000000..b8c715167f --- /dev/null +++ "b/2021/03/08/\345\211\215\347\253\257/TypeScript/01.TypeScript\347\254\224\350\256\260/index.html" @@ -0,0 +1,588 @@ +TypeScript 笔记 | WaterBoat的博客
加载头像
原创

TypeScript 笔记

发表于更新于
长沙

TypeScript 笔记

[[toc]]

+

代码库

点击去往

+

环境搭建

1
2
3
4
5
6
7
8
9
10
# 安装
npm install typescript -g

tsc xx.ts # 生成 js 文件
tsc -d xx.ts #生成 xx.d.ts文件
node xx.js # 运行 js 文件

# 方便直接运行 ts 文件的包
npm install ts-node -g
ts-node xx.ts # 直接运行 ts 文件
+ +

体验一下 ts

类型注解(annotation)

    +
  • 我们告诉 typescript 变量是什么类型
    • +
+
1
2
let a: number; // annotation
a = 11;
+ +
    +
  • 声明数字
    • +
+
1
let a: number = 10;
+ +
    +
  • 声明数组
    • +
+
1
2
3
let a: number[] = [1, 2, 3]; // 声明数字数组
let b: string[] = ["1", "2", "3"]; // 声明字符串数组
let c: Array<number> = [1, 2, 3]; //运用泛型声明数组
+ +
    +
  • 声明对象
    • +
+
1
const obj: { name: string; age: number } = { name: "李四", age: 19 };
+ +
    +
  • 函数
    • +
+
1
2
3
4
5
6
7
function fn(): void {
  // 没有返回值
}

function fn2(): number {
  return 1;
}
+ +
    +
  • 结构赋值
    • +
+
1
2
3
function sum({ a, b }: { a: number; b: number }): number {
  return a + b;
}
+ +
    +
  • 任意类型
    • +
+
1
2
let num: any = "1";
num = 2;
+ +
    +
  • 声明数组对象
    • +
+
1
2
3
4
5
6
7
8
interface Obj {
  name: string;
  age: number;
}
let arr: Obj[] = [
  { name: "张安", age: 18 },
  { name: "荒芜", age: 20 },
];
+ +

类型推断(inference)

    +
  • typescript 会自动的判断变量的类型
    • +
+
1
let a = 123; // 鼠标放上 a 去看
+ +

never 类型的理解

    +
  • 一个无法执行完成的函数的返回值可以是 never
    • +
+
1
2
3
4
5
6
function fn(): never {
  throw new Error();
}
function fn(): never {
  while (true) {}
}
+ +

必看(运行环境)

使用的编辑器 vscode

+

typescript 版本 4.2.4

+

tsconfig.json 配置

+

:::tip

+

笔记的全部代码都是开启严格模式,没开严格模式的地方会特别说明

+

:::

+
1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true, // 开启严格模式
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": ["dist"],
  "include": ["src"]
}
+ +

基础

数据类型

    +

  1. any类型除了不能赋值给never与其他所有类型兼容

    +
    2. +

  2. unknow可以被其他所有类型赋值

    +
    3. +

  3. 除any和unknow外，void不可赋值给其他类型

    +
    4. +
+

:::tip

+

strict 严格模式在 tsc -init 之后的 tsconfig.json 里面设置

+

:::

+
    +

  1. 不开启strict选项时，void可被null、undefined、never`赋值

    +
    2. +

  2. 开启strict选项时，void可被undefined和never赋值

    +
    3. +
+

ts数据类型

+

定义变量

JavaScript 的类型分为两种：原始数据类型（Primitive data types）和对象类型（Object types）。

+

原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 BigInt。

+

null 和 undefined 是所有类型的子类型 也就是说 undefined 类型的变量，可以赋值给 number 类型的变量 (在没有开启严格模式的情况下)

+
1
2
3
4
5
6
// 冒号后面的玩意叫类型注解
let num: number = 123;
let flag: boolean = false;
let str: string = "hello ts";
let n: null = null;
let un: undefined = undefined;
+ +

定义函数

JavaScript 没有空值（Void）的概念，在 TypeScript 中，可以用 void 表示没有任何返回值的函数：

+
1
2
3
4
5
6
7
function fn(): void {
  console.log("我莫得返回值");
}

function fn2(): string {
  return "我的返回值是 string";
}
+ +

声明一个 void 的变量只能被赋值成 null 和 undefined (在没有开启严格模式的情况下 null 才能 赋值给 void 变量)

+
1
2
3
let v: void = null; // "strict": false
let v1: void = null; // "strict": true;Type 'null' is not assignable to type 'void'.ts(2322)
let v: void = undefined;
+ +

:::tip

+

在 TypeScript 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。

+

:::

+
1
2
3
4
5
6
7
let returnStr: (str: string) => string = function (str) {
  return str;
};
type Str = (str: string) => string;
let fn: Str = function (str) {
  return str;
};
+ +

重载

重载允许一个函数接受不同数量或类型的参数时，作出不同的处理

+

类似于 java 里面的方法重载

+

例如我们定义一个函数名为 add 的函数,当传入的值是 number 类型的时候我们就相加,传入的是 string 类型的时候我们就转换成数字再相加

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function add(x1: number, x2: number): number;
function add(x1: string, x2: string): string;

function add(
  x1: number | string,
  x2: number | string,
): number | string | undefined {
  if (typeof x1 == "number" && typeof x2 == "number") {
    return x1 + x2;
  } else if (typeof x1 == "string" && typeof x2 == "string") {
    return x1 + x2;
  }
}
let result = add(1, 2);
console.log(result);
+ +

定义任意值 any

任意值（Any）用来表示允许赋值为任意类型。

+

简单理解如果你把一个变量注解成了 any 那么你写的 ts 代码就变成了 js 了

+
1
2
3
let a: any = "123";
a = 5;
a = false;
+ +

等价于

+
1
2
3
var a = "123";
a = 5;
a = false;
+ +

类型推论 Type Inference

如果没有明确的指定类型，那么 TypeScript 会依照类型推论（Type Inference）的规则推断出一个类型。

+

也就是说编译器会帮你推断一个类型

+
1
2
let num = 1; // 鼠标移动到 num 上会看到 vscode 给你推断出了number
num = "123"; // Type 'string' is not assignable to type 'number'.ts(2322)
+ +

以上代码等价于

+
1
2
let num: number = 1;
num = "123";
+ +

TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论

+

::: warning

+

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查

+

:::

+

联合类型 Union Types

联合类型（Union Types）表示取值可以为多种类型中的一种。

+

联合类型使用 | 分隔每个类型。

+

案例

+
1
2
3
4
// hello 变量既可以是 number 类型也可以是 string 类型
let hello: number | string;
hello = 123; // 此时是 number 类型 只能访问 number 里面的方法
hello = "123"; // 此时是 string 类型 只能访问 string 里面的方法
+ +

访问联合类型的属性或方法

:::warning

+

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法

+

:::

+
1
2
3
4
5
6
7
8
9
// 访问联合类型的共有属性
function getLength1(s: string | number): number {
  return s.length; //Property 'length' does not exist on type 'string | number'.Property 'length' does not exist on type 'number'.ts(2339)
  // number 没有 length 这个方法所以报错
}
function getLength2(s: string | number): string {
  return s.toString();
  // string 和 number 里面都有 toString 方法所以没有报错
}
+ +

对象的类型——接口 Interface

什么是接口

在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。

+
案例
1
2
3
4
5
6
7
8
9
10
11
12
// 接口名称一般大写
interface Person {
  name: string;
  age: number;
}

let obj: Person = { name: "张安", age: 18 };

let arr: Person[] = [
  { name: "张安", age: 18 },
  { name: "荒芜", age: 20 },
];
+ +

以上的案例我们发现接口定义之后用里面定义的 name 和 age 在 obj 里面都得完完整整的写完 那么我不想写完呢?或者只写一个呢?

+

可选属性

有时我们希望不要完全匹配一个形状，那么可以用可选属性

+
{4}
1
2
3
4
5
6
7
8
9
10
11
12
interface Person {
  name: string;
  age: number;
  gender?: string;
}

let obj: Person = { name: "张安", age: 18 };

let arr: Person[] = [
  { name: "张安", age: 18 },
  { name: "荒芜", age: 20, gender: "男" },
];
+ +

那么我想让这个 interface 里面的属性可以任意添加呢?

+

任意属性

有时候我们希望一个接口允许有任意的属性，可以使用如下方式

+
{6,17-19}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
interface Person {
  name: string;
  age: number;
  gender?: string;
  // propName 不是固定的写法,可以随便写 比如你写个 aaa 什么的
  [propName: string]: any;
}

let obj: Person = { name: "张安", age: 18 };

let arr: Person[] = [
  { name: "张安", age: 18 },
  {
    name: "荒芜",
    age: 20,
    gender: "男",
    p1: "我是任意属性",
    p2: 123,
    p3: "我是任意属性",
  },
];
+ +

::: warning

+

需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集

+

:::

+
{6}
1
2
3
4
5
6
7
8
9
10
11
interface Person {
  name: string;
  age: number; // Property 'age' of type 'number' is not assignable to string index type 'string'.ts(2411)
  gender?: string; // Property 'gender' of type 'string | undefined' is not assignable to string index type 'string'.ts(2411)
  // 注意看注解成了 string
  [propName: string]: string;
}

let obj: Person = { name: "张安", age: 18 }; //Type '{ name: string; age: number; }' is not assignable to type 'Person'.Property 'age' is incompatible with index signature.Type 'number' is not assignable to type 'string'.ts(2322)

// 上例中，任意属性的值允许是 string，但是可选属性 age 的值却是 number，number 不是 string 的子属性，所以报错了。
+ +

那么我想让 interface 里面的属性一开始就被赋值并且只能被读取不能被修改呢?

+

只读属性

有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性

+
{2,11}
1
2
3
4
5
6
7
8
9
10
11
interface Person {
  readonly id: number;
  name: string;
  age: number;
  gender?: string;
  // propName 不是固定的写法,可以随便写 比如你写个 aaa 什么的
  [propName: string]: any;
}

let obj: Person = { id: 1, name: "张安", age: 18 };
obj.id = 2; // Cannot assign to 'id' because it is a constant or a read-only property.
+ +

类型断言 Type Assertion

语法

1
// 值 as 类型 或 <类型>值  一般用前者
+ +

类型断言的用途

简单理解就是,现在你比编译器更懂现在的这个变量是什么类型

+
1
2
3
4
5
6
7
function getValue(value: number | string): void {
  // 在没有明确传入的类型的时候我们只能调用联合类型中的公共属性和方法
  // 明确告诉 ts 我知道他肯定传入的是 number 然后调用 toFixed
  let n = (value as number).toFixed(2);
  console.log(n);
}
getValue(1);
+ +

确定赋值断言

用处告诉 Ts 该属性被明确的赋值

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let x: number;
initialize();

// Variable 'x' is used before being assigned.(2454)
console.log(2 * x); // Error
function initialize() {
  x = 10;
}

let x!: number;
initialize();
console.log(2 * x); // Ok

function initialize() {
  x = 10;
}
+ +

进阶

类型别名 type

类型别名用来给一个类型起个新名字

+
1
2
3
4
5
6
7
type Obj = {
  name: string;
  age: number;
  gender?: string;
};

let obj: Obj = { name: "张安", age: 18, gender: "男" };
+ +

:::tip

+

类型别名常用于联合类型

+

:::

+

元组 Tuple

数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。

+

元组定义成啥样就要验证遵守定义的规则

+
1
2
3
4
5
6
7
8
9
10
11
12
13
let arr1: [number, string] = [1, "hello"];
console.log(arr1);

// 对元组类型的变量进行初始化或者赋值的时候，需要提供所有元组类型中指定的项
let arr2: [boolean, string];
arr2[0] = false; // Variable 'arr2' is used before being assigned
arr2[1] = "1"; // Variable 'arr2' is used before being assigned

arr2 = [false, "12"];

// 如果数组越界直接 push 注解的类型没有注解的类型无法添加
arr1.push(1);
arr1.push(false);
+ +

枚举 Enum

枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。

+
1
2
3
4
5
6
7
8
9
enum Days {
  Sun,
  Mon,
  Tue,
  Wed,
  Thu,
  Fri,
  Sat,
}
+ +

枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射：

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
enum Days {
  Sun,
  Mon,
  Tue,
  Wed,
  Thu,
  Fri,
  Sat,
}

console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true
+ +

枚举可以手动赋值

+
{2,6-7}
1
2
3
4
5
6
7
8
9
10
11
12
enum Day {
  Sun = 10,
  Mon,
  Tue,
  Wed,
  Thu = "123",
  Fri = 9,
  Sat,
}
console.log(Day.Sun); //10
console.log(Day.Tue); //12
console.log(Day.Sat); //10
+ +

泛型 Generics

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

+

例子

1
2
3
4
5
6
7
// 创建一个函数,它可以创建一个指定长度的数组,同时将每一项都填充一个默认值：
function createArray(length: number, value: any): any[] {
  return new Array(length).fill(value);
}

let result = createArray(5, "123"); // [ '123', '123', '123', '123', '123' ]
console.log(result);
+ +

:::tip

+

思考 : 返回的是一个任意类型的数组,若是我后面直接调用 result[0].toFixed(2) 字符串上明明没有这个方法我强行调用不就报错了? 还有一个问题,我们输入 result[0]. 点时候在 vscode 中的代码提示没有了.我们写 ts 可以说就是为了良好的代码提示这时提示没有了是否意味着我们写错了?

+

此时我们需要一个工具我们给 value 输入什么类型 createArray 函数就返回什么类型的数组,并且 result 会被类型推断为正确的类型

+

此时泛型就可以登场了

+

:::

+
{6}
1
2
3
4
5
6
7
8
9
10
11
12
13
// 创建一个函数,它可以创建一个指定长度的数组,同时将每一项都填充一个默认值：
function createArray<T>(length: number, value: T): T[] {
  return new Array(length).fill(value);
}

let result = createArray(5, "123"); //鼠标放上去看类型推断,试着把 "123" 修改成不同的数据类型
console.log(result[0]);

// 写法二

let createArray2 = function <T>(length: number, value: T): Array<T> {
  return new Array(length).fill(value);
};
+ +

泛型约束

在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或方法

+
1
2
3
4
// 用泛型创建一个函数返回传入字符串的 length
function getLength<T>(str: T): T {
  return str.length; // 此时报错 str 上不存在 length 属性
}
+ +

此时我们就需要告诉编译器 str 上肯定存在 length 属性,我们就需要使用到泛型约束

+
{12}
1
2
3
4
5
6
7
8
9
10
11
12
13
// 用泛型创建一个函数返回传入字符串的 length
interface LengthI {
  length: number;
}
// 泛型 T 继承 LengthI 让传入数据类型必须有 length 属性
function getLength<T extends LengthI>(str: T): T {
  console.log(str.length);
  return str;
}

let result = getLength("123");
let result2 = getLength(123); // Argument of type 'number' is not assignable to parameter of type 'LengthI'.
console.log(result);
+ +

泛型接口

1
2
3
4
5
6
7
8
// 泛型接口
interface CreateArray {
  <T>(length: number, value: T): Array<T>;
}

let createArray: CreateArray = function <T>(length: number, value: T): T[] {
  return new Array(length).fill(value);
};
+ +

我们可以把泛型参数提前到接口名上

+
1
2
3
4
5
6
7
8
9
10
11
// 泛型接口
interface CreateArray<T> {
  <T>(length: number, value: T): Array<T>;
}

let createArray: CreateArray<any> = function <T>(
  length: number,
  value: T,
): T[] {
  return new Array(length).fill(value);
};
+ +

一些总结

高级类型

    +

  • 交叉类型，使用类型操作符 &

    +
    • +

  • 联合类型，使用类型操作符 ｜

    +
    • +

  • 索引类型，使用类型操作符 keyof，T[K]

    +
    • +

  • 映射类型，使用类型操作符 in

    +
    • +

  • 条件类型，使用类型操作符 T extends U ? X : Y infer

    +
    • +

  • 另外还有用于类型保护的类型谓词中的 is 操作符以及上面所介绍的 typeof

    +
    • +
+

高级类型

+

参考资料

+
头像头像
WaterBoat
正因你我生于繁华，弥足之花方显珍贵
原创TypeScript 笔记
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
TypeScript1
avatar
正因你我生于繁华，弥足之花方显珍贵

WaterBoat

正因你我生于繁华，弥足之花方显珍贵
最近发布
Solidity 龟速入门教程
Solidity 龟速入门教程
Cypress 使用指南
Cypress 使用指南
npm 别名---让小明变成小红
npm 别名---让小明变成小红
发布-订阅模式
发布-订阅模式
Vue Cli 配置
Vue Cli 配置
引用到评论
随便逛逛博客分类文章标签
复制地址关闭热评深色模式轉為繁體
\ No newline at end of file diff --git "a/2021/03/08/\345\211\215\347\253\257/Vue/01-Vue2/index.html" "b/2021/03/08/\345\211\215\347\253\257/Vue/01-Vue2/index.html" new file mode 100644 index 0000000000..62b457bbfe --- /dev/null +++ "b/2021/03/08/\345\211\215\347\253\257/Vue/01-Vue2/index.html" @@ -0,0 +1,441 @@ +Vue 2.0 笔记 | WaterBoat的博客
加载头像
原创

Vue 2.0 笔记

发表于更新于
长沙

Vue 2.0 笔记

v-for 的更新机制

    +
  • 改变数组的方法就会导致 v-for 更新
    • +
  • 无法改变数组的方法,返回新的数组的,就不会导致 v-for 更新,可采用覆盖数组或者 this.$set(“更新的值”,”更新位置”,”更新值”)
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<template>
  <div>
    <h1>v-for 的更新机制</h1>
    <template v-for="item in list">
      <h1 :key="item">{{ item }}</h1>
    </template>
    <button @click="reverse">翻转</button>
    <button @click="slice">截取前3个元素</button>
    <button @click="btn">直接修改第下标0的值为20</button>
  </div>
</template>

<script>
export default {
  name: "v-for",
  data() {
    return {
      list: [1, 2, 3, 4],
    };
  },
  methods: {
    reverse() {
      // 因为原数组被修改了所以触发了更新
      this.list.reverse();
    },
    slice() {
      // slice方法会返回一个新数组,需要把新数组赋值给 this.list 才会触发更新
      // this.list.slice(0, 3);
      let arr = this.list.slice(0, 3);
      this.list = arr;
    },
    btn() {
      // 直接修改数组的值无法触发更新,可以使用 this.$set 方法
      // this.list[0] = 20;
      this.$set(this.list, 0, 20);
    },
  },
};
</script>

<style></style>
+ +

这些方法会触发数组改变, v-for 会监测到并更新页面

+
    +
  • push()
    • +
  • pop()
    • +
  • shift()
    • +
  • unshift()
    • +
  • splice()
    • +
  • sort()
    • +
  • reverse()
    • +
+

这些方法不会触发 v-for 更新

+
    +
  • slice()
    • +
  • filter()
    • +
+

虚拟 DOM

.vue 文件中的 template 里写的标签, 都是模板, 都要被 vue 处理成虚拟 DOM 对象, 才会渲染显示到真实 DOM 页面上

+

内存中生成一样的虚拟 DOM 结构(==本质是个 JS 对象==)

+

因为真实的 DOM 属性好几百个, 没办法快速的知道哪个属性改变了

+

image-20210928204611597

+

使用虚拟 DOM 只包含必要的属性,就可以和旧的虚拟 DOM 进行比较快速找出不同,只更新变化的部分

+

动态 class

    +
  • 用 v-bind 给标签 class 设置动态的值
    • +
  • v-bind 的简化语法 :class
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
  <div>
    <h1 v-bind:class="{ red: flag }">动态class</h1>
    <button @click="btn">按钮</button>
  </div>
</template>

<script>
export default {
  name: "class",
  data() {
    return {
      flag: "red",
    };
  },
  methods: {
    btn() {
      this.flag = !this.flag;
    },
  },
};
</script>

<style>
.red {
  color: red;
}
</style>
+ +

动态 style

    +
  • 用 v-bind 给标签 style 设置动态的值
    • +
  • v-bind 的简化语法 :style
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
  <div>
    <h1 :style="{ background: colorRed }">动态style</h1>
    <button @click="btn">按钮</button>
  </div>
</template>

<script>
export default {
  name: "Dstyle",
  data() {
    return {
      colorRed: "red",
    };
  },
  methods: {
    btn() {
      if (this.colorRed === "red") {
        this.colorRed = "yellow";
      } else {
        this.colorRed = "red";
      }
    },
  },
};
</script>

<style></style>
+ +

过滤器

    +

  • 过滤器是一个函数,传入值返回处理后的值

    +
    • +

  • 过滤器只能用在, ==插值表达式和 v-bind 表达式==

    +
    • +

  • 语法

    +
      +
    • 全局过滤器 Vue.filter(“过滤器名”, (值) => {return “返回处理后的值”})
      • +
    • 局部过滤器 filters: {过滤器名字: (值) => {return “返回处理后的值”}
      • +
    +
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div>
    <h1>过滤器</h1>
    <div>{{ str }}</div>
    <span>{{ str | reverse }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "admin",
    };
  },
  filters: {
    reverse(value) {
      console.log(value);
      return value.split("").reverse().join("");
    },
  },
};
</script>

<style></style>
+ +

传参和多个过滤器的同时使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
  <div>
    <h1>过滤器</h1>
    <div>{{ str }}</div>
    <h2>过滤器传参</h2>
    <span>{{ str | reverse("123") }}</span>
    <h2>多个过滤器的使用</h2>
    <div>{{ str | reverse("123") | UpCase }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "admin",
    };
  },
  filters: {
    reverse(value, data) {
      console.log(value);
      console.log(data); // 接收传过来的参数
      return value.split("").reverse().join("") + data;
    },
    UpCase(value) {
      return value.toUpperCase();
    },
  },
};
</script>

<style></style>
+ +

计算属性 computed

    +

  • 可以根据数据的变化而实时变化的数据

    +
    • +

  • 语法

    +
      +
    • computed: {
+    "计算属性名" () {
+        return "值"
+    }
+}
+
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25

      ```vue
      <template>
        <div>
          <p>{{ num }}</p>
        </div>
      </template>

      <script>
      export default {
        data() {
          return {
            a: 10,
            b: 20,
          };
        },
        // 注意: 计算属性和data属性都是变量-不能重名
        // 注意2: 函数内变量变化, 会自动重新计算结果返回
        computed: {
          num() {
            return this.a + this.b;
          },
        },
      };
      </script>
      
+
      +
      • +
    +
    • +
+

计算属性的完整写法

    +

  • 计算属性也是变量, 如果想要直接赋值, 需要使用完整写法

    +
    • +

  • 语法

    +
      +
    • computed: {
+    "属性名": {
+        set(值){
+
+        },
+        get() {
+            return "值"
+        }
+    }
+}
+
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27

      ```vue
      <template>
        <div>
          <div>
            <span>姓名:</span>
            <input type="text" v-model="full" />
          </div>
        </div>
      </template>

      <script>
      export default {
        computed: {
          full: {
            // 给full赋值触发set方法
            set(val) {
              console.log(val);
            },
            // 使用full的值触发get方法
            get() {
              return "无名氏";
            },
          },
        },
      };
      </script>
      
+
      +
      • +
    +
    • +
+
头像头像
WaterBoat
正因你我生于繁华，弥足之花方显珍贵
原创Vue 2.0 笔记
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
Vue6
喜欢这篇文章的人也看了
avatar
正因你我生于繁华，弥足之花方显珍贵

WaterBoat

正因你我生于繁华，弥足之花方显珍贵
最近发布
Solidity 龟速入门教程
Solidity 龟速入门教程
Cypress 使用指南
Cypress 使用指南
npm 别名---让小明变成小红
npm 别名---让小明变成小红
发布-订阅模式
发布-订阅模式
Vue Cli 配置
Vue Cli 配置
引用到评论
随便逛逛博客分类文章标签
复制地址关闭热评深色模式轉為繁體
\ No newline at end of file diff --git "a/2021/05/01/\345\220\216\347\253\257/01-Sql\345\237\272\347\241\200/index.html" "b/2021/05/01/\345\220\216\347\253\257/01-Sql\345\237\272\347\241\200/index.html" new file mode 100644 index 0000000000..77cb9d1a6b --- /dev/null +++ "b/2021/05/01/\345\220\216\347\253\257/01-Sql\345\237\272\347\241\200/index.html" @@ -0,0 +1,1194 @@ +SQL 基础 | WaterBoat的博客
加载头像
原创

SQL 基础

发表于更新于
长沙

SQL 基础

[[toc]]

+

了解 Sql

使用的工具

本文档的代码都是在 MySQL 8.0.23 版本下面运行的
MySQL 下载地址 z
navicat 数据库可视化工具

+

数据库

数据库这个术语的用法很多，（从 SQL 的角度来看），数据库是一个以某种有组织的方式存储的数据集合。最简单的办法是将数据库想象为一个文件柜。这个文件柜是一个存放数据的物理位置，不管数据是什么也不管数据是如何组织的。
如果你使用 navicat 查看数据库，那么你可以在下面查看到数据库

+

image-20211103095421726

+

::: warning 注意数据库概念混淆

+

人们通常用数据库这个术语来代表他们使用的数据库软件，这是不正确的，也因此产生了许多混淆。确切地说，数据库软件应称为数据库管理系统（DBMS）。数据库是通过 DBMS 创建和操纵的容器，而具体它究竟是什么，形式如何，各种数据库都不一样。

+

:::

+

表

拥有了数据库我们就可以把数据存储在表中，表是一个存储数据的容器，它可以是一个文件，也可以是一个数据库中的一个表。

+

表是一种结构化的文件，可用来存储某种特定类型的数据。

+

数据库中的每个表都有一个名字来标识自己。这个名字是唯一的，即数据库中没有其他表具有相同的名字。

+

表具有一些特性，这些特性定义了数据在表中如何存储，包含存储什么样的数据，数据如何分解，各部分信息如何命名等信息。描述表的这组信息就是所谓的模式（schema），模式可以用来描述数据库中特定的表，也可以用来描述整个数据库（和其中表的关系）。

+

::: tip
关于数据库和表的布局及特性的信息。
:::

+

在 navicaat 中，表的表现形式如图

+

image-20211103101446570

+

列和数据类型

表由列组成。列存储表中某部分的信息。
列是表中的一个数据单元，它可以是一个字段，也可以是一个索引。

+

:::tip 列
表中的一个字段。所有表都是由一个或多个列组成的。
:::

+

在 navicat 中，列的表现形式如图

+

image-20211103101837725

+

数据库中每个列都有相应的数据类型。数据类型（datatype）定义了列可以存储哪些数据种类。

+

每个表列都有相应的数据类型，它限制（或允许）该列中存储的数据。

+

数据类型限定了可存储在列中的数据种类（例如，防止在数值字段中录入字符值）。数据类型还帮助正确地分类数据，并在优化磁盘使用方面起 重要的作用。因此，在创建表时必须特别关注所用的数据类型。

+

行

表中的数据是按行存储的，所保存的每个记录存储在自己的行内。

+

在 navicat 中，行的表现形式如图

+

image-20211103101837725

+

上图中的每一行都是表中的一个记录或者称为数据库记录(record)

+

::: tip 说明：是记录还是行？

+

你可能听到用户在提到行时称其为数据库记录（record）。这两个术语 多半是可以交替使用的，但从技术上说，行才是正确的术语

+

:::

+

主键(primary key)

表中每一行都应该有一列（或几列）可以唯一标识自己。用户表可以用用户编号，订单表可以用订单号来标识主键。
唯一标识表中每行的这个列（或这几列）称为主键。主键用来表示一个 特定的行。没有主键，更新或删除表中特定行就极为困难，因为你不能 保证操作只涉及相关的行。

+

::: tip 应该总是定义主键
虽然并不总是需要主键，但多数数据库设计者都会保证他们创建的每 个表具有一个主键，以便于以后的数据操作和管理。
:::

+

表中的任何列都可以作为主键，只要它满足以下条件：

+
    +
  • 任意两行都不具有相同的主键值；
    • +
  • 每一行都必须具有一个主键值（主键列不允许 NULL 值
    • +
  • 主键列中的值不允许修改或更新；
    • +
  • 主键值不能重用（如果某行从表中删除，它的主键不能赋给以后的新行）。
    • +
+

在 navicat 中，主键的表现形式如图，右键表打开设计表

+

image-20211103103857767

+

什么是 SQL

SQL（发音为字母 S-Q-L 或 sequel）是 Structured Query Language（结构化查询语言）的缩写。SQL 是一种专门用来与数据库沟通的语言。
与其他语言（如英语或 Java、C、PHP 这样的编程语言）不一样，SQL 中只有很少的词，这是有意而为的。设计 SQL 的目的是很好地完成一项 任务——提供一种从数据库中读写数据的简单有效的方法。

+

SQL 有如下的优点。

+
    +
  • SQL 不是某个特定数据库供应商专有的语言。几乎所有重要的 DBMS 都支持 SQL，所以学习此语言使你几乎能与所有数据库打交道。
    • +
  • SQL 简单易学。它的语句全都是由有很强描述性的英语单词组成，而 且这些单词的数目不多。
    • +
  • SQL 虽然看上去很简单，但实际上是一种强有力的语言，灵活使用其 语言元素，可以进行非常复杂和高级的数据库操作。
    • +
+

::: tip SQL 扩展知识

+

许多 DBMS 厂商通过增加语句或指令，对 SQL 进行了扩展。这种扩 展的目的是提供执行特定操作的额外功能或简化方法。虽然这种扩展 很有用，但一般都是针对个别 DBMS 的，很少有两个以上的供应商支 持这种扩展。

+

标准 SQL 由 ANSI 标准委员会管理，从而称为 ANSI SQL。所有主要 的 DBMS，即使有自己的扩展，也都支持 ANSI SQL。各个实现有自 己的名称，如 PL/SQL、Transact-SQL 等。

+

本教程 SQL 主要是 ANSI SQL。在使用某种 DBMS 特定的 SQL 时，会特别说明。

+

:::

+

检索数据(SELECT)

这一章节介绍如何使用 SELECT 语句从表中检索一个或多个数据列。

+

开始练习之前记得下载练习数据

+

SELECT 语句

select 意思为选择

+

为了使用 SELECT 检索表数据，必须至少给出两条信息——想选择什么， 以及从什么地方选择。

+

检索单列

1
2
-- 检索 subways 表里面的 area_subway_name 字段
SELECT area_subway_name FROM subways;
+ +

上述代码利用 SELECT 语句从 subways 表中检索一个名为 area_subway_name 的列。所需的列名写在 SELECT 关键字之后，FROM 关键字指出从哪个表 中检索数据。

+

语法总结：

+
1
SELECT 列名 FROM 表名;
+ +

输出结果

+

image-20211104165622834

+

::: tip 未排序数据—怎么我执行的结果和图中不一样?

+

如果你自己试验这个查询，可能会发现显示输出的数据顺序与这里的 不同。出现这种情况很正常。如果没有明确排序查询结果（下一课介绍），则返回的数据没有特定的顺序。返回数据的顺序可能是数据被添 加到表中的顺序，也可能不是。只要返回相同数目的行，就是正常的

+

:::

+

如上的一条简单 SELECT 语句将返回表中的所有行。数据没有过滤（过滤将得出结果集的一个子集），也没有排序。以后的章节将会详细讨论。

+

::: warning SQL 语句的分号

+

多条 SQL 语句必须以分号（；）分隔。有些 DBMS 不需要在单挑语句后面加分号，但是也有需要要分号的。

+

总之，加上分号一定没有坏处。

+

:::

+

::: tip SQL 语句不区分大小写

+

SQL 语句不区分大小写，因此 SELECT 与 select 是相同的。 同样，写成 Select 也没有关系。许多 SQL 开发人员喜欢对 SQL 关键字使用大写，而对列名和表名使用小写，

+

:::

+

::: tip 使用空格

+

在处理 SQL 语句时，其中所有空格都被忽略。SQL 语句可以写成长长 的一行，也可以分写在多行。

+
1
2
3
4
5
6
7
8
9
10
SELECT area_subway_name
FROM subways;

SELECT
area_subway_name
FROM
subways;

SELECT area_subway_name FROM subways;
-- 以上都是可以正常运行的,注意以分号结尾来表达一段代码的结束
+ +

:::

+

检索多列

要想从一个表中检索多个列，仍然使用相同的 SELECT 语句。从检索单列一样只不过是要把检索的列名用逗号分隔罢了。

+

::: tip 小心逗号引发的错误

+

当选择多个列时，一定要在列名之间加上逗号，但最后一个列名后不加。如果在最后一个列名后加了逗号，将出现错误。

+

:::

+

下面的 SELECT 语句从 subways 表中检索 3 列

+
1
2
-- 检索 subways 表里面的 id,area_subway_name,station 字段
SELECT id,area_subway_name,station FROM subways;
+ +

输出结果

+

image-20211104171647508

+

检索所有列

和之前的检索单列、多列一样，检索所有列只是把列名换成了通配符（ * ）

+
1
2
-- 检索 subways 表里面的所有字段
SELECT * FROM subways;
+ +

输出结果

+

image-20211104171915041

+

::: tip 注意通配符

+

一般而言，除非你确实需要表中的每一列，否则最好别使用* 通配符。 虽然使用通配符能让你自己省事，不用明确列出所需列，但检索不需 要的列通常会降低检索和应用程序的性能

+

:::

+

检索不重复的值

之前的练习案例你会发现重复出现了很多相同的值，如何让这些重复的值不出现呢？

+

办法就是使用 DISTINCT 关键字, distinct 意为不同的、清楚的、确切的，顾名思义，它会返回数据库中不同的值

+
1
2
-- 检索重复的值
SELECT DISTINCT area_subway_name FROM subways
+ +

输出结果,与检索单列对比是不是少了重复的值

+

image-20211104172658631

+

::: tip 不能部分使用 DISTINCT

+

DISTINCT 关键字作用于所有的列，不仅仅是跟在其后的那一列。例如，你指定SELECT DISTINCT id,area_subway_name,station FROM subways;除非指定的 两列完全相同，否则所有的行都会被检索出来。

+

image-20211104173041365

+

:::

+

限制结果

SELECT 语句返回指定表中所有匹配的行，很可能是每一行。如果你只想返回第一行或者一定数量的行，该怎么办呢？

+

我们可以使用 TOP 但是注意的是在各种数据库中这一 SQL 的实现并不相同。由于本教程使用的是 MySQL 所以只显示 MySQL 的用法

+
1
2
-- top 选择前面 5 条数据
SELECT * FROM subways LIMIT 10;
+ +

image-20211104212011545

+
1
2
-- top 选择第 5 行往后的 5 行数据 用数学语言表示 (5,10]
SELECT * FROM subways LIMIT 5 OFFSET 5;
+ +

image-20211104212027024

+

注释

在很多编辑器里面你都可以使用快捷键ctrl+/来注释所以本章只是简单是说明有哪些注释可以用的。

+
1
2
3
4
5
-- 注释
# 注释
/*
多行注释
*/
+ +

排序检索数据(ORDER BY )

SQL 语句返回某个数据库表的单个列。是没有特定顺序的。

+

其实，检索出的数据并不是随机显示的。如果不排序，数据一般将以它在 底层表中出现的顺序显示，这有可能是数据最初添加到表中的顺序。但是， 如果数据随后进行过更新或删除，那么这个顺序将会受到 DBMS 重用回 收存储空间的方式的影响。因此，如果不明确控制的话，则最终的结果不 能（也不应该）依赖该排序顺序。关系数据库设计理论认为，如果不明确 规定排序顺序，则不应该假定检索出的数据的顺序有任何意义。

+

::: 子句 (clause)

+

SQL 语句由子句构成，有些子句是必需的，有些则是可选的。一个子 句通常由一个关键字加上所提供的数据组成。子句的例子有我们在前一课看到的 SELECT 语句的 FROM 子句。

+

:::

+

为了明确地排序用 SELECT 语句检索出的数据，可使用 ORDER BY 子句。

+

ORDER 意思为命令、顺序。

+

ORDER BY 子句取一个或多个列的名字，据此对输出进行排序。

+
1
SELECT area_subway_name FROM subways ORDER BY area_subway_name;
+ +

image-20211105173054891

+

:::tip 注意：ORDER BY 子句的位置

+

在指定一条 ORDER BY 子句时，应该保证它是 SELECT 语句中最后一条子句。如果它不是最后的子句，将会出现错误消息。

+

:::

+

按多个列排序

我们有时候的排序是不止一个裂的数据排序。例如， 地铁路线，我们希望先按地铁城市名排序，然后再按照地铁线路，最后按照地铁站排序。

+
1
SELECT area_subway_name,station,platform FROM subways ORDER BY area_subway_name,station,platform;
+ +

image-20211105195823926

+

按列位置排序

除了能用列名指出排序顺序外，ORDER BY 还支持按相对列位置进行排 序。

+
1
SELECT area_subway_name,station,platform FROM subways ORDER BY 1,2,3;
+ +

image-20211105195823926

+

可以看到，这里的输出与上面的查询相同，不同之处在于 ORDER BY 子句。

+
1
2
3
4
/* select 后面选择了 area_subway_name,station,platform 列
order by 1,2,3 代表了,先按 area_subway_name 排序,然后按 station 排序,最后按 platform 排序
*/
SELECT area_subway_name,station,platform FROM subways ORDER BY 1,2,3;
+ +

这一技术的主要好处在于不用重新输入列名。但它也有缺点。首先，不明 确给出列名有可能造成错用列名排序。其次，在对 SELECT 清单进行更改 时容易错误地对数据进行排序（忘记对 ORDER BY 子句做相应的改动）。 最后，如果进行排序的列不在 SELECT 清单中，显然不能使用这项技术。

+

指定排序方向 （升序、降序）

数据排序不限于升序排序（从 A 到 Z），这只是默认的排序顺序。还可以 使用 ORDER BY 子句进行降序（从 Z 到 A）排序。为了进行降序排序， 必须指定 DESC 关键字。

+
1
2
-- id 降序排列
SELECT * FROM subways order by id desc;
+ +

image-20211105210446735

+

DESC 关键字只应用到直接位于其前面的列名。

+

:::warning 在多个列上降序排序

+

如果想在多个列上进行降序排序，必须对每一列指定 DESC 关键字。

+

:::

+

，DESC 是 DESCENDING 的缩写，这两个关键字都可以使用。与 DESC 相对的是 ASC（或 ASCENDING），在升序排序时可以指定它。但是你指定也没啥用，因为升序的默认的。

+

::: tip

+

在对文本性数据进行排序时，A 与 a 相同吗？a 位于 B 之前，还是 Z 之后？这些问题不是理论问题，其答案取决于数据库的设置方式。

+

在字典（dictionary）排序顺序中，A 被视为与 a 相同，这是大多数数 据库管理系统的默认行为。但是，许多 DBMS 允许数据库管理员在需 要时改变这种行为（如果你的数据库包含大量外语字符，可能必须这 样做）。

+

这里的关键问题是，如果确实需要改变这种排序顺序，用简单的 ORDER BY 子句可能做不到。你必须请求数据库管理员的帮助

+

:::

+

过滤数据(WHERE)

使用 WHERE 子句

数据库表一般包含大量的数据，很少需要检索表中的所有行。通常只会 根据特定操作或报告的需要提取表数据的子集。只检索所需数据需要指 定搜索条件（search criteria），搜索条件也称为过滤条件（filter condition）。

+

人话就是寻找符合条件的数据

+

在 SELECT 语句中，数据根据 WHERE 子句中指定的搜索条件进行过滤。 WHERE 子句在表名（FROM 子句）之后给出，如下所示：
输

+
1
2
-- 语句使用通配符检索所有的列，但是只会返回 id=1987的行
SELECT * FROM subways WHERE id = 1987;
+ +

image-20211105211950641

+

::: tip 注意：WHERE 子句的位置

+

在同时使用 ORDER BY 和 WHERE 子句时，应该让 ORDER BY 位于 WHERE 之后，否则将会产生错误（[关于 ORDER BY 的使用](#排序检索数据(ORDER BY ))）

+

:::

+

WHERE 子句操作符

我们可以通过子句操作符来获得我们想要的数据

+
1
select * from 表名 where 列名 运算符 想要的结果
+ +

让我们来几个案例来看看。

+

找出 id 小于 3000 的数据。

+
1
SELECT * FROM subways WHERE id < 3000;
+ +

找出 area_subway_name 不是郑州的数据

+
1
2
3
SELECT * FROM subways WHERE area_subway_name <> "郑州";
-- 等价
SELECT * FROM subways WHERE area_subway_name != "郑州";
+ +

::: tip 何时使用引号

+

如果将值与字符串类型的 列进行比较，就需要限定引号。用来与数值列进行比较的值不用引号。

+

:::

+

::: tip 是!=还是<>？

+

!= 和 <> 通常可以互换。但是，并非所有 DBMS 都支持这两种不等于操 作符。例如，Microsoft Access 支持 <> 而不支持 != 。如果有疑问，请参 阅相应的 DBMS 文档

+

:::

+

算术运算符

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
操作符描述示例
+相加：将符号两边的数值加起来。a + b 得 30
-相减：从最边的操作数中减去右边的操作数。a - b 得 -10
*相乘：将两边的操作数相乘。a * b 得 200
/相除：用右边的操作数除以左边的操作数。b / a 得 2
%取余：用右边的操作数除以左边的操作数，并返回余数。b % a 得 0
+

比较运算符

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
操作符描述示例
=检查两个操作数的值是否相等，是的话返回 true。(a = b) 不为 true。
!= 和 <>检查两个操作数的值是否相等，如果不等则返回 true。(a != b) 为 true。
>检查左边的操作数是否大于右边的操作数，是的话返回真。(a > b) 不为 true。
>=检查左边的操作数是否大于或等于右边的操作数，是的话返回真。(a >= b) 不为 true。
!检查左边的操作数是否不小于右边的操作数，是的话返回真。(a ! b)
!>检查左边的操作数是否不大于右边的操作数，是的话返回真。(a !> b) 为 true。
+

逻辑运算符

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
运算符描述
ALLALL 运算符用于将一个值同另一个值集中所有的值进行比较。
ANDAND 运算符使得在 WHERE 子句中可以同时存在多个条件。
ANYANY 运算符用于将一个值同条件所指定的列表中的任意值相比较。
BETWEEN给定最小值和最大值，BETWEEN 运算符可以用于搜索区间内的值。
EXISTSEXISTS 运算符用于在表中搜索符合特定条件的行。
ININ 运算符用于将某个值同指定的一列字面值相比较。
LIKELIKE 运算符用于使用通配符对某个值和与其相似的值做出比较。
NOTNOT 操作符反转它所作用的操作符的意义。例如，NOT EXISTS、NOT BETWEEN、NOT IN 等。这是一个求反运算符。
OROR 运算符用于在 SQL 语句中连接多个条件。
IS NULLNULL Operator 用于将某个值同 NULL 作比较。
UNIQUEUNIQUE 运算符检查指定表的所有行，以确定没有重复。
+

范围值检查

要检查某个范围的值，可以使用 BETWEEN 操作符。其语法与其他 WHERE 子句的操作符稍有不同，因为它需要两个值，即范围的开始值和结束值。

+

让我们来检索 id 是 2000 到 2005 之间的数据吧。数学语言表述为[2000,2005]

+
1
2
-- 范围值检查
SELECT * FROM subways WHERE id BETWEEN 2000 AND 2005;
+ +

image-20211108155024457

+

在使用 BETWEEN 时，必须指定两个值——所需范围的低端值和高端值。这两个值必须用 AND 关键字分隔。BETWEEN 匹配范围中所有的值，包括指定的开始值和结束值。

+

空值检查

在创建表时，表设计人员可以指定其中的列能否不包含值。在一个列不 包含值时，称其包含空值 NULL。

+

::: tip NULL

+

无值（no value），它与字段包含 0、空字符串或仅仅包含空格不同。

+

:::

+

确定值是否为 NULL，不能简单地检查是否 = NULL。SELECT 语句有一个 特殊的 WHERE 子句，可用来检查具有 NULL 值的列。这个 WHERE 子句就 是 IS NULL 子句。其语法如下：

+
1
2
-- 空值检查
SELECT * FROM subways WHERE id IS NULL;
+ +

这条语句返回所有数据(空的 id 字段)，因为表中没有空的行，所以没有返回数据。

+

高级数据过滤

这一课讲授如何组合 WHERE 子句以建立功能更强、更高级的搜索条件。 我们还将学习如何使用 NOT 和 IN 操作符。

+

组合 WHERE 子句

为了进行更强的过滤控制，SQL 允许给出多个 WHERE 子句。

+

AND 操作符

找出 id 小于 2007 且大于 2000 的数据

+
1
2
-- AND
SELECT * FROM subways WHERE id > 2000 AND id < 2007;
+ +

image-20211108161956721

+

::: AND

+

用在 WHERE 子句中的关键字，用来指示检索满足所有给定条件的行。

+

:::

+

这个例子只包含一个 AND 子句，因此最多有两个过滤条件。可以增加多 个过滤条件，每个条件间都要使用 AND 关键字。

+

OR 操作符

OR 操作符与 AND 操作符正好相反，它指示 DBMS 检索匹配任一条件的行。事实上，许多 DBMS 在 OR WHERE 子句的第一个条件得到满足的情 况下，就不再计算第二个条件了（在第一个条件满足时，不管第二个条 件是否满足，相应的行都将被检索出来）

+
1
2
-- OR
SELECT * FROM subways WHERE id = 2000 OR id = 2001;
+ +

image-20211108165746007

+

这一段 SQL 语句返回了 id = 2000 或 id = 2001 的数据。

+

::: tip OR

+

WHERE 子句中使用的关键字，用来表示检索匹配任一给定条件的行。

+

:::

+

IN 操作符

IN 操作符用来指定条件范围，范围中的每个条件都可以进行匹配。

+

IN 取 一组由逗号分隔、括在圆括号中的合法值。

+
1
2
-- IN
SELECT * FROM subways WHERE code IN("SUY|54d7ed78-86ac-7095","SUY|15c420a5-8ea4-9495");
+ +

image-20211108171648832

+

此 SELECT 语句检索 code 列里面符合 IN 操作符后面由逗号分隔的合法值，这些值必须括在圆括号中。

+

为什么要使用 IN 操作符？其优点如下。

+
    +
  • 在有很多合法选项时，IN 操作符的语法更清楚，更直观。
    • +
  • 在与其他 AND 和 OR 操作符组合使用 IN 时，求值顺序更容易管理。
    • +
  • IN 操作符一般比一组 OR 操作符执行得更快（在上面这个合法选项很少的例子中，你看不出性能差异）。
    • +
  • IN 的最大优点是可以包含其他 SELECT 语句，能够更动态地建立 WHERE 子句。
    • +
+

NOT 操作符

WHERE 子句中的 NOT 操作符有且只有一个功能，那就是否定其后所跟的任何条件。

+

::: tip NOT

+

WHERE 子句中用来否定其后条件的关键字。

+

:::

+
1
2
-- NOT
SELECT * FROM subways WHERE area_subway_name NOT IN("郑州","上海") ORDER BY area_subway_name;
+ +

image-20211108172846172

+

返回 area_subway_name 不是 郑州和上海的数据，并进行了 area_subway_name 排序

+

用通配符进行过滤

这一章介绍什么是通配符、如何使用通配符以及怎样使用 LIKE 操作符 进行通配搜索，以便对数据进行复杂过滤。

+

LIKE 操作符进行模糊查询

前面介绍的所有操作符都是针对已知值进行过滤的。在我们的日常使用中肯定还有未知的，比如寻找姓李的同学有几个之类的。例如下面的例子。

+

查找姓王的学生

+
1
2
-- LINK
SELECT * FROM students WHERE sname LIKE "王%";
+ +

image-20211108201951329

+

上面的代码使用了通配符。

+

通配符本身实际上是 SQL 的 WHERE 子句中有特殊含义的字符，SQL 支持 几种通配符。为在搜索子句中使用通配符，必须使用 LIKE 操作符。LIKE 指示 DBMS，后跟的搜索模式利用通配符匹配而不是简单的相等匹配进 行比较。

+

::: tip 通配符（wildcard）

+

用来匹配值的一部分的特殊字符。

+

:::

+

::: tip 搜索模式（search pattern）

+

由字面值、通配符或两者组合构成的搜索条件

+

:::

+

::: tip 谓词（predicate）

+

操作符何时不是操作符？答案是，它作为谓词时。从技术上说，LIKE 是谓词而不是操作符。虽然最终的结果是相同的，但应该对此术语有 所了解，以免在 SQL 文献或手册中遇到此术语时不知所云

+

:::

+

通配符搜索只能用于文本字段（字符串），非文本数据类型字段不能使用 通配符搜索。

+

百分号（%）通配符

最常使用的通配符是百分号（%）。在搜索串中，% 表示任何字符出现任意次数。

+
1
2
-- LINK
SELECT * FROM students WHERE sname LIKE "王%";
+ +

以上代码查找了以王开头的字段。

+

::: tip Access 通配符

+

如果使用的是 Microsoft Access，需要使用*而不是%。

+

:::

+

::: tip 说明：区分大小写

+

根据 DBMS 的不同及其配置，搜索可以是区分大小写的。如果区分大 小写，则 “A%” 与 “a%”是不一样的

+

:::

+

通配符可在搜索模式中的任意位置使用，并且可以使用多个通配符。

+
1
SELECT * FROM students WHERE class LIKE "%95033%";
+ +

搜索模式 “%95033%”表示匹配任何位置上包含文本 95033 的值，不论它之前或者之后出现什么字符。

+

::: warning 请注意 NULL

+

通配符%看起来像是可以匹配任何东西，但有个例外，这就是 NULL。 子句 WHERE name LIKE '%'不会匹配产品名称为 NULL 的行。

+

:::

+

下划线（_）通配符

另一个有用的通配符是下划线（_）。下划线的用途与 % 一样，但它只匹配 单个字符，而不是多个字符。

+

::: tip 说明：Access 通配符

+

如果使用的是 Microsoft Access，需要使用?而不是_。

+

:::

+
1
2
-- 下划线（_）通配符
SELECT * FROM subways WHERE id LIKE "__80";
+ +

image-20211108210409362

+

注意使用了两个下划线用来匹配所以是匹配前面任意两个字符后面以 80 结尾的数据。

+

可以与 % 通配符对比一下

+
1
SELECT * FROM subways WHERE id LIKE "%80";
+ +

image-20211108210430171

+

与%能匹配 0 个字符不同，_总是刚好匹配一个字符，不能多也不能少

+

使用通配符的技巧

正如所见，SQL 的通配符很有用。但这种功能是有代价的，即通配符搜 索一般比前面讨论的其他搜索要耗费更长的处理时间。这里给出一些使 用通配符时要记住的技巧。

+
    +
  • 不要过度使用通配符。如果其他操作符能达到相同的目的，应该使用 其他操作符。
    • +
  • 在确实需要使用通配符时，也尽量不要把它们用在搜索模式的开始 处。把通配符置于开始处，搜索起来是最慢的。
    • +
  • 仔细注意通配符的位置。如果放错地方，可能不会返回想要的数据。
    • +
+

计算字段

存储在数据库表中的数据一般不是应用程序所需要的格式，下面举几个 例子。

+
    +
  • 需要显示公司名，同时还需要显示公司的地址，但这两个信息存储在 不同的表列中。
    • +
  • 城市、州和邮政编码存储在不同的列中（应该这样），但邮件标签打 印程序需要把它们作为一个有恰当格式的字段检索出来。
    • +
  • 列数据是大小写混合的，但报表程序需要把所有数据按大写表示出来。
    • +
  • 物品订单表存储物品的价格和数量，不存储每个物品的总价格（用价 格乘以数量即可）。但为打印发票，需要物品的总价格。  需要根据表数据进行诸如总数、平均数的计算。
    • +
+

在上述每个例子中，存储在表中的数据都不是应用程序所需要的。我们 需要直接从数据库中检索出转换、计算或格式化过的数据，而不是检索 出数据，然后再在客户端应用程序中重新格式化。

+

这就是计算字段可以派上用场的地方了。与前几课介绍的列不同，计算 字段并不实际存在于数据库表中。计算字段是运行时在 SELECT 语句内 创建的。

+

::: tip 字段（field）

+

基本上与列（column）的意思相同，经常互换使用，不过数据库列一 般称为列，而术语字段通常与计算字段一起使用。

+

:::

+

需要特别注意，只有数据库知道 SELECT 语句中哪些列是实际的表列， 哪些列是计算字段。从客户端（如应用程序）来看，计算字段的数据与 其他列的数据的返回方式相同。

+

::: 提示：客户端与服务器的格式

+

在 SQL 语句内可完成的许多转换和格式化工作都可以直接在客户端 应用程序内完成。但一般来说，在数据库服务器上完成这些操作比在 客户端中完成要快得多。

+

:::

+

拼接字段

我们直接来看案例

+
1
2
-- 拼接字段
SELECT CONCAT(sno,sname) from students;
+ +

image-20211108211632207

+

如果我们想去掉数据中的前后空格可以使用 TRIM()函数，同时还有 LTRIM( )去掉左空格和 RTIRM( )去掉右空格；

+
1
SELECT CONCAT(trim(sno),rtrim(sname)) from students;
+ +

使用别名

从前面的输出可以看到，SELECT 语句可以很好地拼接地址字段。但是， 这个新计算列的名字是什么呢？实际上它没有名字，它只是一个值。如 果仅在 SQL 查询工具中查看一下结果，这样没有什么不好。但是，一个 未命名的列不能用于客户端应用中，因为客户端没有办法引用它。
为了解决这个问题，SQL 支持列别名。别名（alias）是一个字段或值的 替换名。别名用 AS 关键字赋予。请看下面的 SELECT 语句：

+
1
2
-- 拼接字段
SELECT CONCAT(sno,sname) as noAndName from students;
+ +

image-20211108212307162

+

执行算术计算

计算字段的另一常见用途是对检索出的数据进行算术计算。

+

查看案例

+
1
2
-- 执行算术计算
SELECT *,sno*score as product FROM students;
+ +

image-20211109211920796

+

使用函数处理数据

这一章介绍什么是函数，DBMS 支持何种函数，以及如何使用这些函数； 还将讲解为什么 SQL 函数的使用可能会带来问题。

+

函数

与大多数其他计算机语言一样，SQL 也可以用函数来处理数据。函数一 般是在数据上执行的，为数据的转换和处理提供了方便。

+

之前我们见过的 trim() 就是一个函数。

+

使用函数

大多数 SQL 实现支持以下类型的函数。

+
    +
  • 用于处理文本字符串（如删除或填充值，转换值为大写或小写）的文 本函数。
    • +
  • 用于在数值数据上进行算术操作（如返回绝对值，进行代数运算）的 数值函数。
    • +
  • 用于处理日期和时间值并从这些值中提取特定成分（如返回两个日期 之差，检查日期有效性）的日期和时间函数。
    • +
  • 返回 DBMS 正使用的特殊信息（如返回用户登录信息）的系统函数。
    • +
+

::: danger 8.2

+

81 页 正在施工中….

+

:::

+

MySQL 常用函数

汇总数据

聚集函数

我们经常需要汇总数据而不用把它们实际检索出来，为此 SQL 提供了专 门的函数。使用这些函数，SQL 查询可用于检索数据，以便分析和报表 生成。这种类型的检索例子有：

+
    +
  • 确定表中行数（或者满足某个条件或包含某个特定值的行数）；
    • +
  • 获得表中某些行的和；
    • +
  • 找出表列（或所有行或某些特定的行）的最大值、最小值、平均值。
    • +
+

::: tip 聚集函数（aggregate function）

+

对某些行运行的函数，计算并返回一个值。

+

:::

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
函数说明
AVG()返回某列的平均值
COUNT()返回某列的行数
MAX()返回某列的最大值
MIN()返回某列的最小值
SUM()返回某列值之和
+

::: tip 列值为 null

+

AVG()函数忽略列值为 NULL 的行。

+

如果指定列名，则 COUNT()函数会忽略指定列的值为空的行，但如果 COUNT()函数中用的是星号（*），则不忽略。

+

MAX()函数忽略列值为 NULL 的行。

+

MIN()函数忽略列值为 NULL 的行。

+

SUM()函数忽略列值为 NULL 的行。

+

:::

+

分组数据 GROUP

这一课介绍如何分组数据，以便汇总表内容的子集。这涉及两个新 SELECT 语句子句：GROUP BY 子句和 HAVING 子句。

+

数据分组

使用 SQL 聚集函数可以汇总数据。这样，我们就能够对行进行计数，计算和与平均数，不检索所有数据就获得大值和小值。

+

目前为止的所有计算都是在表的所有数据或匹配特定的 WHERE 子句的数 据上进行的。例如下面的例子

+
1
SELECT area_subway_name,COUNT(area_subway_name) from subways WHERE area_subway_name = '郑州';
+ +

image-20211111171641909

+

如果我们要返回每个地铁名称出现的次数怎么办?总可能一个一个的去判断吧?

+

这时候就需要使用到分组了。使用分组可以将数据分为多个逻辑组， 对每个组进行聚集计算。

+

创建分组

1
SELECT area_subway_name,COUNT(area_subway_name) from subways GROUP BY area_subway_name;
+ +

image-20211111171830400

+

因为使用了 GROUP BY，就不必指定要计算和估值的每个组了。系统会自 动完成。GROUP BY 子句指示 DBMS 分组数据，然后对每个组而不是整 个结果集进行聚集。

+

在使用 GROUP BY 子句前，需要知道一些重要的规定。

+
    +
  • GROUP BY 子句可以包含任意数目的列，因而可以对分组进行嵌套， 更细致地进行数据分组。
    • +
  • 如果在 GROUP BY 子句中嵌套了分组，数据将在后指定的分组上进 行汇总。换句话说，在建立分组时，指定的所有列都一起计算（所以 不能从个别的列取回数据）。
    • +
  • GROUP BY 子句中列出的每一列都必须是检索列或有效的表达式（但 不能是聚集函数）。如果在 SELECT 中使用表达式，则必须在 GROUP BY 子句中指定相同的表达式。不能使用别名。
    • +
  • 大多数 SQL 实现不允许 GROUP BY 列带有长度可变的数据类型（如文 本或备注型字段）。
    • +
  • 除聚集计算语句外，SELECT 语句中的每一列都必须在 GROUP BY 子句 中给出。
    • +
  • 如果分组列中包含具有 NULL 值的行，则 NULL 将作为一个分组返回。 如果列中有多行 NULL 值，它们将分为一组。
    • +
  • GROUP BY 子句必须出现在 WHERE 子句之后，ORDER BY 子句之前。
    • +
+

过滤分组

除了能用 GROUP BY 分组数据外，SQL 还允许过滤分组，规定包括哪些 分组，排除哪些分组。例如，上一节的例子中我们不想看见郑州的统计次数就可以这样写。

+
1
2
-- 过滤分组
SELECT area_subway_name,COUNT(area_subway_name) from subways GROUP BY area_subway_name having area_subway_name != '郑州';
+ +

image-20211111172340655

+

还记得上一节,”使用 GROUP BY 子句前的规定”吗?GROUP 子句 where 子句之后,order by 子句之前,而且因为 where 过滤指定的是行而不是分组。事实上，where 没有分组的概念。

+

那么，不使用 WHERE 使用什么呢？SQL 为此提供了另一个子句，就是 HAVING 子句。HAVING 非常类似于 WHERE。事实上，目前为止所学过的 所有类型的 WHERE 子句都可以用 HAVING 来替代。唯一的差别是，WHERE 过滤行，而 HAVING 过滤分组。

+

::: tip 说明：HAVING 和 WHERE 的差别

+

这里有另一种理解方法，WHERE 在数据分组前进行过滤，HAVING 在数 据分组后进行过滤。这是一个重要的区别，WHERE 排除的行不包括在 分组中。这可能会改变计算值，从而影响 HAVING 子句中基于这些值 过滤掉的分组。

+

:::

+

::: tip 说明：使用 HAVING 和 WHERE

+

HAVING 与 WHERE 非常类似，如果不指定 GROUP BY，则大多数 DBMS 会同等对待它们。不过，你自己要能区分这一点。使用 HAVING 时应 该结合 GROUP BY 子句，而 WHERE 子句用于标准的行级过滤。

+

:::

+

分组和排序

GROUP BY 和 ORDER BY 经常完成相同的工作，但它们非常不同，理解这一点很重要。以下汇总了它们之间的差别。

+ + + + + + + + + + + + + + + + + + + +
ORDER BYGROUP BY
对产生的输出排序对行分组，但输出可能不是分组的顺序
任意列都可以使用（甚至非选择的列也可以使用）只可能使用选择列或表达式列，而且必须使用每个选择列 表达式
不一定需要如果与聚集函数一起使用列（或表达式），则必须使用
+

第一项差别极为重要。我们经常发现，用 GROUP BY 分组的数据确实是以分组顺序输出的。但并不总是这样，这不是 SQL 规范所要求的。此外，即使特定的 DBMS 总是按给出的 GROUP BY 子句排序数据，用户也可能会要求以不同的顺序排序。就因为你以某种方式分组数据（获得特定的分组聚集值），并不表示你需要以相同的方式排序输出。 应该提供明确的 ORDER BY 子句，即使其效果等同于 GROUP BY 子句。

+

::: tip 不要忘记 ORDER BY

+

一般在使用 GROUP BY 子句时，应该也给出 ORDER BY 子句。这是保 证数据正确排序的唯一方法。千万不要仅依赖 GROUP BY 排序数据。

+

:::

+

为说明 GROUP BY 和 ORDER BY 的使用方法，来看一个例子。

+
1
2
-- 排序和分组
SELECT area_subway_name,COUNT(area_subway_name) from subways GROUP BY area_subway_name having area_subway_name != '郑州' ORDER BY id DESC;
+ +

image-20211111180341765

+

SELECT 子句顺序

在 SELECT 语句中 使用时必须遵循的次序，以下列出迄今为止所学过的子句。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
子句说明是否必须使用
SELECT要返回的列或表达式是
FROM从中检索数据的表仅在从表选择数据时使用
WHERE行级过滤否
GROUP BY分组说明仅在按组计算聚集时使用
HAVING组级过滤否
ORDER BY输出排序顺序否
+

使用子查询

SELECT 语句是 SQL 的查询。我们迄今为止所看到的所有 SELECT 语句都 是简单查询，即从单个数据库表中检索数据的单条语句。

+

::: tip 查询（query）

+

任何 SQL 语句都是查询。但此术语一般指 SELECT 语句。

+

:::

+

SQL 还允许创建子查询（subquery），即嵌套在其他查询中的查询。为什 么要这样做呢？理解这个概念的最好方法是考察几个例子。

+

利用子查询进行过滤

比如 student 表中有没有记录 学生的 degree,但是 score 表中记录了,同时 student 表中的 sno 和 score 表中的 sno 有所对应，我们可以使用子查询来找到学生的 degree

+
1
2
-- 子查询
select sname from students WHERE sno IN (SELECT sno from score) ORDER BY sno;
+ +

image-20211112150009187

+

分析 : 这一条 SQL 语句可以看成 先执行 SELECT sno from score 返回了

+

image-20211112150707717

+

然后把值替换进了 select sname from students WHERE sno IN () IN 的里面。

+

联结表

这一章会介绍什么是联结，为什么使用联结，如何编写使用联结的 SELECT 语句。

+

联结

SQL 最强大的功能之一就是能在数据查询的执行中联结（join）表。联结 是利用 SQL 的 SELECT 能执行的最重要的操作，很好地理解联结及其语 法是学习 SQL 的极为重要的部分。

+

在能够有效地使用联结前，必须了解关系表以及关系数据库设计的一些 基础知识。下面的介绍并不能涵盖这一主题的所有内容，但作为入门已经够了。

+

关系表

理解关系表，最好是来看个例子。

+

有一个包含产品目录的数据库表，其中每类物品占一行。对于每一种物 品，要存储的信息包括产品描述、价格，以及生产该产品的供应商。

+

现在有同一供应商生产的多种物品，那么在何处存储供应商名、地址、联系方法等供应商信息呢？将这些数据与产品信息分开存储的理由是：

+
    +
  • 同一供应商生产的每个产品，其供应商信息都是相同的，对每个产品 重复此信息既浪费时间又浪费存储空间；
    • +
  • 如果供应商信息发生变化，例如供应商迁址或电话号码变动，只需修 改一次即可；
    • +
  • 如果有重复数据（即每种产品都存储供应商信息），则很难保证每次 输入该数据的方式都相同。不一致的数据在报表中就很难利用。
    • +
+

关键是，相同的数据出现多次决不是一件好事，这是关系数据库设计的 基础。关系表的设计就是要把信息分解成多个表，一类数据一个表。各 表通过某些共同的值互相关联（所以才叫关系数据库）。

+

在这个例子中可建立两个表：一个存储供应商信息，另一个存储产品信 息。Vendors 表包含所有供应商信息，每个供应商占一行，具有唯一的 标识。此标识称为主键（primary key），可以是供应商 ID 或任何其他唯 一值。
Products 表只存储产品信息，除了存储供应商 ID（Vendors 表的主键） 外，它不存储其他有关供应商的信息。Vendors 表的主键将 Vendors 表 与 Products 表关联，利用供应商 ID 能从 Vendors 表中找出相应供应 商的详细信息。

+

这样做的好处是：

+
    +
  • 供应商信息不重复，不会浪费时间和空间；
    • +
  • 如果供应商信息变动，可以只更新 Vendors 表中的单个记录，相关表 中的数据不用改动；
    • +
  • 由于数据不重复，数据显然是一致的，使得处理数据和生成报表更简单。
    • +
+

总之，关系数据可以有效地存储，方便地处理。因此，关系数据库的可 伸缩性远比非关系数据库要好。

+

::: tip 可伸缩（scale）

+

能够适应不断增加的工作量而不失败。设计良好的数据库或应用程序 称为可伸缩性好（scale well）。

+

:::

+

为什么使用联结

如前所述，将数据分解为多个表能更有效地存储，更方便地处理，并且 可伸缩性更好。但这些好处是有代价的。

+

如果数据存储在多个表中，怎样用一条 SELECT 语句就检索出数据呢？

+

答案是使用联结。简单说，联结是一种机制，用来在一条 SELECT 语句 中关联表，因此称为联结。使用特殊的语法，可以联结多个表返回一组 输出，联结在运行时关联表中正确的行。

+

创建联结

创建联结非常简单，指定要联结的所有表以及关联它们的方式即可。请 看下面的例子：

+
1
2
-- 创建联结
SELECT students.sno,students.sname,score.degree FROM students,score WHERE students.sno = score.sno;
+ +

image-20211112155443946

+

我们来看这段代码。SELECT 语句与前面所有语句一样指定要检索的列。

+

这里最大的差别是所指定的两列（sno 和 sname）在一个 表中，而第三列（degree）在另一个表中。

+

现在来看 FROM 子句。与以前的 SELECT 语句不一样，这条语句的 FROM 子句列出了两个表：students 和 score。它们就是这条 SELECT 语句 联结的两个表的名字。这两个表用 WHERE 子句正确地联结，WHERE 子句 指示 DBMS 将 students 表中的 sno 与 score 表中的 sno 匹配起来。

+

我们注意到要匹配的两列指定为 students.sno 和 students.sno = score.snoscore.sno 这里需要这种完全限定列名，如果只给出 sno，DBMS 就不知道指的是哪一个了。

+

::: tip 警告：完全限定列名

+

就像前一课提到的，在引用的列可能出现歧义时，必须使用完全限定 列名（用一个句点分隔表名和列名）。如果引用一个没有用表名限制的 具有歧义的列名，大多数 DBMS 会返回错误。

+

:::

+

WHERE 子句的重要性

使用 WHERE 子句建立联结关系似乎有点奇怪，但实际上是有个很充分的 理由的。要记住，在一条 SELECT 语句中联结几个表时，相应的关系是 在运行中构造的。在数据库表的定义中没有指示 DBMS 如何对表进行联 结的内容。你必须自己做这件事情。在联结两个表时，实际要做的是将 第一个表中的每一行与第二个表中的每一行配对。WHERE 子句作为过滤 条件，只包含那些匹配给定条件（这里是联结条件）的行。没有 WHERE 子句，第一个表中的每一行将与第二个表中的每一行配对，而不管它们 逻辑上是否能配在一起。

+
1
2
-- WHERE 子句的重要性
SELECT students.sno,students.sname,score.degree FROM students,score;
+ +

111

+

::: tip 注意：不要忘了 WHERE 子句

+

要保证所有联结都有 WHERE 子句，否则 DBMS 将返回比想要的数据多 得多的数据。同理，要保证 WHERE 子句的正确性。不正确的过滤条件 会导致 DBMS 返回不正确的数据

+

:::

+

内联结 INNER JOIN

目前为止使用的联结称为等值联结（equijoin），它基于两个表之间的相等测试。这种联结也称为内联结（inner join）。其实，可以对这种联结使用稍微不同的语法，明确指定联结的类型。下面的 SELECT 语句返回与前面例子完全相同的数据：

+
1
2
-- 内连接
SELECT students.sno,students.sname,score.degree FROM students INNER JOIN score ON students.sno = score.sno;
+ +

image-20211112170705621

+

此语句中的 SELECT 与前面的 SELECT 语句相同，但 FROM 子句不同。这 里，两个表之间的关系是以 INNER JOIN 指定的部分 FROM 子句。在使用 这种语法时，联结条件用特定的 ON 子句而不是 WHERE 子句给出。传递 给 ON 的实际条件与传递给 WHERE 的相同。

+

联结多个表

SQL 不限制一条 SELECT 语句中可以联结的表的数目。创建联结的基本 规则也相同。首先列出所有表，然后定义表之间的关系。

+
1
SELECT prod_name, vend_name, prod_price, quantity FROM OrderItems, Products, Vendors WHERE Products.vend_id = Vendors.vend_id  AND OrderItems.prod_id = Products.prod_id  AND order_num = 20007;
+ +
1
2
3
SELECT cust_name, cust_contact FROM Customers WHERE cust_id IN
(SELECT cust_id FROM Orders WHERE order_num IN
(SELECT order_num FROM OrderItems WHERE prod_id = 'RGAN01'));
+ +
1
SELECT cust_name, cust_contact FROM Customers, Orders, OrderItems WHERE Customers.cust_id = Orders.cust_id  AND OrderItems.order_num = Orders.order_num  AND prod_id = 'RGAN01';
+ +

创建高级联结

本章讲解另外一些联结（包括它们的含义和使用方法），介绍如何使用表 别名，如何对被联结的表使用聚集函数。

+

使用表别名

之前介绍了如何使用别名引用被检索的表列。例如

+
1
SELECT CONCAT(sno,sname) as noAndName from students;
+ +

SQL 除了可以对列名和计算字段使用别名，还允许给表名起别名。这样 做有两个主要理由：

+
    +
  • 缩短 SQL 语句；
    • +
  • 允许在一条 SELECT 语句中多次使用相同的表。
    • +
+

请看下面的 SELECT 语句。它与前一课例子中所用的语句基本相同，但 改成了使用别名：

+
1
SELECT cust_name, cust_contact FROM Customers AS C, Orders AS O, OrderItems AS OI WHERE C.cust_id = O.cust_id  AND OI.order_num = O.order_num  AND prod_id = 'RGAN01';
+ +

可以看到，FROM 子句中的三个表全都有别名。Customers AS C 使用 C 作为 Customers 的别名，如此等等。这样，就可以使用省略的 C 而不用 全名 Customers。在这个例子中，表别名只用于 WHERE 子句。其实它不 仅能用于 WHERE 子句，还可以用于 SELECT 的列表、ORDER BY 子句以及 其他语句部分。

+

使用不同类型的联结

迄今为止，我们使用的只是内联结或等值联结的简单联结。现在来看三种 其他联结：自联结（self-join）、自然联结（natural join）和外联结（outer join）

+

自联结

如前所述，使用表别名的一个主要原因是能在一条 SELECT 语句中不止一次引用相同的表。下面举两个例子。

+
1
2
-- 自联结
SELECT * FROM students WHERE sname IN (SELECT sname FROM students WHERE ssex = "男");
+ +

image-20211112202305202

+
1
SELECT * FROM students WHERE sname = (SELECT sname FROM students WHERE birthday = "1998-09-01 00:00:00");
+ +

image-20211112202414314

+

::: tip 提示：用自联结而不用子查询

+

自联结通常作为外部语句，用来替代从相同表中检索数据的使用子查 询语句。虽然终的结果是相同的，但许多 DBMS 处理联结远比处理 子查询快得多。应该试一下两种方法，以确定哪一种的性能更好。

+

:::

+

自然联结

无论何时对表进行联结，应该至少有一列不止出现在一个表中（被联结的列）。标准的联结（前一课中介绍的内联结）返回所有数据，相同的列甚至多次出现。自然联结排除多次出现，使每一列只返回一次。

+

怎样完成这项工作呢？答案是，系统不完成这项工作，由你自己完成它。 自然联结要求你只能选择那些唯一的列，一般通过对一个表使用通配符 （SELECT *），而对其他表的列使用明确的子集来完成。

+

事实上，我们迄今为止建立的每个内联结都是自然联结，很可能永远都 不会用到不是自然联结的内联结。

+

外联结 OUTER JOIN

许多联结将一个表中的行与另一个表中的行相关联，但有时候需要包含没有关联行的那些行。

+
1
2
3
4
-- 内联结
SELECT DISTINCT sname FROM students INNER JOIN score ON students.sno = score.sno ORDER BY sname;
-- 外联结
SELECT DISTINCT sname FROM students LEFT OUTER JOIN score ON students.sno = score.sno ORDER BY sname;
+ +

这条 SELECT 语句使用了关键字 OUTER JOIN 来指定联结类型。但是，与内联结关联两个表中的行不同的是，外联结还包括没有关联行的行。在使用 OUTER JOIN 语法时，必须使用 RIGHT 或 LEFT 关键字指定包括其所有行的表 （RIGHT 指出的是 OUTER JOIN 右边的表，而 LEFT 指出的是 OUTER JOIN 左边的表）。

+

上面的例子使用 LEFT OUTER JOIN 从 FROM 子句左边的表 （students 表）中选择所有行。

+

为了从右边的表中选择所有行，需要使 用 RIGHT OUTER JOIN

+
1
2
-- 外联结 右
SELECT DISTINCT sname FROM students RIGHT OUTER JOIN score ON students.sno = score.sno ORDER BY sname;
+ +

组合查询 UNION

如何利用 UNION 操作符将多条 SELECT 语句组合成一个结 果集。

+

组合查询

多数 SQL 查询只包含从一个或多个表中返回数据的单条 SELECT 语句。 但是，SQL 也允许执行多个查询（多条 SELECT 语句），并将结果作为一 个查询结果集返回。这些组合查询通常称为并（union）或复合查询 （compound query）

+

主要有两种情况需要使用组合查询：

+
    +

  • 在一个查询中从不同的表返回结构数据；

    +
    • +

  • 对一个表执行多个查询，按一个查询返回数据

    +
    • +
+

创建组合查询

可用 UNION 操作符来组合数条 SQL 查询。利用 UNION，可给出多条 SELECT 语句，将它们的结果组合成一个结果集。

+

比如输出 匡明 的总分

+
1
2
-- 创建组合查询
SELECT sname,SUM(score.degree) AS 总分 FROM students INNER JOIN score ON students.sno = score.sno AND students.sname = "匡明" ORDER BY sname;
+ +

输出 王芳的总分

+
1
SELECT sname,SUM(score.degree) AS 总分 FROM students INNER JOIN score ON students.sno = score.sno AND students.sname = "王芳" ORDER BY sname;
+ +

接下来组合这两条语句

+
1
2
3
SELECT sname,SUM(score.degree) AS 总分 FROM students INNER JOIN score ON students.sno = score.sno AND students.sname = "匡明"
UNION
SELECT sname,SUM(score.degree) AS 总分 FROM students INNER JOIN score ON students.sno = score.sno AND students.sname = "王芳" ORDER BY sname
+ +

image-20211117205630468

+

注意 order by 子句需要在最后的位置，所以去掉了第一段代码的 order by 子句

+

使用 UNION 可能比使用 WHERE 子句更为复杂。但对于较复杂的过滤条件，或者从多个表（而不是一个表）中检索数据的 情形，使用 UNION 可能会使处理更简单。

+

UNION 规则

    +
  • UNION 必须由两条或两条以上的 SELECT 语句组成，语句之间用关键 字 UNION 分隔（因此，如果组合四条 SELECT 语句，将要使用三个 UNION 关键字）。
    • +
  • UNION 中的每个查询必须包含相同的列、表达式或聚集函数（不过， 各个列不需要以相同的次序列出）。
    • +
  • 列数据类型必须兼容：类型不必完全相同，但必须是 DBMS 可以隐含 转换的类型（例如，不同的数值类型或不同的日期类型）。
    • +
+

包含或取消重复的行

UNION 默认会去掉重复的行，如果想显示重复的行可以使用

+
1
UNION ALL
+ +

插入数据 INSERT

介绍如何利用 SQL 的 INSERT 语句将数据插入表中。

+

数据插入

INSERT 用来将行插入（或添加）到数据库表。插入有几种 方式：

+
    +
  • 插入完整的行；
    • +
  • 插入行的一部分；
    • +
  • 插入某些查询的结果。
    • +
+

插入完整的行

1
2
-- 插入完整行
INSERT INTO students VALUES(110,"张三","男",NOW(),95033,100);
+ +

这段代码将一个新学生插入到 students 表中。。存储到表中每一列的数 据在 VALUES 子句中给出，必须给每一列提供一个值。如果某列没有值则应该使用 NULL 。

+

上面的 SQL 语 句高度依赖于表中列的定义次序，还依赖于其容易获得的次序信息。即 使可以得到这种次序信息，也不能保证各列在下一次表结构变动后保持完全相同的次序。因此，编写依赖于特定列次序的 SQL 语句是很不安全 的，这样做迟早会出问题。

+

更安全清晰的方法如下

+
1
INSERT INTO students(sno,sname,ssex,birthday,class,score) VALUES(110,"张三","男",NOW(),95033,100);
+ +

这个例子与前一个 INSERT 语句的工作完全相同，但在表名后的括号里 明确给出了列名。在插入行时，DBMS 将用 VALUES 列表中的相应值填 入列表中的对应项。

+

参考资料

SQL 必知必会第四版

+

SQL 基础教程第二版

+

Mysql 官方文档

+

SQL 教程 - 廖雪峰的官方网站

+

练习数据

练习数据 subways 下载

+

148

+

单词

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
select选择,挑选
单词意义
from从…起,选择哪个表
distinct不同的
limit限制
offset偏离
order顺序
between在…中间
having有…拥有;和 group by 配合使用
group组
subquery子查询
INNER内部的
+
头像头像
WaterBoat
正因你我生于繁华，弥足之花方显珍贵
原创SQL 基础
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
sql2
喜欢这篇文章的人也看了
avatar
正因你我生于繁华，弥足之花方显珍贵

WaterBoat

正因你我生于繁华，弥足之花方显珍贵
文章目录
  1. 1. 了解 Sql
    1. 1.1. 使用的工具
    2. 1.2. 数据库
    3. 1.3. 表
    4. 1.4. 列和数据类型
    5. 1.5. 行
    6. 1.6. 主键(primary key)
    7. 1.7. 什么是 SQL
  2. 2. 检索数据(SELECT)
    1. 2.1. SELECT 语句
    2. 2.2. 检索单列
    3. 2.3. 检索多列
    4. 2.4. 检索所有列
    5. 2.5. 检索不重复的值
    6. 2.6. 限制结果
    7. 2.7. 注释
  3. 3. 排序检索数据(ORDER BY )
    1. 3.1. 按多个列排序
    2. 3.2. 按列位置排序
    3. 3.3. 指定排序方向 （升序、降序）
  4. 4. 过滤数据(WHERE)
    1. 4.1. 使用 WHERE 子句
    2. 4.2. WHERE 子句操作符
      1. 4.2.1. 算术运算符
      2. 4.2.2. 比较运算符
      3. 4.2.3. 逻辑运算符
    3. 4.3. 范围值检查
    4. 4.4. 空值检查
  5. 5. 高级数据过滤
    1. 5.1. 组合 WHERE 子句
      1. 5.1.1. AND 操作符
      2. 5.1.2. OR 操作符
    2. 5.2. IN 操作符
    3. 5.3. NOT 操作符
  6. 6. 用通配符进行过滤
    1. 6.1. LIKE 操作符进行模糊查询
    2. 6.2. 百分号（%）通配符
    3. 6.3. 下划线（_）通配符
    4. 6.4. 使用通配符的技巧
  7. 7. 计算字段
    1. 7.1. 拼接字段
    2. 7.2. 使用别名
    3. 7.3. 执行算术计算
  8. 8. 使用函数处理数据
    1. 8.1. 函数
    2. 8.2. 使用函数
    3. 8.3. MySQL 常用函数
  9. 9. 汇总数据
    1. 9.1. 聚集函数
  10. 10. 分组数据 GROUP
    1. 10.1. 数据分组
    2. 10.2. 创建分组
    3. 10.3. 过滤分组
    4. 10.4. 分组和排序
    5. 10.5. SELECT 子句顺序
  11. 11. 使用子查询
    1. 11.1. 利用子查询进行过滤
  12. 12. 联结表
    1. 12.1. 联结
    2. 12.2. 关系表
    3. 12.3. 为什么使用联结
    4. 12.4. 创建联结
    5. 12.5. WHERE 子句的重要性
    6. 12.6. 内联结 INNER JOIN
    7. 12.7. 联结多个表
  13. 13. 创建高级联结
    1. 13.1. 使用表别名
    2. 13.2. 使用不同类型的联结
      1. 13.2.1. 自联结
      2. 13.2.2. 自然联结
      3. 13.2.3. 外联结 OUTER JOIN
  14. 14. 组合查询 UNION
    1. 14.1. 组合查询
    2. 14.2. 创建组合查询
    3. 14.3. UNION 规则
    4. 14.4. 包含或取消重复的行
  15. 15. 插入数据 INSERT
    1. 15.1. 数据插入
    2. 15.2. 插入完整的行
  16. 16. 参考资料
  17. 17. 练习数据
  18. 18. 单词
最近发布
Solidity 龟速入门教程
Solidity 龟速入门教程
Cypress 使用指南
Cypress 使用指南
npm 别名---让小明变成小红
npm 别名---让小明变成小红
发布-订阅模式
发布-订阅模式
Vue Cli 配置
Vue Cli 配置
引用到评论
随便逛逛博客分类文章标签
复制地址关闭热评深色模式轉為繁體
\ No newline at end of file diff --git "a/2021/05/01/\345\220\216\347\253\257/03-MySQL\350\270\251\345\235\221/index.html" "b/2021/05/01/\345\220\216\347\253\257/03-MySQL\350\270\251\345\235\221/index.html" new file mode 100644 index 0000000000..a8db1d0095 --- /dev/null +++ "b/2021/05/01/\345\220\216\347\253\257/03-MySQL\350\270\251\345\235\221/index.html" @@ -0,0 +1,356 @@ +MySQL踩坑记录 | WaterBoat的博客
加载头像
原创

MySQL踩坑记录

发表于更新于
长沙

MySQL踩坑记录

GROUP_CONCAT 返回长度限制

1
2
3
# 默认是 1024 字符长度增长长度
SET SESSION group_concat_max_len = 10240;
SET GLOBAL group_concat_max_len = 10240;
+ +

GROUP_CONCAT 对于是 NULL 的数据是不会返回的所以记得 IFNOLL

+
1
CONCAT('"shengping":"', IFNULL(wp.shengping,''), '"}')),
+ +

33 个概念

+
头像头像
WaterBoat
正因你我生于繁华，弥足之花方显珍贵
原创MySQL踩坑记录
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
sql2
喜欢这篇文章的人也看了
avatar
正因你我生于繁华，弥足之花方显珍贵

WaterBoat

正因你我生于繁华，弥足之花方显珍贵
最近发布
Solidity 龟速入门教程
Solidity 龟速入门教程
Cypress 使用指南
Cypress 使用指南
npm 别名---让小明变成小红
npm 别名---让小明变成小红
发布-订阅模式
发布-订阅模式
Vue Cli 配置
Vue Cli 配置
引用到评论
随便逛逛博客分类文章标签
复制地址关闭热评深色模式轉為繁體
\ No newline at end of file diff --git "a/2021/05/02/\345\211\215\347\253\257/JavaScript/03-\345\256\236\347\216\260\351\230\262\346\212\226\345\222\214\350\212\202\346\265\201/index.html" "b/2021/05/02/\345\211\215\347\253\257/JavaScript/03-\345\256\236\347\216\260\351\230\262\346\212\226\345\222\214\350\212\202\346\265\201/index.html" new file mode 100644 index 0000000000..63909a5786 --- /dev/null +++ "b/2021/05/02/\345\211\215\347\253\257/JavaScript/03-\345\256\236\347\216\260\351\230\262\346\212\226\345\222\214\350\212\202\346\265\201/index.html" @@ -0,0 +1,355 @@ +实现防抖和节流 | WaterBoat的博客
加载头像
原创

实现防抖和节流

发表于更新于
长沙

实现防抖和节流

防抖

所谓防抖，就是指触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function debounce(fn, daytime) {
  let timer;
  clearInterval(timer);
  timer = setTimeout(() => {
    fn();
  }, daytime);
}

function fn() {
  console.log("fn");
}

let result = debounce(fn, 10);
console.log(result);
+ +

节流

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function throttle(fn, dalay) {
  let start = 0;
  return () => {
    let now = new Date().getTime();
    if (now - start > dalay) {
      fn();
      start = now;
    }
  };
}

function fn() {
  console.log(1);
}
document.addEventListener("scroll", throttle(fn, 2000));
+
头像头像
WaterBoat
正因你我生于繁华，弥足之花方显珍贵
原创实现防抖和节流
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
JavaScript6
喜欢这篇文章的人也看了
avatar
正因你我生于繁华，弥足之花方显珍贵

WaterBoat

正因你我生于繁华，弥足之花方显珍贵
文章目录
  1. 1. 防抖
  2. 2. 节流
最近发布
Solidity 龟速入门教程
Solidity 龟速入门教程
Cypress 使用指南
Cypress 使用指南
npm 别名---让小明变成小红
npm 别名---让小明变成小红
发布-订阅模式
发布-订阅模式
Vue Cli 配置
Vue Cli 配置
引用到评论
随便逛逛博客分类文章标签
复制地址关闭热评深色模式轉為繁體
\ No newline at end of file diff --git "a/2021/05/07/\345\211\215\347\253\257/React/01-React\347\254\224\350\256\260/index.html" "b/2021/05/07/\345\211\215\347\253\257/React/01-React\347\254\224\350\256\260/index.html" new file mode 100644 index 0000000000..2b35c946f7 --- /dev/null +++ "b/2021/05/07/\345\211\215\347\253\257/React/01-React\347\254\224\350\256\260/index.html" @@ -0,0 +1,780 @@ +React 笔记 | WaterBoat的博客
加载头像
原创

React 笔记

发表于更新于
长沙

React 笔记

[[toc]]

+

React 介绍

用于构建用户界面的 JavaScript 库

+

声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。

+

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

+

组件化

创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。

+

组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

+

一次学习，随处编写

无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。

+

React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

+

React 初体验

使用 React 的 2 种方式

1.自行配置
1.1 https://zh-hans.reactjs.org/docs/add-react-to-a-website.html

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="root"></div>
    <!-- 注意引用顺序 -->
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>

    <!-- type 一定要写成 babel 让浏览器知道需要 babel 转义-->
    <script type="text/babel">
      let VDOM = <h1>hello,React</h1>;
      ReactDOM.render(VDOM, document.getElementById("root"));
    </script>
  </body>
</html>
+ +

2.通过脚手架自动配置
2.1 https://zh-hans.reactjs.org/docs/create-a-new-react-app.html

+

虚拟 DOM 和真实 DOM

1.虚拟 DOM 是相对于浏览器所渲染出来的真实 DOM 的 2.虚拟 DOM 就是使用 JS 对象来表示页面上的真实 DOM

+

如何创建虚拟 DOM

createElement 通过 React.createElement()方法
该方法接收三个参数:
第一个参数: 需要创建的元素类型或组件
第二个参数: 被创建出来的元素拥有的属性
第三个参数: 被创建出来的元素拥有的内容(可以是多个)
https://zh-hans.reactjs.org/docs/react-api.html#

+

如何通过虚拟 DOM 渲染真实 DOM 到浏览器

通过 ReactDOM.render()方法
该方法接收三个参数
第一个参数: 被渲染的虚拟 DOM
第二个参数: 要渲染到哪个元素中
第三个参数: 渲染或更新完成后的回调函数
https://zh-hans.reactjs.org/docs/react-dom.html#render

+

render 方法的注意点

多次渲染，后渲染会覆盖先渲染的
render 方法一次只能渲染一个元素/组件

+

createElement 方法注意点

可以添加 3 个以上参数，后续参数都会作为当前创建元素内容处理

+

案例

{14}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="root"></div>
    <!-- 注意引用顺序 -->
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>

    <script type="text/javascript">
      // 创建虚拟 DOM
      let VDOM = React.createElement("h1", { id: "title" }, "hello,React");
      // 渲染虚拟 DOM
      ReactDOM.render(VDOM, document.getElementById("root"));
    </script>
  </body>
</html>
+ +

image-20210507154406002

+

React 中的 JSX 语法

为什么需要 JSX

如果结构比较简单还好，但是如果结构比较复杂，就比较难以下手
所以大牛们就发明了 JSX, 专门用来编写 React 中的页面结构

+

举一个简单的例子

+

需求 :　使用　 React 虚拟 DOM 创建一个 div 里面包含一个 span 里面包含一个 a 标签,a 标签里面写上 hello,React

+

如果用 js 的写法

{14,21-29}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="root"></div>
    <!-- 注意引用顺序 -->
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>

    <script type="text/javascript">
      // 创建虚拟 DOM
      // let VDOM = React.createElement(
      //   "h1",
      //   { id: "title" },
      //   "<span><a>hello,React</a></span>" // 我们发现直接写span是无效的
      // );
      let VDOM = React.createElement(
        "h1",
        { id: "title" },
        React.createElement(
          "span",
          null,
          React.createElement("a", null, "hello,React"), // 如果还需要写更多的子标签那么就会启动无限套娃技术相当不友好
        ),
      );
      // 渲染虚拟 DOM
      ReactDOM.render(VDOM, document.getElementById("root"));
    </script>
  </body>
</html>
+ +

使用 JSX 写法

{14,16-22}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="root"></div>
    <!-- 注意引用顺序 -->
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
    <script type="text/babel">
      // 创建虚拟 DOM
      let VDOM = // 这样就避免了难看的无限套娃,方便理解
        (
          <h1>
            <span>
              <a>hello,React</a>
            </span>
          </h1>
        );

      // 渲染虚拟 DOM
      ReactDOM.render(VDOM, document.getElementById("root"));
    </script>
  </body>
</html>
+ +

JSX 是什么？

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展

+

为什么要使用 JSX

使用 JSX 使得我们在 React 中编写页面结构更为简单、灵活
JSX 是类型安全的， 在编译过程中就能发现错误
JSX 执行更快， 因为它在编译为 JavaScript 代码后进行优化
防止 XSS 注入攻击

+

https://zh-hans.reactjs.org/docs/introducing-jsx.html

+

JSX 的本质

浏览器只认识 JS 不认识 JSX，所以我们编写的 JSX 代码是无法在浏览器中执行的
为了解决这个问题，我们需要使用 babel 将 JSX 转换成 JS，也就是转换成 React.createElement()

+

https://zh-hans.reactjs.org/docs/react-without-jsx.html
https://babeljs.io/repl/

+

如何将 JSX 转换成 JS?

导入 babel.js
在 script 标签上添加 type=”text/babel”

+

JSX 中使用表达式

在 JSX 中只要看到 { } 就会当做 JS 解析(执行里面的 JS 代码)
所以无论是绑定属性,还是绑定类名,还是绑定样式, 只需要将字符串改为{}
然后再通过 JS 动态获取, 动态绑定即可
注意：{} 中，不能出现语句！！！ if() {} / for() {} / switch…

+

以下嵌入的内容不会被显示出来 [] true false null undefined
如果想显示上面的内容，那么就必须转换成字符串，但是对于空数组而言，即使转换成字符串，也不能显示

+
1
2
3
4
5
6
7
8
// const name = 'jack'
// const h1 = <div>{name}</div>
// const h1 = <div>{19}</div>
// const h1 = <div>{true + ''}</div>
// const h1 = <div>{1 + 3 + 7 + 9}</div>
// const h1 = <div>{['red', 'yellogreen', 'pink']}</div>
// const h1 = <div>{['red', 'yellogreen', 'pink'].join('')}</div>
// const h1 = <div>{Math.random() > 0.5 ? '大于' : '小于等于'}</div>
+ +

JSX 使用条件渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="root"></div>
    <!-- 注意引用顺序 -->
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
    <script type="text/babel">
      function VDOM() {
        flag = false;
        if (flag) {
          return <h1>我是flag=true</h1>;
        } else {
          return <h1>我是flag=false</h1>;
        }
      }

      // 渲染虚拟 DOM
      ReactDOM.render(<VDOM />, document.getElementById("root"));
    </script>
  </body>
</html>
+ +

JSX 中的列表渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="root"></div>
    <!-- 注意引用顺序 -->
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
    <script type="text/babel">
      function VDOM() {
        const numbers = [1, 2, 3, 4, 5];
        const listItems = numbers.map((number) => (
          <li key={number}>{number}</li>
        ));
        return listItems;
      }

      // 渲染虚拟 DOM
      ReactDOM.render(<VDOM />, document.getElementById("root"));
    </script>
  </body>
</html>
+ +

key

key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识

+

一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串

+

JSX 中的绑定属性

1.JSX 绑定内容
在 JSX 中只要看到{} 就会当作 js 解析(执行里面的 js 代码)
所以无论是绑定属性，还是绑定类名，还是绑定样式，只要将字符串改为{}
然后再通过 JS 动态获取，动态绑定即可

+

2.绑定普通属性

+
1
2
<p title="我是标题">我是段落</p>
<p title="{message}">我是段落</p>
+ +

3.绑定类名(className)
由于 JSX 本质是转换成 JS 代码, 而在 JS 中 class 有特殊含义, 所以不能使用
同理可证, 但凡是属性名称是 JS 关键字的都不能直接使用

+

4.绑定样式(style)
由于样式是键值对形式的, 所以在 JSX 中如果想要动态绑定样式
必须将样式放到一个对象中, 并且所有以-连接的样式名称都要转换成驼峰命名

+
1
<p style={{ color: "red", fontSize: "50px" }}>绑定样式</p>
+ +

JSX 语法总结

jsx 语法规则

1.定义虚拟 DOM 时，不要写引号。

+

2.标签中混入 JS 表达式时要用{}。

+

3.样式的类名指定不要用 class，要用 className。

+

4.内联样式，要用 style={ { key:value } }的形式去写。

+

5.只有一个根标签

+

6.标签必须闭合

+

7.标签首字母

+

(1).若小写字母开头，则将该标签转为 html 中同名元素，若 html 中无该标签对应的同名元素，则报错。

+

(2).若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错。

+

区分：【js 语句(代码)】与【js 表达式】

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

+

下面这些都是表达式：

+

(1). a

+

(2). a+b

+

(3). demo(1)

+

(4). arr.map()

+

(5). function test () {}

+

2.语句(代码)：

+

下面这些都是语句(代码)：

+

(1).if(){}

+

(2).for(){}

+

(3).switch(){case:xxxx}

+

受控组件

在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。

+

对于受控组件来说，输入的值始终由 React 的 state 驱动。

+

非受控组件

说明:对于某一个表单元素,借助于 ref，使用原生 DOM 方式来获取表单元素值的这样的元素叫做非受控组件
ref 的作用:获取 DOM 或组件

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React from "react";

class Refcom extends React.Component {
  constructor() {
    super();
    // 通过 React.createRef 创建 ref 对象
    this.txt = React.createRef();
  }

  fn = () => {
    // 输出 ref 对象
    console.log(this.txt);
  };
  render() {
    return (
      <React.Fragment>
        <div style={{ background: "pink", marginBottom: "20px" }}>
          <h1>ref 获取 node</h1>
          <input
            type="text"
            /* 绑定 ref  */
            ref={this.txt}
            /* 点击输出 ref 对象 */
            onClick={this.fn}
            placeholder="点击我"
          />
        </div>
      </React.Fragment>
    );
  }
}

export default Refcom;
+ +

image-20210510201119630

+

获取 Dom 元素

React 中通过 ref 获取 Dom 元素

+

何时使用 Refs

下面是几个适合使用 refs 的情况：

+
    +
  • 管理焦点，文本选择或媒体播放。
    • +
  • 触发强制动画。
    • +
  • 集成第三方 DOM 库。
    • +
+

React 会在组件挂载时给 current 属性传入 DOM 元素，并在组件卸载时传入 null 值。ref 会在 componentDidMount 或 componentDidUpdate 生命周期钩子触发前更新。

+

一个简单的使用案例

+
1
2
3
4
5
6
7
8
9
10
11
12
function App() {
  let divInput = useRef();
  // class 组件使用 createRef() 创建
  const getDivRef = () => {
    console.log(divInput);
  };
  return (
    <div ref={divInput}>
      <button onClick={getDivRef}>点击获取 ref</button>
    </div>
  );
}
+ +

Refs 转发

为什么要转发?我们先来看一个需求.

+
    +
  1. 定义一个组件 Father,一个组件 Son.
    2. +
  2. 在 Son 组件里面定义一个 input 和 button,点击 button 会出现 input 里面会出现 Hello (通过操作 Dom 的方式).
    3. +
  3. 在 Father 组件里面定义一个 button 操作 Son 里面的 input 出现 Hello.
    4. +
+

步骤一 : 实现子组件点击安装 input 出现 Hello

+
{20,24}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import React, { forwardRef, useRef } from "react";
const ForwardRef = () => {
  return (
    <div>
      <Father></Father>
    </div>
  );
};
const Father = () => {
  return (
    <div>
      <button>我是 Father </button>
      <Son></Son>
    </div>
  );
};
const Son = () => {
  let inputRef = useRef();
  const changeInputValue = () => {
    inputRef.current.value = "Hello";
  };
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={changeInputValue}>我是 Son </button>
    </div>
  );
};

export default ForwardRef;
+ +

步骤二 : 实现父组件点击安装 input 出现 Hello

+
{10,15}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import React, { forwardRef, useRef } from "react";
const ForwardRef = () => {
  return (
    <div>
      <Father></Father>
    </div>
  );
};
const Father = () => {
  let inputRef = useRef();
  return (
    <div>
      <button>我是 Father </button>
      {/* 报错:Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? */}
      <Son ref={inputRef}></Son>
    </div>
  );
};
const Son = () => {
  let inputRef = useRef();
  const changeInputValue = () => {
    inputRef.current.value = "Hello";
  };
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={changeInputValue}>我是 Son </button>
    </div>
  );
};

export default ForwardRef;
+ +

我们可能会想当然的直接给 Son 组件添加 ref 但是 React 会报错,此时就需要使用 Refs 转发,使用的 APi 为 React.forwardRef

+
{10-13,23-25}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import React, { forwardRef, useRef } from "react";
const ForwardRef = () => {
  return (
    <div>
      <Father></Father>
    </div>
  );
};
const Father = () => {
  let inputRef = useRef();
  const changeInputValue = () => {
    inputRef.current.value = "Hello";
  };
  return (
    <div>
      <button onClick={changeInputValue}>我是 Father </button>
      <Son ref={inputRef}></Son>
    </div>
  );
};
const Son = forwardRef((props, ref) => {
  // let inputRef = useRef();
  const changeInputValue = () => {
    ref.current.value = "Hello";
  };
  return (
    <div>
      <input type="text" ref={ref} />
      <button onClick={changeInputValue}>我是 Son </button>
    </div>
  );
});

export default ForwardRef;
+ +

组件

    +
  • 可以将 UI 切分成一些独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件
    • +
  • 组件从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素
    • +
+

组件的渲染

    +
  • React 元素不但可以是 DOM 标签，还可以是用户自定义的组件
    • +
  • 当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为 props
    • +
  • 组件名称必须以大写字母开头
    • +
  • 组件必须在使用的时候定义或引用它
    • +
  • 组件的返回值只能有一个根元素
    • +
+

定义函数组件

1
2
3
4
5
import React from "react";

export default function Function() {
  return <div>这是函数组件</div>;
}
+ +

定义类组件

1
2
3
4
5
6
7
import React, { Component } from "react";

export default class Class extends Component {
  render() {
    return <div>这是类组件</div>;
  }
}
+ +

状态 state

    +
  • 组件的数据来源有两个地方，分别是属性对象和状态对象
    • +
  • 属性是父组件传递过来的(默认属性，属性校验)
    • +
  • 状态是自己内部的,改变状态唯一的方式就是setState
    • +
  • 属性和状态的变化都会影响视图更新
    • +
+
{13}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, { Component } from "react";

export default class State extends Component {
  state = {
    msg: "你好",
  };
  render() {
    return (
      <div>
        <div>{this.state.msg}</div>
        <button
          onClick={() =>
            // 状态是自己内部的,改变状态唯一的方式就是`setState`
            this.setState({
              msg: "我被更新了",
            })
          }
        >
          点我更新数据
        </button>
      </div>
    );
  }
}
+ +

State 的更新可能是异步的

    +
  • 出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用
    • +
  • 因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态
    • +
  • 可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import React, { Component } from "react";
// 实现累加点击按钮数字加2
export default class AsyncState extends Component {
  state = {
    conut: 0,
  };
  update = () => {
    this.setState({
      conut: this.state.conut + 1,
    });
    this.setState({
      conut: this.state.conut + 1,
    });
    console.log("AsyncState.jsx   conut 的值是--", this.state.conut);
  };
  update2 = () => {
    this.setState((state) => {
      return {
        conut: state.conut + 1,
      };
    });
    this.setState((state) => {
      return {
        conut: state.conut + 1,
      };
    });
    console.log("AsyncState.jsx   conut 的值是--", this.state.conut);
  };
  render() {
    return (
      <div>
        <h1>{this.state.conut}</h1>
        <span>请看控制器</span>
        <button onClick={this.update}>点我累加</button>
        <button onClick={this.update2}>点我累加2</button>
      </div>
    );
  }
}
+ +

事件处理

    +
  • React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
    • +
  • 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串
    • +
  • 你不能通过返回 false 的方式阻止默认行为。你必须显式的使用preventDefault
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React, { Component } from "react";

export default class HandlingEvents extends Component {
  state = {
    msg: "1",
  };
  test = (e) => {
    e.preventDefault();
    console.log(e);
  };
  render() {
    return (
      <div>
        <h1>事件处理</h1>
        <a href="//www.baidu.com" onClick={(e) => this.test(e)}>
          阻止默认行为
        </a>
        <button onClick={(e) => this.test(e)}>点击</button>
      </div>
    );
  }
}
+ +

this

你必须谨慎对待 JSX 回调函数中的 this,可以使用:

+
    +
  • 公共属性(箭头函数)
    • +
  • 匿名函数
    • +
  • bind 进行绑定
    • +
+
{18-20}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, { Component } from "react";

export default class HandlingEvents extends Component {
  state = {
    msg: "1",
  };
  test = (e) => {
    e.preventDefault();
    console.log(e);
  };
  render() {
    return (
      <div>
        <h1>事件处理</h1>
        <a href="//www.baidu.com" onClick={(e) => this.test(e)}>
          阻止默认行为
        </a>
        <button onClick={(e) => this.test(e)}>箭头函数点击</button>
        <button onClick={this.test}>普通调用函数点击</button>
        <button onClick={this.test.bind(this)}>bind点击</button>
      </div>
    );
  }
+ +

组件通信

父子通信-class 组件

    +
  1. 在 class 中的 state 定义变量
    2. +
  2. 在子组件的标签上面写入 key=value 的形式
    3. +
  3. 子组件中通过 this.props.key 获取值
    4. +
+

父子通信-function 组件

    +
  1. 在 class 中的 state 定义变量
    2. +
  2. 在子组件的标签上面写入 key=value 的形式
    3. +
  3. 在函数组件的形参位置写上 props
    4. +
  4. 通过 props.key 获取父组件传过来的值
    5. +
+

父子传参案例

    +
  • Father
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from "react";
import "./index.css";
import { Soncom, Soncom2 } from "../Soncom/index";
class Fathercom extends React.Component {
  state = {
    name: "刘德华",
  };
  render() {
    return (
      <div className="father">
        <h1>父子传参</h1>
        {/* class 子组件 */}
        <Soncom cname={this.state.name}></Soncom>
        {/* function 子组件 */}
        <Soncom2 cname="张学友"></Soncom2>
      </div>
    );
  }
}

export default Fathercom;
+ +
    +
  • Son
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import React from "react";
import "./index.css";
export class Soncom extends React.Component {
  // 设置 class 子组件的参数的默认值
  static defaultProps = {
    age: 90,
  };
  render() {
    return (
      <div className="son">
        <h1>子组件</h1>
        <div>class 子组件传参</div>
        <span>
          传递的参数-----{this.props.cname}年龄{this.props.age}
        </span>
      </div>
    );
  }
}

export const Soncom2 = (props) => {
  const fn = () => {
    console.dir(Soncom2);
  };

  return (
    <div className="son2">
      <h1>子组件</h1>
      <div>function 子组件传参</div>
      <span>
        传递的参数----{props.cname}年龄{props.age}
      </span>
      <button onClick={fn}>测试</button>
    </div>
  );
};
// 设置 function 子组件的参数的默认值
Soncom2.defaultProps = {
  age: 10,
};
// export default Soncom
+ +

image-20210510202129212

+

子父传参

    +
  1. 父组件里面定义一个函数 fn
    2. +
  2. 在子组件的标签上面写入 key=fn 的形式
    3. +
  3. 子组件里面定义一个函数 fns
    4. +
  4. 子组件调用 fns 方法,方法体内通过 this.props.key(传入的参数) 调用父组件的方法,完成传参
    5. +
+
    +
  • Father
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React from "react";
import "./index.css";
import { Soncom } from "../Soncom/index";
class Fathercom extends React.Component {
  state = {
    name: "刘德华",
  };

  Fatherfn(age) {
    console.log(age);
  }

  render() {
    return (
      <div className="father">
        {/* class 子组件 */}
        <Soncom cname={this.state.name} Fatherfn={this.Fatherfn}></Soncom>
      </div>
    );
  }
}

export default Fathercom;
+ +
    +
  • son
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from "react";
import "./index.css";
export class Soncom extends React.Component {
  // 设置 class 子组件的参数的默认值
  static defaultProps = {
    age: 90,
  };
  Sonfn = () => {
    this.props.Fatherfn("son子里面的" + this.props.age);
  };
  render() {
    return (
      <div className="son">
        <h1>子组件</h1>
        <div>class 子组件传参</div>
        <span>
          传递的参数-----{this.props.cname}年龄{this.props.age}
        </span>
        <button onClick={this.Sonfn}>子父传参</button>
      </div>
    );
  }
}
// export default Soncom
+ +

组件的 props 的数据类型的限制

    +
  • 通过 propTypes
    • +
  • npm install prop-types
    • +
  • 函数组件类组件
    • +
+
1
2
3
4
5
class Person {
  static propTypes = {
    son: propTypes.string,
  };
}
+ +

Context(上下文)

    +
  • 在某些场景下，你想在整个组件树中传递数据，但却不想手动地在每一层传递属性。你可以直接在 React 中使用强大的contextAPI 解决上述问题
    • +
  • 在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props
    • +
+

contextapi

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React, { Component } from "react";

let ContextMsg = React.createContext("你好");
export default class Context extends Component {
  render() {
    return (
      <ContextMsg.Consumer>
        {(value) => (
          <div>
            <h1>{value}</h1>
            <Son msg={value}></Son>
          </div>
        )}
      </ContextMsg.Consumer>
    );
  }
}

function Son(props) {
  return (
    <div>
      <h1>子组件</h1>
      <span>{props.msg}</span>
    </div>
  );
}
+ +

组件的生命周期

生命周期演示网址)

+

image-20210517181121093

+

什么是生命周期

    +
  • 组件的生命周期:组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程
    • +
  • 意义:组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等
    • +
  • 生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数。
    • +
  • 钩子函数的作用:为开发人员在不同阶段操作组件提供了时机。
    • +
  • 只有 类组件 才有生命周期。
    • +
+

创建时(挂载阶段)

执行时机:组件创建时(页面加载时)
执行顺序: constructor() –> render() –> componentDidMount
函数的作用:
constructor()函数: 创建组件时最先执行 作用是: 1.初始化 state 2.为事件处理程序绑定 this
render()函数: 每次组件渲染都会触发 作用: 渲染 UI(注意: 不能调用 setState())
componentDidMount 组件挂载(完成 DOM 渲染)后， 作用: 1.发送网络请求 2.DOM 操作

+

更新时(更新阶段)

执行时机: 1.setState() 2.forceUpdate() 3.组件接收到新的 props
说明: 以上三者任意一种变化，组件就会重新渲染
执行顺序: render() –> componentDidUpdate()
函数的作用:
render： 每次组件渲染都会触发 作用:渲染 UI(与挂载阶段是同一 render)
componentDidUpdate: 组件更新(完成 DOM 渲染)后，作用: 1.发送网络请求 2.DOM 操作 注意: 如果要 setState()必须放在一个 if 条件中

+

卸载时(卸载阶段)

执行时机:组件从页面中消失
函数的作用: componentWillUnmount 当组件卸载(从页面中消失)时触发 作用:执行清理工作(比如:清理定时器等)

+

shouldComponentUpdate

作用 : 当指定的值发生变化的时候才更新值

+
    +
  • 当一个组件的 props 或 state 变更，React 会将最新返回的元素与之前渲染的元素进行对比，以此决定是否有必要更新真实的 DOM，当它们不相同时 React 会更新该 DOM
    • +
  • 如果渲染的组件非常多时可以通过覆盖生命周期方法 shouldComponentUpdate 来进行优化
    • +
  • shouldComponentUpdate 方法会在重新渲染前被触发。其默认实现是返回 true,如果组件不需要更新，可以在 shouldComponentUpdate 中返回 false 来跳过整个渲染过程。其包括该组件的 render 调用以及之后的操作
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import React, { Component } from "react";

export default class ShouldComponentUpdate extends Component {
  state = {
    count: 0,
  };
  add = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };
  // 返回 false 会阻止 组件更新
  shouldComponentUpdate(nextProps, nextState) {
    if (nextState.count < 2) {
      return false;
    } else {
      return true;
    }
  }
  componentDidUpdate() {
    console.log("ShouldComponentUpdate.jsx 组件更新了");
  }
  render() {
    return (
      <div>
        <h1>ShouldComponentUpdate</h1>
        <div>
          <span>{this.state.count}</span>
          <button onClick={this.add}>点击更新</button>
        </div>
      </div>
    );
  }
}
+ +

render-props 和高阶组件

React 组件复用概述

 思考:如果两个组件中的部分功能相似或相同，该如何处理?  处理方式:复用相似的功能(联想函数封装)
 复用什么?1. state 2. 操作 state 的方法 (组件状态逻辑 )  两种方式:1. render props 模式 2. 高阶组件(HOC)
 注意:这两种方式不是新的 API，而是利用 React 自身特点的编码技巧，演化而成的固定模式(写法)

+

render props 模式

思路:将要复用的 state 和操作 state 的方法封装到一个组件中
 问题 1:如何拿到该组件中复用的 state?
 在使用组件时，添加一个值为函数的 prop，通过 函数参数 来获取(需要组件内部实现)
 问题 2:如何渲染任意的 UI?
 使用该函数的返回值作为要渲染的 UI 内容(需要组件内部实现)

+

render props 模式

使用步骤 1.创建 Mouse 组件，在组件中提供复用的状态逻辑代码(1. 状态 2. 操作状态的方法) 2.将要复用的状态作为 props.render(state) 方法的参数，暴露到组件外部 3.使用 props.render() 的返回值作为要渲染的内容

+

APP.jsx

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, { Component } from "react";
import Mouse from "../Mouse";

export default class App extends Component {
  render() {
    return (
      <div>
        {/* 写法一 */}
        <Mouse
          wdnmd={(mouse) => (
            <div>
              {mouse.x}---{mouse.y}
            </div>
          )}
        ></Mouse>
        {/* 写法二 */}
        {/* <Mouse>
          {(mouse)=>(<div>{mouse.x}---{mouse.y}</div>)}
        </Mouse> */}
      </div>
    );
  }
}
+ +

Mouse.jsx

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import React from "react";

class Mouse extends React.Component {
  // 需求: 完成坐标显示

  state = {
    x: 0,
    y: 0,
  };

  componentDidMount() {
    window.addEventListener("mousemove", this.fn);
  }

  fn = (e) => {
    this.setState({
      x: e.clientX,
      y: e.clientY,
    });
  };

  render() {
    // 写法一
    return this.props.wdnmd(this.state);
    // 写法二
    // return this.props.children(this.state)
  }
}

export default Mouse;
+ +

演示 Mouse 组件的复用

Mouse 组件负责:封装复用的状态逻辑代码(1. 状态 2. 操作状态的方法)  状态:鼠标坐标(x, y)
 操作状态的方法:鼠标移动事件
 传入的 render prop 负责:使用复用的状态来渲染 UI 结构

+

children 代替 render 属性

 注意:并不是该模式叫 render props 就必须使用名为 render 的 prop，实际上可以使用任意名称的 prop  把 prop 是一个函数并且告诉组件要渲染什么内容的技术叫做:render props 模式
 推荐:使用 children 代替 render 属性

+

高阶组件

什么是高阶组件(higher order component)

    +
  • 高阶组件：实际上就是一个函数，这个函数能够接受一个参数组件，然后，返回一个增强后的组件
    • +
  • 参数组件：就是需要被包装的组件
    • +
  • 返回的组件：增强后的组件，这个组件中就是通过 props 来接收到复用的状态逻辑的
    • +
+

高阶组件的封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import React from "react";
const WidthMouse = (Params) => {
  class Mouse extends React.Component {
    state = {
      x: 0,
      y: 0,
    };

    componentDidMount() {
      window.addEventListener("mousemove", this.fn);
    }

    fn = (e) => {
      this.setState({
        x: e.clientX,
        y: e.clientY,
      });
    };

    render() {
      // return <Params x={this.state.x} y={this.state.y}></Params>
      return <Params {...this.state}></Params>;
    }
  }
  // Mouse.displayName=Params.name
  // console.dir(Mouse);
  return Mouse;
};

export default WidthMouse;

// 创建一个组件(函数组件)
const Position = (props) => {
  return (
    <div>
      <p>
        {props.x}--{props.y}
      </p>
    </div>
  );
};
/* 包装一下 */
let a = WidthMouse(Position);
+ +

给高阶组件添加 displayName

    +
  • displayName：用于设置 react-dev-tools （浏览器中的 react 插件） 中组件的展示名称
    • +
  • 注意：该属性仅仅用于设置展示名称，并不会对组件功能产生影响，所以，如果不想在 react-dev-tools 中进行区分，实际上，可以省略该设置。
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
const withMouse = (WrappedComponent) => {
  class Mouse extends React.Component {
    ...
  }

  // 给高阶组件设置名称，将来在 react-dev-tools 工具中，能够区分到底是哪一个高阶组件包装的组件
  function getDisplayName(WrappedComponent) {
    return WrappedComponent.displayName || WrappedComponent.name || 'Component'
  }
  Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`

  return Mouse
}
+ +

给高阶组件传递属性

    +
  • 推荐：在高阶组件中，将高阶组件接收到的 props 一起传递给被包装的组件；这样，才能在 被包装 组件中获取到传递的额外属性。
    • +
  • 目的：防止 props 丢失问题
    • +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
...
class Mouse extends React.Component {
    state = {
      x: 0,
      y: 0,
    };

    componentDidMount() {
      window.addEventListener("mousemove", this.fn);
    }

    fn = (e) => {
      this.setState({
        x: e.clientX,
        y: e.clientY,
      });
    };

    render() {
        // 多写上一句 ...this.props
      return <Params {...this.state} {...this.props}></Params>;
    }
  }
+ +

setState()的说明

更新数据

1.setState() 是异步更新数据的 2.注意:使用该语法时，后面的 setState() 不要依赖于前面的 setState() 3.可以多次调用 setState() ，只会触发一次重新渲染

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

class Father extends React.Component {
  state = {
    count: 0,
  };

  fn = () => {
    // 多次调用 setState 只会执行一次渲染
    this.setState({
      count: 1,
    });
    this.setState({
      count: 2,
    });
    this.setState({
      count: 3,
    });
  };
  render() {
    console.log("渲染");
    return (
      <div id="Father">
        <h1>Father</h1>
        <span>{this.state.count}</span>
        <button onClick={this.fn}>点击Father按钮 ++</button>
      </div>
    );
  }
}
+ +

推荐语法

1.推荐:使用 setState((state, props) => {}) 语法 2.参数 state:表示最新的 state 3.参数 props:表示最新的 props

+
{11-16}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

class Father extends React.Component {
  state = {
    count: 0,
  };

  fn = () => {
    this.setState((newstate, newprops) => {
      // newstate.count++
      return {
        count: newstate.count + 1,
      };
    });
  };
  render() {
    console.log("渲染", this.state.count);
    return (
      <div id="Father">
        <h1>Father</h1>
        <span>{this.state.count}</span>
        <button onClick={this.fn}>点击Father按钮 ++</button>
      </div>
    );
  }
}
+ +

第二个参数

1.场景:在状态更新(页面完成重新渲染)后立即执行某个操作 2.语法: setState(updater[, callback])

+
{16-19}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

class Father extends React.Component {
  state = {
    count: 0,
  };

  fn = () => {
    this.setState(
      (newstate, newprops) => {
        // newstate.count++
        return {
          count: newstate.count + 1,
        };
      },
      () => {
        console.log("setState 执行后立即执行");
      },
    );
    console.log("我比 setState 打印得还要快呢");
  };
  render() {
    console.log("渲染", this.state.count);
    return (
      <div id="Father">
        <h1>Father</h1>
        <span>{this.state.count}</span>
        <button onClick={this.fn}>点击Father按钮 ++</button>
      </div>
    );
  }
}
+ +

组件更新机制

 setState() 的两个作用: 1. 修改 state 2. 更新组件(UI)
 过程:父组件重新渲染时，也会重新渲染子组件。但只会渲染当前组件子树(当前组件及其所有子组件)

+

组件性能优化

减轻 state

 减轻 state:只存储跟组件渲染相关的数据(比如:count / 列表数据 / loading 等)
 注意:不用做渲染的数据不要放在 state 中，比如定时器 id 等
 对于这种需要在多个方法中用到的数据，应该放在 this 中

+
1
2
3
4
5
6
7
class Hello extends Component { componentDidMount() {
// timerId存储到this中，而不是state中 this.timerId = setInterval(() => {}, 2000)
}
componentWillUnmount() {
clearInterval(this.timerId) }
render() { ... } }

+ +

避免不必要的重新渲染

 组件更新机制:父组件更新会引起子组件也被更新，这种思路很清晰
 问题:子组件没有任何变化时也会重新渲染
 如何避免不必要的重新渲染呢?
 解决方式:使用钩子函数 shouldComponentUpdate(nextProps, nextState)
 作用:通过返回值决定该组件是否重新渲染，返回 true 表示重新渲染，false 表示不重新渲染
 触发时机:更新阶段的钩子函数，组件重新渲染前执行 (shouldComponentUpdate  render)

+
1
2
3
4
5
6
class Hello extends Component {
shouldComponentUpdate() {
// 根据条件，决定是否重新渲染组件 return false
}
  render() {...}
}
+ +

纯组件(类组件)

 纯组件:PureComponent 与 React.Component 功能相似
 区别:PureComponent 内部自动实现了 shouldComponentUpdate 钩子，不需要手动比较
 原理:纯组件内部通过分别 对比 前后两次 props 和 state 的值，来决定是否重新渲染组件

+

 说明:纯组件内部的对比是 shallow compare(浅层对比)
 对于值类型来说:比较两个值是否相同(直接赋值即可，没有坑)
 注意:state 或 props 中属性值为引用类型时，应该创建新数据，不要直接修改原数据!(示例)

+
1
2
3
4
5
class Hello extends React.PureComponent {
  render() {
    return <div>纯组件</div>;
  }
}
+ +

函数组件的优化

1.函数组件没有继承关系–> class A extends React.Component 没有这样的东西 不能用 pureComponent 来优化 2.没有生命周期方法 –> shouldComponentUpdate() 不能用

+

解决方案: React.memo()高阶组件来优化函数组件

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { PureComponent } from "react";

class ClassPure extends PureComponent {
  state = {
    msg: "hello 纯组件",
  };
  render() {
    return (
      <div>
        {this.state.msg}
        <span>测试</span>
      </div>
    );
  }
}
+ +

将某元素或组件渲染到父组件以外的标签上

Portals – React (reactjs.org)

+
1
2
3
4
5
6
7
8
9
import React, { Component } from "react";
import ReactDOM from "react-dom";
class Portal extends Component {
  render() {
    const Portal = <div>Portal</div>;
    // 将标签渲染到 html 里面的指定元素内
    return ReactDOM.createPortal(Portal, document.getElementById("app"));
  }
}
+ +

Fragment 占位标签

Fragments – React (reactjs.org)

+
1
2
3
<React.Fragment></React.Fragment>
<Fragment></Fragment>
<></>
+ +
1
2
3
4
5
class Index extends Component {
  render() {
    return <React.Fragment>Fragment</React.Fragment>;
  }
}
+ +

StrictMode 严格模式

作用: 开启严格模式，提示 代码中的过时的属性或方法 可能存在的问题

+
1
2
3
4
5
6
7
8
9
class Index extends Component {
  render() {
    return (
      <React.StrictMode>
        <div>严格模式</div>
      </React.StrictMode>
    );
  }
}
+ +

CSS 模块化

    +

  • 把 xxxx.css 改成 xxxx.module.css

    +
    • +

  • 把 xxxx.module.css 引入到对应的组件中 import xxxxStyle from “./xxxx.module.css”

    +
    • +

  • 在组件中使用

    +
      +
    • <p className="{xxxxStyle.类名}">Hello World</p>
+
      1
      2
      3
      4
      5
      6
      7

      index.module.css

      ```css
      .hello span {
        color: hotpink;
      }
      
+
      +
      • +
    +
    • +
+

index.jsx

+
{8}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React, { Component } from "react";
import ModuleStyle from "./index.module.css";

class Index extends Component {
  render() {
    return (
      <div>
        <h1 className={ModuleStyle.hello}>
          <span>css 模块化</span>
        </h1>
      </div>
    );
  }
}

export default Index;
+ +

css in js

styled-component 包的基本使用

使用 styled-component 1.安装 styled-component 2.在你要使用 styled-component 的组件中 引入这个包 3.使用 const 组件名称 = styled.标签名和以前一样的写样式 4.在 render 函数中的 html 结构中使用组件名称

+
{4-10}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import React from "react";
import styled from "styled-components";
// 创建一个 div组件里面的样式是
const Div = styled.div`
  width: ${(props) => props.width};
  height: ${(props) => props.height};
  background-color: green;
  opacity: ${(props) => props.opacity};
  transition: all 3s;
`;
class App extends React.Component {
  // div的初始状态
  state = {
    width: "0px",
    height: "0px",
    opacity: 0,
  };

  // div的改变后的状态
  btnClick = () => {
    this.setState({
      width: "60px",
      height: "60px",
      opacity: 1,
    });
  };

  render() {
    return (
      <div className="one">
        <Div {...this.state}></Div>
        <button onClick={this.btnClick}>按钮</button>
      </div>
    );
  }
}

export default App;
+ +

样式继承

1
2
3
4
5
6
7
8
9
10
11
12
const Div = styled.div`
  width: ${(props) => props.width};
  height: ${(props) => props.height};
  background-color: green;
  opacity: ${(props) => props.opacity};
  transition: all 3s;
`;

// 继承样式
const Button = styled(Div)`
  background-color: skyblue;
`;
+ +

动画

React Transition Group (reactcommunity.org)

+

CSSTransition 包的使用

1.安装插件 npm install react-transition-group –save 2.在使用过渡效果的组件中导入 import { CSSTransition } from “react-transition-group” 3.使用导入的 CSSTransition 组件把需要过渡的标签包起来 4.书写过渡的样式 xxx-enter 代表进入动画执行之前绑定的类名 xxx-enter-active 代表进入动画执行中绑定的类名 xxx-enter-done 代表进入动画执行完绑定的类名 别忘了在 active 写 transition 属性 5.设置 CSSTransition 的属性 in 属性(触发动画进入或退出的状态) classNames 属性(告诉 react-transition-group 类的前缀是什么) timeout 属性(动画运行多久 退出 一定要大于等于 transition 的时间)

+

index.css

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/* xxx-enter 进入动画执行之前绑定的类名 */
/* xxx-enter-active 进入动画执行中绑定的类名 */
/* xxx-enter-done 进入动画执行完绑定的类名 */

.box-enter {
  /* xxx-enter 进入动画执行之前绑定的类名 */
  width: 0px;
  height: 0px;
  opacity: 0;
  background-color: burlywood;
}

.box-enter-active {
  /* xxx-enter-active 进入动画执行中绑定的类名 */
  width: 100px;
  height: 100px;
  opacity: 1;
  background-color: burlywood;
  transition: all 3s;
}

.box-enter-done {
  /* xxx-enter-active 进入动画执行中绑定的类名 */
  width: 100px;
  height: 100px;
  opacity: 1;
  background-color: burlywood;
}

/* 动画退出执行的动画 */
.box-exit {
  /* xxx-exit 退出动画执行之前绑定的类名 */
  width: 100px;
  height: 100px;
  opacity: 1;
  background-color: skyblue;
}

.box-exit-active {
  /* xxx-exit-active 退出动画执行中绑定的类名 */
  width: 10px;
  height: 10px;
  opacity: 0.5;
  background-color: red;
  transition: all 3s;
}

.box-exit-done {
  /* xxx-exit-active 退出动画执行完绑定的类名 */
  width: 0px;
  height: 0px;
  opacity: 0;
}
+ +

index.jsx

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import React, { Component } from "react";
import { CSSTransition } from "react-transition-group";
import "./index.css";
// CSSTransition有三个状态：
// + appear: 初始
//   + enter : 进入
//     + exit；: 退出
// 当组件第一次加载时候会自动查找
//   - appear / -appear - active / -appear - done
// 当组件显示时会自动查找
//   - enter / -enter - active / -enter - done
// 当组件退出时会自动查找
//   - exit / -exit - active / -exit - done
export default class index extends Component {
  state = {
    isShow: false,
  };
  fn = () => {
    this.setState({
      isShow: !this.state.isShow,
    });
  };
  render() {
    return (
      <React.Fragment>
        <div id="two">
          <CSSTransition
            in={this.state.isShow}
            classNames="box"
            timeout={3000}
            // 动画加载的时候才显示 dom 元素
            unmountOnExit
          >
            <div></div>
          </CSSTransition>
          <button onClick={this.fn}>点击显示动画</button>
        </div>
      </React.Fragment>
    );
  }
}
+ +

SwitchTransition 切换动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 使用SwitchTransition的过程
// 1.导入SwitchTransition
// 2.使用SwitchTransition包裹CSSTransition
// 3.注意: 以前在CSSTransition中用的属性in 现在用的key
// 4.写变化的样式 出来 进去  类名的前缀classNames
// 5.timeout 时间

class App extends React.Component {
  render() {
    <SwitchTransition>
      <CSSTransition key={this.state.flag} classNames="box" timeout={1000}>
        <button onClick={this.btnClick}>
          {this.state.flag ? "Hello,World" : "GoodBye,World"}
        </button>
      </CSSTransition>
    </SwitchTransition>;
  }
}
+ +

路由

如何在 React 中安装路由

1
npm install react-router-dom
+ +

文档地址

+

基本使用

常用组件的说明

    +

  • BrowserRouter 组件：用来包裹整个 React 应用，整个应用中只需要使用一次即可。

    +
    • +

  • Link 组件：最终会生成一个 a 标签，通过 to 属性指定 pathname（history /） 或 hash（哈希模式 #）

    +
    • +

  • Route 组件：用来配置路由规则和要展示的组件

    +
      +
    • path 属性：配置路由规则
      • +
    • component 属性：指定当前路由规则匹配时要展示的组件
      • +
    • Route 组件放在哪，组件内容就展示在哪。并且每一个路由都是一个单独的 Route 组件。
      • +
    +
    • +

  • react-router4 之前, 所有路由代码都是统一放到 react-router 中管理的

    +
      +
    • react-router4 开始, 拆分为了两个包 react-router-dom 和 react-router-native
        +
      • react-router-dom 在浏览器中使用路由
        • +
      • react-router-native 在原生应用中使用路由
        • +
      +
      • +
    +
    • +

  • BrowserRouter history 模式使用的是 H5 的特性, 所以兼容性会比 HashRouter hash 模式差一些

    +
      +
    • 在企业开发中如果不需要兼容低级
      版本浏览器, 建议使用 BrowserRouter 如果需要兼容低级版本浏览器, 那么只能使用 HashRouter
      • +
    +
    • +

  • 无论是 Link 还是 Route 都只能放到 BrowserRouter 和 HashRouter 中才有效

    +
    • +
+

路由的执行过程

    +

  • 1 当点击 Link （a 标签）的时候，就会修改浏览器中的 pathname

    +
    • +

  • 2 只要 浏览器地址栏中的 pathname 发生改变，React 路由就会监听到这个改变

    +
    • +

  • 3 React 路由监听到 pathname 改变后，就会遍历所有 Route 组件，分别使用 Route 组件中的 path 路由规则，与当前的 浏览器地址栏中的 pathname 进行匹配

    +
    • +

  • 4 只要匹配成功，就会把当前 Route 对应的组件，展示在页面中

    +
    • +

  • 注意：匹配时，不是找到第一个匹配的路由就停下来了。而是： 所有的 Route 都会进行匹配，只要匹配就会展示该组件。

    +
      +
    • 也就是说：在一个页面中，可以有多个 Route 同时被匹配
      • +
    +
    • +
+

路由的使用-案例

+ +

路由传参

+ +

路由嵌套-子路由

+#### react-router-config 统一路由管理 + +

为了像 vue-router 一样方便的管理路由所以需要这样一个插件

+

部分源码展示

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React from "react";
import { Switch, Route } from "react-router";

function renderRoutes(routes, extraProps = {}, switchProps = {}) {
  return routes  (
    <Switch {...switchProps}>
      {routes.map((route, i) => (
        <Route
          key={route.key || i}
          path={route.path}
          exact={route.exact}
          strict={route.strict}
          render={props =>
            route.render ? (
              route.render({ ...props, ...extraProps, route: route })
            ) : (
              <route.component {...props} {...extraProps} route={route} />
            )
          }
        />
      ))}
    </Switch>
  ) : null;
}

export default renderRoutes;

+ +

总结

元素渲染 – React (docschina.org)

+
    +

  • React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。

    +
    • +

  • React DOM 只会更新实际改变了的内容

    +
    • +

  • 组件名称必须以大写字母开头。

    +

    React 会将以小写字母开头的组件视为原生 DOM 标签

    +
    • +

  • 正确地使用 State State & 生命周期 – React (docschina.org)

    +
      +

    • 不要直接修改 State,而是应该使用 setState()

      +
      • +

    • State 的更新可能是异步的

      +
      • +

    • 数据是向下流动的

      +
      • +
    +
    • +

  • 事件默认行为

    +
      +
    • React 不能通过返回 false 来阻止默认行为必须显现的调用 preventDefault
      • +
    +
    • +

  • React 里面的事件对象是合成事件 事件处理 – React (docschina.org)

    +
    • +

  • 事件处理程序传递参数

    +
    • +
+
1
2
3
4
5
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
//上述两种方式是等价的

在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。
+ +
    +
  • 事件回调函数
    • +
+
1
2
3
4
5
6
7
8
9
10
11
class LoggingButton extends React.Component {
  handleClick() {
    console.log("this is:", this);
  }

  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return <button onClick={() => this.handleClick()}>Click me</button>;
  }
}
// 此语法问题在于每次渲染 LoggingButton 时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用 class fields 语法来避免这类性能问题。
+ +
    +
  • 在受控组件上指定 value 的 prop 会阻止用户更改输入。如果你指定了 value，但输入仍可编辑，则可能是你意外地将value 设置为 undefined 或 null。
    • +
+
头像头像
WaterBoat
正因你我生于繁华，弥足之花方显珍贵
原创React 笔记
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
React5
喜欢这篇文章的人也看了
avatar
正因你我生于繁华，弥足之花方显珍贵

WaterBoat

正因你我生于繁华，弥足之花方显珍贵
文章目录
  1. 1. React 介绍
    1. 1.1. 声明式
    2. 1.2. 组件化
    3. 1.3. 一次学习，随处编写
  2. 2. React 初体验
    1. 2.1. 使用 React 的 2 种方式
  3. 3. 虚拟 DOM 和真实 DOM
    1. 3.1. 如何创建虚拟 DOM
    2. 3.2. 如何通过虚拟 DOM 渲染真实 DOM 到浏览器
    3. 3.3. render 方法的注意点
    4. 3.4. createElement 方法注意点
    5. 3.5. 案例
  4. 4. React 中的 JSX 语法
    1. 4.1. 为什么需要 JSX
      1. 4.1.1. 如果用 js 的写法
      2. 4.1.2. 使用 JSX 写法
    2. 4.2. JSX 是什么？
    3. 4.3. 为什么要使用 JSX
    4. 4.4. JSX 的本质
    5. 4.5. 如何将 JSX 转换成 JS?
    6. 4.6. JSX 中使用表达式
    7. 4.7. JSX 使用条件渲染
    8. 4.8. JSX 中的列表渲染
      1. 4.8.1. key
    9. 4.9. JSX 中的绑定属性
    10. 4.10. JSX 语法总结
      1. 4.10.1. jsx 语法规则
      2. 4.10.2. 区分：【js 语句(代码)】与【js 表达式】
  5. 5. 受控组件
  6. 6. 非受控组件
  7. 7. 获取 Dom 元素
    1. 7.1. 何时使用 Refs
    2. 7.2. Refs 转发
  8. 8. 组件
    1. 8.1. 组件的渲染
    2. 8.2. 定义函数组件
    3. 8.3. 定义类组件
  9. 9. 状态 state
    1. 9.1. State 的更新可能是异步的
  10. 10. 事件处理
    1. 10.1. this
  11. 11. 组件通信
    1. 11.1. 父子通信-class 组件
    2. 11.2. 父子通信-function 组件
    3. 11.3. 父子传参案例
    4. 11.4. 子父传参
    5. 11.5. 组件的 props 的数据类型的限制
  12. 12. Context(上下文)
  13. 13. 组件的生命周期
    1. 13.1. 什么是生命周期
      1. 13.1.1. 创建时(挂载阶段)
      2. 13.1.2. 更新时(更新阶段)
      3. 13.1.3. 卸载时(卸载阶段)
  14. 14. shouldComponentUpdate
  15. 15. render-props 和高阶组件
    1. 15.1. React 组件复用概述
    2. 15.2. render props 模式
    3. 15.3. render props 模式
    4. 15.4. 演示 Mouse 组件的复用
    5. 15.5. children 代替 render 属性
    6. 15.6. 高阶组件
      1. 15.6.1. 什么是高阶组件(higher order component)
      2. 15.6.2. 高阶组件的封装
      3. 15.6.3. 给高阶组件添加 displayName
      4. 15.6.4. 给高阶组件传递属性
  16. 16. setState()的说明
    1. 16.0.1. 更新数据
    2. 16.0.2. 推荐语法
    3. 16.0.3. 第二个参数
  • 17. 组件更新机制
  • 18. 组件性能优化
    1. 18.1. 减轻 state
    2. 18.2. 避免不必要的重新渲染
    3. 18.3. 纯组件(类组件)
    4. 18.4. 函数组件的优化
  • 19. 将某元素或组件渲染到父组件以外的标签上
  • 20. Fragment 占位标签
  • 21. StrictMode 严格模式
  • 22. CSS 模块化
  • 23. css in js
    1. 23.1. styled-component 包的基本使用
      1. 23.1.1. 样式继承
  • 24. 动画
    1. 24.1. CSSTransition 包的使用
    2. 24.2. SwitchTransition 切换动画
  • 25. 路由
    1. 25.1. 如何在 React 中安装路由
    2. 25.2. 基本使用
      1. 25.2.1. 常用组件的说明
      2. 25.2.2. 路由的执行过程
      3. 25.2.3. 路由的使用-案例
      4. 25.2.4. 路由传参
      5. 25.2.5. 路由嵌套-子路由
  • 26. 总结
    • 最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/2021/05/07/\345\211\215\347\253\257/React/02-Redux\347\254\224\350\256\260/index.html" "b/2021/05/07/\345\211\215\347\253\257/React/02-Redux\347\254\224\350\256\260/index.html" new file mode 100644 index 0000000000..9eced3eef2 --- /dev/null +++ "b/2021/05/07/\345\211\215\347\253\257/React/02-Redux\347\254\224\350\256\260/index.html" @@ -0,0 +1,422 @@ +Redux 笔记 | WaterBoat的博客
    加载头像
    原创

    Redux 笔记

    发表于更新于
    长沙

    Redux 笔记

    Redux

    和 vuex 一样为了解决组件之间的通信问题而使用的架构

    +

    设计思想

      +
    • Web 应用是一个状态机，视图与状态是一一对应的。
      • +
    • 所有的状态，保存在一个对象里面。
      • +
    +

    Redux 核心理念

    1. 通过store来保存数据
+2. 通过action来修改数据
+3. 通过reducer将store和action串联起来 reducer(state=initialState) {}
+
    +
    1
    2
    3
    4
    5
    6
    7
    8
                        -------------
            --------->  | Component |  ---------
           |            -------------           |
           |                                    ⬇
    -------------       -------------       -------------
    |   Store   | <---- |  Reducer  | <---- |  Action   |
    -------------       -------------       -------------

    + +

    API

    createStore 存数据的地方

    createStore方法还可以接受第二个参数，表示 State 的最初状态。这通常是服务器给出的。

    +
    {11}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    const redux = require("redux");
    // 定义数据
    const initialState = {
      count: 0,
      list: [1, 3, 4, 2, 3],
    };
    function fn(state = initialState) {
      return state;
    }
    // 创建 Store
    const store = redux.createStore(fn);
    // 获取数据
    console.log(store.getState()); // { count: 0, list: [ 1, 3, 4, 2, 3 ] }
    + +

    State 对象包含所有数据

    如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。

    +

    当前时刻的 State，可以通过store.getState()拿到。

    +

    Redux 规定， 一个 State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。

    +

    Action 修改 State 数据

    State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。

    +

    Action 是一个对象。其中的 type 属性是必须的，表示 Action 的名称。其他属性可以自由设置，社区有一个规范可以参考。

    +
    1
    2
    3
    4
    const action = {
      type: "ADD_TODO",
      msg: "Hello Redux",
    };
    + +

    Store.dispatch() 发送 Action

    1
    2
    3
    4
    5
    6
    const action = {
      type: "ADD_TODO",
      msg: "Hello Redux",
    };

    store.dispatch(action);
    + +

    Reducer 接收新的 state 并且返回它

    Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    const redux = require("redux");
    // 定义数据
    const initialState = {
      count: 0,
      list: [1, 3, 4, 2, 3],
    };
    function fn(state = initialState, action) {
      // 这里接收到新的 action
      console.log(action);
      switch (action.type) {
        case "ADD_TODO":
          state.msg = action.msg;
          return state;
        default:
          return state;
      }
    }
    // 创建 Store
    const store = redux.createStore(fn);
    // 获取数据
    // console.log(store.getState()); // { count: 0, list: [ 1, 3, 4, 2, 3 ] }

    const action = {
      type: "ADD_TODO",
      msg: "Hello Redux",
    };
    // 派发 action
    store.dispatch(action);
    console.log(store.getState());
    // { type: '@@redux/INITu.8.s.4.e.9' }
    //{ type: 'ADD_TODO', msg: 'Hello Redux' }
    //{ count: 0, list: [ 1, 3, 4, 2, 3 ], msg: 'Hello Redux' }
    + +

    store.Subscribe 监听数据变化

    {23-26}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    const redux = require("redux");
    // 定义数据
    const initialState = {
      count: 0,
      list: [1, 3, 4, 2, 3],
    };
    function fn(state = initialState, action) {
      // 这里接收到新的 action
      console.log(action);
      switch (action.type) {
        case "ADD_TODO":
          state.msg = action.msg;
          return state;
        default:
          return state;
      }
    }
    // 创建 Store
    const store = redux.createStore(fn);
    // 获取数据
    // console.log(store.getState()); // { count: 0, list: [ 1, 3, 4, 2, 3 ] }

    // 监听 state 变化
    store.subscribe(() => {
      console.log("变化了");
    });
    const action = {
      type: "ADD_TODO",
      msg: "Hello Redux",
    };
    // 派发 action
    store.dispatch(action);
    console.log(store.getState());
    + +

    store.subscribe方法返回一个函数，调用这个函数就可以解除监听。

    +
    1
    2
    let unsubscribe = store.subscribe(() => console.log(store.getState()));
    unsubscribe();
    + +

    combineReducers 组合 reducer

    1
    2
    3
    4
    import { combineReducers, createStore } from "redux";
    let reducer = combineReducers({ reducer1, reducer2 });
    let stote = createStore(reducer);
    // store.reducer1 获取到数据
    + +

    概念 action creator

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 什么是 action 对象?     形如  {type:"ADD",payload:5} 这样的形式就是 action 对象
    // 什么是 action creator 函数?   返回 action 对象的函数就是 action creator函数

    function actionCreator(payload) {
      return {
        type: "ADD",
        payload,
      };
    }
    // 在什么时候使用?  一般在相同 type 不同传参的情况下使用,比如一个按钮想一次+1一个按钮想一次+2
    + +

    bindActionCreators 简化 //TODO

    1
    2
    3
    4
    5
    6
    7
    8
    9
    import { useDispatch } from "react-redux";
    import { bindActionCreators } from "redux";
    function test() {
      const dispatch = useDispatch();
      return bindActionCreators(
        { increment: () => {}, save_message: () => {} },
        dispatch,
      ); // {increment: ƒ, save_message: ƒ}
    }
    + +

    总结

      +
    • 通过 redux.createStore() 创建 store
      • +
    • 通过 store.dispatch(action) 修改 state 里面的值
      • +
    • 通过 reducer(state,action) 函数返回 state 值
      • +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    // 1.引入 redux 包
    const redux = require("redux");

    const defaultState = {
      msg: "hello redux",
    };

    // 2.创建 stote
    const store = redux.createStore(reducer);

    // 3.创建 reducer 初始化数据
    function reducer(state = defaultState, action) {
      console.log("我被触发了");
      switch (action.type) {
        case "ADD":
          return { ...state, age: action.age };
        default:
          return state;
      }
    }

    // 4. 调用 action 修改 state
    let action = {
      type: "ADD",
      age: 18,
    };
    // 调用完成之后会触发 reducer
    store.dispatch(action);
    // 5. 查看 state 是否修改
    console.log(store.getState());
    + +

    react-redux 的使用

    文档

    Getting Started with React Redux | React Redux (react-redux.js.org)

    +

    基本使用

      +
    • Provider 这个组件能够使你整个 app 都能获取到 store 中的数据
      • +
    • connect 这个方法能够使组件跟 store 来进行关联
      • +
    +

    index.jsx

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    import React from "react";
    import ReactDOM from "react-dom";
    import "./index.css";
    import App from "./App";
    import { Provider } from "react-redux";
    import store from "./store";

    ReactDOM.render(
      <Provider store={store}>
        <React.StrictMode>
          <App />
        </React.StrictMode>
      </Provider>,

      document.getElementById("root"),
    );
    + +

    store.js

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    import { createStore } from "redux";

    // 1.创建初始化 状态
    const initialState = {
      name: "zhangsan",
      age: 19,
    };

    export const action = {
      type: "ADD",
    };

    // 3.创建reducer函数
    export const reducer = (state = initialState, action) => {
      // console.log(action)
      // console.log(state)
      switch (action.type) {
        case "ADD":
          state.age++;
          return state;
        default:
          return state;
      }
    };

    let store = createStore(reducer);

    export default store;
    + +

    app.jsx

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    import "./App.css";
    import { connect } from "react-redux";
    import store, { action } from "./store";
    import React from "react";

    class App extends React.Component {
      constructor() {
        super();
        this.state = store.getState();
        this.unsubscribe = null;
      }

      componentDidMount() {
        // 监听数据变化
        this.unsubscribe = store.subscribe(() => {
          this.setState({
            ...store.getState(),
          });
        });
      }
      // 组件销毁停止监听
      componentWillUnmount() {
        this.unsubscribe();
      }
      render() {
        return (
          <div className="App">
            <h1>{this.state.age}</h1>
            <button onClick={this.props.onClick}>点击增加年龄</button>
            <button onClick={this.unsubscribe}>停止监听</button>
          </div>
        );
      }
    }

    // 传入 state 获取 store 里面的值
    // 这个单词翻译过来就是把state映射到props中去 ,其实也就是把Redux中的数据映射到React中的props中去。
    const mapStateToProps = (state) => {
      console.log(state);
      return {
        name: state.name,
        age: state.age,
      };
    };
    // 这个单词翻译过来就是就是把各种dispatch也变成了props让你可以直接使用;
    const mapDispatchToProps = (dispatch) => {
      // 默认传递参数就是dispatch
      return {
        onClick: () => {
          dispatch(action);
        },
      };
    };

    // connect(mapStateToProps, mapDispatchToProps)(MyComponent)
    export default connect(mapStateToProps, mapDispatchToProps)(App);
    + +

    redux-thunk

      +
    • 让 action 支持异步请求数据
      • +
    +

    使用

    store.js

    +
    1
    2
    3
    4
    import { createStore, applyMiddleware } from "redux";
    import thunk from "redux-thunk";
    // 添加中间件即可
    let store = createStore(reducer, applyMiddleware(thunk));
    + +

    案例

    index.jsx

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    import React from "react";
    import ReactDOM from "react-dom";
    import "./index.css";
    import App from "./App";
    import { Provider } from "react-redux";
    import store from "./store";

    ReactDOM.render(
      <React.StrictMode>
        <Provider store={store}>
          <App />
        </Provider>
      </React.StrictMode>,
      document.getElementById("root"),
    );
    + +

    App.jsx

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    import "./App.css";

    import React, { Component } from "react";
    import { connect } from "react-redux";
    import { asyncAction, promiseAction } from "./store";

    class App extends Component {
      render() {
        return (
          <div className="App">
            <h1>{this.props.msg}</h1>
            <button onClick={this.props.msgUpdate}>点击修改值</button>
            <h1>{this.props.async}</h1>
            <button onClick={this.props.msgAsync}>异步修改值使用 thunk</button>
            <button onClick={this.props.msgAsync2}>异步修改值不使用 thunk</button>
            <button onClick={this.props.msgAsync3}>异步修改值使用 promise</button>
          </div>
        );
      }
    }

    let mapState = (state) => {
      return {
        msg: state.msg,
        async: state.async,
      };
    };
    let mapDispatch = (dispatch) => {
      return {
        msgUpdate() {
          dispatch({
            type: "MSG",
            msg: "你好",
          });
        },
        // redux-thunk
        msgAsync() {
          dispatch(asyncAction);
        },
        // 不使用 redux-thunk
        msgAsync2() {
          fetch("http://localhost:8000/hello")
            .then((res) => res.json())
            .then((res) => {
              dispatch({
                type: "ASYNC",
                async: res.msg,
              });
            });
        },
        // promise redux-thunk
        msgAsync3() {
          dispatch(promiseAction);
        },
      };
    };

    export default connect(mapState, mapDispatch)(App);
    + +

    store

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    import { createStore, applyMiddleware } from "redux";
    import thunk from "redux-thunk";
    let defaultState = {
      msg: "123",
      async: "异步",
    };

    function reducer(state = defaultState, action) {
      console.log(action);
      switch (action.type) {
        case "MSG":
          return {
            ...state,
            msg: action.msg,
          };
        case "ASYNC":
          return {
            ...state,
            async: action.async,
          };
        default:
          return state;
      }
    }

    export const asyncAction = function (dispatch) {
      fetch("http://localhost:8000/hello")
        .then((res) => res.json())
        .then((res) => {
          dispatch({
            type: "ASYNC",
            async: res.msg,
          });
        });
    };
    export const promiseAction = async function (dispatch) {
      let data = await (await fetch("http://localhost:8000/hello")).json();
      dispatch({
        type: "ASYNC",
        async: data.msg,
      });
    };

    // let store = createStore(reducer)
    let store = createStore(reducer, applyMiddleware(thunk));

    export default store;
    +
    头像头像
    WaterBoat
    正因你我生于繁华，弥足之花方显珍贵
    原创Redux 笔记
    本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
    React5
    喜欢这篇文章的人也看了
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/2021/05/07/\345\211\215\347\253\257/React/React\346\200\273\347\273\223\347\254\224\350\256\260/index.html" "b/2021/05/07/\345\211\215\347\253\257/React/React\346\200\273\347\273\223\347\254\224\350\256\260/index.html" new file mode 100644 index 0000000000..2ebc43fb74 --- /dev/null +++ "b/2021/05/07/\345\211\215\347\253\257/React/React\346\200\273\347\273\223\347\254\224\350\256\260/index.html" @@ -0,0 +1,362 @@ +React 总结笔记 | WaterBoat的博客
    加载头像
    原创

    React 总结笔记

    发表于更新于
    长沙

    React 总结笔记

    父传子

    props 传数据

    父

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    import ClassProps from "./components/ClassProps";
    import FunctionProps from "./components/FunctionProps";

    function App() {
      return (
        <div className="App">
          <ClassProps name="张三" age={18} />
          <FunctionProps name="梨花" age={20} />
        </div>
      );
    }

    export default App;
    + +

    子

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    import React from "react";

    class ClassProps extends React.Component<{
      name?: string;
      age?: number;
    }> {
      render() {
        return (
          <>
            <div>{this.props.name}</div>
            <div>{this.props.age}</div>
          </>
        );
      }
    }
    // 设置默认值 可能会被弃用 https://twitter.com/dan_abramov/status/1133878326358171650
    (ClassProps as any).defaultProps = {
      name: "John Doe",
      age: 30,
    };
    export default ClassProps;

    interface FunctionProps {
      name: string;
      age: number;
    }
    // 设置默认值
    FunctionProps.defaultProps = {
      name: "",
      age: 0,
    };
    function FunctionProps(props: FunctionProps) {
      return (
        <div>
          <h1>Function Props</h1>
          <p>{props.name}</p>
          <p>{props.age}</p>
        </div>
      );
    }

    export default FunctionProps;
    + +

    children 传元素

    父

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    function App() {
      return (
        <div className="App">
          <ClassChildren>
            <div>
              <p>我是子组件</p>
            </div>
          </ClassChildren>
          <FunctionChildren>
            <div>
              <p>我是子组件</p>
            </div>
          </FunctionChildren>
        </div>
      );
    }
    + +

    子

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    import React from "react";

    class ClassChildren extends React.Component {
      render() {
        return <div id="ClassChildren">{this.props.children}</div>;
      }
    }

    export default ClassChildren;

    import { ReactChild, ReactFragment, ReactPortal } from "react";

    function FunctionChildren(props: {
      children: ReactChild | ReactFragment | ReactPortal;
    }) {
      return (
        <div>
          <h1>Function Children</h1>
          <p>{props.children}</p>
        </div>
      );
    }

    export default FunctionChildren;
    + +

    context

    头像头像
    WaterBoat
    正因你我生于繁华，弥足之花方显珍贵
    原创React 总结笔记
    本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
    React5
    喜欢这篇文章的人也看了
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/2021/05/14/\345\211\215\347\253\257/JavaScript/01-Effective JavaScript \347\274\226\345\206\231\351\253\230\350\264\250\351\207\217JavaScript\344\273\243\347\240\201\347\232\20468\344\270\252\346\234\211\346\225\210\346\226\271\346\263\225/index.html" "b/2021/05/14/\345\211\215\347\253\257/JavaScript/01-Effective JavaScript \347\274\226\345\206\231\351\253\230\350\264\250\351\207\217JavaScript\344\273\243\347\240\201\347\232\20468\344\270\252\346\234\211\346\225\210\346\226\271\346\263\225/index.html" new file mode 100644 index 0000000000..e5ffb7ce08 --- /dev/null +++ "b/2021/05/14/\345\211\215\347\253\257/JavaScript/01-Effective JavaScript \347\274\226\345\206\231\351\253\230\350\264\250\351\207\217JavaScript\344\273\243\347\240\201\347\232\20468\344\270\252\346\234\211\346\225\210\346\226\271\346\263\225/index.html" @@ -0,0 +1,581 @@ +Effective JavaScript 编写高质量JavaScript代码的68个有效方法 | WaterBoat的博客
    加载头像
    原创

    Effective JavaScript 编写高质量JavaScript代码的68个有效方法

    发表于更新于
    长沙

    Effective JavaScript 编写高质量JavaScript代码的68个有效方法

    JavaScript 中的浮点数

    大多数编程语言都有几种数值型数据类型，但是 JavaScript 却只有一种。你可以使用 typeof 运算符查看数字的类型。不管是整数还是浮点数，JavaScript 都将它们简单地归类为数字。

    +
    1
    2
    3
    typeof 10; // number
    typeof 10.1; // number
    typeof -10.1; // number
    + +

    事实上，JavaScript 中所有的数字都是双精度浮点数。这是由IEE 754标准制定的 64 位编码数字—即 “doubles” 。

    +

    那么 JavaScript 是如何表达整数的呢?

    +

    请先记住一个概念 : 双精度浮点数能完美地表示高达 53 位精度的整数,范围大小为 -2^53—-2^53 的所有整数都是有效的双精度浮点数

    +

    因此，尽管 JavaScript 中缺少明显的整数类型，但是完全可以进行整数运算。

    +

    大多数的算术运算符可以使用整数、实数或两者的组合进行计算。

    +
    1
    2
    3
    4
    5
    console.log(0.1 * 1.9); // 0.19;
    console.log(-10 + 11); // 1
    console.log(20 - 10); // 10
    console.log(5 / 10); // 0.5
    console.log(49 / 7); // 7
    + +

    然而位算术运算符比较特殊。JavaScript 不会直接将操作数作为浮点数进行运算，而是会将其隐式地转换为 32 位整数后进行运算(确切地说，它们被转换为 32 位大端（big-endian) 的 2 补码表示的整数)

    +
    1
    console.log(8 | 1); //9
    + +

    看似简单的表达式实际上需要几个步骤来完成运算

    +

    如前文所述，JavaScript 的数字都是双精度浮点数。同时也可以表示为 32 位整数，即 32 位 0、1 的序列。

    +

    整数 8 为 32 位二进制序列如下

    +

    00000000000000000000000000001000

    +

    我们也可以用 JavaScript 中数字类型的 toString 方法来查看

    +
    1
    2
    // 转成二进制
    (8).toString(2); // "1000"
    + +

    整数 1 表示为 32 位二进制如下所示：
    00000000000000000000000000000001

    +

    然后按照相同位只要一个为 1 即为 1 的运算法则，那么结果就是

    +

    00000000000000000000000000001001

    +

    其结果就是

    +
    1
    2
    // 将 1001 看成二进制，返回十进制数
    ParseInt("1001", 2); // 9
    + +

    所有位运算符的工作方式都是相同的。其操作步骤为 ：

    +
      +
    • 将操作数转换为 32 位整数
      • +
    • 使用整数位模式进行运算
      • +
    • 将结果转换为标准的 JavaScript 浮点数
      • +
    +

    一般情况下，JavaScript 引擎需要做一些额外的工作来进行折现转换。

    +

    因为数字是以浮点数存储的，必须将其转为整数，然后再转回浮点数。

    +

    然后我们在进行浮点数的运算的时候会发现一些不正确的结果

    +
    1
    0.1 + 0.2; // 0.30000000000000004
    + +

    尽管 64 位的精度已经相当高了，但是双精度浮点数也只能表示一组有限的数字，而不能表示所有的实数集。浮点运算只能产生近似的结果，四舍五入到最接近的可表示的实数。

    +

    浮点数权衡了精度和性能。当我们关系精度的时候，要小心浮点数的局限性。一个有效的解决办法就是尽可能地采用整数值运算，因为整数在表示时不需要舍入。

    +

    总结

      +
    • JavaScript 的数字都是双精度的浮点数。
      • +
    • JavaScript 中的整数仅仅是双精度浮点数的一个子集，而不是一个单独的数据类型。
      • +
    • 位运算符将数字视为 32 位的有符号整数。
      • +
    +

    隐式转换

    算术运算符 -、*、/ 和 % 在计算之前都会尝试将其参数转换为数字。而算术符 +，既重载了数字相加，又重载了字符串连接操作。

    +

    加法运算是左结合律

    +

    null 在算术运算中不会导致失败而是隐式地转换为 0

    +

    一个未定义的变量将被转换为特殊的浮点数值 NaN（not a number）

    +

    无奈的是，即便是测试 NaN 值也是异常困难。这有两个原因。

    +
      +
    • JavaScript 遵循了 IEEE 浮点数标准令人头痛的要求—NaN 不等于其本身
      • +
    +
    1
    2
    let x = NaN;
    x === NaN; //false
    + +

    另外，标准的库函数 isNaN 也不是很可靠，因为它带有自己的隐式强制转换，在测试其参数之前，会将参数转换为数字（isNaN 函数的一个更精确的名称可能是 coercesToNaN）。如果你已经知道一个值是数字，你可以使用 isNaN 函数测试它是否是 NaN。

    +
    1
    isNaN(NaN); //true
    + +

    但是对于其他绝对不是 NaN，但会被强制转换为 NaN 的值，使用 isNaN 方法是无法区分的。

    +
    1
    2
    3
    4
    console.log(isNaN("刘德华")); // true
    console.log(isNaN(undefined)); // true
    console.log(isNaN({})); // true
    console.log(isNaN({ name: "罗老师" })); // true
    + +

    最后一种强制转换有时称为真值运算（truthiness）

    +

    大多数的 JavaScript 值都为真值（truth），也就是能隐式地转换为 true，真值运算不会隐式调用任何强制转换方法

    +

    JavaScript 中有 7 个假值： false、0、-0、”“、NaN、null 和 undefined

    +

    其他所有的值都为真值。

    +

    由于数字和字符串可能为假值，因此，使用真值运算检查函数参数或者对象属性是否已定义不是绝对安全的。

    +

    对象也可以被强制转换为原始值。最常见的用法是转换为字符串

    +
    1
    2
    console.log("the Math object" + Math); //the Math object[object Math]
    console.log("the JSON object" + JSON); //the JSON object[object JSON]
    + +

    对象通过隐式地调用其自身的 toString 方法转换为字符串。

    +
    1
    2
    console.log(Math.toString());
    console.log(JSON.toString());
    + +

    总结

      +
    • 类型错误可能被隐式的强制转换所隐藏。
      • +
    • 重载的运算符+是进行加法运算还是字符串连接操作取决于其参数类型。
      • +
    • 对象通过 valueof 方法强制转換为数字，通过 toString 方法强制转换为字符串。
      • +
    • 具有 valueof 方法的对象应该实现 toString 方法，返回一个 valueof 方法产生的数字的字符串表示。
      • +
    • 测试一个值是否为未定义的值，应该使用 typeof 或者与 undefined 进行比较而不是使用真值运算。
      • +
    +

    原始类型优于封装对象

    除了对象之外，JavaScript 有 5 个原始值类型：布尔值、数字、字符串、null 和 undefined
    （令人困惑的是，对 null 类型进行 typeof 操作得到的结果为“object”，然而，ECMAScript 标准描述其为一个独特的类型。）同时，标准库提供了构造函数来封装布尔值、数字和字符串作为对象。你可以创建一个 String 对象，该对象封装了一个字符串值。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 原始字符串
    let a = "hello";
    let b = "hello";
    // String 对象
    let c = new String("hello");
    let d = new String("hello");
    console.log(a === b); // true
    console.log(typeof c); // object
    console.log(a === c); // false
    console.log(a == c); // true
    console.log(c == d); // false
    console.log(c === d); // false
    + +

    String 的原型对象有一个 toUpperCase 方法,可以将字符串转换为大写.你可以对原始字符串值调用这个方法。

    +
    1
    2
    "hi".someProperty = 17;
    console.log("hi".someProperty); // undefined
    + +

    因为每次隐式封装都会产生一个新的 String 对象，更新第一个封装对象并不会造成持久的影响。对原始值设置属性的确是没有意义的，但是觉察到这种行为是值得的。事实证明，这是 JavaScript 隐藏类型错误的又一种情形。本来你想给一个对象设置属性，但没注意其实它是个原始值，程序只是忽略更新而继续运行。这容易导致一些难以发现的错误，并且难以诊断。

    +

    总结

      +
    • 当做相等比较时，原始类型的封装对象与其原始值行为不一样。
      • +
    • 获取和设置原始类型值的属性会隐式地创建封装对象。
      • +
    +

    == 运算符的强制转换规则

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    参数类型 1参数类型 2强制转换
    nullundefined不转换,总是返回 true
    null 或 undefined其他任何非 null 或 undefined 的类型不转换,总是返回 false
    原始类型 : string 、number 或 booleanDate 对象将原始类型转换为数字；将 Date 对象转换为原始类型（优先常识 toString 方法，再常识 valueOf 方法）
    原始类型 : string 、number 或 boolean非 Date 对象将原始类型转换为数字；将非 Date 对象转换为原始类型（优先常识 valueOf 方法，再常识 toString 方法）
    原始类型 : string 、number 或 boolean原始类型 : string 、number 或 boolean将原始类型转换为数字
    +

    总结

      +
    • 当参数类型不同时，== 运算符应用了一套难以理解的隐式强制转换规则。
      • +
    • 使用 === 运算符，使读者不需要涉及任何的隐式强制转換就能明白你的比较运算。
      • +
    • 当比较不同类型的值时，使用你自己的显式强制转换使程序的行为更清晰。
      • +
    +

    视字符串为 16 位的代码单元序列

      +
    • JavaScript 字符串由 16 位的代码单元组成，而不是由 Unicode 代码点组成。
      • +
    • JavaScript 使用两个代码单元表示 26 及其以上的 Unicode 代码点。这两个代码单元被称为代理对
      • +
    • 代理对甩开了字符串元素计数，length、charAt、charCodeAt：方法以及正则表达式模式（例如“.”）受到了影响。
      • +
    • 使用第三方的库编写可识别代码点的字符串操作。
      • +
    • 每当你使用一个含有字符串操作的库时，你都需要查阅该库文档，看它如何处理代码点的整个范围。
      • +
    +

    熟练掌握闭包

    我们可能经常时候闭包,但是你未发现这是闭包而已罢了

    +

    理解闭包只需要学会三个基本的事实。

    +

    第一个事实：JavaScript 允许你引用在当前函数以外定义的变量。

    +
    {7}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function sayHi() {
      let Hi = "Hi";

      function name(name) {
        return Hi + "," + name;
      }
      return name("罗老师");
    }
    let result = sayHi();
    console.log(result); // Hi,罗老师
    + +

    第二个事实：即使外部函数已经返回，当前函数仍然可以引用在外部函数所定义的变量。
    如果这听起来让人难以置信，请记住，JavaScript 的函数是第一类（first-class 对象（请参阅第 19 条）。这意味着，你可以返回一个内部函数，并在稍后调用它。

    +
    {7,10-13}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function sayHi() {
      let Hi = "Hi";

      function name(name) {
        return Hi + "," + name;
      }
      return name;
    }
    let result = sayHi();
    let a = result("a老师");
    let b = result("b老师");
    console.log(a); // Hi,罗老师
    console.log(b); // Hi,罗老师
    + +

    和第一个例子不同的是,不是在外部调用函数 sayHi 中立即调用 name(“罗老师”),而是返回 name 函数本身。因此变量 a 的值是内部的 name 函数,调用变量 a 实际上是调用了 name 函数。但即使 sayHi 函数已经返回,name 函数仍然能记住 Hi 变量的值

    +

    学习闭包的第三个也是最后一个事实 : 闭包可以更新外部变量的值。

    +

    实际上,闭包存储的是外部变量的引用,而不是它们的值的副本。因此,对于任何具有访问这些外部变量的闭包,都可以进行更新。一个简单的惯用法 box 对象说明了这一切。它存储了一个可读写的内部值。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    function box() {
      let value = undefined;
      return {
        set: function (newValue) {
          value = newValue;
        },
        get: function () {
          return value;
        },
        type: function () {
          return typeof value;
        },
      };
    }
    let result = box();
    console.log(result.type()); //undefined
    console.log(result.get()); //undefined
    result.set(100);
    console.log(result.get()); // 100
    console.log(result.type()); // number
    + +

    这个例子产生了一个包含三个闭包的对象。这三个闭包是 set、get 和 type 属性。它们都共享访问 value 变量。se t 闭包更新 value 的值,随后调用 get 和 type 查看更新的结果。

    +

    总结

      +
    1. Javascript 允许你引用当前函数以外定义的变量
      2. +
    2. 即使外部函数已经返回,当前函数仍可以引用在外部函数所定义的变量
      3. +
    3. 闭包可以更新外部变量的值。实际上,闭包存储的是外部变量的引用,而不是它们的值的副本
      4. +
    +

    变量声明提升

    JavaScript 支持词法作用域( lexical scoping),即除了极少的例外,对变量 foo 的引用会被绑定到声明 foo 变量最近的作用域中。但是, JavaScript 不支持块级作用域,即变量定义的作用域并不是离其最近的封闭语句或代码块,而是包含它们的函数。

    +
    {3,17}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    var a = 20;
    function test2() {
      a = 100;
      {
        a = 10;
      }
      return a;
    }
    a = 90;

    console.log(test2()); // 10
    console.log(a); // 10

    var a = 20;
    function test2() {
      let a = 100;
      {
        a = 10;
      }
      return a;
    }
    a = 90;

    console.log(test2()); // 10
    console.log(a); // 90
    + +

    先来看一段案例

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    function test(params) {
      var a = 10;
      var params = 20;
      return a > params;
    }

    // 因为 JavaScript 函数内部声明的变量是函数作用域,而不是块级作用域,所以内部声明的 params 变量只是简单地重新声明了一个已经存在于作用域内的变量(即参数 params)
    /*
    理解 JavaScript 变量声明行为的一个好办法是把变量声明看作由两部分组成,即声明和赋值。
    JavaScript隐式地提升(声明部分到封闭函数的顶部,而将赋值留在原地。换句话说,变量的作用域是整个函数,但仅在 var 语句出现的位置进行赋值。
    */
    // 所以以上代码可以转换为
    function test(params) {
      var params;
      params = params;
      var a;
      a = 10;
      var params;
      params = 20;
      return a > params;
    }
    console.log(test(500)); // false
    + +

    变量声明提升也可能导致变量重声明的混淆。在同一函数中多次声明相同变量是合法。

    +

    JavaScript 中 var 声明的变量没有块级作用域的一个例外恰好是其异常处理。try…catch 语句将捕获的异常绑定到一个变量,该变量的作用域只是 catch 语句块。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function test3() {
      var x = "var",
        result = [];
      result.push(x);
      try {
        throw "错误";
      } catch (x) {
        x = "catch";
      }
      result.push(x);
      return result;
    }

    console.log(test3()); // [ 'var', 'var' ]
    + +

    总结

      +
    • 在代码块中的变量声明会被隐式地提升到封闭函数的顶部。
      • +
    • 重声明变量被视为单个变量。
      • +
    • 考虑手动提升局部变量的声明,从而避免混淆。
      • +
    +

    使用立即调用的函数表达式创建局部作用域

    先来看一段代码输出的是什么?

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    function test(arr) {
      var result = [];
      /*
      for循环中头部使用 var 定义变量 i 时，它和循环体中的 i 的作用域不是同级作用域，
      因此当 for 循环执行完毕后，并不会给每个循环都储存相对应的 i 的值。
      （注意，这种情况只有在循环体执行完时才会发生，直接在循环体中写同步执行的数据，
      是可以拿到对应的i的值的。也就是这种情况一般发生在循环体中存在执行函数，
      这个函数的触发执行时机是在for循环执行完毕后）
     */
      for (var i = 0; i < arr.length; i++) {
        result[i] = function () {
          return arr[i];
        };
      }
      return result;
    }
    var result = test([10, 20, 30]);
    var a = result[0];
    console.log(a()); // undefined
    + +

    我们希望输出的是 10 但是程序给我们的结果却是 undefined

    +

    我们似乎期望该函数存储的是嵌套函数创建时变量 i 的值。但事实上,它存储的是变量 i 的引用。由于每次函数创建后变量 i 的值都发生了变化,因此内部函数最终看到的是变量 i 最后的值。需要注意的是,闭包存储的是其外部变量的引用而不是值。

    +

    解决方案一 : 立即调用函数

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function test2(arr) {
      var result = [];
      for (var i = 0; i < arr.length; i++) {
        // 强制创建作用域
        (function (i) {
          result[i] = function () {
            return arr[i];
          };
        })(i);
      }
      return result;
    }
    var result = test2([10, 20, 30]);
    var a = result[0];
    console.log(a()); // 10
    + +

    使用立即调用函数虽然可以解决问题但是要注意,代码块不能包含任何跳出块的 break 语句和 continue 语句。

    +

    解决方案二 : 使用 ES6 的 let 声明变量

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function test(arr) {
      var result = [];
      for (let i = 0; i < arr.length; i++) {
        result[i] = function () {
          return arr[i];
        };
      }
      return result;
    }
    var result = test([10, 20, 30]);
    var a = result[0];
    console.log(a()); // undefined
    + +

    总结

      +
    • 理解绑定与赋值的区别。
      • +
    • 闭包存储的是外部变量的引用,而不是它们的值的副本
      • +
    • 使用立即调用的函数表达式(IIFE)来创建局部作用域。
      • +
    • 当心在立即调用的函数表达式中包裹代码块可能改变其行为的情形。
      • +
    • 使用 let 吧,求求了
      • +
    +

    当心命名函数表达式笨拙的作用域

    JavaScript 函数无论放在何处看起来似乎都是一样的,但是根据上下文其含义会发生变化

    +

    查看一下代码片段

    +
    1
    2
    3
    function test(x) {
      return x;
    }
    + +

    这段代码可以是一个函数声明,也可以是命名函数表达式,这取决于它出现的地方。它定义一个函数并且绑定到当前作用域的一个变量。在程序的最顶层，以上声明将创建一个名为 test 的全局函数。但是同一段代码也可以作为一个表达式，它可以有截然不同的含义。例如 ：

    +
    1
    2
    3
    var result = function test(x) {
      return x;
    };
    + +

    根据 ECMAScript 规范，上面那一段代码将函数 test 绑定到了变量 result 而不是变量 test。当然，函数的表达式命名并不是必要的。我们可以省略

    +
    1
    2
    3
    var result = function (x) {
      return x;
    };
    + +

    匿名和命名函数表达式的官方区别在于命名函数会绑定到与其函数名相同的变量上，该变量将作为该函数内的一个局部变量。这也是递归函数的原理

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 求个阶乘呗
    var result = function fn(value) {
      if (value == 1) {
        return value;
      } else {
        // fn 变量成为了函数内的一个局部变量
        return value * fn(value - 1);
      }
    };
    console.log(result(5));
    + +

    需要注意的是变量 fn 的作用域只在其自身函数中。不像函数声明，命名函数表达式不能通过其内部的函数名在外部被引用。

    +

    使用外部作用域的函数名也可以达到同样的效果

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 求个阶乘呗
    function fn(value) {
      if (value == 1) {
        return value;
      } else {
        return value * fn(value - 1);
      }
    }
    console.log(fn(5));
    + +

    :::tip

    +

    命名函数表达式真正的用处是进行调试。大多数现代的 JavaScript 环境都提供对 Error 对象的栈跟踪功能。在栈跟踪中，函数表达式的名称通常作为其入口使用。用于检查栈的设备调试器对命名函数表达式有类似的使用。

    +

    :::

    +

    总结

      +
    • 在 Eror 对象和调试器中使用命名函数表达式改进栈跟踪。
      • +
    • 谨记在错误百出的 JavaScript 环境中会提升命名函数表达式声明，并导致命名函数表达式的重复存储。
      • +
    • 考虑避免使用命名函数表达式或在发布前删除函数名。
      • +
    +

    当心局部块函数声明笨拙的作用域

    先来看一段案例

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    function f() {
      return "global fff";
    }

    function test(x) {
      var result = [];
      function f() {
        return "local fff";
      }
      if (x) {
        result.push(f());
      }
      result.push(f());
      return result;
    }

    console.log(test(true)); // [ 'local fff', 'local fff' ]
    console.log(test(false)); // [ 'local fff' ]
    + +

    现在看起来丝毫没有问题，但是如果我们把 test 函数内的 f 函数移动到 if 语句块里面

    +
    {8-10}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    function f() {
      return "global fff";
    }

    function test(x) {
      var result = [];
      if (x) {
        function f() {
          return "local fff";
        }
        result.push(f());
      }
      result.push(f()); // Error : f is not a function
      return result;
    }

    console.log(test(true)); // ???
    console.log(test(false)); // ???
    + +

    你或许你产生疑问为什么 13 行的代码会报错函数 f 不是在外部还定义了一个吗？为什么访问不到外部的全局 f 函数。

    +

    由于内部的函数 f 出现在 if 语句块中，因此你可能认为第一次调用 test 产生数组 [“local fff”，”globa fff”]，第二次调用产生数组[“global”]。但是要记住 JavaScript 没有块级作用域，所以内部函数 f 的作用域应该是整个 test 函数。

    +

    第二个例子的合理猜测是 [“local fff”,”local fff”]和[“local fff”]。而事实上，一些 JavaScript 环境的确如此行事。但并不是所有的 JavaScript 环境都这样。其他一些环境在运行时根据包含函数 f 的块是否被执行来有条件地绑定函数 f。（不仅使代码更难理解，而且还致使性能降低。这与 with 语句没什么不同。）

    +

    关于这一点 ECMAScript 标准说了什么呢？令人惊讶的是，几乎没有。直到 ES5，JavaScript 标准才承认局部块函数声明的存在。官方指定函数声明只能出现在其他函数或者程序的最外层。ES5 甚至建议将在非标准环境的函数声明转变成警告或错误。一些流行的 JavaScript 实现在严格模式下将这类函数报告为错误（具有局部块函数声明的处于严格模式下的程序将报告一个语法错误）。这有助于检测出不可移植的代码，并为未来的标准版本在给局部块函数声明指定更明智和可移植的语义开辟了一条路。

    +

    在此期间，编写可移植的函数的最好方式是始终避免将函数声明置于局部块或子语句中。如果你想编写嵌套函数声明，应该将它置于其父函数的最外层，正如最开始的示例所示。另外，如果你需要有条件地选择函数，最好的办法是使用 var 声明和函数表达式来实现。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    function f() {
      return "global";
    }

    function test(x) {
      var result = [],
        g = f;
      if (x) {
        g = function () {
          return "local";
        };
        result.push(g());
      }
      result.push(f());
      return result;
    }

    console.log(test(true)); // [ 'local', 'global' ]
    console.log(test(false)); // [ 'global' ]
    + +

    这消除了内部变量（重命名为 g）作用域的神秘性。它无条件地作为局部变量被绑定，而仅仅只有赋值语句是有条件的。结果很明确，该函数完全可移植。

    +

    总结

      +
    • 始终将函数声明置于程序或被包含的函数的最外层以避免不可移植的行为。
      • +
    • 使用 var 声明和有条件的赋值语句替代有条件的函数声明。
      • +
    +
    头像头像
    WaterBoat
    正因你我生于繁华，弥足之花方显珍贵
    原创Effective JavaScript 编写高质量JavaScript代码的68个有效方法
    本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
    JavaScript6
    喜欢这篇文章的人也看了
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/2021/05/20/\345\211\215\347\253\257/JavaScript/02-hash \345\222\214 history \350\267\257\347\224\261\347\232\204\345\214\272\345\210\253/index.html" "b/2021/05/20/\345\211\215\347\253\257/JavaScript/02-hash \345\222\214 history \350\267\257\347\224\261\347\232\204\345\214\272\345\210\253/index.html" new file mode 100644 index 0000000000..5a01b8e438 --- /dev/null +++ "b/2021/05/20/\345\211\215\347\253\257/JavaScript/02-hash \345\222\214 history \350\267\257\347\224\261\347\232\204\345\214\272\345\210\253/index.html" @@ -0,0 +1,441 @@ +hash 和 history 路由的区别 | WaterBoat的博客
    加载头像
    原创

    hash 和 history 路由的区别

    发表于更新于
    长沙

    hash 和 history 路由的区别

    前端路由实现方式

    路由需要实现三个功能：

    +
      +

    • 当浏览器地址变化时，切换页面；

      +
      • +

    • 点击浏览器【后退】、【前进】按钮，网页内容跟随变化；

      +
      • +

    • 刷新浏览器，网页加载当前路由对应内容；

      +
      • +
    +

    在单页面 web 网页中, 单纯的浏览器地址改变, 网页不会重载，如单纯的 hash 网址改变网页不会变化，因此我们的路由主要是通过监听事件，并利用 js 实现动态改变网页内容，有两种实现方式：

    +
      +

    • hash 模式：监听浏览器地址 hash 值变化，执行相应的 js 切换网页；

      +
      • +

    • history 模式：利用 history API 实现 url 地址改变，网页内容改变；

      +
      • +
    +

    它们的区别最明显的就是 hash 会在浏览器地址后面增加#号，而 history 可以自定义地址。

    +

    hash 模式

    使用 window.location.hash 属性及窗口的 onhashchange 事件，可以实现监听浏览器地址 hash 值变化，执行相应的 js 切换网页。下面具体介绍几个使用过程中必须理解的要点：

    +
      +

    • hash 指的是地址中#号以及后面的字符，也称为散列值。hash 也称作锚点，本身是用来做页面跳转定位的。如 http://localhost/index.html#abc，这里的#abc 就是 hash；

      +
      • +

    • 散列值是不会随请求发送到服务器端的，所以改变 hash，不会重新加载页面；

      +
      • +

    • 监听 window 的 hashchange 事件，当散列值改变时，可以通过 location.hash 来获取和设置 hash 值；

      +
      • +

    • location.hash 值的变化会直接反应到浏览器地址栏；

      +
      • +
    +

    触发 hashchange 事件的几种情况

      +

    • 浏览器地址栏散列值的变化（包括浏览器的前进、后退）会触发 window.location.hash 值的变化，从而触发 onhashchange 事件；

      +
      • +

    • 当浏览器地址栏中 URL 包含哈希如 http://www.baidu.com/#home，这时按下输入，浏览器发送http://www.baidu.com/请求至服务器，请求完毕之后设置散列值为#home，进而触发 onhashchange 事件；

      +
      • +

    • 当只改变浏览器地址栏 URL 的哈希部分，这时按下回车，浏览器不会发送任何请求至服务器，这时发生的只是设置散列值新修改的哈希值，并触发 onhashchange 事件；

      +
      • +

    • html 中<a>标签的属性 href 可以设置为页面的元素 ID 如 #top，当点击该链接时页面跳转至该 id 元素所在区域，同时浏览器自动设置 window.location.hash 属性，地址栏中的哈希值也会发生改变，并触发 onhashchange 事件；

      +
      • +
    +

    history 模式

      +

    • window.history 属性指向 History 对象，它表示当前窗口的浏览历史。当发生改变时，只会改变页面的路径，不会刷新页面。

      +
      • +

    • History 对象保存了当前窗口访问过的所有页面网址。通过 history.length 可以得出当前窗口一共访问过几个网址。

      +
      • +

    • 由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航。

      +
      • +

    • 浏览器工具栏的“前进”和“后退”按钮，其实就是对 History 对象进行操作。

      +
      • +
    +

    // 当前窗口访问过多少个网页
     history.length; // 1
     ​
     // History 对象的当前状态
     // 通常是 undefined，即未设置
     history.state; // undefined

    +
      +

    • History.back()：移动到上一个网址，等同于点击浏览器的后退键。对于第一个访问的网址，该方法无效果。

      +
      • +

    • History.forward()：移动到下一个网址，等同于点击浏览器的前进键。对于最后一个访问的网址，该方法无效果。

      +
      • +

    • History.go()：接受一个整数作为参数，以当前网址为基准，移动到参数指定的网址。如果参数超过实际存在的网址范围，该方法无效果；如果不指定参数，默认参数为 0，相当于刷新当前页面。

      +
      • +
    +

    history.back();
     history.forward();
     history.go(1); //相当于 history.forward()
     history.go(-1); //相当于 history.back()
     history.go(0); // 刷新当前页面

    +

    History.pushState()

    该方法用于在历史中添加一条记录。pushState()方法不会触发页面刷新，只是导致 History 对象发生变化，地址栏会有变化。

    +

    语法：history.pushState(object, title, url)

    +

    该方法接受三个参数，依次为：

    +
      +

    • object：是一个对象，通过 pushState 方法可以将该对象内容传递到新页面中。如果不需要这个对象，此处可以填 null。

      +
      • +

    • title：指标题，几乎没有浏览器支持该参数，传一个空字符串比较安全。

      +
      • +

    • url：新的网址，必须与当前页面处在同一个域。不指定的话则为当前的路径，如果设置了一个跨域网址，则会报错。

      +
      • +
    +

    var data = { foo: “bar” };
     history.pushState(data, “”, “2.html”);
     console.log(history.state); // {foo: “bar”}

    +

    注意：如果 pushState 的 URL 参数设置了一个新的锚点值（即 hash），并不会触发 hashchange 事件。反过来，如果 URL 的锚点值变了，则会在 History 对象创建一条浏览记录。

    +

    如果 pushState() 方法设置了一个跨域网址，则会报错。

    +

    // 报错
     // 当前网址为 http://example.com
     history.pushState(null, “”, “https://twitter.com/hello“);

    +

    History.replaceState()

    该方法用来修改 History 对象的当前记录，用法与 pushState() 方法一样。

    +

    假定当前网页是 example.com/example.html。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    history.pushState({ page: 1 }, "", "?page=1");
    // URL 显示为 http://example.com/example.html?page=1

    history.pushState({ page: 2 }, "", "?page=2");
    // URL 显示为 http://example.com/example.html?page=2

    history.replaceState({ page: 3 }, "", "?page=3");
    // URL 显示为 http://example.com/example.html?page=3

    history.back();
    // URL 显示为 http://example.com/example.html?page=1

    history.back();
    // URL 显示为 http://example.com/example.html

    history.go(2);
    // URL 显示为 http://example.com/example.html?page=3
    + +

    popstate 事件

    每当 history 对象出现变化时，就会触发 popstate 事件。

    +

    注意：

    +
      +
    • 仅仅调用 pushState()方法或 replaceState()方法 ，并不会触发该事件;
      • +
    • 只有用户点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用 History.back()、
      • +
    • History.forward()、History.go()方法时才会触发。
      • +
    • 另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。
      • +
    • 页面第一次加载的时候，浏览器不会触发 popstate 事件。
      • +
    +

    使用的时候，可以为 popstate 事件指定回调函数，回调函数的参数是一个 event 事件对象，它的 state 属性指向当前的 state 对象。

    +
    1
    2
    3
    4
    5
    window.addEventListener("popstate", function (e) {
      //e.state 相当于 history.state
      console.log("state: " + JSON.stringify(e.state));
      console.log(history.state);
    });
    + +

    总结

    hash 路由通过 window.hashchange 事件监听变化

    +

    history 路由通过 window.popstate 事件监听变化

    +
    头像头像
    WaterBoat
    正因你我生于繁华，弥足之花方显珍贵
    原创hash 和 history 路由的区别
    本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
    JavaScript6
    喜欢这篇文章的人也看了
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/2021/06/08/\344\277\241\345\256\211\345\267\245\345\205\267/01-\345\267\245\345\205\267\344\270\213\350\275\275\351\223\276\346\216\245/index.html" "b/2021/06/08/\344\277\241\345\256\211\345\267\245\345\205\267/01-\345\267\245\345\205\267\344\270\213\350\275\275\351\223\276\346\216\245/index.html" new file mode 100644 index 0000000000..b80b3cc3f5 --- /dev/null +++ "b/2021/06/08/\344\277\241\345\256\211\345\267\245\345\205\267/01-\345\267\245\345\205\267\344\270\213\350\275\275\351\223\276\346\216\245/index.html" @@ -0,0 +1,351 @@ +工具下载 | WaterBoat的博客
    加载头像
    原创

    工具下载

    发表于更新于
    长沙
    头像头像
    WaterBoat
    正因你我生于繁华，弥足之花方显珍贵
    原创工具下载
    本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
    开发工具2
    喜欢这篇文章的人也看了
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    文章目录
    1. 1. 链接
    最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/2021/06/08/\345\211\215\347\253\257/shell/01-windows-powerline/index.html" "b/2021/06/08/\345\211\215\347\253\257/shell/01-windows-powerline/index.html" new file mode 100644 index 0000000000..d15c21c4c1 --- /dev/null +++ "b/2021/06/08/\345\211\215\347\253\257/shell/01-windows-powerline/index.html" @@ -0,0 +1,413 @@ +开发工具 powershell | WaterBoat的博客
    加载头像
    原创

    开发工具 powershell

    发表于更新于
    长沙

    开发工具 powershell

    前言

    用过 oh-my-zsh 的小伙伴都知道有非常好看的主题和插件,其中我最喜欢的就是一个插件就是显示自己输入过的命令,但是在 windows 下面的命令行没有发现这个功能一直让我敲代码的快感 -1,一次偶然的机会发现 Powerline 有类似的功能以此介绍了大家

    +

    可能遇到的问题

      +

    1. Restricted 执行策略不允许任何脚本运行。

      +

      AllSigned 和 RemoteSigned 执行策略可防止 Windows PowerShell 运行没有数字签名的脚本。

      +

      本主题说明如何运行所选未签名脚本（即使在执行策略为 RemoteSigned 的情况下），还说明如何对 脚本进行签名以便您自己使用。

      +

      有关 Windows PowerShell 执行策略的详细信息，请参阅 about_Execution_Policy。

      +

      解决方案 :

      +

      管理员打开 powershell

      +
      1
      2
      get-executionpolicy
      set-executionpolicy remotesigned
      + +

      一路 Y 即可

      +
      2. +
    +

    Powerline 安装

    安装完成的效果

    +

    image-20210608093958283

    +

    Windows 终端 Powerline PowerShell

    +

    字体文件

    开始安装之前请先安装字体文件

    +

    Releases · microsoft/cascadia-code (github.com)

    +

    或

    +

    Nerd Fonts - Iconic font aggregator, glyphs/icons collection, & fonts patcher

    +

    安装步骤

      +
    1. 打开 powershell
      2. +
    2. 执行命令
      3. +
    +
    1
    2
    3
    Install-Module posh-git -Scope CurrentUser
    Install-Module oh-my-posh -Scope CurrentUser
    Install-Module -Name PSReadLine -Scope CurrentUser -Force -SkipPublisherCheck
    + +

    Posh-Git 将 Git 状态信息添加到提示，并为 Git 命令、参数、远程和分支名称添加 tab 自动补全。

    +

    Oh-My-Posh 为 PowerShell 提示符提供主题功能。

    +

    image-20210608092105902

    +
      +
    1. 全部安装完成之后导入配置
      2. +
    +

    输入 notepad $PROFILE 打开配置文件

    +

    image-20210608092128256

    +

    点击是然后输入下面的代码

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    Import-Module posh-git
    Import-Module oh-my-posh
    Set-PoshPrompt cert #设置主题  如果 Set-PoshPrompt 报错就使用 Set-Theme 设置主题
    Set-PSReadLineOption -PredictionSource History # 设置预测文本来源为历史记录


    Set-PSReadlineKeyHandler -Key Tab -Function Complete # 设置 Tab 键补全
    Set-PSReadLineKeyHandler -Key "Ctrl+d" -Function MenuComplete # 设置 Ctrl+d 为菜单补全和 Intellisense
    Set-PSReadLineKeyHandler -Key "Ctrl+z" -Function Undo # 设置 Ctrl+z 为撤销
    Set-PSReadLineKeyHandler -Key UpArrow -Function HistorySearchBackward # 设置向上键为后向搜索历史记录
    Set-PSReadLineKeyHandler -Key DownArrow -Function HistorySearchForward # 设置向下键为前向搜索历史纪录
    + +

    新版配置

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    Import-Module posh-git
    oh-my-posh init pwsh --config "$env:POSH_THEMES_PATH\material.omp.json" | Invoke-Expression
     #设置主题  如果 Set-PoshPrompt 报错就使用 Set-Theme 设置主题
    Set-PSReadLineOption -PredictionSource History # 设置预测文本来源为历史记录


    Set-PSReadlineKeyHandler -Key Tab -Function Complete # 设置 Tab 键补全
    Set-PSReadLineKeyHandler -Key "Ctrl+d" -Function MenuComplete # 设置 Ctrl+d 为菜单补全和 Intellisense
    Set-PSReadLineKeyHandler -Key "Ctrl+z" -Function Undo # 设置 Ctrl+z 为撤销
    Set-PSReadLineKeyHandler -Key UpArrow -Function HistorySearchBackward # 设置向上键为后向搜索历史记录
    Set-PSReadLineKeyHandler -Key DownArrow -Function HistorySearchForward # 设置向下键为前向搜索历史纪录
    + +
      +
    1. 然后重启 powershell
      2. +
    +

    image-20210608092419436

    +

    发现字体不对,此时右键标题栏选择属性–>字体修改之前拿到的字体文件

    +

    image-20210608092541466

    +

    image-20210608092548138

    +

    恢复正常

    +

    在 vscode 里面使用 powershell

      +
    • 在 vscode 中打开 powershell 你会发现又出现了乱码或者显示不正确,那么不用怀疑,一定是字体问题
      • +
    • 打开 setting 搜索 terminal.integrated.fontFamily 修改值为 Cascadia Code PL 即可
      • +
    +

    image-20210608093355960

    +

    主题预览

    1
    Get-PoshThemes #获取主题
    + +

    Themes | Oh My Posh

    +

    添加右键菜单

    win+R + regedit 打开注册表 进入计算机\HKEY_CLASSES_ROOT\Directory\Background\shell

    +

    image-20220326171541661

    +

    添加在当前位置打开 wt

    +
    1
    2
    "C:\Program Files\WindowsApps\Microsoft.WindowsTerminal_1.11.3471.0_x64__8wekyb3d8bbwe\wt.exe" /d "%V\."
    # 路径
    + +

    参考

    Windows 终端 Powerline 设置 | Microsoft Docs

    +

    PSReadLine Module - PowerShell | Microsoft Docs

    +
    头像头像
    WaterBoat
    正因你我生于繁华，弥足之花方显珍贵
    原创开发工具 powershell
    本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
    开发工具2 shell1
    喜欢这篇文章的人也看了
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/2021/06/10/\345\211\215\347\253\257/React/03-React-hooks/index.html" "b/2021/06/10/\345\211\215\347\253\257/React/03-React-hooks/index.html" new file mode 100644 index 0000000000..040c18585d --- /dev/null +++ "b/2021/06/10/\345\211\215\347\253\257/React/03-React-hooks/index.html" @@ -0,0 +1,431 @@ +React-hooks | WaterBoat的博客
    加载头像
    原创

    React-hooks

    发表于更新于
    长沙

    React-hooks

    什么是 hooks?

    Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

    +

    我们先来看一个例子,这是传统的 class 组件的

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    import React from "react";

    class index extends React.component {
      state = {
        msg: "你好",
      };
      updateMsg = () => {
        this.setState({
          msg: "真好",
        });
      };
      render() {
        <div>
          <span>{this.state.msg}</span>
          <button onClick={this.updateMsg}>点击修改值</button>
        </div>;
      }
    }
    export default index;
    + +

    将上面的例子转换成 hooks 的写法

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import { useState } from "react";
    function index() {
      let [msg,setMsg] = useState("你好)
      return (
        <div>
          <span>{msg}</span>
          <button onClick={()=>updateMsg("真好")}>点击修改值</button>
        </div>
      );
    }
    + +

    仔细感受一下异同

    +

    解决的问题

      +
    • 在组件之间复用状态逻辑很难,可能要用到 render props 和高阶组件，React 需要为共享状态逻辑提供更好的原生途径，Hook 使你在无需修改组件结构的情况下复用状态逻辑
      • +
    • 复杂组件变得难以理解，Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据）
      • +
    • 难以理解的 class,包括难以捉摸的this
      • +
    +

    注意事项

      +
    • 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
      • +
    • 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用
      • +
    +

    hooks 规则校验插件

    eslint-plugin-react-hooks - npm (npmjs.com)

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 你的 ESLint 配置
    {
      "plugins": [
        // ...
        "react-hooks"
      ],
      "rules": {
        // ...
        "react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
        "react-hooks/exhaustive-deps": "warn" // 检查 effect 的依赖
      }
    }
    + +

    useState 声明状态和设置状态

    state 只在组件首次渲染的时候被创建。在下一次重新渲染时，useState 返回给我们当前的 state。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    import React, { useState } from "react";

    function UseState() {
      //  [state, setState]
      // 创建一个名为 count 的 state 并且设置初始化的值为 0,通过 setCount(值) 来修改 count 的值
      let [count, setCount] = useState(0);

      return (
        <div className="use-state" style={{ border: "1px solid pink" }}>
          <h1>这里是 UseState 组件</h1>
          <div>{count}</div>
          <button onClick={() => setCount(count + 1)}>点击累加</button>
        </div>
      );
    }

    export default UseState;
    + +

    useReducer 替代 useState

      +
    • useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法
      • +
    • 在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等
      • +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    import React, { useReducer } from "react";

    const initialState = { count: 0 };
    function reducer(state, action) {
      switch (action.type) {
        case "add":
          return { count: state.count + 1 };
        case "sub":
          return { count: state.count - 1 };
        default:
          return { ...state };
      }
    }
    export default function UseReducer() {
      // reducer 函数返回值  initialState 初始化值
      const [state, dispatch] = useReducer(reducer, initialState);

      return (
        <div>
          <h1>useReducer</h1>
          <span>{state.count}</span>
          <br />
          <button onClick={() => dispatch({ type: "add" })}>+</button>
          <button onClick={() => dispatch({ type: "sub" })}>-</button>
        </div>
      );
    }
    + +

    惰性初始化

    +
    {17,1-3}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    function init() {
      return initialState;
    }
    const initialState = { count: 0 };
    function reducer(state, action) {
      switch (action.type) {
        case "add":
          return { count: state.count + 1 };
        case "sub":
          return { count: state.count - 1 };
        default:
          return { ...state };
      }
    }
    export default function UseReducer() {
      // reducer 函数返回值  initialState 初始化值
      const [state, dispatch] = useReducer(reducer, initialState, init);

      return (
        <div>
          <h1>useReducer</h1>
          <span>{state.count}</span>
          <br />
          <button onClick={() => dispatch({ type: "add" })}>+</button>
          <button onClick={() => dispatch({ type: "sub" })}>-</button>
        </div>
      );
    }
    + +

    useContext 跨越关系的传值

      +
    • 接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值
      • +
    • 当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定
      • +
    • 当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值
      • +
    • useContext(MyContext) 相当于 class 组件中的 static contextType = MyContext 或者 <MyContext.Consumer>
      • +
    • useContext(MyContext) 只是让你能够读取 context 的值以及订阅 context 的变化。你仍然需要在上层组件树中使用 <MyContext.Provider> 来为下层组件提供 context
      • +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    import React, { useContext } from "react";
    // 1
    const MsgContext = React.createContext("你好");
    export default function UseContext() {
      return (
        <div>
          <h1>useContext</h1>
          {/* 2 */}
          <MsgContext.Provider value={"你好"}>
            <Son></Son>
          </MsgContext.Provider>
        </div>
      );
    }

    function Son() {
      // 3
      const context = useContext(MsgContext);
      return (
        <div>
          <h1>子组件</h1>
          {/* 4 */}
          <span>{context}</span>
        </div>
      );
    }
    + +

    useEffect 模拟生命周期函数

    跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    import { useState, useEffect } from "react";

    const UseEffect = () => {
      let [count, setCount] = useState(0);

      useEffect(() => {
        // componentDidMont
        console.log("数据渲染了");
        // componentDidUpdate
        console.log("数据更新了");
        // componentWillUmount
        return () => {
          console.log("组件卸载了");
        };
      });
      return (
        <div className="use-state" style={{ border: "1px solid pink" }}>
          <h1>这里是 UseEffect 组件</h1>
          <div>{count}</div>
          <button onClick={() => setCount(count + 1)}>点击累加</button>
        </div>
      );
    };

    export default UseEffect;
    + +

    useEffect 会在每次渲染都执行.默认情况下，它在第一次渲染之后和每次更新之后都会执行。React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。

    +

    useEffect 监听 state 的变化

    如同 vue 里面的 watch 一样 react hooks 也提供了监听变量变化的功能

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    import { useState, useEffect } from "react";

    const UseEffect = () => {
      let [count, setCount] = useState(0);

      useEffect(() => {
        // componentDidMont
        console.log("数据渲染了");
        // componentDidUpdate
        console.log("数据更新了");
        // componentWillUmount
        return () => {
          console.log("组件卸载了");
        };
      });
      // 监听 count 更新
      useEffect(() => {
        console.log("count 更新了", count);
      }, [count]);

      return (
        <div className="use-state" style={{ border: "1px solid pink" }}>
          <h1>这里是 UseEffect 组件</h1>
          <div>{count}</div>
          <button onClick={() => setCount(count + 1)}>点击累加</button>
        </div>
      );
    };

    export default UseEffect;
    + +

    useEffect 模拟 componentDidMount

    1
    2
    3
    4
    useEffect(() => {
      console.log("UseEffect.jsx 初始化");
      // 没有监听的 state
    }, []);
    + +

    useEffect 模拟 componentDidUpdate

    1
    2
    3
    4
    5
    6
    useEffect(() => {
      console.log("UseEffect.jsx conut数据变化了");
    }, [count]);
    useEffect(() => {
      console.log("UseEffect.jsx 数据变化了");
    });
    + +

    useEffect 模拟 componentWillUnmount

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    import React, { useState, useEffect } from "react";

    export default function UseEffect() {
      let [count, setCount] = useState(0);
      let [flag, setFlag] = useState(true);

      return (
        <div>
          <h1>useEffect</h1>
          <div>{count}</div>
          <button onClick={() => setCount(count + 1)}>点击累加</button>
          <button onClick={() => setFlag(!flag)}>显示/隐藏</button>
          {flag && <Son></Son>}
        </div>
      );
    }

    function Son() {
      useEffect(() => {
        return () => {
          console.log("useEffect.jsx 组件卸载了");
        };
      }, []);
      return (
        <div>
          <h1>子组件</h1>
        </div>
      );
    }
    + +

    useLaoutEffect 在视图更新前执行

    useLayoutEffect 和 useEffect 两个方法的作用和使用方式都是一样的，都是用来处理副作用代码的，它们之间唯一的区别就是回调函数的执行时机不同。

    +

    qJ9LwV.png

    +

    useEffect 在组件视图更新完成后执行，组件状态发生变化 -> 比较状态差异 -> 视图更新 -> useEffect

    +

    qJ9qe0.png

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    import { useLayoutEffect, useRef, useState } from "react";

    function LayoutEffect() {
      const [isShow, setIsShow] = useState(false);
      const divRef = useRef<HTMLDivElement>(null);
      // 此处如果使用 useEffect 就是出现元素闪烁问题
      // 就是元素先出现在原始位置, 再出现在目标位置
      // useEffect 是先渲染DOM 再执行
      // useLayoutEffect 是先执行, 再渲染DOM
      useLayoutEffect(() => {
        if (!divRef.current) return;
        divRef.current.style.top = "100px";
      }, [isShow]);
      return (
        <>
          <h1>useLayoutEffect</h1>
          <button onClick={() => setIsShow(!isShow)}>button</button>
          {isShow ? (
            <div ref={divRef} style={{ position: "relative" }}>
              useLayoutEffect
            </div>
          ) : null}
        </>
      );
    }
    export default LayoutEffect;
    + +

    useRef 获取 Dom 元素

      +
    • useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）
      • +
    • 返回的 ref 对象在组件的整个生命周期内保持不变
      • +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    import React, { useRef } from "react";

    export default function UseRec() {
      const h1Ref = useRef();
      const test = () => {
        console.dir(h1Ref.current);
        h1Ref.current.innerText = "useRef 被修改了";
      };
      return (
        <div>
          <h1 ref={h1Ref}>useRef</h1>
          <button onClick={test}>获取 h1</button>
        </div>
      );
    }
    + +

    ref 转发 让父元素可以使用子元素的 ref

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    import React, { forwardRef, useRef } from "react";
    const ForwardRef = () => {
      return (
        <div>
          <h1>ForwardRef</h1>
          <Father></Father>
        </div>
      );
    };
    const Father = () => {
      let inputRef = useRef();
      const changeInputValue = () => {
        inputRef.current.value = "Hello";
      };
      return (
        <div>
          <button onClick={changeInputValue}>我是 Father </button>
          <Son ref={inputRef}></Son>
        </div>
      );
    };
    const Son = forwardRef((props, ref) => {
      // let inputRef = useRef();
      const changeInputValue = () => {
        ref.current.value = "Hello";
      };
      return (
        <div>
          <input type="text" ref={ref} />
          <button onClick={changeInputValue}>我是 Son </button>
        </div>
      );
    });

    export default ForwardRef;
    + +

    memo 优化组件

    父组件更新引起了子组件的不必要更新，因为子组件本身是没有任何变化的是没有必要更新的。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    // src/App.js
    import { useEffect, useState, memo } from "react";

    function ShowName({ name }: any) {
      useEffect(() => {
        console.log("ShowName rendered");
      });
      return <div>{name}</div>;
    }
    // memo 方法内部采用的是浅层比较，比较基本数据类型的值是否相同，比较引用类型是否为相同的引用地址。
    // memo 方法的第二个参数即为比较函数，可以通过它解决以上问题。比较函数的第一个参数为 prevProps，比较函数的第二个参数为 nextProps, 比较函数返回 true 不进行渲染，比较函数返回 false 组件重新渲染。
    function compare(prev: any, cur: any) {
      return prev.obj.sex === cur.obj.sex;
    }

    const MemoShowName = memo(ShowName, compare);

    function Memo() {
      const [index, setIndex] = useState(0);
      const [name] = useState("张三");
      useEffect(() => {
        const timer = setInterval(() => {
          setIndex((prev) => prev + 1);
        }, 1000);
        return () => clearInterval(timer);
      }, []);
      return (
        <>
          <h1>Memo</h1>
          <p>{index}</p>
          <MemoShowName name={name} obj={{ sex: "男" }} />
        </>
      );
    }
    export default Memo;
    + +

    useMemo 对值进行缓存

    通过 useMemo 方法可以对组件中的值进行缓存，就是说在每次组件重新渲染时都返回相同的值，也可以指定哪些状态发生改变时重新计算该值。

    +

    useMemo 有助于避免在每个渲染上进行昂贵的计算，提升组件性能。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    import { useEffect, useMemo, useState } from "react";

    function App() {
      const [number, setNumber] = useState(0);
      const [dark, setDark] = useState(false);
      const double = useMemo(() => {
        return slowFunction(number);
      }, [number]);
      const styles = useMemo(() => {
        return {
          background: dark ? "black" : "white",
          color: dark ? "white" : "black",
        };
      }, [dark]);
      useEffect(() => {
        console.log("styles");
      }, [styles]);
      return (
        <div>
          <input
            type="number"
            value={number}
            onChange={(event) => setNumber(event.target.value)}
          />
          <div style={styles} onClick={() => setDark(!dark)}>
            {double}
          </div>
        </div>
      );
    }

    function slowFunction(n) {
      for (let i = 0; i < 1000000000; i++) {}
      return n * 2;
    }

    export default App;
    + +

    useCallback 缓存函数

    通过 useCallback 方法可以缓存函数，使用组件每次重新渲染都返回相同的函数实例，也可以指定当某个状态发生变化后返回新的函数实例。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    import { useCallback, useEffect, useState } from "react";

    export default function UseCallBack() {
      const [number, setNumber] = useState(1);
      const [dark, setDark] = useState(false);
      const styles = {
        background: dark ? "black" : "white",
        color: dark ? "white" : "black",
      };
      // 缓存
      const getItems = useCallback(() => {
        return [number, number + 1, number + 2];
      }, [number]);
      return (
        <div style={styles}>
          <h1>useCallback</h1>
          <input
            type="number"
            value={number}
            onChange={() => setNumber((prev) => prev + 1)}
          />
          <button onClick={() => setDark((dark) => !dark)}>button</button>
          <List getItems={getItems} />
        </div>
      );
    }

    function List({ getItems }) {
      const [items, setItems] = useState([]);

      useEffect(() => {
        setItems(getItems());
        console.log("update items");
      }, [getItems]);

      return (
        <div>
          {items.map((item) => (
            <p key={item}>{item}</p>
          ))}
        </div>
      );
    }
    + +

    useImperativeHandle 子向父传值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    import { useRef, forwardRef, useImperativeHandle, useState } from "react";

    let Message = forwardRef((props: any, ref: any) => {
      const [text, setText] = useState("");
      const inputRef = useRef<HTMLInputElement>(null);
      useImperativeHandle(ref, () => {
        return {
          getText() {
            return text;
          },
          input: inputRef.current,
        };
      });
      return (
        <input
          ref={inputRef}
          type="text"
          value={text}
          onChange={(event) => setText(event.target.value)}
        />
      );
    });
    export default function UseImperativeHandle() {
      const messageRef = useRef<any>(null);
      const onClickHandler = () => {
        console.log(messageRef.current.getText());
        console.log(messageRef.current.input);
      };
      return (
        <>
          <h1>UseImperativeHandle</h1>
          <Message ref={messageRef}></Message>
          <button onClick={onClickHandler}>button</button>
        </>
      );
    }
    + +

    一些小技巧

    手动更新组件

    1
    2
    3
    4
    import { useCallback, useState } from "react";
    let [, updateState] = useState({});
    const forceUpdate = useCallback(() => updateState({}), []);
    <button onClick={() => forceUpdate}>更新组件</button>;
    +
    头像头像
    WaterBoat
    正因你我生于繁华，弥足之花方显珍贵
    原创React-hooks
    本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
    React5
    喜欢这篇文章的人也看了
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/2021/06/10/\345\211\215\347\253\257/React/04-React\345\270\270\347\224\250\345\272\223/index.html" "b/2021/06/10/\345\211\215\347\253\257/React/04-React\345\270\270\347\224\250\345\272\223/index.html" new file mode 100644 index 0000000000..d8347a74e0 --- /dev/null +++ "b/2021/06/10/\345\211\215\347\253\257/React/04-React\345\270\270\347\224\250\345\272\223/index.html" @@ -0,0 +1,398 @@ +React-常用库 | WaterBoat的博客
    加载头像
    原创

    React-常用库

    发表于更新于
    长沙

    React-常用库

    5 个用于 React 项目的延迟加载库

    1. react-lazyload

    react-lazyload 可用于延迟加载 React 应用程序中的任何类型的组件。它是 React 社区中最流行的延迟加载库之一，支持装饰器和服务器端渲染。其特点如下：

    +
      +
    • 具有一组属性，使用户能够自定义组件的功能。
      • +
    • 提供诸如 forceCheck 之类的实用程序来显示隐藏的内容，这些内容在没有调整大小或滚动事件的情况下变得可见。
      • +
    • 开箱即用支持水平延迟加载。
      • +
    • 只为所有延迟加载的组件实现两个事件监听器，进一步优化性能。
      • +
    +

    GitHub：github.com/twobin/reac…

    +

    2. react-lazy-load

    react-lazy-load 是一个 React 组件，可用于以可预测的方式延迟加载内容。它相对较快，具有最小的包大小（缩小为 6KB）。其特点如下：

    +
      +

    • 自动检测滚动容器，例如带有滚动条的

      +

      ，因此甚至可以在滚动容器内使用。

      +
      • +

    • 允许用户设置阈值以从视口的任何一侧开始内容加载，使用诸如 offsetVertical、offsetHorizontal、offsetTop、offsetBottom 等属性。

      +
      • +

    • 在 IE8+ 中工作。

      +
      • +

    • 具有对防抖功能的内置支持。

      +
      • +
    +

    但是，与 react-lazyload 库相比，该组件的 props 数量非常有限，因此提供的灵活性较低。主要缺点是它不允许用户为延迟加载的组件应用占位符。

    +

    GitHub：github.com/loktar00/re…

    +

    3. react-lazy-load-image-component

    react-lazy-load-image-component 是一个易于使用的库，用于延迟加载任何类型的组件。它支持 IntersectionObserver，可以确定元素何时离开和进入视口。其特点如下：

    +
      +
    • 这个库最重要的特性是它的 HOC，trackWindowScroll，它允许组件跟踪窗口滚动位置，而无需为每个元素使用滚动或调整大小事件侦听器。
      • +
    • 默认情况下，延迟加载的组件的偏移量为 100 像素。
      • +
    • 内置的可见效果（例如模糊、黑白和不透明过渡）有助于改善用户体验。
      • +
    • 服务器端渲染兼容。
      • +
    • 支持 TypeScript 声明。
      • +
    • 占位符默认提供与图像或组件相同的大小，但可以自定义。
      • +
    +

    Github：github.com/Aljullu/rea…

    +

    4. react-lazy-images

    react-lazy-images 是一个灵活的库，它提供组件和实用程序来延迟加载 React 中的图像。它使用 render props.为调用者提供了完全的表现控制。其特点如下：

    +
      +
    • 使用 IntersectionObserver 和 polyfill 来提高性能。
      • +
    • 为禁用 SEO 和 JavaScript 的环境提供后备策略。
      • +
    • 支持服务器端渲染。
      • +
    • 支持背景图像并与水平滚动一起使用。
      • +
    +

    GitHub：github.com/fpapado/rea…

    +

    5. react-lazy-blur-image

    react-lazy-blur-image 是将图像延迟加载到低分辨率占位符中的理想库。默认情况下，该组件显示一个轻量级的灰色占位符，并在组件即将到达视口时替换为实际占位符。仅当实际图像完全延迟加载时，才会替换此占位符。其特点如下：

    +
      +
    • 它为延迟加载图像提供了一种简约的方法，提供了完美的用户体验和性能平衡。
      • +
    • 该组件只接受两个自定义属性：**src **和 style。
      • +
    • 组件可以使用 **styled-components **从占位符转换图像。
      • +
    +

    GitHub：github.com/meienberger…

    +

    https://juejin.cn/post/7077368722125488141

    +
    头像头像
    WaterBoat
    正因你我生于繁华，弥足之花方显珍贵
    原创React-常用库
    本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
    React5
    喜欢这篇文章的人也看了
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/2021/09/29/\345\211\215\347\253\257/Nuxt/01-Nuxt/index.html" "b/2021/09/29/\345\211\215\347\253\257/Nuxt/01-Nuxt/index.html" new file mode 100644 index 0000000000..2a928388f7 --- /dev/null +++ "b/2021/09/29/\345\211\215\347\253\257/Nuxt/01-Nuxt/index.html" @@ -0,0 +1,699 @@ +Nuxt 笔记 | WaterBoat的博客
    加载头像
    原创

    Nuxt 笔记

    发表于更新于
    长沙

    Nuxt 笔记

    Nuxt 是什么?

    Nuxt.js 是一个基于 Vue.js 的通用应用框架。

    +

    通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。

    +

    我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。

    +

    Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

    +

    除此之外，我们还提供了一种命令叫：nuxt generate ，为基于 Vue.js 的应用提供生成对应的静态站点的功能。

    +

    我们相信这个命令所提供的功能，是向开发集成各种微服务（Microservices）的 Web 应用迈开的新一步。

    +

    作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。

    +

    目录结构

    Nuxt.js 的默认应用目录架构提供了良好的代码分层结构，适用于开发或大或小的应用。当然，你也可以根据自己的偏好组织应用代码。

    +

    pages 目录

    Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由配置

    +

    资源(assets)目录

    资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。

    +
      +
    1. assets 目录，会被 webpack 打包
      2. +
    2. 访问路径，~/assets/路径
      3. +
    3. 最终是使用 require(路径)
      4. +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    <template>
      <div>
        <img src="~assets/img/芭芭拉.gif" alt="" />
        <img src="~/assets/img/芭芭拉.gif" alt="" />
        <div class="box">
          <div class="box1"></div>
          <div class="box2"></div>
        </div>
        <div class="inline" :style="keli"></div>
      </div>
    </template>

    <script>
    const keli = require(`~/assets/img/可莉.gif`);
    export default {
      data() {
        return {
          keli: `background: url(${keli}) no-repeat;`,
        };
      },
    };
    </script>

    <style>
    img {
      width: 200px;
    }
    .box1 {
      display: inline-block;
      width: 200px;
      height: 200px;
      background: url(~assets/img/甘雨.gif) no-repeat;
      background-size: contain;
    }
    .box2 {
      display: inline-block;
      width: 200px;
      height: 200px;
      background: url(~/assets/img/甘雨.gif) no-repeat;
      background-size: contain;
    }
    .inline {
      width: 200px;
      height: 200px;
      background-size: contain !important;
    }
    </style>
    + +

    组件(components)目录

    组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。

    +

    布局(layouts)目录

    布局目录 layouts 用于组织应用的布局组件。
    若无额外配置，该目录不能被重命名

    +

    默认的布局文件是 layouts/default.vue

    +

    布局文件中,使用 <Nuxt />可以看成 vue-router 的占位,把路由匹配到页面组件放到的该位置

    +

    404 页面

    +

    中间件目录(middleware)目录

    middleware 目录用于存放应用的中间件。

    +

    插件(plugins)目录

    插件目录 plugins 用于组织那些需要在 根 vue.js 应用 实例化之前需要运行的 Javascript 插件。

    +

    静态文件(static)目录

    静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。

    +

    举个例子: /static/robots.txt 映射至 /robots.txt

    +
      +
    1. 该目录下的文件，不会被 webpack 打包
      2. +
    2. 访问时直接写 static 目录下的文件路径， (譬如) /imgs/xxx
      3. +
    3. 无论是 assets 还是 static 使用行内样式加载图片资源时，全部统一写法： require(~/静态资源目录/路径)
      4. +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    <template>
      <div>
        <img src="/img/芭芭拉.gif" alt="" />
        <img src="/img/芭芭拉.gif" alt="" />
        <div class="box">
          <div class="box1"></div>
          <div class="box2"></div>
        </div>
        <div class="inline" :style="keli"></div>
      </div>
    </template>

    <script>
    // const keli = require(`~img/可莉.gif`)
    // 尽量使用英文文件名
    const keli = require("~/static/img/1.gif");
    export default {
      data() {
        return {
          keli: `background: url(${keli}) no-repeat;`,
        };
      },
    };
    </script>

    <style>
    img {
      width: 200px;
    }
    .box1 {
      display: inline-block;
      width: 200px;
      height: 200px;
      background: url(/img/甘雨.gif) no-repeat;
      background-size: contain;
    }
    .box2 {
      display: inline-block;
      width: 200px;
      height: 200px;
      background: url(/img/甘雨.gif) no-repeat;
      background-size: contain;
    }
    .inline {
      width: 200px;
      height: 200px;
      background-size: contain !important;
    }
    </style>
    + +

    Store 目录

    store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。

    +

    nuxt.config.js 文件

    nuxt.config.js 文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。

    +

    package.json 文件

    package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。

    +

    别名

    别名 目录
    ~ 或 @ srcDir
    ~~ 或 @@ rootDir
    默认情况下，srcDir 和 rootDir 相同。

    +

    提示: 在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用 ~/assets/your_image.png 和 ~/static/your_image.png 方式。

    +

    路由

    Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

    +

    :::tip

    +

    要在页面之间使用路由，我们建议使用nuxt-link 标签。

    +

    :::

    +

    基础路由

    假设 pages 的目录结构如下：

    +
    1
    2
    3
    4
    5
    pages/
    --| user/
    -----| index.vue
    -----| _id.vue
    --| index.vue
    + +

    那么，Nuxt.js 自动生成的路由配置如下：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    router: {
      routes: [
        {
          name: "index",
          path: "/",
          component: "pages/index.vue",
        },
        {
          name: "user",
          path: "/user",
          component: "pages/user/index.vue",
        },
        {
          name: "user-one",
          path: "/user/?id",
          component: "pages/user/_id.vue",
        },
      ];
    }
    + +

    路由传参

    很多时候我们需要在路由上传参数，路由上的参数有两种

    +
      +
    • 路径参数：/about/100
      • +
    • 查询参数: /about?id=100&name=李四
      • +
    +
    方式 1：查询参数
    + + + + + + + + + + + + + + + + + +
    路径对应文件页面中接受
    /about?hello=100pages/about.vue$route.query.hello
    /about/?hello=123&jack=456pages/about.vue$route.query.hello/$route.query.jack
    +
    方式 2：路径参数
    + + + + + + + + + + + + + + + + + + + + + + +
    路径对应文件页面中接受
    /about/123/goods/_id.vue$route.params.id
    /goods/100/goods/_i.vue$route.params.i
    /goods/100/200/goods/_cid/_gid$route.params.cid/$route.params.gid
    +

    1

    +

    目录结构

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ├─pages
    |   ├─index.vue
    |   ├─user.vue
    |   ├─user
    |   |  ├─child1.vue
    |   |  └child2.vue
    |   ├─about
    |   |   ├─_id.vue
    |   |   ├─_cid
    |   |   |  └_gid.vue
    ├─layouts
    |    └default.vue
    + +

    pages/about/_.id.vue

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <template>
      <div>
        <h1>查询参数</h1>
        <h2>{{ $route.query.hello }}</h2>
        <h2>{{ $route.query.jack }}</h2>
        <h1>路径参数</h1>
        <h2>{{ $route.params.id }}</h2>
      </div>
    </template>
    + +

    pages/about/*_cid/_*gid.vue

    +
    1
    2
    3
    4
    5
    6
    7
    <template>
      <div>
        <h1>路径参数</h1>
        <h2>{{ $route.params.cid }}</h2>
        <h2>{{ $route.params.gid }}</h2>
      </div>
    </template>
    + +

    layouts/default.vue

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <template>
      <div>
        <nuxt-link to="/">Home</nuxt-link>
        <nuxt-link to="/user">user</nuxt-link>
        <br />
        <nuxt-link to="/about/123">路径参数/about/123</nuxt-link>
        <nuxt-link to="/about/123/456">路径参数/about/123/456</nuxt-link>
        <nuxt-link to="/about/?hello=123&jack=456"
          >查询参数/about/?hello=123&jack=456</nuxt-link
        >
        <!-- 显示 pages/index.vue -->
        <Nuxt></Nuxt>
      </div>
    </template>
    + +
    总结：

    使用区别：

    +
      +
    • 查询参数? 不利于 SEO, 百度再抓取我们页面时，如果用? 只会抓取一个页面
        +
      • content/?id=1
        • +
      • content/?id=2
        • +
      • content/?id=3
        • +
      +
      • +
    • 推荐使用路径参数
      • +
    +

    路由参数校验

    Nuxt.js 可以让你在动态路由组件中定义参数校验方法。

    +

    pages/users/_id.vue

    +
    1
    2
    3
    4
    5
    6
    export default {
      validate({ params }) {
        // 必须是number类型
        return /^\d+$/.test(params.id);
      },
    };
    + +

    如果校验方法返回的值不为 true或Promise中 resolve 解析为false或抛出 Error ， Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面。

    +

    页面校验 API。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // pages/index.vue
    <template>
      <div>
        <h1>home</h1>
        <nuxt-link to="/user/123">/user/123</nuxt-link>
      </div>
    </template>

    // pages/user/_id.vue
    <template>
      <div>
        <h1>传过来的参数{{ $route.params.id }}</h1>
      </div>
    </template>
    + +

    嵌套路由

    你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。

    +

    创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。

    +

    :::warning

    +

    别忘了在父组件(.vue文件) 内增加 <nuxt-child/> 用于显示子视图内容。

    +

    :::

    +

    一个小案例

    +

    1

    +

    目录结构

    +
    1
    2
    3
    4
    5
    6
    7
    8
    ├─pages
    |   ├─index.vue
    |   ├─user.vue
    |   ├─user
    |   |  ├─child1.vue
    |   |  └child2.vue
    ├─layouts
    |    └default.vue
    + +

    pages/index.vue

    +
    1
    2
    3
    4
    5
    <template>
      <div>
        <h1>index首页</h1>
      </div>
    </template>
    + +

    pages/user.vue

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <template>
      <div>
        <h1>user</h1>
        <nuxt-link to="/user/child1">child1</nuxt-link>
        <nuxt-link to="/user/child2">child2</nuxt-link>
        <!-- 注意父级 user 写上 nuxt-child 虽然 user/index.vue 也能匹配路由 /user 但是需要 user.vue 在父级才可以使用 nuxt-child -->
        <nuxt-child></nuxt-child>
      </div>
    </template>
    + +

    pages/child1.vue pages/child2.vue

    +
    1
    2
    3
    <template>
      <div><h1>child1</h1></div>
    </template>
    + +

    layouts/default.vue

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <template>
      <div>
        <nuxt-link to="/">Home</nuxt-link>
        <nuxt-link to="/user">user</nuxt-link>
        <!-- 显示 pages/index.vue -->
        <Nuxt></Nuxt>
      </div>
    </template>

    <style>
    html,
    body {
      text-align: center;
    }
    </style>
    + +

    未知嵌套深度的动态嵌套路由

    如果您不知道 URL 结构的深度，您可以使用_.vue动态匹配嵌套路径。这将处理与更具体请求不匹配的情况。

    + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    路由文件
    /index.vue
    /peoplepeople/index.vue
    /about/132about/_id.vue
    /any_.vue
    /any/woc_.vue
    +

    处理 404 页面，现在符合_.vue页面的逻辑

    +

    脚手架配置

    nuxt.config.js

    +
    1
    components: true; // 自动在页面组件中导入components目录下的组件
    + +

    预处理器配置

    Nuxt - Configuration (nuxtjs.org)

    +

    全局 css 变量

    1
    yarn add @nuxtjs/style-resources
    + +
    1
    2
    3
    4
    5
    6
    7
    8

    buildModules: [
        '@nuxtjs/style-resources',
      ],

      styleResources: {
         less:['~/assets/less/xxx.less']   // 全局变量
      }
    + +

    配置 404 页面

    在 layouts 目录下创建 error.vue 文件即可匹配不存在的路由

    +

    配置 Loading 组件

    components/LoadingBar.vue

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <template lang="html">
      <div class="loading-page" v-if="loading">
        <p>Loading...</p>
      </div>
    </template>

    <script>
    export default {
      data: () => ({
        loading: false,
      }),
      methods: {
        start() {
          this.loading = true;
        },
        finish() {
          this.loading = false;
        },
      },
    };
    </script>

    <style scoped>
    .loading-page {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.8);
      text-align: center;
      padding-top: 200px;
      font-size: 30px;
      font-family: sans-serif;
    }
    </style>
    + +

    nuxt.config.js

    +
    1
    2
    3
    export default {
      loading: "~/components/LoadingBar.vue",
    };
    + +

    pages/index.js 使用

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <template>
      <div id="box">
        <h1>index首页</h1>
      </div>
    </template>

    <script>
    export default {
      mounted() {
        // DOM 更新完毕之后调用 loading
        this.$nextTick(() => {
          // 调用 loading 中的方法,记得在 nux.config.js 里面配置
          this.$nuxt.$loading.start();
          setTimeout(() => this.$nuxt.$loading.finish(), 3000);
        });
      },
    };
    </script>

    <style>
    html,
    body {
      height: 100%;
    }

    #box {
      width: 800px;
      height: 500px;
      margin: 0 auto;
      border: 1px solid;
      text-align: center;
    }
    </style>
    + +

    asyncData 处理异步数据

    此方法会在服务端获取并渲染数据

    +

    asyncData 方法会在组件(pages 组件)每次加载之前被调用

    +

    在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据并返回给当前组件。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <template>
      <div>
        <h1>{{ip}}</h1>
        <ul>
          <li v-for="item in data" :key="item.id">{{item.title}}</li>
        </ul>
      </div>
      </ul>
    </template>

    <script lang="ts">
    import Vue from 'vue'
    export default Vue.extend({
      async asyncData(context) {
        const ip = await context.$axios.$get('http://icanhazip.com')
        const { data } = await context.$axios.$get('https://cnodejs.org/api/v1/topics', {
          params: {
            page: 1,
            tab: 'ask',
          },
        })
        console.log(context)
        // console.log(data)
        return { ip,data }
      },
    })
    </script>

    <style lang="scss">
    $red: red;
    div {
      color: $red;
    }
    </style>
    + +

    fetch 处理数据

    fetch 方法用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据。

    +

    如果页面组件设置了 fetch 方法，它会在组件每次加载前被调用（在服务端或切换至目标路由之前）。

    +

    开发中会经常调用接口，返回的数据需要公共使用，需要把数据存到 vuex 上，可以在 fetch 中完成

    +

    :::warning

    +

    您无法在内部使用this获取组件实例，fetch是在组件初始化之前被调用

    +

    :::

    +

    pages/index.vue

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <template>
      <div class="box">
        <h1>index</h1>
        <nuxt-link to="/about">about</nuxt-link>
        <ul v-for="item in list">
          <li>{{ item.title }}</li>
        </ul>
      </div>
    </template>

    <script>
    import { mapState } from "vuex";
    export default {
      async fetch({ $axios, store }) {
        let {
          data: { data: list },
        } = await $axios.get("https://cnodejs.org/api/v1/topics");
        store.commit("update", list);
      },
      computed: {
        ...mapState(["list"]),
      },
    };
    </script>
    + +

    store/index.js

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    export const state = function () {
      return {
        list: [],
        test: "123",
      };
    };

    export const mutations = {
      update(state, payload) {
        state.list = payload;
      },
    };
    + +

    动画 transition

    Nuxt.js 使用 Vue.js 的 transition组件来实现路由切换时的过渡动效。默认类目是.page 开通

    +

    过渡类名

    1
    2
    3
    4
    5
    6
    .page-enter,
    .page-leave-to {
    }
    .page-enter-active,
    .page-leave-active {
    }
    + +

    layouts/default.vue

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <
    <template>
      <div class="box">
        <nuxt-link to="/">home</nuxt-link>
        <nuxt-link to="/about">about</nuxt-link>
        <nuxt-link to="/user">user</nuxt-link>
        <Nuxt></Nuxt>
      </div>
    </template>

    <style>
    html,
    body {
      text-align: center;
    }
    a {
      padding: 0 20px;
    }
    .page-enter,
    .page-leave-to {
      opacity: 0;
    }

    .page-enter-active,
    .page-leave-active {
      transition: opacity 0.8s;
    }
    </style>
    + +

    动画类名

      +
    1. 使用 transtion 属性在页面组件指定自定义动画名称
      2. +
    2. 在布局文件
      3. +
    +
    1
    2
    3
    xxx-enter-active,
    xxx-leave-active {
    }
    + +

    layouts/default.vue

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    <
    <template>
      <div class="box">
        <nuxt-link to="/">home</nuxt-link>
        <nuxt-link to="/about">about</nuxt-link>
        <nuxt-link to="/user">user</nuxt-link>
        <Nuxt></Nuxt>
      </div>
    </template>

    <script>
    export default {};
    </script>

    <style>
    html,
    body {
      text-align: center;
    }
    a {
      padding: 0 20px;
    }
    .page-enter,
    .page-leave-to {
      opacity: 0;
    }

    .page-enter-active,
    .page-leave-active {
      transition: opacity 0.8s;
    }

    .bounce-enter-active {
      animation: bounce-in 0.8s;
    }

    .bounce-leave-active {
      animation: bounce-out 0.5s;
    }

    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }

      50% {
        transform: scale(1.25);
      }

      100% {
        transform: scale(1);
      }
    }

    @keyframes bounce-out {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.25);
      }

      100% {
        transform: scale(0);
      }
    }
    </style>
    + +

    pages/user.vue

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <template>
      <h1>hi user</h1>
    </template>

    <script>
    export default {
      // 使用动画
      transition: "bounce",
    };
    </script>
    + +

    API: transition 属性 - NuxtJS | Nuxt.js 中文网

    +

    中间件 middleware

      +
    1. 中间件就是一个函数， 运行在客户端或者服务端
      2. +
    2. 项目启动或者刷新页面，运行在服务端
      3. +
    3. 切换路由，运行在客户端
      4. +
    4. process.server / process.static 判断执行环境
      5. +
    +

    ​ 执行顺序：

    +
      +

    1. nuxt.config.js

      +
      2. +

    2. 布局文件(layouts)

      +
      3. +

    3. 页面文件(pages)

      +
      4. +

    4. 全局中间件, 整个项目都可以使用

      +
        +

      1. middleware 目录下 xxx.js

        +
        2. +

      2. nuxt.config.js 全局注册

        +
        1
        2
        3
        router: {
          middleware: "全局中间件名称";
        }
        +
        3. +

      3. 整个项目路由切换时或者刷新页面时，全局中间件都会执行

        +
        4. +
      +
      5. +
    +

    全局中间件

    nuxt.config.js

    +
    1
    2
    3
    4
    5
    export default {
      router: {
        middleware: "index1",
      },
    };
    + +

    middleware/index1.js

    +
    1
    2
    3
    export default () => {
      console.log("这里是中间件");
    };
    + +

    局部中间件

    2.布局中的中间件

    +
      +
    1. middleware 目录下 xxx.js
      2. +
    +

    middleware/pagesMiddleware.js

    +
    1
    2
    3
    export default () => {
      console.log("pages 中间件");
    };
    + +
      +
    1. 在布局文件中使用 middleware:’中间件名称’
      2. +
    +

    layouts/default.vue

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <template>
      <div>
        <h1>这里是 layouts</h1>
        <Nuxt></Nuxt>
      </div>
    </template>

    <script>
    export default {
      // 使用中间件
      middleware: "layoutsMiddleware",
    };
    </script>
    + +

    3.页面中的中间件

    +
      +
    1. middleware 目录下 xxx.js
      2. +
    2. 在页面文件中使用 middleware:’中间件名称’
      3. +
    +

    使用方法同上面

    +

    中间件

    +

    插件 plugins

    插件的注册

    插件需要在 nuxt.config.js 内的 plugins 内进行注册才可以调用

    +

    nuxt.config.js

    +
    1
    2
    3
    export default {
      plugins: ["插件的目录/xxx.js", { src: "插件的路径/xx.js" }],
    };
    + +

    默认插件

      +
    1. 就是一个 plugins/js 文件
      2. +
    2. 项目启动时/根目录刷新， 会在客户端和服务端都执行一次，此时要注意区分环境
      3. +
    3. 路由切换时，该插件不执行
      4. +
    +

    客户端/服务端插件

    nuxt.config.js

    +
    1
    2
    3
    4
    5
    6
    plugins:[
        '~/plugins/xxx.js'  // 两端都会执行
        {src:'~/plugins/xxx.js', mode:'client'} // 客户端
        {src:'~/plugins/xx.js', mode:'server'} // 服务端
        {src:'~/plugins/xx.js', mode:'both'} // 两端
    ]
    + +

    插件注入

    注入 vue 实例

    plugins/test.js

    +
    1
    2
    3
    4
    5
    6
    7
    import vue from "vue";

    export default function () {
      // 注入 vue 原型
      vue.prototype.$test = "这里是test";
      console.log("插件执行了");
    }
    + +

    pages/index.vue

    +
    1
    2
    3
    4
    5
    6
    7
    <script>
    export default {
      created() {
        console.log(this.$test); // "这里是test"
      },
    };
    </script>
    + +

    注入 context 实例

    在asyncData和fetch中可以获取到 context

    +

    plugins/client.js

    +
    1
    2
    3
    4
    export default (context) => {
      context.app.myClient = "这里是客户端";
      console.log("指定在客户端运行");
    };
    + +

    pages/index.vue

    +
    1
    2
    3
    4
    5
    6
    7
    <script>
    export default {
      asyncData(context) {
        console.log(context.app.myClient);
      },
    };
    </script>
    + +

    同时注入

    如果您需要同时在context，Vue实例，甚至Vuex中同时注入，您可以使用inject方法,它是 plugin 导出函数的第二个参数。将内容注入 Vue 实例的方式与在 Vue 应用程序中进行注入类似。系统会自动将$添加到方法名的前面。

    +

    plugins/test.js

    +
    1
    2
    3
    4
    5
    6
    export default function (context, inject) {
      inject("myServer", () => {
        return "这里是 server";
      });
      console.log("插件执行了");
    }
    + +

    pages/index.vue

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <script>
    export default {
      created(context) {
        let str = this.$myServer();
        console.log(str); //这里是 server
      },
      asyncData(context) {
        console.log(context.app.$myServer()); //这里是 server
      },
    };
    </script>
    + +

    vuex 的使用

    nuxt 内置了 vuex 所以使用的时候不需要再次安装 vuex

    +

    Nuxt.js 会尝试找到 src 目录（默认是应用根目录）下的 store 目录，如果该目录存在，它将做以下的事情：

    +
      +
    1. 引用 vuex 模块
      2. +
    2. 将 vuex 模块 加到 vendors 构建配置中去
      3. +
    3. 设置 Vue 根实例的 store 配置项
      4. +
    +

    Nuxt.js 支持两种使用 store 的方式，你可以择一使用：

    +
      +
    • 模块方式： store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块 （当然，index 是根模块）
      • +
    • Classic(不建议使用)： store/index.js返回创建 Vuex.Store 实例的方法。
      • +
    +

    一个案例体验在 nuxt 中使用 vuex

    +

    vuex

    +

    pages/index.vue

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <template>
      <div id="box">
        <h1>index首页</h1>
        <h2>{{ $store.state.count }}</h2>
        <button @click="add">同步增加</button>
        <button @click="asyncAdd">异步增加</button>
      </div>
    </template>

    <script>
    export default {
      methods: {
        add() {
          this.$store.commit("add", 100);
        },
        asyncAdd() {
          this.$store.dispatch("asyncAdd", 200);
        },
      },
    };
    </script>

    <style>
    html,
    body {
      height: 100%;
    }

    #box {
      width: 800px;
      height: 500px;
      margin: 0 auto;
      border: 1px solid;
      text-align: center;
    }
    </style>
    + +

    store/index.js

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    export const state = function () {
      return {
        count: 0,
      };
    };

    export const mutations = {
      add(state, params) {
        state.count += params;
      },
    };

    export const actions = {
      asyncAdd({ commit }, payload) {
        commit("add", payload);
      },
    };
    + +

    模块的使用 module

    您可以将模块文件分解为单独的文件：state.js,actions.js,mutations.js和getters.js。如果您使用index.js来维护state,getters,actions和mutations，同时具有单个单独的操作文件，那么仍然可以正确识别该文件。

    +

    如果在 store 里面写 xxx.js 那么记住导出 state 等以便外部调用,多个导出的 xxx.js 文件会被识别成为模块

    +

    案例

    +

    vuex2

    +

    pages/about.vue

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <template>
      <div class="about">
        <h1>随机数: {{ random }}</h1>
        <h2>把随机数添加到数组内</h2>
        <div>{{ $store.state.modulesList.list }}</div>
        <!-- 调用 moduleA 里面的数据 -->
        <div>{{ $store.state.moduleA.str }}</div>
        <button type="submit" @click="addList">
          把随机数添加到 modulesList 模块的 list 内
        </button>
      </div>
    </template>

    <script>
    export default {
      data() {
        return {
          random: 0,
        };
      },
      methods: {
        getRandom() {
          let random = Math.floor(Math.random() * 10 - 0 + 0);
          return random;
        },
        addList() {
          let random = this.getRandom();
          this.random = random;
          // 调用 modulesList 模块里面的 addList 方法
          this.$store.commit("modulesList/addList", random);
        },
      },
    };
    </script>
    + +

    store/modulesList.js

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 直接导出 nuxt 会识别 modulesLIst 为模块
    export const state = function () {
      return {
        list: [1, 2, 3, 4],
      };
    };

    export const mutations = {
      addList(state, payload) {
        state.list.push(payload);
      },
    };
    + +

    参考

    Nuxt.js - Vue.js 通用应用框架 | Nuxt.js 中文网 (nuxtjs.cn)

    +

    Nuxt.js 中文教程_w3cschool

    +
    头像头像
    WaterBoat
    正因你我生于繁华，弥足之花方显珍贵
    原创Nuxt 笔记
    本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
    Vue6 Nuxt1
    喜欢这篇文章的人也看了
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/2021/10/28/\345\211\215\347\253\257/JavaScript/01-JavaScript\345\260\217\346\212\200\345\267\247/index.html" "b/2021/10/28/\345\211\215\347\253\257/JavaScript/01-JavaScript\345\260\217\346\212\200\345\267\247/index.html" new file mode 100644 index 0000000000..ae8fb57b56 --- /dev/null +++ "b/2021/10/28/\345\211\215\347\253\257/JavaScript/01-JavaScript\345\260\217\346\212\200\345\267\247/index.html" @@ -0,0 +1,371 @@ +JavaScript 小技巧 | WaterBoat的博客
    加载头像
    原创

    JavaScript 小技巧

    发表于更新于
    长沙

    JavaScript 小技巧

    1.sleep 延迟函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function sleep(delay) {
      var start = new Date().getTime();
      while (new Date().getTime() - start < delay) {
        continue;
      }
    }

    function test() {
      console.log("111");
      sleep(2000);
      console.log("222");
    }

    test();
    + +

    2.获取 URL 参数

    1
    2
    3
    4
    decodeURI("%E5%95%8A%E5%93%88%E5%93%88"); // 解码中文
    // window.location.search  获取 URL 参数
    let params = new URLSearchParams("?project=js&type=1").get("type");
    console.log(params);
    + +

    3.判断简化

    1
    2
    3
    4
    5
    6
    7
    8
    9
    let a = 1;

    if (a == 1 || a == 2) {
      console.log(a);
    }

    if ([1, 2].includes(a)) {
      console.log(a);
    }
    + +

    4.清空数组

    1
    2
    3
    let array = ["A", "B", "C", "D", "E", "F"];
    array.length = 0;
    console.log(array); // []
    + +

    5.计算代码性能

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // web Api
    const startTime = performance.now();
    // 某些程序
    for (let i = 0; i < 1000; i++) {
      console.log(i);
    }
    const endTime = performance.now();
    const totaltime = endTime - startTime;
    console.log(totaltime); // 16.5
    /* ------------------------------------------- */
    const startTime = new Date().getTime();
    // 某些程序
    for (let i = 0; i < 1000; i++) {
      console.log(i);
    }
    const endTime = new Date().getTime();
    const totaltime = endTime - startTime;
    console.log(totaltime); // 16.5
    + +

    6.拼接数组

    1
    2
    3
    4
    5
    6
    7
    8
    let a = [1, 2, 3];
    let b = [4, 5, 6];
    let 合并数组1 = a.concat(b); // [ 1, 2, 3, 4, 5, 6 ]
    let 合并数组2 = [...a, ...b]; // [ 1, 2, 3, 4, 5, 6 ]

    // 但是使用concat()方法时，如果需要合并的数组很大，那么concat() 函数会在创建单独的新数组时消耗大量内存。这时可以使用以下方法来实现数组的合并：
    Array.prototype.push.apply(a, b);
    console.log(a);
    + +

    7.判断 null 和 undefined

    1
    2
    3
    4
    5
    6
    7
    8
    9
    let a;
    if (a == null || a == undefined) {
      console.log("a is null or undefined");
    }
    console.log(`-------------------`);
    let b = undefined;
    // 空值合并操作符
    a ?? console.log("a is null or undefined");
    b ?? console.log("b is null or undefined");
    + +

    8.伪数组转为数组

    1
    2
    3
    Array.prototype.slice.call(arguments);
    // or
    [...arguments];
    + +

    9.对象动态声明属性

    1
    2
    3
    4
    5
    6
    7
    const dynamic = "color";
    var item = {
      brand: "Ford",
      [dynamic]: "Blue",
    };
    console.log(item);
    // { brand: "Ford", color: "Blue" }
    + +

    10.缩短 console.log()

    1
    2
    3
    4
    // Web Api
    const c = console.log.bind(document);
    c(996);
    c("hello world");
    + +

    11.检查对象是否为空

    1
    2
    Object.keys({}).length; // 0
    Object.keys({ key: 1 }).length; // 1
    +
    头像头像
    WaterBoat
    正因你我生于繁华，弥足之花方显珍贵
    原创JavaScript 小技巧
    本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
    JavaScript6
    喜欢这篇文章的人也看了
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/2021/10/28/\345\211\215\347\253\257/JavaScript/02-JavsScript\351\253\230\347\272\247/index.html" "b/2021/10/28/\345\211\215\347\253\257/JavaScript/02-JavsScript\351\253\230\347\272\247/index.html" new file mode 100644 index 0000000000..3ca0ae044c --- /dev/null +++ "b/2021/10/28/\345\211\215\347\253\257/JavaScript/02-JavsScript\351\253\230\347\272\247/index.html" @@ -0,0 +1,361 @@ +JavaScript 高级 | WaterBoat的博客
    加载头像
    原创

    JavaScript 高级

    发表于更新于
    长沙

    JavaScript 高级

    01.call, apply 和 bind 的区别

    call 的使用方式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    //#region call
    // 定义一个对象
    let character = {
      name: "派蒙",
      weapon: [],
      // 得到一把武器
      getWeapon: function (weapon, weapon2) {
        this.weapon = [weapon, weapon2];
      },
    };

    let character2 = {
      name: "行秋",
      weapon: [],
    };

    console.log(character);
    // 调用方法获取了一把护摩
    character.getWeapon("护摩", "薙草之稻光");
    console.log(character);

    // character2也想得到一把武器,但是没有这个方法获得.character1表示可以把得到武器的方法借给character2使用
    console.log(character2);
    // character开始 借给character2
    character.getWeapon.call(character2, "绿剑", "风鹰剑");
    console.log(character2);
    //#endregion
    + +

    apply 的使用方式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    //#region apply
    // 定义一个对象
    let character = {
      name: "派蒙",
      weapon: [],
      // 得到一把武器
      getWeapon: function (weapon, weapon2) {
        this.weapon = [weapon, weapon2];
      },
    };

    let character2 = {
      name: "行秋",
      weapon: [],
    };

    console.log(character);
    // 调用方法获取了一把护摩
    character.getWeapon("护摩", "薙草之稻光");
    console.log(character);

    // character2也想得到一把武器,但是没有这个方法获得.character1表示可以把得到武器的方法借给character2使用
    console.log(character2);
    // character开始 借给character2
    // call 换成了 apply 不过是后面的参数是一个数组罢了
    character.getWeapon.apply(character2, ["绿剑", "风鹰剑"]);
    console.log(character2);
    //#endregion
    + +

    bind 的使用方式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    //#region bind
    // 定义一个对象
    let character = {
      name: "派蒙",
      weapon: [],
      // 得到一把武器
      getWeapon: function (weapon, weapon2) {
        this.weapon = [weapon, weapon2];
      },
    };

    let character2 = {
      name: "行秋",
      weapon: [],
    };

    console.log(character);
    // 调用方法获取了一把护摩
    character.getWeapon("护摩", "薙草之稻光");
    console.log(character);

    // character2也想得到一把武器,但是没有这个方法获得.character1表示可以把得到武器的方法借给character2使用
    console.log(character2);
    // character开始 借给character2
    // 不过 character2 不想马上得到武器而是等到有需要的时候再去得到
    let result = character.getWeapon.bind(character2, "绿剑", "风鹰剑");
    // 有需要的时候再去得到
    result();
    console.log(character2);
    //#endregion
    + +

    总结

      +
    • call，apply 和 bind 都有改变 this 指向的作用
      • +
    • call 和 apply 的区别不过是 call() 方法接受的是一个参数列表，apply() 方法接受的是一个包含多个参数的数组
      • +
    • bind 与其他两个的区别是不会立即执行，会返回一个函数在需要的时候再执行
      • +
    +
    头像头像
    WaterBoat
    正因你我生于繁华，弥足之花方显珍贵
    原创JavaScript 高级
    本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
    JavaScript6
    喜欢这篇文章的人也看了
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/2022/02/08/\345\211\215\347\253\257/Vue/04-VueCli/index.html" "b/2022/02/08/\345\211\215\347\253\257/Vue/04-VueCli/index.html" new file mode 100644 index 0000000000..e260cf1d27 --- /dev/null +++ "b/2022/02/08/\345\211\215\347\253\257/Vue/04-VueCli/index.html" @@ -0,0 +1,355 @@ +Vue Cli 配置 | WaterBoat的博客
    加载头像
    原创

    Vue Cli 配置

    发表于更新于
    长沙

    Vue Cli 配置

    引入 cdn

    vue.config.js

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    const isProduction = process.env.NODE_ENV === "production";

    const cdn = {
      // 开发环境
      dev: {
        css: [],
        js: [],
      },
      // 生产环境
      build: {
        css: ["//lib.baomitu.com/swiper/7.4.1/swiper-bundle.css"],
        js: [
          "//lib.baomitu.com/vue/3.2.26/vue.cjs.js",
          "//lib.baomitu.com/vuex/4.0.0/vuex.cjs.min.js",
          "//lib.baomitu.com/vue-router/4.0.0/vue-router.cjs.min.js",
          "//lib.baomitu.com/axios/0.18.0/axios.min.js",
          "//lib.baomitu.com/jquery/3.6.0/jquery.min.js",
          "//lib.baomitu.com/echarts/5.2.2/echarts.common.min.js",
          "//lib.baomitu.com/swiper/7.4.1/swiper-bundle.esm.min.js",
        ],
      },
    };
      chainWebpack: (config) => {
        // 去掉console.log
        config.optimization.minimizer("terser").tap((args) => {
          args[0].terserOptions.compress.drop_console = true;
          return args;
        });
        config.plugin("html").tap((args) => {
          if (isProduction) {
            args[0].cdn = cdn.build;
          } else {
            args[0].cdn = cdn.dev;
          }
          return args;
        });
      },
    + +

    去掉 console.log

    vue.config.js

    +
    1
    2
    3
    4
    5
    6
    7
    8
    chainWebpack: (config) => {
      // 去掉console.log
      config.optimization.minimizer("terser").tap((args) => {
        args[0].terserOptions.compress.drop_console = true;
        return args;
      });
    },

    +
    头像头像
    WaterBoat
    正因你我生于繁华，弥足之花方显珍贵
    原创Vue Cli 配置
    本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
    Vue6
    喜欢这篇文章的人也看了
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/2022/02/08/\345\211\215\347\253\257/Vue/05-Vu3-Setup\350\257\255\346\263\225\347\263\226/index.html" "b/2022/02/08/\345\211\215\347\253\257/Vue/05-Vu3-Setup\350\257\255\346\263\225\347\263\226/index.html" new file mode 100644 index 0000000000..33ccb5fcba --- /dev/null +++ "b/2022/02/08/\345\211\215\347\253\257/Vue/05-Vu3-Setup\350\257\255\346\263\225\347\263\226/index.html" @@ -0,0 +1,417 @@ +Vue3-Setup语法糖 | WaterBoat的博客
    加载头像
    原创

    Vue3-Setup语法糖

    发表于更新于
    长沙

    Vue3-Setup语法糖

    <script setup></script> 是一种编译时语法糖，用于在单文件组件中使用组合式 API，如果你同时使用单文件组件和组合式 API，建议使用该语法。

    +

    它与普通语法相比，代码更加简洁、性能更加强悍、更好的 TS 支持。

    +
    1
    npm install -g @vue/cli
    + +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <script setup>
    // 此处代码将会被编译为 setup 函数代码
    // 也就是说此处代码将会在组件每次创建实例时执行
    // 在内部声明的顶级变量和函数都可以在模板中你直接使用
    const msg = "Hello Vue3 setup";

    function log() {
      console.log(msg);
    }
    </script>

    <template>
      <div @click="log">{{ msg }}</div>
    </template>
    + +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <script setup>
    // 在此处可以直接导入外部的辅助方法在模板直接使用
    import { capitalize } from "./helps";

    const msg = "Hello Vue3 setup";
    </script>

    <template>
      {{ capitalize(msg) }}
    </template>
    + +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script setup>
    import { ref } from "vue";

    const count = ref(0);
    </script>

    <template>
      <div @click="count++">{{ count }}</div>
    </template>
    + +
    1
    2
    3
    4
    5
    6
    7
    8
    <script setup>
    // 在此处可以直接导入组件在模板中使用, 不再需要手动注册组件
    import HelloWorld from "@/components/HelloWorld";
    </script>

    <template>
      <HelloWorld />
    </template>
    + +
    1
    2
    3
    4
    5
    6
    7
    8
    <!-- src/App.vue -->
    <script setup>
    import HelloWorld from "./components/HelloWorld";
    </script>

    <template>
      <HelloWorld msg="Hello Vue script setup" />
    </template>
    + +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!-- src/components/HelloWorld.vue -->
    <script setup>
    // 定义该组件接收的 Props
    // defineProps 在此处可以直接使用无需导入
    defineProps({ msg: String });
    </script>
    <template>
      {{ msg }}
    </template>
    + +
    1
    2
    3
    4
    5
    6
    7
    8
    <!-- src/components/HelloWorld.vue -->
    <script setup>
    // defineEmits 在此处可以直接使用无需导入
    defineEmits(["delete"]);
    </script>
    <template>
      <button @click="$emit('delete')">delete button</button>
    </template>
    + +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!-- src/App.vue -->
    <script setup>
    import HelloWorld from "./components/HelloWorld";
    function onDeleteHandler() {
      alert("deleted");
    }
    </script>

    <template>
      <HelloWorld @delete="onDeleteHandler" />
    </template>
    + +
    1
    2
    3
    4
    5
    6
    <!-- src/components/HelloWorld.vue -->
    <script setup>
    const count = 0;
    // 定义当前组件向外暴露的数据
    defineExpose({ count });
    </script>
    + +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!-- src/App.vue -->
    <script setup>
    import HelloWorld from "./components/HelloWorld";
    import { ref } from "vue";
    const instance = ref(null);
    function log() {
      console.log(instance.value.count);
    }
    </script>

    <template>
      <HelloWorld ref="instance" />
      <button @click="log">button</button>
    </template>
    + +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!-- src/components/HelloWorld.vue -->
    <script setup>
    import { useSlots, getCurrentInstance } from "vue";
    // 获取组件实例
    const currentInstance = getCurrentInstance();
    // 获取插槽
    const slots = useSlots();
    // 通过 JSX 渲染模板
    currentInstance.render = () => <div>{slots.default()}</div>;
    </script>
    + +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!-- src/App.vue -->
    <script setup>
    import HelloWorld from "./components/HelloWorld";
    </script>

    <template>
      <HelloWorld>
        <h1>Hello World</h1>
      </HelloWorld>
    </template>
    + +
    1
    2
    3
    4
    <!-- src/App.vue -->
    <script setup>
    const post = await fetch(`/api/post/1`).then((r) => r.json());
    </script>
    + +
    1
    2
    yarn add pinia
    npm install pinia
    + +
    1
    2
    3
    import { createPinia } from "pinia";
    // return the root store
    app.use(createPinia());
    + +

    创建 store，存储状态

    +
    1
    2
    3
    4
    5
    6
    // src/stores/user.js
    import { defineStore } from "pinia";

    export const useUser = defineStore("user", {
      state: () => ({ username: "张三" }),
    });
    + +

    使用状态

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!-- src/App.vue -->
    <script setup>
    import { useUser } from "@/stores/user";
    import { storeToRefs } from "pinia";

    const user = useUser();
    // 以下为错误写法，状态丢失响应性
    // const {username, age} = useUser();

    // 以下为正确写法, 保持了数据的响应性
    const { username, age } = storeToRefs(user);
    </script>
    <template>
      <!-- 直接获取并使用不会破坏数据响应性 -->
      <p>{{ user.username }}</p>
      <p>{{ username }}</p>
    </template>
    + +

    更改状态

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // src/stores/user.js
    import { defineStore } from "pinia";

    export const useUser = defineStore("user", {
      state: () => ({ username: "张三", age: 20, hobbies: [] }),
      actions: {
        updateUsername(username) {
          this.username = username;
        },
      },
    });
    + +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!-- src/App.vue -->
    <script setup>
    import { useUser } from "@/stores/user";
    const user = useUser();
    </script>
    <template>
      {{ user.username }}
      <button @click="user.updateUsername('李四')">updateUsername</button>
    </template>
    + +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!-- src/App.vue -->
    <script setup>
    import { useUser } from "@/stores/user";
    const user = useUser();
    </script>
    <template>
      {{ user.username }} {{ user.age }}
      <button @click="user.$patch({ username: '王五' })">updateUsername</button>
      <button
        @click="
          user.$patch((state) => {
            state.hobbies.push('足球');
            state.age = 30;
          })
        "
      >
        button
      </button>
    </template>
    + +

    重置状态

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!-- src/App.vue -->
    <script setup>
    import { useUser } from "@/stores/user";
    import { storeToRefs } from "pinia";
    const user = useUser();
    </script>
    <template>
      <button @click="user.$reset">reset</button>
    </template>
    + +

    替换状态

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!-- src/App.vue -->
    <script setup>
    import { useUser } from "@/stores/user";
    const user = useUser();
    </script>
    <template>
      {{ user.username }} {{ user.age }}
      <button @click="user.$state = { username: '赵六', age: 50 }">
        replace state
      </button>
    </template>
    + +

    getters，getters 就是 store 中的计算属性

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // src/stores/user.js
    import { defineStore } from "pinia";

    // getters 就是 store 中的计算属性
    export const useUser = defineStore("user", {
      state: () => ({ count: 25 }),
      getters: {
        doubleCount(state) {
          // 通过参数 state 获取依赖状态
          return state.count * 2;
        },
        doubleCountPlusOne() {
          console.log(this);
          // 通过 this 获取其他 getter
          return this.doubleCount + 1;
        },
      },
    });
    + +
    1
    2
    3
    4
    5
    6
    <!-- src/App.vue -->
    <script setup>
    import { useUser } from "@/stores/user";
    const user = useUser();
    </script>
    <template>{{ user.doubleCount }} {{ user.doubleCountPlusOne }}</template>
    + +

    Getter 传递参数

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // src/stores/user.js
    import { defineStore } from "pinia";

    // getters 就是 store 中的计算属性
    export const useUser = defineStore("user", {
      state: () => ({ count: 25 }),
      getters: {
        // getter 传递参数, 该方式会失去 getter 缓存特性
        countPlus(state) {
          return (count) => state.count + count;
        },
      },
    });
    + +
    1
    2
    3
    4
    5
    6
    7
    8
    <!-- src/App.vue -->
    <script setup>
    import { useUser } from "@/stores/user";
    const user = useUser();
    </script>
    <template>
      {{ user.countPlus(5) }}
    </template>
    + +

    Action

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // src/stores/user.js
    import { defineStore } from "pinia";
    import axios from "axios";

    export const useUser = defineStore("user", {
      state: () => ({ profile: null }),
      actions: {
        async getUserInfo(id) {
          let { data } = await axios.get(
            `https://jsonplaceholder.typicode.com/users/${id}`,
          );
          this.profile = data;
        },
      },
    });
    + +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!-- src/App.vue -->
    <script setup>
    import { useUser } from "@/stores/user";
    const user = useUser();
    </script>
    <template>
      {{ user.profile }}
      <button @click="user.getUserInfo(1)">getUserInfo</button>
    </template>
    +
    头像头像
    WaterBoat
    正因你我生于繁华，弥足之花方显珍贵
    原创Vue3-Setup语法糖
    本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
    Vue6
    喜欢这篇文章的人也看了
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/2022/05/10/\345\211\215\347\253\257/JavaScript/JavaScript\350\256\276\350\256\241\346\250\241\345\274\217/08-\345\217\221\345\270\203-\350\256\242\351\230\205\346\250\241\345\274\217/index.html" "b/2022/05/10/\345\211\215\347\253\257/JavaScript/JavaScript\350\256\276\350\256\241\346\250\241\345\274\217/08-\345\217\221\345\270\203-\350\256\242\351\230\205\346\250\241\345\274\217/index.html" new file mode 100644 index 0000000000..5e5392b4c3 --- /dev/null +++ "b/2022/05/10/\345\211\215\347\253\257/JavaScript/JavaScript\350\256\276\350\256\241\346\250\241\345\274\217/08-\345\217\221\345\270\203-\350\256\242\351\230\205\346\250\241\345\274\217/index.html" @@ -0,0 +1,380 @@ +发布-订阅模式 | WaterBoat的博客
    加载头像
    原创

    发布-订阅模式

    发表于更新于
    长沙

    发布-订阅模式

    什么是发布-订阅模式

    以我们使用过的 documeng.body.addEventListener(“click”,function(){}) 为例，这样的就是发布-订阅模式的具体实现。
    我们订阅了 documeng.body 上的 click 事件，当被点击的时候 body 节点便会向订阅者发布者消息。

    +

    如果用生活中的例子举例，那就是我们订阅微信公众号，公众号发送消息，订阅的用户就会接收到消息。

    +

    基于以上的例子，我们总结出发布订阅模式的三要素：

    +
      +
    • 一个订阅者
      • +
    • 一个发布者
      • +
    • 一个处理 订阅和发布的中间人
      • +
    +

    接下来让我们来实现一个发布-订阅模式。
    我们规定 listen-订阅 trigger-发布 -remove 取消订阅

    +

    一个简单的发布订阅模式

    调用的形式如下:

    +
    1
    2
    3
    4
    5
    6
    salesOffices.listen(function (price) {
      console.log("价格", price);
    });

    salesOffices.trigger(100);
    salesOffices.remove(100);
    + +

    具体实现如下:

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    var salesOffices = {}; // 定义售楼处
    salesOffices.clientList = []; // 缓存列表,存放订阅者的回调函数

    salesOffices.listen = function (fn) {
      // 新增订阅者
      this.clientList.push(fn); // 把订阅的消息添加进缓存列表
    };

    salesOffices.trigger = function () {
      //发布消息
      for (let i = 0; i < this.clientList.length; i++) {
        this.clientList[i].apply(this, arguments);
      }
    };
    salesOffices.remove = function () {
      // 移除所有订阅者
      this.clientList.length = 0;
    };

    salesOffices.listen(function (price) {
      console.log("价格", price);
    });

    salesOffices.listen(function (price) {
      console.log("价格", price);
    });

    salesOffices.remove();

    salesOffices.trigger(100);
    salesOffices.trigger(50);
    // 以上有一个文件如果用户 A 订阅了 100  用户 B 订阅了 50，那么 A 和 B都会收到对方的消息，所以我们还需改进一下，给订阅者添加上唯一的标识

    // 也就是把触发的条件改成如下形式

    /* 
    salesOffices.listen("A", function(price) {
      console.log("价格", price);
    });

    salesOffices.trigger("A", 100);

    salesOffices.remove("A");
    */
    + +

    带标识(key)的发布订阅

    上一小节中的代码没有订阅标识，一次发布所有用户都会收到，我们改进一下代码让变成谁订阅谁接收

    +

    调用方式改成如下:

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    function fn1(price) {
      console.log("A价格", price);
    }

    salesOffices.listen("A", fn1);

    salesOffices.listen("A", function () {
      console.log("第二个 A");
    });

    // salesOffices.remove("A", fn1);
    salesOffices.remove("A");

    salesOffices.listen("B", function (price, area) {
      console.log("B 价格", price);
      console.log("B 面积", area);
    });

    salesOffices.trigger("A", 100);
    salesOffices.trigger("B", 100, 500);
    + +

    具体实现如下:

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    var salesOffices = {}; // 定义售楼处
    salesOffices.clientList = {}; // 缓存列表,存放订阅者的回调函数

    salesOffices.listen = function (key, fn) {
      if (!this.clientList[key]) {
        // 如果 key 不存在，则新增
        this.clientList[key] = [];
      }
      // 新增订阅者
      this.clientList[key].push(fn);
    };

    salesOffices.trigger = function () {
      // 这里获取 key 和 参数
      // 疑问? 为什么调用 trigger 时不能直接传入 key 和 参数呢?
      // 因为 arguments 是一个类数组，无法调用数组的方法
      // 但是如果我们通过 原型链上的方法和改变 this 的指向来调用
      let key = Array.prototype.shift.call(arguments);
      //发布消息
      for (let i = 0; i < this.clientList[key].length; i++) {
        //                                  因为 shift 会改变原数组 所以这里的 arguments 只剩下了除 key 以外的参数了
        this.clientList[key][i].apply(this, arguments);
      }
    };

    // 参考 removeEventListener 移除的时候也需要传入 移除的函数
    salesOffices.remove = function (key, fn) {
      if (this.clientList[key]) {
        let arr = this.clientList[key];

        if (fn) {
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].name === fn.name) {
              arr.splice(i, 1);
            }
          }
        } else {
          // 如果传入的函数为空，则移除所有的函数
          this.clientList[key] = [];
        }
      }
    };

    function fn1(price) {
      console.log("A价格", price);
    }

    salesOffices.listen("A", fn1);

    salesOffices.listen("A", function () {
      console.log("第二个 A");
    });

    // salesOffices.remove("A", fn1);
    salesOffices.remove("A");

    salesOffices.listen("B", function (price, area) {
      console.log("B 价格", price);
      console.log("B 面积", area);
    });

    salesOffices.trigger("A", 100);
    salesOffices.trigger("B", 100, 500);
    + +

    发布订阅的通用实现

    在上一节中，我们只是实现了一个发布订阅的功能不够通用，所以我们将继续提取出一个通用的实现，这样我们就可以在不同的地方使用这个功能了

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    class Observer {
      constructor() {
        this.subscribers = {};
      }

      listen(key, fn) {
        if (!this.subscribers[key]) {
          this.subscribers[key] = [];
        }
        this.subscribers[key].push(fn);
      }
      trigger() {
        const key = Array.prototype.shift.call(arguments);
        for (let i = 0; i < this.subscribers[key].length; i++) {
          this.subscribers[key][i].apply(this, arguments);
        }
      }
      remove(key, fn) {
        if (this.subscribers[key]) {
          let arr = this.subscribers[key];
          // 如果传入了 fn 就移除指定的 fn
          if (fn) {
            for (let index = 0; index < arr.length; index++) {
              if (arr[index].name === fn.name) {
                this.subscribers[key].splice(index, 1);
              }
            }
          } else {
            // 没传入 fn 就移除所有的 fn
            this.subscribers[key] = [];
          }
        }
      }
    }

    let observer = new Observer();

    function fn(price) {
      console.log("fn() A", price);
    }

    observer.listen("A", function (price) {
      console.log("A的价格", price);
    });

    observer.listen("A", fn);

    observer.listen("B", function (price) {
      console.log("B的价格", price);
    });
    observer.remove("A", fn);

    observer.trigger("A", 100);

    observer.trigger("B", 500);
    + +

    思维导图

    发布订阅模式

    +

    参考文章

    《JavaScript 设计模式与开发实践》

    +

    观察者模式 vs 发布订阅模式，千万不要再混淆了

    +

    理解【观察者模式】和【发布订阅】的区别

    +

    JavaScript：发布-订阅模式与观察者模式

    +
    头像头像
    WaterBoat
    正因你我生于繁华，弥足之花方显珍贵
    原创发布-订阅模式
    本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
    JavaScript6
    喜欢这篇文章的人也看了
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/2022/05/20/\345\211\215\347\253\257/01-npm\345\210\253\345\220\215/index.html" "b/2022/05/20/\345\211\215\347\253\257/01-npm\345\210\253\345\220\215/index.html" new file mode 100644 index 0000000000..723c78128b --- /dev/null +++ "b/2022/05/20/\345\211\215\347\253\257/01-npm\345\210\253\345\220\215/index.html" @@ -0,0 +1,351 @@ +npm 别名---让小明变成小红 | WaterBoat的博客
    加载头像
    原创

    npm 别名---让小明变成小红

    发表于更新于
    长沙

    npm 别名---让小明变成小红

    1
    2
    3
    4
    5
    npm i lodash@npm:wuhu  # 这样就把 lodash 的名称配置成了 wuhu
    # 实际使用一般来说 node-sass 是业界毒瘤,用 dart-sass 就可以替换掉 node-sass
    npm install node-sass@npm:dart-sass
    # 如果你使用的是 yarn
    yarn add node-sass@yarn:dart-sass
    +
    头像头像
    WaterBoat
    正因你我生于繁华，弥足之花方显珍贵
    原创npm 别名---让小明变成小红
    本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
    npm1
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/2023/07/10/\345\211\215\347\253\257/WebAssembly/WebAssembly/index.html" "b/2023/07/10/\345\211\215\347\253\257/WebAssembly/WebAssembly/index.html" new file mode 100644 index 0000000000..b843e9acf1 --- /dev/null +++ "b/2023/07/10/\345\211\215\347\253\257/WebAssembly/WebAssembly/index.html" @@ -0,0 +1,351 @@ +WebAssembly 简易教程 | WaterBoat的博客
    加载头像
    原创

    WebAssembly 简易教程

    发表于更新于
    长沙

    WebAssembly 简易教程

    什么是 WebAssembly

    TODO…

    +
    头像头像
    WaterBoat
    正因你我生于繁华，弥足之花方显珍贵
    原创WebAssembly 简易教程
    本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
    WebAssembly0
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/2023/07/11/\345\214\272\345\235\227\351\223\276/template/index.html" "b/2023/07/11/\345\214\272\345\235\227\351\223\276/template/index.html" new file mode 100644 index 0000000000..846ced8f44 --- /dev/null +++ "b/2023/07/11/\345\214\272\345\235\227\351\223\276/template/index.html" @@ -0,0 +1,350 @@ +模版文件 | WaterBoat的博客
    加载头像
    原创

    模版文件

    发表于更新于
    长沙

    模版文件

    头像头像
    WaterBoat
    正因你我生于繁华，弥足之花方显珍贵
    原创模版文件
    本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
    Solidity1
    喜欢这篇文章的人也看了
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/2023/07/17/\345\211\215\347\253\257/Cypress/01-Cypress \344\275\277\347\224\250\346\214\207\345\215\227/index.html" "b/2023/07/17/\345\211\215\347\253\257/Cypress/01-Cypress \344\275\277\347\224\250\346\214\207\345\215\227/index.html" new file mode 100644 index 0000000000..dcccceec19 --- /dev/null +++ "b/2023/07/17/\345\211\215\347\253\257/Cypress/01-Cypress \344\275\277\347\224\250\346\214\207\345\215\227/index.html" @@ -0,0 +1,493 @@ +Cypress 使用指南 | WaterBoat的博客
    加载头像
    原创

    Cypress 使用指南

    发表于更新于
    长沙

    Cypress 使用指南

    什么是 Cypress

    Cypress 是一个现代化的前端端到端（End-to-End，E2E）测试框架。它被设计用于对 Web 应用程序进行自动化测试，可以模拟用户在真实环境中与应用程序的交互行为。

    +

    以下是 Cypress 的一些关键特点和优势：

    +
      +
    1. 简单易用: Cypress 具有简洁而直观的 API，使得编写和维护测试用例非常容易。
      2. +
    2. 强大的调试能力: Cypress 提供了丰富的调试工具，开发人员可以通过断点、控制台日志和实时命令行等方式方便地调试测试用例。
      3. +
    3. 可见即可信: Cypress 在测试过程中会记录并生成视频，可以可视化地查看每个测试用例的执行过程，方便回放和排查问题。
      4. +
    +

    为什么要用 Cypress?

      +
    1. JavaScript 技术栈: Cypress 是以 JavaScript 为技术栈编写的，而我们团队 BCS 端都是使用 JavaScript 技术栈为主，切换为以 JavaScript 为主的自动化测试框架是一件低成本的事情。
      2. +
    2. 简化测试流程: Cypress 提供了一个全面的测试解决方案，可以覆盖从用户界面到后端服务器的整个应用程序。它集成了测试框架、断言库和模拟工具，使得编写和管理测试用例变得更加简单。
      3. +
    3. 可靠性和稳定性: Cypress 在内部运行测试代码，与浏览器直接交互，并可以完全控制应用程序的行为。这种直接集成性能更佳，使得测试更加可靠，能够捕获更多的错误和问题。并且随着”全功能模板”的稳定迭代我们需要一种自动化测试工具进行回归测试以减少测试成本。
      4. +
    4. 易于调试: Cypress 提供了强大的调试工具，包括断点、控制台日志和实时命令行等功能，方便开发人员在测试过程中进行问题排查和调试。
      5. +
    5. 可视化回放: Cypress 会记录并生成视频，可以可视化地查看每个测试用例的执行过程。这对于团队合作、问题复现和审查都非常有价值。
      6. +
    +

    Cypress 为团队带来的价值

      +
    1. 沟通成本：Cypress 提供了实时可视化测试运行状态的功能，你可以在浏览器中实时查看测试的运行情况、命令的执行顺序和元素的状态。此外，Cypress 还可以自动重放失败的测试命令，以帮助你快速调试和修复问题减少沟通成本。
      2. +
    2. 与开发者工具的无缝集成：Cypress 与开发者工具（如 DevTools）无缝集成，使你可以直接在 Cypress 界面中查看应用程序的 DOM、网络请求、响应等详细信息。这极大地简化了调试和排查问题的过程。
      3. +
    3. 自动化测试 : 自动化测试可以大大提高测试过程的效率。相比手动测试，自动化测试可以更快地执行测试用例，并且始终保持一致性
      4. +
    4. 节省时间和成本：自动化测试可以在软件开发周期中节省大量的时间和成本。自动运行的测试套件可以在短时间内执行大量的测试用例，不仅可以及早发现和修复问题，还可以减少重复劳动和人力资源的需求。
      5. +
    +

    使用 Cypress 需要达到的目标

      +
    1. 减少手动测试工作量：Cypress 提供了自动化测试的能力，可以模拟用户与应用程序进行交互的整个过程。这意味着你可以编写一次测试代码，然后反复运行，而不需要手动重复执行相同的测试步骤。这样可以显著减少手动测试的工作量。
      2. +
    +

    以下为”全功能模板”添加的测试用例运行图。对比之前的人工测试，自动化的测试节省了时间和保证测试的一致性和可重复性。

    +

    img

    +
      +
    1. 提高测试的可靠性：Cypress 使用实时重放和监控的方式执行测试，确保测试命令的正确执行顺序和应用程序的正确状态。它还提供了自动等待和重试机制，以处理异步操作和不稳定性。这些功能提高了测试的可靠性，减少了测试失误和漏洞。
      2. +
    2. 提高团队协作效率：Cypress 提供了易于编写和维护的测试代码，具有直观的 API 和丰富的断言库。这使得团队成员可以更轻松地编写、理解和修改测试代码，促进了团队的协作效率和开发速度。
      3. +
    3. 加强测试质量和覆盖度 : 通过 Cypress 的提供的测试 API 提升”全功能模板”的测试质量并将覆盖度提升到 90 %以上。
      4. +
    +

    Cypress 的使用

    创建一个项目

    1
    pnpm create vite
    + +

    image-20230717160123500

    +

    安装 Cypress

    1
    pnpm add cypress -D
    + +

    在 package.json 中添加如下命令:

    +
    1
    2
    3
    4
    "scripts": {
        "cypress:open": "cypress open",
        "cypress:run-ci": "cypress run"
    }
    + +

    随后运行命令启动项目

    +
    1
    2
    pnpm dev;
    pnpm cypress:open;
    + +

    选择E2E

    +

    image-20230717155513987

    +

    第一次进入 Cypress 会基于我们一些实例代码

    +

    image-20230717155559769

    +

    选择 Chrome 进行测试

    +

    image-20230717160359726

    +

    然后我们点击 Scaffold example specs 生成一些示例代码

    +

    image-20230717160713367

    +

    我们点击对应的文件进入即可执行需要的文件

    +

    image-20230717161020353

    +

    image-20230717161038174

    +

    进入对应的代码我们发现一片爆红那是因为创建的项目默认集成了 eslint,

    +

    image-20230717161425009

    +

    我们需要安装如下插件

    +

    eslint-plugin-cypress

    +

    配置完毕如下图

    +

    image-20230717161710208

    +

    常用的 API 介绍

      +
    1. 获取元素
      2. +
    +
    1
    cy.get("HTMLElement") // jQuery 式
    + +
      +
    1. 获取包含特定文本的元素
      2. +
    +
    1
    cy.contains("文字")
    + +
      +
    1. 断言特定条件是否成立
      2. +
    +
    1
    cy.get(body).should("exist") // 验证 body 是否存在
    + +
      +
    1. 切换路由
      2. +
    +
    1
    cy.visit("/home")
    + +
      +
    1. 拦截和处理网络请求
      2. +
    +
    1
    cy.intercept(route, handler)
    + +
      +
    1. 等待一段时间
      2. +
    +
    1
    cy.wait(ms)
    + +
      +
    1. 输入文本
      2. +
    +
    1
    cy.type(text)
    + +
      +
    1. 图片上传
      2. +
    +
    1
    2
    npm i cypress-file-upload -D
    cy.get(dom).attachFile(imgPath);
    + +

    更多 API 请查看官方文档

    +

    实践

    在阅读了以上的 API 我们来自行编写一个 E2E 测试

    +

    要求

    +
    1
    2
    3
    4
    5
    1. 访问 https://preview.pro.ant.design/user/login/
    2. 输入账号密码登录 admin ant.design
    3. 切换路由到 https://preview.pro.ant.design/form/basic-form
    4. 填写表单
    5. 验证提交成功
    + +

    完整代码如下

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    const username = "admin";
    const passworld = "ant.design";

    describe("Antd", () => {
      beforeEach(() => {
        login();
      });

      afterEach(() => {
        // eslint-disable-next-line cypress/no-unnecessary-waiting
        cy.wait(1000);
      });

      it("应该填写表单完毕", () => {
        cy.visit("https://preview.pro.ant.design/form/basic-form/");
        cy.get("#basic_title").type("标题");
        // 日期框
        cy.get("#basic_date").click();
        cy.get(".ant-picker-cell-inner").contains("15").click();
        cy.get(".ant-picker-cell-inner").contains("16").click();
        cy.get("#basic_goal").type("目标描述");
        cy.get("#basic_standard").type("衡量标准");
        cy.get("#basic_publicType > :nth-child(1) > :nth-child(2)").click();
        cy.get(".ant-space > :nth-child(1) > .ant-btn").click();
        cy.contains("提交成功").should("exist");
      });
    });

    function login() {
      cy.visit("https://preview.pro.ant.design/user/login/");
      cy.get("#username").type(username);
      cy.get("#password").type(passworld);
      cy.get(".ant-btn").click();
      cy.contains("登录成功").should("exist");
    }
    + +

    可优化的点,登录功能是每一个 it 都需要的,所以可以注册到全局命令

    +

    cypress/support/commands.js

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    Cypress.Commands.add("login", () => {
      const username = "admin";
      const passworld = "ant.design";
      cy.visit("https://preview.pro.ant.design/user/login/");
      cy.get("#username").type(username);
      cy.get("#password").type(passworld);
      cy.get(".ant-btn").click();
      cy.contains("登录成功").should("exist");
    });

    // 之后在任意的 cy 文件中直接调用 cy.login() 即可登录
    + +

    编写规范

      +
    1. 原则：单元测试的目标是测试每一个功能在特定输入下，输出结果和预期结果的一致性。
      2. +
    2. 单一性：一个单元测试只应该关注一个功能点，单元测试不是用来覆盖复杂复合用例，不能杂糅这样的目标到单元测试中。
      3. +
    3. 可维护性：尽可能简单，清晰，易懂，任何单元测试都不应该包含复杂的逻辑。
      4. +
    4. 边界测试：单元测试应该考虑一些不以达到的边界条件。
      5. +
    5. 测试隔离：除了系列测试之外，应该尽量保持测试例之间的逻辑和测试环境隔离，也就是说测试后有必要的话应该清理测试例对环境造成的污染。
      6. +
    6. 保持维护：这可能是单元测试中最重要的一条铁律，任何功能的修改和增删都会对单元测试造成影响，应该持续对单元测试进行更新和维护。
      7. +
    7. 数据: 新增的数据名以 cypress 开头在执行完毕之后需要删除以维护测试环境的数据。
      8. +
    +

    云效流水线集成

    流水线环境采用自定义构建的 Docker 镜像文件上传至阿里云镜像站下载使用，当创建 PR 的时候就会执行流水线进行 E2E 测试，只有通过才能合并代码以保证代码的稳定性和健壮性。

    +

    常见问题处理办法

      +
    1. 在命令行中运行单个测试用例
      2. +
    +
    1
    cypress run -s cypress/e2e/Activity/04-Task.cy.js
    + +
      +
    1. 获取不到非可视区的元素
      2. +
    +

    当 Cypress 在 CI/CD 环境中运行时，经常会出现 Cypress 调用 scrollTo() 滚动后又回到原位的情况。这是因为 CI/CD 环境中通常以无头模式运行 Cypress（即无可视化界面），而滚动操作通常依赖于页面的可视区域。

    +

    无头模式下的浏览器可能会对滚动操作做出一些优化或默认行为，在滚动之后自动恢复到初始状态。这种行为不符合我们在网页上手动滚动的预期效果。

    +

    为了解决这个问题，可以尝试使用 Cypress 的 scrollTo() 方法的 timeout 参数，增加滚动操作的持续时间，以确保滚动操作生效。

    +

    例如：

    +
    1
    cy.scrollTo('bottom', { duration: 2000 });
    + +

    这样会将滚动操作的持续时间延长到 2 秒钟，让滚动更充分地发生。你可以根据需要调整持续时间。

    +

    此外，还可以尝试在滚动操作后添加一些额外的断言，例如检查滚动位置是否正确或检查滚动后的元素是否可见，以确保滚动操作生效并且不会回到原位。

    +
    1
    cy.scrollTo('bottom').should('have.prop', 'scrollTop', 1000);
    + +
      +
    1. 移除 cy.wait(someTime)
      2. +
    +

    在使用Cypress时，使用cy.wait()命令确实存在过度依赖网络环境和测试机器性能的问题。为了更好地控制等待时间，推荐使用cy.intercept()命令与cy.wait()结合使用，以明确指定需要等待的网络资源。

    +
    1
    2
    cy.intercept('https://baidu.com/').as('fetchURL');
    cy.wait('@fetchURL');
    +
    头像头像
    WaterBoat
    正因你我生于繁华，弥足之花方显珍贵
    原创Cypress 使用指南
    本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
    Cypress1 测试1
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/2024/01/01/\345\214\272\345\235\227\351\223\276/Solidity/01-Solidity \345\205\245\351\227\250\346\225\231\347\250\213/index.html" "b/2024/01/01/\345\214\272\345\235\227\351\223\276/Solidity/01-Solidity \345\205\245\351\227\250\346\225\231\347\250\213/index.html" new file mode 100644 index 0000000000..5041e8a250 --- /dev/null +++ "b/2024/01/01/\345\214\272\345\235\227\351\223\276/Solidity/01-Solidity \345\205\245\351\227\250\346\225\231\347\250\213/index.html" @@ -0,0 +1,390 @@ +Solidity 龟速入门教程 | WaterBoat的博客
    加载头像
    原创

    Solidity 龟速入门教程

    发表于更新于
    长沙

    Solidity 龟速入门教程

    Solidity 入门教程

    Solidity 是什么

    Solidity logo + +

    Solidity 是一门面向合约的、为实现智能合约而创建的高级编程语言。这门语言受到了 C++，Python 和 Javascript 语言的影响，设计的目的是能在以太坊虚拟机（EVM）上运行。

    +

    Solidity 是静态类型语言，支持继承、库和复杂的用户定义类型等特性。

    +

    开发工具

    Remix

    remix是以太坊官方推荐的智能合约开发IDE（集成开发环境），适合新手，可以在浏览器中快速部署测试智能合约，你不需要在本地安装任何程序。

    +

    网址：remix.ethereum.org

    +

    进入remix，我们可以看到最左边的菜单有三个按钮，分别对应文件（写代码的地方），编译（跑代码），部署（部署到链上）。我们点新建（Create New File）按钮，就可以创建一个空白的solidity合约

    +

    image-20240425151055605

    +

    我们来编写一段代码

    +
    1
    2
    3
    4
    5
    6
    7
    // SPDX-License-Identifier: MIT // 不写这个编辑器会警告,但是不影响运行
    pragma solidity ^0.8.0; // 指定编译器版本 不允许小于 0.8.0 或大于 0.9.0的编译器编译

    contract HelloWorld { // 创建合约(contract) 名字为 HelloWorld
        // 定义变量类型为 string 变量名威 _string 赋值为 HelloWorld
        string public _string = "HelloWorld!";
    }
    + +

    编写好代码之后我们点击左侧的编译

    +

    image-20240426152253142

    +

    然后点击部署

    +

    image-20240426152534440

    +

    点击即可查看到值

    +

    VSCode

    如果你不喜欢在线的编译工具我们可以使用本地环境来进行编译代码

    +

    在 VScode 中搜索插件 Solidity 进行安装,作用是让代码进行高亮和补充一些代码提示

    +

    image-20240425151435575

    +

    接下来我们打开 remix

    +

    来到首页点击Access File System

    +

    image-20240426153232491

    +

    出现提示让我们安装一个 npm 包,我们根据文档的说明进行一下安装

    +
    1
    npm install -g @remix-project/remixd
    + +

    然后我们创建一个 sol 文件并在终端中找到他的文件夹所在地输入命令 remixd

    +

    image-20240426153643076

    +

    并在网页上点击content进行连接即可完成

    +

    image-20240426153811790

    +

    总结

    这一讲,我们介绍了 solidity 、开发工具 remix 并且介绍了一下 vscode 和 remix 如何进行联动编写 HelloWorld。

    +

    参考资料

    Solidity 中文文档

    +

    decert

    +

    WTF

    +

    阮一峰区块链入门教程

    +

    崔棉大师solidity教程

    + + +

    数据类型

    基本数据类型

    布尔类型（bool）：true 或 false。
    整数类型（int / uint）：有符号整数和无符号整数，可以指定位数（如 uint8、int256）。
    固定大小的字节数组（bytesN）：不可变长度的字节数组，N 可以是 1 到 32 之间的任意整数。
    动态大小的字节数组（bytes）：不固定长度的字节数组。
    固定大小的字符串（stringN）：不可变长度的字符串，N 可以是 1 到 32 之间的任意整数。
    动态大小的字符串（string）：不固定长度的字符串。

    +

    复合数据类型

    数组（array）：可以是固定长度的数组（如 uint[5]）或动态长度的数组（如 uint[]）。
    结构体（struct）：自定义的数据结构，可以包含多个不同类型的数据成员。
    枚举（enum）：用于声明一组命名的常量值序列的用户定义类型。

    +

    地址和地址相关类型

    地址（address）：存储 20 字节的 Ethereum 地址。
    地址数组（address[]）：地址的动态数组。
    地址映射（mapping）：键值对的映射结构，其中键是地址类型，值可以是任意数据类型。

    +
    头像头像
    WaterBoat
    正因你我生于繁华，弥足之花方显珍贵
    原创Solidity 龟速入门教程
    本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
    Solidity1 区块链1 教程1
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/2025/01/13/\345\211\215\347\253\257/TypeScript/02.\344\270\264\346\227\266\347\254\224\350\256\260/index.html" "b/2025/01/13/\345\211\215\347\253\257/TypeScript/02.\344\270\264\346\227\266\347\254\224\350\256\260/index.html" new file mode 100644 index 0000000000..e09ce6e8be --- /dev/null +++ "b/2025/01/13/\345\211\215\347\253\257/TypeScript/02.\344\270\264\346\227\266\347\254\224\350\256\260/index.html" @@ -0,0 +1,369 @@ +临时笔记 | WaterBoat的博客
    加载头像
    原创

    临时笔记

    发表于更新于
    长沙

    临时笔记

    typescript

    Object.defineProperty(obj, prop, descriptor)

      +
    • 作用: 可以用来精确添加或修改对象的属性，只需要在 descriptor 对象中将属性特性描述清楚
      • +
    +
      +
    1. 数据描述符，它拥有四个属性配置
      2. +
    2. configurable：数据是否可删除，可配置
      3. +
    3. enumerable：属性是否可枚举
      4. +
    4. value：属性值,默认为 undefined
      5. +
    5. writable：属性是否可读写
      6. +
    6. get:一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。
      7. +
    7. set:一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。
      8. +
    +

    1—-4 案例

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    let obj = { name: "123", age: 18 };
    Object.defineProperty(obj, "name", {
      configurable: false, // name 不可删除
      enumerable: false, // name 不可便利出来
      writable: false, // name 的值无法改写
    });
    for (const key in obj) {
      console.log(key, obj[key]); // 18
    }
    delete obj.name;
    obj.name = "李四"; // 无法改写
    console.log(obj); // { name: "123", age: 18 }
    Object.defineProperty(obj, "age", {
      value: "age的值被修改了",
    });
    console.log(obj); // {age: "age的值被修改了", name: "123"}
    + +

    6—7 案例

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    let obj2 = { name: "李四", age: 20 };
    let value = "张三";
    Object.defineProperty(obj2, "name", {
      get() {
        console.log("get 我被执行了");
        return value; // 设置了 name 的值
      },
      set(newvalue) {
        console.log("set 我被执行了");
      },
    });
    console.log(obj2.name); // 张三
    obj2.name = "王五"; // 设置值调用 19 行
    + +

    https://shanyue.tech/

    +
    头像头像
    WaterBoat
    正因你我生于繁华，弥足之花方显珍贵
    原创临时笔记
    本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 WaterBoat的博客！
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    最近发布
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/404.html b/404.html new file mode 100644 index 0000000000..a61cd60b9b --- /dev/null +++ b/404.html @@ -0,0 +1,341 @@ +页面没有找到 | WaterBoat的博客
    加载头像

    404

    请尝试站内搜索寻找文章
    回到主页
    Solidity 龟速入门教程
    Solidity 龟速入门教程
    Cypress 使用指南
    Cypress 使用指南
    npm 别名---让小明变成小红
    npm 别名---让小明变成小红
    发布-订阅模式
    发布-订阅模式
    Vue Cli 配置
    Vue Cli 配置
    Vue3-Setup语法糖
    Vue3-Setup语法糖
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/CNAME b/CNAME new file mode 100644 index 0000000000..51e0d2e03a --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +blog.yichengloong.cn \ No newline at end of file diff --git a/about/index.html b/about/index.html new file mode 100644 index 0000000000..32c20dca5e --- /dev/null +++ b/about/index.html @@ -0,0 +1,485 @@ +about | WaterBoat的博客
    加载头像

    about

    avatar

    正因你我生于繁华，弥足之花方显珍贵✨

    你好，很高兴认识你👋
    我叫 易成龙
    是一名 前端工程师、独立开发者
    追求

    源于
    热爱而去 感受
    学习生活程序 体验

    Hello there!

    技能
    开启创造力
    生涯
    无限进步
    生涯
    我现在住在中国，深圳市
    生于 庚辰年
    社会大学 软件工程
    现在职业 打工人👷🏻
    性格
    执政官
    ESFJ-A
    在 16personalities 了解更多关于 执政官
    人格
    自拍
    座右铭
    正因你我生于繁华， 弥足之花方显珍贵。
    特长
    编程 专注 负责 中二病晚期 ACG 指数 MAX
    爱好游戏
    原神
    UID: 生成中...
    爱好番剧
    追番
    约定的梦幻岛
    咒术回战
    紫罗兰永恒花园
    鬼灭之刃
    JOJO的奇妙冒险 黄金之风
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/album/index.html b/album/index.html new file mode 100644 index 0000000000..d9e94bf167 --- /dev/null +++ b/album/index.html @@ -0,0 +1,341 @@ +相册集 | WaterBoat的博客
    加载头像

    相册集

    相册集
    这里是我的相册集哦😯
    每一张照片都是一次美好的记忆。

    世界各地夕阳与风景

    因为到不了世界各地，所以请网友们发来了各地的夕阳与风景🌇。

    我的日常

    这里存放的是有关我自己的一些沙雕生活与有趣的事情。

    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/anzhiyu/random.js b/anzhiyu/random.js new file mode 100644 index 0000000000..52e131ea6c --- /dev/null +++ b/anzhiyu/random.js @@ -0,0 +1,3 @@ +var posts=["2021/06/08/信安工具/01-工具下载链接/","2022/05/20/前端/01-npm别名/","2020/05/20/原神/原神抽卡记录抓取/","2021/05/01/后端/01-Sql基础/","2021/05/01/后端/03-MySQL踩坑/","2023/07/17/前端/Cypress/01-Cypress 使用指南/","2021/05/14/前端/JavaScript/01-Effective JavaScript 编写高质量JavaScript代码的68个有效方法/","2021/10/28/前端/JavaScript/02-JavsScript高级/","2021/10/28/前端/JavaScript/01-JavaScript小技巧/","2021/05/20/前端/JavaScript/02-hash 和 history 路由的区别/","2021/05/02/前端/JavaScript/03-实现防抖和节流/","2021/09/29/前端/Nuxt/01-Nuxt/","2021/05/07/前端/React/02-Redux笔记/","2021/05/07/前端/React/01-React笔记/","2021/06/10/前端/React/03-React-hooks/","2021/06/10/前端/React/04-React常用库/","2021/05/07/前端/React/React总结笔记/","2021/03/08/前端/TypeScript/01.TypeScript笔记/","2021/03/08/前端/Vue/01-Vue2/","2020/05/08/前端/Vue/02-Vue3/","2020/05/08/前端/Vue/03-Vue3-组合式 API/","2022/02/08/前端/Vue/04-VueCli/","2022/02/08/前端/Vue/05-Vu3-Setup语法糖/","2021/06/08/前端/shell/01-windows-powerline/","2024/01/01/区块链/Solidity/01-Solidity 入门教程/","2022/05/10/前端/JavaScript/JavaScript设计模式/08-发布-订阅模式/"];function toRandomPost(){ + pjax.loadUrl('/'+posts[Math.floor(Math.random() * posts.length)]); + }; \ No newline at end of file diff --git a/archives/2020/05/index.html b/archives/2020/05/index.html new file mode 100644 index 0000000000..97ca9ec403 --- /dev/null +++ b/archives/2020/05/index.html @@ -0,0 +1,342 @@ +五月 2020 | WaterBoat的博客
    加载头像
    文章总览 - 3
    2020
    原神抽卡记录抓取
    原神抽卡记录抓取1
    原神
    Vue 3.0 笔记
    Vue 3.0 笔记2
    Vue
    Vue 3.0 组合式 API
    Vue 3.0 组合式 API3
    Vue
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/archives/2020/index.html b/archives/2020/index.html new file mode 100644 index 0000000000..958a3463c2 --- /dev/null +++ b/archives/2020/index.html @@ -0,0 +1,342 @@ +2020 | WaterBoat的博客
    加载头像
    文章总览 - 3
    2020
    原神抽卡记录抓取
    原神抽卡记录抓取1
    原神
    Vue 3.0 笔记
    Vue 3.0 笔记2
    Vue
    Vue 3.0 组合式 API
    Vue 3.0 组合式 API3
    Vue
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/archives/2021/03/index.html b/archives/2021/03/index.html new file mode 100644 index 0000000000..38bb606bda --- /dev/null +++ b/archives/2021/03/index.html @@ -0,0 +1,342 @@ +三月 2021 | WaterBoat的博客
    加载头像
    文章总览 - 2
    2021
    TypeScript 笔记
    TypeScript 笔记1
    TypeScript
    Vue 2.0 笔记
    Vue 2.0 笔记2
    Vue
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/archives/2021/05/index.html b/archives/2021/05/index.html new file mode 100644 index 0000000000..541d8b35d3 --- /dev/null +++ b/archives/2021/05/index.html @@ -0,0 +1,342 @@ +五月 2021 | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/archives/2021/06/index.html b/archives/2021/06/index.html new file mode 100644 index 0000000000..14d8179f2b --- /dev/null +++ b/archives/2021/06/index.html @@ -0,0 +1,342 @@ +六月 2021 | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/archives/2021/09/index.html b/archives/2021/09/index.html new file mode 100644 index 0000000000..a1464deb88 --- /dev/null +++ b/archives/2021/09/index.html @@ -0,0 +1,342 @@ +九月 2021 | WaterBoat的博客
    加载头像
    文章总览 - 1
    2021
    Nuxt 笔记
    Nuxt 笔记1
    Vue Nuxt
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/archives/2021/10/index.html b/archives/2021/10/index.html new file mode 100644 index 0000000000..f6d9767735 --- /dev/null +++ b/archives/2021/10/index.html @@ -0,0 +1,342 @@ +十月 2021 | WaterBoat的博客
    加载头像
    文章总览 - 2
    2021
    JavaScript 高级
    JavaScript 高级1
    JavaScript
    JavaScript 小技巧
    JavaScript 小技巧2
    JavaScript
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/archives/2021/index.html b/archives/2021/index.html new file mode 100644 index 0000000000..ce3ff278e3 --- /dev/null +++ b/archives/2021/index.html @@ -0,0 +1,342 @@ +2021 | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/archives/2021/page/2/index.html b/archives/2021/page/2/index.html new file mode 100644 index 0000000000..f1f5aaffe6 --- /dev/null +++ b/archives/2021/page/2/index.html @@ -0,0 +1,342 @@ +2021 | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/archives/2022/02/index.html b/archives/2022/02/index.html new file mode 100644 index 0000000000..54d204a58e --- /dev/null +++ b/archives/2022/02/index.html @@ -0,0 +1,342 @@ +二月 2022 | WaterBoat的博客
    加载头像
    文章总览 - 2
    2022
    Vue Cli 配置
    Vue Cli 配置1
    Vue
    Vue3-Setup语法糖
    Vue3-Setup语法糖2
    Vue
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/archives/2022/05/index.html b/archives/2022/05/index.html new file mode 100644 index 0000000000..ed0132d047 --- /dev/null +++ b/archives/2022/05/index.html @@ -0,0 +1,342 @@ +五月 2022 | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/archives/2022/index.html b/archives/2022/index.html new file mode 100644 index 0000000000..fcec3ff9a2 --- /dev/null +++ b/archives/2022/index.html @@ -0,0 +1,342 @@ +2022 | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/archives/2023/07/index.html b/archives/2023/07/index.html new file mode 100644 index 0000000000..55584ff050 --- /dev/null +++ b/archives/2023/07/index.html @@ -0,0 +1,342 @@ +七月 2023 | WaterBoat的博客
    加载头像
    文章总览 - 1
    2023
    Cypress 使用指南
    Cypress 使用指南1
    Cypress 测试
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/archives/2023/index.html b/archives/2023/index.html new file mode 100644 index 0000000000..396231c06d --- /dev/null +++ b/archives/2023/index.html @@ -0,0 +1,342 @@ +2023 | WaterBoat的博客
    加载头像
    文章总览 - 1
    2023
    Cypress 使用指南
    Cypress 使用指南1
    Cypress 测试
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/archives/2024/01/index.html b/archives/2024/01/index.html new file mode 100644 index 0000000000..1132ec3f48 --- /dev/null +++ b/archives/2024/01/index.html @@ -0,0 +1,342 @@ +一月 2024 | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/archives/2024/index.html b/archives/2024/index.html new file mode 100644 index 0000000000..07594669d7 --- /dev/null +++ b/archives/2024/index.html @@ -0,0 +1,342 @@ +2024 | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/archives/index.html b/archives/index.html new file mode 100644 index 0000000000..a3fcd6402f --- /dev/null +++ b/archives/index.html @@ -0,0 +1,342 @@ +归档 | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/archives/page/2/index.html b/archives/page/2/index.html new file mode 100644 index 0000000000..301db3598b --- /dev/null +++ b/archives/page/2/index.html @@ -0,0 +1,342 @@ +归档 | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/archives/page/3/index.html b/archives/page/3/index.html new file mode 100644 index 0000000000..987bd4c8ef --- /dev/null +++ b/archives/page/3/index.html @@ -0,0 +1,342 @@ +归档 | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/assets/algolia/algoliasearch.js b/assets/algolia/algoliasearch.js new file mode 100644 index 0000000000..7707138f15 --- /dev/null +++ b/assets/algolia/algoliasearch.js @@ -0,0 +1,7190 @@ +/*! algoliasearch 3.35.1 | © 2014, 2015 Algolia SAS | github.com/algolia/algoliasearch-client-js */ +(function(f){var g;if(typeof window!=='undefined'){g=window}else if(typeof self!=='undefined'){g=self}g.ALGOLIA_MIGRATION_LAYER=f()})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;owindow.ALGOLIA_SUPPORTS_DOCWRITE = true\x3C/script>'); + + if (window.ALGOLIA_SUPPORTS_DOCWRITE === true) { + document.write('\x3Cscript src="' + v2ScriptUrl + '">\x3C/script>'); + scriptLoaded('document.write')(); + } else { + loadScript(v2ScriptUrl, scriptLoaded('DOMElement')); + } + } catch (e) { + loadScript(v2ScriptUrl, scriptLoaded('DOMElement')); + } +} + +function scriptLoaded(method) { + return function log() { + var message = 'AlgoliaSearch: loaded V2 script using ' + method; + + if (window.console && window.console.log) { + window.console.log(message); + } + }; +} + +},{"1":1}],4:[function(require,module,exports){ +'use strict'; + +/* eslint no-unused-vars: [2, {"vars": "local"}] */ + +module.exports = oldGlobals; + +// put old window.AlgoliaSearch.. into window. again so that +// users upgrading to V3 without changing their code, will be warned +function oldGlobals() { + var message = '-- AlgoliaSearch V2 => V3 error --\n' + + 'You are trying to use a new version of the AlgoliaSearch JavaScript client with an old notation.\n' + + 'Please read our migration guide at https://github.com/algolia/algoliasearch-client-js/wiki/Migration-guide-from-2.x.x-to-3.x.x\n' + + '-- /AlgoliaSearch V2 => V3 error --'; + + window.AlgoliaSearch = function() { + throw new Error(message); + }; + + window.AlgoliaSearchHelper = function() { + throw new Error(message); + }; + + window.AlgoliaExplainResults = function() { + throw new Error(message); + }; +} + +},{}],5:[function(require,module,exports){ +'use strict'; + +// This script will be browserified and prepended to the normal build +// directly in window, not wrapped in any module definition +// To avoid cases where we are loaded with /latest/ along with +migrationLayer("algoliasearch"); + +// Now onto the V2 related code: +// If the client is using /latest/$BUILDNAME.min.js, load V2 of the library +// +// Otherwise, setup a migration layer that will throw on old constructors like +// new AlgoliaSearch(). +// So that users upgrading from v2 to v3 will have a clear information +// message on what to do if they did not read the migration guide +function migrationLayer(buildName) { + var isUsingLatest = require(2); + var loadV2 = require(3); + var oldGlobals = require(4); + + if (isUsingLatest(buildName)) { + loadV2(buildName); + } else { + oldGlobals(); + } +} + +},{"2":2,"3":3,"4":4}]},{},[5])(5) +});(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.algoliasearch = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o= v31, + * and the Firebug extension (any Firefox version) are known + * to support "%c" CSS customizations. + * + * TODO: add a `localStorage` variable to explicitly enable/disable colors + */ + +function useColors() { + // NB: In an Electron preload script, document will be defined but not fully + // initialized. Since we know we're in Chrome, we'll just detect this case + // explicitly + if (typeof window !== 'undefined' && window.process && window.process.type === 'renderer') { + return true; + } + + // is webkit? http://stackoverflow.com/a/16459606/376773 + // document is undefined in react-native: https://github.com/facebook/react-native/pull/1632 + return (typeof document !== 'undefined' && document.documentElement && document.documentElement.style && document.documentElement.style.WebkitAppearance) || + // is firebug? http://stackoverflow.com/a/398120/376773 + (typeof window !== 'undefined' && window.console && (window.console.firebug || (window.console.exception && window.console.table))) || + // is firefox >= v31? + // https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Styling_messages + (typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/) && parseInt(RegExp.$1, 10) >= 31) || + // double check webkit in userAgent just in case we are in a worker + (typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/)); +} + +/** + * Map %j to `JSON.stringify()`, since no Web Inspectors do that by default. + */ + +exports.formatters.j = function(v) { + try { + return JSON.stringify(v); + } catch (err) { + return '[UnexpectedJSONParseError]: ' + err.message; + } +}; + + +/** + * Colorize log arguments if enabled. + * + * @api public + */ + +function formatArgs(args) { + var useColors = this.useColors; + + args[0] = (useColors ? '%c' : '') + + this.namespace + + (useColors ? ' %c' : ' ') + + args[0] + + (useColors ? '%c ' : ' ') + + '+' + exports.humanize(this.diff); + + if (!useColors) return; + + var c = 'color: ' + this.color; + args.splice(1, 0, c, 'color: inherit') + + // the final "%c" is somewhat tricky, because there could be other + // arguments passed either before or after the %c, so we need to + // figure out the correct index to insert the CSS into + var index = 0; + var lastC = 0; + args[0].replace(/%[a-zA-Z%]/g, function(match) { + if ('%%' === match) return; + index++; + if ('%c' === match) { + // we only are interested in the *last* %c + // (the user may have provided their own) + lastC = index; + } + }); + + args.splice(lastC, 0, c); +} + +/** + * Invokes `console.log()` when available. + * No-op when `console.log` is not a "function". + * + * @api public + */ + +function log() { + // this hackery is required for IE8/9, where + // the `console.log` function doesn't have 'apply' + return 'object' === typeof console + && console.log + && Function.prototype.apply.call(console.log, console, arguments); +} + +/** + * Save `namespaces`. + * + * @param {String} namespaces + * @api private + */ + +function save(namespaces) { + try { + if (null == namespaces) { + exports.storage.removeItem('debug'); + } else { + exports.storage.debug = namespaces; + } + } catch(e) {} +} + +/** + * Load `namespaces`. + * + * @return {String} returns the previously persisted debug modes + * @api private + */ + +function load() { + var r; + try { + r = exports.storage.debug; + } catch(e) {} + + // If debug isn't set in LS, and we're in Electron, try to load $DEBUG + if (!r && typeof process !== 'undefined' && 'env' in process) { + r = process.env.DEBUG; + } + + return r; +} + +/** + * Enable namespaces listed in `localStorage.debug` initially. + */ + +exports.enable(load()); + +/** + * Localstorage attempts to return the localstorage. + * + * This is necessary because safari throws + * when a user disables cookies/localstorage + * and you attempt to access it. + * + * @return {LocalStorage} + * @api private + */ + +function localstorage() { + try { + return window.localStorage; + } catch (e) {} +} + +}).call(this,require(12)) +},{"12":12,"2":2}],2:[function(require,module,exports){ + +/** + * This is the common logic for both the Node.js and web browser + * implementations of `debug()`. + * + * Expose `debug()` as the module. + */ + +exports = module.exports = createDebug.debug = createDebug['default'] = createDebug; +exports.coerce = coerce; +exports.disable = disable; +exports.enable = enable; +exports.enabled = enabled; +exports.humanize = require(9); + +/** + * The currently active debug mode names, and names to skip. + */ + +exports.names = []; +exports.skips = []; + +/** + * Map of special "%n" handling functions, for the debug "format" argument. + * + * Valid key names are a single, lower or upper-case letter, i.e. "n" and "N". + */ + +exports.formatters = {}; + +/** + * Previous log timestamp. + */ + +var prevTime; + +/** + * Select a color. + * @param {String} namespace + * @return {Number} + * @api private + */ + +function selectColor(namespace) { + var hash = 0, i; + + for (i in namespace) { + hash = ((hash << 5) - hash) + namespace.charCodeAt(i); + hash |= 0; // Convert to 32bit integer + } + + return exports.colors[Math.abs(hash) % exports.colors.length]; +} + +/** + * Create a debugger with the given `namespace`. + * + * @param {String} namespace + * @return {Function} + * @api public + */ + +function createDebug(namespace) { + + function debug() { + // disabled? + if (!debug.enabled) return; + + var self = debug; + + // set `diff` timestamp + var curr = +new Date(); + var ms = curr - (prevTime || curr); + self.diff = ms; + self.prev = prevTime; + self.curr = curr; + prevTime = curr; + + // turn the `arguments` into a proper Array + var args = new Array(arguments.length); + for (var i = 0; i < args.length; i++) { + args[i] = arguments[i]; + } + + args[0] = exports.coerce(args[0]); + + if ('string' !== typeof args[0]) { + // anything else let's inspect with %O + args.unshift('%O'); + } + + // apply any `formatters` transformations + var index = 0; + args[0] = args[0].replace(/%([a-zA-Z%])/g, function(match, format) { + // if we encounter an escaped % then don't increase the array index + if (match === '%%') return match; + index++; + var formatter = exports.formatters[format]; + if ('function' === typeof formatter) { + var val = args[index]; + match = formatter.call(self, val); + + // now we need to remove `args[index]` since it's inlined in the `format` + args.splice(index, 1); + index--; + } + return match; + }); + + // apply env-specific formatting (colors, etc.) + exports.formatArgs.call(self, args); + + var logFn = debug.log || exports.log || console.log.bind(console); + logFn.apply(self, args); + } + + debug.namespace = namespace; + debug.enabled = exports.enabled(namespace); + debug.useColors = exports.useColors(); + debug.color = selectColor(namespace); + + // env-specific initialization logic for debug instances + if ('function' === typeof exports.init) { + exports.init(debug); + } + + return debug; +} + +/** + * Enables a debug mode by namespaces. This can include modes + * separated by a colon and wildcards. + * + * @param {String} namespaces + * @api public + */ + +function enable(namespaces) { + exports.save(namespaces); + + exports.names = []; + exports.skips = []; + + var split = (typeof namespaces === 'string' ? namespaces : '').split(/[\s,]+/); + var len = split.length; + + for (var i = 0; i < len; i++) { + if (!split[i]) continue; // ignore empty strings + namespaces = split[i].replace(/\*/g, '.*?'); + if (namespaces[0] === '-') { + exports.skips.push(new RegExp('^' + namespaces.substr(1) + '$')); + } else { + exports.names.push(new RegExp('^' + namespaces + '$')); + } + } +} + +/** + * Disable debug output. + * + * @api public + */ + +function disable() { + exports.enable(''); +} + +/** + * Returns true if the given mode name is enabled, false otherwise. + * + * @param {String} name + * @return {Boolean} + * @api public + */ + +function enabled(name) { + var i, len; + for (i = 0, len = exports.skips.length; i < len; i++) { + if (exports.skips[i].test(name)) { + return false; + } + } + for (i = 0, len = exports.names.length; i < len; i++) { + if (exports.names[i].test(name)) { + return true; + } + } + return false; +} + +/** + * Coerce `val`. + * + * @param {Mixed} val + * @return {Mixed} + * @api private + */ + +function coerce(val) { + if (val instanceof Error) return val.stack || val.message; + return val; +} + +},{"9":9}],3:[function(require,module,exports){ +(function (process,global){ +/*! + * @overview es6-promise - a tiny implementation of Promises/A+. + * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald) + * @license Licensed under MIT license + * See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE + * @version 4.1.1 + */ + +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global.ES6Promise = factory()); +}(this, (function () { 'use strict'; + +function objectOrFunction(x) { + var type = typeof x; + return x !== null && (type === 'object' || type === 'function'); +} + +function isFunction(x) { + return typeof x === 'function'; +} + +var _isArray = undefined; +if (Array.isArray) { + _isArray = Array.isArray; +} else { + _isArray = function (x) { + return Object.prototype.toString.call(x) === '[object Array]'; + }; +} + +var isArray = _isArray; + +var len = 0; +var vertxNext = undefined; +var customSchedulerFn = undefined; + +var asap = function asap(callback, arg) { + queue[len] = callback; + queue[len + 1] = arg; + len += 2; + if (len === 2) { + // If len is 2, that means that we need to schedule an async flush. + // If additional callbacks are queued before the queue is flushed, they + // will be processed by this flush that we are scheduling. + if (customSchedulerFn) { + customSchedulerFn(flush); + } else { + scheduleFlush(); + } + } +}; + +function setScheduler(scheduleFn) { + customSchedulerFn = scheduleFn; +} + +function setAsap(asapFn) { + asap = asapFn; +} + +var browserWindow = typeof window !== 'undefined' ? window : undefined; +var browserGlobal = browserWindow || {}; +var BrowserMutationObserver = browserGlobal.MutationObserver || browserGlobal.WebKitMutationObserver; +var isNode = typeof self === 'undefined' && typeof process !== 'undefined' && ({}).toString.call(process) === '[object process]'; + +// test for web worker but not in IE10 +var isWorker = typeof Uint8ClampedArray !== 'undefined' && typeof importScripts !== 'undefined' && typeof MessageChannel !== 'undefined'; + +// node +function useNextTick() { + // node version 0.10.x displays a deprecation warning when nextTick is used recursively + // see https://github.com/cujojs/when/issues/410 for details + return function () { + return process.nextTick(flush); + }; +} + +// vertx +function useVertxTimer() { + if (typeof vertxNext !== 'undefined') { + return function () { + vertxNext(flush); + }; + } + + return useSetTimeout(); +} + +function useMutationObserver() { + var iterations = 0; + var observer = new BrowserMutationObserver(flush); + var node = document.createTextNode(''); + observer.observe(node, { characterData: true }); + + return function () { + node.data = iterations = ++iterations % 2; + }; +} + +// web worker +function useMessageChannel() { + var channel = new MessageChannel(); + channel.port1.onmessage = flush; + return function () { + return channel.port2.postMessage(0); + }; +} + +function useSetTimeout() { + // Store setTimeout reference so es6-promise will be unaffected by + // other code modifying setTimeout (like sinon.useFakeTimers()) + var globalSetTimeout = setTimeout; + return function () { + return globalSetTimeout(flush, 1); + }; +} + +var queue = new Array(1000); +function flush() { + for (var i = 0; i < len; i += 2) { + var callback = queue[i]; + var arg = queue[i + 1]; + + callback(arg); + + queue[i] = undefined; + queue[i + 1] = undefined; + } + + len = 0; +} + +function attemptVertx() { + try { + var r = require; + var vertx = r('vertx'); + vertxNext = vertx.runOnLoop || vertx.runOnContext; + return useVertxTimer(); + } catch (e) { + return useSetTimeout(); + } +} + +var scheduleFlush = undefined; +// Decide what async method to use to triggering processing of queued callbacks: +if (isNode) { + scheduleFlush = useNextTick(); +} else if (BrowserMutationObserver) { + scheduleFlush = useMutationObserver(); +} else if (isWorker) { + scheduleFlush = useMessageChannel(); +} else if (browserWindow === undefined && typeof require === 'function') { + scheduleFlush = attemptVertx(); +} else { + scheduleFlush = useSetTimeout(); +} + +function then(onFulfillment, onRejection) { + var _arguments = arguments; + + var parent = this; + + var child = new this.constructor(noop); + + if (child[PROMISE_ID] === undefined) { + makePromise(child); + } + + var _state = parent._state; + + if (_state) { + (function () { + var callback = _arguments[_state - 1]; + asap(function () { + return invokeCallback(_state, child, callback, parent._result); + }); + })(); + } else { + subscribe(parent, child, onFulfillment, onRejection); + } + + return child; +} + +/** + `Promise.resolve` returns a promise that will become resolved with the + passed `value`. It is shorthand for the following: + + ```javascript + let promise = new Promise(function(resolve, reject){ + resolve(1); + }); + + promise.then(function(value){ + // value === 1 + }); + ``` + + Instead of writing the above, your code now simply becomes the following: + + ```javascript + let promise = Promise.resolve(1); + + promise.then(function(value){ + // value === 1 + }); + ``` + + @method resolve + @static + @param {Any} value value that the returned promise will be resolved with + Useful for tooling. + @return {Promise} a promise that will become fulfilled with the given + `value` +*/ +function resolve$1(object) { + /*jshint validthis:true */ + var Constructor = this; + + if (object && typeof object === 'object' && object.constructor === Constructor) { + return object; + } + + var promise = new Constructor(noop); + resolve(promise, object); + return promise; +} + +var PROMISE_ID = Math.random().toString(36).substring(16); + +function noop() {} + +var PENDING = void 0; +var FULFILLED = 1; +var REJECTED = 2; + +var GET_THEN_ERROR = new ErrorObject(); + +function selfFulfillment() { + return new TypeError("You cannot resolve a promise with itself"); +} + +function cannotReturnOwn() { + return new TypeError('A promises callback cannot return that same promise.'); +} + +function getThen(promise) { + try { + return promise.then; + } catch (error) { + GET_THEN_ERROR.error = error; + return GET_THEN_ERROR; + } +} + +function tryThen(then$$1, value, fulfillmentHandler, rejectionHandler) { + try { + then$$1.call(value, fulfillmentHandler, rejectionHandler); + } catch (e) { + return e; + } +} + +function handleForeignThenable(promise, thenable, then$$1) { + asap(function (promise) { + var sealed = false; + var error = tryThen(then$$1, thenable, function (value) { + if (sealed) { + return; + } + sealed = true; + if (thenable !== value) { + resolve(promise, value); + } else { + fulfill(promise, value); + } + }, function (reason) { + if (sealed) { + return; + } + sealed = true; + + reject(promise, reason); + }, 'Settle: ' + (promise._label || ' unknown promise')); + + if (!sealed && error) { + sealed = true; + reject(promise, error); + } + }, promise); +} + +function handleOwnThenable(promise, thenable) { + if (thenable._state === FULFILLED) { + fulfill(promise, thenable._result); + } else if (thenable._state === REJECTED) { + reject(promise, thenable._result); + } else { + subscribe(thenable, undefined, function (value) { + return resolve(promise, value); + }, function (reason) { + return reject(promise, reason); + }); + } +} + +function handleMaybeThenable(promise, maybeThenable, then$$1) { + if (maybeThenable.constructor === promise.constructor && then$$1 === then && maybeThenable.constructor.resolve === resolve$1) { + handleOwnThenable(promise, maybeThenable); + } else { + if (then$$1 === GET_THEN_ERROR) { + reject(promise, GET_THEN_ERROR.error); + GET_THEN_ERROR.error = null; + } else if (then$$1 === undefined) { + fulfill(promise, maybeThenable); + } else if (isFunction(then$$1)) { + handleForeignThenable(promise, maybeThenable, then$$1); + } else { + fulfill(promise, maybeThenable); + } + } +} + +function resolve(promise, value) { + if (promise === value) { + reject(promise, selfFulfillment()); + } else if (objectOrFunction(value)) { + handleMaybeThenable(promise, value, getThen(value)); + } else { + fulfill(promise, value); + } +} + +function publishRejection(promise) { + if (promise._onerror) { + promise._onerror(promise._result); + } + + publish(promise); +} + +function fulfill(promise, value) { + if (promise._state !== PENDING) { + return; + } + + promise._result = value; + promise._state = FULFILLED; + + if (promise._subscribers.length !== 0) { + asap(publish, promise); + } +} + +function reject(promise, reason) { + if (promise._state !== PENDING) { + return; + } + promise._state = REJECTED; + promise._result = reason; + + asap(publishRejection, promise); +} + +function subscribe(parent, child, onFulfillment, onRejection) { + var _subscribers = parent._subscribers; + var length = _subscribers.length; + + parent._onerror = null; + + _subscribers[length] = child; + _subscribers[length + FULFILLED] = onFulfillment; + _subscribers[length + REJECTED] = onRejection; + + if (length === 0 && parent._state) { + asap(publish, parent); + } +} + +function publish(promise) { + var subscribers = promise._subscribers; + var settled = promise._state; + + if (subscribers.length === 0) { + return; + } + + var child = undefined, + callback = undefined, + detail = promise._result; + + for (var i = 0; i < subscribers.length; i += 3) { + child = subscribers[i]; + callback = subscribers[i + settled]; + + if (child) { + invokeCallback(settled, child, callback, detail); + } else { + callback(detail); + } + } + + promise._subscribers.length = 0; +} + +function ErrorObject() { + this.error = null; +} + +var TRY_CATCH_ERROR = new ErrorObject(); + +function tryCatch(callback, detail) { + try { + return callback(detail); + } catch (e) { + TRY_CATCH_ERROR.error = e; + return TRY_CATCH_ERROR; + } +} + +function invokeCallback(settled, promise, callback, detail) { + var hasCallback = isFunction(callback), + value = undefined, + error = undefined, + succeeded = undefined, + failed = undefined; + + if (hasCallback) { + value = tryCatch(callback, detail); + + if (value === TRY_CATCH_ERROR) { + failed = true; + error = value.error; + value.error = null; + } else { + succeeded = true; + } + + if (promise === value) { + reject(promise, cannotReturnOwn()); + return; + } + } else { + value = detail; + succeeded = true; + } + + if (promise._state !== PENDING) { + // noop + } else if (hasCallback && succeeded) { + resolve(promise, value); + } else if (failed) { + reject(promise, error); + } else if (settled === FULFILLED) { + fulfill(promise, value); + } else if (settled === REJECTED) { + reject(promise, value); + } +} + +function initializePromise(promise, resolver) { + try { + resolver(function resolvePromise(value) { + resolve(promise, value); + }, function rejectPromise(reason) { + reject(promise, reason); + }); + } catch (e) { + reject(promise, e); + } +} + +var id = 0; +function nextId() { + return id++; +} + +function makePromise(promise) { + promise[PROMISE_ID] = id++; + promise._state = undefined; + promise._result = undefined; + promise._subscribers = []; +} + +function Enumerator$1(Constructor, input) { + this._instanceConstructor = Constructor; + this.promise = new Constructor(noop); + + if (!this.promise[PROMISE_ID]) { + makePromise(this.promise); + } + + if (isArray(input)) { + this.length = input.length; + this._remaining = input.length; + + this._result = new Array(this.length); + + if (this.length === 0) { + fulfill(this.promise, this._result); + } else { + this.length = this.length || 0; + this._enumerate(input); + if (this._remaining === 0) { + fulfill(this.promise, this._result); + } + } + } else { + reject(this.promise, validationError()); + } +} + +function validationError() { + return new Error('Array Methods must be provided an Array'); +} + +Enumerator$1.prototype._enumerate = function (input) { + for (var i = 0; this._state === PENDING && i < input.length; i++) { + this._eachEntry(input[i], i); + } +}; + +Enumerator$1.prototype._eachEntry = function (entry, i) { + var c = this._instanceConstructor; + var resolve$$1 = c.resolve; + + if (resolve$$1 === resolve$1) { + var _then = getThen(entry); + + if (_then === then && entry._state !== PENDING) { + this._settledAt(entry._state, i, entry._result); + } else if (typeof _then !== 'function') { + this._remaining--; + this._result[i] = entry; + } else if (c === Promise$2) { + var promise = new c(noop); + handleMaybeThenable(promise, entry, _then); + this._willSettleAt(promise, i); + } else { + this._willSettleAt(new c(function (resolve$$1) { + return resolve$$1(entry); + }), i); + } + } else { + this._willSettleAt(resolve$$1(entry), i); + } +}; + +Enumerator$1.prototype._settledAt = function (state, i, value) { + var promise = this.promise; + + if (promise._state === PENDING) { + this._remaining--; + + if (state === REJECTED) { + reject(promise, value); + } else { + this._result[i] = value; + } + } + + if (this._remaining === 0) { + fulfill(promise, this._result); + } +}; + +Enumerator$1.prototype._willSettleAt = function (promise, i) { + var enumerator = this; + + subscribe(promise, undefined, function (value) { + return enumerator._settledAt(FULFILLED, i, value); + }, function (reason) { + return enumerator._settledAt(REJECTED, i, reason); + }); +}; + +/** + `Promise.all` accepts an array of promises, and returns a new promise which + is fulfilled with an array of fulfillment values for the passed promises, or + rejected with the reason of the first passed promise to be rejected. It casts all + elements of the passed iterable to promises as it runs this algorithm. + + Example: + + ```javascript + let promise1 = resolve(1); + let promise2 = resolve(2); + let promise3 = resolve(3); + let promises = [ promise1, promise2, promise3 ]; + + Promise.all(promises).then(function(array){ + // The array here would be [ 1, 2, 3 ]; + }); + ``` + + If any of the `promises` given to `all` are rejected, the first promise + that is rejected will be given as an argument to the returned promises's + rejection handler. For example: + + Example: + + ```javascript + let promise1 = resolve(1); + let promise2 = reject(new Error("2")); + let promise3 = reject(new Error("3")); + let promises = [ promise1, promise2, promise3 ]; + + Promise.all(promises).then(function(array){ + // Code here never runs because there are rejected promises! + }, function(error) { + // error.message === "2" + }); + ``` + + @method all + @static + @param {Array} entries array of promises + @param {String} label optional string for labeling the promise. + Useful for tooling. + @return {Promise} promise that is fulfilled when all `promises` have been + fulfilled, or rejected if any of them become rejected. + @static +*/ +function all$1(entries) { + return new Enumerator$1(this, entries).promise; +} + +/** + `Promise.race` returns a new promise which is settled in the same way as the + first passed promise to settle. + + Example: + + ```javascript + let promise1 = new Promise(function(resolve, reject){ + setTimeout(function(){ + resolve('promise 1'); + }, 200); + }); + + let promise2 = new Promise(function(resolve, reject){ + setTimeout(function(){ + resolve('promise 2'); + }, 100); + }); + + Promise.race([promise1, promise2]).then(function(result){ + // result === 'promise 2' because it was resolved before promise1 + // was resolved. + }); + ``` + + `Promise.race` is deterministic in that only the state of the first + settled promise matters. For example, even if other promises given to the + `promises` array argument are resolved, but the first settled promise has + become rejected before the other promises became fulfilled, the returned + promise will become rejected: + + ```javascript + let promise1 = new Promise(function(resolve, reject){ + setTimeout(function(){ + resolve('promise 1'); + }, 200); + }); + + let promise2 = new Promise(function(resolve, reject){ + setTimeout(function(){ + reject(new Error('promise 2')); + }, 100); + }); + + Promise.race([promise1, promise2]).then(function(result){ + // Code here never runs + }, function(reason){ + // reason.message === 'promise 2' because promise 2 became rejected before + // promise 1 became fulfilled + }); + ``` + + An example real-world use case is implementing timeouts: + + ```javascript + Promise.race([ajax('foo.json'), timeout(5000)]) + ``` + + @method race + @static + @param {Array} promises array of promises to observe + Useful for tooling. + @return {Promise} a promise which settles in the same way as the first passed + promise to settle. +*/ +function race$1(entries) { + /*jshint validthis:true */ + var Constructor = this; + + if (!isArray(entries)) { + return new Constructor(function (_, reject) { + return reject(new TypeError('You must pass an array to race.')); + }); + } else { + return new Constructor(function (resolve, reject) { + var length = entries.length; + for (var i = 0; i < length; i++) { + Constructor.resolve(entries[i]).then(resolve, reject); + } + }); + } +} + +/** + `Promise.reject` returns a promise rejected with the passed `reason`. + It is shorthand for the following: + + ```javascript + let promise = new Promise(function(resolve, reject){ + reject(new Error('WHOOPS')); + }); + + promise.then(function(value){ + // Code here doesn't run because the promise is rejected! + }, function(reason){ + // reason.message === 'WHOOPS' + }); + ``` + + Instead of writing the above, your code now simply becomes the following: + + ```javascript + let promise = Promise.reject(new Error('WHOOPS')); + + promise.then(function(value){ + // Code here doesn't run because the promise is rejected! + }, function(reason){ + // reason.message === 'WHOOPS' + }); + ``` + + @method reject + @static + @param {Any} reason value that the returned promise will be rejected with. + Useful for tooling. + @return {Promise} a promise rejected with the given `reason`. +*/ +function reject$1(reason) { + /*jshint validthis:true */ + var Constructor = this; + var promise = new Constructor(noop); + reject(promise, reason); + return promise; +} + +function needsResolver() { + throw new TypeError('You must pass a resolver function as the first argument to the promise constructor'); +} + +function needsNew() { + throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function."); +} + +/** + Promise objects represent the eventual result of an asynchronous operation. The + primary way of interacting with a promise is through its `then` method, which + registers callbacks to receive either a promise's eventual value or the reason + why the promise cannot be fulfilled. + + Terminology + ----------- + + - `promise` is an object or function with a `then` method whose behavior conforms to this specification. + - `thenable` is an object or function that defines a `then` method. + - `value` is any legal JavaScript value (including undefined, a thenable, or a promise). + - `exception` is a value that is thrown using the throw statement. + - `reason` is a value that indicates why a promise was rejected. + - `settled` the final resting state of a promise, fulfilled or rejected. + + A promise can be in one of three states: pending, fulfilled, or rejected. + + Promises that are fulfilled have a fulfillment value and are in the fulfilled + state. Promises that are rejected have a rejection reason and are in the + rejected state. A fulfillment value is never a thenable. + + Promises can also be said to *resolve* a value. If this value is also a + promise, then the original promise's settled state will match the value's + settled state. So a promise that *resolves* a promise that rejects will + itself reject, and a promise that *resolves* a promise that fulfills will + itself fulfill. + + + Basic Usage: + ------------ + + ```js + let promise = new Promise(function(resolve, reject) { + // on success + resolve(value); + + // on failure + reject(reason); + }); + + promise.then(function(value) { + // on fulfillment + }, function(reason) { + // on rejection + }); + ``` + + Advanced Usage: + --------------- + + Promises shine when abstracting away asynchronous interactions such as + `XMLHttpRequest`s. + + ```js + function getJSON(url) { + return new Promise(function(resolve, reject){ + let xhr = new XMLHttpRequest(); + + xhr.open('GET', url); + xhr.onreadystatechange = handler; + xhr.responseType = 'json'; + xhr.setRequestHeader('Accept', 'application/json'); + xhr.send(); + + function handler() { + if (this.readyState === this.DONE) { + if (this.status === 200) { + resolve(this.response); + } else { + reject(new Error('getJSON: `' + url + '` failed with status: [' + this.status + ']')); + } + } + }; + }); + } + + getJSON('/posts.json').then(function(json) { + // on fulfillment + }, function(reason) { + // on rejection + }); + ``` + + Unlike callbacks, promises are great composable primitives. + + ```js + Promise.all([ + getJSON('/posts'), + getJSON('/comments') + ]).then(function(values){ + values[0] // => postsJSON + values[1] // => commentsJSON + + return values; + }); + ``` + + @class Promise + @param {function} resolver + Useful for tooling. + @constructor +*/ +function Promise$2(resolver) { + this[PROMISE_ID] = nextId(); + this._result = this._state = undefined; + this._subscribers = []; + + if (noop !== resolver) { + typeof resolver !== 'function' && needsResolver(); + this instanceof Promise$2 ? initializePromise(this, resolver) : needsNew(); + } +} + +Promise$2.all = all$1; +Promise$2.race = race$1; +Promise$2.resolve = resolve$1; +Promise$2.reject = reject$1; +Promise$2._setScheduler = setScheduler; +Promise$2._setAsap = setAsap; +Promise$2._asap = asap; + +Promise$2.prototype = { + constructor: Promise$2, + + /** + The primary way of interacting with a promise is through its `then` method, + which registers callbacks to receive either a promise's eventual value or the + reason why the promise cannot be fulfilled. + + ```js + findUser().then(function(user){ + // user is available + }, function(reason){ + // user is unavailable, and you are given the reason why + }); + ``` + + Chaining + -------- + + The return value of `then` is itself a promise. This second, 'downstream' + promise is resolved with the return value of the first promise's fulfillment + or rejection handler, or rejected if the handler throws an exception. + + ```js + findUser().then(function (user) { + return user.name; + }, function (reason) { + return 'default name'; + }).then(function (userName) { + // If `findUser` fulfilled, `userName` will be the user's name, otherwise it + // will be `'default name'` + }); + + findUser().then(function (user) { + throw new Error('Found user, but still unhappy'); + }, function (reason) { + throw new Error('`findUser` rejected and we're unhappy'); + }).then(function (value) { + // never reached + }, function (reason) { + // if `findUser` fulfilled, `reason` will be 'Found user, but still unhappy'. + // If `findUser` rejected, `reason` will be '`findUser` rejected and we're unhappy'. + }); + ``` + If the downstream promise does not specify a rejection handler, rejection reasons will be propagated further downstream. + + ```js + findUser().then(function (user) { + throw new PedagogicalException('Upstream error'); + }).then(function (value) { + // never reached + }).then(function (value) { + // never reached + }, function (reason) { + // The `PedgagocialException` is propagated all the way down to here + }); + ``` + + Assimilation + ------------ + + Sometimes the value you want to propagate to a downstream promise can only be + retrieved asynchronously. This can be achieved by returning a promise in the + fulfillment or rejection handler. The downstream promise will then be pending + until the returned promise is settled. This is called *assimilation*. + + ```js + findUser().then(function (user) { + return findCommentsByAuthor(user); + }).then(function (comments) { + // The user's comments are now available + }); + ``` + + If the assimliated promise rejects, then the downstream promise will also reject. + + ```js + findUser().then(function (user) { + return findCommentsByAuthor(user); + }).then(function (comments) { + // If `findCommentsByAuthor` fulfills, we'll have the value here + }, function (reason) { + // If `findCommentsByAuthor` rejects, we'll have the reason here + }); + ``` + + Simple Example + -------------- + + Synchronous Example + + ```javascript + let result; + + try { + result = findResult(); + // success + } catch(reason) { + // failure + } + ``` + + Errback Example + + ```js + findResult(function(result, err){ + if (err) { + // failure + } else { + // success + } + }); + ``` + + Promise Example; + + ```javascript + findResult().then(function(result){ + // success + }, function(reason){ + // failure + }); + ``` + + Advanced Example + -------------- + + Synchronous Example + + ```javascript + let author, books; + + try { + author = findAuthor(); + books = findBooksByAuthor(author); + // success + } catch(reason) { + // failure + } + ``` + + Errback Example + + ```js + + function foundBooks(books) { + + } + + function failure(reason) { + + } + + findAuthor(function(author, err){ + if (err) { + failure(err); + // failure + } else { + try { + findBoooksByAuthor(author, function(books, err) { + if (err) { + failure(err); + } else { + try { + foundBooks(books); + } catch(reason) { + failure(reason); + } + } + }); + } catch(error) { + failure(err); + } + // success + } + }); + ``` + + Promise Example; + + ```javascript + findAuthor(). + then(findBooksByAuthor). + then(function(books){ + // found books + }).catch(function(reason){ + // something went wrong + }); + ``` + + @method then + @param {Function} onFulfilled + @param {Function} onRejected + Useful for tooling. + @return {Promise} + */ + then: then, + + /** + `catch` is simply sugar for `then(undefined, onRejection)` which makes it the same + as the catch block of a try/catch statement. + + ```js + function findAuthor(){ + throw new Error('couldn't find that author'); + } + + // synchronous + try { + findAuthor(); + } catch(reason) { + // something went wrong + } + + // async with promises + findAuthor().catch(function(reason){ + // something went wrong + }); + ``` + + @method catch + @param {Function} onRejection + Useful for tooling. + @return {Promise} + */ + 'catch': function _catch(onRejection) { + return this.then(null, onRejection); + } +}; + +/*global self*/ +function polyfill$1() { + var local = undefined; + + if (typeof global !== 'undefined') { + local = global; + } else if (typeof self !== 'undefined') { + local = self; + } else { + try { + local = Function('return this')(); + } catch (e) { + throw new Error('polyfill failed because global object is unavailable in this environment'); + } + } + + var P = local.Promise; + + if (P) { + var promiseToString = null; + try { + promiseToString = Object.prototype.toString.call(P.resolve()); + } catch (e) { + // silently ignored + } + + if (promiseToString === '[object Promise]' && !P.cast) { + return; + } + } + + local.Promise = Promise$2; +} + +// Strange compat.. +Promise$2.polyfill = polyfill$1; +Promise$2.Promise = Promise$2; + +return Promise$2; + +}))); + + + +}).call(this,require(12),typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) +},{"12":12}],4:[function(require,module,exports){ +// Copyright Joyent, Inc. and other Node contributors. +// +// 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. + +function EventEmitter() { + this._events = this._events || {}; + this._maxListeners = this._maxListeners || undefined; +} +module.exports = EventEmitter; + +// Backwards-compat with node 0.10.x +EventEmitter.EventEmitter = EventEmitter; + +EventEmitter.prototype._events = undefined; +EventEmitter.prototype._maxListeners = undefined; + +// By default EventEmitters will print a warning if more than 10 listeners are +// added to it. This is a useful default which helps finding memory leaks. +EventEmitter.defaultMaxListeners = 10; + +// Obviously not all Emitters should be limited to 10. This function allows +// that to be increased. Set to zero for unlimited. +EventEmitter.prototype.setMaxListeners = function(n) { + if (!isNumber(n) || n < 0 || isNaN(n)) + throw TypeError('n must be a positive number'); + this._maxListeners = n; + return this; +}; + +EventEmitter.prototype.emit = function(type) { + var er, handler, len, args, i, listeners; + + if (!this._events) + this._events = {}; + + // If there is no 'error' event listener then throw. + if (type === 'error') { + if (!this._events.error || + (isObject(this._events.error) && !this._events.error.length)) { + er = arguments[1]; + if (er instanceof Error) { + throw er; // Unhandled 'error' event + } else { + // At least give some kind of context to the user + var err = new Error('Uncaught, unspecified "error" event. (' + er + ')'); + err.context = er; + throw err; + } + } + } + + handler = this._events[type]; + + if (isUndefined(handler)) + return false; + + if (isFunction(handler)) { + switch (arguments.length) { + // fast cases + case 1: + handler.call(this); + break; + case 2: + handler.call(this, arguments[1]); + break; + case 3: + handler.call(this, arguments[1], arguments[2]); + break; + // slower + default: + args = Array.prototype.slice.call(arguments, 1); + handler.apply(this, args); + } + } else if (isObject(handler)) { + args = Array.prototype.slice.call(arguments, 1); + listeners = handler.slice(); + len = listeners.length; + for (i = 0; i < len; i++) + listeners[i].apply(this, args); + } + + return true; +}; + +EventEmitter.prototype.addListener = function(type, listener) { + var m; + + if (!isFunction(listener)) + throw TypeError('listener must be a function'); + + if (!this._events) + this._events = {}; + + // To avoid recursion in the case that type === "newListener"! Before + // adding it to the listeners, first emit "newListener". + if (this._events.newListener) + this.emit('newListener', type, + isFunction(listener.listener) ? + listener.listener : listener); + + if (!this._events[type]) + // Optimize the case of one listener. Don't need the extra array object. + this._events[type] = listener; + else if (isObject(this._events[type])) + // If we've already got an array, just append. + this._events[type].push(listener); + else + // Adding the second element, need to change to array. + this._events[type] = [this._events[type], listener]; + + // Check for listener leak + if (isObject(this._events[type]) && !this._events[type].warned) { + if (!isUndefined(this._maxListeners)) { + m = this._maxListeners; + } else { + m = EventEmitter.defaultMaxListeners; + } + + if (m && m > 0 && this._events[type].length > m) { + this._events[type].warned = true; + console.error('(node) warning: possible EventEmitter memory ' + + 'leak detected. %d listeners added. ' + + 'Use emitter.setMaxListeners() to increase limit.', + this._events[type].length); + if (typeof console.trace === 'function') { + // not supported in IE 10 + console.trace(); + } + } + } + + return this; +}; + +EventEmitter.prototype.on = EventEmitter.prototype.addListener; + +EventEmitter.prototype.once = function(type, listener) { + if (!isFunction(listener)) + throw TypeError('listener must be a function'); + + var fired = false; + + function g() { + this.removeListener(type, g); + + if (!fired) { + fired = true; + listener.apply(this, arguments); + } + } + + g.listener = listener; + this.on(type, g); + + return this; +}; + +// emits a 'removeListener' event iff the listener was removed +EventEmitter.prototype.removeListener = function(type, listener) { + var list, position, length, i; + + if (!isFunction(listener)) + throw TypeError('listener must be a function'); + + if (!this._events || !this._events[type]) + return this; + + list = this._events[type]; + length = list.length; + position = -1; + + if (list === listener || + (isFunction(list.listener) && list.listener === listener)) { + delete this._events[type]; + if (this._events.removeListener) + this.emit('removeListener', type, listener); + + } else if (isObject(list)) { + for (i = length; i-- > 0;) { + if (list[i] === listener || + (list[i].listener && list[i].listener === listener)) { + position = i; + break; + } + } + + if (position < 0) + return this; + + if (list.length === 1) { + list.length = 0; + delete this._events[type]; + } else { + list.splice(position, 1); + } + + if (this._events.removeListener) + this.emit('removeListener', type, listener); + } + + return this; +}; + +EventEmitter.prototype.removeAllListeners = function(type) { + var key, listeners; + + if (!this._events) + return this; + + // not listening for removeListener, no need to emit + if (!this._events.removeListener) { + if (arguments.length === 0) + this._events = {}; + else if (this._events[type]) + delete this._events[type]; + return this; + } + + // emit removeListener for all listeners on all events + if (arguments.length === 0) { + for (key in this._events) { + if (key === 'removeListener') continue; + this.removeAllListeners(key); + } + this.removeAllListeners('removeListener'); + this._events = {}; + return this; + } + + listeners = this._events[type]; + + if (isFunction(listeners)) { + this.removeListener(type, listeners); + } else if (listeners) { + // LIFO order + while (listeners.length) + this.removeListener(type, listeners[listeners.length - 1]); + } + delete this._events[type]; + + return this; +}; + +EventEmitter.prototype.listeners = function(type) { + var ret; + if (!this._events || !this._events[type]) + ret = []; + else if (isFunction(this._events[type])) + ret = [this._events[type]]; + else + ret = this._events[type].slice(); + return ret; +}; + +EventEmitter.prototype.listenerCount = function(type) { + if (this._events) { + var evlistener = this._events[type]; + + if (isFunction(evlistener)) + return 1; + else if (evlistener) + return evlistener.length; + } + return 0; +}; + +EventEmitter.listenerCount = function(emitter, type) { + return emitter.listenerCount(type); +}; + +function isFunction(arg) { + return typeof arg === 'function'; +} + +function isNumber(arg) { + return typeof arg === 'number'; +} + +function isObject(arg) { + return typeof arg === 'object' && arg !== null; +} + +function isUndefined(arg) { + return arg === void 0; +} + +},{}],5:[function(require,module,exports){ + +var hasOwn = Object.prototype.hasOwnProperty; +var toString = Object.prototype.toString; + +module.exports = function forEach (obj, fn, ctx) { + if (toString.call(fn) !== '[object Function]') { + throw new TypeError('iterator must be a function'); + } + var l = obj.length; + if (l === +l) { + for (var i = 0; i < l; i++) { + fn.call(ctx, obj[i], i, obj); + } + } else { + for (var k in obj) { + if (hasOwn.call(obj, k)) { + fn.call(ctx, obj[k], k, obj); + } + } + } +}; + + +},{}],6:[function(require,module,exports){ +(function (global){ +var win; + +if (typeof window !== "undefined") { + win = window; +} else if (typeof global !== "undefined") { + win = global; +} else if (typeof self !== "undefined"){ + win = self; +} else { + win = {}; +} + +module.exports = win; + +}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) +},{}],7:[function(require,module,exports){ +if (typeof Object.create === 'function') { + // implementation from standard node.js 'util' module + module.exports = function inherits(ctor, superCtor) { + ctor.super_ = superCtor + ctor.prototype = Object.create(superCtor.prototype, { + constructor: { + value: ctor, + enumerable: false, + writable: true, + configurable: true + } + }); + }; +} else { + // old school shim for old browsers + module.exports = function inherits(ctor, superCtor) { + ctor.super_ = superCtor + var TempCtor = function () {} + TempCtor.prototype = superCtor.prototype + ctor.prototype = new TempCtor() + ctor.prototype.constructor = ctor + } +} + +},{}],8:[function(require,module,exports){ +var toString = {}.toString; + +module.exports = Array.isArray || function (arr) { + return toString.call(arr) == '[object Array]'; +}; + +},{}],9:[function(require,module,exports){ +/** + * Helpers. + */ + +var s = 1000; +var m = s * 60; +var h = m * 60; +var d = h * 24; +var y = d * 365.25; + +/** + * Parse or format the given `val`. + * + * Options: + * + * - `long` verbose formatting [false] + * + * @param {String|Number} val + * @param {Object} [options] + * @throws {Error} throw an error if val is not a non-empty string or a number + * @return {String|Number} + * @api public + */ + +module.exports = function(val, options) { + options = options || {}; + var type = typeof val; + if (type === 'string' && val.length > 0) { + return parse(val); + } else if (type === 'number' && isNaN(val) === false) { + return options.long ? fmtLong(val) : fmtShort(val); + } + throw new Error( + 'val is not a non-empty string or a valid number. val=' + + JSON.stringify(val) + ); +}; + +/** + * Parse the given `str` and return milliseconds. + * + * @param {String} str + * @return {Number} + * @api private + */ + +function parse(str) { + str = String(str); + if (str.length > 100) { + return; + } + var match = /^((?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|years?|yrs?|y)?$/i.exec( + str + ); + if (!match) { + return; + } + var n = parseFloat(match[1]); + var type = (match[2] || 'ms').toLowerCase(); + switch (type) { + case 'years': + case 'year': + case 'yrs': + case 'yr': + case 'y': + return n * y; + case 'days': + case 'day': + case 'd': + return n * d; + case 'hours': + case 'hour': + case 'hrs': + case 'hr': + case 'h': + return n * h; + case 'minutes': + case 'minute': + case 'mins': + case 'min': + case 'm': + return n * m; + case 'seconds': + case 'second': + case 'secs': + case 'sec': + case 's': + return n * s; + case 'milliseconds': + case 'millisecond': + case 'msecs': + case 'msec': + case 'ms': + return n; + default: + return undefined; + } +} + +/** + * Short format for `ms`. + * + * @param {Number} ms + * @return {String} + * @api private + */ + +function fmtShort(ms) { + if (ms >= d) { + return Math.round(ms / d) + 'd'; + } + if (ms >= h) { + return Math.round(ms / h) + 'h'; + } + if (ms >= m) { + return Math.round(ms / m) + 'm'; + } + if (ms >= s) { + return Math.round(ms / s) + 's'; + } + return ms + 'ms'; +} + +/** + * Long format for `ms`. + * + * @param {Number} ms + * @return {String} + * @api private + */ + +function fmtLong(ms) { + return plural(ms, d, 'day') || + plural(ms, h, 'hour') || + plural(ms, m, 'minute') || + plural(ms, s, 'second') || + ms + ' ms'; +} + +/** + * Pluralization helper. + */ + +function plural(ms, n, name) { + if (ms < n) { + return; + } + if (ms < n * 1.5) { + return Math.floor(ms / n) + ' ' + name; + } + return Math.ceil(ms / n) + ' ' + name + 's'; +} + +},{}],10:[function(require,module,exports){ +'use strict'; + +// modified from https://github.com/es-shims/es5-shim +var has = Object.prototype.hasOwnProperty; +var toStr = Object.prototype.toString; +var slice = Array.prototype.slice; +var isArgs = require(11); +var isEnumerable = Object.prototype.propertyIsEnumerable; +var hasDontEnumBug = !isEnumerable.call({ toString: null }, 'toString'); +var hasProtoEnumBug = isEnumerable.call(function () {}, 'prototype'); +var dontEnums = [ + 'toString', + 'toLocaleString', + 'valueOf', + 'hasOwnProperty', + 'isPrototypeOf', + 'propertyIsEnumerable', + 'constructor' +]; +var equalsConstructorPrototype = function (o) { + var ctor = o.constructor; + return ctor && ctor.prototype === o; +}; +var excludedKeys = { + $console: true, + $external: true, + $frame: true, + $frameElement: true, + $frames: true, + $innerHeight: true, + $innerWidth: true, + $outerHeight: true, + $outerWidth: true, + $pageXOffset: true, + $pageYOffset: true, + $parent: true, + $scrollLeft: true, + $scrollTop: true, + $scrollX: true, + $scrollY: true, + $self: true, + $webkitIndexedDB: true, + $webkitStorageInfo: true, + $window: true +}; +var hasAutomationEqualityBug = (function () { + /* global window */ + if (typeof window === 'undefined') { return false; } + for (var k in window) { + try { + if (!excludedKeys['$' + k] && has.call(window, k) && window[k] !== null && typeof window[k] === 'object') { + try { + equalsConstructorPrototype(window[k]); + } catch (e) { + return true; + } + } + } catch (e) { + return true; + } + } + return false; +}()); +var equalsConstructorPrototypeIfNotBuggy = function (o) { + /* global window */ + if (typeof window === 'undefined' || !hasAutomationEqualityBug) { + return equalsConstructorPrototype(o); + } + try { + return equalsConstructorPrototype(o); + } catch (e) { + return false; + } +}; + +var keysShim = function keys(object) { + var isObject = object !== null && typeof object === 'object'; + var isFunction = toStr.call(object) === '[object Function]'; + var isArguments = isArgs(object); + var isString = isObject && toStr.call(object) === '[object String]'; + var theKeys = []; + + if (!isObject && !isFunction && !isArguments) { + throw new TypeError('Object.keys called on a non-object'); + } + + var skipProto = hasProtoEnumBug && isFunction; + if (isString && object.length > 0 && !has.call(object, 0)) { + for (var i = 0; i < object.length; ++i) { + theKeys.push(String(i)); + } + } + + if (isArguments && object.length > 0) { + for (var j = 0; j < object.length; ++j) { + theKeys.push(String(j)); + } + } else { + for (var name in object) { + if (!(skipProto && name === 'prototype') && has.call(object, name)) { + theKeys.push(String(name)); + } + } + } + + if (hasDontEnumBug) { + var skipConstructor = equalsConstructorPrototypeIfNotBuggy(object); + + for (var k = 0; k < dontEnums.length; ++k) { + if (!(skipConstructor && dontEnums[k] === 'constructor') && has.call(object, dontEnums[k])) { + theKeys.push(dontEnums[k]); + } + } + } + return theKeys; +}; + +keysShim.shim = function shimObjectKeys() { + if (Object.keys) { + var keysWorksWithArguments = (function () { + // Safari 5.0 bug + return (Object.keys(arguments) || '').length === 2; + }(1, 2)); + if (!keysWorksWithArguments) { + var originalKeys = Object.keys; + Object.keys = function keys(object) { + if (isArgs(object)) { + return originalKeys(slice.call(object)); + } else { + return originalKeys(object); + } + }; + } + } else { + Object.keys = keysShim; + } + return Object.keys || keysShim; +}; + +module.exports = keysShim; + +},{"11":11}],11:[function(require,module,exports){ +'use strict'; + +var toStr = Object.prototype.toString; + +module.exports = function isArguments(value) { + var str = toStr.call(value); + var isArgs = str === '[object Arguments]'; + if (!isArgs) { + isArgs = str !== '[object Array]' && + value !== null && + typeof value === 'object' && + typeof value.length === 'number' && + value.length >= 0 && + toStr.call(value.callee) === '[object Function]'; + } + return isArgs; +}; + +},{}],12:[function(require,module,exports){ +// shim for using process in browser +var process = module.exports = {}; + +// cached from whatever global is present so that test runners that stub it +// don't break things. But we need to wrap it in a try catch in case it is +// wrapped in strict mode code which doesn't define any globals. It's inside a +// function because try/catches deoptimize in certain engines. + +var cachedSetTimeout; +var cachedClearTimeout; + +function defaultSetTimout() { + throw new Error('setTimeout has not been defined'); +} +function defaultClearTimeout () { + throw new Error('clearTimeout has not been defined'); +} +(function () { + try { + if (typeof setTimeout === 'function') { + cachedSetTimeout = setTimeout; + } else { + cachedSetTimeout = defaultSetTimout; + } + } catch (e) { + cachedSetTimeout = defaultSetTimout; + } + try { + if (typeof clearTimeout === 'function') { + cachedClearTimeout = clearTimeout; + } else { + cachedClearTimeout = defaultClearTimeout; + } + } catch (e) { + cachedClearTimeout = defaultClearTimeout; + } +} ()) +function runTimeout(fun) { + if (cachedSetTimeout === setTimeout) { + //normal enviroments in sane situations + return setTimeout(fun, 0); + } + // if setTimeout wasn't available but was latter defined + if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) { + cachedSetTimeout = setTimeout; + return setTimeout(fun, 0); + } + try { + // when when somebody has screwed with setTimeout but no I.E. maddness + return cachedSetTimeout(fun, 0); + } catch(e){ + try { + // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally + return cachedSetTimeout.call(null, fun, 0); + } catch(e){ + // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error + return cachedSetTimeout.call(this, fun, 0); + } + } + + +} +function runClearTimeout(marker) { + if (cachedClearTimeout === clearTimeout) { + //normal enviroments in sane situations + return clearTimeout(marker); + } + // if clearTimeout wasn't available but was latter defined + if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) { + cachedClearTimeout = clearTimeout; + return clearTimeout(marker); + } + try { + // when when somebody has screwed with setTimeout but no I.E. maddness + return cachedClearTimeout(marker); + } catch (e){ + try { + // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally + return cachedClearTimeout.call(null, marker); + } catch (e){ + // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error. + // Some versions of I.E. have different rules for clearTimeout vs setTimeout + return cachedClearTimeout.call(this, marker); + } + } + + + +} +var queue = []; +var draining = false; +var currentQueue; +var queueIndex = -1; + +function cleanUpNextTick() { + if (!draining || !currentQueue) { + return; + } + draining = false; + if (currentQueue.length) { + queue = currentQueue.concat(queue); + } else { + queueIndex = -1; + } + if (queue.length) { + drainQueue(); + } +} + +function drainQueue() { + if (draining) { + return; + } + var timeout = runTimeout(cleanUpNextTick); + draining = true; + + var len = queue.length; + while(len) { + currentQueue = queue; + queue = []; + while (++queueIndex < len) { + if (currentQueue) { + currentQueue[queueIndex].run(); + } + } + queueIndex = -1; + len = queue.length; + } + currentQueue = null; + draining = false; + runClearTimeout(timeout); +} + +process.nextTick = function (fun) { + var args = new Array(arguments.length - 1); + if (arguments.length > 1) { + for (var i = 1; i < arguments.length; i++) { + args[i - 1] = arguments[i]; + } + } + queue.push(new Item(fun, args)); + if (queue.length === 1 && !draining) { + runTimeout(drainQueue); + } +}; + +// v8 likes predictible objects +function Item(fun, array) { + this.fun = fun; + this.array = array; +} +Item.prototype.run = function () { + this.fun.apply(null, this.array); +}; +process.title = 'browser'; +process.browser = true; +process.env = {}; +process.argv = []; +process.version = ''; // empty string to avoid regexp issues +process.versions = {}; + +function noop() {} + +process.on = noop; +process.addListener = noop; +process.once = noop; +process.off = noop; +process.removeListener = noop; +process.removeAllListeners = noop; +process.emit = noop; + +process.binding = function (name) { + throw new Error('process.binding is not supported'); +}; + +process.cwd = function () { return '/' }; +process.chdir = function (dir) { + throw new Error('process.chdir is not supported'); +}; +process.umask = function() { return 0; }; + +},{}],13:[function(require,module,exports){ +// Copyright Joyent, Inc. and other Node contributors. +// +// 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. + +'use strict'; + +// If obj.hasOwnProperty has been overridden, then calling +// obj.hasOwnProperty(prop) will break. +// See: https://github.com/joyent/node/issues/1707 +function hasOwnProperty(obj, prop) { + return Object.prototype.hasOwnProperty.call(obj, prop); +} + +module.exports = function(qs, sep, eq, options) { + sep = sep || '&'; + eq = eq || '='; + var obj = {}; + + if (typeof qs !== 'string' || qs.length === 0) { + return obj; + } + + var regexp = /\+/g; + qs = qs.split(sep); + + var maxKeys = 1000; + if (options && typeof options.maxKeys === 'number') { + maxKeys = options.maxKeys; + } + + var len = qs.length; + // maxKeys <= 0 means that we should not limit keys count + if (maxKeys > 0 && len > maxKeys) { + len = maxKeys; + } + + for (var i = 0; i < len; ++i) { + var x = qs[i].replace(regexp, '%20'), + idx = x.indexOf(eq), + kstr, vstr, k, v; + + if (idx >= 0) { + kstr = x.substr(0, idx); + vstr = x.substr(idx + 1); + } else { + kstr = x; + vstr = ''; + } + + k = decodeURIComponent(kstr); + v = decodeURIComponent(vstr); + + if (!hasOwnProperty(obj, k)) { + obj[k] = v; + } else if (isArray(obj[k])) { + obj[k].push(v); + } else { + obj[k] = [obj[k], v]; + } + } + + return obj; +}; + +var isArray = Array.isArray || function (xs) { + return Object.prototype.toString.call(xs) === '[object Array]'; +}; + +},{}],14:[function(require,module,exports){ +// Copyright Joyent, Inc. and other Node contributors. +// +// 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. + +'use strict'; + +var stringifyPrimitive = function(v) { + switch (typeof v) { + case 'string': + return v; + + case 'boolean': + return v ? 'true' : 'false'; + + case 'number': + return isFinite(v) ? v : ''; + + default: + return ''; + } +}; + +module.exports = function(obj, sep, eq, name) { + sep = sep || '&'; + eq = eq || '='; + if (obj === null) { + obj = undefined; + } + + if (typeof obj === 'object') { + return map(objectKeys(obj), function(k) { + var ks = encodeURIComponent(stringifyPrimitive(k)) + eq; + if (isArray(obj[k])) { + return map(obj[k], function(v) { + return ks + encodeURIComponent(stringifyPrimitive(v)); + }).join(sep); + } else { + return ks + encodeURIComponent(stringifyPrimitive(obj[k])); + } + }).join(sep); + + } + + if (!name) return ''; + return encodeURIComponent(stringifyPrimitive(name)) + eq + + encodeURIComponent(stringifyPrimitive(obj)); +}; + +var isArray = Array.isArray || function (xs) { + return Object.prototype.toString.call(xs) === '[object Array]'; +}; + +function map (xs, f) { + if (xs.map) return xs.map(f); + var res = []; + for (var i = 0; i < xs.length; i++) { + res.push(f(xs[i], i)); + } + return res; +} + +var objectKeys = Object.keys || function (obj) { + var res = []; + for (var key in obj) { + if (Object.prototype.hasOwnProperty.call(obj, key)) res.push(key); + } + return res; +}; + +},{}],15:[function(require,module,exports){ +'use strict'; + +exports.decode = exports.parse = require(13); +exports.encode = exports.stringify = require(14); + +},{"13":13,"14":14}],16:[function(require,module,exports){ +module.exports = AlgoliaSearch; + +var Index = require(18); +var deprecate = require(28); +var deprecatedMessage = require(29); +var AlgoliaSearchCore = require(17); +var inherits = require(7); +var errors = require(30); + +function AlgoliaSearch() { + AlgoliaSearchCore.apply(this, arguments); +} + +inherits(AlgoliaSearch, AlgoliaSearchCore); + +/* + * Delete an index + * + * @param indexName the name of index to delete + * @param callback the result callback called with two arguments + * error: null or Error('message') + * content: the server answer that contains the task ID + */ +AlgoliaSearch.prototype.deleteIndex = function(indexName, callback) { + return this._jsonRequest({ + method: 'DELETE', + url: '/1/indexes/' + encodeURIComponent(indexName), + hostType: 'write', + callback: callback + }); +}; + +/** + * Move an existing index. + * @param srcIndexName the name of index to copy. + * @param dstIndexName the new index name that will contains a copy of + * srcIndexName (destination will be overriten if it already exist). + * @param callback the result callback called with two arguments + * error: null or Error('message') + * content: the server answer that contains the task ID + */ +AlgoliaSearch.prototype.moveIndex = function(srcIndexName, dstIndexName, callback) { + var postObj = { + operation: 'move', destination: dstIndexName + }; + return this._jsonRequest({ + method: 'POST', + url: '/1/indexes/' + encodeURIComponent(srcIndexName) + '/operation', + body: postObj, + hostType: 'write', + callback: callback + }); +}; + +/** + * Copy an existing index. + * @param srcIndexName the name of index to copy. + * @param dstIndexName the new index name that will contains a copy + * of srcIndexName (destination will be overriten if it already exist). + * @param scope an array of scopes to copy: ['settings', 'synonyms', 'rules'] + * @param callback the result callback called with two arguments + * error: null or Error('message') + * content: the server answer that contains the task ID + */ +AlgoliaSearch.prototype.copyIndex = function(srcIndexName, dstIndexName, scopeOrCallback, _callback) { + var postObj = { + operation: 'copy', + destination: dstIndexName + }; + var callback = _callback; + if (typeof scopeOrCallback === 'function') { + // oops, old behaviour of third argument being a function + callback = scopeOrCallback; + } else if (Array.isArray(scopeOrCallback) && scopeOrCallback.length > 0) { + postObj.scope = scopeOrCallback; + } else if (typeof scopeOrCallback !== 'undefined') { + throw new Error('the scope given to `copyIndex` was not an array with settings, synonyms or rules'); + } + return this._jsonRequest({ + method: 'POST', + url: '/1/indexes/' + encodeURIComponent(srcIndexName) + '/operation', + body: postObj, + hostType: 'write', + callback: callback + }); +}; + +/** + * Return last log entries. + * @param offset Specify the first entry to retrieve (0-based, 0 is the most recent log entry). + * @param length Specify the maximum number of entries to retrieve starting + * at offset. Maximum allowed value: 1000. + * @param type Specify the maximum number of entries to retrieve starting + * at offset. Maximum allowed value: 1000. + * @param callback the result callback called with two arguments + * error: null or Error('message') + * content: the server answer that contains the task ID + */ +AlgoliaSearch.prototype.getLogs = function(offset, length, callback) { + var clone = require(26); + var params = {}; + if (typeof offset === 'object') { + // getLogs(params) + params = clone(offset); + callback = length; + } else if (arguments.length === 0 || typeof offset === 'function') { + // getLogs([cb]) + callback = offset; + } else if (arguments.length === 1 || typeof length === 'function') { + // getLogs(1, [cb)] + callback = length; + params.offset = offset; + } else { + // getLogs(1, 2, [cb]) + params.offset = offset; + params.length = length; + } + + if (params.offset === undefined) params.offset = 0; + if (params.length === undefined) params.length = 10; + + return this._jsonRequest({ + method: 'GET', + url: '/1/logs?' + this._getSearchParams(params, ''), + hostType: 'read', + callback: callback + }); +}; + +/* + * List all existing indexes (paginated) + * + * @param page The page to retrieve, starting at 0. + * @param callback the result callback called with two arguments + * error: null or Error('message') + * content: the server answer with index list + */ +AlgoliaSearch.prototype.listIndexes = function(page, callback) { + var params = ''; + + if (page === undefined || typeof page === 'function') { + callback = page; + } else { + params = '?page=' + page; + } + + return this._jsonRequest({ + method: 'GET', + url: '/1/indexes' + params, + hostType: 'read', + callback: callback + }); +}; + +/* + * Get the index object initialized + * + * @param indexName the name of index + * @param callback the result callback with one argument (the Index instance) + */ +AlgoliaSearch.prototype.initIndex = function(indexName) { + return new Index(this, indexName); +}; + +AlgoliaSearch.prototype.initAnalytics = function(opts) { + // the actual require must be inside the function, when put outside then you have a cyclic dependency + // not well resolved that ends up making the main "./index.js" (main module, the agloliasearch function) + // export an object instead of a function + // Other workarounds: + // - rewrite the lib in ES6, cyclic dependencies may be better supported + // - move initAnalytics to a property on the main module (algoliasearch.initAnalytics), + // same as places. + // The current API was made mostly to mimic the one made in PHP + var createAnalyticsClient = require(27); + return createAnalyticsClient(this.applicationID, this.apiKey, opts); +}; + +/* + * @deprecated use client.listApiKeys + */ +AlgoliaSearch.prototype.listUserKeys = deprecate(function(callback) { + return this.listApiKeys(callback); +}, deprecatedMessage('client.listUserKeys()', 'client.listApiKeys()')); + +/* + * List all existing api keys with their associated ACLs + * + * @param callback the result callback called with two arguments + * error: null or Error('message') + * content: the server answer with api keys list + */ +AlgoliaSearch.prototype.listApiKeys = function(callback) { + return this._jsonRequest({ + method: 'GET', + url: '/1/keys', + hostType: 'read', + callback: callback + }); +}; + +/* + * @deprecated see client.getApiKey + */ +AlgoliaSearch.prototype.getUserKeyACL = deprecate(function(key, callback) { + return this.getApiKey(key, callback); +}, deprecatedMessage('client.getUserKeyACL()', 'client.getApiKey()')); + +/* + * Get an API key + * + * @param key + * @param callback the result callback called with two arguments + * error: null or Error('message') + * content: the server answer with the right API key + */ +AlgoliaSearch.prototype.getApiKey = function(key, callback) { + return this._jsonRequest({ + method: 'GET', + url: '/1/keys/' + key, + hostType: 'read', + callback: callback + }); +}; + +/* + * @deprecated see client.deleteApiKey + */ +AlgoliaSearch.prototype.deleteUserKey = deprecate(function(key, callback) { + return this.deleteApiKey(key, callback); +}, deprecatedMessage('client.deleteUserKey()', 'client.deleteApiKey()')); + +/* + * Delete an existing API key + * @param key + * @param callback the result callback called with two arguments + * error: null or Error('message') + * content: the server answer with the date of deletion + */ +AlgoliaSearch.prototype.deleteApiKey = function(key, callback) { + return this._jsonRequest({ + method: 'DELETE', + url: '/1/keys/' + key, + hostType: 'write', + callback: callback + }); +}; + +/** + * Restore a deleted API key + * + * @param {String} key - The key to restore + * @param {Function} callback - The result callback called with two arguments + * error: null or Error('message') + * content: the server answer with the restored API key + * @return {Promise|undefined} Returns a promise if no callback given + * @example + * client.restoreApiKey('APIKEY') + * @see {@link https://www.algolia.com/doc/rest-api/search/#restore-api-key|Algolia REST API Documentation} + */ +AlgoliaSearch.prototype.restoreApiKey = function(key, callback) { + return this._jsonRequest({ + method: 'POST', + url: '/1/keys/' + key + '/restore', + hostType: 'write', + callback: callback + }); +}; + +/* + @deprecated see client.addApiKey + */ +AlgoliaSearch.prototype.addUserKey = deprecate(function(acls, params, callback) { + return this.addApiKey(acls, params, callback); +}, deprecatedMessage('client.addUserKey()', 'client.addApiKey()')); + +/* + * Add a new global API key + * + * @param {string[]} acls - The list of ACL for this key. Defined by an array of strings that + * can contains the following values: + * - search: allow to search (https and http) + * - addObject: allows to add/update an object in the index (https only) + * - deleteObject : allows to delete an existing object (https only) + * - deleteIndex : allows to delete index content (https only) + * - settings : allows to get index settings (https only) + * - editSettings : allows to change index settings (https only) + * @param {Object} [params] - Optionnal parameters to set for the key + * @param {number} params.validity - Number of seconds after which the key will be automatically removed (0 means no time limit for this key) + * @param {number} params.maxQueriesPerIPPerHour - Number of API calls allowed from an IP address per hour + * @param {number} params.maxHitsPerQuery - Number of hits this API key can retrieve in one call + * @param {string[]} params.indexes - Allowed targeted indexes for this key + * @param {string} params.description - A description for your key + * @param {string[]} params.referers - A list of authorized referers + * @param {Object} params.queryParameters - Force the key to use specific query parameters + * @param {Function} callback - The result callback called with two arguments + * error: null or Error('message') + * content: the server answer with the added API key + * @return {Promise|undefined} Returns a promise if no callback given + * @example + * client.addApiKey(['search'], { + * validity: 300, + * maxQueriesPerIPPerHour: 2000, + * maxHitsPerQuery: 3, + * indexes: ['fruits'], + * description: 'Eat three fruits', + * referers: ['*.algolia.com'], + * queryParameters: { + * tagFilters: ['public'], + * } + * }) + * @see {@link https://www.algolia.com/doc/rest_api#AddKey|Algolia REST API Documentation} + */ +AlgoliaSearch.prototype.addApiKey = function(acls, params, callback) { + var isArray = require(8); + var usage = 'Usage: client.addApiKey(arrayOfAcls[, params, callback])'; + + if (!isArray(acls)) { + throw new Error(usage); + } + + if (arguments.length === 1 || typeof params === 'function') { + callback = params; + params = null; + } + + var postObj = { + acl: acls + }; + + if (params) { + postObj.validity = params.validity; + postObj.maxQueriesPerIPPerHour = params.maxQueriesPerIPPerHour; + postObj.maxHitsPerQuery = params.maxHitsPerQuery; + postObj.indexes = params.indexes; + postObj.description = params.description; + + if (params.queryParameters) { + postObj.queryParameters = this._getSearchParams(params.queryParameters, ''); + } + + postObj.referers = params.referers; + } + + return this._jsonRequest({ + method: 'POST', + url: '/1/keys', + body: postObj, + hostType: 'write', + callback: callback + }); +}; + +/** + * @deprecated Please use client.addApiKey() + */ +AlgoliaSearch.prototype.addUserKeyWithValidity = deprecate(function(acls, params, callback) { + return this.addApiKey(acls, params, callback); +}, deprecatedMessage('client.addUserKeyWithValidity()', 'client.addApiKey()')); + +/** + * @deprecated Please use client.updateApiKey() + */ +AlgoliaSearch.prototype.updateUserKey = deprecate(function(key, acls, params, callback) { + return this.updateApiKey(key, acls, params, callback); +}, deprecatedMessage('client.updateUserKey()', 'client.updateApiKey()')); + +/** + * Update an existing API key + * @param {string} key - The key to update + * @param {string[]} acls - The list of ACL for this key. Defined by an array of strings that + * can contains the following values: + * - search: allow to search (https and http) + * - addObject: allows to add/update an object in the index (https only) + * - deleteObject : allows to delete an existing object (https only) + * - deleteIndex : allows to delete index content (https only) + * - settings : allows to get index settings (https only) + * - editSettings : allows to change index settings (https only) + * @param {Object} [params] - Optionnal parameters to set for the key + * @param {number} params.validity - Number of seconds after which the key will be automatically removed (0 means no time limit for this key) + * @param {number} params.maxQueriesPerIPPerHour - Number of API calls allowed from an IP address per hour + * @param {number} params.maxHitsPerQuery - Number of hits this API key can retrieve in one call + * @param {string[]} params.indexes - Allowed targeted indexes for this key + * @param {string} params.description - A description for your key + * @param {string[]} params.referers - A list of authorized referers + * @param {Object} params.queryParameters - Force the key to use specific query parameters + * @param {Function} callback - The result callback called with two arguments + * error: null or Error('message') + * content: the server answer with the modified API key + * @return {Promise|undefined} Returns a promise if no callback given + * @example + * client.updateApiKey('APIKEY', ['search'], { + * validity: 300, + * maxQueriesPerIPPerHour: 2000, + * maxHitsPerQuery: 3, + * indexes: ['fruits'], + * description: 'Eat three fruits', + * referers: ['*.algolia.com'], + * queryParameters: { + * tagFilters: ['public'], + * } + * }) + * @see {@link https://www.algolia.com/doc/rest_api#UpdateIndexKey|Algolia REST API Documentation} + */ +AlgoliaSearch.prototype.updateApiKey = function(key, acls, params, callback) { + var isArray = require(8); + var usage = 'Usage: client.updateApiKey(key, arrayOfAcls[, params, callback])'; + + if (!isArray(acls)) { + throw new Error(usage); + } + + if (arguments.length === 2 || typeof params === 'function') { + callback = params; + params = null; + } + + var putObj = { + acl: acls + }; + + if (params) { + putObj.validity = params.validity; + putObj.maxQueriesPerIPPerHour = params.maxQueriesPerIPPerHour; + putObj.maxHitsPerQuery = params.maxHitsPerQuery; + putObj.indexes = params.indexes; + putObj.description = params.description; + + if (params.queryParameters) { + putObj.queryParameters = this._getSearchParams(params.queryParameters, ''); + } + + putObj.referers = params.referers; + } + + return this._jsonRequest({ + method: 'PUT', + url: '/1/keys/' + key, + body: putObj, + hostType: 'write', + callback: callback + }); +}; + +/** + * Initialize a new batch of search queries + * @deprecated use client.search() + */ +AlgoliaSearch.prototype.startQueriesBatch = deprecate(function startQueriesBatchDeprecated() { + this._batch = []; +}, deprecatedMessage('client.startQueriesBatch()', 'client.search()')); + +/** + * Add a search query in the batch + * @deprecated use client.search() + */ +AlgoliaSearch.prototype.addQueryInBatch = deprecate(function addQueryInBatchDeprecated(indexName, query, args) { + this._batch.push({ + indexName: indexName, + query: query, + params: args + }); +}, deprecatedMessage('client.addQueryInBatch()', 'client.search()')); + +/** + * Launch the batch of queries using XMLHttpRequest. + * @deprecated use client.search() + */ +AlgoliaSearch.prototype.sendQueriesBatch = deprecate(function sendQueriesBatchDeprecated(callback) { + return this.search(this._batch, callback); +}, deprecatedMessage('client.sendQueriesBatch()', 'client.search()')); + +/** + * Perform write operations across multiple indexes. + * + * To reduce the amount of time spent on network round trips, + * you can create, update, or delete several objects in one call, + * using the batch endpoint (all operations are done in the given order). + * + * Available actions: + * - addObject + * - updateObject + * - partialUpdateObject + * - partialUpdateObjectNoCreate + * - deleteObject + * + * https://www.algolia.com/doc/rest_api#Indexes + * @param {Object[]} operations An array of operations to perform + * @return {Promise|undefined} Returns a promise if no callback given + * @example + * client.batch([{ + * action: 'addObject', + * indexName: 'clients', + * body: { + * name: 'Bill' + * } + * }, { + * action: 'udpateObject', + * indexName: 'fruits', + * body: { + * objectID: '29138', + * name: 'banana' + * } + * }], cb) + */ +AlgoliaSearch.prototype.batch = function(operations, callback) { + var isArray = require(8); + var usage = 'Usage: client.batch(operations[, callback])'; + + if (!isArray(operations)) { + throw new Error(usage); + } + + return this._jsonRequest({ + method: 'POST', + url: '/1/indexes/*/batch', + body: { + requests: operations + }, + hostType: 'write', + callback: callback + }); +}; + +/** + * Assign or Move a userID to a cluster + * + * @param {string} data.userID The userID to assign to a new cluster + * @param {string} data.cluster The cluster to assign the user to + * @return {Promise|undefined} Returns a promise if no callback given + * @example + * client.assignUserID({ cluster: 'c1-test', userID: 'some-user' }); + */ +AlgoliaSearch.prototype.assignUserID = function(data, callback) { + if (!data.userID || !data.cluster) { + throw new errors.AlgoliaSearchError('You have to provide both a userID and cluster', data); + } + return this._jsonRequest({ + method: 'POST', + url: '/1/clusters/mapping', + hostType: 'write', + body: {cluster: data.cluster}, + callback: callback, + headers: { + 'x-algolia-user-id': data.userID + } + }); +}; + +/** + * Assign a array of userIDs to a cluster. + * + * @param {Array} data.userIDs The array of userIDs to assign to a new cluster + * @param {string} data.cluster The cluster to assign the user to + * @return {Promise|undefined} Returns a promise if no callback given + * @example + * client.assignUserIDs({ cluster: 'c1-test', userIDs: ['some-user-1', 'some-user-2'] }); + */ +AlgoliaSearch.prototype.assignUserIDs = function(data, callback) { + if (!data.userIDs || !data.cluster) { + throw new errors.AlgoliaSearchError('You have to provide both an array of userIDs and cluster', data); + } + return this._jsonRequest({ + method: 'POST', + url: '/1/clusters/mapping/batch', + hostType: 'write', + body: { + cluster: data.cluster, + users: data.userIDs + }, + callback: callback + }); +}; + +/** + * Get the top userIDs + * + * (the callback is the second argument) + * + * @return {Promise|undefined} Returns a promise if no callback given + * @example + * client.getTopUserID(); + */ +AlgoliaSearch.prototype.getTopUserID = function(callback) { + return this._jsonRequest({ + method: 'GET', + url: '/1/clusters/mapping/top', + hostType: 'read', + callback: callback + }); +}; + +/** + * Get userID + * + * @param {string} data.userID The userID to get info about + * @return {Promise|undefined} Returns a promise if no callback given + * @example + * client.getUserID({ userID: 'some-user' }); + */ +AlgoliaSearch.prototype.getUserID = function(data, callback) { + if (!data.userID) { + throw new errors.AlgoliaSearchError('You have to provide a userID', {debugData: data}); + } + return this._jsonRequest({ + method: 'GET', + url: '/1/clusters/mapping/' + data.userID, + hostType: 'read', + callback: callback + }); +}; + +/** + * List all the clusters + * + * (the callback is the second argument) + * + * @return {Promise|undefined} Returns a promise if no callback given + * @example + * client.listClusters(); + */ +AlgoliaSearch.prototype.listClusters = function(callback) { + return this._jsonRequest({ + method: 'GET', + url: '/1/clusters', + hostType: 'read', + callback: callback + }); +}; + +/** + * List the userIDs + * + * (the callback is the second argument) + * + * @param {string} data.hitsPerPage How many hits on every page + * @param {string} data.page The page to retrieve + * @return {Promise|undefined} Returns a promise if no callback given + * @example + * client.listClusters(); + * client.listClusters({ page: 3, hitsPerPage: 30}); + */ +AlgoliaSearch.prototype.listUserIDs = function(data, callback) { + return this._jsonRequest({ + method: 'GET', + url: '/1/clusters/mapping', + body: data, + hostType: 'read', + callback: callback + }); +}; + +/** + * Remove an userID + * + * @param {string} data.userID The userID to assign to a new cluster + * @return {Promise|undefined} Returns a promise if no callback given + * @example + * client.removeUserID({ userID: 'some-user' }); + */ +AlgoliaSearch.prototype.removeUserID = function(data, callback) { + if (!data.userID) { + throw new errors.AlgoliaSearchError('You have to provide a userID', {debugData: data}); + } + return this._jsonRequest({ + method: 'DELETE', + url: '/1/clusters/mapping', + hostType: 'write', + callback: callback, + headers: { + 'x-algolia-user-id': data.userID + } + }); +}; + +/** + * Search for userIDs + * + * @param {string} data.cluster The cluster to target + * @param {string} data.query The query to execute + * @param {string} data.hitsPerPage How many hits on every page + * @param {string} data.page The page to retrieve + * @return {Promise|undefined} Returns a promise if no callback given + * @example + * client.searchUserIDs({ cluster: 'c1-test', query: 'some-user' }); + * client.searchUserIDs({ + * cluster: "c1-test", + * query: "some-user", + * page: 3, + * hitsPerPage: 2 + * }); + */ +AlgoliaSearch.prototype.searchUserIDs = function(data, callback) { + return this._jsonRequest({ + method: 'POST', + url: '/1/clusters/mapping/search', + body: data, + hostType: 'read', + callback: callback + }); +}; + +/** + * Set strategy for personalization + * + * @param {Object} data + * @param {Object} data.eventsScoring Associate a score to an event + * @param {Object} data.eventsScoring. The name of the event + * @param {Number} data.eventsScoring..score The score to associate to + * @param {String} data.eventsScoring..type Either "click", "conversion" or "view" + * @param {Object} data.facetsScoring Associate a score to a facet + * @param {Object} data.facetsScoring. The name of the facet + * @param {Number} data.facetsScoring..score The score to associate to + * @return {Promise|undefined} Returns a promise if no callback given + * @example + * client.setPersonalizationStrategy({ + * eventsScoring: { + * "Add to cart": { score: 50, type: "conversion" }, + * Purchase: { score: 100, type: "conversion" } + * }, + * facetsScoring: { + * brand: { score: 100 }, + * categories: { score: 10 } + * } + * }); + */ +AlgoliaSearch.prototype.setPersonalizationStrategy = function(data, callback) { + return this._jsonRequest({ + method: 'POST', + url: '/1/recommendation/personalization/strategy', + body: data, + hostType: 'write', + callback: callback + }); +}; + +/** + * Get strategy for personalization + * + * @return {Promise|undefined} Returns a promise if no callback given + * @example + * client.getPersonalizationStrategy(); + */ + +AlgoliaSearch.prototype.getPersonalizationStrategy = function(callback) { + return this._jsonRequest({ + method: 'GET', + url: '/1/recommendation/personalization/strategy', + hostType: 'read', + callback: callback + }); +}; + +// environment specific methods +AlgoliaSearch.prototype.destroy = notImplemented; +AlgoliaSearch.prototype.enableRateLimitForward = notImplemented; +AlgoliaSearch.prototype.disableRateLimitForward = notImplemented; +AlgoliaSearch.prototype.useSecuredAPIKey = notImplemented; +AlgoliaSearch.prototype.disableSecuredAPIKey = notImplemented; +AlgoliaSearch.prototype.generateSecuredApiKey = notImplemented; +AlgoliaSearch.prototype.getSecuredApiKeyRemainingValidity = notImplemented; + +function notImplemented() { + var message = 'Not implemented in this environment.\n' + + 'If you feel this is a mistake, write to support@algolia.com'; + + throw new errors.AlgoliaSearchError(message); +} + +},{"17":17,"18":18,"26":26,"27":27,"28":28,"29":29,"30":30,"7":7,"8":8}],17:[function(require,module,exports){ +(function (process){ +module.exports = AlgoliaSearchCore; + +var errors = require(30); +var exitPromise = require(31); +var IndexCore = require(20); +var store = require(36); + +// We will always put the API KEY in the JSON body in case of too long API KEY, +// to avoid query string being too long and failing in various conditions (our server limit, browser limit, +// proxies limit) +var MAX_API_KEY_LENGTH = 500; +var RESET_APP_DATA_TIMER = + process.env.RESET_APP_DATA_TIMER && parseInt(process.env.RESET_APP_DATA_TIMER, 10) || + 60 * 2 * 1000; // after 2 minutes reset to first host + +/* + * Algolia Search library initialization + * https://www.algolia.com/ + * + * @param {string} applicationID - Your applicationID, found in your dashboard + * @param {string} apiKey - Your API key, found in your dashboard + * @param {Object} [opts] + * @param {number} [opts.timeout=2000] - The request timeout set in milliseconds, + * another request will be issued after this timeout + * @param {string} [opts.protocol='https:'] - The protocol used to query Algolia Search API. + * Set to 'http:' to force using http. + * @param {Object|Array} [opts.hosts={ + * read: [this.applicationID + '-dsn.algolia.net'].concat([ + * this.applicationID + '-1.algolianet.com', + * this.applicationID + '-2.algolianet.com', + * this.applicationID + '-3.algolianet.com'] + * ]), + * write: [this.applicationID + '.algolia.net'].concat([ + * this.applicationID + '-1.algolianet.com', + * this.applicationID + '-2.algolianet.com', + * this.applicationID + '-3.algolianet.com'] + * ]) - The hosts to use for Algolia Search API. + * If you provide them, you will less benefit from our HA implementation + */ +function AlgoliaSearchCore(applicationID, apiKey, opts) { + var debug = require(1)('algoliasearch'); + + var clone = require(26); + var isArray = require(8); + var map = require(32); + + var usage = 'Usage: algoliasearch(applicationID, apiKey, opts)'; + + if (opts._allowEmptyCredentials !== true && !applicationID) { + throw new errors.AlgoliaSearchError('Please provide an application ID. ' + usage); + } + + if (opts._allowEmptyCredentials !== true && !apiKey) { + throw new errors.AlgoliaSearchError('Please provide an API key. ' + usage); + } + + this.applicationID = applicationID; + this.apiKey = apiKey; + + this.hosts = { + read: [], + write: [] + }; + + opts = opts || {}; + + this._timeouts = opts.timeouts || { + connect: 1 * 1000, // 500ms connect is GPRS latency + read: 2 * 1000, + write: 30 * 1000 + }; + + // backward compat, if opts.timeout is passed, we use it to configure all timeouts like before + if (opts.timeout) { + this._timeouts.connect = this._timeouts.read = this._timeouts.write = opts.timeout; + } + + var protocol = opts.protocol || 'https:'; + // while we advocate for colon-at-the-end values: 'http:' for `opts.protocol` + // we also accept `http` and `https`. It's a common error. + if (!/:$/.test(protocol)) { + protocol = protocol + ':'; + } + + if (protocol !== 'http:' && protocol !== 'https:') { + throw new errors.AlgoliaSearchError('protocol must be `http:` or `https:` (was `' + opts.protocol + '`)'); + } + + this._checkAppIdData(); + + if (!opts.hosts) { + var defaultHosts = map(this._shuffleResult, function(hostNumber) { + return applicationID + '-' + hostNumber + '.algolianet.com'; + }); + + // no hosts given, compute defaults + var mainSuffix = (opts.dsn === false ? '' : '-dsn') + '.algolia.net'; + this.hosts.read = [this.applicationID + mainSuffix].concat(defaultHosts); + this.hosts.write = [this.applicationID + '.algolia.net'].concat(defaultHosts); + } else if (isArray(opts.hosts)) { + // when passing custom hosts, we need to have a different host index if the number + // of write/read hosts are different. + this.hosts.read = clone(opts.hosts); + this.hosts.write = clone(opts.hosts); + } else { + this.hosts.read = clone(opts.hosts.read); + this.hosts.write = clone(opts.hosts.write); + } + + // add protocol and lowercase hosts + this.hosts.read = map(this.hosts.read, prepareHost(protocol)); + this.hosts.write = map(this.hosts.write, prepareHost(protocol)); + + this.extraHeaders = {}; + + // In some situations you might want to warm the cache + this.cache = opts._cache || {}; + + this._ua = opts._ua; + this._useCache = opts._useCache === undefined || opts._cache ? true : opts._useCache; + this._useRequestCache = this._useCache && opts._useRequestCache; + this._useFallback = opts.useFallback === undefined ? true : opts.useFallback; + + this._setTimeout = opts._setTimeout; + + debug('init done, %j', this); +} + +/* + * Get the index object initialized + * + * @param indexName the name of index + * @param callback the result callback with one argument (the Index instance) + */ +AlgoliaSearchCore.prototype.initIndex = function(indexName) { + return new IndexCore(this, indexName); +}; + +/** +* Add an extra field to the HTTP request +* +* @param name the header field name +* @param value the header field value +*/ +AlgoliaSearchCore.prototype.setExtraHeader = function(name, value) { + this.extraHeaders[name.toLowerCase()] = value; +}; + +/** +* Get the value of an extra HTTP header +* +* @param name the header field name +*/ +AlgoliaSearchCore.prototype.getExtraHeader = function(name) { + return this.extraHeaders[name.toLowerCase()]; +}; + +/** +* Remove an extra field from the HTTP request +* +* @param name the header field name +*/ +AlgoliaSearchCore.prototype.unsetExtraHeader = function(name) { + delete this.extraHeaders[name.toLowerCase()]; +}; + +/** +* Augment sent x-algolia-agent with more data, each agent part +* is automatically separated from the others by a semicolon; +* +* @param algoliaAgent the agent to add +*/ +AlgoliaSearchCore.prototype.addAlgoliaAgent = function(algoliaAgent) { + var algoliaAgentWithDelimiter = '; ' + algoliaAgent; + + if (this._ua.indexOf(algoliaAgentWithDelimiter) === -1) { + this._ua += algoliaAgentWithDelimiter; + } +}; + +/* + * Wrapper that try all hosts to maximize the quality of service + */ +AlgoliaSearchCore.prototype._jsonRequest = function(initialOpts) { + this._checkAppIdData(); + + var requestDebug = require(1)('algoliasearch:' + initialOpts.url); + + + var body; + var cacheID; + var additionalUA = initialOpts.additionalUA || ''; + var cache = initialOpts.cache; + var client = this; + var tries = 0; + var usingFallback = false; + var hasFallback = client._useFallback && client._request.fallback && initialOpts.fallback; + var headers; + + if ( + this.apiKey.length > MAX_API_KEY_LENGTH && + initialOpts.body !== undefined && + (initialOpts.body.params !== undefined || // index.search() + initialOpts.body.requests !== undefined) // client.search() + ) { + initialOpts.body.apiKey = this.apiKey; + headers = this._computeRequestHeaders({ + additionalUA: additionalUA, + withApiKey: false, + headers: initialOpts.headers + }); + } else { + headers = this._computeRequestHeaders({ + additionalUA: additionalUA, + headers: initialOpts.headers + }); + } + + if (initialOpts.body !== undefined) { + body = safeJSONStringify(initialOpts.body); + } + + requestDebug('request start'); + var debugData = []; + + + function doRequest(requester, reqOpts) { + client._checkAppIdData(); + + var startTime = new Date(); + + if (client._useCache && !client._useRequestCache) { + cacheID = initialOpts.url; + } + + // as we sometime use POST requests to pass parameters (like query='aa'), + // the cacheID must also include the body to be different between calls + if (client._useCache && !client._useRequestCache && body) { + cacheID += '_body_' + reqOpts.body; + } + + // handle cache existence + if (isCacheValidWithCurrentID(!client._useRequestCache, cache, cacheID)) { + requestDebug('serving response from cache'); + + var responseText = cache[cacheID]; + + // Cache response must match the type of the original one + return client._promise.resolve({ + body: JSON.parse(responseText), + responseText: responseText + }); + } + + // if we reached max tries + if (tries >= client.hosts[initialOpts.hostType].length) { + if (!hasFallback || usingFallback) { + requestDebug('could not get any response'); + // then stop + return client._promise.reject(new errors.AlgoliaSearchError( + 'Cannot connect to the AlgoliaSearch API.' + + ' Send an email to support@algolia.com to report and resolve the issue.' + + ' Application id was: ' + client.applicationID, {debugData: debugData} + )); + } + + requestDebug('switching to fallback'); + + // let's try the fallback starting from here + tries = 0; + + // method, url and body are fallback dependent + reqOpts.method = initialOpts.fallback.method; + reqOpts.url = initialOpts.fallback.url; + reqOpts.jsonBody = initialOpts.fallback.body; + if (reqOpts.jsonBody) { + reqOpts.body = safeJSONStringify(reqOpts.jsonBody); + } + // re-compute headers, they could be omitting the API KEY + headers = client._computeRequestHeaders({ + additionalUA: additionalUA, + headers: initialOpts.headers + }); + + reqOpts.timeouts = client._getTimeoutsForRequest(initialOpts.hostType); + client._setHostIndexByType(0, initialOpts.hostType); + usingFallback = true; // the current request is now using fallback + return doRequest(client._request.fallback, reqOpts); + } + + var currentHost = client._getHostByType(initialOpts.hostType); + + var url = currentHost + reqOpts.url; + var options = { + body: reqOpts.body, + jsonBody: reqOpts.jsonBody, + method: reqOpts.method, + headers: headers, + timeouts: reqOpts.timeouts, + debug: requestDebug, + forceAuthHeaders: reqOpts.forceAuthHeaders + }; + + requestDebug('method: %s, url: %s, headers: %j, timeouts: %d', + options.method, url, options.headers, options.timeouts); + + if (requester === client._request.fallback) { + requestDebug('using fallback'); + } + + // `requester` is any of this._request or this._request.fallback + // thus it needs to be called using the client as context + return requester.call(client, url, options).then(success, tryFallback); + + function success(httpResponse) { + // compute the status of the response, + // + // When in browser mode, using XDR or JSONP, we have no statusCode available + // So we rely on our API response `status` property. + // But `waitTask` can set a `status` property which is not the statusCode (it's the task status) + // So we check if there's a `message` along `status` and it means it's an error + // + // That's the only case where we have a response.status that's not the http statusCode + var status = httpResponse && httpResponse.body && httpResponse.body.message && httpResponse.body.status || + + // this is important to check the request statusCode AFTER the body eventual + // statusCode because some implementations (jQuery XDomainRequest transport) may + // send statusCode 200 while we had an error + httpResponse.statusCode || + + // When in browser mode, using XDR or JSONP + // we default to success when no error (no response.status && response.message) + // If there was a JSON.parse() error then body is null and it fails + httpResponse && httpResponse.body && 200; + + requestDebug('received response: statusCode: %s, computed statusCode: %d, headers: %j', + httpResponse.statusCode, status, httpResponse.headers); + + var httpResponseOk = Math.floor(status / 100) === 2; + + var endTime = new Date(); + debugData.push({ + currentHost: currentHost, + headers: removeCredentials(headers), + content: body || null, + contentLength: body !== undefined ? body.length : null, + method: reqOpts.method, + timeouts: reqOpts.timeouts, + url: reqOpts.url, + startTime: startTime, + endTime: endTime, + duration: endTime - startTime, + statusCode: status + }); + + if (httpResponseOk) { + if (client._useCache && !client._useRequestCache && cache) { + cache[cacheID] = httpResponse.responseText; + } + + return { + responseText: httpResponse.responseText, + body: httpResponse.body + }; + } + + var shouldRetry = Math.floor(status / 100) !== 4; + + if (shouldRetry) { + tries += 1; + return retryRequest(); + } + + requestDebug('unrecoverable error'); + + // no success and no retry => fail + var unrecoverableError = new errors.AlgoliaSearchError( + httpResponse.body && httpResponse.body.message, {debugData: debugData, statusCode: status} + ); + + return client._promise.reject(unrecoverableError); + } + + function tryFallback(err) { + // error cases: + // While not in fallback mode: + // - CORS not supported + // - network error + // While in fallback mode: + // - timeout + // - network error + // - badly formatted JSONP (script loaded, did not call our callback) + // In both cases: + // - uncaught exception occurs (TypeError) + requestDebug('error: %s, stack: %s', err.message, err.stack); + + var endTime = new Date(); + debugData.push({ + currentHost: currentHost, + headers: removeCredentials(headers), + content: body || null, + contentLength: body !== undefined ? body.length : null, + method: reqOpts.method, + timeouts: reqOpts.timeouts, + url: reqOpts.url, + startTime: startTime, + endTime: endTime, + duration: endTime - startTime + }); + + if (!(err instanceof errors.AlgoliaSearchError)) { + err = new errors.Unknown(err && err.message, err); + } + + tries += 1; + + // stop the request implementation when: + if ( + // we did not generate this error, + // it comes from a throw in some other piece of code + err instanceof errors.Unknown || + + // server sent unparsable JSON + err instanceof errors.UnparsableJSON || + + // max tries and already using fallback or no fallback + tries >= client.hosts[initialOpts.hostType].length && + (usingFallback || !hasFallback)) { + // stop request implementation for this command + err.debugData = debugData; + return client._promise.reject(err); + } + + // When a timeout occurred, retry by raising timeout + if (err instanceof errors.RequestTimeout) { + return retryRequestWithHigherTimeout(); + } + + return retryRequest(); + } + + function retryRequest() { + requestDebug('retrying request'); + client._incrementHostIndex(initialOpts.hostType); + return doRequest(requester, reqOpts); + } + + function retryRequestWithHigherTimeout() { + requestDebug('retrying request with higher timeout'); + client._incrementHostIndex(initialOpts.hostType); + client._incrementTimeoutMultipler(); + reqOpts.timeouts = client._getTimeoutsForRequest(initialOpts.hostType); + return doRequest(requester, reqOpts); + } + } + + function isCacheValidWithCurrentID( + useRequestCache, + currentCache, + currentCacheID + ) { + return ( + client._useCache && + useRequestCache && + currentCache && + currentCache[currentCacheID] !== undefined + ); + } + + + function interopCallbackReturn(request, callback) { + if (isCacheValidWithCurrentID(client._useRequestCache, cache, cacheID)) { + request.catch(function() { + // Release the cache on error + delete cache[cacheID]; + }); + } + + if (typeof initialOpts.callback === 'function') { + // either we have a callback + request.then(function okCb(content) { + exitPromise(function() { + initialOpts.callback(null, callback(content)); + }, client._setTimeout || setTimeout); + }, function nookCb(err) { + exitPromise(function() { + initialOpts.callback(err); + }, client._setTimeout || setTimeout); + }); + } else { + // either we are using promises + return request.then(callback); + } + } + + if (client._useCache && client._useRequestCache) { + cacheID = initialOpts.url; + } + + // as we sometime use POST requests to pass parameters (like query='aa'), + // the cacheID must also include the body to be different between calls + if (client._useCache && client._useRequestCache && body) { + cacheID += '_body_' + body; + } + + if (isCacheValidWithCurrentID(client._useRequestCache, cache, cacheID)) { + requestDebug('serving request from cache'); + + var maybePromiseForCache = cache[cacheID]; + + // In case the cache is warmup with value that is not a promise + var promiseForCache = typeof maybePromiseForCache.then !== 'function' + ? client._promise.resolve({responseText: maybePromiseForCache}) + : maybePromiseForCache; + + return interopCallbackReturn(promiseForCache, function(content) { + // In case of the cache request, return the original value + return JSON.parse(content.responseText); + }); + } + + var request = doRequest( + client._request, { + url: initialOpts.url, + method: initialOpts.method, + body: body, + jsonBody: initialOpts.body, + timeouts: client._getTimeoutsForRequest(initialOpts.hostType), + forceAuthHeaders: initialOpts.forceAuthHeaders + } + ); + + if (client._useCache && client._useRequestCache && cache) { + cache[cacheID] = request; + } + + return interopCallbackReturn(request, function(content) { + // In case of the first request, return the JSON value + return content.body; + }); +}; + +/* +* Transform search param object in query string +* @param {object} args arguments to add to the current query string +* @param {string} params current query string +* @return {string} the final query string +*/ +AlgoliaSearchCore.prototype._getSearchParams = function(args, params) { + if (args === undefined || args === null) { + return params; + } + for (var key in args) { + if (key !== null && args[key] !== undefined && args.hasOwnProperty(key)) { + params += params === '' ? '' : '&'; + params += key + '=' + encodeURIComponent(Object.prototype.toString.call(args[key]) === '[object Array]' ? safeJSONStringify(args[key]) : args[key]); + } + } + return params; +}; + +/** + * Compute the headers for a request + * + * @param [string] options.additionalUA semi-colon separated string with other user agents to add + * @param [boolean=true] options.withApiKey Send the api key as a header + * @param [Object] options.headers Extra headers to send + */ +AlgoliaSearchCore.prototype._computeRequestHeaders = function(options) { + var forEach = require(5); + + var ua = options.additionalUA ? + this._ua + '; ' + options.additionalUA : + this._ua; + + var requestHeaders = { + 'x-algolia-agent': ua, + 'x-algolia-application-id': this.applicationID + }; + + // browser will inline headers in the url, node.js will use http headers + // but in some situations, the API KEY will be too long (big secured API keys) + // so if the request is a POST and the KEY is very long, we will be asked to not put + // it into headers but in the JSON body + if (options.withApiKey !== false) { + requestHeaders['x-algolia-api-key'] = this.apiKey; + } + + if (this.userToken) { + requestHeaders['x-algolia-usertoken'] = this.userToken; + } + + if (this.securityTags) { + requestHeaders['x-algolia-tagfilters'] = this.securityTags; + } + + forEach(this.extraHeaders, function addToRequestHeaders(value, key) { + requestHeaders[key] = value; + }); + + if (options.headers) { + forEach(options.headers, function addToRequestHeaders(value, key) { + requestHeaders[key] = value; + }); + } + + return requestHeaders; +}; + +/** + * Search through multiple indices at the same time + * @param {Object[]} queries An array of queries you want to run. + * @param {string} queries[].indexName The index name you want to target + * @param {string} [queries[].query] The query to issue on this index. Can also be passed into `params` + * @param {Object} queries[].params Any search param like hitsPerPage, .. + * @param {Function} callback Callback to be called + * @return {Promise|undefined} Returns a promise if no callback given + */ +AlgoliaSearchCore.prototype.search = function(queries, opts, callback) { + var isArray = require(8); + var map = require(32); + + var usage = 'Usage: client.search(arrayOfQueries[, callback])'; + + if (!isArray(queries)) { + throw new Error(usage); + } + + if (typeof opts === 'function') { + callback = opts; + opts = {}; + } else if (opts === undefined) { + opts = {}; + } + + var client = this; + + var postObj = { + requests: map(queries, function prepareRequest(query) { + var params = ''; + + // allow query.query + // so we are mimicing the index.search(query, params) method + // {indexName:, query:, params:} + if (query.query !== undefined) { + params += 'query=' + encodeURIComponent(query.query); + } + + return { + indexName: query.indexName, + params: client._getSearchParams(query.params, params) + }; + }) + }; + + var JSONPParams = map(postObj.requests, function prepareJSONPParams(request, requestId) { + return requestId + '=' + + encodeURIComponent( + '/1/indexes/' + encodeURIComponent(request.indexName) + '?' + + request.params + ); + }).join('&'); + + var url = '/1/indexes/*/queries'; + + if (opts.strategy !== undefined) { + postObj.strategy = opts.strategy; + } + + return this._jsonRequest({ + cache: this.cache, + method: 'POST', + url: url, + body: postObj, + hostType: 'read', + fallback: { + method: 'GET', + url: '/1/indexes/*', + body: { + params: JSONPParams + } + }, + callback: callback + }); +}; + +/** +* Search for facet values +* https://www.algolia.com/doc/rest-api/search#search-for-facet-values +* This is the top-level API for SFFV. +* +* @param {object[]} queries An array of queries to run. +* @param {string} queries[].indexName Index name, name of the index to search. +* @param {object} queries[].params Query parameters. +* @param {string} queries[].params.facetName Facet name, name of the attribute to search for values in. +* Must be declared as a facet +* @param {string} queries[].params.facetQuery Query for the facet search +* @param {string} [queries[].params.*] Any search parameter of Algolia, +* see https://www.algolia.com/doc/api-client/javascript/search#search-parameters +* Pagination is not supported. The page and hitsPerPage parameters will be ignored. +*/ +AlgoliaSearchCore.prototype.searchForFacetValues = function(queries) { + var isArray = require(8); + var map = require(32); + + var usage = 'Usage: client.searchForFacetValues([{indexName, params: {facetName, facetQuery, ...params}}, ...queries])'; // eslint-disable-line max-len + + if (!isArray(queries)) { + throw new Error(usage); + } + + var client = this; + + return client._promise.all(map(queries, function performQuery(query) { + if ( + !query || + query.indexName === undefined || + query.params.facetName === undefined || + query.params.facetQuery === undefined + ) { + throw new Error(usage); + } + + var clone = require(26); + var omit = require(34); + + var indexName = query.indexName; + var params = query.params; + + var facetName = params.facetName; + var filteredParams = omit(clone(params), function(keyName) { + return keyName === 'facetName'; + }); + var searchParameters = client._getSearchParams(filteredParams, ''); + + return client._jsonRequest({ + cache: client.cache, + method: 'POST', + url: + '/1/indexes/' + + encodeURIComponent(indexName) + + '/facets/' + + encodeURIComponent(facetName) + + '/query', + hostType: 'read', + body: {params: searchParameters} + }); + })); +}; + +/** + * Set the extra security tagFilters header + * @param {string|array} tags The list of tags defining the current security filters + */ +AlgoliaSearchCore.prototype.setSecurityTags = function(tags) { + if (Object.prototype.toString.call(tags) === '[object Array]') { + var strTags = []; + for (var i = 0; i < tags.length; ++i) { + if (Object.prototype.toString.call(tags[i]) === '[object Array]') { + var oredTags = []; + for (var j = 0; j < tags[i].length; ++j) { + oredTags.push(tags[i][j]); + } + strTags.push('(' + oredTags.join(',') + ')'); + } else { + strTags.push(tags[i]); + } + } + tags = strTags.join(','); + } + + this.securityTags = tags; +}; + +/** + * Set the extra user token header + * @param {string} userToken The token identifying a uniq user (used to apply rate limits) + */ +AlgoliaSearchCore.prototype.setUserToken = function(userToken) { + this.userToken = userToken; +}; + +/** + * Clear all queries in client's cache + * @return undefined + */ +AlgoliaSearchCore.prototype.clearCache = function() { + this.cache = {}; +}; + +/** +* Set the number of milliseconds a request can take before automatically being terminated. +* @deprecated +* @param {Number} milliseconds +*/ +AlgoliaSearchCore.prototype.setRequestTimeout = function(milliseconds) { + if (milliseconds) { + this._timeouts.connect = this._timeouts.read = this._timeouts.write = milliseconds; + } +}; + +/** +* Set the three different (connect, read, write) timeouts to be used when requesting +* @param {Object} timeouts +*/ +AlgoliaSearchCore.prototype.setTimeouts = function(timeouts) { + this._timeouts = timeouts; +}; + +/** +* Get the three different (connect, read, write) timeouts to be used when requesting +* @param {Object} timeouts +*/ +AlgoliaSearchCore.prototype.getTimeouts = function() { + return this._timeouts; +}; + +AlgoliaSearchCore.prototype._getAppIdData = function() { + var data = store.get(this.applicationID); + if (data !== null) this._cacheAppIdData(data); + return data; +}; + +AlgoliaSearchCore.prototype._setAppIdData = function(data) { + data.lastChange = (new Date()).getTime(); + this._cacheAppIdData(data); + return store.set(this.applicationID, data); +}; + +AlgoliaSearchCore.prototype._checkAppIdData = function() { + var data = this._getAppIdData(); + var now = (new Date()).getTime(); + if (data === null || now - data.lastChange > RESET_APP_DATA_TIMER) { + return this._resetInitialAppIdData(data); + } + + return data; +}; + +AlgoliaSearchCore.prototype._resetInitialAppIdData = function(data) { + var newData = data || {}; + newData.hostIndexes = {read: 0, write: 0}; + newData.timeoutMultiplier = 1; + newData.shuffleResult = newData.shuffleResult || shuffle([1, 2, 3]); + return this._setAppIdData(newData); +}; + +AlgoliaSearchCore.prototype._cacheAppIdData = function(data) { + this._hostIndexes = data.hostIndexes; + this._timeoutMultiplier = data.timeoutMultiplier; + this._shuffleResult = data.shuffleResult; +}; + +AlgoliaSearchCore.prototype._partialAppIdDataUpdate = function(newData) { + var foreach = require(5); + var currentData = this._getAppIdData(); + foreach(newData, function(value, key) { + currentData[key] = value; + }); + + return this._setAppIdData(currentData); +}; + +AlgoliaSearchCore.prototype._getHostByType = function(hostType) { + return this.hosts[hostType][this._getHostIndexByType(hostType)]; +}; + +AlgoliaSearchCore.prototype._getTimeoutMultiplier = function() { + return this._timeoutMultiplier; +}; + +AlgoliaSearchCore.prototype._getHostIndexByType = function(hostType) { + return this._hostIndexes[hostType]; +}; + +AlgoliaSearchCore.prototype._setHostIndexByType = function(hostIndex, hostType) { + var clone = require(26); + var newHostIndexes = clone(this._hostIndexes); + newHostIndexes[hostType] = hostIndex; + this._partialAppIdDataUpdate({hostIndexes: newHostIndexes}); + return hostIndex; +}; + +AlgoliaSearchCore.prototype._incrementHostIndex = function(hostType) { + return this._setHostIndexByType( + (this._getHostIndexByType(hostType) + 1) % this.hosts[hostType].length, hostType + ); +}; + +AlgoliaSearchCore.prototype._incrementTimeoutMultipler = function() { + var timeoutMultiplier = Math.max(this._timeoutMultiplier + 1, 4); + return this._partialAppIdDataUpdate({timeoutMultiplier: timeoutMultiplier}); +}; + +AlgoliaSearchCore.prototype._getTimeoutsForRequest = function(hostType) { + return { + connect: this._timeouts.connect * this._timeoutMultiplier, + complete: this._timeouts[hostType] * this._timeoutMultiplier + }; +}; + +function prepareHost(protocol) { + return function prepare(host) { + return protocol + '//' + host.toLowerCase(); + }; +} + +// Prototype.js < 1.7, a widely used library, defines a weird +// Array.prototype.toJSON function that will fail to stringify our content +// appropriately +// refs: +// - https://groups.google.com/forum/#!topic/prototype-core/E-SAVvV_V9Q +// - https://github.com/sstephenson/prototype/commit/038a2985a70593c1a86c230fadbdfe2e4898a48c +// - http://stackoverflow.com/a/3148441/147079 +function safeJSONStringify(obj) { + /* eslint no-extend-native:0 */ + + if (Array.prototype.toJSON === undefined) { + return JSON.stringify(obj); + } + + var toJSON = Array.prototype.toJSON; + delete Array.prototype.toJSON; + var out = JSON.stringify(obj); + Array.prototype.toJSON = toJSON; + + return out; +} + +function shuffle(array) { + var currentIndex = array.length; + var temporaryValue; + var randomIndex; + + // While there remain elements to shuffle... + while (currentIndex !== 0) { + // Pick a remaining element... + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex -= 1; + + // And swap it with the current element. + temporaryValue = array[currentIndex]; + array[currentIndex] = array[randomIndex]; + array[randomIndex] = temporaryValue; + } + + return array; +} + +function removeCredentials(headers) { + var newHeaders = {}; + + for (var headerName in headers) { + if (Object.prototype.hasOwnProperty.call(headers, headerName)) { + var value; + + if (headerName === 'x-algolia-api-key' || headerName === 'x-algolia-application-id') { + value = '**hidden for security purposes**'; + } else { + value = headers[headerName]; + } + + newHeaders[headerName] = value; + } + } + + return newHeaders; +} + +}).call(this,require(12)) +},{"1":1,"12":12,"20":20,"26":26,"30":30,"31":31,"32":32,"34":34,"36":36,"5":5,"8":8}],18:[function(require,module,exports){ +var inherits = require(7); +var IndexCore = require(20); +var deprecate = require(28); +var deprecatedMessage = require(29); +var exitPromise = require(31); +var errors = require(30); + +var deprecateForwardToSlaves = deprecate( + function() {}, + deprecatedMessage('forwardToSlaves', 'forwardToReplicas') +); + +module.exports = Index; + +function Index() { + IndexCore.apply(this, arguments); +} + +inherits(Index, IndexCore); + +/* +* Add an object in this index +* +* @param content contains the javascript object to add inside the index +* @param objectID (optional) an objectID you want to attribute to this object +* (if the attribute already exist the old object will be overwrite) +* @param callback (optional) the result callback called with two arguments: +* error: null or Error('message') +* content: the server answer that contains 3 elements: createAt, taskId and objectID +*/ +Index.prototype.addObject = function(content, objectID, callback) { + var indexObj = this; + + if (arguments.length === 1 || typeof objectID === 'function') { + callback = objectID; + objectID = undefined; + } + + return this.as._jsonRequest({ + method: objectID !== undefined ? + 'PUT' : // update or create + 'POST', // create (API generates an objectID) + url: '/1/indexes/' + encodeURIComponent(indexObj.indexName) + // create + (objectID !== undefined ? '/' + encodeURIComponent(objectID) : ''), // update or create + body: content, + hostType: 'write', + callback: callback + }); +}; + +/* +* Add several objects +* +* @param objects contains an array of objects to add +* @param callback (optional) the result callback called with two arguments: +* error: null or Error('message') +* content: the server answer that updateAt and taskID +*/ +Index.prototype.addObjects = function(objects, callback) { + var isArray = require(8); + var usage = 'Usage: index.addObjects(arrayOfObjects[, callback])'; + + if (!isArray(objects)) { + throw new Error(usage); + } + + var indexObj = this; + var postObj = { + requests: [] + }; + for (var i = 0; i < objects.length; ++i) { + var request = { + action: 'addObject', + body: objects[i] + }; + postObj.requests.push(request); + } + return this.as._jsonRequest({ + method: 'POST', + url: '/1/indexes/' + encodeURIComponent(indexObj.indexName) + '/batch', + body: postObj, + hostType: 'write', + callback: callback + }); +}; + +/* +* Update partially an object (only update attributes passed in argument) +* +* @param partialObject contains the javascript attributes to override, the +* object must contains an objectID attribute +* @param createIfNotExists (optional) if false, avoid an automatic creation of the object +* @param callback (optional) the result callback called with two arguments: +* error: null or Error('message') +* content: the server answer that contains 3 elements: createAt, taskId and objectID +*/ +Index.prototype.partialUpdateObject = function(partialObject, createIfNotExists, callback) { + if (arguments.length === 1 || typeof createIfNotExists === 'function') { + callback = createIfNotExists; + createIfNotExists = undefined; + } + + var indexObj = this; + var url = '/1/indexes/' + encodeURIComponent(indexObj.indexName) + '/' + encodeURIComponent(partialObject.objectID) + '/partial'; + if (createIfNotExists === false) { + url += '?createIfNotExists=false'; + } + + return this.as._jsonRequest({ + method: 'POST', + url: url, + body: partialObject, + hostType: 'write', + callback: callback + }); +}; + +/* +* Partially Override the content of several objects +* +* @param objects contains an array of objects to update (each object must contains a objectID attribute) +* @param callback (optional) the result callback called with two arguments: +* error: null or Error('message') +* content: the server answer that updateAt and taskID +*/ +Index.prototype.partialUpdateObjects = function(objects, createIfNotExists, callback) { + if (arguments.length === 1 || typeof createIfNotExists === 'function') { + callback = createIfNotExists; + createIfNotExists = true; + } + + var isArray = require(8); + var usage = 'Usage: index.partialUpdateObjects(arrayOfObjects[, callback])'; + + if (!isArray(objects)) { + throw new Error(usage); + } + + var indexObj = this; + var postObj = { + requests: [] + }; + for (var i = 0; i < objects.length; ++i) { + var request = { + action: createIfNotExists === true ? 'partialUpdateObject' : 'partialUpdateObjectNoCreate', + objectID: objects[i].objectID, + body: objects[i] + }; + postObj.requests.push(request); + } + return this.as._jsonRequest({ + method: 'POST', + url: '/1/indexes/' + encodeURIComponent(indexObj.indexName) + '/batch', + body: postObj, + hostType: 'write', + callback: callback + }); +}; + +/* +* Override the content of object +* +* @param object contains the javascript object to save, the object must contains an objectID attribute +* @param callback (optional) the result callback called with two arguments: +* error: null or Error('message') +* content: the server answer that updateAt and taskID +*/ +Index.prototype.saveObject = function(object, callback) { + var indexObj = this; + return this.as._jsonRequest({ + method: 'PUT', + url: '/1/indexes/' + encodeURIComponent(indexObj.indexName) + '/' + encodeURIComponent(object.objectID), + body: object, + hostType: 'write', + callback: callback + }); +}; + +/* +* Override the content of several objects +* +* @param objects contains an array of objects to update (each object must contains a objectID attribute) +* @param callback (optional) the result callback called with two arguments: +* error: null or Error('message') +* content: the server answer that updateAt and taskID +*/ +Index.prototype.saveObjects = function(objects, callback) { + var isArray = require(8); + var usage = 'Usage: index.saveObjects(arrayOfObjects[, callback])'; + + if (!isArray(objects)) { + throw new Error(usage); + } + + var indexObj = this; + var postObj = { + requests: [] + }; + for (var i = 0; i < objects.length; ++i) { + var request = { + action: 'updateObject', + objectID: objects[i].objectID, + body: objects[i] + }; + postObj.requests.push(request); + } + return this.as._jsonRequest({ + method: 'POST', + url: '/1/indexes/' + encodeURIComponent(indexObj.indexName) + '/batch', + body: postObj, + hostType: 'write', + callback: callback + }); +}; + +/* +* Delete an object from the index +* +* @param objectID the unique identifier of object to delete +* @param callback (optional) the result callback called with two arguments: +* error: null or Error('message') +* content: the server answer that contains 3 elements: createAt, taskId and objectID +*/ +Index.prototype.deleteObject = function(objectID, callback) { + if (typeof objectID === 'function' || typeof objectID !== 'string' && typeof objectID !== 'number') { + var err = new errors.AlgoliaSearchError( + objectID && typeof objectID !== 'function' + ? 'ObjectID must be a string' + : 'Cannot delete an object without an objectID' + ); + callback = objectID; + if (typeof callback === 'function') { + return callback(err); + } + + return this.as._promise.reject(err); + } + + var indexObj = this; + return this.as._jsonRequest({ + method: 'DELETE', + url: '/1/indexes/' + encodeURIComponent(indexObj.indexName) + '/' + encodeURIComponent(objectID), + hostType: 'write', + callback: callback + }); +}; + +/* +* Delete several objects from an index +* +* @param objectIDs contains an array of objectID to delete +* @param callback (optional) the result callback called with two arguments: +* error: null or Error('message') +* content: the server answer that contains 3 elements: createAt, taskId and objectID +*/ +Index.prototype.deleteObjects = function(objectIDs, callback) { + var isArray = require(8); + var map = require(32); + + var usage = 'Usage: index.deleteObjects(arrayOfObjectIDs[, callback])'; + + if (!isArray(objectIDs)) { + throw new Error(usage); + } + + var indexObj = this; + var postObj = { + requests: map(objectIDs, function prepareRequest(objectID) { + return { + action: 'deleteObject', + objectID: objectID, + body: { + objectID: objectID + } + }; + }) + }; + + return this.as._jsonRequest({ + method: 'POST', + url: '/1/indexes/' + encodeURIComponent(indexObj.indexName) + '/batch', + body: postObj, + hostType: 'write', + callback: callback + }); +}; + +/* +* Delete all objects matching a query +* +* @param query the query string +* @param params the optional query parameters +* @param callback (optional) the result callback called with one argument +* error: null or Error('message') +* @deprecated see index.deleteBy +*/ +Index.prototype.deleteByQuery = deprecate(function(query, params, callback) { + var clone = require(26); + var map = require(32); + + var indexObj = this; + var client = indexObj.as; + + if (arguments.length === 1 || typeof params === 'function') { + callback = params; + params = {}; + } else { + params = clone(params); + } + + params.attributesToRetrieve = 'objectID'; + params.hitsPerPage = 1000; + params.distinct = false; + + // when deleting, we should never use cache to get the + // search results + this.clearCache(); + + // there's a problem in how we use the promise chain, + // see how waitTask is done + var promise = this + .search(query, params) + .then(stopOrDelete); + + function stopOrDelete(searchContent) { + // stop here + if (searchContent.nbHits === 0) { + // return indexObj.as._request.resolve(); + return searchContent; + } + + // continue and do a recursive call + var objectIDs = map(searchContent.hits, function getObjectID(object) { + return object.objectID; + }); + + return indexObj + .deleteObjects(objectIDs) + .then(waitTask) + .then(doDeleteByQuery); + } + + function waitTask(deleteObjectsContent) { + return indexObj.waitTask(deleteObjectsContent.taskID); + } + + function doDeleteByQuery() { + return indexObj.deleteByQuery(query, params); + } + + if (!callback) { + return promise; + } + + promise.then(success, failure); + + function success() { + exitPromise(function exit() { + callback(null); + }, client._setTimeout || setTimeout); + } + + function failure(err) { + exitPromise(function exit() { + callback(err); + }, client._setTimeout || setTimeout); + } +}, deprecatedMessage('index.deleteByQuery()', 'index.deleteBy()')); + +/** +* Delete all objects matching a query +* +* the query parameters that can be used are: +* - filters (numeric, facet, tag) +* - geo +* +* you can not send an empty query or filters +* +* @param params the optional query parameters +* @param callback (optional) the result callback called with one argument +* error: null or Error('message') +*/ +Index.prototype.deleteBy = function(params, callback) { + var indexObj = this; + return this.as._jsonRequest({ + method: 'POST', + url: '/1/indexes/' + encodeURIComponent(indexObj.indexName) + '/deleteByQuery', + body: {params: indexObj.as._getSearchParams(params, '')}, + hostType: 'write', + callback: callback + }); +}; + +/* +* Browse all content from an index using events. Basically this will do +* .browse() -> .browseFrom -> .browseFrom -> .. until all the results are returned +* +* @param {string} query - The full text query +* @param {Object} [queryParameters] - Any search query parameter +* @return {EventEmitter} +* @example +* var browser = index.browseAll('cool songs', { +* tagFilters: 'public,comments', +* hitsPerPage: 500 +* }); +* +* browser.on('result', function resultCallback(content) { +* console.log(content.hits); +* }); +* +* // if any error occurs, you get it +* browser.on('error', function(err) { +* throw err; +* }); +* +* // when you have browsed the whole index, you get this event +* browser.on('end', function() { +* console.log('finished'); +* }); +* +* // at any point if you want to stop the browsing process, you can stop it manually +* // otherwise it will go on and on +* browser.stop(); +* +* @see {@link https://www.algolia.com/doc/rest_api#Browse|Algolia REST API Documentation} +*/ +Index.prototype.browseAll = function(query, queryParameters) { + if (typeof query === 'object') { + queryParameters = query; + query = undefined; + } + + var merge = require(33); + + var IndexBrowser = require(19); + + var browser = new IndexBrowser(); + var client = this.as; + var index = this; + var params = client._getSearchParams( + merge({}, queryParameters || {}, { + query: query + }), '' + ); + + // start browsing + browseLoop(); + + function browseLoop(cursor) { + if (browser._stopped) { + return; + } + + var body; + + if (cursor !== undefined) { + body = { + cursor: cursor + }; + } else { + body = { + params: params + }; + } + + client._jsonRequest({ + method: 'POST', + url: '/1/indexes/' + encodeURIComponent(index.indexName) + '/browse', + hostType: 'read', + body: body, + callback: browseCallback + }); + } + + function browseCallback(err, content) { + if (browser._stopped) { + return; + } + + if (err) { + browser._error(err); + return; + } + + browser._result(content); + + // no cursor means we are finished browsing + if (content.cursor === undefined) { + browser._end(); + return; + } + + browseLoop(content.cursor); + } + + return browser; +}; + +/* +* Get a Typeahead.js adapter +* @param searchParams contains an object with query parameters (see search for details) +*/ +Index.prototype.ttAdapter = deprecate(function(params) { + var self = this; + return function ttAdapter(query, syncCb, asyncCb) { + var cb; + + if (typeof asyncCb === 'function') { + // typeahead 0.11 + cb = asyncCb; + } else { + // pre typeahead 0.11 + cb = syncCb; + } + + self.search(query, params, function searchDone(err, content) { + if (err) { + cb(err); + return; + } + + cb(content.hits); + }); + }; +}, +'ttAdapter is not necessary anymore and will be removed in the next version,\n' + +'have a look at autocomplete.js (https://github.com/algolia/autocomplete.js)'); + +/* +* Wait the publication of a task on the server. +* All server task are asynchronous and you can check with this method that the task is published. +* +* @param taskID the id of the task returned by server +* @param callback the result callback with with two arguments: +* error: null or Error('message') +* content: the server answer that contains the list of results +*/ +Index.prototype.waitTask = function(taskID, callback) { + // wait minimum 100ms before retrying + var baseDelay = 100; + // wait maximum 5s before retrying + var maxDelay = 5000; + var loop = 0; + + // waitTask() must be handled differently from other methods, + // it's a recursive method using a timeout + var indexObj = this; + var client = indexObj.as; + + var promise = retryLoop(); + + function retryLoop() { + return client._jsonRequest({ + method: 'GET', + hostType: 'read', + url: '/1/indexes/' + encodeURIComponent(indexObj.indexName) + '/task/' + taskID + }).then(function success(content) { + loop++; + var delay = baseDelay * loop * loop; + if (delay > maxDelay) { + delay = maxDelay; + } + + if (content.status !== 'published') { + return client._promise.delay(delay).then(retryLoop); + } + + return content; + }); + } + + if (!callback) { + return promise; + } + + promise.then(successCb, failureCb); + + function successCb(content) { + exitPromise(function exit() { + callback(null, content); + }, client._setTimeout || setTimeout); + } + + function failureCb(err) { + exitPromise(function exit() { + callback(err); + }, client._setTimeout || setTimeout); + } +}; + +/* +* This function deletes the index content. Settings and index specific API keys are kept untouched. +* +* @param callback (optional) the result callback called with two arguments +* error: null or Error('message') +* content: the settings object or the error message if a failure occurred +*/ +Index.prototype.clearIndex = function(callback) { + var indexObj = this; + return this.as._jsonRequest({ + method: 'POST', + url: '/1/indexes/' + encodeURIComponent(indexObj.indexName) + '/clear', + hostType: 'write', + callback: callback + }); +}; + +/* +* Get settings of this index +* +* @param opts an object of options to add +* @param opts.advanced get more settings like nbShards (useful for Enterprise) +* @param callback (optional) the result callback called with two arguments +* error: null or Error('message') +* content: the settings object or the error message if a failure occurred +*/ +Index.prototype.getSettings = function(opts, callback) { + if (arguments.length === 1 && typeof opts === 'function') { + callback = opts; + opts = {}; + } + opts = opts || {}; + + var indexName = encodeURIComponent(this.indexName); + return this.as._jsonRequest({ + method: 'GET', + url: + '/1/indexes/' + + indexName + + '/settings?getVersion=2' + + (opts.advanced ? '&advanced=' + opts.advanced : ''), + hostType: 'read', + callback: callback + }); +}; + +Index.prototype.searchSynonyms = function(params, callback) { + if (typeof params === 'function') { + callback = params; + params = {}; + } else if (params === undefined) { + params = {}; + } + + return this.as._jsonRequest({ + method: 'POST', + url: '/1/indexes/' + encodeURIComponent(this.indexName) + '/synonyms/search', + body: params, + hostType: 'read', + callback: callback + }); +}; + +function exportData(method, _hitsPerPage, callback) { + function search(page, _previous) { + var options = { + page: page || 0, + hitsPerPage: _hitsPerPage || 100 + }; + var previous = _previous || []; + + return method(options).then(function(result) { + var hits = result.hits; + var nbHits = result.nbHits; + var current = hits.map(function(s) { + delete s._highlightResult; + return s; + }); + var synonyms = previous.concat(current); + if (synonyms.length < nbHits) { + return search(options.page + 1, synonyms); + } + return synonyms; + }); + } + return search().then(function(data) { + if (typeof callback === 'function') { + callback(data); + return undefined; + } + return data; + }); +} + +/** + * Retrieve all the synonyms in an index + * @param [number=100] hitsPerPage The amount of synonyms to retrieve per batch + * @param [function] callback will be called after all synonyms are retrieved + */ +Index.prototype.exportSynonyms = function(hitsPerPage, callback) { + return exportData(this.searchSynonyms.bind(this), hitsPerPage, callback); +}; + +Index.prototype.saveSynonym = function(synonym, opts, callback) { + if (typeof opts === 'function') { + callback = opts; + opts = {}; + } else if (opts === undefined) { + opts = {}; + } + + if (opts.forwardToSlaves !== undefined) deprecateForwardToSlaves(); + var forwardToReplicas = (opts.forwardToSlaves || opts.forwardToReplicas) ? 'true' : 'false'; + + return this.as._jsonRequest({ + method: 'PUT', + url: '/1/indexes/' + encodeURIComponent(this.indexName) + '/synonyms/' + encodeURIComponent(synonym.objectID) + + '?forwardToReplicas=' + forwardToReplicas, + body: synonym, + hostType: 'write', + callback: callback + }); +}; + +Index.prototype.getSynonym = function(objectID, callback) { + return this.as._jsonRequest({ + method: 'GET', + url: '/1/indexes/' + encodeURIComponent(this.indexName) + '/synonyms/' + encodeURIComponent(objectID), + hostType: 'read', + callback: callback + }); +}; + +Index.prototype.deleteSynonym = function(objectID, opts, callback) { + if (typeof opts === 'function') { + callback = opts; + opts = {}; + } else if (opts === undefined) { + opts = {}; + } + + if (opts.forwardToSlaves !== undefined) deprecateForwardToSlaves(); + var forwardToReplicas = (opts.forwardToSlaves || opts.forwardToReplicas) ? 'true' : 'false'; + + return this.as._jsonRequest({ + method: 'DELETE', + url: '/1/indexes/' + encodeURIComponent(this.indexName) + '/synonyms/' + encodeURIComponent(objectID) + + '?forwardToReplicas=' + forwardToReplicas, + hostType: 'write', + callback: callback + }); +}; + +Index.prototype.clearSynonyms = function(opts, callback) { + if (typeof opts === 'function') { + callback = opts; + opts = {}; + } else if (opts === undefined) { + opts = {}; + } + + if (opts.forwardToSlaves !== undefined) deprecateForwardToSlaves(); + var forwardToReplicas = (opts.forwardToSlaves || opts.forwardToReplicas) ? 'true' : 'false'; + + return this.as._jsonRequest({ + method: 'POST', + url: '/1/indexes/' + encodeURIComponent(this.indexName) + '/synonyms/clear' + + '?forwardToReplicas=' + forwardToReplicas, + hostType: 'write', + callback: callback + }); +}; + +Index.prototype.batchSynonyms = function(synonyms, opts, callback) { + if (typeof opts === 'function') { + callback = opts; + opts = {}; + } else if (opts === undefined) { + opts = {}; + } + + if (opts.forwardToSlaves !== undefined) deprecateForwardToSlaves(); + var forwardToReplicas = (opts.forwardToSlaves || opts.forwardToReplicas) ? 'true' : 'false'; + + return this.as._jsonRequest({ + method: 'POST', + url: '/1/indexes/' + encodeURIComponent(this.indexName) + '/synonyms/batch' + + '?forwardToReplicas=' + forwardToReplicas + + '&replaceExistingSynonyms=' + (opts.replaceExistingSynonyms ? 'true' : 'false'), + hostType: 'write', + body: synonyms, + callback: callback + }); +}; + +Index.prototype.searchRules = function(params, callback) { + if (typeof params === 'function') { + callback = params; + params = {}; + } else if (params === undefined) { + params = {}; + } + + return this.as._jsonRequest({ + method: 'POST', + url: '/1/indexes/' + encodeURIComponent(this.indexName) + '/rules/search', + body: params, + hostType: 'read', + callback: callback + }); +}; +/** + * Retrieve all the query rules in an index + * @param [number=100] hitsPerPage The amount of query rules to retrieve per batch + * @param [function] callback will be called after all query rules are retrieved + * error: null or Error('message') + */ +Index.prototype.exportRules = function(hitsPerPage, callback) { + return exportData(this.searchRules.bind(this), hitsPerPage, callback); +}; + +Index.prototype.saveRule = function(rule, opts, callback) { + if (typeof opts === 'function') { + callback = opts; + opts = {}; + } else if (opts === undefined) { + opts = {}; + } + + if (!rule.objectID) { + throw new errors.AlgoliaSearchError('Missing or empty objectID field for rule'); + } + + var forwardToReplicas = opts.forwardToReplicas === true ? 'true' : 'false'; + + return this.as._jsonRequest({ + method: 'PUT', + url: '/1/indexes/' + encodeURIComponent(this.indexName) + '/rules/' + encodeURIComponent(rule.objectID) + + '?forwardToReplicas=' + forwardToReplicas, + body: rule, + hostType: 'write', + callback: callback + }); +}; + +Index.prototype.getRule = function(objectID, callback) { + return this.as._jsonRequest({ + method: 'GET', + url: '/1/indexes/' + encodeURIComponent(this.indexName) + '/rules/' + encodeURIComponent(objectID), + hostType: 'read', + callback: callback + }); +}; + +Index.prototype.deleteRule = function(objectID, opts, callback) { + if (typeof opts === 'function') { + callback = opts; + opts = {}; + } else if (opts === undefined) { + opts = {}; + } + + var forwardToReplicas = opts.forwardToReplicas === true ? 'true' : 'false'; + + return this.as._jsonRequest({ + method: 'DELETE', + url: '/1/indexes/' + encodeURIComponent(this.indexName) + '/rules/' + encodeURIComponent(objectID) + + '?forwardToReplicas=' + forwardToReplicas, + hostType: 'write', + callback: callback + }); +}; + +Index.prototype.clearRules = function(opts, callback) { + if (typeof opts === 'function') { + callback = opts; + opts = {}; + } else if (opts === undefined) { + opts = {}; + } + + var forwardToReplicas = opts.forwardToReplicas === true ? 'true' : 'false'; + + return this.as._jsonRequest({ + method: 'POST', + url: '/1/indexes/' + encodeURIComponent(this.indexName) + '/rules/clear' + + '?forwardToReplicas=' + forwardToReplicas, + hostType: 'write', + callback: callback + }); +}; + +Index.prototype.batchRules = function(rules, opts, callback) { + if (typeof opts === 'function') { + callback = opts; + opts = {}; + } else if (opts === undefined) { + opts = {}; + } + + var forwardToReplicas = opts.forwardToReplicas === true ? 'true' : 'false'; + + return this.as._jsonRequest({ + method: 'POST', + url: '/1/indexes/' + encodeURIComponent(this.indexName) + '/rules/batch' + + '?forwardToReplicas=' + forwardToReplicas + + '&clearExistingRules=' + (opts.clearExistingRules === true ? 'true' : 'false'), + hostType: 'write', + body: rules, + callback: callback + }); +}; + +Index.prototype.exists = function(callback) { + var result = this.getSettings().then(function() { + return true; + }).catch(function(err) { + if (err instanceof errors.AlgoliaSearchError && err.statusCode === 404) { + return false; + } + + throw err; + }); + + if (typeof callback !== 'function') { + return result; + } + + result.then(function(res) { + callback(null, res); + }).catch(function(err) { + callback(err); + }); +}; + +Index.prototype.findObject = function(findCallback, requestOptions, callback) { + requestOptions = requestOptions === undefined ? {} : requestOptions; + var paginate = requestOptions.paginate !== undefined ? requestOptions.paginate : true; + var query = requestOptions.query !== undefined ? requestOptions.query : ''; + + var that = this; + var page = 0; + + var paginateLoop = function() { + requestOptions.page = page; + + return that.search(query, requestOptions).then(function(result) { + var hits = result.hits; + + for (var position = 0; position < hits.length; position++) { + var hit = hits[position]; + if (findCallback(hit)) { + return { + object: hit, + position: position, + page: page + }; + } + } + + page += 1; + + // paginate if option was set and has next page + if (!paginate || page >= result.nbPages) { + throw new errors.ObjectNotFound('Object not found'); + } + + return paginateLoop(); + }); + }; + + var promise = paginateLoop(page); + + if (callback === undefined) { + return promise; + } + + promise + .then(function(res) { + callback(null, res); + }) + .catch(function(err) { + callback(err); + }); +}; + +Index.prototype.getObjectPosition = function(result, objectID) { + var hits = result.hits; + + for (var position = 0; position < hits.length; position++) { + if (hits[position].objectID === objectID) { + return position; + } + } + + return -1; +}; + +/* +* Set settings for this index +* +* @param settings the settings object that can contains : +* - minWordSizefor1Typo: (integer) the minimum number of characters to accept one typo (default = 3). +* - minWordSizefor2Typos: (integer) the minimum number of characters to accept two typos (default = 7). +* - hitsPerPage: (integer) the number of hits per page (default = 10). +* - attributesToRetrieve: (array of strings) default list of attributes to retrieve in objects. +* If set to null, all attributes are retrieved. +* - attributesToHighlight: (array of strings) default list of attributes to highlight. +* If set to null, all indexed attributes are highlighted. +* - attributesToSnippet**: (array of strings) default list of attributes to snippet alongside the number +* of words to return (syntax is attributeName:nbWords). +* By default no snippet is computed. If set to null, no snippet is computed. +* - attributesToIndex: (array of strings) the list of fields you want to index. +* If set to null, all textual and numerical attributes of your objects are indexed, +* but you should update it to get optimal results. +* This parameter has two important uses: +* - Limit the attributes to index: For example if you store a binary image in base64, +* you want to store it and be able to +* retrieve it but you don't want to search in the base64 string. +* - Control part of the ranking*: (see the ranking parameter for full explanation) +* Matches in attributes at the beginning of +* the list will be considered more important than matches in attributes further down the list. +* In one attribute, matching text at the beginning of the attribute will be +* considered more important than text after, you can disable +* this behavior if you add your attribute inside `unordered(AttributeName)`, +* for example attributesToIndex: ["title", "unordered(text)"]. +* - attributesForFaceting: (array of strings) The list of fields you want to use for faceting. +* All strings in the attribute selected for faceting are extracted and added as a facet. +* If set to null, no attribute is used for faceting. +* - attributeForDistinct: (string) The attribute name used for the Distinct feature. +* This feature is similar to the SQL "distinct" keyword: when enabled +* in query with the distinct=1 parameter, all hits containing a duplicate +* value for this attribute are removed from results. +* For example, if the chosen attribute is show_name and several hits have +* the same value for show_name, then only the best one is kept and others are removed. +* - ranking: (array of strings) controls the way results are sorted. +* We have six available criteria: +* - typo: sort according to number of typos, +* - geo: sort according to decreassing distance when performing a geo-location based search, +* - proximity: sort according to the proximity of query words in hits, +* - attribute: sort according to the order of attributes defined by attributesToIndex, +* - exact: +* - if the user query contains one word: sort objects having an attribute +* that is exactly the query word before others. +* For example if you search for the "V" TV show, you want to find it +* with the "V" query and avoid to have all popular TV +* show starting by the v letter before it. +* - if the user query contains multiple words: sort according to the +* number of words that matched exactly (and not as a prefix). +* - custom: sort according to a user defined formula set in **customRanking** attribute. +* The standard order is ["typo", "geo", "proximity", "attribute", "exact", "custom"] +* - customRanking: (array of strings) lets you specify part of the ranking. +* The syntax of this condition is an array of strings containing attributes +* prefixed by asc (ascending order) or desc (descending order) operator. +* For example `"customRanking" => ["desc(population)", "asc(name)"]` +* - queryType: Select how the query words are interpreted, it can be one of the following value: +* - prefixAll: all query words are interpreted as prefixes, +* - prefixLast: only the last word is interpreted as a prefix (default behavior), +* - prefixNone: no query word is interpreted as a prefix. This option is not recommended. +* - highlightPreTag: (string) Specify the string that is inserted before +* the highlighted parts in the query result (default to ""). +* - highlightPostTag: (string) Specify the string that is inserted after +* the highlighted parts in the query result (default to ""). +* - optionalWords: (array of strings) Specify a list of words that should +* be considered as optional when found in the query. +* @param callback (optional) the result callback called with two arguments +* error: null or Error('message') +* content: the server answer or the error message if a failure occurred +*/ +Index.prototype.setSettings = function(settings, opts, callback) { + if (arguments.length === 1 || typeof opts === 'function') { + callback = opts; + opts = {}; + } + + if (opts.forwardToSlaves !== undefined) deprecateForwardToSlaves(); + var forwardToReplicas = (opts.forwardToSlaves || opts.forwardToReplicas) ? 'true' : 'false'; + + var indexObj = this; + return this.as._jsonRequest({ + method: 'PUT', + url: '/1/indexes/' + encodeURIComponent(indexObj.indexName) + '/settings?forwardToReplicas=' + + forwardToReplicas, + hostType: 'write', + body: settings, + callback: callback + }); +}; + +/* +* @deprecated see client.listApiKeys() +*/ +Index.prototype.listUserKeys = deprecate(function(callback) { + return this.listApiKeys(callback); +}, deprecatedMessage('index.listUserKeys()', 'client.listApiKeys()')); + +/* +* List all existing API keys to this index +* +* @param callback the result callback called with two arguments +* error: null or Error('message') +* content: the server answer with API keys belonging to the index +* +* @deprecated see client.listApiKeys() +*/ +Index.prototype.listApiKeys = deprecate(function(callback) { + var indexObj = this; + return this.as._jsonRequest({ + method: 'GET', + url: '/1/indexes/' + encodeURIComponent(indexObj.indexName) + '/keys', + hostType: 'read', + callback: callback + }); +}, deprecatedMessage('index.listApiKeys()', 'client.listApiKeys()')); + +/* +* @deprecated see client.getApiKey() +*/ +Index.prototype.getUserKeyACL = deprecate(function(key, callback) { + return this.getApiKey(key, callback); +}, deprecatedMessage('index.getUserKeyACL()', 'client.getApiKey()')); + + +/* +* Get an API key from this index +* +* @param key +* @param callback the result callback called with two arguments +* error: null or Error('message') +* content: the server answer with the right API key +* +* @deprecated see client.getApiKey() +*/ +Index.prototype.getApiKey = deprecate(function(key, callback) { + var indexObj = this; + return this.as._jsonRequest({ + method: 'GET', + url: '/1/indexes/' + encodeURIComponent(indexObj.indexName) + '/keys/' + key, + hostType: 'read', + callback: callback + }); +}, deprecatedMessage('index.getApiKey()', 'client.getApiKey()')); + +/* +* @deprecated see client.deleteApiKey() +*/ +Index.prototype.deleteUserKey = deprecate(function(key, callback) { + return this.deleteApiKey(key, callback); +}, deprecatedMessage('index.deleteUserKey()', 'client.deleteApiKey()')); + +/* +* Delete an existing API key associated to this index +* +* @param key +* @param callback the result callback called with two arguments +* error: null or Error('message') +* content: the server answer with the deletion date +* +* @deprecated see client.deleteApiKey() +*/ +Index.prototype.deleteApiKey = deprecate(function(key, callback) { + var indexObj = this; + return this.as._jsonRequest({ + method: 'DELETE', + url: '/1/indexes/' + encodeURIComponent(indexObj.indexName) + '/keys/' + key, + hostType: 'write', + callback: callback + }); +}, deprecatedMessage('index.deleteApiKey()', 'client.deleteApiKey()')); + +/* +* @deprecated see client.addApiKey() +*/ +Index.prototype.addUserKey = deprecate(function(acls, params, callback) { + return this.addApiKey(acls, params, callback); +}, deprecatedMessage('index.addUserKey()', 'client.addApiKey()')); + +/* +* Add a new API key to this index +* +* @param {string[]} acls - The list of ACL for this key. Defined by an array of strings that +* can contains the following values: +* - search: allow to search (https and http) +* - addObject: allows to add/update an object in the index (https only) +* - deleteObject : allows to delete an existing object (https only) +* - deleteIndex : allows to delete index content (https only) +* - settings : allows to get index settings (https only) +* - editSettings : allows to change index settings (https only) +* @param {Object} [params] - Optionnal parameters to set for the key +* @param {number} params.validity - Number of seconds after which the key will +* be automatically removed (0 means no time limit for this key) +* @param {number} params.maxQueriesPerIPPerHour - Number of API calls allowed from an IP address per hour +* @param {number} params.maxHitsPerQuery - Number of hits this API key can retrieve in one call +* @param {string} params.description - A description for your key +* @param {string[]} params.referers - A list of authorized referers +* @param {Object} params.queryParameters - Force the key to use specific query parameters +* @param {Function} callback - The result callback called with two arguments +* error: null or Error('message') +* content: the server answer with the added API key +* @return {Promise|undefined} Returns a promise if no callback given +* @example +* index.addUserKey(['search'], { +* validity: 300, +* maxQueriesPerIPPerHour: 2000, +* maxHitsPerQuery: 3, +* description: 'Eat three fruits', +* referers: ['*.algolia.com'], +* queryParameters: { +* tagFilters: ['public'], +* } +* }) +* @see {@link https://www.algolia.com/doc/rest_api#AddIndexKey|Algolia REST API Documentation} +* +* @deprecated see client.addApiKey() +*/ +Index.prototype.addApiKey = deprecate(function(acls, params, callback) { + var isArray = require(8); + var usage = 'Usage: index.addApiKey(arrayOfAcls[, params, callback])'; + + if (!isArray(acls)) { + throw new Error(usage); + } + + if (arguments.length === 1 || typeof params === 'function') { + callback = params; + params = null; + } + + var postObj = { + acl: acls + }; + + if (params) { + postObj.validity = params.validity; + postObj.maxQueriesPerIPPerHour = params.maxQueriesPerIPPerHour; + postObj.maxHitsPerQuery = params.maxHitsPerQuery; + postObj.description = params.description; + + if (params.queryParameters) { + postObj.queryParameters = this.as._getSearchParams(params.queryParameters, ''); + } + + postObj.referers = params.referers; + } + + return this.as._jsonRequest({ + method: 'POST', + url: '/1/indexes/' + encodeURIComponent(this.indexName) + '/keys', + body: postObj, + hostType: 'write', + callback: callback + }); +}, deprecatedMessage('index.addApiKey()', 'client.addApiKey()')); + +/** +* @deprecated use client.addApiKey() +*/ +Index.prototype.addUserKeyWithValidity = deprecate(function deprecatedAddUserKeyWithValidity(acls, params, callback) { + return this.addApiKey(acls, params, callback); +}, deprecatedMessage('index.addUserKeyWithValidity()', 'client.addApiKey()')); + +/* +* @deprecated see client.updateApiKey() +*/ +Index.prototype.updateUserKey = deprecate(function(key, acls, params, callback) { + return this.updateApiKey(key, acls, params, callback); +}, deprecatedMessage('index.updateUserKey()', 'client.updateApiKey()')); + +/** +* Update an existing API key of this index +* @param {string} key - The key to update +* @param {string[]} acls - The list of ACL for this key. Defined by an array of strings that +* can contains the following values: +* - search: allow to search (https and http) +* - addObject: allows to add/update an object in the index (https only) +* - deleteObject : allows to delete an existing object (https only) +* - deleteIndex : allows to delete index content (https only) +* - settings : allows to get index settings (https only) +* - editSettings : allows to change index settings (https only) +* @param {Object} [params] - Optionnal parameters to set for the key +* @param {number} params.validity - Number of seconds after which the key will +* be automatically removed (0 means no time limit for this key) +* @param {number} params.maxQueriesPerIPPerHour - Number of API calls allowed from an IP address per hour +* @param {number} params.maxHitsPerQuery - Number of hits this API key can retrieve in one call +* @param {string} params.description - A description for your key +* @param {string[]} params.referers - A list of authorized referers +* @param {Object} params.queryParameters - Force the key to use specific query parameters +* @param {Function} callback - The result callback called with two arguments +* error: null or Error('message') +* content: the server answer with user keys list +* @return {Promise|undefined} Returns a promise if no callback given +* @example +* index.updateApiKey('APIKEY', ['search'], { +* validity: 300, +* maxQueriesPerIPPerHour: 2000, +* maxHitsPerQuery: 3, +* description: 'Eat three fruits', +* referers: ['*.algolia.com'], +* queryParameters: { +* tagFilters: ['public'], +* } +* }) +* @see {@link https://www.algolia.com/doc/rest_api#UpdateIndexKey|Algolia REST API Documentation} +* +* @deprecated see client.updateApiKey() +*/ +Index.prototype.updateApiKey = deprecate(function(key, acls, params, callback) { + var isArray = require(8); + var usage = 'Usage: index.updateApiKey(key, arrayOfAcls[, params, callback])'; + + if (!isArray(acls)) { + throw new Error(usage); + } + + if (arguments.length === 2 || typeof params === 'function') { + callback = params; + params = null; + } + + var putObj = { + acl: acls + }; + + if (params) { + putObj.validity = params.validity; + putObj.maxQueriesPerIPPerHour = params.maxQueriesPerIPPerHour; + putObj.maxHitsPerQuery = params.maxHitsPerQuery; + putObj.description = params.description; + + if (params.queryParameters) { + putObj.queryParameters = this.as._getSearchParams(params.queryParameters, ''); + } + + putObj.referers = params.referers; + } + + return this.as._jsonRequest({ + method: 'PUT', + url: '/1/indexes/' + encodeURIComponent(this.indexName) + '/keys/' + key, + body: putObj, + hostType: 'write', + callback: callback + }); +}, deprecatedMessage('index.updateApiKey()', 'client.updateApiKey()')); + +},{"19":19,"20":20,"26":26,"28":28,"29":29,"30":30,"31":31,"32":32,"33":33,"7":7,"8":8}],19:[function(require,module,exports){ +'use strict'; + +// This is the object returned by the `index.browseAll()` method + +module.exports = IndexBrowser; + +var inherits = require(7); +var EventEmitter = require(4).EventEmitter; + +function IndexBrowser() { +} + +inherits(IndexBrowser, EventEmitter); + +IndexBrowser.prototype.stop = function() { + this._stopped = true; + this._clean(); +}; + +IndexBrowser.prototype._end = function() { + this.emit('end'); + this._clean(); +}; + +IndexBrowser.prototype._error = function(err) { + this.emit('error', err); + this._clean(); +}; + +IndexBrowser.prototype._result = function(content) { + this.emit('result', content); +}; + +IndexBrowser.prototype._clean = function() { + this.removeAllListeners('stop'); + this.removeAllListeners('end'); + this.removeAllListeners('error'); + this.removeAllListeners('result'); +}; + +},{"4":4,"7":7}],20:[function(require,module,exports){ +var buildSearchMethod = require(25); +var deprecate = require(28); +var deprecatedMessage = require(29); + +module.exports = IndexCore; + +/* +* Index class constructor. +* You should not use this method directly but use initIndex() function +*/ +function IndexCore(algoliasearch, indexName) { + this.indexName = indexName; + this.as = algoliasearch; + this.typeAheadArgs = null; + this.typeAheadValueOption = null; + + // make sure every index instance has it's own cache + this.cache = {}; +} + +/* +* Clear all queries in cache +*/ +IndexCore.prototype.clearCache = function() { + this.cache = {}; +}; + +/* +* Search inside the index using XMLHttpRequest request (Using a POST query to +* minimize number of OPTIONS queries: Cross-Origin Resource Sharing). +* +* @param {string} [query] the full text query +* @param {object} [args] (optional) if set, contains an object with query parameters: +* - page: (integer) Pagination parameter used to select the page to retrieve. +* Page is zero-based and defaults to 0. Thus, +* to retrieve the 10th page you need to set page=9 +* - hitsPerPage: (integer) Pagination parameter used to select the number of hits per page. Defaults to 20. +* - attributesToRetrieve: a string that contains the list of object attributes +* you want to retrieve (let you minimize the answer size). +* Attributes are separated with a comma (for example "name,address"). +* You can also use an array (for example ["name","address"]). +* By default, all attributes are retrieved. You can also use '*' to retrieve all +* values when an attributesToRetrieve setting is specified for your index. +* - attributesToHighlight: a string that contains the list of attributes you +* want to highlight according to the query. +* Attributes are separated by a comma. You can also use an array (for example ["name","address"]). +* If an attribute has no match for the query, the raw value is returned. +* By default all indexed text attributes are highlighted. +* You can use `*` if you want to highlight all textual attributes. +* Numerical attributes are not highlighted. +* A matchLevel is returned for each highlighted attribute and can contain: +* - full: if all the query terms were found in the attribute, +* - partial: if only some of the query terms were found, +* - none: if none of the query terms were found. +* - attributesToSnippet: a string that contains the list of attributes to snippet alongside +* the number of words to return (syntax is `attributeName:nbWords`). +* Attributes are separated by a comma (Example: attributesToSnippet=name:10,content:10). +* You can also use an array (Example: attributesToSnippet: ['name:10','content:10']). +* By default no snippet is computed. +* - minWordSizefor1Typo: the minimum number of characters in a query word to accept one typo in this word. +* Defaults to 3. +* - minWordSizefor2Typos: the minimum number of characters in a query word +* to accept two typos in this word. Defaults to 7. +* - getRankingInfo: if set to 1, the result hits will contain ranking +* information in _rankingInfo attribute. +* - aroundLatLng: search for entries around a given +* latitude/longitude (specified as two floats separated by a comma). +* For example aroundLatLng=47.316669,5.016670). +* You can specify the maximum distance in meters with the aroundRadius parameter (in meters) +* and the precision for ranking with aroundPrecision +* (for example if you set aroundPrecision=100, two objects that are distant of +* less than 100m will be considered as identical for "geo" ranking parameter). +* At indexing, you should specify geoloc of an object with the _geoloc attribute +* (in the form {"_geoloc":{"lat":48.853409, "lng":2.348800}}) +* - insideBoundingBox: search entries inside a given area defined by the two extreme points +* of a rectangle (defined by 4 floats: p1Lat,p1Lng,p2Lat,p2Lng). +* For example insideBoundingBox=47.3165,4.9665,47.3424,5.0201). +* At indexing, you should specify geoloc of an object with the _geoloc attribute +* (in the form {"_geoloc":{"lat":48.853409, "lng":2.348800}}) +* - numericFilters: a string that contains the list of numeric filters you want to +* apply separated by a comma. +* The syntax of one filter is `attributeName` followed by `operand` followed by `value`. +* Supported operands are `<`, `<=`, `=`, `>` and `>=`. +* You can have multiple conditions on one attribute like for example numericFilters=price>100,price<1000. +* You can also use an array (for example numericFilters: ["price>100","price<1000"]). +* - tagFilters: filter the query by a set of tags. You can AND tags by separating them by commas. +* To OR tags, you must add parentheses. For example, tags=tag1,(tag2,tag3) means tag1 AND (tag2 OR tag3). +* You can also use an array, for example tagFilters: ["tag1",["tag2","tag3"]] +* means tag1 AND (tag2 OR tag3). +* At indexing, tags should be added in the _tags** attribute +* of objects (for example {"_tags":["tag1","tag2"]}). +* - facetFilters: filter the query by a list of facets. +* Facets are separated by commas and each facet is encoded as `attributeName:value`. +* For example: `facetFilters=category:Book,author:John%20Doe`. +* You can also use an array (for example `["category:Book","author:John%20Doe"]`). +* - facets: List of object attributes that you want to use for faceting. +* Comma separated list: `"category,author"` or array `['category','author']` +* Only attributes that have been added in **attributesForFaceting** index setting +* can be used in this parameter. +* You can also use `*` to perform faceting on all attributes specified in **attributesForFaceting**. +* - queryType: select how the query words are interpreted, it can be one of the following value: +* - prefixAll: all query words are interpreted as prefixes, +* - prefixLast: only the last word is interpreted as a prefix (default behavior), +* - prefixNone: no query word is interpreted as a prefix. This option is not recommended. +* - optionalWords: a string that contains the list of words that should +* be considered as optional when found in the query. +* Comma separated and array are accepted. +* - distinct: If set to 1, enable the distinct feature (disabled by default) +* if the attributeForDistinct index setting is set. +* This feature is similar to the SQL "distinct" keyword: when enabled +* in a query with the distinct=1 parameter, +* all hits containing a duplicate value for the attributeForDistinct attribute are removed from results. +* For example, if the chosen attribute is show_name and several hits have +* the same value for show_name, then only the best +* one is kept and others are removed. +* - restrictSearchableAttributes: List of attributes you want to use for +* textual search (must be a subset of the attributesToIndex index setting) +* either comma separated or as an array +* @param {function} [callback] the result callback called with two arguments: +* error: null or Error('message'). If false, the content contains the error. +* content: the server answer that contains the list of results. +*/ +IndexCore.prototype.search = buildSearchMethod('query'); + +/* +* -- BETA -- +* Search a record similar to the query inside the index using XMLHttpRequest request (Using a POST query to +* minimize number of OPTIONS queries: Cross-Origin Resource Sharing). +* +* @param {string} [query] the similar query +* @param {object} [args] (optional) if set, contains an object with query parameters. +* All search parameters are supported (see search function), restrictSearchableAttributes and facetFilters +* are the two most useful to restrict the similar results and get more relevant content +*/ +IndexCore.prototype.similarSearch = deprecate( + buildSearchMethod('similarQuery'), + deprecatedMessage( + 'index.similarSearch(query[, callback])', + 'index.search({ similarQuery: query }[, callback])' + ) +); + +/* +* Browse index content. The response content will have a `cursor` property that you can use +* to browse subsequent pages for this query. Use `index.browseFrom(cursor)` when you want. +* +* @param {string} query - The full text query +* @param {Object} [queryParameters] - Any search query parameter +* @param {Function} [callback] - The result callback called with two arguments +* error: null or Error('message') +* content: the server answer with the browse result +* @return {Promise|undefined} Returns a promise if no callback given +* @example +* index.browse('cool songs', { +* tagFilters: 'public,comments', +* hitsPerPage: 500 +* }, callback); +* @see {@link https://www.algolia.com/doc/rest_api#Browse|Algolia REST API Documentation} +*/ +IndexCore.prototype.browse = function(query, queryParameters, callback) { + var merge = require(33); + + var indexObj = this; + + var page; + var hitsPerPage; + + // we check variadic calls that are not the one defined + // .browse()/.browse(fn) + // => page = 0 + if (arguments.length === 0 || arguments.length === 1 && typeof arguments[0] === 'function') { + page = 0; + callback = arguments[0]; + query = undefined; + } else if (typeof arguments[0] === 'number') { + // .browse(2)/.browse(2, 10)/.browse(2, fn)/.browse(2, 10, fn) + page = arguments[0]; + if (typeof arguments[1] === 'number') { + hitsPerPage = arguments[1]; + } else if (typeof arguments[1] === 'function') { + callback = arguments[1]; + hitsPerPage = undefined; + } + query = undefined; + queryParameters = undefined; + } else if (typeof arguments[0] === 'object') { + // .browse(queryParameters)/.browse(queryParameters, cb) + if (typeof arguments[1] === 'function') { + callback = arguments[1]; + } + queryParameters = arguments[0]; + query = undefined; + } else if (typeof arguments[0] === 'string' && typeof arguments[1] === 'function') { + // .browse(query, cb) + callback = arguments[1]; + queryParameters = undefined; + } + + // otherwise it's a .browse(query)/.browse(query, queryParameters)/.browse(query, queryParameters, cb) + + // get search query parameters combining various possible calls + // to .browse(); + queryParameters = merge({}, queryParameters || {}, { + page: page, + hitsPerPage: hitsPerPage, + query: query + }); + + var params = this.as._getSearchParams(queryParameters, ''); + + return this.as._jsonRequest({ + method: 'POST', + url: '/1/indexes/' + encodeURIComponent(indexObj.indexName) + '/browse', + body: {params: params}, + hostType: 'read', + callback: callback + }); +}; + +/* +* Continue browsing from a previous position (cursor), obtained via a call to `.browse()`. +* +* @param {string} query - The full text query +* @param {Object} [queryParameters] - Any search query parameter +* @param {Function} [callback] - The result callback called with two arguments +* error: null or Error('message') +* content: the server answer with the browse result +* @return {Promise|undefined} Returns a promise if no callback given +* @example +* index.browseFrom('14lkfsakl32', callback); +* @see {@link https://www.algolia.com/doc/rest_api#Browse|Algolia REST API Documentation} +*/ +IndexCore.prototype.browseFrom = function(cursor, callback) { + return this.as._jsonRequest({ + method: 'POST', + url: '/1/indexes/' + encodeURIComponent(this.indexName) + '/browse', + body: {cursor: cursor}, + hostType: 'read', + callback: callback + }); +}; + +/* +* Search for facet values +* https://www.algolia.com/doc/rest-api/search#search-for-facet-values +* +* @param {string} params.facetName Facet name, name of the attribute to search for values in. +* Must be declared as a facet +* @param {string} params.facetQuery Query for the facet search +* @param {string} [params.*] Any search parameter of Algolia, +* see https://www.algolia.com/doc/api-client/javascript/search#search-parameters +* Pagination is not supported. The page and hitsPerPage parameters will be ignored. +* @param callback (optional) +*/ +IndexCore.prototype.searchForFacetValues = function(params, callback) { + var clone = require(26); + var omit = require(34); + var usage = 'Usage: index.searchForFacetValues({facetName, facetQuery, ...params}[, callback])'; + + if (params.facetName === undefined || params.facetQuery === undefined) { + throw new Error(usage); + } + + var facetName = params.facetName; + var filteredParams = omit(clone(params), function(keyName) { + return keyName === 'facetName'; + }); + var searchParameters = this.as._getSearchParams(filteredParams, ''); + + return this.as._jsonRequest({ + method: 'POST', + url: '/1/indexes/' + + encodeURIComponent(this.indexName) + '/facets/' + encodeURIComponent(facetName) + '/query', + hostType: 'read', + body: {params: searchParameters}, + callback: callback + }); +}; + +IndexCore.prototype.searchFacet = deprecate(function(params, callback) { + return this.searchForFacetValues(params, callback); +}, deprecatedMessage( + 'index.searchFacet(params[, callback])', + 'index.searchForFacetValues(params[, callback])' +)); + +IndexCore.prototype._search = function(params, url, callback, additionalUA) { + return this.as._jsonRequest({ + cache: this.cache, + method: 'POST', + url: url || '/1/indexes/' + encodeURIComponent(this.indexName) + '/query', + body: {params: params}, + hostType: 'read', + fallback: { + method: 'GET', + url: '/1/indexes/' + encodeURIComponent(this.indexName), + body: {params: params} + }, + callback: callback, + additionalUA: additionalUA + }); +}; + +/* +* Get an object from this index +* +* @param objectID the unique identifier of the object to retrieve +* @param attrs (optional) if set, contains the array of attribute names to retrieve +* @param callback (optional) the result callback called with two arguments +* error: null or Error('message') +* content: the object to retrieve or the error message if a failure occurred +*/ +IndexCore.prototype.getObject = function(objectID, attrs, callback) { + var indexObj = this; + + if (arguments.length === 1 || typeof attrs === 'function') { + callback = attrs; + attrs = undefined; + } + + var params = ''; + if (attrs !== undefined) { + params = '?attributes='; + for (var i = 0; i < attrs.length; ++i) { + if (i !== 0) { + params += ','; + } + params += attrs[i]; + } + } + + return this.as._jsonRequest({ + method: 'GET', + url: '/1/indexes/' + encodeURIComponent(indexObj.indexName) + '/' + encodeURIComponent(objectID) + params, + hostType: 'read', + callback: callback + }); +}; + +/* +* Get several objects from this index +* +* @param objectIDs the array of unique identifier of objects to retrieve +*/ +IndexCore.prototype.getObjects = function(objectIDs, attributesToRetrieve, callback) { + var isArray = require(8); + var map = require(32); + + var usage = 'Usage: index.getObjects(arrayOfObjectIDs[, callback])'; + + if (!isArray(objectIDs)) { + throw new Error(usage); + } + + var indexObj = this; + + if (arguments.length === 1 || typeof attributesToRetrieve === 'function') { + callback = attributesToRetrieve; + attributesToRetrieve = undefined; + } + + var body = { + requests: map(objectIDs, function prepareRequest(objectID) { + var request = { + indexName: indexObj.indexName, + objectID: objectID + }; + + if (attributesToRetrieve) { + request.attributesToRetrieve = attributesToRetrieve.join(','); + } + + return request; + }) + }; + + return this.as._jsonRequest({ + method: 'POST', + url: '/1/indexes/*/objects', + hostType: 'read', + body: body, + callback: callback + }); +}; + +IndexCore.prototype.as = null; +IndexCore.prototype.indexName = null; +IndexCore.prototype.typeAheadArgs = null; +IndexCore.prototype.typeAheadValueOption = null; + +},{"25":25,"26":26,"28":28,"29":29,"32":32,"33":33,"34":34,"8":8}],21:[function(require,module,exports){ +'use strict'; + +var AlgoliaSearch = require(16); +var createAlgoliasearch = require(22); + +module.exports = createAlgoliasearch(AlgoliaSearch, 'Browser'); + +},{"16":16,"22":22}],22:[function(require,module,exports){ +(function (process){ +'use strict'; + +var global = require(6); +var Promise = global.Promise || require(3).Promise; + +// This is the standalone browser build entry point +// Browser implementation of the Algolia Search JavaScript client, +// using XMLHttpRequest, XDomainRequest and JSONP as fallback +module.exports = function createAlgoliasearch(AlgoliaSearch, uaSuffix) { + var inherits = require(7); + var errors = require(30); + var inlineHeaders = require(23); + var jsonpRequest = require(24); + var places = require(35); + uaSuffix = uaSuffix || ''; + + if (process.env.NODE_ENV === 'debug') { + require(1).enable('algoliasearch*'); + } + + function algoliasearch(applicationID, apiKey, opts) { + var cloneDeep = require(26); + + opts = cloneDeep(opts || {}); + + opts._ua = opts._ua || algoliasearch.ua; + + return new AlgoliaSearchBrowser(applicationID, apiKey, opts); + } + + algoliasearch.version = require(37); + + algoliasearch.ua = + 'Algolia for JavaScript (' + algoliasearch.version + '); ' + uaSuffix; + + algoliasearch.initPlaces = places(algoliasearch); + + // we expose into window no matter how we are used, this will allow + // us to easily debug any website running algolia + global.__algolia = { + debug: require(1), + algoliasearch: algoliasearch + }; + + var support = { + hasXMLHttpRequest: 'XMLHttpRequest' in global, + hasXDomainRequest: 'XDomainRequest' in global + }; + + if (support.hasXMLHttpRequest) { + support.cors = 'withCredentials' in new XMLHttpRequest(); + } + + function AlgoliaSearchBrowser() { + // call AlgoliaSearch constructor + AlgoliaSearch.apply(this, arguments); + } + + inherits(AlgoliaSearchBrowser, AlgoliaSearch); + + AlgoliaSearchBrowser.prototype._request = function request(url, opts) { + return new Promise(function wrapRequest(resolve, reject) { + // no cors or XDomainRequest, no request + if (!support.cors && !support.hasXDomainRequest) { + // very old browser, not supported + reject(new errors.Network('CORS not supported')); + return; + } + + url = inlineHeaders(url, opts.headers); + + var body = opts.body; + var req = support.cors ? new XMLHttpRequest() : new XDomainRequest(); + var reqTimeout; + var timedOut; + var connected = false; + + reqTimeout = setTimeout(onTimeout, opts.timeouts.connect); + // we set an empty onprogress listener + // so that XDomainRequest on IE9 is not aborted + // refs: + // - https://github.com/algolia/algoliasearch-client-js/issues/76 + // - https://social.msdn.microsoft.com/Forums/ie/en-US/30ef3add-767c-4436-b8a9-f1ca19b4812e/ie9-rtm-xdomainrequest-issued-requests-may-abort-if-all-event-handlers-not-specified?forum=iewebdevelopment + req.onprogress = onProgress; + if ('onreadystatechange' in req) req.onreadystatechange = onReadyStateChange; + req.onload = onLoad; + req.onerror = onError; + + // do not rely on default XHR async flag, as some analytics code like hotjar + // breaks it and set it to false by default + if (req instanceof XMLHttpRequest) { + req.open(opts.method, url, true); + + // The Analytics API never accepts Auth headers as query string + // this option exists specifically for them. + if (opts.forceAuthHeaders) { + req.setRequestHeader( + 'x-algolia-application-id', + opts.headers['x-algolia-application-id'] + ); + req.setRequestHeader( + 'x-algolia-api-key', + opts.headers['x-algolia-api-key'] + ); + } + } else { + req.open(opts.method, url); + } + + // headers are meant to be sent after open + if (support.cors) { + if (body) { + if (opts.method === 'POST') { + // https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests + req.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); + } else { + req.setRequestHeader('content-type', 'application/json'); + } + } + req.setRequestHeader('accept', 'application/json'); + } + + if (body) { + req.send(body); + } else { + req.send(); + } + + // event object not received in IE8, at least + // but we do not use it, still important to note + function onLoad(/* event */) { + // When browser does not supports req.timeout, we can + // have both a load and timeout event, since handled by a dumb setTimeout + if (timedOut) { + return; + } + + clearTimeout(reqTimeout); + + var out; + + try { + out = { + body: JSON.parse(req.responseText), + responseText: req.responseText, + statusCode: req.status, + // XDomainRequest does not have any response headers + headers: req.getAllResponseHeaders && req.getAllResponseHeaders() || {} + }; + } catch (e) { + out = new errors.UnparsableJSON({ + more: req.responseText + }); + } + + if (out instanceof errors.UnparsableJSON) { + reject(out); + } else { + resolve(out); + } + } + + function onError(event) { + if (timedOut) { + return; + } + + clearTimeout(reqTimeout); + + // error event is trigerred both with XDR/XHR on: + // - DNS error + // - unallowed cross domain request + reject( + new errors.Network({ + more: event + }) + ); + } + + function onTimeout() { + timedOut = true; + req.abort(); + + reject(new errors.RequestTimeout()); + } + + function onConnect() { + connected = true; + clearTimeout(reqTimeout); + reqTimeout = setTimeout(onTimeout, opts.timeouts.complete); + } + + function onProgress() { + if (!connected) onConnect(); + } + + function onReadyStateChange() { + if (!connected && req.readyState > 1) onConnect(); + } + }); + }; + + AlgoliaSearchBrowser.prototype._request.fallback = function requestFallback(url, opts) { + url = inlineHeaders(url, opts.headers); + + return new Promise(function wrapJsonpRequest(resolve, reject) { + jsonpRequest(url, opts, function jsonpRequestDone(err, content) { + if (err) { + reject(err); + return; + } + + resolve(content); + }); + }); + }; + + AlgoliaSearchBrowser.prototype._promise = { + reject: function rejectPromise(val) { + return Promise.reject(val); + }, + resolve: function resolvePromise(val) { + return Promise.resolve(val); + }, + delay: function delayPromise(ms) { + return new Promise(function resolveOnTimeout(resolve/* , reject*/) { + setTimeout(resolve, ms); + }); + }, + all: function all(promises) { + return Promise.all(promises); + } + }; + + return algoliasearch; +}; + +}).call(this,require(12)) +},{"1":1,"12":12,"23":23,"24":24,"26":26,"3":3,"30":30,"35":35,"37":37,"6":6,"7":7}],23:[function(require,module,exports){ +'use strict'; + +module.exports = inlineHeaders; + +var encode = require(14); + +function inlineHeaders(url, headers) { + if (/\?/.test(url)) { + url += '&'; + } else { + url += '?'; + } + + return url + encode(headers); +} + +},{"14":14}],24:[function(require,module,exports){ +'use strict'; + +module.exports = jsonpRequest; + +var errors = require(30); + +var JSONPCounter = 0; + +function jsonpRequest(url, opts, cb) { + if (opts.method !== 'GET') { + cb(new Error('Method ' + opts.method + ' ' + url + ' is not supported by JSONP.')); + return; + } + + opts.debug('JSONP: start'); + + var cbCalled = false; + var timedOut = false; + + JSONPCounter += 1; + var head = document.getElementsByTagName('head')[0]; + var script = document.createElement('script'); + var cbName = 'algoliaJSONP_' + JSONPCounter; + var done = false; + + window[cbName] = function(data) { + removeGlobals(); + + if (timedOut) { + opts.debug('JSONP: Late answer, ignoring'); + return; + } + + cbCalled = true; + + clean(); + + cb(null, { + body: data, + responseText: JSON.stringify(data)/* , + // We do not send the statusCode, there's no statusCode in JSONP, it will be + // computed using data.status && data.message like with XDR + statusCode*/ + }); + }; + + // add callback by hand + url += '&callback=' + cbName; + + // add body params manually + if (opts.jsonBody && opts.jsonBody.params) { + url += '&' + opts.jsonBody.params; + } + + var ontimeout = setTimeout(timeout, opts.timeouts.complete); + + // script onreadystatechange needed only for + // <= IE8 + // https://github.com/angular/angular.js/issues/4523 + script.onreadystatechange = readystatechange; + script.onload = success; + script.onerror = error; + + script.async = true; + script.defer = true; + script.src = url; + head.appendChild(script); + + function success() { + opts.debug('JSONP: success'); + + if (done || timedOut) { + return; + } + + done = true; + + // script loaded but did not call the fn => script loading error + if (!cbCalled) { + opts.debug('JSONP: Fail. Script loaded but did not call the callback'); + clean(); + cb(new errors.JSONPScriptFail()); + } + } + + function readystatechange() { + if (this.readyState === 'loaded' || this.readyState === 'complete') { + success(); + } + } + + function clean() { + clearTimeout(ontimeout); + script.onload = null; + script.onreadystatechange = null; + script.onerror = null; + head.removeChild(script); + } + + function removeGlobals() { + try { + delete window[cbName]; + delete window[cbName + '_loaded']; + } catch (e) { + window[cbName] = window[cbName + '_loaded'] = undefined; + } + } + + function timeout() { + opts.debug('JSONP: Script timeout'); + timedOut = true; + clean(); + cb(new errors.RequestTimeout()); + } + + function error() { + opts.debug('JSONP: Script error'); + + if (done || timedOut) { + return; + } + + clean(); + cb(new errors.JSONPScriptError()); + } +} + +},{"30":30}],25:[function(require,module,exports){ +module.exports = buildSearchMethod; + +var errors = require(30); + +/** + * Creates a search method to be used in clients + * @param {string} queryParam the name of the attribute used for the query + * @param {string} url the url + * @return {function} the search method + */ +function buildSearchMethod(queryParam, url) { + /** + * The search method. Prepares the data and send the query to Algolia. + * @param {string} query the string used for query search + * @param {object} args additional parameters to send with the search + * @param {function} [callback] the callback to be called with the client gets the answer + * @return {undefined|Promise} If the callback is not provided then this methods returns a Promise + */ + return function search(query, args, callback) { + // warn V2 users on how to search + if (typeof query === 'function' && typeof args === 'object' || + typeof callback === 'object') { + // .search(query, params, cb) + // .search(cb, params) + throw new errors.AlgoliaSearchError('index.search usage is index.search(query, params, cb)'); + } + + // Normalizing the function signature + if (arguments.length === 0 || typeof query === 'function') { + // Usage : .search(), .search(cb) + callback = query; + query = ''; + } else if (arguments.length === 1 || typeof args === 'function') { + // Usage : .search(query/args), .search(query, cb) + callback = args; + args = undefined; + } + // At this point we have 3 arguments with values + + // Usage : .search(args) // careful: typeof null === 'object' + if (typeof query === 'object' && query !== null) { + args = query; + query = undefined; + } else if (query === undefined || query === null) { // .search(undefined/null) + query = ''; + } + + var params = ''; + + if (query !== undefined) { + params += queryParam + '=' + encodeURIComponent(query); + } + + var additionalUA; + if (args !== undefined) { + if (args.additionalUA) { + additionalUA = args.additionalUA; + delete args.additionalUA; + } + // `_getSearchParams` will augment params, do not be fooled by the = versus += from previous if + params = this.as._getSearchParams(args, params); + } + + + return this._search(params, url, callback, additionalUA); + }; +} + +},{"30":30}],26:[function(require,module,exports){ +module.exports = function clone(obj) { + return JSON.parse(JSON.stringify(obj)); +}; + +},{}],27:[function(require,module,exports){ +module.exports = createAnalyticsClient; + +var algoliasearch = require(21); + +function createAnalyticsClient(appId, apiKey, opts) { + var analytics = {}; + + opts = opts || {}; + // there need to be 4 hosts, like on the client, since if requests fail, + // the counter goes up by 1, so we need to have the same amount of hosts + // 4 because: -dsn, -1, -2, -3 + // This is done because the APPID used for search will be the same for the analytics client created, + // and since the state of available hosts is shared by APPID globally for the module, we had issues + // where the hostIndex would be 1 while the array was only one entry (you got an empty host) + opts.hosts = opts.hosts || [ + 'analytics.algolia.com', + 'analytics.algolia.com', + 'analytics.algolia.com', + 'analytics.algolia.com' + ]; + opts.protocol = opts.protocol || 'https:'; + + analytics.as = algoliasearch(appId, apiKey, opts); + + analytics.getABTests = function(_params, callback) { + var params = params || {}; + var offset = params.offset || 0; + var limit = params.limit || 10; + + return this.as._jsonRequest({ + method: 'GET', + url: '/2/abtests?offset=' + encodeURIComponent(offset) + '&limit=' + encodeURIComponent(limit), + hostType: 'read', + forceAuthHeaders: true, + callback: callback + }); + }; + + analytics.getABTest = function(abTestID, callback) { + return this.as._jsonRequest({ + method: 'GET', + url: '/2/abtests/' + encodeURIComponent(abTestID), + hostType: 'read', + forceAuthHeaders: true, + callback: callback + }); + }; + + analytics.addABTest = function(abTest, callback) { + return this.as._jsonRequest({ + method: 'POST', + url: '/2/abtests', + body: abTest, + hostType: 'read', + forceAuthHeaders: true, + callback: callback + }); + }; + + analytics.stopABTest = function(abTestID, callback) { + return this.as._jsonRequest({ + method: 'POST', + url: '/2/abtests/' + encodeURIComponent(abTestID) + '/stop', + hostType: 'read', + forceAuthHeaders: true, + callback: callback + }); + }; + + analytics.deleteABTest = function(abTestID, callback) { + return this.as._jsonRequest({ + method: 'DELETE', + url: '/2/abtests/' + encodeURIComponent(abTestID), + hostType: 'write', + forceAuthHeaders: true, + callback: callback + }); + }; + + analytics.waitTask = function(indexName, taskID, callback) { + return this.as.initIndex(indexName).waitTask(taskID, callback); + }; + + return analytics; +} + +},{"21":21}],28:[function(require,module,exports){ +module.exports = function deprecate(fn, message) { + var warned = false; + + function deprecated() { + if (!warned) { + /* eslint no-console:0 */ + console.warn(message); + warned = true; + } + + return fn.apply(this, arguments); + } + + return deprecated; +}; + +},{}],29:[function(require,module,exports){ +module.exports = function deprecatedMessage(previousUsage, newUsage) { + var githubAnchorLink = previousUsage.toLowerCase() + .replace(/[\.\(\)]/g, ''); + + return 'algoliasearch: `' + previousUsage + '` was replaced by `' + newUsage + + '`. Please see https://github.com/algolia/algoliasearch-client-javascript/wiki/Deprecated#' + githubAnchorLink; +}; + +},{}],30:[function(require,module,exports){ +'use strict'; + +// This file hosts our error definitions +// We use custom error "types" so that we can act on them when we need it +// e.g.: if error instanceof errors.UnparsableJSON then.. + +var inherits = require(7); + +function AlgoliaSearchError(message, extraProperties) { + var forEach = require(5); + + var error = this; + + // try to get a stacktrace + if (typeof Error.captureStackTrace === 'function') { + Error.captureStackTrace(this, this.constructor); + } else { + error.stack = (new Error()).stack || 'Cannot get a stacktrace, browser is too old'; + } + + this.name = 'AlgoliaSearchError'; + this.message = message || 'Unknown error'; + + if (extraProperties) { + forEach(extraProperties, function addToErrorObject(value, key) { + error[key] = value; + }); + } +} + +inherits(AlgoliaSearchError, Error); + +function createCustomError(name, message) { + function AlgoliaSearchCustomError() { + var args = Array.prototype.slice.call(arguments, 0); + + // custom message not set, use default + if (typeof args[0] !== 'string') { + args.unshift(message); + } + + AlgoliaSearchError.apply(this, args); + this.name = 'AlgoliaSearch' + name + 'Error'; + } + + inherits(AlgoliaSearchCustomError, AlgoliaSearchError); + + return AlgoliaSearchCustomError; +} + +// late exports to let various fn defs and inherits take place +module.exports = { + AlgoliaSearchError: AlgoliaSearchError, + UnparsableJSON: createCustomError( + 'UnparsableJSON', + 'Could not parse the incoming response as JSON, see err.more for details' + ), + RequestTimeout: createCustomError( + 'RequestTimeout', + 'Request timed out before getting a response' + ), + Network: createCustomError( + 'Network', + 'Network issue, see err.more for details' + ), + JSONPScriptFail: createCustomError( + 'JSONPScriptFail', + '"),window.ALGOLIA_SUPPORTS_DOCWRITE===!0?(document.write(''),n("document.write")()):r(o,n("DOMElement"))}catch(s){r(o,n("DOMElement"))}}function n(e){return function(){var t="AlgoliaSearch: loaded V2 script using "+e;window.console&&window.console.log&&window.console.log(t)}}t.exports=o},{1:1}],4:[function(e,t,r){"use strict";function o(){var e="-- AlgoliaSearch V2 => V3 error --\nYou are trying to use a new version of the AlgoliaSearch JavaScript client with an old notation.\nPlease read our migration guide at https://github.com/algolia/algoliasearch-client-js/wiki/Migration-guide-from-2.x.x-to-3.x.x\n-- /AlgoliaSearch V2 => V3 error --";window.AlgoliaSearch=function(){throw new Error(e)},window.AlgoliaSearchHelper=function(){throw new Error(e)},window.AlgoliaExplainResults=function(){throw new Error(e)}}t.exports=o},{}],5:[function(e,t,r){"use strict";function o(t){var r=e(2),o=e(3),n=e(4);r(t)?o(t):n()}o("algoliasearch")},{2:2,3:3,4:4}]},{},[5])(5)}),function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.algoliasearch=e()}}(function(){var e;return function t(e,r,o){function n(s,a){if(!r[s]){if(!e[s]){var c="function"==typeof require&&require;if(!a&&c)return c(s,!0);if(i)return i(s,!0);var u=new Error("Cannot find module '"+s+"'");throw u.code="MODULE_NOT_FOUND",u}var l=r[s]={exports:{}};e[s][0].call(l.exports,function(t){var r=e[s][1][t];return n(r?r:t)},l,l.exports,t,e,r,o)}return r[s].exports}for(var i="function"==typeof require&&require,s=0;s=31||"undefined"!=typeof navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/))}function i(e){var t=this.useColors;if(e[0]=(t?"%c":"")+this.namespace+(t?" %c":" ")+e[0]+(t?"%c ":" ")+"+"+r.humanize(this.diff),t){var o="color: "+this.color;e.splice(1,0,o,"color: inherit");var n=0,i=0;e[0].replace(/%[a-zA-Z%]/g,function(e){"%%"!==e&&(n++,"%c"===e&&(i=n))}),e.splice(i,0,o)}}function s(){return"object"==typeof console&&console.log&&Function.prototype.apply.call(console.log,console,arguments)}function a(e){try{null==e?r.storage.removeItem("debug"):r.storage.debug=e}catch(t){}}function c(){var e;try{e=r.storage.debug}catch(t){}return!e&&"undefined"!=typeof o&&"env"in o&&(e=o.env.DEBUG),e}function u(){try{return window.localStorage}catch(e){}}r=t.exports=e(2),r.log=s,r.formatArgs=i,r.save=a,r.load=c,r.useColors=n,r.storage="undefined"!=typeof chrome&&"undefined"!=typeof chrome.storage?chrome.storage.local:u(),r.colors=["lightseagreen","forestgreen","goldenrod","dodgerblue","darkorchid","crimson"],r.formatters.j=function(e){try{return JSON.stringify(e)}catch(t){return"[UnexpectedJSONParseError]: "+t.message}},r.enable(c())}).call(this,e(12))},{12:12,2:2}],2:[function(e,t,r){function o(e){var t,o=0;for(t in e)o=(o<<5)-o+e.charCodeAt(t),o|=0;return r.colors[Math.abs(o)%r.colors.length]}function n(e){function t(){if(t.enabled){var e=t,o=+new Date,n=o-(u||o);e.diff=n,e.prev=u,e.curr=o,u=o;for(var i=new Array(arguments.length),s=0;s0&&this._events[e].length>r&&(this._events[e].warned=!0,console.error("(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.",this._events[e].length),"function"==typeof console.trace&&console.trace())),this},o.prototype.on=o.prototype.addListener,o.prototype.once=function(e,t){function r(){this.removeListener(e,r),o||(o=!0,t.apply(this,arguments))}if(!n(t))throw TypeError("listener must be a function");var o=!1;return r.listener=t,this.on(e,r),this},o.prototype.removeListener=function(e,t){var r,o,i,a;if(!n(t))throw TypeError("listener must be a function");if(!this._events||!this._events[e])return this;if(r=this._events[e],i=r.length,o=-1,r===t||n(r.listener)&&r.listener===t)delete this._events[e],this._events.removeListener&&this.emit("removeListener",e,t);else if(s(r)){for(a=i;a-- >0;)if(r[a]===t||r[a].listener&&r[a].listener===t){o=a;break}if(o<0)return this;1===r.length?(r.length=0,delete this._events[e]):r.splice(o,1),this._events.removeListener&&this.emit("removeListener",e,t)}return this},o.prototype.removeAllListeners=function(e){var t,r;if(!this._events)return this;if(!this._events.removeListener)return 0===arguments.length?this._events={}:this._events[e]&&delete this._events[e],this;if(0===arguments.length){for(t in this._events)"removeListener"!==t&&this.removeAllListeners(t);return this.removeAllListeners("removeListener"),this._events={},this}if(r=this._events[e],n(r))this.removeListener(e,r);else if(r)for(;r.length;)this.removeListener(e,r[r.length-1]);return delete this._events[e],this},o.prototype.listeners=function(e){var t;return t=this._events&&this._events[e]?n(this._events[e])?[this._events[e]]:this._events[e].slice():[]},o.prototype.listenerCount=function(e){if(this._events){var t=this._events[e];if(n(t))return 1;if(t)return t.length}return 0},o.listenerCount=function(e,t){return e.listenerCount(t)}},{}],5:[function(e,t,r){var o=Object.prototype.hasOwnProperty,n=Object.prototype.toString;t.exports=function(e,t,r){if("[object Function]"!==n.call(t))throw new TypeError("iterator must be a function");var i=e.length;if(i===+i)for(var s=0;s100)){var t=/^((?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|years?|yrs?|y)?$/i.exec(e);if(t){var r=parseFloat(t[1]),o=(t[2]||"ms").toLowerCase();switch(o){case"years":case"year":case"yrs":case"yr":case"y":return r*p;case"days":case"day":case"d":return r*l;case"hours":case"hour":case"hrs":case"hr":case"h":return r*u;case"minutes":case"minute":case"mins":case"min":case"m":return r*c;case"seconds":case"second":case"secs":case"sec":case"s":return r*a;case"milliseconds":case"millisecond":case"msecs":case"msec":case"ms":return r;default:return}}}}function n(e){return e>=l?Math.round(e/l)+"d":e>=u?Math.round(e/u)+"h":e>=c?Math.round(e/c)+"m":e>=a?Math.round(e/a)+"s":e+"ms"}function i(e){return s(e,l,"day")||s(e,u,"hour")||s(e,c,"minute")||s(e,a,"second")||e+" ms"}function s(e,t,r){if(!(e0)return o(e);if("number"===r&&isNaN(e)===!1)return t["long"]?i(e):n(e);throw new Error("val is not a non-empty string or a valid number. val="+JSON.stringify(e))}},{}],10:[function(e,t,r){"use strict";var o=Object.prototype.hasOwnProperty,n=Object.prototype.toString,i=Array.prototype.slice,s=e(11),a=Object.prototype.propertyIsEnumerable,c=!a.call({toString:null},"toString"),u=a.call(function(){},"prototype"),l=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"],p=function(e){var t=e.constructor;return t&&t.prototype===e},d={$console:!0,$external:!0,$frame:!0,$frameElement:!0,$frames:!0,$innerHeight:!0,$innerWidth:!0,$outerHeight:!0,$outerWidth:!0,$pageXOffset:!0,$pageYOffset:!0,$parent:!0,$scrollLeft:!0,$scrollTop:!0,$scrollX:!0,$scrollY:!0,$self:!0,$webkitIndexedDB:!0,$webkitStorageInfo:!0,$window:!0},h=function(){if("undefined"==typeof window)return!1;for(var e in window)try{if(!d["$"+e]&&o.call(window,e)&&null!==window[e]&&"object"==typeof window[e])try{p(window[e])}catch(t){return!0}}catch(t){return!0}return!1}(),f=function(e){if("undefined"==typeof window||!h)return p(e);try{return p(e)}catch(t){return!1}},y=function(e){var t=null!==e&&"object"==typeof e,r="[object Function]"===n.call(e),i=s(e),a=t&&"[object String]"===n.call(e),p=[];if(!t&&!r&&!i)throw new TypeError("Object.keys called on a non-object");var d=u&&r;if(a&&e.length>0&&!o.call(e,0))for(var h=0;h0)for(var y=0;y=0&&"[object Function]"===o.call(e.callee)),r}},{}],12:[function(e,t,r){function o(){throw new Error("setTimeout has not been defined")}function n(){throw new Error("clearTimeout has not been defined")}function i(e){if(p===setTimeout)return setTimeout(e,0);if((p===o||!p)&&setTimeout)return p=setTimeout,setTimeout(e,0);try{return p(e,0)}catch(t){try{return p.call(null,e,0)}catch(t){return p.call(this,e,0)}}}function s(e){if(d===clearTimeout)return clearTimeout(e);if((d===n||!d)&&clearTimeout)return d=clearTimeout,clearTimeout(e);try{return d(e)}catch(t){try{return d.call(null,e)}catch(t){return d.call(this,e)}}}function a(){m&&f&&(m=!1,f.length?y=f.concat(y):v=-1,y.length&&c())}function c(){if(!m){var e=i(a);m=!0;for(var t=y.length;t;){for(f=y,y=[];++v1)for(var r=1;r0&&u>c&&(u=c);for(var l=0;l=0?(p=y.substr(0,m),d=y.substr(m+1)):(p=y,d=""),h=decodeURIComponent(p),f=decodeURIComponent(d),o(s,h)?n(s[h])?s[h].push(f):s[h]=[s[h],f]:s[h]=f}return s};var n=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)}},{}],14:[function(e,t,r){"use strict";function o(e,t){if(e.map)return e.map(t);for(var r=[],o=0;o0)n.scope=r;else if("undefined"!=typeof r)throw new Error("the scope given to `copyIndex` was not an array with settings, synonyms or rules");return this._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(e)+"/operation",body:n,hostType:"write",callback:i})},o.prototype.getLogs=function(t,r,o){var n=e(26),i={};return"object"==typeof t?(i=n(t),o=r):0===arguments.length||"function"==typeof t?o=t:1===arguments.length||"function"==typeof r?(o=r,i.offset=t):(i.offset=t,i.length=r),void 0===i.offset&&(i.offset=0),void 0===i.length&&(i.length=10),this._jsonRequest({method:"GET",url:"/1/logs?"+this._getSearchParams(i,""),hostType:"read",callback:o})},o.prototype.listIndexes=function(e,t){var r="";return void 0===e||"function"==typeof e?t=e:r="?page="+e,this._jsonRequest({method:"GET",url:"/1/indexes"+r,hostType:"read",callback:t})},o.prototype.initIndex=function(e){return new i(this,e)},o.prototype.initAnalytics=function(t){var r=e(27);return r(this.applicationID,this.apiKey,t)},o.prototype.listUserKeys=s(function(e){return this.listApiKeys(e)},a("client.listUserKeys()","client.listApiKeys()")),o.prototype.listApiKeys=function(e){return this._jsonRequest({method:"GET",url:"/1/keys",hostType:"read",callback:e})},o.prototype.getUserKeyACL=s(function(e,t){return this.getApiKey(e,t)},a("client.getUserKeyACL()","client.getApiKey()")),o.prototype.getApiKey=function(e,t){return this._jsonRequest({method:"GET",url:"/1/keys/"+e,hostType:"read",callback:t})},o.prototype.deleteUserKey=s(function(e,t){return this.deleteApiKey(e,t)},a("client.deleteUserKey()","client.deleteApiKey()")),o.prototype.deleteApiKey=function(e,t){return this._jsonRequest({method:"DELETE",url:"/1/keys/"+e,hostType:"write",callback:t})},o.prototype.restoreApiKey=function(e,t){return this._jsonRequest({method:"POST",url:"/1/keys/"+e+"/restore",hostType:"write",callback:t})},o.prototype.addUserKey=s(function(e,t,r){return this.addApiKey(e,t,r)},a("client.addUserKey()","client.addApiKey()")),o.prototype.addApiKey=function(t,r,o){var n=e(8),i="Usage: client.addApiKey(arrayOfAcls[, params, callback])";if(!n(t))throw new Error(i);1!==arguments.length&&"function"!=typeof r||(o=r,r=null);var s={acl:t};return r&&(s.validity=r.validity,s.maxQueriesPerIPPerHour=r.maxQueriesPerIPPerHour,s.maxHitsPerQuery=r.maxHitsPerQuery,s.indexes=r.indexes,s.description=r.description,r.queryParameters&&(s.queryParameters=this._getSearchParams(r.queryParameters,"")),s.referers=r.referers),this._jsonRequest({method:"POST",url:"/1/keys",body:s,hostType:"write",callback:o})},o.prototype.addUserKeyWithValidity=s(function(e,t,r){return this.addApiKey(e,t,r)},a("client.addUserKeyWithValidity()","client.addApiKey()")),o.prototype.updateUserKey=s(function(e,t,r,o){return this.updateApiKey(e,t,r,o)},a("client.updateUserKey()","client.updateApiKey()")),o.prototype.updateApiKey=function(t,r,o,n){var i=e(8),s="Usage: client.updateApiKey(key, arrayOfAcls[, params, callback])";if(!i(r))throw new Error(s);2!==arguments.length&&"function"!=typeof o||(n=o,o=null);var a={acl:r};return o&&(a.validity=o.validity,a.maxQueriesPerIPPerHour=o.maxQueriesPerIPPerHour,a.maxHitsPerQuery=o.maxHitsPerQuery,a.indexes=o.indexes,a.description=o.description,o.queryParameters&&(a.queryParameters=this._getSearchParams(o.queryParameters,"")),a.referers=o.referers),this._jsonRequest({method:"PUT",url:"/1/keys/"+t,body:a,hostType:"write",callback:n})},o.prototype.startQueriesBatch=s(function(){this._batch=[]},a("client.startQueriesBatch()","client.search()")),o.prototype.addQueryInBatch=s(function(e,t,r){this._batch.push({indexName:e,query:t,params:r})},a("client.addQueryInBatch()","client.search()")),o.prototype.sendQueriesBatch=s(function(e){return this.search(this._batch,e)},a("client.sendQueriesBatch()","client.search()")),o.prototype.batch=function(t,r){var o=e(8),n="Usage: client.batch(operations[, callback])";if(!o(t))throw new Error(n);return this._jsonRequest({method:"POST",url:"/1/indexes/*/batch",body:{requests:t},hostType:"write",callback:r})},o.prototype.assignUserID=function(e,t){if(!e.userID||!e.cluster)throw new l.AlgoliaSearchError("You have to provide both a userID and cluster",e);return this._jsonRequest({method:"POST",url:"/1/clusters/mapping",hostType:"write",body:{cluster:e.cluster},callback:t,headers:{"x-algolia-user-id":e.userID}})},o.prototype.assignUserIDs=function(e,t){if(!e.userIDs||!e.cluster)throw new l.AlgoliaSearchError("You have to provide both an array of userIDs and cluster",e);return this._jsonRequest({method:"POST",url:"/1/clusters/mapping/batch",hostType:"write",body:{cluster:e.cluster,users:e.userIDs},callback:t})},o.prototype.getTopUserID=function(e){return this._jsonRequest({method:"GET",url:"/1/clusters/mapping/top",hostType:"read",callback:e})},o.prototype.getUserID=function(e,t){if(!e.userID)throw new l.AlgoliaSearchError("You have to provide a userID",{debugData:e});return this._jsonRequest({method:"GET",url:"/1/clusters/mapping/"+e.userID,hostType:"read",callback:t})},o.prototype.listClusters=function(e){return this._jsonRequest({method:"GET",url:"/1/clusters",hostType:"read",callback:e})},o.prototype.listUserIDs=function(e,t){return this._jsonRequest({method:"GET",url:"/1/clusters/mapping",body:e,hostType:"read",callback:t})},o.prototype.removeUserID=function(e,t){if(!e.userID)throw new l.AlgoliaSearchError("You have to provide a userID",{debugData:e});return this._jsonRequest({method:"DELETE",url:"/1/clusters/mapping",hostType:"write",callback:t,headers:{"x-algolia-user-id":e.userID}})},o.prototype.searchUserIDs=function(e,t){return this._jsonRequest({method:"POST",url:"/1/clusters/mapping/search",body:e,hostType:"read",callback:t})},o.prototype.setPersonalizationStrategy=function(e,t){return this._jsonRequest({method:"POST",url:"/1/recommendation/personalization/strategy",body:e,hostType:"write",callback:t})},o.prototype.getPersonalizationStrategy=function(e){return this._jsonRequest({method:"GET",url:"/1/recommendation/personalization/strategy",hostType:"read",callback:e})},o.prototype.destroy=n,o.prototype.enableRateLimitForward=n,o.prototype.disableRateLimitForward=n,o.prototype.useSecuredAPIKey=n,o.prototype.disableSecuredAPIKey=n,o.prototype.generateSecuredApiKey=n,o.prototype.getSecuredApiKeyRemainingValidity=n},{17:17,18:18,26:26,27:27,28:28,29:29,30:30,7:7,8:8}],17:[function(e,t,r){ +(function(r){function o(t,r,o){var i=e(1)("algoliasearch"),s=e(26),a=e(8),u=e(32),l="Usage: algoliasearch(applicationID, apiKey, opts)";if(o._allowEmptyCredentials!==!0&&!t)throw new c.AlgoliaSearchError("Please provide an application ID. "+l);if(o._allowEmptyCredentials!==!0&&!r)throw new c.AlgoliaSearchError("Please provide an API key. "+l);this.applicationID=t,this.apiKey=r,this.hosts={read:[],write:[]},o=o||{},this._timeouts=o.timeouts||{connect:1e3,read:2e3,write:3e4},o.timeout&&(this._timeouts.connect=this._timeouts.read=this._timeouts.write=o.timeout);var p=o.protocol||"https:";if(/:$/.test(p)||(p+=":"),"http:"!==p&&"https:"!==p)throw new c.AlgoliaSearchError("protocol must be `http:` or `https:` (was `"+o.protocol+"`)");if(this._checkAppIdData(),o.hosts)a(o.hosts)?(this.hosts.read=s(o.hosts),this.hosts.write=s(o.hosts)):(this.hosts.read=s(o.hosts.read),this.hosts.write=s(o.hosts.write));else{var d=u(this._shuffleResult,function(e){return t+"-"+e+".algolianet.com"}),h=(o.dsn===!1?"":"-dsn")+".algolia.net";this.hosts.read=[this.applicationID+h].concat(d),this.hosts.write=[this.applicationID+".algolia.net"].concat(d)}this.hosts.read=u(this.hosts.read,n(p)),this.hosts.write=u(this.hosts.write,n(p)),this.extraHeaders={},this.cache=o._cache||{},this._ua=o._ua,this._useCache=!(void 0!==o._useCache&&!o._cache)||o._useCache,this._useRequestCache=this._useCache&&o._useRequestCache,this._useFallback=void 0===o.useFallback||o.useFallback,this._setTimeout=o._setTimeout,i("init done, %j",this)}function n(e){return function(t){return e+"//"+t.toLowerCase()}}function i(e){if(void 0===Array.prototype.toJSON)return JSON.stringify(e);var t=Array.prototype.toJSON;delete Array.prototype.toJSON;var r=JSON.stringify(e);return Array.prototype.toJSON=t,r}function s(e){for(var t,r,o=e.length;0!==o;)r=Math.floor(Math.random()*o),o-=1,t=e[o],e[o]=e[r],e[r]=t;return e}function a(e){var t={};for(var r in e)if(Object.prototype.hasOwnProperty.call(e,r)){var o;o="x-algolia-api-key"===r||"x-algolia-application-id"===r?"**hidden for security purposes**":e[r],t[r]=o}return t}t.exports=o;var c=e(30),u=e(31),l=e(20),p=e(36),d=500,h=r.env.RESET_APP_DATA_TIMER&&parseInt(r.env.RESET_APP_DATA_TIMER,10)||12e4;o.prototype.initIndex=function(e){return new l(this,e)},o.prototype.setExtraHeader=function(e,t){this.extraHeaders[e.toLowerCase()]=t},o.prototype.getExtraHeader=function(e){return this.extraHeaders[e.toLowerCase()]},o.prototype.unsetExtraHeader=function(e){delete this.extraHeaders[e.toLowerCase()]},o.prototype.addAlgoliaAgent=function(e){var t="; "+e;this._ua.indexOf(t)===-1&&(this._ua+=t)},o.prototype._jsonRequest=function(t){function r(e,n){function u(e){var t=e&&e.body&&e.body.message&&e.body.status||e.statusCode||e&&e.body&&200;h("received response: statusCode: %s, computed statusCode: %d, headers: %j",e.statusCode,t,e.headers);var r=2===Math.floor(t/100),o=new Date;if(w.push({currentHost:A,headers:a(p),content:s||null,contentLength:void 0!==s?s.length:null,method:n.method,timeouts:n.timeouts,url:n.url,startTime:x,endTime:o,duration:o-x,statusCode:t}),r)return m._useCache&&!m._useRequestCache&&y&&(y[l]=e.responseText),{responseText:e.responseText,body:e.body};var i=4!==Math.floor(t/100);if(i)return v+=1,_();h("unrecoverable error");var u=new c.AlgoliaSearchError(e.body&&e.body.message,{debugData:w,statusCode:t});return m._promise.reject(u)}function d(e){h("error: %s, stack: %s",e.message,e.stack);var r=new Date;return w.push({currentHost:A,headers:a(p),content:s||null,contentLength:void 0!==s?s.length:null,method:n.method,timeouts:n.timeouts,url:n.url,startTime:x,endTime:r,duration:r-x}),e instanceof c.AlgoliaSearchError||(e=new c.Unknown(e&&e.message,e)),v+=1,e instanceof c.Unknown||e instanceof c.UnparsableJSON||v>=m.hosts[t.hostType].length&&(g||!b)?(e.debugData=w,m._promise.reject(e)):e instanceof c.RequestTimeout?T():_()}function _(){return h("retrying request"),m._incrementHostIndex(t.hostType),r(e,n)}function T(){return h("retrying request with higher timeout"),m._incrementHostIndex(t.hostType),m._incrementTimeoutMultipler(),n.timeouts=m._getTimeoutsForRequest(t.hostType),r(e,n)}m._checkAppIdData();var x=new Date;if(m._useCache&&!m._useRequestCache&&(l=t.url),m._useCache&&!m._useRequestCache&&s&&(l+="_body_"+n.body),o(!m._useRequestCache,y,l)){h("serving response from cache");var R=y[l];return m._promise.resolve({body:JSON.parse(R),responseText:R})}if(v>=m.hosts[t.hostType].length)return!b||g?(h("could not get any response"),m._promise.reject(new c.AlgoliaSearchError("Cannot connect to the AlgoliaSearch API. Send an email to support@algolia.com to report and resolve the issue. Application id was: "+m.applicationID,{debugData:w}))):(h("switching to fallback"),v=0,n.method=t.fallback.method,n.url=t.fallback.url,n.jsonBody=t.fallback.body,n.jsonBody&&(n.body=i(n.jsonBody)),p=m._computeRequestHeaders({additionalUA:f,headers:t.headers}),n.timeouts=m._getTimeoutsForRequest(t.hostType),m._setHostIndexByType(0,t.hostType),g=!0,r(m._request.fallback,n));var A=m._getHostByType(t.hostType),j=A+n.url,S={body:n.body,jsonBody:n.jsonBody,method:n.method,headers:p,timeouts:n.timeouts,debug:h,forceAuthHeaders:n.forceAuthHeaders};return h("method: %s, url: %s, headers: %j, timeouts: %d",S.method,j,S.headers,S.timeouts),e===m._request.fallback&&h("using fallback"),e.call(m,j,S).then(u,d)}function o(e,t,r){return m._useCache&&e&&t&&void 0!==t[r]}function n(e,r){return o(m._useRequestCache,y,l)&&e["catch"](function(){delete y[l]}),"function"!=typeof t.callback?e.then(r):void e.then(function(e){u(function(){t.callback(null,r(e))},m._setTimeout||setTimeout)},function(e){u(function(){t.callback(e)},m._setTimeout||setTimeout)})}this._checkAppIdData();var s,l,p,h=e(1)("algoliasearch:"+t.url),f=t.additionalUA||"",y=t.cache,m=this,v=0,g=!1,b=m._useFallback&&m._request.fallback&&t.fallback;this.apiKey.length>d&&void 0!==t.body&&(void 0!==t.body.params||void 0!==t.body.requests)?(t.body.apiKey=this.apiKey,p=this._computeRequestHeaders({additionalUA:f,withApiKey:!1,headers:t.headers})):p=this._computeRequestHeaders({additionalUA:f,headers:t.headers}),void 0!==t.body&&(s=i(t.body)),h("request start");var w=[];if(m._useCache&&m._useRequestCache&&(l=t.url),m._useCache&&m._useRequestCache&&s&&(l+="_body_"+s),o(m._useRequestCache,y,l)){h("serving request from cache");var _=y[l],T="function"!=typeof _.then?m._promise.resolve({responseText:_}):_;return n(T,function(e){return JSON.parse(e.responseText)})}var x=r(m._request,{url:t.url,method:t.method,body:s,jsonBody:t.body,timeouts:m._getTimeoutsForRequest(t.hostType),forceAuthHeaders:t.forceAuthHeaders});return m._useCache&&m._useRequestCache&&y&&(y[l]=x),n(x,function(e){return e.body})},o.prototype._getSearchParams=function(e,t){if(void 0===e||null===e)return t;for(var r in e)null!==r&&void 0!==e[r]&&e.hasOwnProperty(r)&&(t+=""===t?"":"&",t+=r+"="+encodeURIComponent("[object Array]"===Object.prototype.toString.call(e[r])?i(e[r]):e[r]));return t},o.prototype._computeRequestHeaders=function(t){var r=e(5),o=t.additionalUA?this._ua+"; "+t.additionalUA:this._ua,n={"x-algolia-agent":o,"x-algolia-application-id":this.applicationID};return t.withApiKey!==!1&&(n["x-algolia-api-key"]=this.apiKey),this.userToken&&(n["x-algolia-usertoken"]=this.userToken),this.securityTags&&(n["x-algolia-tagfilters"]=this.securityTags),r(this.extraHeaders,function(e,t){n[t]=e}),t.headers&&r(t.headers,function(e,t){n[t]=e}),n},o.prototype.search=function(t,r,o){var n=e(8),i=e(32),s="Usage: client.search(arrayOfQueries[, callback])";if(!n(t))throw new Error(s);"function"==typeof r?(o=r,r={}):void 0===r&&(r={});var a=this,c={requests:i(t,function(e){var t="";return void 0!==e.query&&(t+="query="+encodeURIComponent(e.query)),{indexName:e.indexName,params:a._getSearchParams(e.params,t)}})},u=i(c.requests,function(e,t){return t+"="+encodeURIComponent("/1/indexes/"+encodeURIComponent(e.indexName)+"?"+e.params)}).join("&"),l="/1/indexes/*/queries";return void 0!==r.strategy&&(c.strategy=r.strategy),this._jsonRequest({cache:this.cache,method:"POST",url:l,body:c,hostType:"read",fallback:{method:"GET",url:"/1/indexes/*",body:{params:u}},callback:o})},o.prototype.searchForFacetValues=function(t){var r=e(8),o=e(32),n="Usage: client.searchForFacetValues([{indexName, params: {facetName, facetQuery, ...params}}, ...queries])";if(!r(t))throw new Error(n);var i=this;return i._promise.all(o(t,function(t){if(!t||void 0===t.indexName||void 0===t.params.facetName||void 0===t.params.facetQuery)throw new Error(n);var r=e(26),o=e(34),s=t.indexName,a=t.params,c=a.facetName,u=o(r(a),function(e){return"facetName"===e}),l=i._getSearchParams(u,"");return i._jsonRequest({cache:i.cache,method:"POST",url:"/1/indexes/"+encodeURIComponent(s)+"/facets/"+encodeURIComponent(c)+"/query",hostType:"read",body:{params:l}})}))},o.prototype.setSecurityTags=function(e){if("[object Array]"===Object.prototype.toString.call(e)){for(var t=[],r=0;rh?this._resetInitialAppIdData(e):e},o.prototype._resetInitialAppIdData=function(e){var t=e||{};return t.hostIndexes={read:0,write:0},t.timeoutMultiplier=1,t.shuffleResult=t.shuffleResult||s([1,2,3]),this._setAppIdData(t)},o.prototype._cacheAppIdData=function(e){this._hostIndexes=e.hostIndexes,this._timeoutMultiplier=e.timeoutMultiplier,this._shuffleResult=e.shuffleResult},o.prototype._partialAppIdDataUpdate=function(t){var r=e(5),o=this._getAppIdData();return r(t,function(e,t){o[t]=e}),this._setAppIdData(o)},o.prototype._getHostByType=function(e){return this.hosts[e][this._getHostIndexByType(e)]},o.prototype._getTimeoutMultiplier=function(){return this._timeoutMultiplier},o.prototype._getHostIndexByType=function(e){return this._hostIndexes[e]},o.prototype._setHostIndexByType=function(t,r){var o=e(26),n=o(this._hostIndexes);return n[r]=t,this._partialAppIdDataUpdate({hostIndexes:n}),t},o.prototype._incrementHostIndex=function(e){return this._setHostIndexByType((this._getHostIndexByType(e)+1)%this.hosts[e].length,e)},o.prototype._incrementTimeoutMultipler=function(){var e=Math.max(this._timeoutMultiplier+1,4);return this._partialAppIdDataUpdate({timeoutMultiplier:e})},o.prototype._getTimeoutsForRequest=function(e){return{connect:this._timeouts.connect*this._timeoutMultiplier,complete:this._timeouts[e]*this._timeoutMultiplier}}}).call(this,e(12))},{1:1,12:12,20:20,26:26,30:30,31:31,32:32,34:34,36:36,5:5,8:8}],18:[function(e,t,r){function o(){s.apply(this,arguments)}function n(e,t,r){function o(r,n){var i={page:r||0,hitsPerPage:t||100},s=n||[];return e(i).then(function(e){var t=e.hits,r=e.nbHits,n=t.map(function(e){return delete e._highlightResult,e}),a=s.concat(n);return a.lengths&&(t=s),"published"!==e.status?l._promise.delay(t).then(r):e})}function o(e){u(function(){t(null,e)},l._setTimeout||setTimeout)}function n(e){u(function(){t(e)},l._setTimeout||setTimeout)}var i=100,s=5e3,a=0,c=this,l=c.as,p=r();return t?void p.then(o,n):p},o.prototype.clearIndex=function(e){var t=this;return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(t.indexName)+"/clear",hostType:"write",callback:e})},o.prototype.getSettings=function(e,t){1===arguments.length&&"function"==typeof e&&(t=e,e={}),e=e||{};var r=encodeURIComponent(this.indexName);return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+r+"/settings?getVersion=2"+(e.advanced?"&advanced="+e.advanced:""),hostType:"read",callback:t})},o.prototype.searchSynonyms=function(e,t){return"function"==typeof e?(t=e,e={}):void 0===e&&(e={}),this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/search",body:e,hostType:"read",callback:t})},o.prototype.exportSynonyms=function(e,t){return n(this.searchSynonyms.bind(this),e,t)},o.prototype.saveSynonym=function(e,t,r){"function"==typeof t?(r=t,t={}):void 0===t&&(t={}),void 0!==t.forwardToSlaves&&p();var o=t.forwardToSlaves||t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"PUT",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/"+encodeURIComponent(e.objectID)+"?forwardToReplicas="+o,body:e,hostType:"write",callback:r})},o.prototype.getSynonym=function(e,t){return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/"+encodeURIComponent(e),hostType:"read",callback:t})},o.prototype.deleteSynonym=function(e,t,r){"function"==typeof t?(r=t,t={}):void 0===t&&(t={}),void 0!==t.forwardToSlaves&&p();var o=t.forwardToSlaves||t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"DELETE",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/"+encodeURIComponent(e)+"?forwardToReplicas="+o,hostType:"write",callback:r})},o.prototype.clearSynonyms=function(e,t){"function"==typeof e?(t=e,e={}):void 0===e&&(e={}),void 0!==e.forwardToSlaves&&p();var r=e.forwardToSlaves||e.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/clear?forwardToReplicas="+r,hostType:"write",callback:t})},o.prototype.batchSynonyms=function(e,t,r){"function"==typeof t?(r=t,t={}):void 0===t&&(t={}),void 0!==t.forwardToSlaves&&p();var o=t.forwardToSlaves||t.forwardToReplicas?"true":"false";return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/synonyms/batch?forwardToReplicas="+o+"&replaceExistingSynonyms="+(t.replaceExistingSynonyms?"true":"false"),hostType:"write",body:e,callback:r})},o.prototype.searchRules=function(e,t){return"function"==typeof e?(t=e,e={}):void 0===e&&(e={}),this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/search",body:e,hostType:"read",callback:t})},o.prototype.exportRules=function(e,t){return n(this.searchRules.bind(this),e,t)},o.prototype.saveRule=function(e,t,r){if("function"==typeof t?(r=t,t={}):void 0===t&&(t={}),!e.objectID)throw new l.AlgoliaSearchError("Missing or empty objectID field for rule");var o=t.forwardToReplicas===!0?"true":"false";return this.as._jsonRequest({method:"PUT",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/"+encodeURIComponent(e.objectID)+"?forwardToReplicas="+o,body:e,hostType:"write",callback:r})},o.prototype.getRule=function(e,t){return this.as._jsonRequest({method:"GET",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/"+encodeURIComponent(e),hostType:"read",callback:t})},o.prototype.deleteRule=function(e,t,r){"function"==typeof t?(r=t,t={}):void 0===t&&(t={});var o=t.forwardToReplicas===!0?"true":"false";return this.as._jsonRequest({method:"DELETE",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/"+encodeURIComponent(e)+"?forwardToReplicas="+o,hostType:"write",callback:r})},o.prototype.clearRules=function(e,t){"function"==typeof e?(t=e,e={}):void 0===e&&(e={});var r=e.forwardToReplicas===!0?"true":"false";return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/clear?forwardToReplicas="+r,hostType:"write",callback:t})},o.prototype.batchRules=function(e,t,r){"function"==typeof t?(r=t,t={}):void 0===t&&(t={});var o=t.forwardToReplicas===!0?"true":"false";return this.as._jsonRequest({method:"POST",url:"/1/indexes/"+encodeURIComponent(this.indexName)+"/rules/batch?forwardToReplicas="+o+"&clearExistingRules="+(t.clearExistingRules===!0?"true":"false"),hostType:"write",body:e,callback:r})},o.prototype.exists=function(e){var t=this.getSettings().then(function(){return!0})["catch"](function(e){if(e instanceof l.AlgoliaSearchError&&404===e.statusCode)return!1;throw e});return"function"!=typeof e?t:void t.then(function(t){e(null,t)})["catch"](function(t){e(t)})},o.prototype.findObject=function(e,t,r){t=void 0===t?{}:t;var o=void 0===t.paginate||t.paginate,n=void 0!==t.query?t.query:"",i=this,s=0,a=function(){return t.page=s,i.search(n,t).then(function(t){for(var r=t.hits,n=0;n=t.nbPages)throw new l.ObjectNotFound("Object not found");return a()})},c=a(s);return void 0===r?c:void c.then(function(e){r(null,e)})["catch"](function(e){r(e)})},o.prototype.getObjectPosition=function(e,t){for(var r=e.hits,o=0;o1&&a()}if(!h.cors&&!h.hasXDomainRequest)return void o(new u.Network("CORS not supported"));e=l(e,t.headers);var d,f,y=t.body,m=h.cors?new XMLHttpRequest:new XDomainRequest,v=!1;d=setTimeout(s,t.timeouts.connect),m.onprogress=c,"onreadystatechange"in m&&(m.onreadystatechange=p),m.onload=n,m.onerror=i,m instanceof XMLHttpRequest?(m.open(t.method,e,!0),t.forceAuthHeaders&&(m.setRequestHeader("x-algolia-application-id",t.headers["x-algolia-application-id"]),m.setRequestHeader("x-algolia-api-key",t.headers["x-algolia-api-key"]))):m.open(t.method,e),h.cors&&(y&&("POST"===t.method?m.setRequestHeader("content-type","application/x-www-form-urlencoded"):m.setRequestHeader("content-type","application/json")),m.setRequestHeader("accept","application/json")),y?m.send(y):m.send()})},a.prototype._request.fallback=function(e,t){return e=l(e,t.headers),new n(function(r,o){p(e,t,function(e,t){return e?void o(e):void r(t)})})},a.prototype._promise={reject:function(e){return n.reject(e)},resolve:function(e){return n.resolve(e)},delay:function(e){return new n(function(t){setTimeout(t,e)})},all:function(e){return n.all(e)}},s}}).call(this,e(12))},{1:1,12:12,23:23,24:24,26:26,3:3,30:30,35:35,37:37,6:6,7:7}],23:[function(e,t,r){"use strict";function o(e,t){return e+=/\?/.test(e)?"&":"?",e+n(t)}t.exports=o;var n=e(14)},{14:14}],24:[function(e,t,r){"use strict";function o(e,t,r){function o(){t.debug("JSONP: success"),m||d||(m=!0,p||(t.debug("JSONP: Fail. Script loaded but did not call the callback"), +a(),r(new n.JSONPScriptFail)))}function s(){"loaded"!==this.readyState&&"complete"!==this.readyState||o()}function a(){clearTimeout(v),f.onload=null,f.onreadystatechange=null,f.onerror=null,h.removeChild(f)}function c(){try{delete window[y],delete window[y+"_loaded"]}catch(e){window[y]=window[y+"_loaded"]=void 0}}function u(){t.debug("JSONP: Script timeout"),d=!0,a(),r(new n.RequestTimeout)}function l(){t.debug("JSONP: Script error"),m||d||(a(),r(new n.JSONPScriptError))}if("GET"!==t.method)return void r(new Error("Method "+t.method+" "+e+" is not supported by JSONP."));t.debug("JSONP: start");var p=!1,d=!1;i+=1;var h=document.getElementsByTagName("head")[0],f=document.createElement("script"),y="algoliaJSONP_"+i,m=!1;window[y]=function(e){return c(),d?void t.debug("JSONP: Late answer, ignoring"):(p=!0,a(),void r(null,{body:e,responseText:JSON.stringify(e)}))},e+="&callback="+y,t.jsonBody&&t.jsonBody.params&&(e+="&"+t.jsonBody.params);var v=setTimeout(u,t.timeouts.complete);f.onreadystatechange=s,f.onload=o,f.onerror=l,f.async=!0,f.defer=!0,f.src=e,h.appendChild(f)}t.exports=o;var n=e(30),i=0},{30:30}],25:[function(e,t,r){function o(e,t){return function(r,o,i){if("function"==typeof r&&"object"==typeof o||"object"==typeof i)throw new n.AlgoliaSearchError("index.search usage is index.search(query, params, cb)");0===arguments.length||"function"==typeof r?(i=r,r=""):1!==arguments.length&&"function"!=typeof o||(i=o,o=void 0),"object"==typeof r&&null!==r?(o=r,r=void 0):void 0!==r&&null!==r||(r="");var s="";void 0!==r&&(s+=e+"="+encodeURIComponent(r));var a;return void 0!==o&&(o.additionalUA&&(a=o.additionalUA,delete o.additionalUA),s=this.as._getSearchParams(o,s)),this._search(s,t,i,a)}}t.exports=o;var n=e(30)},{30:30}],26:[function(e,t,r){t.exports=function(e){return JSON.parse(JSON.stringify(e))}},{}],27:[function(e,t,r){function o(e,t,r){var o={};return r=r||{},r.hosts=r.hosts||["analytics.algolia.com","analytics.algolia.com","analytics.algolia.com","analytics.algolia.com"],r.protocol=r.protocol||"https:",o.as=n(e,t,r),o.getABTests=function(e,t){var r=r||{},o=r.offset||0,n=r.limit||10;return this.as._jsonRequest({method:"GET",url:"/2/abtests?offset="+encodeURIComponent(o)+"&limit="+encodeURIComponent(n),hostType:"read",forceAuthHeaders:!0,callback:t})},o.getABTest=function(e,t){return this.as._jsonRequest({method:"GET",url:"/2/abtests/"+encodeURIComponent(e),hostType:"read",forceAuthHeaders:!0,callback:t})},o.addABTest=function(e,t){return this.as._jsonRequest({method:"POST",url:"/2/abtests",body:e,hostType:"read",forceAuthHeaders:!0,callback:t})},o.stopABTest=function(e,t){return this.as._jsonRequest({method:"POST",url:"/2/abtests/"+encodeURIComponent(e)+"/stop",hostType:"read",forceAuthHeaders:!0,callback:t})},o.deleteABTest=function(e,t){return this.as._jsonRequest({method:"DELETE",url:"/2/abtests/"+encodeURIComponent(e),hostType:"write",forceAuthHeaders:!0,callback:t})},o.waitTask=function(e,t,r){return this.as.initIndex(e).waitTask(t,r)},o}t.exports=o;var n=e(21)},{21:21}],28:[function(e,t,r){t.exports=function(e,t){function r(){return o||(console.warn(t),o=!0),e.apply(this,arguments)}var o=!1;return r}},{}],29:[function(e,t,r){t.exports=function(e,t){var r=e.toLowerCase().replace(/[\.\(\)]/g,"");return"algoliasearch: `"+e+"` was replaced by `"+t+"`. Please see https://github.com/algolia/algoliasearch-client-javascript/wiki/Deprecated#"+r}},{}],30:[function(e,t,r){"use strict";function o(t,r){var o=e(5),n=this;"function"==typeof Error.captureStackTrace?Error.captureStackTrace(this,this.constructor):n.stack=(new Error).stack||"Cannot get a stacktrace, browser is too old",this.name="AlgoliaSearchError",this.message=t||"Unknown error",r&&o(r,function(e,t){n[t]=e})}function n(e,t){function r(){var r=Array.prototype.slice.call(arguments,0);"string"!=typeof r[0]&&r.unshift(t),o.apply(this,r),this.name="AlgoliaSearch"+e+"Error"}return i(r,o),r}var i=e(7);i(o,Error),t.exports={AlgoliaSearchError:o,UnparsableJSON:n("UnparsableJSON","Could not parse the incoming response as JSON, see err.more for details"),RequestTimeout:n("RequestTimeout","Request timed out before getting a response"),Network:n("Network","Network issue, see err.more for details"),JSONPScriptFail:n("JSONPScriptFail","
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/categories/Solidity/index.html b/categories/Solidity/index.html new file mode 100644 index 0000000000..41959a64e6 --- /dev/null +++ b/categories/Solidity/index.html @@ -0,0 +1,384 @@ +分类: Solidity | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/categories/index.html b/categories/index.html new file mode 100644 index 0000000000..0e05e33535 --- /dev/null +++ b/categories/index.html @@ -0,0 +1,376 @@ +分类 | WaterBoat的博客
    加载头像

    分类

    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/categories/npm/index.html b/categories/npm/index.html new file mode 100644 index 0000000000..9b28dad69c --- /dev/null +++ b/categories/npm/index.html @@ -0,0 +1,384 @@ +分类: npm | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/categories/\345\211\215\347\253\257/index.html" "b/categories/\345\211\215\347\253\257/index.html" new file mode 100644 index 0000000000..ab47f1d4c5 --- /dev/null +++ "b/categories/\345\211\215\347\253\257/index.html" @@ -0,0 +1,384 @@ +分类: 前端 | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/categories/\345\211\215\347\253\257/\350\256\276\350\256\241\346\250\241\345\274\217/JavaScript/index.html" "b/categories/\345\211\215\347\253\257/\350\256\276\350\256\241\346\250\241\345\274\217/JavaScript/index.html" new file mode 100644 index 0000000000..103324096e --- /dev/null +++ "b/categories/\345\211\215\347\253\257/\350\256\276\350\256\241\346\250\241\345\274\217/JavaScript/index.html" @@ -0,0 +1,384 @@ +分类: JavaScript | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/categories/\345\211\215\347\253\257/\350\256\276\350\256\241\346\250\241\345\274\217/index.html" "b/categories/\345\211\215\347\253\257/\350\256\276\350\256\241\346\250\241\345\274\217/index.html" new file mode 100644 index 0000000000..b153bc1491 --- /dev/null +++ "b/categories/\345\211\215\347\253\257/\350\256\276\350\256\241\346\250\241\345\274\217/index.html" @@ -0,0 +1,384 @@ +分类: 设计模式 | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/categories/\345\274\200\345\217\221\345\267\245\345\205\267/index.html" "b/categories/\345\274\200\345\217\221\345\267\245\345\205\267/index.html" new file mode 100644 index 0000000000..05eb99c085 --- /dev/null +++ "b/categories/\345\274\200\345\217\221\345\267\245\345\205\267/index.html" @@ -0,0 +1,384 @@ +分类: 开发工具 | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000000..4d09f9c8a7 --- /dev/null +++ b/css/index.css @@ -0,0 +1,27345 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ +html { + line-height: 1.15; + -webkit-text-size-adjust: 100%; +} + +/* 滚动条轨道样式 */ +::-webkit-scrollbar-track { + background-color: transparent; +} + +/* 滚动条滑块样式 */ +::-webkit-scrollbar-thumb { + background-color: #888; + opacity: 1; + transition: opacity 0.5s; +} + +/* 滚动条消失动画 */ +@keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +/* 在滚动容器上应用动画 */ +html:hover::-webkit-scrollbar-thumb { + animation: fadeOut 1s 1s forwards; +} + +body { + margin: 0; + padding: 0; + overflow-x: clip; + overscroll-behavior: none; +} + +main { + display: block; +} + +h1 { + font-size: 2em; + margin: 0.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: -0.25em; +} + +sup { + top: -0.5em; +} + +img { + border-style: none; + border-radius: 8px; + max-width: 100%; + transition: all 0.2s ease 0s; + -webkit-user-drag: none; /* WebKit */ + -khtml-user-drag: none; /* KHTML */ + -moz-user-drag: none; /* Gecko */ + -ms-user-drag: none; /* Trident/Edge */ + user-drag: 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; +} + +img.fancybox__image { + border-radius: 0; +} +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring, +button:-moz-focusring { + outline: 1px dotted ButtonText; +} + +fieldset { + padding: 0.35em 0.75em 0.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; +} + +.limit-one-line, +#article-container .anzhiyu-flink-list .flink-list-item .flink-item-info .flink-item-name, +#article-container .anzhiyu-flink-list .flink-list-item .flink-item-info .flink-item-desc, +#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span, +#aside-content .card-categories ul.card-category-list > .card-category-list-item a span, +.site-data > a .headline, +#pagination .prev_info, +#pagination .next_info, +#sidebar #sidebar-menus .menus_items .site-page { + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + white-space: nowrap; +} +.limit-more-line, +.error404 #error-wrap .error-content .error-info .error_subtitle, +.article-sort-item-title, +#recent-posts > .recent-post-item >.recent-post-info > .content, +#aside-content .aside-list > .aside-list-item .content > .name, +#aside-content .aside-list > .aside-list-item .content > .title, +#aside-content .aside-list > .aside-list-item .content > .comment, +#post-info .post-title, +.relatedPosts > .relatedPosts-list .content .title, +#content-inner figure.gallery-group p, +#content-inner figure.gallery-group .gallery-group-name { + display: -webkit-box; + overflow: hidden; + -webkit-box-orient: vertical; +} +.fontbold { + font-weight: bold; +} +.anzhiyu-icon-spinner { + margin: 0; + width: 16px; + line-height: 16px; + height: 16px; +} +.anzhiyufont, +hr:before, +#article-container a.headerlink::before, +#post .post-outdate-notice:before, +.note:not(.no-icon)::before { + font-family: "anzhiyufont"; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.anzhiyufont::before { + font-family: "anzhiyufont" !important; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.cardHover, +.error404 #error-wrap .error-content, +#recent-posts > .recent-post-item, +#aside-content .card-widget, +.layout > .recent-posts .pagination > *:not(.space):not(pangu) { + border-radius: 8px; + background: var(--card-bg); + -webkit-box-shadow: var(--card-box-shadow); + box-shadow: var(--card-box-shadow); + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; +} +.imgHover, +.error404 #error-wrap .error-content .error-img img, +.article-sort-item-img img, +#aside-content .aside-list > .aside-list-item .thumbnail > img { + width: 100%; + height: 100%; + -webkit-transition: filter 375ms ease-in 0.2s, -webkit-transform 0.6s; + -moz-transition: filter 375ms ease-in 0.2s, -moz-transform 0.6s; + -o-transition: filter 375ms ease-in 0.2s, -o-transform 0.6s; + -ms-transition: filter 375ms ease-in 0.2s, -ms-transform 0.6s; + transition: filter 375ms ease-in 0.2s, transform 0.6s; + object-fit: cover; +} +.imgHover:hover, +.error404 #error-wrap .error-content .error-img img:hover, +.article-sort-item-img img:hover, +#aside-content .aside-list > .aside-list-item .thumbnail > img:hover { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} +.postImgHover:hover img, +#pagination .prev-post:hover img, +#pagination .next-post:hover img, +.relatedPosts > .relatedPosts-list > div:hover img { + opacity: 0.8; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + filter: alpha(opacity=80); + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} +.postImgHover img, +#pagination .prev-post img, +#pagination .next-post img, +.relatedPosts > .relatedPosts-list > div img { + position: absolute; + width: 100%; + height: 100%; + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + -webkit-transition: all 0.6s, filter 375ms ease-in 0.2s; + -moz-transition: all 0.6s, filter 375ms ease-in 0.2s; + -o-transition: all 0.6s, filter 375ms ease-in 0.2s; + -ms-transition: all 0.6s, filter 375ms ease-in 0.2s; + transition: all 0.6s, filter 375ms ease-in 0.2s; + object-fit: cover; + border-radius: 0; +} +.list-beauty, +.category-lists ul { + list-style: none; +} +.list-beauty li, +.category-lists ul li { + position: relative; + padding: 0.12em 0.4em 0.12em 1.4em; +} +.list-beauty li:hover:before, +.category-lists ul li:hover:before { + border-color: var(--pseudo-hover); +} +.list-beauty li:before, +.category-lists ul li:before { + position: absolute; + top: 0.67em; + left: 0; + width: 0.43em; + height: 0.43em; + border: 0.215em solid #425aef; + border-radius: 0.43em; + background: transparent; + content: ''; + cursor: pointer; + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; +} +.scroll-down-effects { + -webkit-animation: scroll-down-effect 1.5s infinite; + -moz-animation: scroll-down-effect 1.5s infinite; + -o-animation: scroll-down-effect 1.5s infinite; + -ms-animation: scroll-down-effect 1.5s infinite; + animation: scroll-down-effect 1.5s infinite; +} +.anzhiyu-spin { + display: inline-block; + -webkit-transform-origin: 50% 50%; + -moz-transform-origin: 50% 50%; + -o-transform-origin: 50% 50%; + -ms-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-animation-name: anzhiyu-spin; + -moz-animation-name: anzhiyu-spin; + -o-animation-name: anzhiyu-spin; + -ms-animation-name: anzhiyu-spin; + animation-name: anzhiyu-spin; + -webkit-animation-duration: var(--anzhiyu-animation-duration, 2s); + -moz-animation-duration: var(--anzhiyu-animation-duration, 2s); + -o-animation-duration: var(--anzhiyu-animation-duration, 2s); + -ms-animation-duration: var(--anzhiyu-animation-duration, 2s); + animation-duration: var(--anzhiyu-animation-duration, 2s); + -webkit-animation-iteration-count: var(--anzhiyu-animation-iteration-count, infinite); + -moz-animation-iteration-count: var(--anzhiyu-animation-iteration-count, infinite); + -o-animation-iteration-count: var(--anzhiyu-animation-iteration-count, infinite); + -ms-animation-iteration-count: var(--anzhiyu-animation-iteration-count, infinite); + animation-iteration-count: var(--anzhiyu-animation-iteration-count, infinite); + -webkit-animation-timing-function: var(--anzhiyu-animation-timing, linear); + -moz-animation-timing-function: var(--anzhiyu-animation-timing, linear); + -o-animation-timing-function: var(--anzhiyu-animation-timing, linear); + -ms-animation-timing-function: var(--anzhiyu-animation-timing, linear); + animation-timing-function: var(--anzhiyu-animation-timing, linear); +} +.anzhiyu-pulse-icon { + -webkit-animation: anzhiyu-pulse-animation 1s infinite linear; + -moz-animation: anzhiyu-pulse-animation 1s infinite linear; + -o-animation: anzhiyu-pulse-animation 1s infinite linear; + -ms-animation: anzhiyu-pulse-animation 1s infinite linear; + animation: anzhiyu-pulse-animation 1s infinite linear; +} +.anzhiyu-shake:hover { + -webkit-animation: shake 0.8s; + -moz-animation: shake 0.8s; + -o-animation: shake 0.8s; + -ms-animation: shake 0.8s; + animation: shake 0.8s; +} +.reward-main { + -webkit-animation: donate_effcet 0.3s 0.1s ease both; + -moz-animation: donate_effcet 0.3s 0.1s ease both; + -o-animation: donate_effcet 0.3s 0.1s ease both; + -ms-animation: donate_effcet 0.3s 0.1s ease both; + animation: donate_effcet 0.3s 0.1s ease both; +} +@property --anzhiyu-header-translateY { + syntax: ""; + inherits: true; + initial-value: 0px; +} +@property --anzhiyu-header-info-scale { + syntax: ""; + inherits: true; + initial-value: 1; +} +@property --anzhiyu-header-cover-scale { + syntax: ""; + inherits: true; + initial-value: 2; +} +@-moz-keyframes anzhiyu-shake { + 0% { + -webkit-transform: translate(1px, 1px) rotate(0deg); + -moz-transform: translate(1px, 1px) rotate(0deg); + -o-transform: translate(1px, 1px) rotate(0deg); + -ms-transform: translate(1px, 1px) rotate(0deg); + transform: translate(1px, 1px) rotate(0deg); + } + 10% { + -webkit-transform: translate(-1px, -2px) rotate(-1deg); + -moz-transform: translate(-1px, -2px) rotate(-1deg); + -o-transform: translate(-1px, -2px) rotate(-1deg); + -ms-transform: translate(-1px, -2px) rotate(-1deg); + transform: translate(-1px, -2px) rotate(-1deg); + } + 20% { + -webkit-transform: translate(-3px, 0px) rotate(1deg); + -moz-transform: translate(-3px, 0px) rotate(1deg); + -o-transform: translate(-3px, 0px) rotate(1deg); + -ms-transform: translate(-3px, 0px) rotate(1deg); + transform: translate(-3px, 0px) rotate(1deg); + } + 30% { + -webkit-transform: translate(3px, 2px) rotate(0deg); + -moz-transform: translate(3px, 2px) rotate(0deg); + -o-transform: translate(3px, 2px) rotate(0deg); + -ms-transform: translate(3px, 2px) rotate(0deg); + transform: translate(3px, 2px) rotate(0deg); + } + 40% { + -webkit-transform: translate(1px, -1px) rotate(1deg); + -moz-transform: translate(1px, -1px) rotate(1deg); + -o-transform: translate(1px, -1px) rotate(1deg); + -ms-transform: translate(1px, -1px) rotate(1deg); + transform: translate(1px, -1px) rotate(1deg); + } + 50% { + -webkit-transform: translate(-1px, 2px) rotate(-1deg); + -moz-transform: translate(-1px, 2px) rotate(-1deg); + -o-transform: translate(-1px, 2px) rotate(-1deg); + -ms-transform: translate(-1px, 2px) rotate(-1deg); + transform: translate(-1px, 2px) rotate(-1deg); + } + 60% { + -webkit-transform: translate(-3px, 1px) rotate(0deg); + -moz-transform: translate(-3px, 1px) rotate(0deg); + -o-transform: translate(-3px, 1px) rotate(0deg); + -ms-transform: translate(-3px, 1px) rotate(0deg); + transform: translate(-3px, 1px) rotate(0deg); + } + 70% { + -webkit-transform: translate(3px, 1px) rotate(-1deg); + -moz-transform: translate(3px, 1px) rotate(-1deg); + -o-transform: translate(3px, 1px) rotate(-1deg); + -ms-transform: translate(3px, 1px) rotate(-1deg); + transform: translate(3px, 1px) rotate(-1deg); + } + 80% { + -webkit-transform: translate(-1px, -1px) rotate(1deg); + -moz-transform: translate(-1px, -1px) rotate(1deg); + -o-transform: translate(-1px, -1px) rotate(1deg); + -ms-transform: translate(-1px, -1px) rotate(1deg); + transform: translate(-1px, -1px) rotate(1deg); + } + 90% { + -webkit-transform: translate(1px, 2px) rotate(0deg); + -moz-transform: translate(1px, 2px) rotate(0deg); + -o-transform: translate(1px, 2px) rotate(0deg); + -ms-transform: translate(1px, 2px) rotate(0deg); + transform: translate(1px, 2px) rotate(0deg); + } + 100% { + -webkit-transform: translate(1px, -2px) rotate(-1deg); + -moz-transform: translate(1px, -2px) rotate(-1deg); + -o-transform: translate(1px, -2px) rotate(-1deg); + -ms-transform: translate(1px, -2px) rotate(-1deg); + transform: translate(1px, -2px) rotate(-1deg); + } +} +@-webkit-keyframes anzhiyu-shake { + 0% { + -webkit-transform: translate(1px, 1px) rotate(0deg); + -moz-transform: translate(1px, 1px) rotate(0deg); + -o-transform: translate(1px, 1px) rotate(0deg); + -ms-transform: translate(1px, 1px) rotate(0deg); + transform: translate(1px, 1px) rotate(0deg); + } + 10% { + -webkit-transform: translate(-1px, -2px) rotate(-1deg); + -moz-transform: translate(-1px, -2px) rotate(-1deg); + -o-transform: translate(-1px, -2px) rotate(-1deg); + -ms-transform: translate(-1px, -2px) rotate(-1deg); + transform: translate(-1px, -2px) rotate(-1deg); + } + 20% { + -webkit-transform: translate(-3px, 0px) rotate(1deg); + -moz-transform: translate(-3px, 0px) rotate(1deg); + -o-transform: translate(-3px, 0px) rotate(1deg); + -ms-transform: translate(-3px, 0px) rotate(1deg); + transform: translate(-3px, 0px) rotate(1deg); + } + 30% { + -webkit-transform: translate(3px, 2px) rotate(0deg); + -moz-transform: translate(3px, 2px) rotate(0deg); + -o-transform: translate(3px, 2px) rotate(0deg); + -ms-transform: translate(3px, 2px) rotate(0deg); + transform: translate(3px, 2px) rotate(0deg); + } + 40% { + -webkit-transform: translate(1px, -1px) rotate(1deg); + -moz-transform: translate(1px, -1px) rotate(1deg); + -o-transform: translate(1px, -1px) rotate(1deg); + -ms-transform: translate(1px, -1px) rotate(1deg); + transform: translate(1px, -1px) rotate(1deg); + } + 50% { + -webkit-transform: translate(-1px, 2px) rotate(-1deg); + -moz-transform: translate(-1px, 2px) rotate(-1deg); + -o-transform: translate(-1px, 2px) rotate(-1deg); + -ms-transform: translate(-1px, 2px) rotate(-1deg); + transform: translate(-1px, 2px) rotate(-1deg); + } + 60% { + -webkit-transform: translate(-3px, 1px) rotate(0deg); + -moz-transform: translate(-3px, 1px) rotate(0deg); + -o-transform: translate(-3px, 1px) rotate(0deg); + -ms-transform: translate(-3px, 1px) rotate(0deg); + transform: translate(-3px, 1px) rotate(0deg); + } + 70% { + -webkit-transform: translate(3px, 1px) rotate(-1deg); + -moz-transform: translate(3px, 1px) rotate(-1deg); + -o-transform: translate(3px, 1px) rotate(-1deg); + -ms-transform: translate(3px, 1px) rotate(-1deg); + transform: translate(3px, 1px) rotate(-1deg); + } + 80% { + -webkit-transform: translate(-1px, -1px) rotate(1deg); + -moz-transform: translate(-1px, -1px) rotate(1deg); + -o-transform: translate(-1px, -1px) rotate(1deg); + -ms-transform: translate(-1px, -1px) rotate(1deg); + transform: translate(-1px, -1px) rotate(1deg); + } + 90% { + -webkit-transform: translate(1px, 2px) rotate(0deg); + -moz-transform: translate(1px, 2px) rotate(0deg); + -o-transform: translate(1px, 2px) rotate(0deg); + -ms-transform: translate(1px, 2px) rotate(0deg); + transform: translate(1px, 2px) rotate(0deg); + } + 100% { + -webkit-transform: translate(1px, -2px) rotate(-1deg); + -moz-transform: translate(1px, -2px) rotate(-1deg); + -o-transform: translate(1px, -2px) rotate(-1deg); + -ms-transform: translate(1px, -2px) rotate(-1deg); + transform: translate(1px, -2px) rotate(-1deg); + } +} +@-o-keyframes anzhiyu-shake { + 0% { + -webkit-transform: translate(1px, 1px) rotate(0deg); + -moz-transform: translate(1px, 1px) rotate(0deg); + -o-transform: translate(1px, 1px) rotate(0deg); + -ms-transform: translate(1px, 1px) rotate(0deg); + transform: translate(1px, 1px) rotate(0deg); + } + 10% { + -webkit-transform: translate(-1px, -2px) rotate(-1deg); + -moz-transform: translate(-1px, -2px) rotate(-1deg); + -o-transform: translate(-1px, -2px) rotate(-1deg); + -ms-transform: translate(-1px, -2px) rotate(-1deg); + transform: translate(-1px, -2px) rotate(-1deg); + } + 20% { + -webkit-transform: translate(-3px, 0px) rotate(1deg); + -moz-transform: translate(-3px, 0px) rotate(1deg); + -o-transform: translate(-3px, 0px) rotate(1deg); + -ms-transform: translate(-3px, 0px) rotate(1deg); + transform: translate(-3px, 0px) rotate(1deg); + } + 30% { + -webkit-transform: translate(3px, 2px) rotate(0deg); + -moz-transform: translate(3px, 2px) rotate(0deg); + -o-transform: translate(3px, 2px) rotate(0deg); + -ms-transform: translate(3px, 2px) rotate(0deg); + transform: translate(3px, 2px) rotate(0deg); + } + 40% { + -webkit-transform: translate(1px, -1px) rotate(1deg); + -moz-transform: translate(1px, -1px) rotate(1deg); + -o-transform: translate(1px, -1px) rotate(1deg); + -ms-transform: translate(1px, -1px) rotate(1deg); + transform: translate(1px, -1px) rotate(1deg); + } + 50% { + -webkit-transform: translate(-1px, 2px) rotate(-1deg); + -moz-transform: translate(-1px, 2px) rotate(-1deg); + -o-transform: translate(-1px, 2px) rotate(-1deg); + -ms-transform: translate(-1px, 2px) rotate(-1deg); + transform: translate(-1px, 2px) rotate(-1deg); + } + 60% { + -webkit-transform: translate(-3px, 1px) rotate(0deg); + -moz-transform: translate(-3px, 1px) rotate(0deg); + -o-transform: translate(-3px, 1px) rotate(0deg); + -ms-transform: translate(-3px, 1px) rotate(0deg); + transform: translate(-3px, 1px) rotate(0deg); + } + 70% { + -webkit-transform: translate(3px, 1px) rotate(-1deg); + -moz-transform: translate(3px, 1px) rotate(-1deg); + -o-transform: translate(3px, 1px) rotate(-1deg); + -ms-transform: translate(3px, 1px) rotate(-1deg); + transform: translate(3px, 1px) rotate(-1deg); + } + 80% { + -webkit-transform: translate(-1px, -1px) rotate(1deg); + -moz-transform: translate(-1px, -1px) rotate(1deg); + -o-transform: translate(-1px, -1px) rotate(1deg); + -ms-transform: translate(-1px, -1px) rotate(1deg); + transform: translate(-1px, -1px) rotate(1deg); + } + 90% { + -webkit-transform: translate(1px, 2px) rotate(0deg); + -moz-transform: translate(1px, 2px) rotate(0deg); + -o-transform: translate(1px, 2px) rotate(0deg); + -ms-transform: translate(1px, 2px) rotate(0deg); + transform: translate(1px, 2px) rotate(0deg); + } + 100% { + -webkit-transform: translate(1px, -2px) rotate(-1deg); + -moz-transform: translate(1px, -2px) rotate(-1deg); + -o-transform: translate(1px, -2px) rotate(-1deg); + -ms-transform: translate(1px, -2px) rotate(-1deg); + transform: translate(1px, -2px) rotate(-1deg); + } +} +@keyframes anzhiyu-shake { + 0% { + -webkit-transform: translate(1px, 1px) rotate(0deg); + -moz-transform: translate(1px, 1px) rotate(0deg); + -o-transform: translate(1px, 1px) rotate(0deg); + -ms-transform: translate(1px, 1px) rotate(0deg); + transform: translate(1px, 1px) rotate(0deg); + } + 10% { + -webkit-transform: translate(-1px, -2px) rotate(-1deg); + -moz-transform: translate(-1px, -2px) rotate(-1deg); + -o-transform: translate(-1px, -2px) rotate(-1deg); + -ms-transform: translate(-1px, -2px) rotate(-1deg); + transform: translate(-1px, -2px) rotate(-1deg); + } + 20% { + -webkit-transform: translate(-3px, 0px) rotate(1deg); + -moz-transform: translate(-3px, 0px) rotate(1deg); + -o-transform: translate(-3px, 0px) rotate(1deg); + -ms-transform: translate(-3px, 0px) rotate(1deg); + transform: translate(-3px, 0px) rotate(1deg); + } + 30% { + -webkit-transform: translate(3px, 2px) rotate(0deg); + -moz-transform: translate(3px, 2px) rotate(0deg); + -o-transform: translate(3px, 2px) rotate(0deg); + -ms-transform: translate(3px, 2px) rotate(0deg); + transform: translate(3px, 2px) rotate(0deg); + } + 40% { + -webkit-transform: translate(1px, -1px) rotate(1deg); + -moz-transform: translate(1px, -1px) rotate(1deg); + -o-transform: translate(1px, -1px) rotate(1deg); + -ms-transform: translate(1px, -1px) rotate(1deg); + transform: translate(1px, -1px) rotate(1deg); + } + 50% { + -webkit-transform: translate(-1px, 2px) rotate(-1deg); + -moz-transform: translate(-1px, 2px) rotate(-1deg); + -o-transform: translate(-1px, 2px) rotate(-1deg); + -ms-transform: translate(-1px, 2px) rotate(-1deg); + transform: translate(-1px, 2px) rotate(-1deg); + } + 60% { + -webkit-transform: translate(-3px, 1px) rotate(0deg); + -moz-transform: translate(-3px, 1px) rotate(0deg); + -o-transform: translate(-3px, 1px) rotate(0deg); + -ms-transform: translate(-3px, 1px) rotate(0deg); + transform: translate(-3px, 1px) rotate(0deg); + } + 70% { + -webkit-transform: translate(3px, 1px) rotate(-1deg); + -moz-transform: translate(3px, 1px) rotate(-1deg); + -o-transform: translate(3px, 1px) rotate(-1deg); + -ms-transform: translate(3px, 1px) rotate(-1deg); + transform: translate(3px, 1px) rotate(-1deg); + } + 80% { + -webkit-transform: translate(-1px, -1px) rotate(1deg); + -moz-transform: translate(-1px, -1px) rotate(1deg); + -o-transform: translate(-1px, -1px) rotate(1deg); + -ms-transform: translate(-1px, -1px) rotate(1deg); + transform: translate(-1px, -1px) rotate(1deg); + } + 90% { + -webkit-transform: translate(1px, 2px) rotate(0deg); + -moz-transform: translate(1px, 2px) rotate(0deg); + -o-transform: translate(1px, 2px) rotate(0deg); + -ms-transform: translate(1px, 2px) rotate(0deg); + transform: translate(1px, 2px) rotate(0deg); + } + 100% { + -webkit-transform: translate(1px, -2px) rotate(-1deg); + -moz-transform: translate(1px, -2px) rotate(-1deg); + -o-transform: translate(1px, -2px) rotate(-1deg); + -ms-transform: translate(1px, -2px) rotate(-1deg); + transform: translate(1px, -2px) rotate(-1deg); + } +} +@-moz-keyframes anzhiyu-pulse-animation { + 0% { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-webkit-keyframes anzhiyu-pulse-animation { + 0% { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-o-keyframes anzhiyu-pulse-animation { + 0% { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes anzhiyu-pulse-animation { + 0% { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-moz-keyframes anzhiyu-spin { + 0% { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(1turn); + -moz-transform: rotate(1turn); + -o-transform: rotate(1turn); + -ms-transform: rotate(1turn); + transform: rotate(1turn); + } +} +@-webkit-keyframes anzhiyu-spin { + 0% { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(1turn); + -moz-transform: rotate(1turn); + -o-transform: rotate(1turn); + -ms-transform: rotate(1turn); + transform: rotate(1turn); + } +} +@-o-keyframes anzhiyu-spin { + 0% { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(1turn); + -moz-transform: rotate(1turn); + -o-transform: rotate(1turn); + -ms-transform: rotate(1turn); + transform: rotate(1turn); + } +} +@keyframes anzhiyu-spin { + 0% { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(1turn); + -moz-transform: rotate(1turn); + -o-transform: rotate(1turn); + -ms-transform: rotate(1turn); + transform: rotate(1turn); + } +} +@-moz-keyframes scroll-down-effect { + 0% { + top: 0; + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + } + 50% { + top: -16px; + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + top: 0; + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + } +} +@-webkit-keyframes scroll-down-effect { + 0% { + top: 0; + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + } + 50% { + top: -16px; + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + top: 0; + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + } +} +@-o-keyframes scroll-down-effect { + 0% { + top: 0; + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + } + 50% { + top: -16px; + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + top: 0; + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + } +} +@keyframes scroll-down-effect { + 0% { + top: 0; + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + } + 50% { + top: -16px; + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + top: 0; + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + } +} +@-moz-keyframes header-effect { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(-50px); + -moz-transform: translateY(-50px); + -o-transform: translateY(-50px); + -ms-transform: translateY(-50px); + transform: translateY(-50px); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-webkit-keyframes header-effect { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(-50px); + -moz-transform: translateY(-50px); + -o-transform: translateY(-50px); + -ms-transform: translateY(-50px); + transform: translateY(-50px); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-o-keyframes header-effect { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(-50px); + -moz-transform: translateY(-50px); + -o-transform: translateY(-50px); + -ms-transform: translateY(-50px); + transform: translateY(-50px); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes header-effect { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(-50px); + -moz-transform: translateY(-50px); + -o-transform: translateY(-50px); + -ms-transform: translateY(-50px); + transform: translateY(-50px); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-moz-keyframes headerNoOpacity { + 0% { + -webkit-transform: translateY(-50px); + -moz-transform: translateY(-50px); + -o-transform: translateY(-50px); + -ms-transform: translateY(-50px); + transform: translateY(-50px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-webkit-keyframes headerNoOpacity { + 0% { + -webkit-transform: translateY(-50px); + -moz-transform: translateY(-50px); + -o-transform: translateY(-50px); + -ms-transform: translateY(-50px); + transform: translateY(-50px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-o-keyframes headerNoOpacity { + 0% { + -webkit-transform: translateY(-50px); + -moz-transform: translateY(-50px); + -o-transform: translateY(-50px); + -ms-transform: translateY(-50px); + transform: translateY(-50px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes headerNoOpacity { + 0% { + -webkit-transform: translateY(-50px); + -moz-transform: translateY(-50px); + -o-transform: translateY(-50px); + -ms-transform: translateY(-50px); + transform: translateY(-50px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-moz-keyframes bottom-top { + 0% { + margin-top: 50px; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + margin-top: 0; + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@-webkit-keyframes bottom-top { + 0% { + margin-top: 50px; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + margin-top: 0; + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@-o-keyframes bottom-top { + 0% { + margin-top: 50px; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + margin-top: 0; + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@keyframes bottom-top { + 0% { + margin-top: 50px; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + margin-top: 0; + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@-moz-keyframes titleScale { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +@-webkit-keyframes titleScale { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +@-o-keyframes titleScale { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +@keyframes titleScale { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +@-moz-keyframes search_close { + 0% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + } +} +@-webkit-keyframes search_close { + 0% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + } +} +@-o-keyframes search_close { + 0% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + } +} +@keyframes search_close { + 0% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + } +} +@-moz-keyframes to_show { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@-webkit-keyframes to_show { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@-o-keyframes to_show { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@keyframes to_show { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@-moz-keyframes to_hide { + 0% { + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +@-webkit-keyframes to_hide { + 0% { + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +@-o-keyframes to_hide { + 0% { + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +@keyframes to_hide { + 0% { + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +@-moz-keyframes ribbon_to_show { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } +} +@-webkit-keyframes ribbon_to_show { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } +} +@-o-keyframes ribbon_to_show { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } +} +@keyframes ribbon_to_show { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } +} +@-moz-keyframes avatar_turn_around { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-webkit-keyframes avatar_turn_around { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-o-keyframes avatar_turn_around { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes avatar_turn_around { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-moz-keyframes donate_effcet { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(-20px); + -moz-transform: translateY(-20px); + -o-transform: translateY(-20px); + -ms-transform: translateY(-20px); + transform: translateY(-20px); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-webkit-keyframes donate_effcet { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(-20px); + -moz-transform: translateY(-20px); + -o-transform: translateY(-20px); + -ms-transform: translateY(-20px); + transform: translateY(-20px); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-o-keyframes donate_effcet { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(-20px); + -moz-transform: translateY(-20px); + -o-transform: translateY(-20px); + -ms-transform: translateY(-20px); + transform: translateY(-20px); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes donate_effcet { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: translateY(-20px); + -moz-transform: translateY(-20px); + -o-transform: translateY(-20px); + -ms-transform: translateY(-20px); + transform: translateY(-20px); + } + 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-moz-keyframes sidebarItem { + 0% { + -webkit-transform: translateX(200px); + -moz-transform: translateX(200px); + -o-transform: translateX(200px); + -ms-transform: translateX(200px); + transform: translateX(200px); + } + 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +@-webkit-keyframes sidebarItem { + 0% { + -webkit-transform: translateX(200px); + -moz-transform: translateX(200px); + -o-transform: translateX(200px); + -ms-transform: translateX(200px); + transform: translateX(200px); + } + 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +@-o-keyframes sidebarItem { + 0% { + -webkit-transform: translateX(200px); + -moz-transform: translateX(200px); + -o-transform: translateX(200px); + -ms-transform: translateX(200px); + transform: translateX(200px); + } + 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes sidebarItem { + 0% { + -webkit-transform: translateX(200px); + -moz-transform: translateX(200px); + -o-transform: translateX(200px); + -ms-transform: translateX(200px); + transform: translateX(200px); + } + 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +@-moz-keyframes sidebarItem { + 0% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +@-webkit-keyframes sidebarItem { + 0% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +@-o-keyframes sidebarItem { + 0% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +@keyframes sidebarItem { + 0% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +@-moz-keyframes barrageIn { + 0% { + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@-webkit-keyframes barrageIn { + 0% { + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@-o-keyframes barrageIn { + 0% { + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@keyframes barrageIn { + 0% { + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@-moz-keyframes barrageOut { + 0% { + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + -o-transform: translateY(0px); + -ms-transform: translateY(0px); + transform: translateY(0px); + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +@-webkit-keyframes barrageOut { + 0% { + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + -o-transform: translateY(0px); + -ms-transform: translateY(0px); + transform: translateY(0px); + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +@-o-keyframes barrageOut { + 0% { + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + -o-transform: translateY(0px); + -ms-transform: translateY(0px); + transform: translateY(0px); + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +@keyframes barrageOut { + 0% { + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + -o-transform: translateY(0px); + -ms-transform: translateY(0px); + transform: translateY(0px); + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +@-moz-keyframes toLeftFull { + 0% { + -webkit-transform: translateX(200%); + -moz-transform: translateX(200%); + -o-transform: translateX(200%); + -ms-transform: translateX(200%); + transform: translateX(200%); + } + 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +@-webkit-keyframes toLeftFull { + 0% { + -webkit-transform: translateX(200%); + -moz-transform: translateX(200%); + -o-transform: translateX(200%); + -ms-transform: translateX(200%); + transform: translateX(200%); + } + 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +@-o-keyframes toLeftFull { + 0% { + -webkit-transform: translateX(200%); + -moz-transform: translateX(200%); + -o-transform: translateX(200%); + -ms-transform: translateX(200%); + transform: translateX(200%); + } + 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes toLeftFull { + 0% { + -webkit-transform: translateX(200%); + -moz-transform: translateX(200%); + -o-transform: translateX(200%); + -ms-transform: translateX(200%); + transform: translateX(200%); + } + 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} +@-moz-keyframes toRightFull { + 0% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 100% { + -webkit-transform: translateX(200%); + -moz-transform: translateX(200%); + -o-transform: translateX(200%); + -ms-transform: translateX(200%); + transform: translateX(200%); + } +} +@-webkit-keyframes toRightFull { + 0% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 100% { + -webkit-transform: translateX(200%); + -moz-transform: translateX(200%); + -o-transform: translateX(200%); + -ms-transform: translateX(200%); + transform: translateX(200%); + } +} +@-o-keyframes toRightFull { + 0% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 100% { + -webkit-transform: translateX(200%); + -moz-transform: translateX(200%); + -o-transform: translateX(200%); + -ms-transform: translateX(200%); + transform: translateX(200%); + } +} +@keyframes toRightFull { + 0% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 100% { + -webkit-transform: translateX(200%); + -moz-transform: translateX(200%); + -o-transform: translateX(200%); + -ms-transform: translateX(200%); + transform: translateX(200%); + } +} +@-moz-keyframes breathe { + 0% { + -webkit-transform: scale(0.97); + -moz-transform: scale(0.97); + -o-transform: scale(0.97); + -ms-transform: scale(0.97); + transform: scale(0.97); + } + 50% { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); + } + 100% { + -webkit-transform: scale(0.97); + -moz-transform: scale(0.97); + -o-transform: scale(0.97); + -ms-transform: scale(0.97); + transform: scale(0.97); + } +} +@-webkit-keyframes breathe { + 0% { + -webkit-transform: scale(0.97); + -moz-transform: scale(0.97); + -o-transform: scale(0.97); + -ms-transform: scale(0.97); + transform: scale(0.97); + } + 50% { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); + } + 100% { + -webkit-transform: scale(0.97); + -moz-transform: scale(0.97); + -o-transform: scale(0.97); + -ms-transform: scale(0.97); + transform: scale(0.97); + } +} +@-o-keyframes breathe { + 0% { + -webkit-transform: scale(0.97); + -moz-transform: scale(0.97); + -o-transform: scale(0.97); + -ms-transform: scale(0.97); + transform: scale(0.97); + } + 50% { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); + } + 100% { + -webkit-transform: scale(0.97); + -moz-transform: scale(0.97); + -o-transform: scale(0.97); + -ms-transform: scale(0.97); + transform: scale(0.97); + } +} +@keyframes breathe { + 0% { + -webkit-transform: scale(0.97); + -moz-transform: scale(0.97); + -o-transform: scale(0.97); + -ms-transform: scale(0.97); + transform: scale(0.97); + } + 50% { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); + } + 100% { + -webkit-transform: scale(0.97); + -moz-transform: scale(0.97); + -o-transform: scale(0.97); + -ms-transform: scale(0.97); + transform: scale(0.97); + } +} +@-moz-keyframes animate-in-and-out { + entry 0% { + opacity: 0.5; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); + -webkit-transform: scaleX(0.9); + -moz-transform: scaleX(0.9); + -o-transform: scaleX(0.9); + -ms-transform: scaleX(0.9); + transform: scaleX(0.9); + } + entry 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scaleX(1); + -moz-transform: scaleX(1); + -o-transform: scaleX(1); + -ms-transform: scaleX(1); + transform: scaleX(1); + } +} +@-webkit-keyframes animate-in-and-out { + entry 0% { + opacity: 0.5; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); + -webkit-transform: scaleX(0.9); + -moz-transform: scaleX(0.9); + -o-transform: scaleX(0.9); + -ms-transform: scaleX(0.9); + transform: scaleX(0.9); + } + entry 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scaleX(1); + -moz-transform: scaleX(1); + -o-transform: scaleX(1); + -ms-transform: scaleX(1); + transform: scaleX(1); + } +} +@-o-keyframes animate-in-and-out { + entry 0% { + opacity: 0.5; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); + -webkit-transform: scaleX(0.9); + -moz-transform: scaleX(0.9); + -o-transform: scaleX(0.9); + -ms-transform: scaleX(0.9); + transform: scaleX(0.9); + } + entry 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scaleX(1); + -moz-transform: scaleX(1); + -o-transform: scaleX(1); + -ms-transform: scaleX(1); + transform: scaleX(1); + } +} +@keyframes animate-in-and-out { + entry 0% { + opacity: 0.5; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); + -webkit-transform: scaleX(0.9); + -moz-transform: scaleX(0.9); + -o-transform: scaleX(0.9); + -ms-transform: scaleX(0.9); + transform: scaleX(0.9); + } + entry 100% { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: scaleX(1); + -moz-transform: scaleX(1); + -o-transform: scaleX(1); + -ms-transform: scaleX(1); + transform: scaleX(1); + } +} +@-moz-keyframes header { + entry 0% { + --anzhiyu-header-translateY: 160px; + --anzhiyu-header-info-scale: 0.7; + --anzhiyu-header-cover-scale: 1; + } + entry 100% { + --anzhiyu-header-translateY: 0px; + --anzhiyu-header-info-scale: 1; + --anzhiyu-header-cover-scale: 2; + } + exit 100% { + --anzhiyu-header-translateY: 160px; + --anzhiyu-header-info-scale: 0.7; + --anzhiyu-header-cover-scale: 1; + } + exit 0% { + --anzhiyu-header-translateY: 0px; + --anzhiyu-header-info-scale: 1; + --anzhiyu-header-cover-scale: 2; + } +} +@-webkit-keyframes header { + entry 0% { + --anzhiyu-header-translateY: 160px; + --anzhiyu-header-info-scale: 0.7; + --anzhiyu-header-cover-scale: 1; + } + entry 100% { + --anzhiyu-header-translateY: 0px; + --anzhiyu-header-info-scale: 1; + --anzhiyu-header-cover-scale: 2; + } + exit 100% { + --anzhiyu-header-translateY: 160px; + --anzhiyu-header-info-scale: 0.7; + --anzhiyu-header-cover-scale: 1; + } + exit 0% { + --anzhiyu-header-translateY: 0px; + --anzhiyu-header-info-scale: 1; + --anzhiyu-header-cover-scale: 2; + } +} +@-o-keyframes header { + entry 0% { + --anzhiyu-header-translateY: 160px; + --anzhiyu-header-info-scale: 0.7; + --anzhiyu-header-cover-scale: 1; + } + entry 100% { + --anzhiyu-header-translateY: 0px; + --anzhiyu-header-info-scale: 1; + --anzhiyu-header-cover-scale: 2; + } + exit 100% { + --anzhiyu-header-translateY: 160px; + --anzhiyu-header-info-scale: 0.7; + --anzhiyu-header-cover-scale: 1; + } + exit 0% { + --anzhiyu-header-translateY: 0px; + --anzhiyu-header-info-scale: 1; + --anzhiyu-header-cover-scale: 2; + } +} +@keyframes header { + entry 0% { + --anzhiyu-header-translateY: 160px; + --anzhiyu-header-info-scale: 0.7; + --anzhiyu-header-cover-scale: 1; + } + entry 100% { + --anzhiyu-header-translateY: 0px; + --anzhiyu-header-info-scale: 1; + --anzhiyu-header-cover-scale: 2; + } + exit 100% { + --anzhiyu-header-translateY: 160px; + --anzhiyu-header-info-scale: 0.7; + --anzhiyu-header-cover-scale: 1; + } + exit 0% { + --anzhiyu-header-translateY: 0px; + --anzhiyu-header-info-scale: 1; + --anzhiyu-header-cover-scale: 2; + } +} +@-moz-keyframes post-info-slide-in { + 0% { + -webkit-transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px); + -moz-transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px); + -o-transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px); + -ms-transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px); + transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + -webkit-transform: scale(var(--anzhiyu-header-info-scale)) translateY(0); + -moz-transform: scale(var(--anzhiyu-header-info-scale)) translateY(0); + -o-transform: scale(var(--anzhiyu-header-info-scale)) translateY(0); + -ms-transform: scale(var(--anzhiyu-header-info-scale)) translateY(0); + transform: scale(var(--anzhiyu-header-info-scale)) translateY(0); + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@-webkit-keyframes post-info-slide-in { + 0% { + -webkit-transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px); + -moz-transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px); + -o-transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px); + -ms-transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px); + transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + -webkit-transform: scale(var(--anzhiyu-header-info-scale)) translateY(0); + -moz-transform: scale(var(--anzhiyu-header-info-scale)) translateY(0); + -o-transform: scale(var(--anzhiyu-header-info-scale)) translateY(0); + -ms-transform: scale(var(--anzhiyu-header-info-scale)) translateY(0); + transform: scale(var(--anzhiyu-header-info-scale)) translateY(0); + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@-o-keyframes post-info-slide-in { + 0% { + -webkit-transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px); + -moz-transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px); + -o-transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px); + -ms-transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px); + transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + -webkit-transform: scale(var(--anzhiyu-header-info-scale)) translateY(0); + -moz-transform: scale(var(--anzhiyu-header-info-scale)) translateY(0); + -o-transform: scale(var(--anzhiyu-header-info-scale)) translateY(0); + -ms-transform: scale(var(--anzhiyu-header-info-scale)) translateY(0); + transform: scale(var(--anzhiyu-header-info-scale)) translateY(0); + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@keyframes post-info-slide-in { + 0% { + -webkit-transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px); + -moz-transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px); + -o-transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px); + -ms-transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px); + transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + -webkit-transform: scale(var(--anzhiyu-header-info-scale)) translateY(0); + -moz-transform: scale(var(--anzhiyu-header-info-scale)) translateY(0); + -o-transform: scale(var(--anzhiyu-header-info-scale)) translateY(0); + -ms-transform: scale(var(--anzhiyu-header-info-scale)) translateY(0); + transform: scale(var(--anzhiyu-header-info-scale)) translateY(0); + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@-moz-keyframes slide-in { + 0% { + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@-webkit-keyframes slide-in { + 0% { + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@-o-keyframes slide-in { + 0% { + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@keyframes slide-in { + 0% { + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -o-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + opacity: 1; + -ms-filter: none; + filter: none; + } +} +@-moz-keyframes floating { + 0% { + -webkit-transform: translate(0, -4px); + -moz-transform: translate(0, -4px); + -o-transform: translate(0, -4px); + -ms-transform: translate(0, -4px); + transform: translate(0, -4px); + } + 50% { + -webkit-transform: translate(0, 4px); + -moz-transform: translate(0, 4px); + -o-transform: translate(0, 4px); + -ms-transform: translate(0, 4px); + transform: translate(0, 4px); + } + 100% { + -webkit-transform: translate(0, -4px); + -moz-transform: translate(0, -4px); + -o-transform: translate(0, -4px); + -ms-transform: translate(0, -4px); + transform: translate(0, -4px); + } +} +@-webkit-keyframes floating { + 0% { + -webkit-transform: translate(0, -4px); + -moz-transform: translate(0, -4px); + -o-transform: translate(0, -4px); + -ms-transform: translate(0, -4px); + transform: translate(0, -4px); + } + 50% { + -webkit-transform: translate(0, 4px); + -moz-transform: translate(0, 4px); + -o-transform: translate(0, 4px); + -ms-transform: translate(0, 4px); + transform: translate(0, 4px); + } + 100% { + -webkit-transform: translate(0, -4px); + -moz-transform: translate(0, -4px); + -o-transform: translate(0, -4px); + -ms-transform: translate(0, -4px); + transform: translate(0, -4px); + } +} +@-o-keyframes floating { + 0% { + -webkit-transform: translate(0, -4px); + -moz-transform: translate(0, -4px); + -o-transform: translate(0, -4px); + -ms-transform: translate(0, -4px); + transform: translate(0, -4px); + } + 50% { + -webkit-transform: translate(0, 4px); + -moz-transform: translate(0, 4px); + -o-transform: translate(0, 4px); + -ms-transform: translate(0, 4px); + transform: translate(0, 4px); + } + 100% { + -webkit-transform: translate(0, -4px); + -moz-transform: translate(0, -4px); + -o-transform: translate(0, -4px); + -ms-transform: translate(0, -4px); + transform: translate(0, -4px); + } +} +@keyframes floating { + 0% { + -webkit-transform: translate(0, -4px); + -moz-transform: translate(0, -4px); + -o-transform: translate(0, -4px); + -ms-transform: translate(0, -4px); + transform: translate(0, -4px); + } + 50% { + -webkit-transform: translate(0, 4px); + -moz-transform: translate(0, 4px); + -o-transform: translate(0, 4px); + -ms-transform: translate(0, 4px); + transform: translate(0, 4px); + } + 100% { + -webkit-transform: translate(0, -4px); + -moz-transform: translate(0, -4px); + -o-transform: translate(0, -4px); + -ms-transform: translate(0, -4px); + transform: translate(0, -4px); + } +} +i.anzhiyu-icon-hashtag { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + font-size: 13px; +} +:root { + --animation-on: cubic-bezier(0.6, 0.1, 0, 1); + --animation-in: cubic-bezier(0.6, 0.2, 0.25, 1); + --animation-ot: opacity 0.5s var(--animation-in) backwards, transform 1s var(--animation-in) backwards; + --animation-otf: opacity 0.5s var(--animation-in) backwards, transform 1s var(--animation-in) backwards, filter 0.7s var(--animation-in) backwards; + --global-font-size: 16px; + --global-bg: #fff; + --font-color: #4c4948; + --hr-border: rgba(161,172,247,0.137); + --hr-before-color: rgba(123,139,244,0.137); + --search-bg: #f6f8fa; + --search-input-color: #4c4948; + --search-result-title: #4c4948; + --preloader-bg: #37474f; + --preloader-color: #fff; + --tab-border-color: #f0f0f0; + --tab-botton-bg: #f0f0f0; + --tab-botton-color: #1f2d3d; + --tab-button-hover-bg: #dcdcdc; + --tab-button-active-bg: #fff; + --card-bg: #fff; + --sidebar-bg: #f6f8fa; + --btn-hover-color: #ff7242; + --btn-color: #fff; + --btn-bg: var(--anzhiyu-main); + --text-bg-hover: rgba(66,90,239,0.7); + --light-grey: #eee; + --dark-grey: #cacaca; + --white: #fff; + --text-highlight-color: #1f2d3d; + --blockquote-color: #6a737d; + --blockquote-bg: rgba(66,90,239,0.1); + --reward-pop: #f5f5f5; + --toc-link-color: #666261; + --card-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.05); + --card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,0.09); + --pseudo-hover: #ff7242; + --headline-presudo: var(--anzhiyu-fontcolor); + --scrollbar-color: var(--anzhiyu-scrollbar); + --anzhiyu-snackbar-time: 2000ms; + --anzhiyu-deep-purple: #405589; + --anzhiyu-meta-theme-color: #f7f9fe; + --anzhiyu-bar-background: var(--anzhiyu-main); + --anzhiyu-theme-op: rgba(66,89,239,0.137); + --anzhiyu-card-bg-none: rgba(255,255,255,0); + --anzhiyu-main-op-deep: var(--anzhiyu-theme-op-deep) !important; + --anzhiyu-gray-op: rgba(153,153,153,0.169); + --anzhiyu-theme-top: var(--anzhiyu-theme); + --anzhiyu-white: #fff; + --anzhiyu-white-op: rgba(255,255,255,0.2); + --anzhiyu-black: #000; + --anzhiyu-black-op: rgba(0,0,0,0.2); + --anzhiyu-none: rgba(0,0,0,0); + --anzhiyu-gray: #999; + --anzhiyu-yellow: #ffc93e; + --anzhiyu-orange: #e38100; + --anzhiyu-blue-hover: #5390e6; + --anzhiyu-radius-full: 50px; + --anzhiyu-radius: 8px; + --anzhiyu-border-radius: 8px; + --anzhiyu-main: var(--anzhiyu-theme); + --anzhiyu-main-op: var(--anzhiyu-theme-op); + --anzhiyu-shadow-theme: 0 8px 12px -3px var(--anzhiyu-theme-op); + --anzhiyu-shadow-main: 0 8px 12px -3px var(--anzhiyu-main-op); + --anzhiyu-shadow-blue: 0 8px 12px -3px rgba(40,109,234,0.2); + --anzhiyu-shadow-white: 0 8px 12px -3px rgba(255,255,255,0.2); + --anzhiyu-shadow-black: 0 0 12px 4px rgba(0,0,0,0.05); + --anzhiyu-shadow-yellow: 0px 38px 77px -26px rgba(255,201,62,0.12); + --anzhiyu-shadow-red: 0 8px 12px -3px rgba(238,125,121,0.212); + --anzhiyu-shadow-green: 0 8px 12px -3px rgba(135,238,121,0.212); + --anzhiyu-shadow-border: 0 8px 16px -4px rgba(44,45,48,0.047); + --anzhiyu-shadow-blackdeep: 0 2px 16px -3px rgba(0,0,0,0.15); + --anzhiyu-logo-color: linear-gradient(215deg, #4584ff 0%, #cf0db9 100%); + --anzhiyu-code-stress: var(--anzhiyu-main); + --style-border: 1px solid var(--anzhiyu-card-border); + --anzhiyu-blue-main: #425aef; + --style-border-hover: 1px solid var(--anzhiyu-main); + --style-border-dashed: 1px dashed var(--anzhiyu-theme-op); + --style-border-avatar: 5px solid var(--anzhiyu-white); + --style-border-always: 1px solid var(--anzhiyu-card-border); + --style-border-none: 1px solid transparent; + --style-border-deep-ash: 1px solid #d0d7de; + --style-border-hover-always: 1px solid var(--anzhiyu-main); + --anzhiyu-main-none: rgba(184,184,184,0) !important; + --anzhiyu-wihite-font: #fff; +} +@media (prefers-color-scheme: light) { +} +[data-theme="light"] { + --anzhiyu-meta-theme-post-color: #fff; + --anzhiyu-meta-theme-color: #f7f9fe; + --anzhiyu-theme-op-deep: rgba(66,89,239,0.867); + --global-bg: #f7f9fe; + --anzhiyu-theme: #425aef; + --anzhiyu-theme-deep: #1856fb; + --anzhiyu-theme-op: rgba(66,89,239,0.137); + --anzhiyu-blue: #5ca1ff; + --anzhiyu-blue-tint: rgba(92,161,255,0.1); + --anzhiyu-red: #d8213c; + --anzhiyu-pink: #ff7c7c; + --anzhiyu-green: #57bd6a; + --anzhiyu-fontcolor: #363636; + --anzhiyu-background: #f7f9fe; + --anzhiyu-reverse: #000; + --anzhiyu-maskbg: rgba(255,255,255,0.6); + --anzhiyu-maskbgdeep: rgba(255,255,255,0.85); + --anzhiyu-scrollbar: rgba(60,60,67,0.4); + --anzhiyu-hovertext: var(--anzhiyu-theme); + --anzhiyu-ahoverbg: #f7f7fa; + --anzhiyu-lighttext: var(--anzhiyu-main); + --anzhiyu-secondtext: rgba(60,60,67,0.8); + --anzhiyu-scrollbar: rgba(60,60,67,0.4); + --anzhiyu-card-btn-bg: #edf0f7; + --anzhiyu-post-blockquote-bg: #fafcff; + --anzhiyu-post-tabs-bg: #f2f5f8; + --anzhiyu-secondbg: #f7f7f9; + --anzhiyu-shadow-nav: 0 5px 12px -5px rgba(102,68,68,0.05); + --anzhiyu-card-bg: #fff; + --anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102,68,68,0); + --anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102,68,68,0); + --anzhiyu-card-border: #e3e8f7; + --anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102,68,68,0); + --anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102,68,68,0); + --anzhiyu-wihite-font: #fff; +} +@media (prefers-color-scheme: dark) { +} +[data-theme="dark"] { + --anzhiyu-meta-theme-post-color: #1d1e22; + --anzhiyu-meta-theme-color: #000; + --anzhiyu-blue: #5ca1ff; + --anzhiyu-blue-tint: rgba(92,161,255,0.1); + --anzhiyu-theme-op-deep: rgba(0,132,255,0.867); + --global-bg: #18171d; + --anzhiyu-theme: #f2b94b; + --anzhiyu-theme-deep: #0076e5; + --anzhiyu-theme-op: rgba(242,185,75,0.137); + --anzhiyu-blue: #0084ff; + --anzhiyu-red: #ff3842; + --anzhiyu-pink: #ff7c7c; + --anzhiyu-green: #57bd6a; + --anzhiyu-fontcolor: #f7f7fa; + --anzhiyu-background: #18171d; + --anzhiyu-reverse: #fff; + --anzhiyu-maskbg: rgba(0,0,0,0.6); + --anzhiyu-maskbgdeep: rgba(0,0,0,0.85); + --anzhiyu-hovertext: #0a84ff; + --anzhiyu-ahoverbg: #fff; + --anzhiyu-scrollbar: rgba(200,200,223,0.4); + --anzhiyu-lighttext: #f2b94b; + --anzhiyu-secondtext: #a1a2b8; + --anzhiyu-scrollbar: rgba(200,200,223,0.4); + --anzhiyu-card-btn-bg: #30343f; + --anzhiyu-post-blockquote-bg: #000; + --anzhiyu-post-tabs-bg: #121212; + --anzhiyu-secondbg: #21232a; + --anzhiyu-shadow-nav: 0 5px 20px 0px rgba(28,28,28,0.4); + --anzhiyu-card-bg: #1d1e22; + --anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102,68,68,0); + --anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102,68,68,0); + --anzhiyu-card-border: #42444a; + --anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102,68,68,0); + --anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102,68,68,0); + --anzhiyu-wihite-font: #f6f6f6; +} +body { + position: relative; + min-height: 100%; + background: var(--global-bg); + color: var(--font-color); + font-size: var(--global-font-size); + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif; + line-height: 2; + -webkit-tap-highlight-color: rgba(0,0,0,0); +} +*::-webkit-scrollbar { + width: 6px; + height: 6px; +} +*::-webkit-scrollbar-thumb { + background: var(--scrollbar-color); + border-radius: 8px; + cursor: pointer; +} +*::-webkit-scrollbar-track { + background-color: transparent; +} +::-webkit-scrollbar-corner { + background-color: transparent; +} +* { + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-color) transparent; +} +input::placeholder { + color: var(--font-color); +} +#web_bg { + position: fixed; + z-index: -999; + width: 200%; + height: 200%; + top: -50%; + left: -50%; + -webkit-transform: rotate(-1deg); + -moz-transform: rotate(-1deg); + -o-transform: rotate(-1deg); + -ms-transform: rotate(-1deg); + transform: rotate(-1deg); + -webkit-overflow-scrolling: touch; + background: var(--anzhiyu-background); + background-attachment: local; + background-position: center; + background-size: cover; + background-repeat: no-repeat; +} +h1, +h2, +h3, +h4, +h5, +h6 { + position: relative; + margin: 20px 0 14px; + color: var(--text-highlight-color); + font-weight: bold; +} +h1 code, +h2 code, +h3 code, +h4 code, +h5 code, +h6 code { + font-size: inherit !important; +} +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +hr { + position: relative; + margin: 40px auto; + border: 2px dashed var(--hr-border); + width: calc(100% - 4px); +} +hr:hover:before { + left: calc(95% - 20px); +} +hr:before { + position: absolute; + top: -10px; + left: 5%; + z-index: 1; + color: var(--hr-before-color); + content: '\f0c4'; + font-size: 16px; + line-height: 1; + -webkit-transition: all 1s ease-in-out; + -moz-transition: all 1s ease-in-out; + -o-transition: all 1s ease-in-out; + -ms-transition: all 1s ease-in-out; + transition: all 1s ease-in-out; +} +html { + overflow-y: overlay; +} +.table-wrap { + overflow-x: scroll; + margin: 1rem 0; + border-radius: 8px; +} +table { + display: table; + width: 100%; + border-spacing: 0; + border-collapse: collapse; + empty-cells: show; +} +table thead { + background: var(--anzhiyu-secondbg); +} +table th, +table td { + padding: 0.3rem 0.6rem; + vertical-align: middle; + border: var(--style-border-always); +} +*::selection { + background: #2128bd; + color: #f7f7f7; +} +button { + padding: 0; + outline: 0; + border: none; + background: none; + cursor: pointer; + touch-action: manipulation; +} +a { + color: var(--anzhiyu-fontcolor); + text-decoration: none; + word-wrap: break-word; + -webkit-transition: all 0.2s ease 0s; + -moz-transition: all 0.2s ease 0s; + -o-transition: all 0.2s ease 0s; + -ms-transition: all 0.2s ease 0s; + transition: all 0.2s ease 0s; + overflow-wrap: break-word; +} +a:hover { + color: #425aef; +} +#site-title, +#site-subtitle, +#site-name, +#aside-content .author-info__name, +#aside-content .author-info__description { + font-family: PingFang SC, 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif; +} +.is-center { + text-align: center; +} +.copy-true { + -webkit-user-select: all; + -moz-user-select: all; + -ms-user-select: all; + user-select: all; +} +.pull-left { + float: left; +} +.pull-right { + float: right; +} +img[src=''], +img:not([src]) { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); +} +img[data-lazy-src]:not(.loaded) { + filter: blur(8px) brightness(1); +} +img[data-lazy-src].error { + filter: none; + opacity: 1 !important; + -ms-filter: none !important; + filter: none !important; +} +img[data-lazy-src]:not(.loaded) { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); +} +img[src=''], +img:not([src]) { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); +} +.img-alt { + font-size: 12px; + margin: 0; + margin-top: 8px; + color: var(--anzhiyu-secondtext); +} +.img-alt:hover { + text-decoration: none !important; +} +blockquote { + margin: 0 0 20px; + padding: 12px 15px; + border-left: 3px solid #425aef; + background-color: var(--blockquote-bg); + color: var(--blockquote-color); +} +blockquote footer cite:before { + padding: 0 5px; + content: '—'; +} +blockquote > :last-child { + margin-bottom: 0 !important; +} +.time_hidden { + display: none !important; +} +#single_top { + padding: 1.875rem 1.5rem 0; + max-width: 1400px; + width: 100%; + margin: 0 auto; +} +@media screen and (max-width: 768px) { + #single_top + #content-inner { + padding: 1.875rem 0rem 0; + } +} +.loading-bg { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + width: 100%; + height: 100%; + position: fixed; + background: var(--anzhiyu-card-bg); + z-index: 1001; + opacity: 1; + -ms-filter: none; + filter: none; + overflow: hidden; + -webkit-transition: 0.2s; + -moz-transition: 0.2s; + -o-transition: 0.2s; + -ms-transition: 0.2s; + transition: 0.2s; + -webkit-animation: showLoading 0.3s 0s backwards; + -moz-animation: showLoading 0.3s 0s backwards; + -o-animation: showLoading 0.3s 0s backwards; + -ms-animation: showLoading 0.3s 0s backwards; + animation: showLoading 0.3s 0s backwards; +} +.loading-bg::-webkit-scrollbar { + display: none; +} +#loading-box { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +#loading-box .loading-img { + width: 100px; + height: 100px; + border-radius: 50%; + margin: auto; + border: 4px solid #f0f0f2; + -webkit-animation-duration: 0.2s; + -moz-animation-duration: 0.2s; + -o-animation-duration: 0.2s; + -ms-animation-duration: 0.2s; + animation-duration: 0.2s; + -webkit-animation-name: loadingAction; + -moz-animation-name: loadingAction; + -o-animation-name: loadingAction; + -ms-animation-name: loadingAction; + animation-name: loadingAction; + -webkit-animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + -o-animation-iteration-count: infinite; + -ms-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + -moz-animation-direction: alternate; + -o-animation-direction: alternate; + -ms-animation-direction: alternate; + animation-direction: alternate; +} +#loading-box .loading-image-dot { + width: 30px; + height: 30px; + background: #6bdf8f; + position: absolute; + border-radius: 50%; + border: 6px solid #fff; + top: 50%; + left: 50%; + -webkit-transform: translate(18px, 24px); + -moz-transform: translate(18px, 24px); + -o-transform: translate(18px, 24px); + -ms-transform: translate(18px, 24px); + transform: translate(18px, 24px); +} +#loading-box.loaded .loading-bg { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + z-index: -1000; +} +@-moz-keyframes loadingAction { + 0% { + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + } +} +@-webkit-keyframes loadingAction { + 0% { + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + } +} +@-o-keyframes loadingAction { + 0% { + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + } +} +@keyframes loadingAction { + 0% { + opacity: 1; + -ms-filter: none; + filter: none; + } + 100% { + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + } +} +:root { + --hl-color: #90a4ae; + --hl-bg: #f6f8fa; + --hltools-bg: var(--anzhiyu-secondbg); + --hltools-color: var(--anzhiyu-fontcolor); + --hlnumber-bg: #f6f8fa; + --hlnumber-color: rgba(144,164,174,0.5); + --hlscrollbar-bg: #dce4eb; + --hlexpand-bg: linear-gradient(180deg, rgba(246,248,250,0.6), rgba(246,248,250,0.9)); +} +[data-theme='dark'] { + --hl-color: rgba(255,255,255,0.7); + --hl-bg: #171717; + --hltools-bg: #1a1a1a; + --hltools-color: #90a4ae; + --hlnumber-bg: #171717; + --hlnumber-color: rgba(255,255,255,0.4); + --hlscrollbar-bg: #1f1f1f; + --hlexpand-bg: linear-gradient(180deg, rgba(23,23,23,0.6), rgba(23,23,23,0.9)); +} +figure.highlight table { + scrollbar-color: var(--hlscrollbar-bg) transparent; +} +figure.highlight table::-webkit-scrollbar-thumb { + background: var(--hlscrollbar-bg); +} +figure.highlight pre .deletion { + color: #bf42bf; +} +figure.highlight pre .addition { + color: #105ede; +} +figure.highlight pre .meta { + color: #7c4dff; +} +figure.highlight pre .comment { + color: #969896; +} +figure.highlight pre .variable, +figure.highlight pre .attribute, +figure.highlight pre .regexp, +figure.highlight pre .ruby .constant, +figure.highlight pre .xml .tag .title, +figure.highlight pre .xml .pi, +figure.highlight pre .xml .doctype, +figure.highlight pre .html .doctype, +figure.highlight pre .css .id, +figure.highlight pre .tag .name, +figure.highlight pre .css .class, +figure.highlight pre .css .pseudo { + color: #e53935; +} +figure.highlight pre .tag { + color: #39adb5; +} +figure.highlight pre .number, +figure.highlight pre .preprocessor, +figure.highlight pre .literal, +figure.highlight pre .params, +figure.highlight pre .constant, +figure.highlight pre .command { + color: #f76d47; +} +figure.highlight pre .built_in { + color: #ffb62c; +} +figure.highlight pre .ruby .class .title, +figure.highlight pre .css .rules .attribute, +figure.highlight pre .string, +figure.highlight pre .value, +figure.highlight pre .inheritance, +figure.highlight pre .header, +figure.highlight pre .ruby .symbol, +figure.highlight pre .xml .cdata, +figure.highlight pre .special, +figure.highlight pre .number, +figure.highlight pre .formula { + color: #91b859; +} +figure.highlight pre .keyword, +figure.highlight pre .title, +figure.highlight pre .css .hexcolor { + color: #39adb5; +} +figure.highlight pre .function, +figure.highlight pre .python .decorator, +figure.highlight pre .python .title, +figure.highlight pre .ruby .function .title, +figure.highlight pre .ruby .title .keyword, +figure.highlight pre .perl .sub, +figure.highlight pre .javascript .title, +figure.highlight pre .coffeescript .title { + color: #6182b8; +} +figure.highlight pre .tag .attr, +figure.highlight pre .javascript .function { + color: #7c4dff; +} +#article-container figure.highlight .line.marked { + background-color: rgba(128,203,196,0.251); +} +#article-container figure.highlight table { + display: block; + overflow: auto; + border: none; +} +#article-container figure.highlight table td { + padding: 0; + border: none; +} +#article-container figure.highlight .gutter pre { + padding-right: 0.625rem; + padding-left: 1.25rem; + background: var(--anzhiyu-secondbg); + background-color: var(--anzhiyu-secondbg); + border-right: var(--style-border-always); + padding-right: 0.5rem; + padding-left: 0.5rem; + color: var(--hlnumber-color); + text-align: right; +} +#article-container figure.highlight .code pre { + padding-right: 10px; + padding-left: 10px; + width: 100%; +} +#article-container pre, +#article-container figure.highlight { + overflow: auto; + margin: 0 0 20px; + padding: 0; + background: var(--anzhiyu-card-bg); + border: var(--style-border-always); + color: var(--hl-color); + line-height: 1.6; +} +#article-container pre, +#article-container code { + font-size: var(--global-font-size); + font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif !important; +} +#article-container code { + padding: 2px 4px; + background: var(--anzhiyu-code-stress); + color: #fff; +} +#article-container pre { + padding: 10px 20px; +} +#article-container pre code { + padding: 0; + background: none; + color: var(--hl-color); + text-shadow: none; +} +#article-container figure.highlight { + position: relative; +} +#article-container figure.highlight pre { + margin: 0; + padding: 8px 0; + border: none; +} +#article-container figure.highlight figcaption, +#article-container figure.highlight .caption { + padding: 6px 0 2px 14px; + font-size: var(--global-font-size); + line-height: 1em; +} +#article-container figure.highlight figcaption a, +#article-container figure.highlight .caption a { + float: right; + padding-right: 10px; + color: var(--hl-color); +} +#article-container figure.highlight figcaption a:hover, +#article-container figure.highlight .caption a:hover { + border-bottom-color: var(--hl-color); +} +#article-container .highlight-tools { + position: relative; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + overflow: hidden; + min-height: 24px; + height: 2.15em; + background: var(--hltools-bg); + color: var(--hltools-color); + font-size: var(--global-font-size); + border-bottom: var(--style-border-always); +} +#article-container .highlight-tools.closed { + border-bottom: 1px solid transparent; + height: calc(2.15em - 1px); +} +#article-container .highlight-tools.closed ~ * { + display: none; +} +#article-container .highlight-tools.closed .expand { + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; + -webkit-transform: rotate(-90deg) !important; + -moz-transform: rotate(-90deg) !important; + -o-transform: rotate(-90deg) !important; + -ms-transform: rotate(-90deg) !important; + transform: rotate(-90deg) !important; +} +#article-container .highlight-tools .expand { + position: absolute; + padding: 0.57em 0.7em; + cursor: pointer; + -webkit-transition: -webkit-transform 0.3s; + -moz-transition: -moz-transform 0.3s; + -o-transition: -o-transform 0.3s; + -ms-transition: -ms-transform 0.3s; + transition: transform 0.3s; +} +#article-container .highlight-tools .expand + .code-lang { + left: 1.7em; +} +#article-container .highlight-tools .code-lang { + position: absolute; + left: 14px; + text-transform: uppercase; + font-weight: bold; + font-size: 1.15em; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +#article-container .highlight-tools .copy-notice { + position: absolute; + right: 2.4em; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: opacity 0.4s; + -moz-transition: opacity 0.4s; + -o-transition: opacity 0.4s; + -ms-transition: opacity 0.4s; + transition: opacity 0.4s; +} +#article-container .highlight-tools .copy-button { + position: absolute; + right: 14px; + cursor: pointer; + -webkit-transition: color 0.2s; + -moz-transition: color 0.2s; + -o-transition: color 0.2s; + -ms-transition: color 0.2s; + transition: color 0.2s; +} +#article-container .highlight-tools .copy-button:hover { + color: var(--anzhiyu-main); +} +#article-container .gutter { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +#article-container .gist table { + width: auto; +} +#article-container .gist table td { + border: none; +} +#article-container .code-expand-btn { + position: absolute; + bottom: 0px; + z-index: 10; + width: 100%; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; + font-size: 20px; + background: var(--anzhiyu-secondbg); + text-align: center; + font-size: var(--global-font-size); + cursor: pointer; + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -o-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + position: absolute; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + height: 32px; + font-size: 16px; +} +#article-container .code-expand-btn:hover { + background: var(--anzhiyu-main); +} +#article-container .code-expand-btn:hover i { + color: var(--anzhiyu-white); +} +#article-container .code-expand-btn i { + color: var(--anzhiyu-fontcolor); + -webkit-animation: 1.2s ease 0s infinite normal none running code-expand-key; + -moz-animation: 1.2s ease 0s infinite normal none running code-expand-key; + -o-animation: 1.2s ease 0s infinite normal none running code-expand-key; + -ms-animation: 1.2s ease 0s infinite normal none running code-expand-key; + animation: 1.2s ease 0s infinite normal none running code-expand-key; +} +#article-container .code-expand-btn.expand-done { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -o-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + -webkit-transition: all 0s, background 0.3s; + -moz-transition: all 0s, background 0.3s; + -o-transition: all 0s, background 0.3s; + -ms-transition: all 0s, background 0.3s; + transition: all 0s, background 0.3s; +} +#article-container .code-expand-btn.expand-done + table, +#article-container .code-expand-btn.expand-done + pre { + margin-bottom: 1.8em; +} +#article-container .code-expand-btn:not(.expand-done) ~ table, +#article-container .code-expand-btn:not(.expand-done) ~ pre { + overflow: hidden; + height: 330px; +} +@-moz-keyframes code-expand-key { + 0% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } + 50% { + opacity: 0.1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; + filter: alpha(opacity=10); + } + 100% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } +} +@-webkit-keyframes code-expand-key { + 0% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } + 50% { + opacity: 0.1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; + filter: alpha(opacity=10); + } + 100% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } +} +@-o-keyframes code-expand-key { + 0% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } + 50% { + opacity: 0.1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; + filter: alpha(opacity=10); + } + 100% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } +} +@keyframes code-expand-key { + 0% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } + 50% { + opacity: 0.1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; + filter: alpha(opacity=10); + } + 100% { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + } +} +.error404 #error-wrap { + position: absolute; + top: 50%; + right: 0; + left: 0; + margin: 0 auto; + padding: 60px 20px 0; + max-width: 1000px; + -webkit-transform: translate(0, -50%); + -moz-transform: translate(0, -50%); + -o-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); +} +.error404 #error-wrap .error-content { + overflow: hidden; + margin: 0 20px; + height: 360px; +} +@media screen and (max-width: 768px) { + .error404 #error-wrap .error-content { + margin: 0; + height: 500px; + } +} +.error404 #error-wrap .error-content .error-img { + display: inline-block; + overflow: hidden; + width: 50%; + height: 100%; +} +@media screen and (max-width: 768px) { + .error404 #error-wrap .error-content .error-img { + width: 100%; + height: 45%; + } +} +.error404 #error-wrap .error-content .error-img img { + background-color: #425aef; +} +.error404 #error-wrap .error-content .error-info { + display: -webkit-inline-box; + display: -moz-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-box; + display: inline-flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -ms-flex-line-pack: center; + -webkit-align-content: center; + align-content: center; + width: 50%; + height: 100%; + vertical-align: top; + text-align: center; + font-family: PingFang SC, 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif; +} +@media screen and (max-width: 768px) { + .error404 #error-wrap .error-content .error-info { + width: 100%; + height: 55%; + } +} +.error404 #error-wrap .error-content .error-info .error_title { + margin-top: -0.6em; + font-size: 9em; +} +@media screen and (max-width: 768px) { + .error404 #error-wrap .error-content .error-info .error_title { + font-size: 8em; + } +} +.error404 #error-wrap .error-content .error-info .error_subtitle { + margin-top: -3em; + word-break: break-word; + font-size: 1.6em; + -webkit-line-clamp: 2; +} +.error404 + #rightside { + display: none; +} +body[data-type='about'] #page { + border: 0; + -webkit-box-shadow: none !important; + box-shadow: none !important; + padding: 0 !important; + background: transparent !important; +} +body[data-type='about'] #page .page-title { + display: none; +} +body[data-type='about'] .page #footer-wrap { + opacity: 1; + -ms-filter: none; + filter: none; + overflow: visible; + height: auto !important; + min-height: 16px; + color: #666; +} +body[data-type='about'] #web_bg { + background: var(--anzhiyu-background); +} +#about-page { + padding-top: 1rem; +} +#about-page .author-box { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + margin: 0 0 16px 0; +} +#about-page .author-box .author-tag-left { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: end; + -moz-box-align: end; + -o-box-align: end; + -ms-flex-align: end; + -webkit-align-items: flex-end; + align-items: flex-end; +} +@media screen and (max-width: 768px) { + #about-page .author-box .author-tag-left { + display: none; + } +} +#about-page .author-box .author-tag-left .author-tag:first-child, +#about-page .author-box .author-tag-left .author-tag:last-child { + margin-right: -16px; +} +#about-page .author-box .author-tag-right { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -moz-box-align: start; + -o-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; +} +@media screen and (max-width: 768px) { + #about-page .author-box .author-tag-right { + display: none; + } +} +#about-page .author-box .author-tag-right .author-tag:first-child, +#about-page .author-box .author-tag-right .author-tag:last-child { + margin-left: -16px; +} +#about-page .author-box .author-tag { + -webkit-transform: translate(0, -4px); + -moz-transform: translate(0, -4px); + -o-transform: translate(0, -4px); + -ms-transform: translate(0, -4px); + transform: translate(0, -4px); + padding: 1px 8px; + background: var(--anzhiyu-card-bg); + border: var(--style-border-always); + border-radius: 40px; + margin-top: 6px; + font-size: 14px; + font-weight: 700; + -webkit-box-shadow: var(--anzhiyu-shadow-lightblack); + box-shadow: var(--anzhiyu-shadow-lightblack); + -webkit-animation: 6s ease-in-out 0s infinite normal none running floating; + -moz-animation: 6s ease-in-out 0s infinite normal none running floating; + -o-animation: 6s ease-in-out 0s infinite normal none running floating; + -ms-animation: 6s ease-in-out 0s infinite normal none running floating; + animation: 6s ease-in-out 0s infinite normal none running floating; +} +#about-page .author-box .author-tag:nth-child(1) { + -webkit-animation-delay: 0s; + -moz-animation-delay: 0s; + -o-animation-delay: 0s; + -ms-animation-delay: 0s; + animation-delay: 0s; +} +#about-page .author-box .author-tag:nth-child(2) { + -webkit-animation-delay: 0.6s; + -moz-animation-delay: 0.6s; + -o-animation-delay: 0.6s; + -ms-animation-delay: 0.6s; + animation-delay: 0.6s; +} +#about-page .author-box .author-tag:nth-child(3) { + -webkit-animation-delay: 1.2s; + -moz-animation-delay: 1.2s; + -o-animation-delay: 1.2s; + -ms-animation-delay: 1.2s; + animation-delay: 1.2s; +} +#about-page .author-box .author-tag:nth-child(4) { + -webkit-animation-delay: 1.8s; + -moz-animation-delay: 1.8s; + -o-animation-delay: 1.8s; + -ms-animation-delay: 1.8s; + animation-delay: 1.8s; +} +#about-page .author-box .author-img { + margin: 0 30px; + border-radius: 50%; + width: 180px; + height: 180px; + position: relative; + background: var(--anzhiyu-secondbg); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +@media screen and (max-width: 768px) { + #about-page .author-box .author-img { + width: 120px; + height: 120px; + } +} +#about-page .author-box .author-img img { + border-radius: 50%; + overflow: hidden; + width: 180px; + height: 180px; +} +@media screen and (max-width: 768px) { + #about-page .author-box .author-img img { + width: 120px; + height: 120px; + } +} +#about-page .author-box .author-img:hover { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} +#about-page .author-box .author-img:before { + content: ''; + -webkit-transition: 1s; + -moz-transition: 1s; + -o-transition: 1s; + -ms-transition: 1s; + transition: 1s; + width: 30px; + height: 30px; + background: var(--anzhiyu-green); + position: absolute; + border-radius: 50%; + border: 5px solid var(--anzhiyu-background); + bottom: 5px; + right: 10px; + z-index: 2; +} +@media screen and (max-width: 768px) { + #about-page .author-box .author-img:before { + bottom: -5px; + right: -5px; + } +} +.author-content { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + width: 100%; + margin-top: 1rem; +} +#about-page .myInfoAndSayHello { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + color: var(--anzhiyu-white); + background: -webkit-linear-gradient(330deg, #5b27ff 0, #00d4ff 100%); + background: -moz-linear-gradient(330deg, #5b27ff 0, #00d4ff 100%); + background: -o-linear-gradient(330deg, #5b27ff 0, #00d4ff 100%); + background: -ms-linear-gradient(330deg, #5b27ff 0, #00d4ff 100%); + background: linear-gradient(120deg, #5b27ff 0, #00d4ff 100%); + background-size: 200%; + -webkit-animation: gradient 15s ease infinite; + -moz-animation: gradient 15s ease infinite; + -o-animation: gradient 15s ease infinite; + -ms-animation: gradient 15s ease infinite; + animation: gradient 15s ease infinite; + width: 59%; +} +.author-content-item { + width: 49%; + border-radius: 24px; + background: var(--anzhiyu-card-bg); + border: var(--style-border-always); + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); + position: relative; + padding: 1rem 2rem; + overflow: hidden; +} +#about-page .myInfoAndSayHello .title1 { + opacity: 0.8; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + filter: alpha(opacity=80); + line-height: 1.3; +} +#about-page .myInfoAndSayHello .title2 { + font-size: 36px; + font-weight: 700; + line-height: 1.1; + margin: 0.5rem 0; +} +.inline-word { + word-break: keep-all; + white-space: nowrap; +} +#about-page .myInfoAndSayHello .title1 { + opacity: 0.8; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + filter: alpha(opacity=80); + line-height: 1.3; +} +.author-content-item.aboutsiteTips { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: start; + -moz-box-align: start; + -o-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + width: 39%; +} +.aboutsiteTips h2 { + margin-right: auto; + font-size: 36px; + font-family: Helvetica; + line-height: 1.06; + letter-spacing: -0.02em; + color: var(--font-color); + margin-top: 0; +} +.aboutsiteTips .mask { + height: 36px; + position: relative; + overflow: hidden; + margin-top: 4px; +} +.aboutsiteTips .mask span { + display: block; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + position: absolute; + top: 36px; + padding-bottom: var(--offset); + background-size: 100% 100%; + -webkit-background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-repeat: no-repeat; +} +.aboutsiteTips .mask span[data-show] { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -o-transform: translateY(-100%); + -ms-transform: translateY(-100%); + transform: translateY(-100%); + -webkit-transition: 0.5s -webkit-transform ease-in-out; + -moz-transition: 0.5s -moz-transform ease-in-out; + -o-transition: 0.5s -o-transform ease-in-out; + -ms-transition: 0.5s -ms-transform ease-in-out; + transition: 0.5s transform ease-in-out; +} +.aboutsiteTips .mask span[data-up] { + -webkit-transform: translateY(-200%); + -moz-transform: translateY(-200%); + -o-transform: translateY(-200%); + -ms-transform: translateY(-200%); + transform: translateY(-200%); + -webkit-transition: 0.5s -webkit-transform ease-in-out; + -moz-transition: 0.5s -moz-transform ease-in-out; + -o-transition: 0.5s -o-transform ease-in-out; + -ms-transition: 0.5s -ms-transform ease-in-out; + transition: 0.5s transform ease-in-out; +} +.aboutsiteTips .mask span:nth-child(1) { + background-image: -webkit-linear-gradient(45deg, #0ecffe 50%, #07a6f1); + background-image: -moz-linear-gradient(45deg, #0ecffe 50%, #07a6f1); + background-image: -o-linear-gradient(45deg, #0ecffe 50%, #07a6f1); + background-image: -ms-linear-gradient(45deg, #0ecffe 50%, #07a6f1); + background-image: linear-gradient(45deg, #0ecffe 50%, #07a6f1); +} +.aboutsiteTips .mask span:nth-child(2) { + background-image: -webkit-linear-gradient(45deg, #18e198 50%, #0ec15d); + background-image: -moz-linear-gradient(45deg, #18e198 50%, #0ec15d); + background-image: -o-linear-gradient(45deg, #18e198 50%, #0ec15d); + background-image: -ms-linear-gradient(45deg, #18e198 50%, #0ec15d); + background-image: linear-gradient(45deg, #18e198 50%, #0ec15d); +} +.aboutsiteTips .mask span:nth-child(3) { + background-image: -webkit-linear-gradient(45deg, #8a7cfb 50%, #633e9c); + background-image: -moz-linear-gradient(45deg, #8a7cfb 50%, #633e9c); + background-image: -o-linear-gradient(45deg, #8a7cfb 50%, #633e9c); + background-image: -ms-linear-gradient(45deg, #8a7cfb 50%, #633e9c); + background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c); +} +.aboutsiteTips .mask span:nth-child(4) { + background-image: -webkit-linear-gradient(45deg, #fa7671 50%, #f45f7f); + background-image: -moz-linear-gradient(45deg, #fa7671 50%, #f45f7f); + background-image: -o-linear-gradient(45deg, #fa7671 50%, #f45f7f); + background-image: -ms-linear-gradient(45deg, #fa7671 50%, #f45f7f); + background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f); +} +@media screen and (max-width: 768px) { + .author-content-item.map { + margin-bottom: 0; + } +} +#about-page .about-statistic { + min-height: 380px; + width: 39%; + background-size: cover; + color: var(--anzhiyu-white); + overflow: hidden; +} +#about-page .about-statistic::after { + -webkit-box-shadow: 0 -159px 173px 71px #0c1c2c inset; + box-shadow: 0 -159px 173px 71px #0c1c2c inset; + position: absolute; + content: ''; + width: 100%; + height: 100%; + top: 0; + left: 0; +} +.author-content-item .card-content { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 2; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + padding: 1rem 2rem; +} +.author-content-item .card-content .author-content-item-title { + margin-bottom: 0.5rem; +} +.author-content-item .author-content-item-title { + font-size: 36px; + font-weight: 700; + line-height: 1; +} +#statistic { + font-size: 16px; + border-radius: 15px; + width: 100%; + color: var(--anzhiyu-white); + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-top: 1rem; + margin-bottom: 2rem; +} +#statistic div span:first-child { + opacity: 0.8; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + filter: alpha(opacity=80); + font-size: 12px; +} +#statistic div span:last-child { + font-weight: 700; + font-size: 34px; + line-height: 1; + white-space: nowrap; +} +#statistic div { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + width: 50%; + margin-bottom: 0.5rem; +} +.post-tips { + color: var(--anzhiyu-gray); + font-size: 14px; + position: absolute; + bottom: 1rem; + left: 2rem; +} +.post-tips a { + color: var(--anzhiyu-gray) !important; + border: none !important; +} +.author-content-item .card-content .banner-button-group { + position: absolute; + bottom: 1.5rem; + right: 2rem; +} +.author-content-item .card-content .banner-button-group .banner-button { + height: 40px; + border-radius: 20px; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + background: var(--anzhiyu-white-op); + color: var(--anzhiyu-white); + display: -webkit-inline-box; + display: -moz-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-box; + display: inline-flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + z-index: 1; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + cursor: pointer; + border-bottom: 0 !important; + backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -o-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); +} +.author-content-item .card-content .banner-button-group .banner-button i, +.author-content-item .card-content .banner-button-group .banner-button svg { + margin-right: 0.25rem; + font-size: 22px; +} +.author-content-item .card-content .banner-button-group .banner-button .banner-button-text { + margin-left: 4px; +} +#about-page .author-content-item .card-content .banner-button-group .banner-button i, +#about-page .author-content-item .card-content .banner-button-group .banner-button svg { + font-size: 22px; + margin-right: 0.25rem; + height: 40px; + max-width: 40px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + border-radius: 50px; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} +.author-content-item .card-content .banner-button-group .banner-button:hover { + background: var(--anzhiyu-main); + color: var(--anzhiyu-white); + border-radius: 20px !important; +} +.author-content-item .card-content .banner-button-group .banner-button:hover i, +.author-content-item .card-content .banner-button-group .banner-button:hover svg .author-content-item.personalities { + background: none !important; +} +.author-content-item.personalities { + width: 59%; +} +.author-content-item.personalities .image { + position: absolute; + right: 30px; + top: 10px; + width: 220px; + -webkit-transition: -webkit-transform 2s cubic-bezier(0.13, 0.45, 0.21, 1.02); + -moz-transition: -moz-transform 2s cubic-bezier(0.13, 0.45, 0.21, 1.02); + -o-transition: -o-transform 2s cubic-bezier(0.13, 0.45, 0.21, 1.02); + -ms-transition: -ms-transform 2s cubic-bezier(0.13, 0.45, 0.21, 1.02); + transition: transform 2s cubic-bezier(0.13, 0.45, 0.21, 1.02); +} +.author-content-item.personalities .image img { + display: block; + margin: 0 auto 20px; + max-width: 100%; + -webkit-transition: filter 375ms ease-in 0.2s; + -moz-transition: filter 375ms ease-in 0.2s; + -o-transition: filter 375ms ease-in 0.2s; + -ms-transition: filter 375ms ease-in 0.2s; + transition: filter 375ms ease-in 0.2s; +} +.author-content-item.personalities:hover .image { + -webkit-transform: rotate(-10deg); + -moz-transform: rotate(-10deg); + -o-transform: rotate(-10deg); + -ms-transform: rotate(-10deg); + transform: rotate(-10deg); +} +.author-content-item.myphoto { + height: 60%; + min-height: 240px; + position: relative; + overflow: hidden; + width: 39%; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} +.author-content-item.myphoto img { + position: absolute; + min-width: 100%; + object-fit: cover; + -webkit-transition: 0.6s; + -moz-transition: 0.6s; + -o-transition: 0.6s; + -ms-transition: 0.6s; + transition: 0.6s; + -webkit-animation: coverIn 2s ease-out forwards; + -moz-animation: coverIn 2s ease-out forwards; + -o-animation: coverIn 2s ease-out forwards; + -ms-animation: coverIn 2s ease-out forwards; + animation: coverIn 2s ease-out forwards; + -webkit-transition: -webkit-transform 2s ease-out !important; + -moz-transition: -moz-transform 2s ease-out !important; + -o-transition: -o-transform 2s ease-out !important; + -ms-transition: -ms-transform 2s ease-out !important; + transition: transform 2s ease-out !important; +} +.author-content-item.myphoto:hover img { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} +.author-content-item:hover .card-background-icon { + -webkit-transform: rotate(20deg); + -moz-transform: rotate(20deg); + -o-transform: rotate(20deg); + -ms-transform: rotate(20deg); + transform: rotate(20deg); +} +.author-content-item.personalities .title2 { + font-size: 36px; + font-weight: 700; + line-height: 1.1; +} +.author-content-item.map { + min-height: 160px; + max-height: 400px; + position: relative; + overflow: hidden; + margin-bottom: 0.5rem; + height: 60%; + -webkit-transition: 1s ease-in-out; + -moz-transition: 1s ease-in-out; + -o-transition: 1s ease-in-out; + -ms-transition: 1s ease-in-out; + transition: 1s ease-in-out; + background-size: 100%; + background-repeat: no-repeat; + background-position: center; +} +.author-content-item.single { + width: 100%; +} +.author-content-item.map .map-title { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + color: var(--font-color); + background: var(--anzhiyu-maskbg); + padding: 0.5rem 2rem; + backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -o-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition: all 1s, color 0s ease-in-out; + -moz-transition: all 1s, color 0s ease-in-out; + -o-transition: all 1s, color 0s ease-in-out; + -ms-transition: all 1s, color 0s ease-in-out; + transition: all 1s, color 0s ease-in-out; + font-size: 20px; +} +.author-content-item.map .map-title b { + color: var(--font-color); +} +.author-content-item.selfInfo { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + min-height: 100px; + max-height: 400px; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + height: -webkit-fill-available; + height: 40%; +} +.author-content-item.selfInfo div { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin: 0.5rem 2rem 0.5rem 0; + min-width: 120px; +} +.author-content-item.selfInfo .selfInfo-title { + opacity: 0.8; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + filter: alpha(opacity=80); + font-size: 12px; + line-height: 1; + margin-bottom: 8px; +} +.author-content-item.selfInfo .selfInfo-content { + font-weight: 700; + font-size: 34px; + line-height: 1; +} +.author-content-item-group.column.mapAndInfo { + width: 59%; +} +.author-content-item.map:hover { + background-size: 120%; + -webkit-transition: 4s ease-in-out; + -moz-transition: 4s ease-in-out; + -o-transition: 4s ease-in-out; + -ms-transition: 4s ease-in-out; + transition: 4s ease-in-out; + background-position-x: 0; + background-position-y: 36%; +} +.author-content-item.map:hover .map-title { + bottom: -100%; +} +.author-content-item-group.column { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + width: 49%; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; +} +.post-tips a:hover { + color: var(--anzhiyu-main) !important; + background: none !important; +} +.author-content-item.single.reward .reward-list-updateDate { + color: var(--anzhiyu-gray); + font-size: 14px; +} +.author-content-item.maxim { + font-size: 36px; + font-weight: 700; + line-height: 1.1; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: start; + -moz-box-align: start; + -o-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + width: 39%; +} +.author-content-item .author-content-item-tips { + opacity: 0.8; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + filter: alpha(opacity=80); + font-size: 12px; + margin-bottom: 0.5rem; +} +.author-content-item.maxim .maxim-title { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +.author-content-item.buff { + height: 200px; + font-size: 36px; + font-weight: 700; + line-height: 1.1; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: start; + -moz-box-align: start; + -o-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + background: -webkit-linear-gradient(330deg, #ff27e8 0, #ff8000 100%); + background: -moz-linear-gradient(330deg, #ff27e8 0, #ff8000 100%); + background: -o-linear-gradient(330deg, #ff27e8 0, #ff8000 100%); + background: -ms-linear-gradient(330deg, #ff27e8 0, #ff8000 100%); + background: linear-gradient(120deg, #ff27e8 0, #ff8000 100%); + color: var(--anzhiyu-white); + background-size: 200%; + -webkit-animation: gradient 15s ease infinite; + -moz-animation: gradient 15s ease infinite; + -o-animation: gradient 15s ease infinite; + -ms-animation: gradient 15s ease infinite; + animation: gradient 15s ease infinite; + min-height: 200px; + height: fit-content; + width: 59%; +} +.author-content-item.buff .card-content { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} +.author-content-item.buff .buff-title { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +.card-background-icon { + font-size: 12rem; + opacity: 0.2; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; + filter: alpha(opacity=20); + position: absolute; + right: 0; + bottom: -40%; + -webkit-transform: rotate(30deg); + -moz-transform: rotate(30deg); + -o-transform: rotate(30deg); + -ms-transform: rotate(30deg); + transform: rotate(30deg); + -webkit-transition: 2s ease-in-out; + -moz-transition: 2s ease-in-out; + -o-transition: 2s ease-in-out; + -ms-transition: 2s ease-in-out; + transition: 2s ease-in-out; +} +.card-background-icon i { + font-size: 12rem; +} +.author-content-item.game-yuanshen { + background-size: cover; + min-height: 300px; + overflow: hidden; + color: var(--anzhiyu-white); + width: 59%; +} +.author-content-item .content-bottom { + margin-top: auto; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; +} +.author-content-item .content-bottom .icon-group { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + position: relative; +} +.author-content-item .content-bottom .icon-group i { + display: inline-block; + width: 143px; + height: 18px; + margin-right: 0.5rem; +} +.author-content-item.game-yuanshen::after { + -webkit-box-shadow: 0 -69px 203px 11px #575d8b inset; + box-shadow: 0 -69px 203px 11px #575d8b inset; + position: absolute; + content: ''; + width: 100%; + height: 100%; + top: 0; + left: 0; +} +.author-content-item.comic-content { + width: 39%; + min-height: 300px; + overflow: hidden; +} +.author-content-item.comic-content .comic-box { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + width: 120%; + height: 100%; + position: absolute; + left: 50%; + top: 0; + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + -o-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); +} +.author-content-item.comic-content .author-content-item-tips, +.author-content-item.comic-content .author-content-item-title { + z-index: 2; + color: var(--anzhiyu-white); + pointer-events: none; +} +.author-content-item.comic-content .comic-item { + height: 100%; + color: #fff; + width: 20%; + -webkit-transform: skew(-10deg, 0deg); + -moz-transform: skew(-10deg, 0deg); + -o-transform: skew(-10deg, 0deg); + -ms-transform: skew(-10deg, 0deg); + transform: skew(-10deg, 0deg); + -webkit-transition: 0.8s; + -moz-transition: 0.8s; + -o-transition: 0.8s; + -ms-transition: 0.8s; + transition: 0.8s; + position: relative; + overflow: hidden; +} +.author-content-item.comic-content .comic-item:hover { + width: 46%; +} +.author-content-item.comic-content .comic-item:hover .comic-item-cover { + left: 16%; + -webkit-transform: skew(10deg, 0deg) scale(1.6); + -moz-transform: skew(10deg, 0deg) scale(1.6); + -o-transform: skew(10deg, 0deg) scale(1.6); + -ms-transform: skew(10deg, 0deg) scale(1.6); + transform: skew(10deg, 0deg) scale(1.6); +} +.author-content-item.comic-content .comic-item .comic-item-cover { + position: absolute; + top: 0; + left: -50%; + height: 100%; + -webkit-transform: skew(10deg, 0deg); + -moz-transform: skew(10deg, 0deg); + -o-transform: skew(10deg, 0deg); + -ms-transform: skew(10deg, 0deg); + transform: skew(10deg, 0deg); + object-fit: cover; + -webkit-transition: scale 0.2s, all 0.8s; + -moz-transition: scale 0.2s, all 0.8s; + -o-transition: scale 0.2s, all 0.8s; + -ms-transition: scale 0.2s, all 0.8s; + transition: scale 0.2s, all 0.8s; +} +.author-content-item.comic-content .comic-item .comic-item-cover img { + height: 100%; + -webkit-transition: 0.8s; + -moz-transition: 0.8s; + -o-transition: 0.8s; + -ms-transition: 0.8s; + transition: 0.8s; + max-width: none; + border-radius: 0px; +} +.author-content-item.comic-content::after { + -webkit-box-shadow: 0 -48px 203px 11px #fbe9b8 inset; + box-shadow: 0 -48px 203px 11px #fbe9b8 inset; + position: absolute; + content: ''; + width: 100%; + height: 100%; + top: 0; + left: 0; +} +.author-content-item.like-technology { + min-height: 230px; + color: var(--anzhiyu-white); +} +.author-content-item.like-music { + min-height: 400px; + color: var(--anzhiyu-white); + overflow: hidden; +} +.author-content-item.like-music::after { + -webkit-box-shadow: 0 -69px 203px 11px #453e38 inset; + box-shadow: 0 -69px 203px 11px #453e38 inset; + position: absolute; + content: ''; + width: 100%; + height: 100%; + top: 0; + left: 0; +} +@media screen and (max-width: 1200px) { + .author-content-item.personalities .image { + width: 180px; + } +} +@media screen and (max-width: 768px) { + #gitcalendar { + display: none; + } + [data-theme='dark'] .author-content-item .card-content .banner-button-group .banner-button { + color: var(--anzhiyu-black) !important; + } + .author-content-item .card-content .banner-button-group .banner-button:hover { + background: none !important; + } + .author-content-item.game-yuanshen .content-bottom { + padding-bottom: 10px; + } + .author-content-item.game-yuanshen .game-yuanshen-uid { + display: none; + } + .author-content { + margin-top: 0; + } + .author-content-item { + width: 100% !important; + margin-top: 1rem; + padding: 1rem; + } + .author-content-item.map { + margin-bottom: 0; + } + .author-content-item-group.column { + width: 100% !important; + } + .author-content-item.selfInfo { + height: 95%; + } + .author-content-item.personalities { + height: 200px; + } + .post-tips { + left: auto; + } + .author-content-item.personalities .image { + width: 125px; + } + .site-card-group > a { + width: 100% !important; + } + body[data-type='about'] .post-reward { + display: none; + } + .reward-list-item { + width: 100% !important; + } + .author-content-item .card-content .banner-button-group .banner-button-text { + display: none; + } + .author-content-item .card-content .banner-button-group { + right: 1rem; + bottom: 1rem; + } + .author-content-item .card-content .banner-button-group .banner-button { + background: none; + padding: 0; + width: auto; + backdrop-filter: unset; + } + .author-content-item .card-content .banner-button-group .banner-button i, + .author-content-item .card-content .banner-button-group .banner-button svg { + margin-right: 0.25rem; + font-size: 1.5rem; + background: #fff; + border-radius: 50%; + padding: 6px; + margin-left: 80px; + height: 40px; + width: 40px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + color: var(--anzhiyu-fontcolor); + } + .author-content-item .card-content .banner-button-group .banner-button:hover i { + background: var(--anzhiyu-background) !important; + color: var(--anzhiyu-theme); + } + #selfInfo-content-year { + width: 90px; + } +} +@media screen and (min-width: 768px) and (max-width: 896px) { + .author-content-item.like-music .content-bottom .tips { + display: none; + } +} +.reward-list-all { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + margin-top: 1rem; + margin-bottom: 0.5rem; + margin-left: -0.25rem; + margin-right: -0.25rem; +} +.reward-list-item { + padding: 1rem; + border-radius: 12px; + border: var(--style-border-always); + width: calc((100% / 5) - 0.5rem); + margin: 0 0.25rem 0.5rem 0.25rem; + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); +} +@media screen and (max-width: 1200px) { + .reward-list-item { + width: calc((100% / 3) - 0.5rem); + } +} +.reward-list-item .reward-list-item-name { + font-size: 1rem; + font-weight: 700; + line-height: 1; + margin-bottom: 0.5rem; +} +.reward-list-item .reward-list-bottom-group { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; +} +.reward-list-item .reward-list-item-money { + padding: 4px; + background: var(--font-color); + color: var(--card-bg); + font-size: 12px; + line-height: 1; + border-radius: 4px; + margin-right: 4px; + white-space: nowrap; +} +.reward-list-item .reward-list-item-time { + font-size: 12px; + color: var(--anzhiyu-secondtext); + white-space: nowrap; +} +.skills { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: start; + -moz-box-align: start; + -o-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + width: 50%; + min-height: 450px; +} +.skills .skill-icon { + width: 32px; + height: 32px; + border-radius: 32px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + margin-right: 8px; +} +.skills .skills-list { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + position: absolute; + width: 100%; + top: 0; + left: 0; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + margin-top: 10px; +} +.skills .skill-info { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + margin-right: 10px; + margin-top: 10px; + background: var(--anzhiyu-background); + border-radius: 40px; + padding: 4px 12px 4px 8px; + border: var(--style-border); + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); +} +.skills .skill-icon img { + width: 18px; + height: 18px; + margin: 0 auto !important; +} +.skills .skills-style-group { + position: relative; +} +.author-content-item.skills .skills-style-group { + position: relative; +} +.skills:hover .skills-style-group #skills-tags-group-all { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); +} +.skills:hover .skills-style-group .skills-list { + opacity: 1; + -ms-filter: none; + filter: none; +} +.author-content-item.careers { + min-height: 400px; + background-size: contain; + background-repeat: no-repeat; + background-position-x: right; + background-position-y: bottom; +} +.author-content-item.careers .careers-group { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: 100%; + margin-top: 12px; + margin-bottom: 12px; +} +.author-content-item.careers .career-item { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: start; + -moz-box-pack: start; + -o-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +.author-content-item.careers .career-item .circle { + width: 16px; + height: 16px; + margin-top: 3px; + margin-right: 8px; + border-radius: 50%; +} +.author-content-item.careers .career-item .text { + color: var(--anzhiyu-secondtext); +} +.author-content-item.careers .careers-item { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +.author-content-item.careers .careers-item .circle { + width: 16px; + height: 16px; + margin-right: 8px; + border-radius: 16px; +} +.author-content-item.careers .careers-item .name { + color: var(--anzhiyu-secondtext); +} +.author-content-item.careers img { + position: absolute; + left: 0; + bottom: 20px; + width: 100%; + -webkit-transition: 0.6s; + -moz-transition: 0.6s; + -o-transition: 0.6s; + -ms-transition: 0.6s; + transition: 0.6s; + z-index: -1; +} +:root { + --loadingbar-background-color: #2c2b30; + --loadingbar-prospect-color: #ece5d8; +} +.loading-bar { + position: absolute; + top: 50%; + left: 50%; + width: 500px; + height: 62.5px; + -webkit-transform: translate(-25%, -50%) scale(0.5); + -moz-transform: translate(-25%, -50%) scale(0.5); + -o-transform: translate(-25%, -50%) scale(0.5); + -ms-transform: translate(-25%, -50%) scale(0.5); + transform: translate(-25%, -50%) scale(0.5); + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -ms-transition: all 0.5s; + transition: all 0.5s; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + overflow: hidden; +} +.loading-bar::after { + content: ''; + position: absolute; + top: 500px; + left: 0; + filter: drop-shadow(0 -500px 0 var(--loadingbar-prospect-color)); + width: 500px; + height: 62.5px; + background: url("https://yuanshen.site/imgs/loading-bar.png") no-repeat left 100%; + background-size: 500px 62.5px; + background-position-x: 0; +} +.author-content-item.game-yuanshen:hover .loading-bar::after { + -webkit-animation: loading-bar 3.5s cubic-bezier(0.28, 0.11, 0.32, 1) infinite forwards; + -moz-animation: loading-bar 3.5s cubic-bezier(0.28, 0.11, 0.32, 1) infinite forwards; + -o-animation: loading-bar 3.5s cubic-bezier(0.28, 0.11, 0.32, 1) infinite forwards; + -ms-animation: loading-bar 3.5s cubic-bezier(0.28, 0.11, 0.32, 1) infinite forwards; + animation: loading-bar 3.5s cubic-bezier(0.28, 0.11, 0.32, 1) infinite forwards; +} +@media screen and (max-width: 719px) { + .loading-bar .loading-bar { + display: none; + } +} +@media screen and (max-width: 719px) and (orientation: landscape) { + .loading-bar .loading-bar { + display: block !important; + -webkit-transform: translate(-50%, -50%) scale(0.7) !important; + -moz-transform: translate(-50%, -50%) scale(0.7) !important; + -o-transform: translate(-50%, -50%) scale(0.7) !important; + -ms-transform: translate(-50%, -50%) scale(0.7) !important; + transform: translate(-50%, -50%) scale(0.7) !important; + } +} +@supports not (filter: drop-shadow(0 0 0 #fff)) { + .loading-bar:before { + content: 'Your browser does not support the animation'; + } +} +.hello-about { + margin: 20px auto; + border-radius: 24px; + background: var(--anzhiyu-card-bg); + border: var(--style-border-always); + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); + position: relative; + overflow: hidden; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.shapes { + position: relative; + height: 315px; + width: 100%; + background: #2128bd; + overflow: hidden; +} +.shape { + will-change: transform; + position: absolute; + border-radius: 50%; +} +.shape.shape-1 { + background: #005ffe; + width: 650px; + height: 650px; + margin: -325px 0 0 -325px; +} +.shape.shape-2 { + background: #ffe5e3; + width: 440px; + height: 440px; + margin: -220px 0 0 -220px; +} +.shape.shape-3 { + background: #ffcc57; + width: 270px; + height: 270px; + margin: -135px 0 0 -135px; +} +.hello-about .content { + top: 0; + left: 0; + position: absolute; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + height: 315px; + width: 100%; + background: #fff; + mix-blend-mode: screen; +} +[data-theme='dark'] .hello-about .content { + background: transparent; +} +[data-theme='dark'] .hello-about h1 { + color: var(--anzhiyu-white); +} +.hello-about h1 { + font-size: 200px; + color: #000; + margin: 0; + text-align: center; + font: inherit; + vertical-align: baseline; + line-height: 1; + font-size: calc(0.0989119683 * 100vw + 58.5558852621px); + width: 100%; + height: 100%; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} +@media (min-width: 419px) { + .hello-about h1 { + font-size: calc(0.0989119683 * 100vw + 58.5558852621px); + } +} +@media (max-width: 768px) { + .hello-about { + margin: 20px 0 auto; + } +} +.cursor { + position: absolute; + background: #2128bd; + width: 20px; + height: 20px; + margin: -10px 0 0 -10px; + border-radius: 50%; + will-change: transform; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + pointer-events: none; + z-index: 3; +} +#about-page .author-content-item-group.column.mapAndInfo { + width: 100%; +} +#about-page .author-content-item-group.column { + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} +#about-page .author-content-item.map { + width: 50%; +} +#about-page .author-content-item.selfInfo { + height: 100%; + width: 49%; +} +@-moz-keyframes loading-bar { + 0% { + width: 0; + background-size: 500px 62.5px; + } + 83% { + width: 475px; + } + 83.1% { + width: 475px; + } + 83.2% { + width: 475px; + } + 83.3% { + width: 475px; + } + 83.4% { + width: 475px; + } + 83.5% { + width: 475px; + } + 83.6% { + width: 475px; + } + 83.7% { + width: 475px; + } + 83.8% { + width: 475px; + } + 83.9% { + width: 475px; + } + 84% { + width: 475px; + } + 85% { + width: 475px; + } + 86% { + width: 475px; + } + 87% { + width: 475px; + } + 100% { + width: 500px; + } +} +@-webkit-keyframes loading-bar { + 0% { + width: 0; + background-size: 500px 62.5px; + } + 83% { + width: 475px; + } + 83.1% { + width: 475px; + } + 83.2% { + width: 475px; + } + 83.3% { + width: 475px; + } + 83.4% { + width: 475px; + } + 83.5% { + width: 475px; + } + 83.6% { + width: 475px; + } + 83.7% { + width: 475px; + } + 83.8% { + width: 475px; + } + 83.9% { + width: 475px; + } + 84% { + width: 475px; + } + 85% { + width: 475px; + } + 86% { + width: 475px; + } + 87% { + width: 475px; + } + 100% { + width: 500px; + } +} +@-o-keyframes loading-bar { + 0% { + width: 0; + background-size: 500px 62.5px; + } + 83% { + width: 475px; + } + 83.1% { + width: 475px; + } + 83.2% { + width: 475px; + } + 83.3% { + width: 475px; + } + 83.4% { + width: 475px; + } + 83.5% { + width: 475px; + } + 83.6% { + width: 475px; + } + 83.7% { + width: 475px; + } + 83.8% { + width: 475px; + } + 83.9% { + width: 475px; + } + 84% { + width: 475px; + } + 85% { + width: 475px; + } + 86% { + width: 475px; + } + 87% { + width: 475px; + } + 100% { + width: 500px; + } +} +@keyframes loading-bar { + 0% { + width: 0; + background-size: 500px 62.5px; + } + 83% { + width: 475px; + } + 83.1% { + width: 475px; + } + 83.2% { + width: 475px; + } + 83.3% { + width: 475px; + } + 83.4% { + width: 475px; + } + 83.5% { + width: 475px; + } + 83.6% { + width: 475px; + } + 83.7% { + width: 475px; + } + 83.8% { + width: 475px; + } + 83.9% { + width: 475px; + } + 84% { + width: 475px; + } + 85% { + width: 475px; + } + 86% { + width: 475px; + } + 87% { + width: 475px; + } + 100% { + width: 500px; + } +} +.article-sort { + margin: 0.25rem; +} +.article-sort-title { + margin: 0.25rem; + padding: 0; + border: none; + font-weight: bold; + font-size: 2em; +} +.article-sort-item { + position: relative; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-transition: all 0.2s ease-in-out 0s; + -moz-transition: all 0.2s ease-in-out 0s; + -o-transition: all 0.2s ease-in-out 0s; + -ms-transition: all 0.2s ease-in-out 0s; + transition: all 0.2s ease-in-out 0s; + border: none; + margin: 0 0 1rem 0rem; + overflow: hidden; + border-radius: 12px; +} +.article-sort-item.no-article-cover { + height: 80px; +} +.article-sort-item.no-article-cover .article-sort-item-info { + padding: 0; +} +.article-sort-item.year { + font-size: 1rem; + color: var(--anzhiyu-secondtext); + margin-bottom: 0.25rem; +} +.article-sort-item.year:hover:before { + border-color: #425aef; +} +.article-sort-item.year:before { + border-color: var(--pseudo-hover); +} +.article-sort-item-time { + color: var(--anzhiyu-fontcolor); + font-size: 95%; +} +.article-sort-item-time time { + padding-left: 6px; + cursor: default; +} +.article-sort-item-title { + color: var(--font-color); + font-size: 1.1em; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; + -webkit-line-clamp: 1; + margin-right: auto; + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + -webkit-box-ordinal-group: 0; + -moz-box-ordinal-group: 0; + -o-box-ordinal-group: 0; + -ms-flex-order: 0; + -webkit-order: 0; + order: 0; + font-weight: bold; + line-height: 1.3; +} +.article-sort-item-title:hover { + color: var(--anzhiyu-lighttext); +} +.article-sort-item-index { + opacity: 0.5; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); + position: absolute; + top: 0.5rem; + right: 0.5rem; + font-style: italic; + font-size: 2.5rem; + line-height: 1.5rem; +} +.article-sort-item-img { + overflow: hidden; + width: 151px; + height: 80px; + border-radius: 12px; + min-width: 151px; + min-height: 80px; + background: var(--anzhiyu-secondbg); + -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000); +} +.article-sort-item-info { + padding: 0 0.8rem; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + max-height: 80px; + height: 80px; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; +} +@media screen and (max-width: 768px) { + .article-sort-item-info .article-sort-item-index { + display: none; + } +} +.article-sort-item-info .article-sort-item-title { + height: 30%; +} +@media screen and (max-width: 768px) { + .article-sort-item-info .article-sort-item-title { + font-size: 0.9em; + height: 25%; + } +} +.article-sort-item-info .article-meta-wrap { + height: 35%; +} +.article-sort-item-info .article-meta-wrap .article-sort-item-tags a { + color: var(--anzhiyu-fontcolor); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + margin-right: auto; + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + padding: 0 0.2rem; + padding-left: 0; +} +.article-sort-item-info .article-meta-wrap .article-sort-item-tags a span { + font-size: 12px; + margin-right: 1px; + pointer-events: none; +} +.article-sort-item-info .article-meta-wrap .article-sort-item-time { + font-size: 12px; +} +.category-lists .category-title { + font-size: 2.57em; +} +@media screen and (max-width: 768px) { + .category-lists .category-title { + font-size: 2em; + } +} +.category-lists .category-list { + margin-bottom: 0; +} +.category-lists .category-list a { + color: var(--font-color); +} +.category-lists .category-list a:hover { + color: #425aef; +} +.category-lists .category-list .category-list-count { + margin-left: 8px; + color: var(--anzhiyu-fontcolor); +} +.category-lists .category-list .category-list-count:before { + content: '('; +} +.category-lists .category-list .category-list-count:after { + content: ')'; +} +.category-lists ul { + padding: 0 0 0 20px; +} +.category-lists ul ul { + padding-left: 4px; +} +.category-lists ul li { + position: relative; + margin: 6px 0; + padding: 0.12em 0.4em 0.12em 1.4em; +} +@media screen and (max-width: 768px) { + .post .layout#content-inner { + background: var(--anzhiyu-main); + } +} +#body-wrap { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + min-height: 100vh; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; +} +@media screen and (max-width: 768px) { + #body-wrap .layout { + padding: 0; + } + #body-wrap #archive { + background: var(--anzhiyu-background); + border: none; + padding-top: 0px; + } +} +.layout { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + box-flex: 1; + -webkit-flex: 1 auto; + -ms-flex: 1 auto; + flex: 1 auto; + margin: 0 auto; + padding: 1.25rem 1.5rem; + max-width: 1200px; + width: 100%; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} +@media screen and (max-width: 1200px) { + .layout { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + padding-top: 10px; + } +} +@media screen and (max-width: 768px) { + .layout { + padding: 20px 15px; + z-index: 3; + } +} +@media screen and (min-width: 2000px) { + .layout { + max-width: 1700px; + } +} +.layout > div:first-child:not(.recent-posts) { + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); + padding: 2rem 2.5rem; + border-radius: 12px; + background: var(--anzhiyu-card-bg); + border: var(--style-border); + width: calc(100% - 300px); + -webkit-align-self: flex-start; + align-self: flex-start; + -ms-flex-item-align: start; + -webkit-animation: slide-in 0.6s 0.1s backwards; + -moz-animation: slide-in 0.6s 0.1s backwards; + -o-animation: slide-in 0.6s 0.1s backwards; + -ms-animation: slide-in 0.6s 0.1s backwards; + animation: slide-in 0.6s 0.1s backwards; +} +@media screen and (max-width: 768px) { + .layout > div:first-child:not(.recent-posts) { + padding: 1rem 1rem; + -webkit-box-shadow: none; + box-shadow: none; + background: var(--anzhiyu-background); + } +} +.layout > div:first-child { + width: calc(100% - 300px); + -webkit-transition: all 0.3s ease 0s; + -moz-transition: all 0.3s ease 0s; + -o-transition: all 0.3s ease 0s; + -ms-transition: all 0.3s ease 0s; + transition: all 0.3s ease 0s; +} +@media screen and (max-width: 900px) { + .layout > div:first-child { + width: 100% !important; + } +} +.layout.hide-aside { + max-width: 1000px; +} +@media screen and (min-width: 2000px) { + .layout.hide-aside { + max-width: 1200px; + } +} +.layout.hide-aside > div { + width: 100% !important; +} +.apple #page-header.full_page { + background-attachment: scroll !important; +} +.apple .recent-post-item, +.apple .avatar-img, +.apple .flink-item-icon { + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -o-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); +} +.goodthings-title { + margin: 1rem 0; + line-height: 1; +} +.equipment-item .equipment-item-content { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin: 0 -8px; +} +.equipment-item .equipment-item-content .equipment-item-content-item { + width: calc(25% - 12px); + border-radius: 12px; + border: var(--style-border-always); + overflow: hidden; + margin: 8px 6px; + background: var(--anzhiyu-card-bg); + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); + min-height: 400px; + position: relative; +} +@media screen and (max-width: 1200px) { + .equipment-item .equipment-item-content .equipment-item-content-item { + width: calc(50% - 12px); + } +} +@media screen and (max-width: 768px) { + .equipment-item .equipment-item-content .equipment-item-content-item { + width: 100%; + } +} +.equipment-item .equipment-item-content .equipment-item-content-item .equipment-item-content-item-info { + padding: 8px 16px 16px 16px; + margin-top: 12px; +} +.equipment-item .equipment-item-content .equipment-item-content-item .equipment-item-content-item-name { + font-size: 18px; + font-weight: bold; + line-height: 1; + margin-bottom: 8px; + white-space: nowrap; + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + width: fit-content; + cursor: pointer; +} +.equipment-item .equipment-item-content .equipment-item-content-item .equipment-item-content-item-name:hover { + color: var(--anzhiyu-main); +} +.equipment-item .equipment-item-content .equipment-item-content-item .equipment-item-content-item-specification { + font-size: 12px; + color: var(--anzhiyu-secondtext); + line-height: 16px; + margin-bottom: 5px; + white-space: nowrap; + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; +} +.equipment-item .equipment-item-content .equipment-item-content-item .equipment-item-content-item-description { + line-height: 20px; + color: var(--anzhiyu-secondtext); + height: 60px; + display: -webkit-box; + overflow: hidden; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + font-size: 14px; +} +.equipment-item .equipment-item-content .equipment-item-content-item a.equipment-item-content-item-link { + font-size: 12px; + background: var(--anzhiyu-gray-op); + padding: 4px 8px; + border-radius: 8px; + cursor: pointer; +} +.equipment-item .equipment-item-content .equipment-item-content-item a.equipment-item-content-item-link:hover { + background: var(--anzhiyu-main); + color: var(--anzhiyu-white); +} +.equipment-item .equipment-item-content .equipment-item-content-item .equipment-item-content-item-cover { + width: 100%; + height: 200px; + background: var(--anzhiyu-secondbg); + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +.equipment-item .equipment-item-content .equipment-item-content-item img.equipment-item-content-item-image { + object-fit: contain; + height: 80%; + width: 260px; +} +.equipment-item .equipment-item-content .equipment-item-content-item .equipment-item-content-item-toolbar { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + position: absolute; + bottom: 12px; + left: 0; + width: 100%; + padding: 0 16px; +} +body[data-type="equipment"] #web_bg { + background: var(--anzhiyu-background); +} +body[data-type="equipment"] #page { + border: 0; + -webkit-box-shadow: none !important; + box-shadow: none !important; + padding: 0 !important; + background: 0 0 !important; +} +body[data-type="equipment"] #page .page-title { + display: none; +} +body[data-type="link"] #page .page-title { + display: none; +} +#flink-banners { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + width: 100%; + height: 76%; + background: var(--anzhiyu-card-bg); + padding: 1.5rem; + border: var(--style-border); + border-radius: 12px; + overflow: hidden; + position: relative; + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + overflow: hidden; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + will-change: transform; + -webkit-animation: slide-in 0.6s 0.2s backwards; + -moz-animation: slide-in 0.6s 0.2s backwards; + -o-animation: slide-in 0.6s 0.2s backwards; + -ms-animation: slide-in 0.6s 0.2s backwards; + animation: slide-in 0.6s 0.2s backwards; +} +#flink-banners .flink .banners-title { + top: 1.5rem; +} +#flink-banners .banner-top-box { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; +} +#flink-banners .banner-button-group { + position: absolute; + right: 2rem; + top: 2.5rem; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; +} +@media screen and (max-width: 768px) { + #flink-banners .banner-button-group { + display: none; + } +} +#flink-banners .banner-button-group .banner-button { + color: var(--anzhiyu-card-bg); +} +#flink-banners .banner-button-group .banner-button.secondary { + color: var(--anzhiyu-fontcolor); +} +#flink-banners .banner-button-group .banner-button:hover { + background: var(--anzhiyu-theme); + color: var(--anzhiyu-white); +} +#flink-banners .banner-button-group .banner-button i { + margin-right: 8px; + font-size: 1rem; +} +#flink-banners #skills-tags-group-all .img-alt { + display: none; +} +#flink-banners #skills-tags-group-all .tags-group-wrapper { + -webkit-animation: rowup 120s linear infinite; + -moz-animation: rowup 120s linear infinite; + -o-animation: rowup 120s linear infinite; + -ms-animation: rowup 120s linear infinite; + animation: rowup 120s linear infinite; +} +#flink-banners #skills-tags-group-all .tags-group-icon { + border-radius: 50%; +} +#flink-banners #skills-tags-group-all .tags-group-icon img { + min-width: 100%; + min-height: 100%; + border-radius: 50%; + object-fit: cover; +} +.flink-desc { + margin: 0.2rem 0 0.5rem; +} +#article-container .anzhiyu-flink-list { + overflow: auto; + margin: -6px; + text-align: center; +} +#article-container .anzhiyu-flink-list .img-alt { + display: none; +} +#article-container .anzhiyu-flink-list.cf-friends-lost-contact .flink-list-item { + height: 60px; +} +#article-container .anzhiyu-flink-list.cf-friends-lost-contact .flink-list-item:hover .cf-friends-link img { + width: 0; + height: 0; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + margin: 0.5rem; + min-width: 0px; + min-height: 0px; +} +#article-container .anzhiyu-flink-list.cf-friends-lost-contact .flink-list-item .cf-friends-link img { + width: 30px; + height: 30px; + min-width: 30px; + min-height: 30px; +} +#article-container .anzhiyu-flink-list .flink-list-item { + margin: 6px 6px; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + border-radius: 12px; + -webkit-transition-timing-function: ease-in-out; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -ms-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + position: relative; + width: calc(20% - 12px); + border: var(--style-border); + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); + background: var(--anzhiyu-card-bg); + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + float: left; + overflow: hidden; + height: 90px; + line-height: 17px; + -webkit-transform: translateZ(0px); + -moz-transform: translateZ(0px); + -o-transform: translateZ(0px); + -ms-transform: translateZ(0px); + transform: translateZ(0px); +} +#article-container .anzhiyu-flink-list .flink-list-item .cf-friends-link { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + border: none; + width: 100%; + height: 100%; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + color: var(--anzhiyu-fontcolor); + text-decoration: none; + font-weight: bold; + padding: 0 4px; + border-radius: 4px 4px 0 0; +} +#article-container .anzhiyu-flink-list .flink-list-item .cf-friends-link img { + border-radius: 32px; + margin: 15px 20px 15px 15px; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + background: var(--anzhiyu-background); + min-width: 60px; + min-height: 60px; + width: 60px; + height: 60px; + float: left; + object-fit: cover; +} +@media screen and (max-width: 1200px) { + #article-container .anzhiyu-flink-list .flink-list-item { + width: calc(50% - 15px) !important; + } +} +@media screen and (max-width: 600px) { + #article-container .anzhiyu-flink-list .flink-list-item { + width: calc(100% - 15px) !important; + } +} +#article-container .anzhiyu-flink-list .flink-list-item:hover:before, +#article-container .anzhiyu-flink-list .flink-list-item:focus:before, +#article-container .anzhiyu-flink-list .flink-list-item:active:before { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} +#article-container .anzhiyu-flink-list .flink-list-item .flink-item-info { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + width: calc(100% - 90px); + height: fit-content; +} +#article-container .anzhiyu-flink-list .flink-list-item .flink-item-info .flink-item-name { + text-align: left; + line-height: 20px; + color: var(--anzhiyu-fontcolor); + display: block; + padding: 0px 10px 0px 0px; + font-weight: 700; + font-size: 19px; + max-width: calc(100% - 12px); + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + white-space: nowrap; +} +#article-container .anzhiyu-flink-list .flink-list-item .flink-item-info .flink-item-desc { + white-space: normal; + padding: 5px 10px 16px 0; + color: var(--anzhiyu-fontcolor); + text-align: left; + font-size: 0.93em; + height: 40px; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + opacity: 0.7; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; + filter: alpha(opacity=70); + display: -webkit-box; + overflow: hidden; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} +#article-container .anzhiyu-flink-list .flink-list-item:hover { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + background: var(--anzhiyu-theme); + border: var(--style-border-hover); + -webkit-box-shadow: var(--anzhiyu-shadow-main); + box-shadow: var(--anzhiyu-shadow-main); +} +#article-container .anzhiyu-flink-list .flink-list-item:hover .site-card-tag { + left: -70px; +} +#article-container .anzhiyu-flink-list .flink-list-item:hover a img { + -webkit-transition: 0.6s; + -moz-transition: 0.6s; + -o-transition: 0.6s; + -ms-transition: 0.6s; + transition: 0.6s; + width: 0; + height: 0; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + margin: 0.5rem; + min-width: 0px; + min-height: 0px; +} +#article-container .anzhiyu-flink-list .flink-list-item:hover a .flink-item-info { + min-width: calc(100% - 20px); +} +#article-container .anzhiyu-flink-list .flink-list-item:hover a .flink-item-name { + color: var(--anzhiyu-white); +} +#article-container .anzhiyu-flink-list .flink-list-item:hover a .flink-item-desc { + overflow: hidden; + width: 100%; + color: var(--anzhiyu-white); +} +.flink-name { + margin-bottom: 5px; + font-weight: bold; + font-size: 1.5em; +} +#article-container img { + margin-bottom: 0.5rem; + object-fit: cover; + max-height: 900px; +} +.flexcard-flink-list { + overflow: hidden; +} +.flexcard-flink-list .flink-list-card .wrapper img { + -webkit-transition: -webkit-transform 0.5s ease-out !important; + -moz-transition: -moz-transform 0.5s ease-out !important; + -o-transition: -o-transform 0.5s ease-out !important; + -ms-transition: -ms-transform 0.5s ease-out !important; + transition: transform 0.5s ease-out !important; +} +.flexcard-flink-list .flink-list-card:hover { + border-color: var(--anzhiyu-main) !important; + background-color: var(--anzhiyu-main) !important; + -webkit-box-shadow: var(--anzhiyu-shadow-theme) !important; + box-shadow: var(--anzhiyu-shadow-theme) !important; +} +.flexcard-flink-list > a { + width: calc(100% / 5 - 0.5rem); + height: 150px; + position: relative; + display: block; + margin: 0.5rem 0.25rem; + float: left; + overflow: hidden; + padding: 0; + border-radius: 8px; + -webkit-transition: all 0.3s ease 0s, -webkit-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; + -moz-transition: all 0.3s ease 0s, -moz-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; + -o-transition: all 0.3s ease 0s, -o-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; + -ms-transition: all 0.3s ease 0s, -ms-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; + transition: all 0.3s ease 0s, transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; + -webkit-box-shadow: none; + box-shadow: none; + border: var(--style-border) !important; +} +.flexcard-flink-list > a:hover .info { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -o-transform: translateY(-100%); + -ms-transform: translateY(-100%); + transform: translateY(-100%); +} +.flexcard-flink-list > a:hover .wrapper img { + -webkit-transform: scale(1.2); + -moz-transform: scale(1.2); + -o-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); +} +.flexcard-flink-list > a:hover::before { + position: fixed; + width: inherit; + margin: auto; + left: 0; + right: 0; + top: 10%; + border-radius: 10px; + text-align: center; + z-index: 100; + content: attr(data-title); + font-size: 20px; + color: #fff; + padding: 10px; + background-color: rgba(66,90,239,0.8); +} +.flexcard-flink-list > a .cover { + width: 100%; + -webkit-transition: -webkit-transform 0.5s ease-out; + -moz-transition: -moz-transform 0.5s ease-out; + -o-transition: -o-transform 0.5s ease-out; + -ms-transition: -ms-transform 0.5s ease-out; + transition: transform 0.5s ease-out; +} +.flexcard-flink-list > a .wrapper { + position: relative; +} +.flexcard-flink-list > a .wrapper .fadeIn { + -webkit-animation: coverIn 0.8s ease-out forwards; + -moz-animation: coverIn 0.8s ease-out forwards; + -o-animation: coverIn 0.8s ease-out forwards; + -ms-animation: coverIn 0.8s ease-out forwards; + animation: coverIn 0.8s ease-out forwards; +} +.flexcard-flink-list > a .wrapper img { + height: 150px; + pointer-events: none; +} +.flexcard-flink-list > a .info { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + width: 100%; + height: 100%; + overflow: hidden; + border-radius: 3px; + background-color: rgba(255,255,255,0.7); + -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; + -moz-transition: -moz-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; + -o-transition: -o-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; + -ms-transition: -ms-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; + transition: transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; +} +.flexcard-flink-list > a .info img { + position: relative; + top: 45px; + width: 80px; + height: 80px; + border-radius: 50% !important; + -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3); + box-shadow: 0 0 10px rgba(0,0,0,0.3); + z-index: 1; + text-align: center; + pointer-events: none; +} +.flexcard-flink-list > a .info span { + padding: 20px 10% 60px 10%; + font-size: 16px; + width: 100%; + text-align: center; + -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3); + box-shadow: 0 0 10px rgba(0,0,0,0.3); + background-color: rgba(255,255,255,0.7); + color: var(--font-color); + white-space: nowrap; + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; +} +.flexcard-flink-list>a .info, +.flexcard-flink-list>a .wrapper .cover { + position: absolute; + top: 0; + left: 0; +} +@media screen and (max-width: 1024px) { + .flexcard-flink-list > a { + width: calc(33.33333% - 15px); + } +} +@media screen and (max-width: 600px) { + .flexcard-flink-list > a { + width: calc(50% - 15px); + } +} +[data-theme=dark] .flexcard-flink-list a .info, +[data-theme=dark] .flexcard-flink-list a .info span { + background-color: rgba(0,0,0,0.6); +} +[data-theme=dark] .flexcard-flink-list > a:hover:before { + background-color: rgba(18,18,18,0.8); +} +.justified-gallery > div > img, +.justified-gallery > figure > img, +.justified-gallery > a > a > img, +.justified-gallery > div > a > img, +.justified-gallery > figure > a > img, +.justified-gallery > a > svg, +.justified-gallery > div > svg, +.justified-gallery > figure > svg, +.justified-gallery > a > a > svg, +.justified-gallery > div > a > svg, +.justified-gallery > figure > a > svg { + position: static !important; +} +.site-card-tag { + position: absolute; + top: 0; + left: 0; + padding: 4px 8px; + background-color: var(--anzhiyu-theme); + -webkit-box-shadow: var(--anzhiyu-shadow-blue); + box-shadow: var(--anzhiyu-shadow-blue); + color: var(--anzhiyu-white); + z-index: 1; + border-radius: 11px 0 12px 0; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + font-size: 12px; +} +.site-card-tag.speed { + background: var(--anzhiyu-green); + -webkit-box-shadow: var(--anzhiyu-shadow-green); + box-shadow: var(--anzhiyu-shadow-green); +} +.site-card-tag.vip { + background: -webkit-linear-gradient(52deg, #e5b085 0%, #d48f16 100%); + background: -moz-linear-gradient(52deg, #e5b085 0%, #d48f16 100%); + background: -o-linear-gradient(52deg, #e5b085 0%, #d48f16 100%); + background: -ms-linear-gradient(52deg, #e5b085 0%, #d48f16 100%); + background: linear-gradient(38deg, #e5b085 0%, #d48f16 100%); + overflow: hidden; + -webkit-box-shadow: var(--anzhiyu-shadow-yellow); + box-shadow: var(--anzhiyu-shadow-yellow); +} +.site-card-tag i.light { + cursor: pointer; + position: absolute; + top: 0; + width: 100px; + height: 50px; + background-image: -webkit--webkit-linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0)); + background-image: -webkit--moz-linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0)); + background-image: -webkit--o-linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0)); + background-image: -webkit--ms-linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0)); + background-image: -webkit-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0)); + -webkit-animation: light_tag 4s both infinite; + -moz-animation: light_tag 4s both infinite; + -o-animation: light_tag 4s both infinite; + -ms-animation: light_tag 4s both infinite; + animation: light_tag 4s both infinite; + will-change: transform; +} +#article-container .telescopic-site-card-group { + padding: 20px 0; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: start; + -webkit-box-pack: start; + -moz-box-pack: start; + -o-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + margin: -8px; + -webkit-box-align: stretch; + -webkit-box-align: stretch; + -moz-box-align: stretch; + -o-box-align: stretch; + -ms-flex-align: stretch; + -webkit-align-items: stretch; + align-items: stretch; +} +#article-container .telescopic-site-card-group .site-card { + border: var(--style-border); + border-radius: 12px; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + -webkit-transition-timing-function: ease-in-out; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -ms-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + overflow: hidden; + height: 200px; + position: relative; + width: calc(100% / 7 - 16px); + background: var(--anzhiyu-card-bg); + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); +} +#article-container .telescopic-site-card-group .site-card .img-alt { + display: none; +} +@media screen and (max-width: 1200px) { + #article-container .telescopic-site-card-group .site-card { + width: calc(20% - 16px) !important; + } +} +@media screen and (max-width: 900px) { + #article-container .telescopic-site-card-group .site-card { + width: calc(25% - 16px) !important; + } +} +@media screen and (max-width: 768px) { + #article-container .telescopic-site-card-group .site-card { + width: calc(33.3333% - 16px) !important; + } +} +@media screen and (max-width: 600px) { + #article-container .telescopic-site-card-group .site-card { + width: calc(50% - 16px) !important; + } +} +#article-container .telescopic-site-card-group .site-card:hover { + border: var(--style-border-hover); + -webkit-box-shadow: var(--anzhiyu-shadow-main); + box-shadow: var(--anzhiyu-shadow-main); +} +#article-container .telescopic-site-card-group .site-card:hover .info { + background: var(--anzhiyu-theme); + height: 120px; +} +#article-container .telescopic-site-card-group .site-card:hover .info .site-card-text .title { + color: var(--anzhiyu-white); +} +#article-container .telescopic-site-card-group .site-card:hover .info .site-card-text .desc { + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + color: var(--anzhiyu-white); + width: 100%; +} +@media screen and (min-width: 768px) { + #article-container .telescopic-site-card-group .site-card:hover .info .site-card-text .desc { + -webkit-line-clamp: 4; + } +} +#article-container .telescopic-site-card-group .site-card:hover .site-card-tag { + left: -50px; +} +#article-container .telescopic-site-card-group .site-card:hover .img { + height: 80px; +} +#article-container .telescopic-site-card-group .site-card:hover .img img { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); + filter: brightness(0.3); +} +#article-container .telescopic-site-card-group .site-card .info { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + border: none; + padding: 0.7rem; + width: 100%; + height: 90px; + margin: 0; + border-radius: 0 0 12px 12px; +} +#article-container .telescopic-site-card-group .site-card .info .site-card-text { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -moz-box-align: start; + -o-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; +} +#article-container .telescopic-site-card-group .site-card .info .site-card-text .title { + color: var(--anzhiyu-fontcolor); + text-align: left; + font-weight: 600; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 1; + -webkit-transition: all 0.3s ease 0s; + -moz-transition: all 0.3s ease 0s; + -o-transition: all 0.3s ease 0s; + -ms-transition: all 0.3s ease 0s; + transition: all 0.3s ease 0s; +} +#article-container .telescopic-site-card-group .site-card .info .site-card-text .desc { + font-size: 0.9rem; + color: var(--anzhiyu-fontcolor); + opacity: 0.7; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; + filter: alpha(opacity=70); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + text-align: left; + overflow-wrap: break-word; + line-height: 1.2; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 2; +} +#article-container .telescopic-site-card-group .site-card .info .img-alt { + display: none; +} +#article-container .telescopic-site-card-group .site-card .info img { + border-radius: 32px; + -webkit-transition: 0.3s !important; + -moz-transition: 0.3s !important; + -o-transition: 0.3s !important; + -ms-transition: 0.3s !important; + transition: 0.3s !important; + margin: 2px 8px 0 0; + width: 20px; + height: 20px; + min-width: 20px; + min-height: 20px; + background: var(--anzhiyu-secondbg); +} +#article-container .telescopic-site-card-group .site-card .img { + -webkit-mask-image: -webkit-radial-gradient(center, #fff, #000); + border-radius: 0; + height: 120px; + width: 100%; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + border: none; + padding: 0 !important; + -webkit-transition: all 0.3s ease 0s; + -moz-transition: all 0.3s ease 0s; + -o-transition: all 0.3s ease 0s; + -ms-transition: all 0.3s ease 0s; + transition: all 0.3s ease 0s; +} +#article-container .telescopic-site-card-group .site-card .img img { + border-radius: 0; + -webkit-transform: scale(1.03); + -moz-transform: scale(1.03); + -o-transform: scale(1.03); + -ms-transform: scale(1.03); + transform: scale(1.03); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + margin: 0; + max-width: 100%; +} +@-moz-keyframes light_tag { + 0% { + -webkit-transform: skewx(0) translateX(-150px); + -moz-transform: skewx(0) translateX(-150px); + -o-transform: skewx(0) translateX(-150px); + -ms-transform: skewx(0) translateX(-150px); + transform: skewx(0) translateX(-150px); + } + 99% { + -webkit-transform: skewx(-25deg) translateX(50px); + -moz-transform: skewx(-25deg) translateX(50px); + -o-transform: skewx(-25deg) translateX(50px); + -ms-transform: skewx(-25deg) translateX(50px); + transform: skewx(-25deg) translateX(50px); + } +} +@-webkit-keyframes light_tag { + 0% { + -webkit-transform: skewx(0) translateX(-150px); + -moz-transform: skewx(0) translateX(-150px); + -o-transform: skewx(0) translateX(-150px); + -ms-transform: skewx(0) translateX(-150px); + transform: skewx(0) translateX(-150px); + } + 99% { + -webkit-transform: skewx(-25deg) translateX(50px); + -moz-transform: skewx(-25deg) translateX(50px); + -o-transform: skewx(-25deg) translateX(50px); + -ms-transform: skewx(-25deg) translateX(50px); + transform: skewx(-25deg) translateX(50px); + } +} +@-o-keyframes light_tag { + 0% { + -webkit-transform: skewx(0) translateX(-150px); + -moz-transform: skewx(0) translateX(-150px); + -o-transform: skewx(0) translateX(-150px); + -ms-transform: skewx(0) translateX(-150px); + transform: skewx(0) translateX(-150px); + } + 99% { + -webkit-transform: skewx(-25deg) translateX(50px); + -moz-transform: skewx(-25deg) translateX(50px); + -o-transform: skewx(-25deg) translateX(50px); + -ms-transform: skewx(-25deg) translateX(50px); + transform: skewx(-25deg) translateX(50px); + } +} +@keyframes light_tag { + 0% { + -webkit-transform: skewx(0) translateX(-150px); + -moz-transform: skewx(0) translateX(-150px); + -o-transform: skewx(0) translateX(-150px); + -ms-transform: skewx(0) translateX(-150px); + transform: skewx(0) translateX(-150px); + } + 99% { + -webkit-transform: skewx(-25deg) translateX(50px); + -moz-transform: skewx(-25deg) translateX(50px); + -o-transform: skewx(-25deg) translateX(50px); + -ms-transform: skewx(-25deg) translateX(50px); + transform: skewx(-25deg) translateX(50px); + } +} +#recent-posts > .recent-post-item:not(:first-child) { + margin-top: 20px; + -webkit-animation: slide-in 0.6s 0.4s backwards; + -moz-animation: slide-in 0.6s 0.4s backwards; + -o-animation: slide-in 0.6s 0.4s backwards; + -ms-animation: slide-in 0.6s 0.4s backwards; + animation: slide-in 0.6s 0.4s backwards; + will-change: transform; +} +@media screen and (max-width: 768px) { + #recent-posts > .recent-post-item:not(:first-child) { + margin: 20px 20px 0; + } +} +#recent-posts > .recent-post-item { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + overflow: hidden; + height: 18em; + position: relative; + border-radius: 12px; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transition: all 0.3s ease 0s; + -moz-transition: all 0.3s ease 0s; + -o-transition: all 0.3s ease 0s; + -ms-transition: all 0.3s ease 0s; + transition: all 0.3s ease 0s; +} +#recent-posts > .recent-post-item .recent-post-info-top-tips { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + margin-top: 20px; +} +#recent-posts > .recent-post-item .unvisited-post { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + color: var(--anzhiyu-secondtext); + font-size: 0.75rem; + position: relative; +} +#recent-posts > .recent-post-item .unvisited-post:visited { + color: var(--anzhiyu-card-bg); +} +#recent-posts > .recent-post-item .recent-post-info { + margin-top: 0px; + position: relative; +} +#recent-posts > .recent-post-item .recent-post-info .recent-post-info-top { + position: relative; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + padding: 0 32px; + width: 100%; +} +#recent-posts > .recent-post-item .recent-post-info .recent-post-info-top .article-categories-original { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + color: var(--anzhiyu-secondtext); + font-size: 0.75rem; + position: relative; + margin-right: 8px; +} +#recent-posts > .recent-post-item .recent-post-info .recent-post-info-top .newPost { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + color: var(--anzhiyu-secondtext); + font-size: 0.75rem; + position: relative; + margin-right: 8px; +} +#recent-posts > .recent-post-item .recent-post-info .article-title { + font-size: 20px; + -webkit-line-clamp: 2; + line-height: 30px; + margin-top: 0; + font-weight: 700; + color: var(--anzhiyu-fontcolor); + margin-bottom: 0; + width: 100%; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + display: -webkit-box; + overflow: hidden; + -webkit-box-orient: vertical; +} +@media screen and (max-width: 768px) { + #recent-posts > .recent-post-item .recent-post-info .article-title { + line-height: 23px; + font-size: 19px; + } +} +@media screen and (max-width: 768px) { + #recent-posts > .recent-post-item { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + } + #recent-posts > .recent-post-item.lastestpost-item { + margin-top: 10px !important; + } +} +#recent-posts > .recent-post-item:hover img.post_bg { + filter: brightness(0.82) !important; + -webkit-transform: scale(1.03) !important; + -moz-transform: scale(1.03) !important; + -o-transform: scale(1.03) !important; + -ms-transform: scale(1.03) !important; + transform: scale(1.03) !important; + -webkit-transition: 0.3s ease-in-out; + -moz-transition: 0.3s ease-in-out; + -o-transition: 0.3s ease-in-out; + -ms-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; +} +#recent-posts > .recent-post-item.ads-wrap { + display: block !important; + height: auto !important; +} +#recent-posts > .recent-post-item .post_cover { + overflow: hidden; + width: 70%; + height: 200px; +} +@media screen and (max-width: 768px) { + #recent-posts > .recent-post-item .post_cover { + width: 100%; + height: 200px; + } +} +#recent-posts > .recent-post-item .post_cover img.post_bg { + border-radius: 0px; + height: 100%; + width: 100%; + -webkit-transition: all 0.6s ease 0s; + -moz-transition: all 0.6s ease 0s; + -o-transition: all 0.6s ease 0s; + -ms-transition: all 0.6s ease 0s; + transition: all 0.6s ease 0s; + object-fit: cover; +} +#recent-posts > .recent-post-item .post_cover.right { + -webkit-box-ordinal-group: 1; + -moz-box-ordinal-group: 1; + -o-box-ordinal-group: 1; + -ms-flex-order: 1; + -webkit-order: 1; + order: 1; +} +@media screen and (max-width: 768px) { + #recent-posts > .recent-post-item .post_cover.right { + -webkit-box-ordinal-group: 0; + -moz-box-ordinal-group: 0; + -o-box-ordinal-group: 0; + -ms-flex-order: 0; + -webkit-order: 0; + order: 0; + } +} +#recent-posts > .recent-post-item >.recent-post-info { + height: 174px; + width: 100%; + cursor: pointer; + position: relative; + padding: 0; + display: inline-block; + overflow: hidden; +} +#recent-posts > .recent-post-item >.recent-post-info .sticky-warp { + line-height: 23px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + margin-right: 8px; +} +#recent-posts > .recent-post-item >.recent-post-info .sticky-warp .sticky { + color: #ff7242; + font-size: 12px; +} +@media screen and (max-width: 768px) { + #recent-posts > .recent-post-item >.recent-post-info { + width: 100%; + min-height: 140px; + } +} +#recent-posts > .recent-post-item >.recent-post-info.no-cover { + width: 100%; +} +@media screen and (max-width: 768px) { + #recent-posts > .recent-post-item >.recent-post-info.no-cover { + padding: 30px 20px; + } +} +#recent-posts > .recent-post-item >.recent-post-info.no-cover:hover { + color: #425aef; +} +#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap { + color: var(--anzhiyu-fontcolor); + font-size: 0.7rem; + position: absolute; + padding: 0 32px; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-lines: single; + -moz-box-lines: single; + -o-box-lines: single; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + width: 100%; + left: 0; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + white-space: nowrap; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + bottom: 0px; +} +@media screen and (max-width: 768px) { + #recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap { + bottom: 20px; + } +} +#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap > .post-meta-date { + color: var(--anzhiyu-fontcolor); + font-size: 0.875rem; + white-space: nowrap; + overflow: hidden; + display: inline-block; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; +} +@media screen and (max-width: 500px) { + #recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap > .post-meta-date { + font-size: 13px; + } +} +#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap i { + margin: 0 4px 0 0; +} +#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap .article-meta-label { + display: none; +} +#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap .article-meta-separator { + margin: 0 6px; +} +#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap .article-meta-link { + margin: 0 4px; +} +#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap a { + color: var(--anzhiyu-fontcolor); + font-size: 14px; + margin-right: 4px; +} +#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap a span { + pointer-events: none; +} +#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap a:hover { + color: #425aef; +} +#recent-posts > .recent-post-item >.recent-post-info > .content { + -webkit-line-clamp: 2; +} +#topPostGroup { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + margin-top: 10px; + height: 128px; + -ms-flex-line-pack: justify; + -webkit-align-content: space-between; + align-content: space-between; + width: 100%; +} +#home_top { + margin: 0 auto 0; + padding: 0px 1.5rem 0px; + max-width: 1400px; + width: 100%; + -webkit-animation: slide-in 0.6s 0.1s backwards; + -moz-animation: slide-in 0.6s 0.1s backwards; + -o-animation: slide-in 0.6s 0.1s backwards; + -ms-animation: slide-in 0.6s 0.1s backwards; + animation: slide-in 0.6s 0.1s backwards; + overflow: hidden; +} +@media screen and (max-width: 768px) { + #topPostGroup { + height: 240px; + } + #swiper_container_blog { + padding: 10px; + } + #home_top { + padding: 0px 20px 0px; + } +} +#content-inner #recent-posts > .recent-post-item > .recent-post-info > .content { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + height: 0; +} +@media screen and (max-width: 1200px) { + #recent-posts > .recent-post-item >.recent-post-info > .article-title { + line-height: 30px; + font-weight: bold; + color: var(--anzhiyu-fontcolor); + width: 100%; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + font-size: 1.2rem; + -webkit-line-clamp: 2; + display: -webkit-box; + overflow: hidden; + -webkit-box-orient: vertical; + } +} +@media screen and (max-width: 768px) { + #content-inner #recent-posts > .recent-post-item > .recent-post-info > .content { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + height: 0; + } +} +@media screen and (min-width: 1201px) { + #recent-posts { + -ms-flex-line-pack: start; + -webkit-align-content: flex-start; + align-content: flex-start; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + } + #recent-posts>.recent-post-item { + margin-top: 1rem; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + height: auto; + width: 49%; + -webkit-flex-direction: column; + -ms-flex-direction: column; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto !important; + } + #recent-posts>.recent-post-item .recent-post-info .content { + display: none; + } + #recent-posts>.recent-post-item .post_cover { + width: 100%; + height: 225px; + -webkit-transition: 1s !important; + -moz-transition: 1s !important; + -o-transition: 1s !important; + -ms-transition: 1s !important; + transition: 1s !important; + } + #recent-posts>.recent-post-item .post_cover img.post_bg { + width: 100%; + height: 100%; + } + #recent-posts>.recent-post-item .left_radius { + border-radius: 8px 8px 0 0; + } + #recent-posts>.recent-post-item .right_radius { + border-radius: 8px 8px 0 0; + } +} +#content-inner #recent-posts > .recent-post-item > .recent-post-info > .content { + -webkit-transition: all 0.3s ease 0s; + -moz-transition: all 0.3s ease 0s; + -o-transition: all 0.3s ease 0s; + -ms-transition: all 0.3s ease 0s; + transition: all 0.3s ease 0s; + display: -webkit-box; + overflow: hidden; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + line-height: 1.4; + color: var(--anzhiyu-secondtext); + margin-top: 0.5rem; + font-size: 14px; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + height: 0; +} +#popup-window { + min-width: 300px; + background: var(--anzhiyu-maskbgdeep); + color: var(--anzhiyu-fontcolor); + padding: 8px 16px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + bottom: 20px; + right: 20px; + position: fixed; + border-radius: 12px; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + z-index: 1002; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: saturate(180%) blur(20px); + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -o-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + border: var(--style-border); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + pointer-events: none; +} +#popup-window.show-popup-window { + -webkit-animation: barrageIn 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); + -moz-animation: barrageIn 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); + -o-animation: barrageIn 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); + -ms-animation: barrageIn 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); + animation: barrageIn 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); + opacity: 1; + -ms-filter: none; + filter: none; + pointer-events: all; + cursor: pointer; +} +#popup-window.no-url:hover { + background: var(--anzhiyu-maskbgdeep); + color: var(--anzhiyu-fontcolor); + border: var(--style-border); + cursor: pointer; +} +#popup-window.no-url .popup-window-content .popup-link { + display: none; +} +#popup-window:hover { + background: var(--anzhiyu-main); + color: var(--anzhiyu-white); + border: var(--style-border-hover); +} +#popup-window:hover .popup-window-content .popup-link i { + color: var(--anzhiyu-white); +} +#popup-window.popup-hide { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-animation: barrageOut 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); + -moz-animation: barrageOut 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); + -o-animation: barrageOut 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); + -ms-animation: barrageOut 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); + animation: barrageOut 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); +} +#popup-window .popup-window-title { + font-size: 12px; + font-weight: 700; + color: var(--anzhiyu-card-bg); + margin-right: 8px; + background: var(--anzhiyu-fontcolor); + line-height: 1; + padding: 4px; + border-radius: 4px; + width: fit-content; +} +#popup-window .popup-window-divider { + width: 100%; + border-bottom: var(--style-border); + margin-top: 6px; +} +#popup-window .popup-window-content { + font-size: 14px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: distribute; + -moz-box-pack: distribute; + -o-box-pack: distribute; + -ms-flex-pack: distribute; + -webkit-justify-content: space-around; + justify-content: space-around; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +#popup-window .popup-window-content .popup-link { + margin-left: auto; + font-size: 16px; +} +#popup-window .popup-window-content .popup-link i { + font-size: 16px; +} +body[data-type="post"] #popup-window { + top: 70px; + bottom: auto; +} +body[data-type="post"] #popup-window.show-popup-window { + -webkit-animation: toLeftFull 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); + -moz-animation: toLeftFull 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); + -o-animation: toLeftFull 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); + -ms-animation: toLeftFull 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); + animation: toLeftFull 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); + opacity: 1; + -ms-filter: none; + filter: none; +} +body[data-type="post"] #popup-window.popup-hide { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-animation: toRightFull 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); + -moz-animation: toRightFull 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); + -o-animation: toRightFull 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); + -ms-animation: toRightFull 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); + animation: toRightFull 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); +} +body[data-type="music"] { + background: #0d0d0d; +} +body[data-type="music"] #body-wrap { + -webkit-box-pack: start; + -moz-box-pack: start; + -o-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; +} +body[data-type="music"] #center-console + label i { + background: var(--anzhiyu-white) !important; +} +body[data-type="music"] .layout { + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} +body[data-type="music"] #page { + border: 0; + -webkit-box-shadow: none !important; + box-shadow: none !important; + padding: 0 !important; + background: transparent !important; +} +body[data-type="music"] #page .page-title { + display: none; +} +body[data-type="music"] #page-header #nav { + backdrop-filter: none !important; + background: 0 0 !important; + border-bottom: none !important; +} +body[data-type="music"] #page-header #nav #blog_name a, +body[data-type="music"] #page-header #nav .mask-name-container a, +body[data-type="music"] #page-header #nav #menus a, +body[data-type="music"] #page-header #nav #nav-right .nav-button a, +body[data-type="music"] #page-header #nav #nav-right #toggle-menu a, +body[data-type="music"] #page-header #nav #blog_name .back-home-button, +body[data-type="music"] #page-header #nav .mask-name-container .back-home-button, +body[data-type="music"] #page-header #nav #menus .back-home-button, +body[data-type="music"] #page-header #nav #nav-right .nav-button .back-home-button, +body[data-type="music"] #page-header #nav #nav-right #toggle-menu .back-home-button { + color: var(--anzhiyu-white); +} +body[data-type="music"] #footer, +body[data-type="music"] #nav-music { + display: none; +} +body[data-type="music"] #an_music_bg { + display: block; +} +body[data-type="music"] #web_bg { + display: none; +} +body[data-type="music"] .s-sticker div { + color: var(--anzhiyu-white) !important; +} +[data-theme="dark"] body[data-type="music"] .page #page-header:before { + background-color: transparent; +} +#an_music_bg { + display: none; + filter: blur(63px); + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + position: fixed; + z-index: -999; + background-attachment: local; + background-position: center center; + background-size: cover; + background-repeat: no-repeat; + width: 200%; + height: 200%; + top: -50%; + left: -50%; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +body:has(#console.show) #nav-music { + display: none !important; +} +@media screen and (max-width: 1400px) { + body #anMusic-page #anMusicSwitching, + body #anMusic-page #anMusicRefreshBtn, + body #anMusic-page #anMusicBtnGetSong { + right: 7vw; + } + body #anMusic-page #anMusicSwitching { + bottom: 100px; + } + body #anMusic-page #anMusicRefreshBtn { + bottom: 160px; + } + body #anMusic-page #anMusicBtnGetSong { + bottom: 220px; + } +} +#anMusic-page #anMusicRefreshBtn, +#anMusic-page #anMusicBtnGetSong, +#anMusic-page #anMusicSwitching { + position: fixed; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + width: 50px; + height: 50px; + bottom: 100px; + padding: 5px; + background: var(--anzhiyu-white-op); + backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); + border-radius: 50%; + color: #fff; + text-align: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + cursor: pointer; + z-index: 2; +} +#anMusic-page #anMusicBtnGetSong { + right: 11vw; +} +#anMusic-page #anMusicRefreshBtn { + right: 7vw; +} +#anMusic-page #anMusicSwitching { + right: 15vw; +} +@media screen and (max-width: 768px) { + #anMusic-page div#anMusicBtnGetSong { + right: 80px; + bottom: 150px; + } + #anMusic-page div#anMusicRefreshBtn { + right: 20px; + bottom: 150px; + } + #anMusic-page div#anMusicSwitching { + right: 140px; + bottom: 150px; + } +} +#anMusic-page meting-js .aplayer { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-direction: reverse; + -moz-box-direction: reverse; + -o-box-direction: reverse; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + background: rgba(0,0,0,0); + border: none; + -webkit-box-shadow: none; + box-shadow: none; +} +#anMusic-page meting-js .aplayer .aplayer-body { + width: 40%; + height: calc(100vh - 169px); +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-pic { + float: none; + width: 180px; + height: 180px; + border-radius: 12px; + margin: auto; + left: 0; + right: 0; + -webkit-transition: background-image 0.5s ease-in-out; + -moz-transition: background-image 0.5s ease-in-out; + -o-transition: background-image 0.5s ease-in-out; + -ms-transition: background-image 0.5s ease-in-out; + transition: background-image 0.5s ease-in-out; + background-size: cover; + background-color: transparent !important; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info { + margin: 0 20px 0 20px; + border-bottom: none; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-music { + text-align: center; + height: auto; + margin: 15px; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-music .aplayer-author, +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-music .aplayer-title { + font-size: 2rem; + font-weight: 700; + color: #fff; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc { + height: 800%; + margin-top: 10px; + mask-image: linear-gradient(to bottom, #000, #000, #000, #000, #000, #000, #000, #000, #000, #000, rgba(0,0,0,0), rgba(0,0,0,0)); +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc p { + font-size: 20px; + line-height: 20px !important; + height: 20px !important; + margin: 20px 0 !important; + color: #fff; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc p.aplayer-lrc-current { + min-height: 20px; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc::after, +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc::before { + display: none; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller { + position: fixed; + max-width: 1500px; + margin: auto; + left: 0; + right: 0; + bottom: 50px; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap { + margin: 0 160px 0 150px; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar { + height: 6px; + border-radius: 4px; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played { + height: 6px; + border-radius: 4px; + background: var(--anzhiyu-white) !important; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb { + width: 20px; + height: 20px; + margin-top: -7px; + -webkit-transform: none; + -moz-transform: none; + -o-transform: none; + -ms-transform: none; + transform: none; + background: #fff !important; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded { + height: 6px; + border-radius: 4px; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time { + position: absolute; + width: 100%; + bottom: 21px; + height: 0; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: end; + -moz-box-pack: end; + -o-box-pack: end; + -ms-flex-pack: end; + -webkit-justify-content: flex-end; + justify-content: flex-end; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-volume-wrap .aplayer-volume-bar-wrap { + bottom: 0; + right: -5px; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon { + width: 2rem; + height: 2rem; + margin-left: 15px; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path { + fill: var(--anzhiyu-white); + opacity: 0.8; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + filter: alpha(opacity=80); +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-loop { + margin-right: 15px; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner { + margin-right: 18px; + margin-top: -8px; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-back { + position: absolute; + left: 0; + display: inline; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-play { + position: absolute; + left: 40px; + display: inline; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-forward { + position: absolute; + left: 80px; + display: inline; +} +#anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-menu { + display: none; +} +#anMusic-page meting-js .aplayer .aplayer-list { + width: 60%; + height: 100%; +} +#anMusic-page meting-js .aplayer ol { + padding-right: 25px; +} +#anMusic-page meting-js .aplayer ol > li { + border-top: 1px solid transparent; + font-size: 14px; +} +#anMusic-page meting-js .aplayer ol > li:hover { + background: rgba(255,255,255,0.2); + border-radius: 6px; +} +#anMusic-page meting-js .aplayer ol > li.aplayer-list-light { + background: rgba(255,255,255,0.2); + border-radius: 6px; + padding: 20px 15px; +} +#anMusic-page meting-js .aplayer ol > li.aplayer-list-light span.aplayer-list-title { + font-weight: bolder; +} +#anMusic-page meting-js .aplayer ol > li.aplayer-list-light .aplayer-list-cur { + display: none; +} +#anMusic-page meting-js .aplayer ol > li span { + color: var(--anzhiyu-white); +} +#anMusic-page meting-js .aplayer ol > li span.aplayer-list-author { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); +} +@media screen and (max-width: 768px) { + body[data-type="music"] #rightside { + display: none; + } + body[data-type="music"] #content-inner, + body[data-type="music"] #page { + z-index: auto; + } + #anMusic-page meting-js .aplayer .aplayer-list { + position: fixed; + z-index: 1002; + width: 100%; + bottom: -88%; + left: 0; + background: var(--sidebar-bg); + height: auto; + border-radius: 15px 15px 0px 0px; + padding: 15px 0px; + } + #anMusic-page meting-js .aplayer .aplayer-list.aplayer-list-hide { + bottom: 0% !important; + } + #anMusic-page meting-js .aplayer .aplayer-list ol { + max-height: 60vh !important; + padding-right: 0px; + } + #anMusic-page meting-js .aplayer .aplayer-list ol > li { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + margin: 0 10px; + } + #anMusic-page meting-js .aplayer .aplayer-list ol > li span { + color: var(--font-color); + } + #anMusic-page meting-js .aplayer .aplayer-list ol > li span.aplayer-list-title { + width: 30%; + max-width: 55%; + width: auto; + display: -webkit-box; + -webkit-line-clamp: 1; + overflow: hidden; + -webkit-box-orient: vertical; + } + #anMusic-page meting-js .aplayer .aplayer-list ol > li span.aplayer-list-author { + position: absolute; + right: 10px; + width: auto; + max-width: 35%; + display: -webkit-box; + -webkit-line-clamp: 1; + overflow: hidden; + -webkit-box-orient: vertical; + } + #anMusic-page meting-js .aplayer .aplayer-list ol > li.aplayer-list-light { + background: #33a673; + padding: 5px 20px; + border-radius: 10px; + } + #anMusic-page meting-js .aplayer .aplayer-list ol > li.aplayer-list-light span { + color: #fff; + } + #anMusic-page meting-js .aplayer .aplayer-list ol > li.aplayer-list-light span.aplayer-list-author { + right: 15px; + } + #anMusic-page meting-js .aplayer .aplayer-body { + width: 100%; + position: fixed; + margin: auto; + left: 0; + right: 0; + top: 100px; + } + #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc { + margin-top: 40px; + height: auto; + max-height: 200%; + min-height: 100%; + mask-image: linear-gradient(to bottom, #000, #000, #000, #000, rgba(0,0,0,0), rgba(0,0,0,0)); + } + #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-lrc p.aplayer-lrc-current { + color: #33a673; + } + #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller { + width: 100%; + bottom: 100px; + } + #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-volume-wrap { + left: -66px; + } + #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap { + bottom: 0px; + right: 7px; + } + #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap { + margin: 0 30px; + } + #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time { + bottom: -40px; + } + #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner { + position: absolute; + width: 100%; + margin-right: 0; + margin-top: -33px; + } + #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner .aplayer-dtime { + position: absolute; + right: 30px; + } + #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner .aplayer-ptime { + position: absolute; + left: 35px; + } + #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-back { + margin: auto; + right: 110px; + } + #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-play { + margin: auto; + right: 0; + left: 0; + } + #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-forward { + margin: auto; + left: 110px; + right: 0; + } + #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-order { + position: absolute; + left: 22px; + } + #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-loop { + position: absolute; + right: 25px; + } + #anMusic-page meting-js .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon-menu { + display: inline; + position: absolute; + right: 25px; + top: -90px; + } +} +.reward #con { + width: 350px; + height: 85px; + position: relative; + border-radius: 4px; +} +.reward #TA-con { + width: 157px; + height: 50px; + background-color: #f25d8e; + -webkit-box-shadow: 0 4px 4px rgba(255,112,159,0.3); + box-shadow: 0 4px 4px rgba(255,112,159,0.3); + position: absolute; + top: 50%; + left: 10%; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -o-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + border-radius: 4px; + cursor: pointer; +} +@media screen and (max-width: 768px) { + .reward #TA-con { + width: 125px; + left: 54px; + } +} +.reward #TA-con:hover { + background-color: #ff6b9a; +} +.reward #text-con { + width: 100px; + height: 100%; + margin: 0 auto; + position: relative; +} +.reward #linght { + width: 0; + height: 0; + position: absolute; + top: 36%; + left: 4px; + border-color: transparent; + border-style: solid; + border-width: 10px; + border-top: 10px solid #fff; + border-radius: 4px; + -webkit-transform: rotate(-55deg); + -moz-transform: rotate(-55deg); + -o-transform: rotate(-55deg); + -ms-transform: rotate(-55deg); + transform: rotate(-55deg); +} +.reward #linght::after { + position: absolute; + top: -13px; + left: -11px; + content: ""; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + border-width: 10px; + border-top: 10px solid #fff; + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -o-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + border-radius: 4px; +} +.reward #TA { + float: right; + line-height: 50px; + font-size: 15px; + color: #fff; +} +.reward #tube-con { + width: 157px; + height: 55px; + position: absolute; + right: -5px; + top: 15px; +} +.reward svg { + width: 100%; + height: 100%; +} +.reward #mask { + width: 0px; + height: 100%; + overflow: hidden; + position: absolute; + top: 0; + left: 0; + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -ms-transition: all 0.5s; + transition: all 0.5s; +} +.reward #mask svg { + width: 157px; + height: 55px; +} +.reward #TA-con:hover + #tube-con > #mask { + width: 157px; +} +.reward #TA-con:hover + #tube-con > #orange-mask { + -webkit-animation: move1 0.5s linear 0.2s infinite; + -moz-animation: move1 0.5s linear 0.2s infinite; + -o-animation: move1 0.5s linear 0.2s infinite; + -ms-animation: move1 0.5s linear 0.2s infinite; + animation: move1 0.5s linear 0.2s infinite; +} +.reward #TA-con:hover + #tube-con > #orange-mask svg { + -webkit-animation: movetwo 0.5s linear 0.2s infinite; + -moz-animation: movetwo 0.5s linear 0.2s infinite; + -o-animation: movetwo 0.5s linear 0.2s infinite; + -ms-animation: movetwo 0.5s linear 0.2s infinite; + animation: movetwo 0.5s linear 0.2s infinite; +} +.reward #orange-mask { + width: 18px; + height: 100%; + overflow: hidden; + position: absolute; + left: -15px; + top: 0px; +} +.reward #orange-mask svg { + position: absolute; + top: 0; + left: 15px; + width: 157px; + height: 55px; +} +.reward #people { + position: absolute; + right: 10px; + top: 4px; + font-size: 12px; + font-family: "雅黑"; + color: #aaa; +} +.reward #people > b { + color: #777; +} +@-moz-keyframes move1 { + 0% { + -webkit-transform: translateX(-15px); + -moz-transform: translateX(-15px); + -o-transform: translateX(-15px); + -ms-transform: translateX(-15px); + transform: translateX(-15px); + } + 100% { + -webkit-transform: translateX(140px); + -moz-transform: translateX(140px); + -o-transform: translateX(140px); + -ms-transform: translateX(140px); + transform: translateX(140px); + } +} +@-webkit-keyframes move1 { + 0% { + -webkit-transform: translateX(-15px); + -moz-transform: translateX(-15px); + -o-transform: translateX(-15px); + -ms-transform: translateX(-15px); + transform: translateX(-15px); + } + 100% { + -webkit-transform: translateX(140px); + -moz-transform: translateX(140px); + -o-transform: translateX(140px); + -ms-transform: translateX(140px); + transform: translateX(140px); + } +} +@-o-keyframes move1 { + 0% { + -webkit-transform: translateX(-15px); + -moz-transform: translateX(-15px); + -o-transform: translateX(-15px); + -ms-transform: translateX(-15px); + transform: translateX(-15px); + } + 100% { + -webkit-transform: translateX(140px); + -moz-transform: translateX(140px); + -o-transform: translateX(140px); + -ms-transform: translateX(140px); + transform: translateX(140px); + } +} +@keyframes move1 { + 0% { + -webkit-transform: translateX(-15px); + -moz-transform: translateX(-15px); + -o-transform: translateX(-15px); + -ms-transform: translateX(-15px); + transform: translateX(-15px); + } + 100% { + -webkit-transform: translateX(140px); + -moz-transform: translateX(140px); + -o-transform: translateX(140px); + -ms-transform: translateX(140px); + transform: translateX(140px); + } +} +@-moz-keyframes movetwo { + 0% { + -webkit-transform: translateX(15px); + -moz-transform: translateX(15px); + -o-transform: translateX(15px); + -ms-transform: translateX(15px); + transform: translateX(15px); + } + 100% { + -webkit-transform: translateX(-140px); + -moz-transform: translateX(-140px); + -o-transform: translateX(-140px); + -ms-transform: translateX(-140px); + transform: translateX(-140px); + } +} +@-webkit-keyframes movetwo { + 0% { + -webkit-transform: translateX(15px); + -moz-transform: translateX(15px); + -o-transform: translateX(15px); + -ms-transform: translateX(15px); + transform: translateX(15px); + } + 100% { + -webkit-transform: translateX(-140px); + -moz-transform: translateX(-140px); + -o-transform: translateX(-140px); + -ms-transform: translateX(-140px); + transform: translateX(-140px); + } +} +@-o-keyframes movetwo { + 0% { + -webkit-transform: translateX(15px); + -moz-transform: translateX(15px); + -o-transform: translateX(15px); + -ms-transform: translateX(15px); + transform: translateX(15px); + } + 100% { + -webkit-transform: translateX(-140px); + -moz-transform: translateX(-140px); + -o-transform: translateX(-140px); + -ms-transform: translateX(-140px); + transform: translateX(-140px); + } +} +@keyframes movetwo { + 0% { + -webkit-transform: translateX(15px); + -moz-transform: translateX(15px); + -o-transform: translateX(15px); + -ms-transform: translateX(15px); + transform: translateX(15px); + } + 100% { + -webkit-transform: translateX(-140px); + -moz-transform: translateX(-140px); + -o-transform: translateX(-140px); + -ms-transform: translateX(-140px); + transform: translateX(-140px); + } +} +#tag #tag-page-tags { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; +} +#tag #tag-page-tags a { + line-height: 1.6; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + color: var(--anzhiyu-fontcolor) !important; + padding: 0.1rem 0.5rem; + margin: 0.25rem; + border-radius: 8px; + border: var(--style-border-always); +} +#tag #tag-page-tags a.selected { + -webkit-box-shadow: var(--anzhiyu-shadow-theme); + box-shadow: var(--anzhiyu-shadow-theme); + color: var(--anzhiyu-white) !important; + background: var(--anzhiyu-theme); + border: var(--style-border-none); +} +#tag #tag-page-tags a.select .tagsPageCount { + background: var(--anzhiyu-card-bg); + color: var(--anzhiyu-lighttext); +} +#post .tag_share .post-meta__box__tags span.tagsPageCount, +#tag-page-tags .tagsPageCount { + padding: 4px 6px; + background: var(--anzhiyu-secondbg); + border: var(--style-border-always); + min-width: 22.5px; + display: inline-block; + border-radius: 4px; + line-height: 0.6rem; + text-align: center; + font-size: 0.7rem; + color: var(--anzhiyu-fontcolor); + margin-left: 4px; +} +#tag #tag-page-tags a:hover .tagsPageCount, +#post .tag_share .post-meta__box__tags:hover span.tagsPageCount { + background: var(--anzhiyu-card-bg); + color: var(--anzhiyu-lighttext); +} +#tag #tag-page-tags a { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif; + font-size: 0.9em; +} +#tag #tag-page-tags a:hover { + -webkit-box-shadow: var(--anzhiyu-shadow-theme); + box-shadow: var(--anzhiyu-shadow-theme); + color: var(--anzhiyu-white) !important; + background: var(--anzhiyu-theme); + border: var(--style-border-none); +} +span.tags-punctuation, +span.categoryes-punctuation { + margin-right: 4px; +} +span.tags-punctuation .icon-biaoqian, +span.categoryes-punctuation .icon-biaoqian { + font-size: 13px; +} +.tagsPageCount { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif; +} +[data-theme="light"] #post .tag_share .post-meta__box__tags span.tagsPageCount { + background-color: transparent; + color: #fff; +} +[data-theme="light"] #post .tag_share .post-meta__box__categoryes span.categoryesPageCount { + background-color: transparent; + color: #fff; +} +#post .tag_share .post-meta__box__categoryes span.categoryesPageCount { + padding: 4px 6px; + background: var(--anzhiyu-secondbg); + border: var(--style-border-always); + min-width: 22.5px; + display: inline-block; + border-radius: 4px; + line-height: 0.6rem; + text-align: center; + font-size: 0.7rem; + color: var(--anzhiyu-fontcolor); + margin-left: 4px; +} +.post-meta__box__categories { + border-radius: 12px; +} +.post-meta__box a { + color: var(--anzhiyu-white); + border: none; +} +[data-theme="dark"] .post-meta__box a { + opacity: 0.5; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); +} +[data-theme="dark"] .post-reward .reward-button, +[data-theme="dark"] .reward-link.mode { + opacity: 0.5; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); +} +.post-meta__box__tag-list a:nth-child(5n) { + background-color: #4a4a4a; + color: #fff; +} +.post-meta__box__tag-list a:nth-child(5n + 1) { + background-color: #ff5e5c; + color: #fff; +} +.post-meta__box__tag-list a:nth-child(5n + 2) { + background-color: #ffbb50; + color: #fff; +} +.post-meta__box__tag-list a:nth-child(5n + 3) { + background-color: #1ac756; + color: #fff; +} +.post-meta__box__tag-list a:nth-child(5n + 4) { + background-color: #19b5fe; + color: #fff; +} +.post-meta__box__tag-list a:hover { + background-color: var(--anzhiyu-main); + color: #fff; +} +[data-theme="dark"] .post-meta__box__tag-list a:hover { + color: #fff; +} +.post-meta__box__category-list a:nth-child(5n) { + background-color: #4a4a4a; + color: #fff; +} +.post-meta__box__category-list a:nth-child(5n + 1) { + background-color: #1ac756; + color: #fff; +} +.post-meta__box__category-list a:nth-child(5n + 2) { + background-color: #ffbb50; + color: #fff; +} +.post-meta__box__category-list a:nth-child(5n + 3) { + background-color: #19b5fe; + color: #fff; +} +.post-meta__box__category-list a:nth-child(5n + 4) { + background-color: #ff5e5c; + color: #fff; +} +body[data-type="tags"] #page, +body[data-type="categories"] #page { + border-radius: 12px; +} +@media screen and (max-width: 768px) { + body[data-type="tags"] #page #tag, + body[data-type="categories"] #page #tag { + padding: 0px 15px 20px; + } + body[data-type="tags"] #page .page-title, + body[data-type="categories"] #page .page-title { + margin: 8px 0 0px; + } +} +@media screen and (max-width: 768px) { + body[data-type="tags"] #body-wrap .layout, + body[data-type="categories"] #body-wrap .layout { + padding: 0 20px 15px; + } +} +body[data-type="tags"] #tag #tag-page-tags, +body[data-type="categories"] #tag #tag-page-tags { + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} +body[data-type="tags"] #tag #tag-page-tags a, +body[data-type="categories"] #tag #tag-page-tags a { + font-size: 1.4rem; + margin: 0.3rem 0.65rem; +} +@media screen and (max-width: 768px) { + body[data-type="tags"] #tag #tag-page-tags a, + body[data-type="categories"] #tag #tag-page-tags a { + font-size: 1.8rem; + margin: 0.6rem 0.8rem; + } +} +.tag-cloud-list a { + display: inline-block; + padding: 0 8px; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; +} +.tag-cloud-list a:hover { + color: #425aef !important; + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} +@media screen and (max-width: 768px) { + .tag-cloud-list a { + zoom: 0.85; + } +} +.tag-cloud-title { + font-size: 2.57em; +} +@media screen and (max-width: 768px) { + .tag-cloud-title { + font-size: 2em; + } +} +h1.page-title + .tag-cloud-list { + text-align: left; +} +@media screen and (min-width: 1201px) and (max-width: 768px) { + #recent-posts>.recent-post-item { + width: 100%; + } + #recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap > .tags > .article-meta__separator { + display: none; + } +} +#error-wrap { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + width: 100%; + margin-top: 1rem; + position: relative; +} +@media screen and (max-width: 768px) { + #error-wrap { + margin-top: 0; + } +} +#error-wrap .error-content { + -webkit-box-shadow: none !important; + box-shadow: none !important; + border-radius: 12px; + background: var(--anzhiyu-card-bg) !important; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + margin: 0px 1rem; + height: 22rem; + max-width: 800px; + border-radius: 5px; + background: var(--anzhiyu-card-bg); + -webkit-box-shadow: var(--card-box-shadow); + box-shadow: var(--card-box-shadow); + -webkit-transition: all 0.3s ease 0s; + -moz-transition: all 0.3s ease 0s; + -o-transition: all 0.3s ease 0s; + -ms-transition: all 0.3s ease 0s; + transition: all 0.3s ease 0s; + border: var(--style-border-always); + position: relative; + width: 100%; +} +@media screen and (max-width: 768px) { + #error-wrap .error-content { + -webkit-box-orient: vertical; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin: 0px; + height: 25rem; + width: 100%; + } +} +#error-wrap .error-content .error-img { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + box-flex: 1; + -webkit-flex: 1 1 0%; + -ms-flex: 1 1 0%; + flex: 1 1 0%; + height: 90%; + width: 600px; + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + background-color: #307af6; + background-position: center center; + background-size: cover; + height: 100%; +} +@media screen and (max-width: 768px) { + #error-wrap .error-content .error-img { + -webkit-box-flex: 1; + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + box-flex: 1; + -webkit-flex: 1 1 0%; + -ms-flex: 1 1 0%; + flex: 1 1 0%; + width: 100%; + border-radius: 12px; + } +} +#error-wrap .error-content .error-info { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + box-flex: 1; + -webkit-flex: 1 1 0%; + -ms-flex: 1 1 0%; + flex: 1 1 0%; + padding: 0.5rem; + text-align: center; + font-size: 14px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif; +} +@media screen and (max-width: 768px) { + #error-wrap .error-content .error-info { + -webkit-box-flex: 1.1; + -webkit-box-flex: 1.1; + -moz-box-flex: 1.1; + -o-box-flex: 1.1; + box-flex: 1.1; + -webkit-flex: 1.1 1 0%; + -ms-flex: 1.1 1 0%; + flex: 1.1 1 0%; + width: 100%; + padding-bottom: 2rem; + } +} +#error-wrap .error-content .error-info .error_title { + font-size: 9em; + line-height: 1; +} +@media screen and (max-width: 768px) { + #error-wrap .error-content .error-info .error_title { + font-size: 4rem; + } +} +#error-wrap .error-content .error-info .error_subtitle { + word-break: break-word; + font-size: 1.6em; + -webkit-line-clamp: 2; +} +#error-wrap .error-content .error-info a { + display: inline-block; + margin-top: 0.5rem; + padding: 0.3rem 1.5rem; + background: var(--btn-bg); + color: var(--btn-color); +} +#error-wrap .error-content .error-info a i { + padding-right: 0.3rem; +} +.button--animated { + border-radius: 8px !important; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + position: relative; + z-index: 1; + -webkit-transition: color 1s ease 0s; + -moz-transition: color 1s ease 0s; + -o-transition: color 1s ease 0s; + -ms-transition: color 1s ease 0s; + transition: color 1s ease 0s; +} +#body-wrap .error-box { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + padding: 1rem; + padding-top: 0px; + position: relative; +} +#body-wrap .error-box .aside-list { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-lines: single; + -moz-box-lines: single; + -o-box-lines: single; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + margin: 1rem; + max-width: 100%; +} +@media screen and (max-width: 768px) { + #body-wrap .error-box .aside-list { + margin: 0; + } +} +#body-wrap .error-box .aside-list .aside-list-group { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + max-width: 800px; + margin: 0 auto; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; +} +#body-wrap .error-box .aside-list .aside-list-item { + padding: 0.5rem 0; + width: 49%; +} +#body-wrap .error-box .aside-list .aside-list-item .thumbnail { + overflow: hidden; + width: 100%; + height: 200px; + background: var(--anzhiyu-card-bg); + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + border-radius: 12px; +} +@media screen and (max-width: 768px) { + #body-wrap .error-box .aside-list .aside-list-item .thumbnail { + height: 100px; + } +} +#body-wrap .error-box .aside-list .aside-list-item img { + width: 100%; + object-fit: cover; + border-radius: 12px; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + -webkit-transition: filter 300ms ease-in 0.2s, -webkit-transform 0.6s; + -moz-transition: filter 300ms ease-in 0.2s, -moz-transform 0.6s; + -o-transition: filter 300ms ease-in 0.2s, -o-transform 0.6s; + -ms-transition: filter 300ms ease-in 0.2s, -ms-transform 0.6s; + transition: filter 300ms ease-in 0.2s, transform 0.6s; +} +#body-wrap .error-box .aside-list .aside-list-item:hover img { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); + filter: brightness(0.82); +} +#body-wrap .error-box .aside-list .aside-list-item .content .title { + -webkit-line-clamp: 2; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + line-height: 1.5; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: end; + -moz-box-align: end; + -o-box-align: end; + -ms-flex-align: end; + -webkit-align-items: flex-end; + align-items: flex-end; + -ms-flex-line-pack: center; + -webkit-align-content: center; + align-content: center; + padding-top: 0.5rem; + font-size: 16px; + font-weight: bold; +} +#body-wrap .error-box .aside-list .aside-list-item .content time { + display: none; +} +@media screen and (max-width: 768px) { + .post #aside-content { + background: var(--anzhiyu-background); + border: none; + z-index: 99; + margin-top: -1px; + } +} +#aside-content { + width: 300px; + -webkit-animation: slide-in 0.6s 0.3s backwards; + -moz-animation: slide-in 0.6s 0.3s backwards; + -o-animation: slide-in 0.6s 0.3s backwards; + -ms-animation: slide-in 0.6s 0.3s backwards; + animation: slide-in 0.6s 0.3s backwards; +} +@media screen and (min-width: 1200px) { + #aside-content { + padding-left: 15px; + } +} +@media screen and (max-width: 1200px) { + #aside-content { + width: 100%; + padding: 20px; + } +} +@media screen and (max-width: 768px) { + #aside-content { + padding: 0 20px 20px; + } +} +#aside-content > .card-widget:first-child { + margin-top: 0; +} +@media screen and (max-width: 1200px) { + #aside-content > .card-widget:first-child { + margin-top: 20px; + } +} +@media screen and (max-width: 768px) { + #aside-content > .card-widget:first-child { + margin-top: 0px; + } +} +#aside-content .card-widget { + position: relative; + overflow: hidden; + margin-top: 20px; + padding: 20px 24px; +} +#aside-content .card-widget .author-info__bottom-group { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + width: 100%; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +#aside-content .card-widget .author-info__bottom-group .author-info__name { + text-align: left; + font-weight: 700; + color: var(--anzhiyu-white); + font-size: 20px; + line-height: 1; + margin-bottom: 5px; + margin-top: 0; +} +#aside-content .card-widget .author-info__bottom-group .author-info__desc { + font-size: 12px; + color: var(--anzhiyu-white); + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + line-height: 1; +} +#aside-content .card-widget .author-info__description { + position: absolute; + top: 50px; + width: 100%; + left: 0; + padding: 1rem 1.2rem; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + color: var(--anzhiyu-white); +} +#aside-content .card-widget .banner-button-group .banner-button { + padding: 20px 12px; + color: var(--anzhiyu-white); + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + z-index: 1; + -webkit-transition: all 0.3s ease 0s; + -moz-transition: all 0.3s ease 0s; + -o-transition: all 0.3s ease 0s; + -ms-transition: all 0.3s ease 0s; + transition: all 0.3s ease 0s; + cursor: pointer; +} +#aside-content .card-widget .banner-button-group .banner-button .anzhiyufont .anzhiyu-icon-arrow-circle-right { + font-size: 1.3rem; + margin-right: 10px; +} +#aside-content .card-widget .author-info-avatar { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +#aside-content .card-widget .author-info-avatar img { + filter: blur(0) brightness(1); +} +#aside-content .card-widget .author-info-avatar .author-status { + position: absolute; + bottom: 2px; + right: 2px; + width: 33px; + height: 33px; + border-radius: 2em; + background-color: var(--anzhiyu-white); + overflow: hidden; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-transition: 0.3s 0.2s; + -moz-transition: 0.3s 0.2s; + -o-transition: 0.3s 0.2s; + -ms-transition: 0.3s 0.2s; + transition: 0.3s 0.2s; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} +#aside-content .card-widget .author-info-avatar .author-status img { + width: 26px; + height: 26px; + border-radius: 0px; + -webkit-transition: 0s; + -moz-transition: 0s; + -o-transition: 0s; + -ms-transition: 0s; + transition: 0s; +} +#aside-content .card-widget .card-info-social-icons { + margin: 0; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: start; + -moz-box-pack: start; + -o-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + cursor: pointer; +} +#aside-content .card-widget .card-info-social-icons .social-icon { + margin: 0 0 0 10px; + color: var(--anzhiyu-fontcolor); + font-size: 1.4em; + cursor: pointer; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; +} +#aside-content .card-widget .card-info-social-icons .social-icon i, +#aside-content .card-widget .card-info-social-icons .social-icon svg { + background: var(--anzhiyu-white-op); + color: var(--anzhiyu-white); + font-size: 1rem; + width: 40px; + height: 40px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-transition: all 0.3s ease 0s; + -moz-transition: all 0.3s ease 0s; + -o-transition: all 0.3s ease 0s; + -ms-transition: all 0.3s ease 0s; + transition: all 0.3s ease 0s; + padding: 8px; + border-radius: 32px; +} +#aside-content .card-widget .card-info-social-icons .social-icon i:hover, +#aside-content .card-widget .card-info-social-icons .social-icon svg:hover { + background: var(--anzhiyu-secondbg); + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); + color: var(--anzhiyu-main); + -webkit-box-shadow: none; + box-shadow: none; +} +#aside-content .card-widget #card-info-btn { + display: block; + margin-top: 14px; + background-color: var(--btn-bg); + color: var(--btn-color); + text-align: center; + line-height: 2.4; +} +#aside-content .card-widget #card-info-btn:hover { + background-color: var(--btn-hover-color); +} +#aside-content .card-widget #card-info-btn span { + padding-left: 10px; +} +#aside-content .item-headline { + padding-bottom: 0; + margin-left: 8px; + font-size: 1em; + font-weight: bold; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +#aside-content .item-headline span { + margin-left: 6px; +} +@media screen and (min-width: 1200px) { + #aside-content .sticky_layout { + position: sticky; + position: -webkit-sticky; + top: 20px; + -webkit-transition: top 0.3s; + -moz-transition: top 0.3s; + -o-transition: top 0.3s; + -ms-transition: top 0.3s; + transition: top 0.3s; + } +} +#aside-content .card-tag-cloud a { + display: inline-block; + padding: 0 4px; +} +#aside-content .card-tag-cloud a:hover { + color: #425aef !important; +} +#aside-content .aside-list > span { + display: block; + margin-bottom: 10px; + text-align: center; +} +#aside-content .aside-list > .aside-list-item { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + padding: 6px 0; +} +#aside-content .aside-list > .aside-list-item:first-child { + padding-top: 0; +} +#aside-content .aside-list > .aside-list-item:not(:last-child) { + border-bottom: 1px dashed #f5f5f5; +} +#aside-content .aside-list > .aside-list-item:last-child { + padding-bottom: 0; +} +#aside-content .aside-list > .aside-list-item .thumbnail { + overflow: hidden; + width: 4.2em; + height: 4.2em; +} +#aside-content .aside-list > .aside-list-item .content { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + padding-left: 10px; + word-break: break-all; + width: 4.2em; + height: 4.2em; +} +#aside-content .aside-list > .aside-list-item .content > .name { + -webkit-line-clamp: 1; +} +#aside-content .aside-list > .aside-list-item .content > time, +#aside-content .aside-list > .aside-list-item .content > .name { + display: block; + color: var(--anzhiyu-fontcolor); + font-size: 85%; +} +#aside-content .aside-list > .aside-list-item .content > .title, +#aside-content .aside-list > .aside-list-item .content > .comment { + color: var(--font-color); + font-size: 95%; + line-height: 1.5; + -webkit-line-clamp: 2; +} +#aside-content .aside-list > .aside-list-item .content > .title:hover, +#aside-content .aside-list > .aside-list-item .content > .comment:hover { + color: #425aef; +} +#aside-content .aside-list > .aside-list-item.no-cover { + min-height: 4.4em; +} +#aside-content .card-archives ul.card-archive-list, +#aside-content .card-categories ul.card-category-list { + margin: 0; + padding: 0; + list-style: none; +} +#aside-content .card-archives .item-headline { + display: none; +} +#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, +#aside-content .card-categories ul.card-category-list > .card-category-list-item a { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + padding: 3px 10px; + color: var(--font-color); + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + -o-transition: all 0.2s; + -ms-transition: all 0.2s; + transition: all 0.2s; +} +#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover, +#aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover { + background-color: var(--text-bg-hover); +} +#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child, +#aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} +#aside-content .card-categories .card-category-list.child { + padding: 0 0 0 16px; +} +#aside-content .card-categories .card-category-list > .parent > a.expand i { + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} +#aside-content .card-categories .card-category-list > .parent > a.expand + .child { + display: block; +} +#aside-content .card-categories .card-category-list > .parent > a .card-category-list-name { + width: 70% !important; +} +#aside-content .card-categories .card-category-list > .parent > a .card-category-list-count { + width: calc(100% - 70% - 20px); + text-align: right; +} +#aside-content .card-categories .card-category-list > .parent > a i { + float: right; + margin-right: -0.5em; + padding: 0.5em; + -webkit-transition: -webkit-transform 0.3s; + -moz-transition: -moz-transform 0.3s; + -o-transition: -o-transform 0.3s; + -ms-transition: -ms-transform 0.3s; + transition: transform 0.3s; + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); +} +#aside-content .card-webinfo .item-headline { + display: none; +} +#aside-content .card-webinfo .webinfo .webinfo-item { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + padding: 2px 10px 0; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; +} +#aside-content .card-webinfo .webinfo .webinfo-item .webinfo-item-title { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; +} +#aside-content .card-webinfo .webinfo .webinfo-item .webinfo-item-title i { + line-height: 2; + margin-right: 6px; + width: 16px; + text-align: center; +} +#aside-content .card-webinfo .webinfo .webinfo-item div:first-child { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + padding-right: 20px; +} +@media screen and (min-width: 901px) { + #aside-content #card-toc { + right: 0 !important; + max-height: calc(100vh - 100px); + } +} +@media screen and (max-width: 1200px) { + #aside-content #card-toc { + position: fixed; + right: 55px; + bottom: 30px; + z-index: 100; + max-width: 380px; + max-height: calc(100% - 60px); + width: calc(100% - 80px); + -webkit-transition: -webkit-transform 0.3s; + -moz-transition: -moz-transform 0.3s; + -o-transition: -o-transform 0.3s; + -ms-transition: -ms-transform 0.3s; + transition: transform 0.3s; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -o-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transform-origin: right bottom; + -moz-transform-origin: right bottom; + -o-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom; + } + #aside-content #card-toc.open { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +#aside-content #card-toc .toc-percentage { + display: none; + float: right; + margin-top: -9px; + color: #a9a9a9; + font-style: italic; + font-size: 140%; +} +#aside-content #card-toc .toc-content { + overflow-y: scroll; + overflow-y: overlay; + margin: 0 -24px; + max-height: calc(100vh - 120px); + width: calc(100% + 48px); +} +@media screen and (max-width: 1200px) { + #aside-content #card-toc .toc-content { + max-height: calc(100vh - 140px); + } +} +#aside-content #card-toc .toc-content > * { + margin: 0 20px !important; +} +#aside-content #card-toc .toc-content > * > .toc-item > .toc-child { + margin-left: 10px; + padding-left: 10px; +} +#aside-content #card-toc .toc-content:not(.is-expand) .toc-child { + display: none; +} +@media screen and (max-width: 1200px) { + #aside-content #card-toc .toc-content:not(.is-expand) .toc-child { + display: block !important; + } +} +#aside-content #card-toc .toc-content:not(.is-expand) .toc-item.active .toc-child { + display: block; +} +#aside-content #card-toc .toc-content ol, +#aside-content #card-toc .toc-content li { + list-style: none; +} +#aside-content #card-toc .toc-content > ol { + padding: 0 !important; +} +#aside-content #card-toc .toc-content ol { + margin: 0; + padding-left: 18px; +} +#aside-content #card-toc .toc-content .toc-link { + display: block; + margin: 4px 0; + padding: 1px 6px; + color: var(--toc-link-color); + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} +#aside-content #card-toc .toc-content .toc-link:hover { + color: var(--anzhiyu-lighttext); +} +#aside-content #card-toc .toc-content .toc-link.active { + background: #425aef; + color: #fff; +} +#aside-content :only-child > .card-widget { + margin-top: 0; +} +#aside-content .card-more-btn { + float: right; + color: inherit; +} +#aside-content .card-more-btn:hover { + -webkit-animation: more-btn-move 1s infinite; + -moz-animation: more-btn-move 1s infinite; + -o-animation: more-btn-move 1s infinite; + -ms-animation: more-btn-move 1s infinite; + animation: more-btn-move 1s infinite; +} +#aside-content .card-announcement .item-headline i { + color: #f00; +} +.avatar-img { + width: 118px; + height: 118px; + right: 0; + top: 0; + border-radius: 500px; + object-fit: cover; + position: absolute; + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + border: var(--style-border-avatar); +} +.avatar-img img { + width: 100%; + height: 100%; + -webkit-transition: filter 375ms ease-in 0.2s, -webkit-transform 0.3s; + -moz-transition: filter 375ms ease-in 0.2s, -moz-transform 0.3s; + -o-transition: filter 375ms ease-in 0.2s, -o-transform 0.3s; + -ms-transition: filter 375ms ease-in 0.2s, -ms-transform 0.3s; + transition: filter 375ms ease-in 0.2s, transform 0.3s; + object-fit: cover; +} +.site-data { + display: table; + width: 100%; + table-layout: fixed; +} +.site-data > a { + display: table-cell; +} +.site-data > a div { + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; +} +.site-data > a:hover div { + color: #425aef !important; +} +.site-data > a .headline { + color: var(--font-color); +} +.site-data > a .length-num { + margin-top: -0.32em; + color: var(--text-highlight-color); + font-size: 1.2em; +} +@media screen and (min-width: 1200px) { + html.hide-aside .layout { + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + } + html.hide-aside .layout > .aside-content { + display: none; + } + html.hide-aside .layout > div:first-child { + width: 80%; + } +} +@media screen and (max-width: 1200px) { + .aside-content { + max-width: none !important; + display: none; + } +} +@media screen and (max-width: 768px) { + .aside-content { + display: block; + } +} +.page .sticky_layout { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +#aside-content >.card-widget.card-info { + background: var(--anzhiyu-card-bg); + -webkit-box-shadow: var(--anzhiyu-shadow-black); + box-shadow: var(--anzhiyu-shadow-black); + position: relative; + padding: 0; +} +@media screen and (max-width: 768px) { + #aside-content >.card-widget.card-info { + display: none; + } +} +#aside-content >.card-widget.card-info > .card-content { + padding: 1rem 1.2rem; + min-height: 320px; + position: relative; +} +#aside-content >.card-widget.card-info::before { + background: -webkit-linear-gradient(115deg, var(--anzhiyu-main), var(--anzhiyu-main-op-deep), var(--anzhiyu-main), var(--anzhiyu-main-op-deep)); + background: -moz-linear-gradient(115deg, var(--anzhiyu-main), var(--anzhiyu-main-op-deep), var(--anzhiyu-main), var(--anzhiyu-main-op-deep)); + background: -o-linear-gradient(115deg, var(--anzhiyu-main), var(--anzhiyu-main-op-deep), var(--anzhiyu-main), var(--anzhiyu-main-op-deep)); + background: -ms-linear-gradient(115deg, var(--anzhiyu-main), var(--anzhiyu-main-op-deep), var(--anzhiyu-main), var(--anzhiyu-main-op-deep)); + background: linear-gradient(-25deg, var(--anzhiyu-main), var(--anzhiyu-main-op-deep), var(--anzhiyu-main), var(--anzhiyu-main-op-deep)); + background-size: 400%; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + content: ''; + -webkit-animation: gradient 15s ease infinite; + -moz-animation: gradient 15s ease infinite; + -o-animation: gradient 15s ease infinite; + -ms-animation: gradient 15s ease infinite; + animation: gradient 15s ease infinite; +} +#aside-content .card-info:hover .author-info-avatar { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scale(0); + -moz-transform: scale(0); + -o-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); +} +#aside-content .card-info:hover .author-info__description { + opacity: 1; + -ms-filter: none; + filter: none; +} +#aside-content .card-info:hover .author-status { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scale(0); + -moz-transform: scale(0); + -o-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); +} +#aside-content .card-info .author-info-avatar { + margin: 45px auto; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + width: 118px; + height: 118px; + -webkit-transition: cubic-bezier(0.69, 0.39, 0, 1.21) 0.3s; + -moz-transition: cubic-bezier(0.69, 0.39, 0, 1.21) 0.3s; + -o-transition: cubic-bezier(0.69, 0.39, 0, 1.21) 0.3s; + -ms-transition: cubic-bezier(0.69, 0.39, 0, 1.21) 0.3s; + transition: cubic-bezier(0.69, 0.39, 0, 1.21) 0.3s; + -webkit-transform-origin: bottom; + -moz-transform-origin: bottom; + -o-transform-origin: bottom; + -ms-transform-origin: bottom; + transform-origin: bottom; + position: relative; +} +@media screen and (max-width: 768px) { + #aside-content .card-info .author-info-avatar { + display: none; + } +} +#aside-content .card-info #author-info__sayhi { + text-align: left; + color: var(--anzhiyu-white); + background: var(--anzhiyu-white-op); + font-size: 12px; + margin: auto; + padding: 2px 8px; + border-radius: 12px; + width: fit-content; + cursor: pointer; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +#aside-content .card-info #author-info__sayhi:hover { + background: var(--anzhiyu-card-bg); + color: var(--anzhiyu-fontcolor); + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} +#aside-content .card-info .banner-button-group .banner-button { + border-radius: 35px; + background: var(--anzhiyu-white-op); +} +#aside-content .card-info .banner-button-group .banner-button:hover { + background: var(--anzhiyu-white); + color: var(--anzhiyu-black); +} +[data-theme="dark"] #aside-content > .card-info { + background: var(--anzhiyu-card-bg); +} +@media screen and (max-width: 992px) { + #aside-content > .card-info { + background-size: 100% 70%; + } +} +@-moz-keyframes more-btn-move { + 0%, 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 50% { + -webkit-transform: translateX(3px); + -moz-transform: translateX(3px); + -o-transform: translateX(3px); + -ms-transform: translateX(3px); + transform: translateX(3px); + } +} +@-webkit-keyframes more-btn-move { + 0%, 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 50% { + -webkit-transform: translateX(3px); + -moz-transform: translateX(3px); + -o-transform: translateX(3px); + -ms-transform: translateX(3px); + transform: translateX(3px); + } +} +@-o-keyframes more-btn-move { + 0%, 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 50% { + -webkit-transform: translateX(3px); + -moz-transform: translateX(3px); + -o-transform: translateX(3px); + -ms-transform: translateX(3px); + transform: translateX(3px); + } +} +@keyframes more-btn-move { + 0%, 100% { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -o-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + 50% { + -webkit-transform: translateX(3px); + -moz-transform: translateX(3px); + -o-transform: translateX(3px); + -ms-transform: translateX(3px); + transform: translateX(3px); + } +} +@-moz-keyframes toc-open { + 0% { + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } + 100% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +@-webkit-keyframes toc-open { + 0% { + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } + 100% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +@-o-keyframes toc-open { + 0% { + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } + 100% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +@keyframes toc-open { + 0% { + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } + 100% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +@-moz-keyframes toc-close { + 0% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + 100% { + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } +} +@-webkit-keyframes toc-close { + 0% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + 100% { + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } +} +@-o-keyframes toc-close { + 0% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + 100% { + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } +} +@keyframes toc-close { + 0% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + 100% { + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -o-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); + } +} +.banners-title { + top: 2.9rem; + left: 3rem; + position: absolute; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +.banners-title-big { + font-size: 36px; + line-height: 1; + font-weight: bold; + margin-bottom: 8px; +} +.banners-title-small { + font-size: 12px; + line-height: 1; + color: var(--anzhiyu-secondtext); + margin-top: 8px; + margin-bottom: 0.5rem; +} +.banner-button { + padding: 8px 12px; + background: var(--anzhiyu-fontcolor); + border-radius: 12px; + color: var(--anzhiyu-card-bg); + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + z-index: 1; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + cursor: pointer; + -webkit-box-shadow: var(--anzhiyu-shadow-black); + box-shadow: var(--anzhiyu-shadow-black); +} +.banner-button.secondary { + background: var(--anzhiyu-secondbg); + border: var(--style-border-always); + color: var(--anzhiyu-lighttext); + margin-right: 1rem; + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); +} +#article-container > header { + height: 0; + text-indent: -9999px; +} +#article-container > header time, +#article-container > header span { + height: 0; + display: block; +} +#article-container > header h1 { + z-index: -1; + pointer-events: none; +} +#article-container > header a { + background: none !important; + border-bottom: none !important; +} +#post-comment .comment-head { + margin-bottom: 20px; + font-size: 0.8em !important; + margin-bottom: 0.5rem; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +#post-comment .comment-head .comment-headline { + display: inline-block; + vertical-align: middle; + font-weight: 700; + font-size: 1.43em; +} +#post-comment .comment-head .comment-randomInfo { + margin-left: auto; + font-size: 13px; +} +#post-comment .comment-head .comment-switch { + display: inline-block; + float: right; + margin: 2px auto 0; + padding: 4px 16px; + width: max-content; + border-radius: 8px; + background: #f6f8fa; +} +#post-comment .comment-head .comment-switch .first-comment { + color: #425aef; +} +#post-comment .comment-head .comment-switch .second-comment { + color: #ff7242; +} +#post-comment .comment-head .comment-switch #switch-btn { + position: relative; + display: inline-block; + margin: -4px 8px 0; + width: 42px; + height: 22px; + border-radius: 34px; + background-color: #425aef; + vertical-align: middle; + cursor: pointer; + -webkit-transition: 0.4s; + -moz-transition: 0.4s; + -o-transition: 0.4s; + -ms-transition: 0.4s; + transition: 0.4s; +} +#post-comment .comment-head .comment-switch #switch-btn:before { + position: absolute; + bottom: 4px; + left: 4px; + width: 14px; + height: 14px; + border-radius: 50%; + background-color: #fff; + content: ''; + -webkit-transition: 0.4s; + -moz-transition: 0.4s; + -o-transition: 0.4s; + -ms-transition: 0.4s; + transition: 0.4s; +} +#post-comment .comment-wrap > div { + -webkit-animation: tabshow 0.5s; + -moz-animation: tabshow 0.5s; + -o-animation: tabshow 0.5s; + -ms-animation: tabshow 0.5s; + animation: tabshow 0.5s; +} +#post-comment .comment-wrap > div:nth-child(2) { + display: none; +} +#post-comment.move #switch-btn { + background-color: #ff7242; +} +#post-comment.move #switch-btn:before { + -webkit-transform: translateX(20px); + -moz-transform: translateX(20px); + -o-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); +} +#post-comment.move .comment-wrap > div:first-child { + display: none; +} +#post-comment.move .comment-wrap > div:last-child { + display: block; +} +#footer { + position: relative; + background: -webkit-linear-gradient(270deg, var(--anzhiyu-card-bg-none) 0%, var(--anzhiyu-card-bg) 25%); + background: -moz-linear-gradient(270deg, var(--anzhiyu-card-bg-none) 0%, var(--anzhiyu-card-bg) 25%); + background: -o-linear-gradient(270deg, var(--anzhiyu-card-bg-none) 0%, var(--anzhiyu-card-bg) 25%); + background: -ms-linear-gradient(270deg, var(--anzhiyu-card-bg-none) 0%, var(--anzhiyu-card-bg) 25%); + background: linear-gradient(180deg, var(--anzhiyu-card-bg-none) 0%, var(--anzhiyu-card-bg) 25%); + background-attachment: scroll; + background-position: bottom; + background-size: cover; +} +@media screen and (max-width: 768px) { + #footer { + z-index: 3; + margin-top: -1px; + } +} +#footer-bar { + padding: 1rem; + color: var(--anzhiyu-fontcolor); + margin-top: 1rem; + background: var(--anzhiyu-secondbg); + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + overflow: hidden; + z-index: 1002; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +#footer-bar a:hover { + color: var(--anzhiyu-lighttext); +} +#footer-bar .footer-bar-link { + margin-top: 8px; + margin-bottom: 8px; + margin-right: 1rem; + color: var(--anzhiyu-fontcolor); + font-size: 1rem; + font-weight: bold; + white-space: nowrap; +} +#footer-bar .footer-bar-link.cc i { + margin-right: 0.7rem; + font-size: 18px; +} +#footer-bar .footer-bar-links { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + max-width: 1400px; + width: 100%; + margin: 0 auto; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + line-height: 1; +} +#footer-bar .footer-bar-links .footer-bar-left { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + min-height: 32px; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +#footer-bar .footer-bar-links .footer-bar-right { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +#footer-wrap { + position: relative; + padding: 40px 20px 0; + color: var(--light-grey); + text-align: center; +} +@media screen and (max-width: 768px) { + #footer-wrap { + padding: 0; + } +} +#footer-wrap #footer_deal { + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +@media screen and (max-width: 768px) { + #footer-wrap #footer_deal { + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } +} +#footer-wrap #footer_deal .deal_link { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + margin: 1rem 27px; + color: var(--anzhiyu-card-bg); + border-radius: 3rem; + width: 32px; + height: 32px; + background: var(--anzhiyu-fontcolor); + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +#footer-wrap #footer_deal .deal_link:hover { + color: var(--anzhiyu-white); + background: var(--anzhiyu-main); +} +#footer-wrap #footer_deal .footer_mini_logo { + width: 50px; + height: 50px; + object-fit: cover; + border-radius: 50%; + margin: 0 1rem; + cursor: pointer; + -webkit-transition: cubic-bezier(0, 0, 0, 1.29) 0.5s; + -moz-transition: cubic-bezier(0, 0, 0, 1.29) 0.5s; + -o-transition: cubic-bezier(0, 0, 0, 1.29) 0.5s; + -ms-transition: cubic-bezier(0, 0, 0, 1.29) 0.5s; + transition: cubic-bezier(0, 0, 0, 1.29) 0.5s; + -webkit-user-select: none; +} +@media screen and (max-width: 768px) { + #footer-wrap #footer_deal .footer_mini_logo { + display: none; + } +} +#footer-wrap #anzhiyu-footer { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + width: 100%; + max-width: 1200px; + margin: 1rem auto; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + padding: 0 2rem; +} +#footer-wrap #anzhiyu-footer .footer-group { + min-width: 120px; +} +#footer-wrap #anzhiyu-footer .footer-group .footer-title-group { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +#footer-wrap #anzhiyu-footer .footer-group .footer-title-group a { + margin-left: 8px; + line-height: 32px; +} +#footer-wrap #anzhiyu-footer .footer-group .footer-title-group i { + line-height: 1; + color: var(--anzhiyu-secondtext); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + font-size: 16px; + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); +} +#footer-wrap #anzhiyu-footer .footer-title { + color: var(--anzhiyu-secondtext); + font-size: 1rem; + text-align: left; + font-weight: 600; + margin: 1rem 0; +} +#footer-wrap #anzhiyu-footer .footer-links { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +#footer-wrap #anzhiyu-footer .footer-item { + font-size: 1rem; + line-height: 1rem; + margin: 8px 0; + color: var(--anzhiyu-fontcolor); + margin-right: auto; + overflow: hidden; + white-space: nowrap; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + max-width: 120px; + cursor: pointer; + padding: 2px 0; + text-decoration: none; +} +#footer-wrap #anzhiyu-footer .footer-item:hover { + color: var(--anzhiyu-theme); +} +#footer-wrap a { + color: var(--light-grey); +} +#footer-wrap i { + font-size: 1rem; + line-height: 1rem; + height: 1rem; +} +#footer-wrap .footer-separator { + margin: 0 4px; +} +#footer-wrap .icp-icon { + padding: 0 4px; + max-height: 1.4em; + width: auto; + vertical-align: text-bottom; +} +@media screen and (max-width: 768px) { + [data-theme=light] .post #footer { + background: -webkit-linear-gradient(270deg, var(--anzhiyu-background) 0%, var(--anzhiyu-card-bg) 25%); + background: -moz-linear-gradient(270deg, var(--anzhiyu-background) 0%, var(--anzhiyu-card-bg) 25%); + background: -o-linear-gradient(270deg, var(--anzhiyu-background) 0%, var(--anzhiyu-card-bg) 25%); + background: -ms-linear-gradient(270deg, var(--anzhiyu-background) 0%, var(--anzhiyu-card-bg) 25%); + background: linear-gradient(180deg, var(--anzhiyu-background) 0%, var(--anzhiyu-card-bg) 25%); + } +} +#page-header { + position: relative; + width: 100%; + -webkit-transition: all 0.5s ease 0s; + -moz-transition: all 0.5s ease 0s; + -o-transition: all 0.5s ease 0s; + -ms-transition: all 0.5s ease 0s; + transition: all 0.5s ease 0s; +} +#page-header #nav { + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +#page-header.full_page { + height: 100vh; + background-attachment: fixed; + border-radius: 0; +} +#page-header #site-title, +#page-header #site-subtitle, +#page-header #scroll-down .scroll-down-effects { + text-align: center; + text-shadow: 2px 2px 4px rgba(0,0,0,0.15); + line-height: 1.5; +} +#page-header #site-title { + margin: 0; + color: var(--white); + font-size: 1.85em; +} +@media screen and (min-width: 768px) { + #page-header #site-title { + font-size: 2.85em; + } +} +#page-header #site-subtitle { + color: var(--light-grey); + font-size: 1.15em; +} +@media screen and (min-width: 768px) { + #page-header #site-subtitle { + font-size: 1.72em; + } +} +#page-header #site_social_icons { + display: none; + margin: 0 auto; + width: 300px; + text-align: center; +} +@media screen and (max-width: 768px) { + #page-header #site_social_icons { + display: block; + } +} +#page-header #site_social_icons .social-icon { + margin: 0 10px; + color: var(--light-grey); + text-shadow: 2px 2px 4px rgba(0,0,0,0.15); + font-size: 1.43em; +} +#page-header #scroll-down { + position: absolute; + bottom: 0; + width: 100%; + cursor: pointer; + z-index: 11; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} +#page-header #scroll-down .scroll-down-effects { + position: relative; + width: 100%; + color: var(--light-grey); + font-size: 30px; +} +#page-header.not-home-page { + height: 400px; +} +@media screen and (max-width: 768px) { + #page-header.not-home-page { + height: 280px; + } +} +#page-header #page-site-info { + position: absolute; + top: 200px; + padding: 0 10px; + width: 100%; +} +@media screen and (max-width: 768px) { + #page-header #page-site-info { + top: 140px; + } +} +#page-header.post-bg { + height: 31.25rem; + -webkit-transition: 0.6s; + -moz-transition: 0.6s; + -o-transition: 0.6s; + -ms-transition: 0.6s; + transition: 0.6s; + overflow: hidden; + background-color: transparent; +} +#page-header.post-bg #nav { + -webkit-transition: all 0.5s, border 0.3s; + -moz-transition: all 0.5s, border 0.3s; + -o-transition: all 0.5s, border 0.3s; + -ms-transition: all 0.5s, border 0.3s; + transition: all 0.5s, border 0.3s; +} +#page-header.post-bg .post-meta:has(.bldbanner), +#page-header.post-bg .post-meta:has(.bili-banner), +#page-header.post-bg .post-meta:has(.blqbanner) { + pointer-events: all; +} +#page-header.post-bg .bili-banner { + margin-top: 0 !important; +} +#page-header.post-bg #post-info:has(.bldbanner), +#page-header.post-bg #post-info:has(.bili-banner), +#page-header.post-bg #post-info:has(.blqbanner) { + pointer-events: none; +} +#page-header.post-bg:has(.bldbanner), +#page-header.post-bg:has(.blqbanner) { + height: 15rem; +} +#page-header.post-bg:has(.bldbanner) img, +#page-header.post-bg:has(.blqbanner) img { + border-radius: 0px; +} +#page-header.post-bg:has(.bili-banner) { + height: 11rem; +} +#page-header.post-bg:has(.bili-banner) img { + border-radius: 0px; +} +#page-header.post-bg #post-top-cover { + width: 70%; + height: 100%; + position: relative; + margin: 0 -20% 0 auto; + overflow: hidden; + margin-bottom: 0; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + -moz-transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + -o-transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + -ms-transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + will-change: transform; + filter: blur(10px) brightness(60%); + -webkit-animation: none; + -moz-animation: none; + -o-animation: none; + -ms-animation: none; + animation: none; + -webkit-transition: filter 0s; + -moz-transition: filter 0s; + -o-transition: filter 0s; + -ms-transition: filter 0s; + transition: filter 0s; + margin: auto; + width: auto; +} +#page-header.post-bg #post-top-cover::after { + display: none; +} +#page-header.post-bg #post-top-cover img { + border-radius: 0; +} +@media screen and (max-width: 768px) { + #page-header.post-bg #post-top-cover { + margin: 0 0 0 auto; + -webkit-transform: rotate(0deg) translateY(0) scale(1); + -moz-transform: rotate(0deg) translateY(0) scale(1); + -o-transform: rotate(0deg) translateY(0) scale(1); + -ms-transform: rotate(0deg) translateY(0) scale(1); + transform: rotate(0deg) translateY(0) scale(1); + filter: blur(0px); + width: 100%; + position: absolute; + height: 100vh; + z-index: 1; + } +} +#page-header.post-bg #post-top-cover::after { + position: absolute; + content: ""; + width: 100%; + height: 100%; + top: 0; + left: 0; + -webkit-box-shadow: 110px -130px 300px 60px var(--anzhiyu-bar-background) inset; + box-shadow: 110px -130px 300px 60px var(--anzhiyu-bar-background) inset; +} +@media screen and (max-width: 768px) { + #page-header.post-bg #post-top-cover::after { + -webkit-box-shadow: 0 0 205px 59px var(--anzhiyu-main) inset; + box-shadow: 0 0 205px 59px var(--anzhiyu-main) inset; + } +} +#page-header.post-bg #post-top-cover #post-top-bg { + width: 100%; + height: 100%; + object-fit: cover; + min-width: 50vw; + min-height: 20rem; +} +@media screen and (min-width: 768px) { + #page-header.post-bg #post-top-cover #post-top-bg { + -webkit-animation: slide-in 0.6s 0.3s backwards; + -moz-animation: slide-in 0.6s 0.3s backwards; + -o-animation: slide-in 0.6s 0.3s backwards; + -ms-animation: slide-in 0.6s 0.3s backwards; + animation: slide-in 0.6s 0.3s backwards; + } +} +@media screen and (max-width: 768px) { + #page-header.post-bg #post-top-cover #post-top-bg { + min-height: 15rem !important; + height: 100% !important; + opacity: 1 !important; + -ms-filter: none !important; + filter: none !important; + } +} +#page-header.post-bg #nav { + backdrop-filter: none; + background: transparent; + border-bottom: none; +} +#page-header.post-bg.nav-fixed #nav { + background: var(--anzhiyu-card-bg); + outline: 1px solid var(--anzhiyu-card-border); + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -o-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); +} +@media screen and (max-width: 768px) { + #page-header.post-bg.nav-fixed #nav { + border-bottom: none; + } +} +@media screen and (max-width: 768px) { + #page-header.post-bg { + margin-bottom: -12px; + -webkit-transition: 0s !important; + -moz-transition: 0s !important; + -o-transition: 0s !important; + -ms-transition: 0s !important; + transition: 0s !important; + min-height: 450px; + } + #page-header.post-bg.nav-fixed #nav { + background: var(--anzhiyu-card-bg); + outline: 1px solid var(--anzhiyu-card-border); + } +} +#page-header #post-info { + position: absolute; + top: 0; + left: calc((100% - 1400px + 3rem) / 2); + width: calc(100% - (100% - 1400px + 3rem)); + height: 100%; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: start; + -moz-box-align: start; + -o-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + z-index: 3; +} +@media screen and (min-width: 768px) { + #page-header #post-info { + --anzhiyu-header-translateY: 0; + -webkit-animation: post-info-slide-in 0.6s 0.3s backwards; + -moz-animation: post-info-slide-in 0.6s 0.3s backwards; + -o-animation: post-info-slide-in 0.6s 0.3s backwards; + -ms-animation: post-info-slide-in 0.6s 0.3s backwards; + animation: post-info-slide-in 0.6s 0.3s backwards; + -webkit-transform: scale(var(--anzhiyu-header-info-scale)) translateY(var(--anzhiyu-header-translateY)); + -moz-transform: scale(var(--anzhiyu-header-info-scale)) translateY(var(--anzhiyu-header-translateY)); + -o-transform: scale(var(--anzhiyu-header-info-scale)) translateY(var(--anzhiyu-header-translateY)); + -ms-transform: scale(var(--anzhiyu-header-info-scale)) translateY(var(--anzhiyu-header-translateY)); + transform: scale(var(--anzhiyu-header-info-scale)) translateY(var(--anzhiyu-header-translateY)); + -webkit-transform-origin: left top; + -moz-transform-origin: left top; + -o-transform-origin: left top; + -ms-transform-origin: left top; + transform-origin: left top; + will-change: transform; + } +} +@media screen and (max-width: 1400px) { + #page-header #post-info { + padding: 0 3.5rem; + width: 100%; + left: 0; + } +} +@media screen and (max-width: 768px) { + #page-header #post-info { + padding: 11rem 6% 0; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + } +} +#page-header.not-top-img { + margin-bottom: 10px; + height: 60px; + background: 0; +} +#page-header.not-top-img #nav #menus .menus_item:hover > a { + background: var(--anzhiyu-main); +} +#page-header.not-top-img #travellings_button::after { + background: var(--anzhiyu-main) !important; +} +#page-header.not-top-img #nav #blog_name .back-home-button:hover, +#page-header.not-top-img #nav #blog_name #site-name:hover, +#page-header.not-top-img #nav #nav-right .nav-button a:hover, +#page-header.not-top-img #nav #nav-right #toggle-menu:hover { + color: var(--anzhiyu-white); + background: var(--anzhiyu-main); + -webkit-box-shadow: var(--anzhiyu-shadow-main); + box-shadow: var(--anzhiyu-shadow-main); +} +#page-header.not-top-img .post-meta-categories { + background: rgba(0,0,0,0.2); +} +#page-header.not-top-img #nav #blog_name a, +#page-header.not-top-img #nav .mask-name-container a, +#page-header.not-top-img #nav #menus a, +#page-header.not-top-img #nav #nav-right .nav-button a, +#page-header.not-top-img #nav #nav-right #toggle-menu a { + color: var(--font-color); + text-shadow: none; +} +#page-header.not-top-img #nav #center-console + label i { + background: var(--font-color); +} +#page-header.nav-fixed #nav { + position: fixed; + z-index: 91; + background: var(--anzhiyu-card-bg); + outline: 1px solid var(--anzhiyu-card-border); + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -o-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + top: 0; +} +#page-header.nav-fixed #nav #toggle-menu { + color: var(--font-color); + text-shadow: none; + -webkit-transition: background 0.3s ease-in-out, color 0s ease-in-out; + -moz-transition: background 0.3s ease-in-out, color 0s ease-in-out; + -o-transition: background 0.3s ease-in-out, color 0s ease-in-out; + -ms-transition: background 0.3s ease-in-out, color 0s ease-in-out; + transition: background 0.3s ease-in-out, color 0s ease-in-out; +} +#page-header.nav-fixed #nav #blog_name a, +#page-header.nav-fixed #nav .mask-name-container a, +#page-header.nav-fixed #nav #menus a, +#page-header.nav-fixed #nav #nav-right .nav-button a, +#page-header.nav-fixed #nav #nav-right #toggle-menu a { + color: var(--font-color); + text-shadow: none; + -webkit-transition: background 0.3s ease-in-out, color 0s ease-in-out; + -moz-transition: background 0.3s ease-in-out, color 0s ease-in-out; + -o-transition: background 0.3s ease-in-out, color 0s ease-in-out; + -ms-transition: background 0.3s ease-in-out, color 0s ease-in-out; + transition: background 0.3s ease-in-out, color 0s ease-in-out; +} +#page-header.nav-fixed #name-container { + z-index: 101; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + top: 10px; +} +#page-header.nav-fixed #name-container #page-name { + display: inline; + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + line-height: 2; +} +@media screen and (min-width: 768px) { + #page-header.nav-fixed #name-container #page-name { + max-width: 15.5rem; + } +} +@media screen and (min-width: 900px) { + #page-header.nav-fixed #name-container #page-name { + max-width: 25.5rem; + } +} +@media screen and (min-width: 1200px) { + #page-header.nav-fixed #name-container #page-name { + max-width: 35.5rem; + } +} +@media screen and (min-width: 2000px) { + #page-header.nav-fixed #name-container #page-name { + max-width: 45.5rem; + } +} +#page-header.nav-fixed #nav #menus { + z-index: 100; +} +#page-header.nav-fixed #nav #menus div.menus_items { + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + height: 40px; + margin: auto 0; + -webkit-transform: translateY(-60px); + -moz-transform: translateY(-60px); + -o-transform: translateY(-60px); + -ms-transform: translateY(-60px); + transform: translateY(-60px); + will-change: transform; +} +#page-header.nav-fixed.nav-visible #page-name { + z-index: 100; + top: 60px; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +#page-header.nav-fixed.nav-visible #nav #menus div.menus_items { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + -o-transform: translateY(0px); + -ms-transform: translateY(0px); + transform: translateY(0px); + will-change: transform; +} +#page h1.page-title { + margin: 8px 0 20px; +} +#post > #post-info { + margin-bottom: 30px; +} +#post > #post-info .post-title { + border-bottom: 1px solid var(--light-grey); + color: var(--text-highlight-color); +} +#post > #post-info .post-title .post-edit-link { + float: right; +} +#post > #post-info #post-meta, +#post > #post-info #post-meta a { + color: #78818a; +} +@media screen and (max-width: 768px) { + #post-info:after { + display: none; + -webkit-transition: 0; + -moz-transition: 0; + -o-transition: 0; + -ms-transition: 0; + transition: 0; + } +} +#post-info .post-title { + color: var(--white); + line-height: 1.5; + font-weight: 700; + font-size: 3.3rem; + text-align: left; + margin: 1rem 0 1rem 0; + -webkit-line-clamp: 2; + padding: 0; + overflow: hidden; +} +@media screen and (max-width: 768px) { + #post-info .post-title { + font-size: 1.5rem; + -webkit-line-clamp: 3; + margin: 0.2rem auto !important; + text-align: center; + z-index: 4; + } +} +#post-info .post-title .post-edit-link { + padding-left: 10px; +} +#post-info #post-meta { + color: var(--light-grey); + font-size: 95%; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + width: 50rem; + max-width: 100%; + -webkit-box-align: start; + -moz-box-align: start; + -o-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +@media screen and (min-width: 768px) { + #post-info #post-meta > .meta-secondline > span:first-child { + display: none; + } +} +@media screen and (max-width: 768px) { + #post-info #post-meta { + font-size: 90%; + z-index: 4; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + } + #post-info #post-meta > .meta-firstline, + #post-info #post-meta > .meta-secondline { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + font-size: 90%; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + } +} +#post-info #post-meta .post-meta-separator { + margin: 0 8px; +} +#post-info #post-meta .post-meta-icon { + margin-right: 4px; +} +#post-info #post-meta .post-meta-label { + margin-right: 4px; +} +#post-info #post-meta .post-meta-categories a:not([data-fancybox="gallery"]) { + font-weight: 500; + text-decoration: none; + padding: 0 0.2em; +} +#post-info #post-meta .post-meta-categories a:not([data-fancybox="gallery"]):hover { + color: var(--anzhiyu-white); + background-color: var(--anzhiyu-main); + border-radius: 4px; +} +#post-info #post-meta a { + color: var(--light-grey); + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; +} +#post-info #post-meta a:hover { + color: #425aef; + text-decoration: underline; +} +#nav { + position: fixed; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + top: 0; + z-index: 90; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + padding: 0 calc((100% - 1400px + 3rem) / 2); + width: 100%; + height: 60px; + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + outline: 1px solid var(--anzhiyu-none); +} +#nav i { + font-size: 1.2rem; + font-weight: bold; +} +@media screen and (max-width: 768px) { + #nav { + padding: 0 16px; + } +} +#nav #toggle-menu { + display: none; + padding: 2px 0 0 6px; + vertical-align: top; + border-radius: 50px; +} +#nav #toggle-menu:hover { + color: var(--white) !important; +} +#nav #blog_name a, +#nav .mask-name-container a, +#nav #menus a, +#nav #nav-right .nav-button a, +#nav #nav-right #toggle-menu a { + color: var(--light-grey); +} +#nav #blog_name a:hover, +#nav .mask-name-container a:hover, +#nav #menus a:hover, +#nav #nav-right .nav-button a:hover, +#nav #nav-right #toggle-menu a:hover { + color: var(--white); +} +#nav #site-name { + font-weight: bold; + cursor: pointer; + -webkit-transition: 0.3s !important; + -moz-transition: 0.3s !important; + -o-transition: 0.3s !important; + -ms-transition: 0.3s !important; + transition: 0.3s !important; +} +#nav .menus_items { + display: inline; + font-size: 1.3em; +} +#nav .menus_items .menus_item { + padding: 0 0.4rem; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + margin: auto; + position: relative; + border-radius: 30px; +} +#nav .menus_items .menus_item:first-child .menus_item_child::after { + position: absolute; + top: -60px; + left: 0; + width: 50%; + height: 60px; + content: ""; +} +#nav .menus_items .menus_item:last-child .menus_item_child::after { + position: absolute; + top: -60px; + right: 0; + width: 50%; + height: 60px; + content: ""; +} +#nav .menus_items .menus_item:hover .menus_item_child { + border: var(--style-border-hover); + -webkit-box-shadow: var(--anzhiyu-shadow-main); + box-shadow: var(--anzhiyu-shadow-main); + opacity: 1; + -ms-filter: none; + filter: none; + pointer-events: all; + -webkit-transform: translateY(0) scale(1); + -moz-transform: translateY(0) scale(1); + -o-transform: translateY(0) scale(1); + -ms-transform: translateY(0) scale(1); + transform: translateY(0) scale(1); +} +#nav .menus_items .menus_item:hover > a > i:last-child { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -o-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +#nav .menus_items .menus_item > a > i:last-child { + padding: 4px; + -webkit-transition: -webkit-transform 0.2s; + -moz-transition: -moz-transform 0.2s; + -o-transition: -o-transform 0.2s; + -ms-transition: -ms-transform 0.2s; + transition: transform 0.2s; +} +#nav .menus_items .menus_item .menus_item_child { + position: absolute; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + width: max-content; + border-radius: 5px; + top: 35px; + -webkit-box-shadow: var(--anzhiyu-shadow-black); + box-shadow: var(--anzhiyu-shadow-black); + border: var(--style-border); + -webkit-transition: 0.2s; + -moz-transition: 0.2s; + -o-transition: 0.2s; + -ms-transition: 0.2s; + transition: 0.2s; + background-color: var(--anzhiyu-card-bg); + border-radius: 50px; + right: auto; + left: auto; + padding: 6px 4px; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + line-height: 35px; + -webkit-transform: translateY(-10px) scale(0); + -moz-transform: translateY(-10px) scale(0); + -o-transform: translateY(-10px) scale(0); + -ms-transform: translateY(-10px) scale(0); + transform: translateY(-10px) scale(0); + -webkit-transform-origin: top; + -moz-transform-origin: top; + -o-transform-origin: top; + -ms-transform-origin: top; + transform-origin: top; + pointer-events: none; + margin-top: 8px; +} +#nav .menus_items .menus_item .menus_item_child:before { + position: absolute; + top: -12px; + left: 0; + width: 100%; + height: 16px; + content: ''; +} +#nav .menus_items .menus_item .menus_item_child li { + list-style: none; +} +#nav .menus_items .menus_item .menus_item_child li:hover { + background: var(--text-bg-hover); +} +#nav .menus_items .menus_item .menus_item_child li:first-child { + border-top-left-radius: 50px; + border-top-right-radius: 50px; +} +#nav .menus_items .menus_item .menus_item_child li:last-child { + border-bottom-right-radius: 50px; + border-bottom-left-radius: 50px; +} +#nav .menus_items .menus_item .menus_item_child li a { + display: inline-block; + padding: 0.5625rem 1rem; + width: 100%; + color: var(--font-color) !important; + text-shadow: none !important; +} +#nav .menus_items .menus_item .menus_item_child li a:hover { + color: var(--anzhiyu-white) !important; + padding: 0.125rem 1.25rem; + -webkit-transform: scale(1) !important; + -moz-transform: scale(1) !important; + -o-transform: scale(1) !important; + -ms-transform: scale(1) !important; + transform: scale(1) !important; + background: var(--anzhiyu-main) !important; + -webkit-box-shadow: var(--anzhiyu-shadow-main); + box-shadow: var(--anzhiyu-shadow-main); + -webkit-transform: scale(1) !important; + -moz-transform: scale(1) !important; + -o-transform: scale(1) !important; + -ms-transform: scale(1) !important; + transform: scale(1) !important; +} +#nav.hide-menu #toggle-menu { + display: inline-block !important; +} +#nav.hide-menu #toggle-menu .site-page { + font-size: inherit; + width: 30px; + height: 30px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} +#nav.hide-menu #toggle-menu .site-page i { + font-size: 1.35rem; +} +#nav.hide-menu .menus_items { + display: none; +} +#nav.hide-menu #search-button span { + display: none; +} +#nav #search-button { + display: inline; + padding: 0 0 0 14px; +} +#nav .site-page { + position: relative; + padding-bottom: 6px; + font-size: 0.78em; + cursor: pointer; +} +#nav .site-page:hover { + color: var(--anzhiyu-white) !important; +} +.main-hero-waves-area { + width: 100%; + position: absolute; + left: 0; + bottom: -11px; + z-index: 5; + pointer-events: none; +} +.waves-area .waves-svg { + width: 100%; + height: 3.75rem; +} +.parallax > use { + -webkit-animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; + -moz-animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; + -o-animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; + -ms-animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; + animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; + will-change: transform; +} +.parallax > use:nth-child(1) { + -webkit-animation-delay: -2s; + -moz-animation-delay: -2s; + -o-animation-delay: -2s; + -ms-animation-delay: -2s; + animation-delay: -2s; + -webkit-animation-duration: 7s; + -moz-animation-duration: 7s; + -o-animation-duration: 7s; + -ms-animation-duration: 7s; + animation-duration: 7s; + fill: rgba(247,249,254,0.741); +} +.parallax > use:nth-child(2) { + -webkit-animation-delay: -3s; + -moz-animation-delay: -3s; + -o-animation-delay: -3s; + -ms-animation-delay: -3s; + animation-delay: -3s; + -webkit-animation-duration: 10s; + -moz-animation-duration: 10s; + -o-animation-duration: 10s; + -ms-animation-duration: 10s; + animation-duration: 10s; + fill: rgba(247,249,254,0.51); +} +.parallax > use:nth-child(3) { + -webkit-animation-delay: -4s; + -moz-animation-delay: -4s; + -o-animation-delay: -4s; + -ms-animation-delay: -4s; + animation-delay: -4s; + -webkit-animation-duration: 13s; + -moz-animation-duration: 13s; + -o-animation-duration: 13s; + -ms-animation-duration: 13s; + animation-duration: 13s; + fill: rgba(247,249,254,0.212); +} +.parallax > use:nth-child(4) { + -webkit-animation-delay: -5s; + -moz-animation-delay: -5s; + -o-animation-delay: -5s; + -ms-animation-delay: -5s; + animation-delay: -5s; + -webkit-animation-duration: 20s; + -moz-animation-duration: 20s; + -o-animation-duration: 20s; + -ms-animation-duration: 20s; + animation-duration: 20s; + fill: #f7f9fe; +} +[data-theme="dark"] .parallax > use:nth-child(1) { + fill: rgba(24,23,29,0.784); +} +[data-theme="dark"] .parallax > use:nth-child(2) { + fill: rgba(24,23,29,0.502); +} +[data-theme="dark"] .parallax > use:nth-child(3) { + fill: rgba(24,23,29,0.243); +} +[data-theme="dark"] .parallax > use:nth-child(4) { + fill: #000; +} +#post-firstinfo { + text-align: left; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + white-space: nowrap; + -webkit-user-select: none; +} +@media screen and (max-width: 768px) { + #post-firstinfo { + z-index: 4; + } +} +#post-firstinfo .meta-firstline { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + height: 32px; +} +#post-firstinfo .meta-firstline a.post-meta-original { + background: var(--anzhiyu-white-op); + color: var(--anzhiyu-white); + padding: 0 0.7rem; + font-size: 0.9rem; + margin: auto; + border-radius: 8px; + font-weight: bold; + height: 32px; + line-height: 32px; + width: 100%; + height: 100%; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; +} +#post-firstinfo .meta-firstline span.post-meta-categories { + color: var(--anzhiyu-white); + font-size: 0.9rem; + margin: auto; + font-weight: bold; + height: 32px; + line-height: 32px; + width: 100%; + height: 100%; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; +} +#post-firstinfo .meta-firstline span.post-meta-categories i { + display: none; +} +#post-firstinfo .meta-firstline span.post-meta-categories a.post-meta-categories { + border-radius: 8px; + padding: 0 0.7rem; + background: var(--anzhiyu-white-op); + color: var(--anzhiyu-white); + font-size: 0.9rem; + width: 100%; + height: 100%; + font-weight: bold; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + margin-left: 0.4rem; +} +#post-firstinfo .meta-firstline .article-meta.tags { + margin-left: 1.2rem; +} +@media screen and (max-width: 768px) { + #post-firstinfo .meta-firstline .article-meta.tags { + display: none; + } +} +#post-firstinfo .meta-firstline .article-meta__tags { + color: var(--anzhiyu-white); + opacity: 0.8; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + filter: alpha(opacity=80); + margin-right: 8px; +} +#post-firstinfo .meta-firstline .anzhiyu-icon-hashtag:before { + font-size: 17px; +} +#post-firstinfo .meta-firstline .anzhiyu-icon-location-dot { + margin-right: 4px; +} +#post #post-info #post-firstinfo .meta-firstline a.post-meta-original { + background: var(--anzhiyu-black); +} +#post #post-info #post-firstinfo .meta-firstline .article-meta__tags { + color: var(--anzhiyu-black); +} +@media screen and (max-width: 768px) { + .layout > div:first-child:not(.recent-posts) { + z-index: 10; + } + .post-bg:has(.bldbanner) #post-info:after, + .post-bg:has(.bili-banner) #post-info:after, + .post-bg:has(.blqbanner) #post-info:after { + -webkit-box-shadow: 0px -214px 287px 45px var(--anzhiyu-black-op) inset; + box-shadow: 0px -214px 287px 45px var(--anzhiyu-black-op) inset; + } + .waves-area .waves-svg { + height: 40px; + min-height: 40px; + } + .main-hero-waves-area { + display: none; + visibility: hidden; + } +} +@-moz-keyframes move-forever { + 0% { + -webkit-transform: translate3d(-90px, 0, 0); + -moz-transform: translate3d(-90px, 0, 0); + -o-transform: translate3d(-90px, 0, 0); + -ms-transform: translate3d(-90px, 0, 0); + transform: translate3d(-90px, 0, 0); + } + 100% { + -webkit-transform: translate3d(85px, 0, 0); + -moz-transform: translate3d(85px, 0, 0); + -o-transform: translate3d(85px, 0, 0); + -ms-transform: translate3d(85px, 0, 0); + transform: translate3d(85px, 0, 0); + } +} +@-webkit-keyframes move-forever { + 0% { + -webkit-transform: translate3d(-90px, 0, 0); + -moz-transform: translate3d(-90px, 0, 0); + -o-transform: translate3d(-90px, 0, 0); + -ms-transform: translate3d(-90px, 0, 0); + transform: translate3d(-90px, 0, 0); + } + 100% { + -webkit-transform: translate3d(85px, 0, 0); + -moz-transform: translate3d(85px, 0, 0); + -o-transform: translate3d(85px, 0, 0); + -ms-transform: translate3d(85px, 0, 0); + transform: translate3d(85px, 0, 0); + } +} +@-o-keyframes move-forever { + 0% { + -webkit-transform: translate3d(-90px, 0, 0); + -moz-transform: translate3d(-90px, 0, 0); + -o-transform: translate3d(-90px, 0, 0); + -ms-transform: translate3d(-90px, 0, 0); + transform: translate3d(-90px, 0, 0); + } + 100% { + -webkit-transform: translate3d(85px, 0, 0); + -moz-transform: translate3d(85px, 0, 0); + -o-transform: translate3d(85px, 0, 0); + -ms-transform: translate3d(85px, 0, 0); + transform: translate3d(85px, 0, 0); + } +} +@keyframes move-forever { + 0% { + -webkit-transform: translate3d(-90px, 0, 0); + -moz-transform: translate3d(-90px, 0, 0); + -o-transform: translate3d(-90px, 0, 0); + -ms-transform: translate3d(-90px, 0, 0); + transform: translate3d(-90px, 0, 0); + } + 100% { + -webkit-transform: translate3d(85px, 0, 0); + -moz-transform: translate3d(85px, 0, 0); + -o-transform: translate3d(85px, 0, 0); + -ms-transform: translate3d(85px, 0, 0); + transform: translate3d(85px, 0, 0); + } +} +@-moz-keyframes showCover { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale)); + -moz-transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale)); + -o-transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale)); + -ms-transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale)); + transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale)); + } + 100% { + opacity: 0.5; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); + -webkit-transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + -moz-transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + -o-transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + -ms-transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + } +} +@-webkit-keyframes showCover { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale)); + -moz-transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale)); + -o-transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale)); + -ms-transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale)); + transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale)); + } + 100% { + opacity: 0.5; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); + -webkit-transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + -moz-transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + -o-transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + -ms-transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + } +} +@-o-keyframes showCover { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale)); + -moz-transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale)); + -o-transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale)); + -ms-transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale)); + transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale)); + } + 100% { + opacity: 0.5; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); + -webkit-transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + -moz-transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + -o-transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + -ms-transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + } +} +@keyframes showCover { + 0% { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale)); + -moz-transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale)); + -o-transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale)); + -ms-transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale)); + transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale)); + } + 100% { + opacity: 0.5; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); + -webkit-transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + -moz-transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + -o-transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + -ms-transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale)); + } +} +#random-banner { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + width: 100%; + height: 76%; + background: var(--anzhiyu-card-bg); + margin-bottom: 0.5rem; + border: var(--style-border); + border-radius: 12px; + overflow: hidden; + position: relative; + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + overflow: hidden; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + will-change: transform; +} +#random-banner:hover { + -webkit-box-shadow: var(--anzhiyu-shadow-main); + box-shadow: var(--anzhiyu-shadow-main); +} +#random-banner:hover #random-hover { + opacity: 1; + -ms-filter: none; + filter: none; + padding-left: 2rem; + background: var(--anzhiyu-theme-op-deep); + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -o-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -o-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + background-size: 200%; + cursor: pointer; +} +#random-banner #skills-tags-group-all .tags-group-wrapper { + margin-top: 7rem; +} +#random-banner #skills-tags-group-all { + -webkit-transform: rotate(-30deg); + -moz-transform: rotate(-30deg); + -o-transform: rotate(-30deg); + -ms-transform: rotate(-30deg); + transform: rotate(-30deg); +} +#random-banner #random-hover { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: var(--anzhiyu-theme); + color: var(--anzhiyu-white); + padding-left: 0.5rem; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: cubic-bezier(0.71, 0.15, 0.16, 1.15) 0.6s; + -moz-transition: cubic-bezier(0.71, 0.15, 0.16, 1.15) 0.6s; + -o-transition: cubic-bezier(0.71, 0.15, 0.16, 1.15) 0.6s; + -ms-transition: cubic-bezier(0.71, 0.15, 0.16, 1.15) 0.6s; + transition: cubic-bezier(0.71, 0.15, 0.16, 1.15) 0.6s; + font-size: 60px; +} +#random-banner #random-hover .bannerText { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +#random-banner #random-hover i { + font-size: 80px; + margin-left: 10px; + line-height: 1; +} +@media screen and (max-width: 1200px) { + #random-banner { + display: none; + } +} +#sidebar #sidebar-menus .menus_items .menus_item_child { + margin: 0px; + list-style: none; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +#sidebar #sidebar-menus .menus_item_child li { + width: calc(50% - 8px); + margin: 4px; +} +#sidebar #sidebar-menus .menus_item_child .site-page.child { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + padding: 8px; + border-radius: 12px; + border: var(--style-border-always); + background: var(--anzhiyu-card-bg); + font-size: 14px; + height: 4.2rem; + width: 7rem; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; +} +#sidebar .menus_item ul { + padding-left: 0px; +} +#nav-group { + max-width: 1400px; + width: 100%; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + position: relative; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +#page-header.nav-fixed #center-console + label i { + background: var(--font-color); +} +#center-console { + display: none; +} +#center-console + label { + --icon-size: 1.375rem; + position: relative; + right: 0; + top: 0; + bottom: 0; + height: var(--icon-size); + width: var(--icon-size); + cursor: pointer; + -webkit-transition: 1s; + -moz-transition: 1s; + -o-transition: 1s; + -ms-transition: 1s; + transition: 1s; + margin-left: 1rem; +} +#center-console + label:hover i.left { + width: calc(var(--icon-size) / 2.5); +} +#center-console + label:hover i.center { + opacity: 0.5; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); + width: calc(var(--icon-size) / 2.5); +} +#center-console + label:hover i.right { + width: calc(var(--icon-size) / 2.5); + height: calc(var(--icon-size) / 1.15); + -webkit-transform: none; + -moz-transform: none; + -o-transform: none; + -ms-transform: none; + transform: none; +} +#center-console + label i { + background: var(--light-grey); + position: absolute; + border-radius: calc(var(--icon-size) * 0.15); + -webkit-transition: 0.5s var(--animation-on); + -moz-transition: 0.5s var(--animation-on); + -o-transition: 0.5s var(--animation-on); + -ms-transition: 0.5s var(--animation-on); + transition: 0.5s var(--animation-on); + inset: 0; + margin: auto; + right: auto; + width: calc(var(--icon-size) / 3); + height: calc(var(--icon-size) / 3); + -webkit-transform: translateY(calc(var(--icon-size) / 4)); + -moz-transform: translateY(calc(var(--icon-size) / 4)); + -o-transform: translateY(calc(var(--icon-size) / 4)); + -ms-transform: translateY(calc(var(--icon-size) / 4)); + transform: translateY(calc(var(--icon-size) / 4)); +} +#center-console + label i.left { + width: 100%; + -webkit-transform: translateY(calc(var(--icon-size) / -4)); + -moz-transform: translateY(calc(var(--icon-size) / -4)); + -o-transform: translateY(calc(var(--icon-size) / -4)); + -ms-transform: translateY(calc(var(--icon-size) / -4)); + transform: translateY(calc(var(--icon-size) / -4)); +} +#center-console + label i.right { + left: auto; + right: 0; + width: calc(var(--icon-size) / 2); +} +#center-console:checked + label { + right: 0; + top: 0.5rem; + z-index: 31; +} +#center-console:checked + label:hover::after { + background: var(--anzhiyu-main) !important; +} +#center-console:checked + label::after { + content: ""; + width: 35px; + height: 35px; + display: block; + position: absolute; + z-index: -1; + top: -6px; + left: -6.3px; + background: var(--anzhiyu-fontcolor) !important; + border-radius: 50px; +} +#center-console:checked + label:is(.widget, +#center-console:checked + label .widget:hover) i { + height: calc(var(--icon-size) / 4.5); + background: var(--anzhiyu-white) !important; +} +#center-console:checked + label i.left { + width: 100% !important; + -webkit-transform: rotate(-45deg) !important; + -moz-transform: rotate(-45deg) !important; + -o-transform: rotate(-45deg) !important; + -ms-transform: rotate(-45deg) !important; + transform: rotate(-45deg) !important; +} +#center-console:checked + label i.center { + width: 0 !important; +} +#center-console:checked + label i.right { + width: 100% !important; + -webkit-transform: rotate(45deg) !important; + -moz-transform: rotate(45deg) !important; + -o-transform: rotate(45deg) !important; + -ms-transform: rotate(45deg) !important; + transform: rotate(45deg) !important; +} +[data-theme="dark"] #center-console:checked + label:is(.widget, +#center-console:checked + label .widget:hover) i { + background: var(--anzhiyu-black) !important; +} +#body-wrap .nav-fixed #travellings_button::after { + background: var(--anzhiyu-main) !important; +} +#body-wrap #travellings_button { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; +} +#body-wrap #travellings_button:hover::after { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: none; + -moz-transform: none; + -o-transform: none; + -ms-transform: none; + transform: none; + visibility: visible; +} +#body-wrap #travellings_button:hover a { + background: var(--anzhiyu-main); + -webkit-box-shadow: var(--anzhiyu-shadow-main); + -webkit-box-shadow: var(--anzhiyu-shadow-main); + box-shadow: var(--anzhiyu-shadow-main); +} +#body-wrap #travellings_button:hover a i { + color: var(--anzhiyu-white); +} +#body-wrap #travellings_button::after { + --height: 2rem; + content: attr(title); + position: fixed; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + color: var(--anzhiyu-white); + background: var(--anzhiyu-white-op) !important; + -webkit-box-shadow: var(--anzhiyu-shadow-nav); + box-shadow: var(--anzhiyu-shadow-nav); + border-radius: var(--anzhiyu-radius-full); + width: fit-content; + height: var(--height); + font-size: var(--global-font-size); + white-space: nowrap; + margin: auto; + padding: 0 4em; + top: calc((60px - var(--height)) / 2); + right: 0; + left: 0; + line-height: 0; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + z-index: 1; + visibility: hidden; + -webkit-transform: scaleX(1.1); + -moz-transform: scaleX(1.1); + -o-transform: scaleX(1.1); + -ms-transform: scaleX(1.1); + transform: scaleX(1.1); + pointer-events: none; + -webkit-transition: 0.5s; + -moz-transition: 0.5s; + -o-transition: 0.5s; + -ms-transition: 0.5s; + transition: 0.5s; +} +@media screen and (max-width: 900px) { + #body-wrap #travellings_button::after { + padding: 0 2em; + } +} +#body-wrap:has(#travellings_button:hover) #page-name, +#body-wrap:has(#travellings_button:hover) #nav #menus { + display: none; +} +#body-wrap .page #travellings_button:hover::after { + background: var(--anzhiyu-main) !important; +} +@media screen and (max-width: 768px) { + #page-header #nav { + padding: 20px; + } + .cardHover, + .error404 #error-wrap .error-content, + .layout > div:first-child:not(.recent-posts), + #recent-posts > .recent-post-item, + #aside-content .card-widget, + .layout > .recent-posts .pagination > *:not(.space), + .layout > .recent-posts .pagination > *:not(.space):not(pangu) { + -webkit-box-shadow: none !important; + box-shadow: none !important; + } + #sidebar #sidebar-menus .menus_items .site-page:hover { + background: none; + } + div#travellings_button { + display: none !important; + } +} +#nav #blog_name a:hover, +#nav .mask-name-container a:hover, +#nav #menus a:hover, +#nav #nav-right .nav-button a:hover, +#nav #nav-right #toggle-menu a:hover { + background: var(--anzhiyu-main); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +#page-header.not-top-img { + margin-bottom: 0px; +} +#page-header:not(.nav-fixed) #percent { + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +#page-header #nav #nav-right > div { + margin-left: 1rem; + padding: 0; +} +.nav-button { + cursor: pointer; +} +#nav #menus { + padding: 0 calc((100% - 1400px + 3rem) / 2); + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + width: 100%; + position: absolute; + height: 60px; + left: 0; + margin: 0; + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -o-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + will-change: auto; +} +#nav .site-page { + padding-bottom: 0px; +} +#nav *::after { + background-color: transparent !important; +} +#nav .menus_items .menus_item a { + border-radius: 50px; +} +#nav .menus_items .menus_item .menus_item_child li a { + padding: 2px 16px; + border-radius: 50px; + -webkit-transition: 0.3s !important; + -moz-transition: 0.3s !important; + -o-transition: 0.3s !important; + -ms-transition: 0.3s !important; + transition: 0.3s !important; +} +#nav .menus_items .menus_item .menus_item_child li:hover a { + color: #fff !important; +} +#nav .menus_items .menus_item .menus_item_child li { + border-radius: 50px; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; + display: inline-block; + margin: 0 3px; +} +#site-name, +.shuoshuo { + white-space: nowrap; + overflow: hidden; +} +#site-name { + padding: 0 2px; + height: 35px; + line-height: 35px; + position: relative; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +#nav .menus_items { + position: relative; + width: fit-content; + text-align: center; + left: 0px; + right: 0px; + top: 0px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} +#nav #blog_name a, +#nav .mask-name-container a, +#nav #menus a, +#nav #nav-right .nav-button a, +#nav #nav-right #toggle-menu a { + border-radius: 50px; +} +.page #nav #blog_name a:hover, +.page #nav .mask-name-container a:hover, +.page #nav #menus a:hover, +.page #nav #nav-right .nav-button a:hover, +.page #nav #nav-right #toggle-menu a:hover { + color: var(--anzhiyu-white); + background: var(--anzhiyu-main); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + -webkit-box-shadow: var(--anzhiyu-shadow-main); + box-shadow: var(--anzhiyu-shadow-main); +} +.post #nav #blog_name .back-home-button:hover, +.post #nav #blog_name #site-name:hover, +.post #nav #nav-right .nav-button a:hover, +.post #nav #nav-right #toggle-menu:hover { + color: var(--anzhiyu-white); + background: var(--anzhiyu-white-op); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +.post #nav #menus .menus_item:hover > a { + color: var(--anzhiyu-white); + background: var(--anzhiyu-white-op); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +.post .nav-fixed #nav #menus .menus_item:hover > a.site-page { + color: var(--anzhiyu-white); + background: var(--anzhiyu-main); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + -webkit-box-shadow: var(--anzhiyu-shadow-main); + box-shadow: var(--anzhiyu-shadow-main); +} +.post .nav-fixed #nav #blog_name #site-name:hover, +.post .nav-fixed #nav #blog_name .back-home-button:hover, +.post .nav-fixed #nav #nav-right .nav-button a:hover, +.post .nav-fixed #nav #nav-right #toggle-menu:hover { + color: var(--anzhiyu-white); + background: var(--anzhiyu-main); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + -webkit-box-shadow: var(--anzhiyu-shadow-main); + box-shadow: var(--anzhiyu-shadow-main); +} +#page-header.nav-fixed #nav #page-name { + background: none; + text-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: bold; + border-radius: 100px; + min-width: 100px; + line-height: 1.5rem; +} +#name-container { + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + border-radius: 12px; + height: 40px; + position: absolute; + top: 62px; + left: 0px; + right: 0px; + margin: auto; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-animation-timing-function: ease-out; + -moz-animation-timing-function: ease-out; + -o-animation-timing-function: ease-out; + -ms-animation-timing-function: ease-out; + animation-timing-function: ease-out; + -webkit-animation-timing-function: ease-out; +} +#page-header.nav-fixed.nav-visible #name-container { + z-index: 100; + top: 60px; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +#page-header.nav-fixed #nav #page-name:hover { + color: var(--anzhiyu-main); +} +@media screen and (min-width: 900px) { + #page-header.nav-fixed #nav #page-name::after { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + content: "回到顶部"; + -webkit-transition: 0.2s; + -moz-transition: 0.2s; + -o-transition: 0.2s; + -ms-transition: 0.2s; + transition: 0.2s; + position: absolute; + left: 0; + right: 0; + top: 50%; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -o-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + margin: auto; + color: var(--anzhiyu-white) !important; + font-weight: 700; + line-height: 2; + } +} +@media screen and (min-width: 1200px) { + #page-header.nav-fixed #nav #page-name:hover:after { + opacity: 1; + -ms-filter: none; + filter: none; + } + #page-header.nav-fixed #nav #page-name:hover { + background: var(--anzhiyu-main); + } +} +#page-header #nav #page-name { + display: inline; + font-weight: bold; + padding: 4px 8px; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: 0.1s; + -moz-transition: 0.1s; + -o-transition: 0.1s; + -ms-transition: 0.1s; + transition: 0.1s; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + position: relative; + text-align: center; + cursor: pointer; + top: 0; + font-size: 1.1rem; + -webkit-animation-timing-function: ease-in; + -moz-animation-timing-function: ease-in; + -o-animation-timing-function: ease-in; + -ms-animation-timing-function: ease-in; + animation-timing-function: ease-in; + -webkit-animation-timing-function: ease-in; +} +#menus > div.menus_items > div > a { + letter-spacing: 0.3rem; + font-weight: 700; + padding: 0em 0.8em 0em 1em; + height: 35px; + line-height: 35px; + -webkit-transition: color 0s !important; + -moz-transition: color 0s !important; + -o-transition: color 0s !important; + -ms-transition: color 0s !important; + transition: color 0s !important; +} +#nav div#toggle-menu { + padding: 2px 0 4px 6px; +} +#page-name:hover:before { + opacity: 1; + -ms-filter: none; + filter: none; +} +::backdrop { + display: block; + position: fixed; + top: 0px; +} +.mask-name-container { + width: 100%; + height: 100%; + position: absolute; + overflow: hidden; + left: 0; +} +#nav .menus_items .menus_item > a > i:last-child { + display: none; +} +#nav #search-button { + font-size: 1.3em; +} +.back-home-button:hover { + background: var(--anzhiyu-main); + color: var(--anzhiyu-white) !important; +} +.back-home-button { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + width: 35px; + height: 35px; + padding: 0 !important; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + margin-right: 4px; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + border-radius: 8px; +} +.back-home-button:hover .back-menu-list-groups { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + top: 55px; + pointer-events: auto; + left: 0rem; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} +.back-home-button .back-menu-list-groups { + position: absolute; + top: 45px; + -webkit-transform: scale(0.8); + -moz-transform: scale(0.8); + -o-transform: scale(0.8); + -ms-transform: scale(0.8); + transform: scale(0.8); + -webkit-transform-origin: top left; + -moz-transform-origin: top left; + -o-transform-origin: top left; + -ms-transform-origin: top left; + transform-origin: top left; + left: 0rem; + background-color: var(--anzhiyu-maskbgdeep); + border-radius: 12px; + border: var(--style-border); + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-size: 12px; + color: var(--anzhiyu-secondtext); + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); + -webkit-transition: 0.1s; + -moz-transition: 0.1s; + -o-transition: 0.1s; + -ms-transition: 0.1s; + transition: 0.1s; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + pointer-events: none; + backdrop-filter: blur(20px); +} +.back-home-button .back-menu-list-group { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +.back-home-button .back-menu-list-group .back-menu-list-title { + margin: 8px 0 0 16px; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +.back-home-button .back-menu-list { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + width: 340px; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; +} +.back-home-button .back-menu-list::before { + position: absolute; + top: -24px; + left: 0px; + width: 100%; + height: 25px; + content: ""; + -webkit-transition: 0s; + -moz-transition: 0s; + -o-transition: 0s; + -ms-transition: 0s; + transition: 0s; +} +.back-home-button .back-menu-list-groups .back-menu-list-group:last-child .back-menu-list { + margin: 0 0 8px; +} +.back-home-button .back-menu-list-group:hover .back-menu-list-title { + color: var(--anzhiyu-main); +} +.back-home-button .back-menu-list-groups:hover { + border: var(--style-border-hover); +} +.back-home-button .back-menu-list .back-menu-item { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + margin: 4px 8px; + padding: 4px 8px !important; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + width: 150px; + border-radius: 8px !important; + -webkit-transition: 0.2s !important; + -moz-transition: 0.2s !important; + -o-transition: 0.2s !important; + -ms-transition: 0.2s !important; + transition: 0.2s !important; +} +.back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-text { + font-size: var(--global-font-size); + margin-left: 0.5rem; + color: var(--anzhiyu-fontcolor); + white-space: nowrap; +} +@media screen and (max-width: 768px) { + .back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-text { + font-size: 14px; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } +} +.back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-icon { + width: 24px; + height: 24px; + border-radius: 24px; + background: var(--anzhiyu-secondbg); +} +#page-header #nav .back-home-button { + cursor: pointer; + position: relative; +} +#page-header:not(.not-top-img) #nav .back-home-button { + color: var(--light-grey); +} +#page-header.nav-fixed:not(.not-top-img) #nav .back-home-button { + color: var(--font-color); +} +.back-home-button .back-menu-list .back-menu-item:hover .back-menu-item-text { + color: var(--anzhiyu-white); +} +.back-menu-item-icon.loading img { + width: 25px; +} +#page-header #nav #menus .nav-button.long a.totopbtn span { + border-radius: 35px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + white-space: nowrap; +} +#page-header #nav #menus .nav-button.long a.totopbtn:hover { + border-radius: 35px; + height: 30px; +} +#nav #search-button { + padding-left: 0; +} +#search-button a.site-page.social-icon.search span { + display: none; +} +#nav .nav-button a:hover { + color: var(--anzhiyu-white) !important; +} +#menus > div.menus_items a { + font-weight: bold; +} +#menus .menus_item .menus_item_child .site-page.child.faa-parent.animated-hover .anzhiyu-icon-fan.faa-tada { + -webkit-animation: rotate 1.6s linear infinite; + -moz-animation: rotate 1.6s linear infinite; + -o-animation: rotate 1.6s linear infinite; + -ms-animation: rotate 1.6s linear infinite; + animation: rotate 1.6s linear infinite; +} +#nav-right { + z-index: 102; + position: absolute; + right: 0; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + height: 100%; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +#nav #blog_name { + -webkit-box-lines: single; + -moz-box-lines: single; + -o-box-lines: single; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + height: 60px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + z-index: 102; +} +#blog_name #site-name i { + position: absolute; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + font-size: 1rem; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); +} +#blog_name #site-name:hover .title { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); +} +#blog_name #site-name .title { + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + letter-spacing: normal; + font-size: 1.2rem; + padding: 0 5px; + line-height: 2rem; + -webkit-transition: color 0s; + -moz-transition: color 0s; + -o-transition: color 0s; + -ms-transition: color 0s; + transition: color 0s; +} +.post #blog_name #site-name .title { + -webkit-transition: 0s; + -moz-transition: 0s; + -o-transition: 0s; + -ms-transition: 0s; + transition: 0s; +} +#blog_name #site-name:hover i { + color: #fff; + opacity: 1; + -ms-filter: none; + filter: none; +} +#page-header #nav #nav-right .nav-button a i, +#page-header #nav #nav-left .nav-button a i { + line-height: 1; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +#page-header #nav #nav-right .nav-button a:hover i, +#page-header #nav #nav-left .nav-button a:hover i { + color: var(--anzhiyu-white); + -webkit-transition: background 0.35s ease-in-out, color 0.2s ease-in-out; + -moz-transition: background 0.35s ease-in-out, color 0.2s ease-in-out; + -o-transition: background 0.35s ease-in-out, color 0.2s ease-in-out; + -ms-transition: background 0.35s ease-in-out, color 0.2s ease-in-out; + transition: background 0.35s ease-in-out, color 0.2s ease-in-out; +} +@media screen and (max-width: 768px) { + [data-theme="dark"] #page-header #nav #nav-right .nav-button a i, + [data-theme="dark"] #page-header #nav #nav-left .nav-button a i, + [data-theme="dark"] #page-header.nav-fixed:not(.not-top-img) #nav .back-home-button { + color: #c9c9c9 !important; + } +} +#nav-totop { + width: 35px; + height: 35px; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + border-radius: 50px; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: distribute; + -moz-box-pack: distribute; + -o-box-pack: distribute; + -ms-flex-pack: distribute; + -webkit-justify-content: space-around; + justify-content: space-around; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} +#page-header #nav #nav-right .nav-button a.totopbtn { + width: 25px; + height: 25px; + border-radius: 40px; + background: var(--font-color); + color: var(--card-bg); + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} +#page-header #nav #nav-right .nav-button:not(.long) a.totopbtn:hover { + height: 35px; + width: 35px; +} +#page-header #nav #nav-right .nav-button:not(.long):hover a.totopbtn { + width: 35px; + height: 35px; + top: 0; + right: 0; +} +#page-header #nav .nav-button a { + height: 35px; + width: 35px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-transition: background 0.3s ease-in-out, color 0s ease-in-out; + -moz-transition: background 0.3s ease-in-out, color 0s ease-in-out; + -o-transition: background 0.3s ease-in-out, color 0s ease-in-out; + -ms-transition: background 0.3s ease-in-out, color 0s ease-in-out; + transition: background 0.3s ease-in-out, color 0s ease-in-out; +} +.nav-fixed #nav-totop #percent, +.page #nav-totop #percent { + font-size: 13px; + border-radius: 35px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + white-space: nowrap; + color: var(--card-bg); + width: 25px; + height: 25px; +} +#nav-totop #percent { + font-weight: 700; +} +#page-header #nav #nav-right .nav-button:hover a.totopbtn { + background: var(--anzhiyu-main); +} +#nav-totop:hover .totopbtn i { + opacity: 1; + -ms-filter: none; + filter: none; + color: var(--anzhiyu-white); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +#nav-totop .totopbtn i { + position: absolute; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); +} +#nav-totop.long .totopbtn i { + font-size: 1rem; +} +#nav-totop:hover #percent { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transform: scale(1.5); + -moz-transform: scale(1.5); + -o-transform: scale(1.5); + -ms-transform: scale(1.5); + transform: scale(1.5); + font-weight: 700; +} +#page-header:not(.nav-fixed) #nav-totop { + width: 0; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -o-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + margin-left: 0 !important; + overflow: hidden; + -webkit-transition: 0.3s ease-in; + -moz-transition: 0.3s ease-in; + -o-transition: 0.3s ease-in; + -ms-transition: 0.3s ease-in; + transition: 0.3s ease-in; +} +#page-header #nav #nav-right .nav-button.long, +#page-header #nav #nav-right .nav-button.long a.totopbtn, +#page-header #nav #nav-right .nav-button.long a.totopbtn span { + width: 70px; +} +#page-header #nav #nav-right .long#nav-totop:hover { + background-color: transparent; +} +@media screen and (max-width: 1390px) { + #nav { + padding: 0 1.5rem; + } + #nav .mask-name-container { + padding: 0 1.5rem; + } + div#menus { + padding: 0 1.5rem; + } +} +@media screen and (min-width: 900px) { + #nav .back-home-button:hover { + -webkit-box-shadow: var(--anzhiyu-shadow-main); + box-shadow: var(--anzhiyu-shadow-main); + } +} +@media screen and (max-width: 768px) { + .mask-name-container { + display: none; + } + #menus { + padding: 20px; + } + #page-header.not-top-img { + margin-bottom: 10px; + } + #nav { + border-bottom: none; + background: var(--anzhiyu-background); + } + #page-header #nav #nav-right div { + margin-left: 0.5rem; + } +} +@media screen and (min-width: 768px) { + .menus_item:hover > a.site-page { + color: var(--anzhiyu-white) !important; + background: var(--anzhiyu-main); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + -webkit-box-shadow: var(--anzhiyu-shadow-main); + box-shadow: var(--anzhiyu-shadow-main); + } +} +#pagination .toPageGroup { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + position: relative; + margin: 0; + -webkit-box-shadow: none; + box-shadow: none; + width: auto; +} +#pagination .toPageGroup:hover { + background: none; +} +#pagination .pagination { + text-align: center; +} +#pagination .pagination .extend.next .pagination_tips_next { + margin-left: -32px; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); +} +#pagination .page-number.current { + background: #425aef; + color: var(--white); +} +#pagination .pagination-info { + position: absolute; + top: 50%; + padding: 20px 40px; + width: 100%; + -webkit-transform: translate(0, -50%); + -moz-transform: translate(0, -50%); + -o-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); +} +#pagination .prev_info, +#pagination .next_info { + color: var(--white); + font-weight: 500; +} +#pagination .next-post .pagination-info { + text-align: right; +} +#pagination .pull-full { + width: 100% !important; +} +#pagination .prev-post .label, +#pagination .next-post .label { + color: var(--light-grey); + text-transform: uppercase; + font-size: 90%; +} +#pagination .prev-post, +#pagination .next-post { + width: 50%; +} +@media screen and (max-width: 768px) { + #pagination .prev-post, + #pagination .next-post { + width: 100%; + } +} +#pagination .prev-post a, +#pagination .next-post a { + position: relative; + display: block; + overflow: hidden; + height: 150px; +} +#pagination.pagination-post { + overflow: hidden; + margin-top: 1.25rem; + width: 100%; + background: #000; + border-radius: 10px; +} +@media screen and (max-width: 768px) { + #pagination .toPageGroup { + display: none; + } + #pagination .page-number { + display: none !important; + } + #pagination .space { + display: none !important; + } + #pagination .pagination .extend.next { + width: 100%; + height: 3rem; + margin: 0; + border-radius: 12px; + line-height: 3rem; + background: var(--anzhiyu-card-bg); + border: var(--style-border-always); + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); + margin: 0 20px; + } + #pagination .pagination .extend.next:hover { + background: var(--anzhiyu-theme); + color: var(--anzhiyu-white); + } + #pagination .pagination .extend.next i { + display: none; + } + #pagination .pagination .extend.next .pagination_tips_next { + opacity: 1; + -ms-filter: none; + filter: none; + margin-left: 0; + } + #pagination .pagination .extend.prev { + width: 100%; + height: 3rem; + border-radius: 12px; + line-height: 3rem; + background: var(--anzhiyu-card-bg); + border: var(--style-border-always); + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); + margin: 0 20px; + } + #pagination .pagination .extend.prev i { + display: none; + } + #pagination .pagination .extend.prev .pagination_tips_prev { + opacity: 1; + -ms-filter: none; + filter: none; + margin-right: 0; + } +} +.layout > .recent-posts .pagination > *:not(pangu) { + display: inline-block; + width: 2.5em; + height: 2.5em; + line-height: 2.5em; +} +.layout > .recent-posts .pagination > *:not(.space):not(pangu) { + -webkit-transition: 0s; + -moz-transition: 0s; + -o-transition: 0s; + -ms-transition: 0s; + transition: 0s; +} +.layout > div:not(.recent-posts) .pagination .page-number { + display: inline-block; + margin: 0 4px; + min-width: 2.5em; + height: 2.5em; + text-align: center; + line-height: 2.5em; + cursor: pointer; +} +@media screen and (min-width: 1200px) { + #pagination a.extend.next:hover, + #pagination a.extend.prev:hover { + -webkit-transform: scale(1.03); + -moz-transform: scale(1.03); + -o-transform: scale(1.03); + -ms-transform: scale(1.03); + transform: scale(1.03); + } +} +@media screen and (min-width: 768px) { + #pagination .page-number.current:hover { + background: var(--anzhiyu-theme); + -webkit-box-shadow: var(--anzhiyu-shadow-theme); + box-shadow: var(--anzhiyu-shadow-theme); + color: var(--anzhiyu-white); + } + #pagination a.extend.next:hover, + #pagination a.extend.prev:hover { + color: var(--anzhiyu-theme); + border: var(--style-border-hover); + -webkit-transform: scale(1.03); + -moz-transform: scale(1.03); + -o-transform: scale(1.03); + -ms-transform: scale(1.03); + transform: scale(1.03); + } + nav#pagination { + overflow: visible; + } + #pagination .page-number.current { + background: var(--anzhiyu-theme); + border: var(--style-border-hover); + -webkit-box-shadow: var(--anzhiyu-shadow-theme); + box-shadow: var(--anzhiyu-shadow-theme); + } + #pagination a.extend.next { + overflow: hidden; + height: 2.5em; + line-height: 2.5em; + } + #pagination a.extend.next, + #pagination a.extend.prev { + width: 5rem !important; + line-height: 1.9rem !important; + border-radius: 8px !important; + background: var(--anzhiyu-card-bg); + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); + border: var(--style-border); + display: -webkit-box !important; + display: -moz-box !important; + display: -webkit-flex !important; + display: -ms-flexbox !important; + display: box !important; + display: flex !important; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + overflow: hidden; + -webkit-transition: all 0.3s, color 0s; + -moz-transition: all 0.3s, color 0s; + -o-transition: all 0.3s, color 0s; + -ms-transition: all 0.3s, color 0s; + transition: all 0.3s, color 0s; + position: absolute; + } + #pagination .page-number { + background: var(--anzhiyu-card-bg); + border-radius: 8px !important; + margin: 0 0.3rem; + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); + border: var(--style-border); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + } + #pagination .page-number:hover { + color: var(--anzhiyu-theme); + border: var(--style-border-hover); + -webkit-box-shadow: var(--anzhiyu-shadow-main); + box-shadow: var(--anzhiyu-shadow-main); + } +} +#pagination .pagination { + position: relative; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} +#pagination a.extend.next:hover .pagination_tips_next { + margin-left: 2px; + opacity: 1; + -ms-filter: none; + filter: none; + white-space: nowrap; +} +#pagination a.extend.prev .pagination_tips_prev { + margin-right: -32px; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); +} +#pagination a.extend.prev:hover .pagination_tips_prev { + margin-right: 2px; + opacity: 1; + -ms-filter: none; + filter: none; + white-space: nowrap; +} +a.extend.prev { + left: 0; +} +a.extend.next { + right: 0; +} +#pagination { + overflow: hidden; + margin-top: 1rem; + width: 100%; +} +@media screen and (max-width: 768px) { + #site-name { + padding: 0 !important; + } +} +#pagination .pagination input { + width: 2.5em; + height: 2.5em; + border-radius: 8px; + border: var(--style-border-always); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + outline-style: none; + font-size: 16px; + padding-left: 12px; +} +a#toPageButton { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + position: absolute; + width: 2.5em; + height: 2.5em; + right: 0px; + top: 0px; + border-radius: 8px; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + background: var(--anzhiyu-card-bg); + border: var(--style-border-always); + cursor: pointer; +} +#pagination .pagination .toPageGroup:hover input, +#pagination .pagination .toPageGroup input:focus { + border: var(--style-border-hover-always); + outline-style: none; + width: 100px; +} +#pagination .toPageGroup:hover a#toPageButton, +#pagination .toPageGroup:focus-within a#toPageButton { + width: 30px; + height: 30px; + right: 4px; + top: 5px; + background: var(--anzhiyu-secondbg); + border: 1px solid var(--anzhiyu-none); + border-radius: 4px; +} +blockquote { + border: var(--style-border-always); + background-color: var(--anzhiyu-secondbg); + color: var(--anzhiyu-secondtext); + border-radius: 8px; + margin: 1rem 0; + padding: 0.5rem 0.8rem; +} +#article-container { + word-wrap: break-word; + overflow-wrap: break-word; +} +#article-container h1 .post-content, +#article-container h2 .post-content, +#article-container h3 .post-content, +#article-container h4 .post-content, +#article-container h5 .post-content, +#article-container h6 .post-content { + line-height: 1.6; + border-top: 1px dashed var(--anzhiyu-theme-op); + padding-top: 1.5rem; + padding-left: 0; +} +#article-container a { + color: var(--anzhiyu-fontcolor); +} +#article-container a:hover { + text-decoration: underline; +} +#article-container img { + display: block; + margin: 0 auto 20px; + max-width: 100%; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + border-radius: 8px; +} +#article-container p { + margin: 0 0 16px; +} +#article-container iframe { + margin: 0 0 20px; + border-radius: 12px; +} +#article-container kbd { + margin: 0 3px; + padding: 3px 5px; + border: 1px solid #b4b4b4; + border-radius: 3px; + background-color: #f8f8f8; + -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 2px 1px 0 rgba(255,255,255,0.6) inset; + box-shadow: 0 1px 3px rgba(0,0,0,0.25), 0 2px 1px 0 rgba(255,255,255,0.6) inset; + color: #34495e; + white-space: nowrap; + font-weight: 600; + font-size: 0.9em; + font-family: Monaco, 'Ubuntu Mono', monospace; + line-height: 1em; +} +#article-container h1 .headerlink { + float: right; + opacity: 0.08; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=8)"; + filter: alpha(opacity=8); + position: relative; + padding: 0px; + border: none; + line-height: 2; + font-size: 2rem; + border-radius: 8px !important; + text-decoration: none; + font-weight: 700; +} +#article-container h1 .headerlink::before { + font-size: 2rem; +} +#article-container > :first-child:is(h2) { + border-top: none; + padding-top: 0; + margin-top: 0; +} +#article-container h2 .headerlink { + float: right; + opacity: 0.08; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=8)"; + filter: alpha(opacity=8); + position: relative; + padding: 0px; + border: none; + line-height: 2; + font-size: 1.8rem; + border-radius: 8px !important; + text-decoration: none; + font-weight: 700; +} +#article-container h2 .headerlink::before { + font-size: 1.8rem; +} +#article-container h3 .headerlink, +#article-container h4 .headerlink, +#article-container h5 .headerlink, +#article-container h6 .headerlink { + float: right; + opacity: 0.08; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=8)"; + filter: alpha(opacity=8); + position: relative; + padding: 0px; + border: none; + line-height: 2; + font-size: 1.3rem; + border-radius: 8px !important; + text-decoration: none; + font-weight: 700; +} +#article-container h3 .headerlink::before, +#article-container h4 .headerlink::before, +#article-container h5 .headerlink::before, +#article-container h6 .headerlink::before { + font-size: 1.3rem; +} +#article-container a.headerlink::before { + content: '\f0c1'; + float: right; + color: var(--headline-presudo); + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; +} +#article-container a.headerlink:hover:after { + color: var(--pseudo-hover); +} +#article-container a.headerlink h1:hover a.headerlink:after, +#article-container a.headerlink h2:hover a.headerlink:after, +#article-container a.headerlink h3:hover a.headerlink:after, +#article-container a.headerlink h4:hover a.headerlink:after, +#article-container a.headerlink h5:hover a.headerlink:after, +#article-container a.headerlink h6:hover a.headerlink:after { + opacity: 1; + -ms-filter: none; + filter: none; +} +#article-container ol ol, +#article-container ul ol, +#article-container ol ul, +#article-container ul ul { + padding-left: 20px; +} +#article-container ol li, +#article-container ul li { + margin: 4px 0; +} +#article-container ol p, +#article-container ul p { + margin: 0 0 8px; +} +#article-container.post-content h1:before { + margin-left: -26px; + font-size: 20px; +} +#article-container.post-content h1:hover:before { + color: #425aef; +} +#article-container.post-content h2:before { + margin-left: -24px; + font-size: 18px; +} +#article-container.post-content h2:hover:before { + color: #425aef; +} +#article-container.post-content h3:before { + margin-left: -22px; + font-size: 16px; +} +#article-container.post-content h3:hover:before { + color: #425aef; +} +#article-container.post-content h4:before { + margin-left: -20px; + font-size: 14px; +} +#article-container.post-content h4:hover:before { + color: #425aef; +} +#article-container.post-content h5:before { + margin-left: -18px; + font-size: 12px; +} +#article-container.post-content h5:hover:before { + color: #425aef; +} +#article-container.post-content h6:before { + margin-left: -18px; + font-size: 12px; +} +#article-container.post-content h6:hover:before { + color: #425aef; +} +#article-container.post-content ol p, +#article-container.post-content ul p { + margin: 0 0 8px; +} +#article-container.post-content li::marker { + color: #425aef; + font-weight: 600; + font-size: 1.05em; +} +#article-container.post-content li:hover::marker { + color: var(--pseudo-hover); +} +#article-container > :last-child { + margin-bottom: 0 !important; +} +@media screen and (max-width: 768px) { + #post { + background: var(--anzhiyu-background) !important; + border: none; + } +} +#post .post_share { + margin: 8px 0 0; + width: fit-content; + min-width: 205px; +} +#post .tag_share { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + width: 100%; +} +#post .tag_share .post-meta__box { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + width: 100%; +} +#post .tag_share .post-meta__box__tag-list, +#post .tag_share .post-meta__box__category-list { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + width: 100%; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +#post .tag_share .post-meta__box__tags, +#post .tag_share .post-meta__box__categoryes { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + padding: 4px 12px; + width: fit-content; + border-radius: 8px; + font-size: 0.85em; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} +@media screen and (max-width: 768px) { + #post .tag_share .post-meta__box__tags, + #post .tag_share .post-meta__box__categoryes { + margin: 4px 8px 4px 0 !important; + } +} +#post .tag_share .post-meta__box__tags { + margin: 0px 8px 0px 0; +} +#post .tag_share .post-meta__box__categoryes { + margin: 0px 8px 4px 0; +} +#post .tag_share .post-meta__box__categoryes:hover { + background: #425aef; + color: var(--white); +} +#post .tag_share .post-meta .social-share { + font-size: 0.85em; +} +#post .tag_share .post-meta .social-share .social-share-icon { + margin: 0 4px; + width: 1.85em; + height: 1.85em; + font-size: 1.2em; + line-height: 1.85em; +} +#post .post-copyright { + background: var(--anzhiyu-secondbg); + padding: 1rem 1.3rem; + border: var(--style-border); + border-width: 1px; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + position: relative; + margin: 80px 0 30px; + border-radius: 12px; +} +#post .post-copyright .copyright-cc-box { + position: absolute; + right: 0; + overflow: hidden; + width: 100%; + height: 100%; + top: 0; + pointer-events: none; +} +#post .post-copyright__author_box { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin-top: 1.5rem; +} +#post .post-copyright__author_box .post-copyright__author_img { + width: 66px; + height: 66px; + margin: auto; + border-radius: 66px; + overflow: hidden; + position: absolute; + left: calc(50% - 33px); + top: -33px; + border: var(--style-border-always); + -webkit-box-shadow: var(--anzhiyu-shadow-main); + box-shadow: var(--anzhiyu-shadow-main); +} +#post .post-copyright__author_box .post-copyright__author_img:hover img.post-copyright__author_img_back { + z-index: 21; + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + -o-transform: translateY(0px); + -ms-transform: translateY(0px); + transform: translateY(0px); +} +#post .post-copyright__author_box .post-copyright__author_img img.post-copyright__author_img_front { + z-index: 20; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +#post .post-copyright__author_box .post-copyright__author_img img.post-copyright__author_img_back { + border-radius: 66px; + z-index: 10; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +#post .post-copyright__author_box .post-copyright__author_img img { + position: absolute; + bottom: 0; + left: 0; +} +#post .post-copyright__author_box .post-copyright__author_name { + text-align: center; + font-size: 20px; + font-weight: 700; + color: var(--anzhiyu-fontcolor); + line-height: 1; +} +#post .post-copyright__author_box .post-copyright__author_desc { + text-align: center; + font-size: 14px; + color: var(--anzhiyu-secondtext); + margin-top: 4px; +} +#post .post-copyright__post__info { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + margin-top: 0.2rem; +} +#post .post-copyright__original, +#post .post-copyright__reprint { + background: var(--anzhiyu-main); + color: var(--anzhiyu-wihite-font); + padding: 0.2rem 1rem; + font-size: 0.8rem; + border-radius: 8px; + margin-right: 0.5rem; + font-weight: bold; + line-height: 1.5; + white-space: nowrap; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +#post .post-copyright .anzhiyufont.anzhiyu-icon-copyright { + position: absolute; + font-size: 1.3em; + top: -71px; + right: -20px; + font-size: 8.3em; + z-index: -1; + color: var(--anzhiyu-main); +} +@media screen and (min-width: 1365px) { + #post .post-copyright .anzhiyufont.anzhiyu-icon-copyright { + z-index: 0; + } +} +#post .post-copyright-title { + white-space: nowrap; + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + font-weight: 500; + max-width: 70%; +} +#post .post-copyright-title span { + cursor: pointer; +} +#post .post-copyright-title:hover { + color: var(--anzhiyu-fontcolor); +} +#post .post-copyright .post-copyright__notice { + font-size: 12px; +} +#post .post-copyright .post-copyright__notice .post-copyright-info { + padding-left: 0; + color: var(--anzhiyu-secondtext); + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + text-align: center; +} +@media screen and (max-width: 768px) { + #post .post-copyright .post-copyright__notice .post-copyright-info { + -webkit-line-clamp: 2; + } +} +#post .post-copyright .post-copyright__notice .post-copyright-info a:hover { + color: var(--anzhiyu-main); +} +#post .post-outdate-notice { + position: relative; + margin: 0 0 20px; + padding: 0.5em 1.2em; + border-radius: 3px; + background-color: #ffe6e6; + color: #f66; + padding: 0.5em 1em 0.5em 2.6em; + border-left: 5px solid #ff8080; +} +#post .post-outdate-notice:before { + content: '\e66f'; + position: absolute; + top: 50%; + left: 0.9em; + color: #ff8080; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -o-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} +#post .ads-wrap { + margin: 40px 0; +} +#post #content-inner.layout #article-container h1, +#post #content-inner.layout #article-container h2, +#post #content-inner.layout #article-container h3, +#post #content-inner.layout #article-container h4, +#post #content-inner.layout #article-container h5, +#post #content-inner.layout #article-container h6 { + padding-left: 0; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-direction: reverse; + -moz-box-direction: reverse; + -o-box-direction: reverse; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; +} +.post-ai-description { + background: var(--anzhiyu-secondbg); + border-radius: 12px; + padding: 12px 16px; + line-height: 1.3; + border: var(--style-border-always); + margin-bottom: 10px; +} +.ai-title { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + color: var(--font-color); + border-radius: 8px; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + padding: 0 5px; +} +.ai-title i { + font-weight: 800; + font-size: 20px; + line-height: 20px; + height: 20px; +} +.ai-title .anzhiyufont.anzhiyu-icon-circle-dot { + margin-left: auto; + margin-right: 4px; + font-size: 14px; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); +} +.ai-title .anzhiyufont.anzhiyu-icon-circle-dot:active { + -webkit-transform: scale(0.97); + -moz-transform: scale(0.97); + -o-transform: scale(0.97); + -ms-transform: scale(0.97); + transform: scale(0.97); +} +.ai-title .anzhiyufont.anzhiyu-icon-arrow-rotate-right { + font-size: 14px; + margin-left: 4px; + cursor: pointer; +} +.ai-title .ai-title-text { + font-weight: bold; + margin-left: 8px; +} +#ai-tag { + font-size: 12px; + background-color: var(--anzhiyu-lighttext); + color: rgba(255,255,255,0.9); + border-radius: 4px; + line-height: 1; + padding: 4px 5px; + cursor: pointer; +} +#ai-Toggle { + font-size: 12px; + background: var(--anzhiyu-lighttext); + color: var(--anzhiyu-card-bg); + padding: 4px; + border-radius: 4px; + margin-left: 6px; + -webkit-transform: scale(0.8); + -moz-transform: scale(0.8); + -o-transform: scale(0.8); + -ms-transform: scale(0.8); + transform: scale(0.8); + cursor: pointer; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + font-weight: bold; +} +#ai-Toggle:hover { + background: var(--anzhiyu-fontcolor); + color: var(--anzhiyu-card-bg); +} +#go-tianli-blog { + display: none; +} +.ai-explanation { + margin-top: 12px; + padding: 8px 12px; + background: var(--anzhiyu-card-bg); + border-radius: 8px; + border: var(--style-border-always); + font-size: 15px; + line-height: 1.4; +} +.ai-cursor { + display: inline-block; + width: 7px; + background: #333; + height: 16px; + margin-bottom: -2px; + opacity: 0.95; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)"; + filter: alpha(opacity=95); + margin-left: 3px; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; +} +[data-theme="dark"] .ai-cursor { + background: #fff; +} +.ai-btn-box { + font-size: 15.5px; + width: 100%; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.ai-btn-item { + padding: 5px 10px; + margin: 10px 16px 0px 5px; + width: fit-content; + line-height: 1; + background: var(--anzhiyu-main); + color: #fff; + border-radius: 6px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; + cursor: pointer; +} +.ai-btn-item:hover { + background: var(--anzhiyu-theme); +} +.ai-recommend { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.ai-recommend .ai-recommend-item { + width: calc(50% - 20px); + margin: 10px; + background: var(--anzhiyu-secondbg); + border-radius: 4px; + padding: 10px; + cursor: pointer; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + -webkit-animation: slide-in 0.6s 0.1s backwards; + -moz-animation: slide-in 0.6s 0.1s backwards; + -o-animation: slide-in 0.6s 0.1s backwards; + -ms-animation: slide-in 0.6s 0.1s backwards; + animation: slide-in 0.6s 0.1s backwards; +} +.ai-recommend .ai-recommend-item span.index { + padding: 4px; +} +.ai-recommend .ai-recommend-item:hover { + color: var(--anzhiyu-white); + background: var(--anzhiyu-theme); +} +.ai-recommend .ai-recommend-item:hover a { + color: var(--anzhiyu-white); +} +@media screen and (max-width: 768px) { + .ai-btn-box { + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + } + .ai-recommend .ai-recommend-item { + width: 100%; + } +} +.post-tools { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + width: 100%; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-user-select: none; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +.post-tools .post-tools-left { + white-space: nowrap; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-bottom: 0.5rem; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} +.post-tools .post-tools-left .rewardLeftButton, +.post-tools .post-tools-left .shareRight { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + margin: 10px; +} +@media screen and (max-width: 768px) { + .post-tools .post-tools-left { + margin-top: 1rem; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + width: 100%; + } + .post-tools .post-tools-left > div { + margin: 8px; + } +} +.post-tools-right { + padding-right: 0px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + margin-bottom: 0.5rem; +} +@media screen and (max-width: 768px) { + .post-tools-right { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } +} +.share-link { + margin-left: 0.5rem; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + position: relative; + text-align: center; +} +.share-link.mobile:hover .share-button { + background: var(--anzhiyu-green); + border-color: var(--anzhiyu-green); + -webkit-box-shadow: var(--anzhiyu-shadow-green); + box-shadow: var(--anzhiyu-shadow-green); + color: var(--anzhiyu-white); +} +.share-link.mobile:hover .share-main { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); +} +.share-link .share-qrcode { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} +.share-link .share-button { + background: var(--anzhiyu-card-bg); + border: var(--style-border); + color: var(--anzhiyu-fontcolor); + border-radius: 8px; + cursor: pointer; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + width: 56px; + height: 40px; +} +.share-link .share-button:hover { + background: var(--anzhiyu-main); + border-color: var(--anzhiyu-main); + color: var(--anzhiyu-white); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + -webkit-box-shadow: var(--anzhiyu-shadow-blue); + box-shadow: var(--anzhiyu-shadow-blue); +} +.share-link .share-button i { + line-height: 38px; + font-size: 1.1rem; +} +.share-link .share-main { + position: absolute; + bottom: 40px; + z-index: 100; + padding-bottom: 15px; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + pointer-events: none; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + -o-transform: translateY(8px); + -ms-transform: translateY(8px); + transform: translateY(8px); +} +.share-link .share-main .share-main-all { + padding: 12px; + border-radius: 12px; + background: var(--anzhiyu-background); + -webkit-animation: donate_effcet 0.3s 0.1s ease both; + -moz-animation: donate_effcet 0.3s 0.1s ease both; + -o-animation: donate_effcet 0.3s 0.1s ease both; + -ms-animation: donate_effcet 0.3s 0.1s ease both; + animation: donate_effcet 0.3s 0.1s ease both; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + border: var(--style-border-always); +} +.share-link .share-main .share-main-all #qrcode { + width: 150px; + height: 150px; + min-width: 150px; + min-height: 150px; + background: var(--anzhiyu-white); + padding: 8px; + border-radius: 8px; + margin-bottom: 8px; + border: var(--style-border-always); +} +.share-link .share-main .share-main-all .reward-dec { + font-size: 12px; +} +.post-tools .post-tools-left > div { + margin: 0; +} +.post-tools .post-tools-left { + width: auto; +} +.relatedPosts { + margin-top: 1.25rem; +} +.relatedPosts > .headline { + margin-bottom: 5px; + font-weight: 700; + font-size: 1.43em; +} +.relatedPosts > .relatedPosts-list > div { + position: relative; + display: inline-block; + overflow: hidden; + margin: 3px; + width: calc(33.333% - 6px); + height: 200px; + background: #000; + vertical-align: bottom; +} +@media screen and (max-width: 768px) { + .relatedPosts > .relatedPosts-list > div { + margin: 2px; + width: calc(50% - 4px); + height: 150px; + } +} +@media screen and (max-width: 600px) { + .relatedPosts > .relatedPosts-list > div { + width: calc(100% - 4px); + } +} +.relatedPosts > .relatedPosts-list .content { + position: absolute; + top: 50%; + padding: 0 20px; + width: 100%; + -webkit-transform: translate(0, -50%); + -moz-transform: translate(0, -50%); + -o-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); +} +.relatedPosts > .relatedPosts-list .content .date { + color: var(--light-grey); + font-size: 90%; +} +.relatedPosts > .relatedPosts-list .content .title { + color: var(--white); + -webkit-line-clamp: 2; +} +.post-reward { + position: relative; + text-align: center; + margin-top: 0rem; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} +.post-reward:hover .reward-button { + color: var(--anzhiyu-white); + background: var(--anzhiyu-theme); + -webkit-box-shadow: none; + box-shadow: none; +} +.post-reward:hover .reward-main { + display: -webkit-box !important; + display: -moz-box !important; + display: -webkit-flex !important; + display: -ms-flexbox !important; + display: box !important; + display: flex !important; + -webkit-box-pack: left; + -moz-box-pack: left; + -o-box-pack: left; + -ms-flex-pack: left; + -webkit-justify-content: left; + justify-content: left; +} +.post-reward > * { + pointer-events: auto; +} +.post-reward .reward-button { + border-radius: 8px; + background: var(--anzhiyu-red); + color: var(--anzhiyu-white); + padding: 0; + margin-right: 0.5rem; + width: 126px; + height: 40px; + line-height: 39px; + -webkit-box-shadow: var(--anzhiyu-shadow-red); + box-shadow: var(--anzhiyu-shadow-red); + display: inline-block; + cursor: pointer; + -webkit-transition: all 0.4s ease 0s; + -moz-transition: all 0.4s ease 0s; + -o-transition: all 0.4s ease 0s; + -ms-transition: all 0.4s ease 0s; + transition: all 0.4s ease 0s; +} +.post-reward .reward-main { + position: absolute; + bottom: 40px; + left: -70%; + z-index: 90; + display: none; + padding: 0px 0px 15px; + width: 100%; +} +.post-reward .reward-main .reward-all { + border-radius: 12px; + background: var(--anzhiyu-background); + border: var(--style-border-always); + padding: 0.8rem; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + margin: 0px; + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +.post-reward .reward-main .reward-all::before { + position: absolute; + bottom: -10px; + left: 0px; + width: 100%; + height: 20px; + content: ""; +} +.post-reward .reward-main .reward-all .reward-title { + font-weight: bold; + color: var(--anzhiyu-red); +} +.post-reward .reward-main .reward-all .reward-group { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + margin-top: 0.5rem; + padding: 0; +} +.post-reward .reward-main .reward-all .reward-group .reward-item { + display: inline-block; + padding: 0px 8px; + list-style-type: none; + vertical-align: top; +} +.post-reward .reward-main .reward-all .reward-group .reward-item .post-qr-code-img { + -webkit-box-shadow: var(--anzhiyu-shadow-lightblack); + box-shadow: var(--anzhiyu-shadow-lightblack); + border-radius: 12px; + border: var(--style-border-always); +} +.post-reward .reward-main .reward-all .reward-group .reward-item .post-qr-code-desc { + padding-top: 0rem; + margin-top: -8px; + margin-bottom: 8px; +} +.post-reward .reward-main .reward-all .reward-group .reward-item img { + width: 130px; + height: 130px; + max-width: fit-content; +} +.post-reward .reward-main .reward-all .reward-group .reward-item:first-child img { + border-color: var(--anzhiyu-green); +} +.post-reward .reward-main .reward-all .reward-group .reward-item:last-child img { + border-color: var(--anzhiyu-blue); +} +.post-reward .reward-main .reward-all .reward-main-btn { + background: var(--anzhiyu-secondbg); + color: var(--anzhiyu-fontcolor); + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + border-radius: 12px; + padding: 4px 0; + border: var(--style-border-always); + margin: 8px; + width: 100%; +} +.post-reward .reward-main .reward-all .reward-main-btn:hover { + color: var(--anzhiyu-white); + background: var(--anzhiyu-red); + -webkit-box-shadow: var(--anzhiyu-shadow-red); + box-shadow: var(--anzhiyu-shadow-red); +} +.post-reward .reward-main .reward-all .reward-main-btn .reward-text { + margin-bottom: 0rem; + font-weight: bold; +} +.post-reward .reward-main .reward-all .reward-main-btn .reward-dec { + font-size: 12px; +} +.reward-link.mode { + background: var(--anzhiyu-green); + color: var(--anzhiyu-white); + padding: 0; + width: 173px; + height: 40px; + line-height: 39px; + -webkit-box-shadow: var(--anzhiyu-shadow-green); + box-shadow: var(--anzhiyu-shadow-green); + border-radius: 8px; + text-align: center; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +.reward-link.mode:hover { + background: var(--anzhiyu-theme); + -webkit-box-shadow: none; + box-shadow: none; +} +.reward-link.mode a { + color: var(--anzhiyu-white); + height: 100%; + width: 100%; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} +.reward-link.mode i { + margin-right: 4px; +} +#quit-box { + position: fixed; + width: 100vw; + height: 100vh; + background: rgba(0,0,0,0.2); + top: 0; + left: 0; + display: none; + z-index: 101; + margin: 0; +} +#rightMenu { + display: none; + position: fixed; + padding: 0 0.25rem; + width: 11rem; + height: fit-content; + top: 10%; + left: 10%; + background-color: var(--anzhiyu-card-bg); + color: var(--anzhiyu-fontcolor); + border-radius: 12px; + z-index: 10002; + border: var(--style-border); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +#rightMenu a { + color: var(--anzhiyu-fontcolor); +} +#rightMenu:hover { + border: var(--style-border-hover); + -webkit-box-shadow: var(--anzhiyu-shadow-theme); + box-shadow: var(--anzhiyu-shadow-theme); +} +#rightMenu .rightMenu-group { + padding: 0.35rem 0.3rem; +} +#rightMenu .rightMenu-group:not(:nth-last-child(1)) { + border-bottom: 2px dashed var(--anzhiyu-theme-op); +} +#rightMenu .rightMenu-group.rightMenu-small { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; +} +#rightMenu .rightMenu-group .rightMenu-item { + border-radius: 8px; + -webkit-transition: 0.1s; + -moz-transition: 0.1s; + -o-transition: 0.1s; + -ms-transition: 0.1s; + transition: 0.1s; + cursor: pointer; + padding: 0 6px; +} +#rightMenu .rightMenu-line .rightMenu-item { + margin: 0.25rem 0; + padding: 0.25rem 0; +} +#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + padding: 8px; +} +#rightMenu .rightMenu-group .rightMenu-item:hover { + background-color: var(--anzhiyu-main); + color: var(--anzhiyu-white); + -webkit-box-shadow: var(--anzhiyu-shadow-theme); + box-shadow: var(--anzhiyu-shadow-theme); +} +#rightMenu .rightMenu-group .rightMenu-item i { + display: inline-block; + text-align: center; + line-height: 1.5rem; + width: 1.5rem; + padding: 0 0.25rem; + font-size: 1.1rem; +} +#rightMenu .rightMenu-line .rightMenu-item i { + margin: 0 0.5rem 0 0.25rem; +} +#rightMenu .rightMenu-group .rightMenu-item span { + line-height: 1.5rem; +} +#rightmenu-mask { + position: fixed; + width: 100vw; + height: 100vh; + background: none; +/* background: var(--anzhiyu-maskbg); */ + top: 0; + left: 0; + display: none; + z-index: 10001; + margin: 0 !important; +} +@media screen and (max-width: 768px) { + :root { + --style-border: 1px solid var(--anzhiyu-card-border); + --style-border-hover: 1px solid var(--anzhiyu-theme); + } +} +#rightside { + position: fixed; + right: -48px; + bottom: 100px; + z-index: 100; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -ms-transition: all 0.5s; + transition: all 0.5s; +} +@media screen and (max-width: 768px) { + #rightside #switch-commentBarrage { + display: none; + } +} +#rightside i { + font-size: 1rem; +} +#rightside #rightside-config-hide { + height: 0; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: -webkit-transform 0.4s; + -moz-transition: -moz-transform 0.4s; + -o-transition: -o-transform 0.4s; + -ms-transition: -ms-transform 0.4s; + transition: transform 0.4s; + -webkit-transform: translate(45px, 0); + -moz-transform: translate(45px, 0); + -o-transform: translate(45px, 0); + -ms-transform: translate(45px, 0); + transform: translate(45px, 0); +} +#rightside #rightside-config-hide.show { + height: auto; + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translate(0, 0); + -moz-transform: translate(0, 0); + -o-transform: translate(0, 0); + -ms-transform: translate(0, 0); + transform: translate(0, 0); +} +#rightside #rightside-config-hide.status { + height: auto; + opacity: 1; + -ms-filter: none; + filter: none; +} +#rightside > div > button, +#rightside > div > a { + display: block; + margin-bottom: 5px; + width: 35px; + height: 35px; + border-radius: 5px; + background-color: var(--btn-bg); + color: var(--btn-color); + text-align: center; + font-size: 16px; + line-height: 35px; +} +#rightside > div > button:hover, +#rightside > div > a:hover { + background-color: var(--btn-hover-color); +} +#rightside #mobile-toc-button { + display: none; +} +@media screen and (max-width: 900px) { + #rightside #mobile-toc-button { + display: block; + } +} +@media screen and (max-width: 900px) { + #rightside #hide-aside-btn { + display: none; + } +} +#keyboard-tips { + position: fixed; + top: 80px; + left: 20px; + z-index: 999; + background: var(--anzhiyu-maskbgdeep); + border-radius: 12px; + border: var(--style-border); + padding: 20px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -o-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + pointer-events: none; + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +@media screen and (max-width: 768px) { + #keyboard-tips { + display: none !important; + } +} +#keyboard-tips.show { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transition: 0.1s; + -moz-transition: 0.1s; + -o-transition: 0.1s; + -ms-transition: 0.1s; + transition: 0.1s; +} +#keyboard-tips .keyboardTitle { + font-size: 12px; + color: var(--anzhiyu-secondtext); + line-height: 1; +} +#keyboard-tips .keybordList { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin-top: 8px; +} +#keyboard-tips .keybordItem { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + margin-top: 4px; +} +#keyboard-tips .keyGroup { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + width: 90px; +} +#keyboard-tips .keyGroup .key { + padding: 0.2em 0.4em; + font-family: inherit; + background-color: var(--anzhiyu-card-bg); + color: var(--anzhiyu-fontcolor); + border: var(--style-border); + border-color: var(--anzhiyu-secondtext); + border-bottom: 2px solid var(--anzhiyu-secondtext); + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); + border-radius: 0.25rem; + overflow-wrap: break-word; + overflow-x: auto; + font-weight: 500; + font-size: 0.875em; + margin-right: 4px; + vertical-align: baseline; + line-height: 1; + height: 24px; +} +#menu-mask { + position: fixed; + z-index: 102; + display: none; + width: 100%; + height: 100%; + background: var(--anzhiyu-maskbg); + backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -o-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation: 0.6s ease 0s 1 normal none running to_show; + -moz-animation: 0.6s ease 0s 1 normal none running to_show; + -o-animation: 0.6s ease 0s 1 normal none running to_show; + -ms-animation: 0.6s ease 0s 1 normal none running to_show; + animation: 0.6s ease 0s 1 normal none running to_show; + -webkit-transform-style: preserve-3d; +} +#sidebar { + position: absolute; + top: 0; +} +#sidebar #sidebar-menus { + position: fixed; + top: 0; + right: -300px; + z-index: 103; + overflow: hidden auto; + width: 300px; + height: 100%; + background: var(--anzhiyu-background); + -webkit-transition: all 0.5s ease 0s; + -moz-transition: all 0.5s ease 0s; + -o-transition: all 0.5s ease 0s; + -ms-transition: all 0.5s ease 0s; + transition: all 0.5s ease 0s; + padding-top: 30px; + border-left: var(--style-border-always); +} +#sidebar #sidebar-menus .sidebar-menu-item a.menu-child span { + margin-left: 10px; +} +#sidebar #sidebar-menus .back-menu-list-groups { + padding: 0 16px; +} +#sidebar #sidebar-menus .back-menu-list-groups .back-menu-list-title { + font-size: 12px; + color: var(--anzhiyu-secondtext); +} +#sidebar #sidebar-menus .back-menu-list-groups .back-menu-list { + width: calc(100% + 16px); + -webkit-box-pack: start; + -moz-box-pack: start; + -o-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + margin: 0 -8px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +#sidebar #sidebar-menus .back-menu-list-groups .back-menu-list .back-menu-item { + width: calc(50% - 16px); + background: var(--anzhiyu-card-bg); + border: var(--style-border-always); + border-radius: 8px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + margin: 4px 8px; + padding: 4px 8px; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +#sidebar #sidebar-menus .sidebar-menu-item { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + padding: 0 16px; + margin-bottom: 6px; +} +#sidebar #sidebar-menus .sidebar-menu-item a.darkmode_switchbutton { + padding: 4px 8px; + cursor: pointer; + margin: 0; + font-size: 0.9rem; + color: var(--anzhiyu-fontcolor); + width: 100%; + background: var(--anzhiyu-card-bg); + border-radius: 8px; + border: var(--style-border-always); + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + font-size: 14px; +} +#sidebar #sidebar-menus span.sidebar-menu-item-title { + font-size: 12px; + color: var(--anzhiyu-secondtext); + margin-left: 16px; +} +#sidebar #sidebar-menus .card-tag-cloud { + padding: 0 11px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-bottom: 60px; +} +#sidebar #sidebar-menus .card-tag-cloud a { + color: var(--anzhiyu-fontcolor); + padding: 2px 8px 2px 12px; + margin: 4px; + border-radius: 8px; + border: var(--style-border-always); + background: var(--anzhiyu-card-bg); +} +#sidebar #sidebar-menus .card-tag-cloud a sup { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + margin-left: 4px; +} +#sidebar #sidebar-menus.open { + -webkit-transform: translate3d(-100%, 0, 0); + -moz-transform: translate3d(-100%, 0, 0); + -o-transform: translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); +} +#sidebar #sidebar-menus .sidebar-site-data { + padding: 0 10px; +} +#sidebar #sidebar-menus hr { + margin: 20px auto; +} +#sidebar #sidebar-menus .menus_items { + padding: 0 10px; +} +#sidebar #sidebar-menus .menus_items .site-page { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + font-size: 12px; + position: relative; + padding-left: 0.3rem; + color: var(--anzhiyu-fontcolor); +} +#sidebar #sidebar-menus .menus_items .site-page i:first-child { + width: 15%; + text-align: left; + max-height: 20px; + font-size: 16px; +} +#sidebar #sidebar-menus .menus_items .site-page.group > i:last-child { + position: absolute; + top: 0.78em; + right: 18px; + -webkit-transition: -webkit-transform 0.3s; + -moz-transition: -moz-transform 0.3s; + -o-transition: -o-transform 0.3s; + -ms-transition: -ms-transform 0.3s; + transition: transform 0.3s; +} +#sidebar #sidebar-menus .menus_items .site-page.group.hide > i:last-child { + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -o-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +#sidebar #sidebar-menus .menus_items .site-page.group.hide + .menus_item_child { + display: none; +} +#sidebar #sidebar-menus .menus_items .menus_item_child { + margin: 0; + list-style: none; +} +#sidebar #sidebar-menus .menus_items .menus_item_child .site-page.child { + background: var(--anzhiyu-card-bg); +} +#aside-content .card-tag-cloud a { + border-radius: var(--anzhiyu-border-radius); + display: inline-block; + margin-right: 4px; +} +#aside-content .card-tag-cloud a:hover { + background: var(--anzhiyu-theme); + color: var(--anzhiyu-white) !important; + -webkit-box-shadow: var(--anzhiyu-shadow-theme); + box-shadow: var(--anzhiyu-shadow-theme); +} +@media screen and (min-width: 1200px) { + #aside-content .card-tag-cloud a:active { + -webkit-transform: scale(0.97); + -moz-transform: scale(0.97); + -o-transform: scale(0.97); + -ms-transform: scale(0.97); + transform: scale(0.97); + } +} +#aside-content .card-tag-cloud a sup { + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + margin-left: 2px; +} +span.card-archive-list-count { + width: auto; + text-align: left; + font-size: 1.5rem; + line-height: 0.9; + font-weight: 700; +} +.card-archive-list-count-group { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: baseline; + -moz-box-align: baseline; + -o-box-align: baseline; + -ms-flex-align: baseline; + -webkit-align-items: baseline; + align-items: baseline; +} +#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child, +#aside-content .card-categories ul.card-category-list > .card-category-list-item a span:last-child { + width: fit-content; + margin-left: 4px; +} +span.card-archive-list-count { + width: auto; + text-align: left; + font-size: 1.1rem; + line-height: 0.9; + font-weight: 700; +} +.card-archive-list-date, +span.card-category-list-name { + font-size: 13px; + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); +} +li.card-archive-list-item, +li.card-category-list-item { + width: 100%; + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + box-flex: 1; + -webkit-flex: 0 0 48%; + -ms-flex: 0 0 48%; + flex: 0 0 48%; +} +#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover, +#aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover { + color: var(--anzhiyu-white); + background-color: var(--anzhiyu-theme); + border-radius: var(--anzhiyu-border-radius); + border: 1px solid transparent; +} +@media screen and (min-width: 1200px) { + #aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:active, + #aside-content .card-categories ul.card-category-list > .card-category-list-item a:active { + -webkit-transform: scale(0.97); + -moz-transform: scale(0.97); + -o-transform: scale(0.97); + -ms-transform: scale(0.97); + transform: scale(0.97); + } +} +#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, +#aside-content .card-categories ul.card-category-list > .card-category-list-item a { + border-radius: var(--anzhiyu-border-radius); + margin: 4px 0; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-line-pack: justify; + -webkit-align-content: space-between; + align-content: space-between; + border: var(--style-border); +} +#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child, +#aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child { + width: auto; + -webkit-box-flex: inherit; + -moz-box-flex: inherit; + -o-box-flex: inherit; + box-flex: inherit; + -webkit-flex: inherit; + -ms-flex: inherit; + flex: inherit; +} +#aside-content .card-archives ul.card-archive-list, +#aside-content .card-categories ul.card-category-list { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -o-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +#aside-content .card-info #card-info-btn { + border-radius: var(--anzhiyu-border-radius); +} +#aside-content .aside-list > .aside-list-item .content > time { + display: none; +} +#aside-content .aside-list > .aside-list-item .content > .title { + -webkit-line-clamp: 3; + font-weight: 700; + padding: 2px 0; + width: 100%; + height: 100%; + display: -webkit-box; +} +#aside-content .aside-list > .aside-list-item { + padding: 8px; + padding-top: 6px !important; + padding-bottom: 6px !important; + border-radius: 12px; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + margin: 6px 0; + cursor: pointer; +} +@media screen and (min-width: 1200px) { + #aside-content .aside-list > .aside-list-item:hover { + -webkit-transform: scale(1.03); + -moz-transform: scale(1.03); + -o-transform: scale(1.03); + -ms-transform: scale(1.03); + transform: scale(1.03); + } + #aside-content .aside-list > .aside-list-item:active { + -webkit-transform: scale(0.97); + -moz-transform: scale(0.97); + -o-transform: scale(0.97); + -ms-transform: scale(0.97); + transform: scale(0.97); + } +} +#aside-content .aside-list > .aside-list-item:hover .thumbnail > img { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} +#aside-content .aside-list > .aside-list-item:not(:last-child) { + border-bottom: 0 dashed var(--anzhiyu-background) !important; +} +#aside-content .aside-list > .aside-list-item .thumbnail { + border-radius: var(--anzhiyu-border-radius); + border: var(--style-border); +} +#aside-content .aside-list > .aside-list-item:hover { + background: var(--anzhiyu-main); + color: var(--anzhiyu-white); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + -webkit-box-shadow: var(--anzhiyu-shadow-main); + box-shadow: var(--anzhiyu-shadow-main); +} +#aside-content .aside-list > .aside-list-item:hover a { + color: var(--anzhiyu-white) !important; +} +.card-widget.card-recent-post { + padding: 0.4rem 1rem !important; +} +#aside-content #card-toc .toc-content .toc-link.active { + border-radius: var(--anzhiyu-border-radius); +} +#aside-content #card-toc .toc-content { + overflow-y: auto; +} +#aside-content #card-toc span.toc-number { + display: none; +} +#aside-content #card-toc .toc-content .toc-link.active { + line-height: 1.2; + border-radius: 12px; + border-left-color: var(--anzhiyu-hovertext); + background-color: var(--anzhiyu-card-bg); + color: var(--anzhiyu-lighttext); + font-weight: 700; + font-size: 20px; +} +[data-theme="dark"].toc .toc-item.active .toc-link .toc-text { + color: var(--anzhiyu-white); +} +#aside-content #card-toc .toc-content .toc-item.active .toc-link { + opacity: 1; + -ms-filter: none; + filter: none; + border-radius: 8px; +} +#aside-content #card-toc .toc-content .toc-link { + line-height: 1.2; + padding: 8px; + border-left: 0 solid transparent; + border-radius: 12px; + color: var(--anzhiyu-secondtext); + cursor: default; +} +#aside-content #card-toc .toc-content .toc-link:not(.active) span { + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + cursor: pointer; + filter: blur(1px); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +#aside-content #card-toc:hover .toc-content .toc-link:not(.active) span { + filter: blur(0); + opacity: 1; + -ms-filter: none; + filter: none; +} +#aside-content #card-toc .toc-content .toc-link:not(.active) span:hover { + color: var(--anzhiyu-lighttext); +} +.site-data > a .headline, +.site-data > a .length-num { + color: var(--anzhiyu-white); +} +#sidebar-menus.open .site-data > a .headline, +#sidebar-menus.open .site-data > a .length-num { + color: var(--anzhiyu-fontcolor); +} +@media screen and (min-width: 900px) { + #aside-content .sticky_layout { + top: 60px; + } + .post #aside-content .sticky_layout { + top: 80px; + } +} +@media screen and (min-width: 900px) { + #aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, + #aside-content .card-categories ul.card-category-list > .card-category-list-item a { + padding: 3px 10px; + } +} +#aside-content .card-widget { + border-radius: 12px; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +#aside-content .card-widget { + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); + background: var(--anzhiyu-card-bg); + border: var(--style-border); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; +} +#aside-content hr { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + position: relative; + margin: 1rem 0; + border: 1px dashed var(--anzhiyu-theme-op); +} +#aside-content hr:before { + content: none; +} +#article-container hr:before { + content: none; +} +@media screen and (max-width: 768px) { + #anMusic-page-meting .aplayer.aplayer-withlist .aplayer-list { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + } +} +#body-wrap.open { + -webkit-transition-property: -webkit-transform, border-radius; + -moz-transition-property: -moz-transform, border-radius; + -o-transition-property: -o-transform, border-radius; + -ms-transition-property: -ms-transform, border-radius; + transition-property: transform, border-radius; + -webkit-transition-duration: 0ms; + -moz-transition-duration: 0ms; + -o-transition-duration: 0ms; + -ms-transition-duration: 0ms; + transition-duration: 0ms; + -webkit-transform-origin: 0 46%; + -moz-transform-origin: 0 46%; + -o-transform-origin: 0 46%; + -ms-transform-origin: 0 46%; + transform-origin: 0 46%; + -webkit-transform: translate3d(300px, 0px, 0px) scale3d(0.86, 0.86, 1); + -moz-transform: translate3d(300px, 0px, 0px) scale3d(0.86, 0.86, 1); + -o-transform: translate3d(300px, 0px, 0px) scale3d(0.86, 0.86, 1); + -ms-transform: translate3d(300px, 0px, 0px) scale3d(0.86, 0.86, 1); + transform: translate3d(300px, 0px, 0px) scale3d(0.86, 0.86, 1); + border-radius: 12px; + -webkit-transition: 0.3s ease-out; + -moz-transition: 0.3s ease-out; + -o-transition: 0.3s ease-out; + -ms-transition: 0.3s ease-out; + transition: 0.3s ease-out; + z-index: 2; +} +#body-wrap.open #menu-mask { + display: block; +} +#body-wrap.open #post-top-cover { + display: none; + overflow-y: overlay; + -webkit-transition: 0s; + -moz-transition: 0s; + -o-transition: 0s; + -ms-transition: 0s; + transition: 0s; + border-radius: 12px; +} +#body-wrap.open #anMusic-page-meting .aplayer.aplayer-withlist .aplayer-list { + display: none; +} +#vcomment { + font-size: 1.1em; +} +#vcomment .vbtn { + border: none; + background: var(--btn-bg); + color: var(--btn-color); +} +#vcomment .vbtn:hover { + background: var(--btn-hover-color); +} +#vcomment .vimg { + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; +} +#vcomment .vimg:hover { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); +} +#vcomment .vcards .vcard .vcontent.expand:before, +#vcomment .vcards .vcard .vcontent.expand:after { + z-index: 22; +} +#waline-wrap { + --waline-font-size: 1.1em; + --waline-theme-color: var(--anzhiyu-main); + --waline-active-color: #ff7242; +} +#waline-wrap .vuser { + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -ms-transition: all 0.5s; + transition: all 0.5s; +} +#waline-wrap .vuser:hover { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); +} +#vcomment textarea { + background: url("/img/comment_bg.png") 100% 100% no-repeat; +} +#vcomment textarea:focus { + background-image: none; +} +.fireworks { + position: fixed; + top: 0; + left: 0; + z-index: 9999; + pointer-events: none; +} +.medium-zoom-image--opened { + z-index: 99999 !important; + margin: 0 !important; +} +.medium-zoom-overlay { + z-index: 99999 !important; +} +.mermaid-wrap { + margin: 0 0 20px; + text-align: center; +} +.mermaid-wrap > svg { + height: 100%; +} +.fb-comments iframe { + width: 100% !important; +} +.katex-wrap { + overflow: auto; +} +.katex-wrap::-webkit-scrollbar { + display: none; +} +mjx-container[display], +.has-jax { + overflow-x: auto; + overflow-y: hidden; + line-height: normal !important; +} +.aplayer { + color: #4c4948; +} +#article-container .aplayer { + margin: 0 0 20px; +} +#article-container .aplayer ol, +#article-container .aplayer ul { + margin: 0; + padding: 0; +} +#article-container .aplayer ol li, +#article-container .aplayer ul li { + margin: 0; + padding: 0 15px; +} +#article-container .aplayer ol li:before, +#article-container .aplayer ul li:before { + content: none; +} +.snackbar-css { + border-radius: 5px !important; +} +.bilibili_box { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + background: var(--card-bg); + border: var(--style-border); + border-radius: 12px !important; + overflow: hidden; + color: var(--font-color) !important; + text-decoration: none !important; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + border-bottom: var(--style-border) !important; + padding: 0 !important; + height: 143px; +} +.bilibili_box:hover { + border-color: var(--anzhiyu-main) !important; + color: var(--anzhiyu-white) !important; +} +.bilibili_box:hover .bilibili_info .stat svg path { + fill: var(--anzhiyu-white) !important; +} +@media screen and (max-width: 768px) { + .bilibili_box { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } +} +.bilibili_box .bilibili_cover { + width: 234px; + position: relative; +} +@media screen and (max-width: 768px) { + .bilibili_box .bilibili_cover { + width: 100%; + } +} +.bilibili_box .bilibili_cover img { + width: 100%; + filter: none; + margin: 0 !important; + border-radius: 0 !important; +} +.bilibili_box .bilibili_cover .play_icon { + position: absolute; + width: 45px; + height: 45px; + opacity: 0.8; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + filter: alpha(opacity=80); + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -moz-transform: translate(-50%, -50%); + -o-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} +.bilibili_box .bilibili_cover span { + position: absolute; + bottom: 0px; + right: 5px; + color: var(--anzhiyu-white); +} +.bilibili_box .bilibili_info { + padding: 10px 10px 10px 18px; + line-height: 1; + width: calc(100% - 200px); + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: distribute; + -moz-box-pack: distribute; + -o-box-pack: distribute; + -ms-flex-pack: distribute; + -webkit-justify-content: space-around; + justify-content: space-around; +} +@media screen and (max-width: 768px) { + .bilibili_box .bilibili_info { + width: 100%; + padding-bottom: 25px; + line-height: 1.5; + } +} +.bilibili_box .bilibili_info .title { + font-size: 1.2rem; + font-weight: bold; + white-space: nowrap; + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + line-height: 1.5; +} +.bilibili_box .bilibili_info .desc { + font-size: 15px; + margin: 2px 0 4px; + white-space: nowrap; + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; +} +@media screen and (max-width: 768px) { + .bilibili_box .bilibili_info .desc { + white-space: normal; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + } +} +.bilibili_box .bilibili_info .stat { + font-size: 15px; +} +.bilibili_box .bilibili_info .stat svg { + margin-right: 3px; + font-size: 18px; + width: 1em; + height: 1em; +} +.bilibili_box .bilibili_info .stat svg path { + fill: var(--font-color); +} +.bilibili_box .bilibili_info .stat span { + margin-right: 10px; + display: -webkit-inline-box; + display: -moz-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-box; + display: inline-flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +.bilibili_box .bilibili_info .owner { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + line-height: 1; + font-size: 15px; +} +.bilibili_box .bilibili_info .owner .tip { + color: #f69; + border: 1px solid; + padding: 3px 6px; + font-size: 12px; + border-radius: 5px; + margin: 0 10px 0 0; + background: none; + -webkit-box-shadow: none; + box-shadow: none; +} +.bilibili_box .bilibili_info .owner img { + width: 22px; + height: 22px; + border-radius: 50% !important; + object-fit: cover; + margin: 0 5px 0 0 !important; +} +[data-theme='light'] .bilibili_box .bilibili_info .stat svg, +[data-theme='dark'] .bilibili_cover { + opacity: 0.8; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + filter: alpha(opacity=80); +} +[data-theme="dark"] div.btns { + filter: brightness(0.7); +} +[data-theme="dark"] div.btns a { + background: 0 0; +} +div.btns { + margin: 0 -8px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: start; + -moz-box-align: start; + -o-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; + overflow: visible; + line-height: 1.8; +} +div.btns b { + font-size: 0.875rem; +} +div.btns.wide > a { + padding-left: 32px; + padding-right: 32px; +} +div.btns.fill > a { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + -ms-box-flex: 1; + box-flex: 1; + -webkit-flex-grow: 1; + flex-grow: 1; + width: auto; +} +div.btns.around { + -webkit-box-pack: distribute; + -moz-box-pack: distribute; + -o-box-pack: distribute; + -ms-flex-pack: distribute; + -webkit-justify-content: space-around; + justify-content: space-around; +} +div.btns.center { + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} +div.btns.grid2 > a { + width: calc(100% / 2 - 16px); +} +div.btns.grid3 > a { + width: calc(100% / 3 - 16px); +} +div.btns.grid4 > a { + width: calc(100% / 4 - 16px); +} +div.btns.grid5 > a { + width: calc(100% / 5 - 16px); +} +div.btns a { + -webkit-transition: all 0.28s ease; + -moz-transition: all 0.28s ease; + -o-transition: all 0.28s ease; + -ms-transition: all 0.28s ease; + transition: all 0.28s ease; + -moz-transition: all 0.28s ease; + -webkit-transition: all 0.28s ease; + -o-transition: all 0.28s ease; + margin: 8px; + margin-top: calc(1.25 * 16px + 32px); + min-width: 120px; + font-weight: bold; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: start; + -moz-box-pack: start; + -o-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + -ms-flex-line-pack: center; + -webkit-align-content: center; + align-content: center; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + padding: 8px; + text-align: center; + background: #f6f6f6; + border-radius: 4px; +} +div.btns a > i { + background: #2196f3 !important; +} +div.btns a > i:first-child { + color: #fff; + background: #2196f3; +} +div.btns a b { + font-weight: bold; + line-height: 1.3; +} +div.btns a img { + margin: 0.4em auto !important; +} +div.btns a:not([href]) { + cursor: default; + color: inherit; +} +div.btns a[href]:hover { + background: var(--anzhiyu-main); + color: var(--anzhiyu-white) !important; +} +div.btns a[href]:hover > i:first-child { + background: var(--anzhiyu-main); +} +div.btns, +div.btns p, +div.btns a { + font-size: 0.8125rem; + color: #555; +} +@media screen and (max-width: 1200px) { + div.btns.grid2 > a { + width: calc(100% / 2 - 16px); + } +} +@media screen and (max-width: 768px) { + div.btns.grid2 > a { + width: calc(100% / 2 - 16px); + } +} +@media screen and (max-width: 500px) { + div.btns.grid2 > a { + width: calc(100% / 1 - 16px); + } +} +@media screen and (max-width: 1200px) { + div.btns.grid3 > a { + width: calc(100% / 3 - 16px); + } +} +@media screen and (max-width: 768px) { + div.btns.grid3 > a { + width: calc(100% / 3 - 16px); + } +} +@media screen and (max-width: 500px) { + div.btns.grid3 > a { + width: calc(100% / 1 - 16px); + } +} +@media screen and (max-width: 1200px) { + div.btns.grid4 > a { + width: calc(100% / 3 - 16px); + } +} +@media screen and (max-width: 768px) { + div.btns.grid4 > a { + width: calc(100% / 3 - 16px); + } +} +@media screen and (max-width: 500px) { + div.btns.grid4 > a { + width: calc(100% / 2 - 16px); + } +} +@media screen and (max-width: 1200px) { + div.btns.grid5 > a { + width: calc(100% / 4 - 16px); + } +} +@media screen and (max-width: 768px) { + div.btns.grid5 > a { + width: calc(100% / 3 - 16px); + } +} +@media screen and (max-width: 500px) { + div.btns.grid5 > a { + width: calc(100% / 2 - 16px); + } +} +div.btns a > img:first-child, +div.btns a > i:first-child { + -webkit-transition: all 0.28s ease; + -moz-transition: all 0.28s ease; + -o-transition: all 0.28s ease; + -ms-transition: all 0.28s ease; + transition: all 0.28s ease; + -moz-transition: all 0.28s ease; + -webkit-transition: all 0.28s ease; + -o-transition: all 0.28s ease; + height: 64px; + width: 64px; + -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1); + box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1); + margin: 16px 8px 4px 8px; + margin-top: calc(-1.25 * 16px - 32px); + border: 2px solid #fff; + background: #fff; + line-height: 60px; + font-size: 28px; +} +div.btns a > img:first-child.auto, +div.btns a > i:first-child.auto { + width: auto; +} +div.btns a p, +div.btns a b { + margin: 0.25em; + font-weight: normal; + line-height: 1.25; + word-wrap: break-word; +} +div.btns a[href]:hover, +div.btns a[href]:hover b { + color: #ff5722; +} +div.btns a[href]:hover > img:first-child, +div.btns a[href]:hover > i:first-child { + -webkit-transform: scale(1.1) translateY(-8px); + -moz-transform: scale(1.1) translateY(-8px); + -o-transform: scale(1.1) translateY(-8px); + -ms-transform: scale(1.1) translateY(-8px); + transform: scale(1.1) translateY(-8px); + -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1); + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1); +} +div.btns.circle a > img:first-child, +div.btns.circle a > i:first-child { + border-radius: 32px; +} +div.btns.rounded a > img:first-child, +div.btns.rounded a > i:first-child { + border-radius: 16px; +} +#article-container .btn-center { + margin: 0 0 20px; + text-align: center; +} +#article-container .btn-anzhiyu { + display: inline-block; + margin: 0 4px 6px; + padding: 0 15px; + background-color: var(--btn-anzhiyu-color, #2323ef); + color: #fff; + line-height: 2; + border-radius: 8px; +} +#article-container .btn-anzhiyu.blue { + --btn-anzhiyu-color: #428bca; +} +#article-container .btn-anzhiyu.pink { + --btn-anzhiyu-color: #ff69b4; +} +#article-container .btn-anzhiyu.red { + --btn-anzhiyu-color: #f00; +} +#article-container .btn-anzhiyu.purple { + --btn-anzhiyu-color: #6f42c1; +} +#article-container .btn-anzhiyu.orange { + --btn-anzhiyu-color: #ff8c00; +} +#article-container .btn-anzhiyu.green { + --btn-anzhiyu-color: #5cb85c; +} +#article-container .btn-anzhiyu:hover { + background-color: var(--btn-hover-color); +} +#article-container .btn-anzhiyu i + span { + margin-left: 6px; +} +#article-container .btn-anzhiyu:not(.block) + .btn-anzhiyu:not(.block) { + margin: 0 4px 20px; +} +#article-container .btn-anzhiyu.block { + display: block; + margin: 0 0 20px; + width: fit-content; + width: -moz-fit-content; +} +#article-container .btn-anzhiyu.block.center { + margin: 0 auto 20px; +} +#article-container .btn-anzhiyu.block.right { + margin: 0 0 20px auto; +} +#article-container .btn-anzhiyu.larger { + padding: 6px 15px; +} +#article-container .btn-anzhiyu:hover { + text-decoration: none; +} +#article-container .btn-anzhiyu.outline { + border: 1px solid transparent; + border-color: var(--btn-anzhiyu-color, #2323ef); + background-color: transparent; + color: var(--btn-anzhiyu-color, #2323ef); +} +#article-container .btn-anzhiyu.outline:hover { + background-color: var(--btn-anzhiyu-color, #2323ef); +} +#article-container .btn-anzhiyu.outline:hover { + color: #fff !important; +} +.checkbox { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +.checkbox input { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + position: relative; + height: 16px; + width: 16px; + -webkit-transition: all 0.15s ease-out 0s; + -moz-transition: all 0.15s ease-out 0s; + -o-transition: all 0.15s ease-out 0s; + -ms-transition: all 0.15s ease-out 0s; + transition: all 0.15s ease-out 0s; + cursor: pointer; + display: inline-block; + outline: none; + border-radius: 2px; + -webkit-flex-shrink: 0; + flex-shrink: 0; + margin-right: 8px; + border: 2px solid #2196f3; + pointer-events: none; +} +.checkbox input[type="checkbox"]:before { + left: 1px; + top: 5px; + width: 0; + height: 2px; + -webkit-transition: all 0.2s ease-in; + -moz-transition: all 0.2s ease-in; + -o-transition: all 0.2s ease-in; + -ms-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -o-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); +} +.checkbox input[type="checkbox"]:after { + right: 7px; + bottom: 3px; + width: 2px; + height: 0; + -webkit-transition: all 0.2s ease-out; + -moz-transition: all 0.2s ease-out; + -o-transition: all 0.2s ease-out; + -ms-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + -webkit-transform: rotate(40deg); + -moz-transform: rotate(40deg); + -o-transform: rotate(40deg); + -ms-transform: rotate(40deg); + transform: rotate(40deg); + -webkit-transform: rotate(40deg); + -moz-transform: rotate(40deg); + -ms-transform: rotate(40deg); + -o-transform: rotate(40deg); + -webkit-transition-delay: 0.25s; + -moz-transition-delay: 0.25s; + -o-transition-delay: 0.25s; + -ms-transition-delay: 0.25s; + transition-delay: 0.25s; +} +.checkbox input[type="checkbox"]:checked { + background: #2196f3; +} +.checkbox input[type="checkbox"]:checked:before { + left: 0; + top: 7px; + width: 6px; + height: 2px; +} +.checkbox input[type="checkbox"]:checked:after { + right: 3px; + bottom: 1px; + width: 2px; + height: 10px; +} +.checkbox.minus input[type="checkbox"]:before { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + left: 1px; + top: 5px; + width: 0; + height: 2px; +} +.checkbox.minus input[type="checkbox"]:after { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + left: 1px; + top: 5px; + width: 0; + height: 2px; +} +.checkbox.minus input[type="checkbox"]:checked:before { + left: 1px; + top: 5px; + width: 10px; + height: 2px; +} +.checkbox.minus input[type="checkbox"]:checked:after { + left: 1px; + top: 5px; + width: 10px; + height: 2px; +} +.checkbox.plus input[type="checkbox"]:before { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + left: 1px; + top: 5px; + width: 0; + height: 2px; +} +.checkbox.plus input[type="checkbox"]:after { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + left: 5px; + top: 1px; + width: 2px; + height: 0; +} +.checkbox.plus input[type="checkbox"]:checked:before { + left: 1px; + top: 5px; + width: 10px; + height: 2px; +} +.checkbox.plus input[type="checkbox"]:checked:after { + left: 5px; + top: 1px; + width: 2px; + height: 10px; +} +.checkbox.times input[type="checkbox"]:before { + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -o-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + left: 3px; + top: 1px; + width: 0; + height: 2px; +} +.checkbox.times input[type="checkbox"]:after { + -webkit-transform: rotate(135deg); + -moz-transform: rotate(135deg); + -o-transform: rotate(135deg); + -ms-transform: rotate(135deg); + transform: rotate(135deg); + right: 3px; + top: 1px; + width: 0; + height: 2px; +} +.checkbox.times input[type="checkbox"]:checked:before { + left: 1px; + top: 5px; + width: 10px; + height: 2px; +} +.checkbox.times input[type="checkbox"]:checked:after { + right: 1px; + top: 5px; + width: 10px; + height: 2px; +} +.checkbox input[type="radio"] { + border-radius: 50%; +} +.checkbox input[type="radio"]:before { + content: ""; + display: block; + width: 8px; + height: 8px; + border-radius: 50%; + margin: 2px; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -o-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transition: all 0.25s ease-out; + -moz-transition: all 0.25s ease-out; + -o-transition: all 0.25s ease-out; + -ms-transition: all 0.25s ease-out; + transition: all 0.25s ease-out; +} +.checkbox input[type="radio"]:checked:before { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + background: var(--text-bg-hover); +} +.checkbox.red input { + border-color: #fe5f58; +} +.checkbox.red input[type="checkbox"]:checked { + background: #fe5f58; +} +.checkbox.red input[type="radio"]:checked:before { + background: #fe5f58; +} +.checkbox.green input { + border-color: #3dc550; +} +.checkbox.green input[type="checkbox"]:checked { + background: #3dc550; +} +.checkbox.green input[type="radio"]:checked:before { + background: #3dc550; +} +.checkbox.yellow input { + border-color: #ffbd2b; +} +.checkbox.yellow input[type="checkbox"]:checked { + background: #ffbd2b; +} +.checkbox.yellow input[type="radio"]:checked:before { + background: #ffbd2b; +} +.checkbox.cyan input { + border-color: #1bcdfc; +} +.checkbox.cyan input[type="checkbox"]:checked { + background: #1bcdfc; +} +.checkbox.cyan input[type="radio"]:checked:before { + background: #1bcdfc; +} +.checkbox.blue input { + border-color: #2196f3; +} +.checkbox.blue input[type="checkbox"]:checked { + background: #2196f3; +} +.checkbox.blue input[type="radio"]:checked:before { + background: #2196f3; +} +.checkbox p { + display: inline-block; + margin-top: 2px !important; + margin-bottom: 0 !important; +} +.checkbox input[type="checkbox"]:before, +.checkbox input[type="checkbox"]:after { + position: absolute; + content: ""; + background: #fff; +} +details[open]:not(.tk-admin-config-group) { + background: var(--anzhiyu-card-bg); +} +[data-theme="dark"] details.folding-tag { + background: transparent; +} +details.folding-tag { + display: block; + padding: 16px; + margin: 1em 0; + border-radius: 4px; + font-size: var(--global-font-size); + -webkit-transition: all 0.28s ease; + -moz-transition: all 0.28s ease; + -o-transition: all 0.28s ease; + -ms-transition: all 0.28s ease; + transition: all 0.28s ease; + -moz-transition: all 0.28s ease; + -webkit-transition: all 0.28s ease; + -o-transition: all 0.28s ease; + border: 1px solid #f6f6f6; +} +details.folding-tag summary { + cursor: pointer; + padding: 16px; + margin: -16px; + border-radius: 4px; + color: rgba(68,68,68,0.7); + font-size: 0.875rem !important; + font-weight: bold; + position: relative; + line-height: normal; +} +details.folding-tag summary > p, +details.folding-tag summary > h1, +details.folding-tag summary > h2, +details.folding-tag summary > h3, +details.folding-tag summary > h4, +details.folding-tag summary > h5, +details.folding-tag summary > h6 { + display: inline; + border-bottom: none !important; +} +details.folding-tag summary:hover { + color: #444; +} +details.folding-tag summary:hover:after { + position: absolute; + content: '+'; + text-align: center; + top: 50%; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -o-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + right: 16px; +} +details.folding-tag >summary { + background: var(--anzhiyu-card-bg); +} +details.folding-tag[purple] { + border-color: #fae7fd; +} +details.folding-tag[purple] >summary { + background: #fae7fd; +} +details.folding-tag[blue] { + border-color: #e8f4fd; +} +details.folding-tag[blue] >summary { + background: #e8f4fd; +} +details.folding-tag[cyan] { + border-color: #e8fafe; +} +details.folding-tag[cyan] >summary { + background: #e8fafe; +} +details.folding-tag[green] { + border-color: #ebf9ed; +} +details.folding-tag[green] >summary { + background: #ebf9ed; +} +details.folding-tag[yellow] { + border-color: #fff8e9; +} +details.folding-tag[yellow] >summary { + background: #fff8e9; +} +details.folding-tag[orange] { + border-color: #fdf1e7; +} +details.folding-tag[orange] >summary { + background: #fdf1e7; +} +details.folding-tag[red] { + border-color: #feefee; +} +details.folding-tag[red] >summary { + background: #feefee; +} +details.folding-tag[open] { + border-color: rgba(68,68,68,0.2); +} +details.folding-tag[open] >summary { + border-bottom: 1px solid rgba(68,68,68,0.2); + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +details.folding-tag[open][purple] { + border-color: rgba(208,23,238,0.3); +} +details.folding-tag[open][purple] >summary { + border-bottom-color: rgba(208,23,238,0.3); +} +details.folding-tag[open][blue] { + border-color: rgba(33,150,243,0.3); +} +details.folding-tag[open][blue] >summary { + border-bottom-color: rgba(33,150,243,0.3); +} +details.folding-tag[open][cyan] { + border-color: rgba(27,205,252,0.3); +} +details.folding-tag[open][cyan] >summary { + border-bottom-color: rgba(27,205,252,0.3); +} +details.folding-tag[open][green] { + border-color: rgba(61,197,80,0.3); +} +details.folding-tag[open][green] >summary { + border-bottom-color: rgba(61,197,80,0.3); +} +details.folding-tag[open][yellow] { + border-color: rgba(255,189,43,0.3); +} +details.folding-tag[open][yellow] >summary { + border-bottom-color: rgba(255,189,43,0.3); +} +details.folding-tag[open][orange] { + border-color: rgba(236,118,22,0.3); +} +details.folding-tag[open][orange] >summary { + border-bottom-color: rgba(236,118,22,0.3); +} +details.folding-tag[open][red] { + border-color: rgba(254,95,88,0.3); +} +details.folding-tag[open][red] >summary { + border-bottom-color: rgba(254,95,88,0.3); +} +details.folding-tag[open] >summary { + color: #444; + margin-bottom: 0; +} +details.folding-tag[open] >summary:hover:after { + content: '-'; +} +details.folding-tag[open] >div.content { + padding: 16px; + margin: -16px; + margin-top: 0; +} +details.folding-tag[open] >div.content p>a:hover { + text-decoration: underline; +} +details.folding-tag[open] >div.content > p:first-child, +details.folding-tag[open] >div.content > .tabs:first-child, +details.folding-tag[open] >div.content > ul:first-child, +details.folding-tag[open] >div.content > ol:first-child, +details.folding-tag[open] >div.content > .highlight:first-child, +details.folding-tag[open] >div.content > .note:first-child, +details.folding-tag[open] >div.content > details:first-child { + margin-top: 0; +} +details.folding-tag[open] >div.content > p:last-child, +details.folding-tag[open] >div.content > .tabs:last-child, +details.folding-tag[open] >div.content > ul:last-child, +details.folding-tag[open] >div.content > ol:last-child, +details.folding-tag[open] >div.content > .highlight:last-child, +details.folding-tag[open] >div.content > .note:last-child, +details.folding-tag[open] >div.content > details:last-child { + margin-bottom: 0; +} +[data-theme="dark"] details[open] > div.content { + padding: 16px; + margin: -16px; + margin-top: 0; + background: transparent; + color: rgba(255,255,255,0.6); +} +[data-theme="dark"] details > summary { + filter: brightness(1); + background: var(--anzhiyu-card-bg) !important; +} +#content-inner figure.gallery-group { + position: relative; + float: left; + overflow: hidden; + margin: 6px 4px; + width: calc(50% - 8px); + height: 250px; + border-radius: 8px; + background: #000; + -webkit-transform: translate3d(0, 0, 0); +} +@media screen and (max-width: 600px) { + #content-inner figure.gallery-group { + width: calc(100% - 8px); + } +} +#content-inner figure.gallery-group:hover img { + opacity: 0.4; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +#content-inner figure.gallery-group:hover .gallery-group-name::after { + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +#content-inner figure.gallery-group:hover p { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +#content-inner figure.gallery-group img { + position: relative; + margin: 0; + max-width: none; + width: calc(100% + 20px); + height: 250px; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + opacity: 0.8; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + filter: alpha(opacity=80); + -webkit-transition: all 0.3s, filter 375ms ease-in 0.2s; + -moz-transition: all 0.3s, filter 375ms ease-in 0.2s; + -o-transition: all 0.3s, filter 375ms ease-in 0.2s; + -ms-transition: all 0.3s, filter 375ms ease-in 0.2s; + transition: all 0.3s, filter 375ms ease-in 0.2s; + -webkit-transform: translate3d(-10px, 0, 0); + -moz-transform: translate3d(-10px, 0, 0); + -o-transform: translate3d(-10px, 0, 0); + -ms-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + object-fit: cover; +} +#content-inner figure.gallery-group figcaption { + position: absolute; + top: 0; + left: 0; + padding: 30px; + width: 100%; + height: 100%; + color: #fff; + text-transform: uppercase; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; +} +#content-inner figure.gallery-group figcaption > a { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1000; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); +} +#content-inner figure.gallery-group p { + margin: 0; + padding: 8px 0 0; + letter-spacing: 1px; + font-size: 1.1em; + line-height: 1.5; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; + -moz-transition: opacity 0.35s, -moz-transform 0.35s; + -o-transition: opacity 0.35s, -o-transform 0.35s; + -ms-transition: opacity 0.35s, -ms-transform 0.35s; + transition: opacity 0.35s, transform 0.35s; + -webkit-transform: translate3d(100%, 0, 0); + -moz-transform: translate3d(100%, 0, 0); + -o-transform: translate3d(100%, 0, 0); + -ms-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + -webkit-line-clamp: 4; +} +#content-inner figure.gallery-group .gallery-group-name { + position: relative; + margin: 0; + padding: 8px 0; + font-weight: bold; + font-size: 1.65em; + line-height: 1.5; + -webkit-line-clamp: 2; +} +#content-inner figure.gallery-group .gallery-group-name:after { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 2px; + background: #fff; + content: ''; + -webkit-transition: -webkit-transform 0.35s; + -moz-transition: -moz-transform 0.35s; + -o-transition: -o-transform 0.35s; + -ms-transition: -ms-transform 0.35s; + transition: transform 0.35s; + -webkit-transform: translate3d(-100%, 0, 0); + -moz-transform: translate3d(-100%, 0, 0); + -o-transform: translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); +} +#content-inner .gallery-group-main { + overflow: auto; + padding: 0 0 16px; +} +#content-inner .gallery { + margin: 0 0 16px; + text-align: center; +} +#content-inner .gallery .fj-gallery { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); +} +#content-inner .gallery .fj-gallery .img-alt { + display: none; +} +#content-inner .gallery .fj-gallery.lazyload + button { + display: inline-block; +} +#content-inner .gallery .fj-gallery .gallery-data { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + visibility: hidden; +} +#content-inner .gallery button { + display: none; + margin-top: 25px; + padding: 10px; + width: 9em; + border-radius: 5px; + background: var(--btn-bg); + color: var(--btn-color); + font-weight: bold; + font-size: 1.1em; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; +} +#content-inner .gallery button > * { + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + -ms-transition: all 0.4s; + transition: all 0.4s; +} +#content-inner .gallery button i { + opacity: 1; + -ms-filter: none; + filter: none; + font-size: 1.1rem; +} +#content-inner .gallery button:hover { + background: var(--btn-hover-color); +} +#content-inner .gallery button:hover i { + margin-left: 2px; +} +blockquote.pullquote { + position: relative; + max-width: 45%; + font-size: 110%; +} +blockquote.pullquote.left { + float: left; + margin: 1em 0.5em 0 0; +} +blockquote.pullquote.right { + float: right; + margin: 1em 0 0 0.5em; +} +.video-container { + position: relative; + overflow: hidden; + margin-bottom: 16px; + padding-top: 56.25%; + height: 0; +} +.video-container iframe { + position: absolute; + top: 0; + left: 0; + margin-top: 0; + width: 100%; + height: 100%; +} +.hide-inline > .hide-button, +.hide-block > .hide-button { + display: inline-block; + padding: 5px 18px; + background: #425aef; + color: var(--white); +} +.hide-inline > .hide-button:hover, +.hide-block > .hide-button:hover { + background-color: var(--btn-hover-color); +} +.hide-inline > .hide-button.open, +.hide-block > .hide-button.open { + display: none; +} +.hide-inline > .hide-button.open + div, +.hide-block > .hide-button.open + div { + display: block; +} +.hide-inline > .hide-button.open + span, +.hide-block > .hide-button.open + span { + display: inline; +} +.hide-inline > .hide-content, +.hide-block > .hide-content { + display: none; +} +.hide { + display: none; +} +.hide-inline > .hide-button { + margin: 0 6px; +} +.hide-inline > .hide-content { + margin: 0 6px; +} +.hide-block { + margin: 0 0 16px; +} +.toggle { + margin-bottom: 20px; + border: 1px solid #f0f0f0; +} +.toggle > .toggle-button { + padding: 6px 15px; + background: #f0f0f0; + color: #1f2d3d; + cursor: pointer; +} +.toggle > .toggle-content { + margin: 30px 24px; +} +.md .img { + object-fit: contain; +} +img.inline { + display: inline !important; + vertical-align: middle; + -webkit-transform: translateY(-4px); + -moz-transform: translateY(-4px); + -o-transform: translateY(-4px); + -ms-transform: translateY(-4px); + transform: translateY(-4px); +} +p .img-alt { + display: inline-block; + width: 100%; +} +s, +del { + color: #8e8e8e; + text-decoration-color: #8e8e8e; +} +u { + color: #444; + text-decoration: none; + border-bottom: 1px solid #fe5f58; +} +emp { + color: #444; + border-bottom: 4px dotted #fe5f58; +} +wavy { + color: #444; + text-decoration-style: wavy; + text-decoration-line: underline; + text-decoration-color: #fe5f58; +} +psw { + color: transparent; + background: #a1a1a1; + border-radius: 2px; + -webkit-transition: all 0.28s ease; + -moz-transition: all 0.28s ease; + -o-transition: all 0.28s ease; + -ms-transition: all 0.28s ease; + transition: all 0.28s ease; + -moz-transition: all 0.28s ease; + -webkit-transition: all 0.28s ease; + -o-transition: all 0.28s ease; +} +psw:hover { + color: var(--anzhiyu-font); + background: none; +} +kbd { + display: inline-block; + color: #666; + font: bold 9pt arial; + text-decoration: none; + text-align: center; + padding: 2px 5px; + margin: 0 5px; + background: #eff0f2; + -moz-border-radius: 4px; + border-radius: 4px; + border-top: 1px solid #f5f5f5; + -webkit-box-shadow: inset 0 0 20px #e8e8e8, 0 1px 0 #c3c3c3, 0 1px 0 #c9c9c9, 0 1px 2px #333; + -moz-box-shadow: inset 0 0 20px #e8e8e8, 0 1px 0 #c3c3c3, 0 1px 0 #c9c9c9, 0 1px 2px #333; + -webkit-box-shadow: inset 0 0 20px #e8e8e8, 0 1px 0 #c3c3c3, 0 1px 0 #c9c9c9, 0 1px 2px #333; + -webkit-box-shadow: inset 0 0 20px #e8e8e8, 0 1px 0 #c3c3c3, 0 1px 0 #c9c9c9, 0 1px 2px #333; + box-shadow: inset 0 0 20px #e8e8e8, 0 1px 0 #c3c3c3, 0 1px 0 #c9c9c9, 0 1px 2px #333; + text-shadow: 0 1px 0 #f5f5f5; +} +#article-container .inline-img { + display: inline; + margin: 0 3px; + height: 1.1em; + vertical-align: text-bottom; +} +.introduction-card { + position: relative; +} +.introduction-card .img-alt { + display: none; +} +.introduction-card-bottom { + background-color: transparent; + color: inherit; + -webkit-transition: background-color 0.3s ease, color 0.3s ease; + -moz-transition: background-color 0.3s ease, color 0.3s ease; + -o-transition: background-color 0.3s ease, color 0.3s ease; + -ms-transition: background-color 0.3s ease, color 0.3s ease; + transition: background-color 0.3s ease, color 0.3s ease; +} +.introduction-card:active .introduction-card-bottom { + background-color: var(--anzhiyu-main); + color: #fff; +} +.introduction-card:active .introduction-card-bottom .left .info .subTitle { + color: #fff !important; +} +.introduction-card:active .introduction-card-bottom { + -webkit-animation: resetAnimation 3s 1s forwards; + -moz-animation: resetAnimation 3s 1s forwards; + -o-animation: resetAnimation 3s 1s forwards; + -ms-animation: resetAnimation 3s 1s forwards; + animation: resetAnimation 3s 1s forwards; +} +.introduction-card { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + width: 60%; + margin: 0 auto; + border-radius: 15px; + -webkit-box-shadow: var(--anzhiyu-shadow-blackdeep); + box-shadow: var(--anzhiyu-shadow-blackdeep); + height: 520px; + -webkit-transition: all 0.3s ease 0s; + -moz-transition: all 0.3s ease 0s; + -o-transition: all 0.3s ease 0s; + -ms-transition: all 0.3s ease 0s; + transition: all 0.3s ease 0s; + cursor: pointer; +} +@media screen and (max-width: 1200px) { + .introduction-card { + width: 80%; + } +} +@media screen and (max-width: 768px) { + .introduction-card { + width: 100%; + } +} +.introduction-card:active { + -webkit-transform: scale(0.97); + -moz-transform: scale(0.97); + -o-transform: scale(0.97); + -ms-transform: scale(0.97); + transform: scale(0.97); +} +.introduction-card .introduction-card-top { + height: 80%; + width: 100%; + overflow: hidden; + border-radius: 15px 15px 0 0; + position: relative; +} +.introduction-card .introduction-card-top .int-card-info { + position: absolute; + padding: 20px; +} +.introduction-card .introduction-card-top .int-card-info .int-tip { + opacity: 0.8; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + filter: alpha(opacity=80); + font-size: 0.6rem; + margin-bottom: 0.5rem; + color: var(--anzhiyu-white); +} +.introduction-card .introduction-card-top .int-card-info .int-cardTitle { + font-size: 36px; + color: var(--anzhiyu-white); + font-weight: 700; + line-height: 1.1; +} +.introduction-card .introduction-card-top img { + width: 100%; + height: 100%; + border-radius: 0px !important; + margin: 0 !important; +} +.introduction-card .introduction-card-bottom { + height: 20%; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + width: 100%; + border-radius: 0 0 15px 15px; +} +.introduction-card .introduction-card-bottom .left { + width: 70%; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +.introduction-card .introduction-card-bottom .left .info { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.introduction-card .introduction-card-bottom .left .info .title { + font-weight: 600; + line-height: 26px; +} +.introduction-card .introduction-card-bottom .left .info .subTitle { + line-height: 14px; + font-size: 14px; + color: var(--anzhiyu-gray); + opacity: 0.8; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + filter: alpha(opacity=80); +} +.introduction-card .introduction-card-bottom .left img { + width: 2.875rem; + height: 2.875rem; + margin: 0 20px !important; + border-radius: 12px !important; +} +.introduction-card .introduction-card-bottom .right { + width: 30%; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +.introduction-card .introduction-card-bottom .right a { + width: 100%; + text-align: center; + background: #efeef2; + color: var(--anzhiyu-main) !important; + border-radius: 50px; + height: 35px; + line-height: 35px; + margin-right: 20px; +} +.introduction-card .introduction-card-bottom .right a:hover { + background: var(--anzhiyu-main); + color: var(--anzhiyu-white) !important; +} +@-moz-keyframes resetAnimation { + 0% { + background-color: var(--anzhiyu-main); + color: #fff; + } + 100% { + background-color: transparent; + color: inherit; + } +} +@-webkit-keyframes resetAnimation { + 0% { + background-color: var(--anzhiyu-main); + color: #fff; + } + 100% { + background-color: transparent; + color: inherit; + } +} +@-o-keyframes resetAnimation { + 0% { + background-color: var(--anzhiyu-main); + color: #fff; + } + 100% { + background-color: transparent; + color: inherit; + } +} +@keyframes resetAnimation { + 0% { + background-color: var(--anzhiyu-main); + color: #fff; + } + 100% { + background-color: transparent; + color: inherit; + } +} +.hl-label { + padding: 2px 4px; + border-radius: 3px; + color: #fff; +} +.hl-label.default { + background-color: #2323ef; +} +.hl-label.blue { + background-color: #428bca; +} +.hl-label.pink { + background-color: #ff69b4; +} +.hl-label.red { + background-color: #f00; +} +.hl-label.purple { + background-color: #6f42c1; +} +.hl-label.orange { + background-color: #ff8c00; +} +.hl-label.green { + background-color: #5cb85c; +} +audio, +video { + border-radius: 4px; + max-width: 100%; +} +video { + z-index: 1; + -webkit-transition: all 0.28s ease; + -moz-transition: all 0.28s ease; + -o-transition: all 0.28s ease; + -ms-transition: all 0.28s ease; + transition: all 0.28s ease; + -moz-transition: all 0.28s ease; + -webkit-transition: all 0.28s ease; + -o-transition: all 0.28s ease; +} +video:hover { + -webkit-box-shadow: 0 4px 8px 0px rgba(0,0,0,0.24), 0 8px 16px 0px rgba(0,0,0,0.24); + box-shadow: 0 4px 8px 0px rgba(0,0,0,0.24), 0 8px 16px 0px rgba(0,0,0,0.24); +} +div.video { + line-height: 0; + text-align: center; +} +div.videos { + max-width: calc(100% + 2 * 4px); + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: start; + -moz-box-pack: start; + -o-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + -webkit-box-align: end; + -moz-box-align: end; + -o-box-align: end; + -ms-flex-align: end; + -webkit-align-items: flex-end; + align-items: flex-end; + margin: 1em -4px; +} +div.videos .video, +div.videos iframe { + width: 100%; + margin: 4px; +} +div.videos iframe { + border-radius: 4px; + width: 100%; + min-height: 300px; +} +div.videos.left { + -webkit-box-pack: start; + -moz-box-pack: start; + -o-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; +} +div.videos.center { + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} +div.videos.right { + -webkit-box-pack: end; + -moz-box-pack: end; + -o-box-pack: end; + -ms-flex-pack: end; + -webkit-justify-content: flex-end; + justify-content: flex-end; +} +div.videos.stretch { + -webkit-box-align: stretch; + -moz-box-align: stretch; + -o-box-align: stretch; + -ms-flex-align: stretch; + -webkit-align-items: stretch; + align-items: stretch; +} +div.videos[col='1'] .video, +div.videos[col='1'] iframe { + width: 100%; +} +div.videos[col='2'] .video, +div.videos[col='2'] iframe { + width: calc(50% - 2 * 4px); +} +div.videos[col='3'] .video, +div.videos[col='3'] iframe { + width: calc(33.33% - 2 * 4px); +} +div.videos[col='4'] .video, +div.videos[col='4'] iframe { + width: calc(25% - 2 * 4px); +} +[data-theme="dark"] audio, +[data-theme="dark"] video { + filter: brightness(0.7); +} +.note { + position: relative; + margin: 0 0 20px; + padding: 15px; + border-radius: 3px; +} +.note.icon-padding { + padding-left: 3em; +} +.note > .note-icon { + position: absolute; + top: calc(50% - 0.5em); + left: 0.8em; + font-size: larger; +} +.note.blue { + color: #4c4948; +} +.note.blue.disabled { + background: #e3eef7 !important; +} +.note.blue:not(.disabled) { + border-left-color: #428bca !important; +} +.note.blue:not(.disabled).modern { + border-left-color: transparent !important; + color: #428bca; +} +.note.blue:not(.disabled):not(.simple) { + background: #e3eef7 !important; +} +.note.blue::before { + color: #428bca; +} +.note.blue > .note-icon { + color: #428bca; +} +.note.pink { + color: #4c4948; +} +.note.pink.disabled { + background: #ffe9f4 !important; +} +.note.pink:not(.disabled) { + border-left-color: #ff69b4 !important; +} +.note.pink:not(.disabled).modern { + border-left-color: transparent !important; + color: #ff69b4; +} +.note.pink:not(.disabled):not(.simple) { + background: #ffe9f4 !important; +} +.note.pink::before { + color: #ff69b4; +} +.note.pink > .note-icon { + color: #ff69b4; +} +.note.red { + color: #4c4948; +} +.note.red.disabled { + background: #ffd9d9 !important; +} +.note.red:not(.disabled) { + border-left-color: #f00 !important; +} +.note.red:not(.disabled).modern { + border-left-color: transparent !important; + color: #f00; +} +.note.red:not(.disabled):not(.simple) { + background: #ffd9d9 !important; +} +.note.red::before { + color: #f00; +} +.note.red > .note-icon { + color: #f00; +} +.note.purple { + color: #4c4948; +} +.note.purple.disabled { + background: #e9e3f6 !important; +} +.note.purple:not(.disabled) { + border-left-color: #6f42c1 !important; +} +.note.purple:not(.disabled).modern { + border-left-color: transparent !important; + color: #6f42c1; +} +.note.purple:not(.disabled):not(.simple) { + background: #e9e3f6 !important; +} +.note.purple::before { + color: #6f42c1; +} +.note.purple > .note-icon { + color: #6f42c1; +} +.note.orange { + color: #4c4948; +} +.note.orange.disabled { + background: #ffeed9 !important; +} +.note.orange:not(.disabled) { + border-left-color: #ff8c00 !important; +} +.note.orange:not(.disabled).modern { + border-left-color: transparent !important; + color: #ff8c00; +} +.note.orange:not(.disabled):not(.simple) { + background: #ffeed9 !important; +} +.note.orange::before { + color: #ff8c00; +} +.note.orange > .note-icon { + color: #ff8c00; +} +.note.green { + color: #4c4948; +} +.note.green.disabled { + background: #e7f4e7 !important; +} +.note.green:not(.disabled) { + border-left-color: #5cb85c !important; +} +.note.green:not(.disabled).modern { + border-left-color: transparent !important; + color: #5cb85c; +} +.note.green:not(.disabled):not(.simple) { + background: #e7f4e7 !important; +} +.note.green::before { + color: #5cb85c; +} +.note.green > .note-icon { + color: #5cb85c; +} +.note.simple { + border: 1px solid #eee; + border-left-width: 5px; + color: var(--font-color); +} +.note.modern { + border: 1px solid transparent !important; + background-color: #f5f5f5; + color: #4c4948; +} +.note.flat { + border: initial; + border-left: 5px solid #eee; + background-color: #f9f9f9; + color: #4c4948; +} +.note.flat a { + color: #4c4948 !important; +} +.note.flat a:hover { + color: var(--anzhiyu-white) !important; +} +.note h2, +.note h3, +.note h4, +.note h5, +.note h6 { + margin-top: 3px; + margin-bottom: 0; + padding-top: 0 !important; + border-bottom: initial; +} +.note p:first-child, +.note ul:first-child, +.note ol:first-child, +.note table:first-child, +.note pre:first-child, +.note blockquote:first-child, +.note img:first-child { + margin-top: 0 !important; +} +.note p:last-child, +.note ul:last-child, +.note ol:last-child, +.note table:last-child, +.note pre:last-child, +.note blockquote:last-child, +.note img:last-child { + margin-bottom: 0 !important; +} +.note:not(.no-icon) { + padding-left: 3em; +} +.note:not(.no-icon)::before { + position: absolute; + top: calc(50% - 0.95em); + left: 0.8em; + font-size: larger; +} +.note.default.flat { + background: #f7f7f7; +} +.note.default.modern { + border-color: #e1e1e1; + background: #f3f3f3; + color: #666; +} +.note.default.modern a:not(.btn) { + color: #666; +} +.note.default.modern a:not(.btn):hover { + color: #454545; +} +.note.default:not(.modern) { + border-left-color: #777; +} +.note.default:not(.modern) h2, +.note.default:not(.modern) h3, +.note.default:not(.modern) h4, +.note.default:not(.modern) h5, +.note.default:not(.modern) h6 { + color: #777; +} +.note.default:not(.no-icon)::before { + content: '\f0a9'; +} +.note.default:not(.no-icon):not(.modern)::before { + color: #777; +} +.note.primary.flat { + background: #f5f0fa; +} +.note.primary.modern { + border-color: #e1c2ff; + background: #f3daff; + color: #6f42c1; +} +.note.primary.modern a:not(.btn) { + color: #6f42c1; +} +.note.primary.modern a:not(.btn):hover { + color: #453298; +} +.note.primary:not(.modern) { + border-left-color: #6f42c1; +} +.note.primary:not(.modern) h2, +.note.primary:not(.modern) h3, +.note.primary:not(.modern) h4, +.note.primary:not(.modern) h5, +.note.primary:not(.modern) h6 { + color: #6f42c1; +} +.note.primary:not(.no-icon)::before { + content: '\f055'; +} +.note.primary:not(.no-icon):not(.modern)::before { + color: #6f42c1; +} +.note.info.flat { + background: #eef7fa; +} +.note.info.modern { + border-color: #b3e5ef; + background: #d9edf7; + color: #31708f; +} +.note.info.modern a:not(.btn) { + color: #31708f; +} +.note.info.modern a:not(.btn):hover { + color: #215761; +} +.note.info:not(.modern) { + border-left-color: #428bca; +} +.note.info:not(.modern) h2, +.note.info:not(.modern) h3, +.note.info:not(.modern) h4, +.note.info:not(.modern) h5, +.note.info:not(.modern) h6 { + color: #428bca; +} +.note.info:not(.no-icon)::before { + content: '\f05a'; +} +.note.info:not(.no-icon):not(.modern)::before { + color: #428bca; +} +.note.success.flat { + background: #eff8f0; +} +.note.success.modern { + border-color: #d0e6be; + background: #dff0d8; + color: #3c763d; +} +.note.success.modern a:not(.btn) { + color: #3c763d; +} +.note.success.modern a:not(.btn):hover { + color: #32562c; +} +.note.success:not(.modern) { + border-left-color: #5cb85c; +} +.note.success:not(.modern) h2, +.note.success:not(.modern) h3, +.note.success:not(.modern) h4, +.note.success:not(.modern) h5, +.note.success:not(.modern) h6 { + color: #5cb85c; +} +.note.success:not(.no-icon)::before { + content: '\f058'; +} +.note.success:not(.no-icon):not(.modern)::before { + color: #5cb85c; +} +.note.warning.flat { + background: #fdf8ea; +} +.note.warning.modern { + border-color: #fae4cd; + background: #fcf4e3; + color: #8a6d3b; +} +.note.warning.modern a:not(.btn) { + color: #8a6d3b; +} +.note.warning.modern a:not(.btn):hover { + color: #714f30; +} +.note.warning:not(.modern) { + border-left-color: #f0ad4e; +} +.note.warning:not(.modern) h2, +.note.warning:not(.modern) h3, +.note.warning:not(.modern) h4, +.note.warning:not(.modern) h5, +.note.warning:not(.modern) h6 { + color: #f0ad4e; +} +.note.warning:not(.no-icon)::before { + content: '\f06a'; +} +.note.warning:not(.no-icon):not(.modern)::before { + color: #f0ad4e; +} +.note.danger.flat { + background: #fcf1f2; +} +.note.danger.modern { + border-color: #ebcdd2; + background: #f2dfdf; + color: #a94442; +} +.note.danger.modern a:not(.btn) { + color: #a94442; +} +.note.danger.modern a:not(.btn):hover { + color: #84333f; +} +.note.danger:not(.modern) { + border-left-color: #d9534f; +} +.note.danger:not(.modern) h2, +.note.danger:not(.modern) h3, +.note.danger:not(.modern) h4, +.note.danger:not(.modern) h5, +.note.danger:not(.modern) h6 { + color: #d9534f; +} +.note.danger:not(.no-icon)::before { + content: '\f056'; +} +.note.danger:not(.no-icon):not(.modern)::before { + color: #d9534f; +} +.site-card-group { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: start; + -moz-box-pack: start; + -o-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + margin: -8px; + -webkit-box-align: stretch; + -moz-box-align: stretch; + -o-box-align: stretch; + -ms-flex-align: stretch; + -webkit-align-items: stretch; + align-items: stretch; +} +.site-card { + margin: 8px; + width: calc(100% / 4 - 16px); + display: block; + line-height: 1.4; + height: 100%; +} +@media screen and (min-width: 2048px) { + .site-card { + width: calc(100% / 5 - 16px); + } +} +@media screen and (max-width: 768px) { + .site-card { + width: calc(100% / 3 - 16px); + } +} +@media screen and (max-width: 500px) { + .site-card { + width: calc(100% / 2 - 16px); + } +} +.site-card .img { + width: 100%; + height: 120px; + overflow: hidden; + border-radius: 6px; + -webkit-box-shadow: 0 1px 2px 0px rgba(0,0,0,0.2); + box-shadow: 0 1px 2px 0px rgba(0,0,0,0.2); + background: #f6f6f6; +} +@media screen and (max-width: 500px) { + .site-card .img { + height: 100px; + } +} +.site-card .img img { + width: 100%; + height: 100%; + pointer-events: none; + -webkit-transition: -webkit-transform 2s ease; + -moz-transition: -moz-transform 2s ease; + -o-transition: -o-transform 2s ease; + -ms-transition: -ms-transform 2s ease; + transition: transform 2s ease; + object-fit: cover; +} +.site-card .info { + margin-top: 8px; +} +.site-card .info img { + width: 32px; + height: 32px; + pointer-events: none; + border-radius: 16px; + float: left; + margin-right: 8px; + margin-top: 2px; +} +.site-card .info span { + display: block; +} +.site-card .info .title { + font-weight: 600; + font-size: var(--global-font-size); + color: #444; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 1; + -webkit-transition: all 0.28s ease; + -moz-transition: all 0.28s ease; + -o-transition: all 0.28s ease; + -ms-transition: all 0.28s ease; + transition: all 0.28s ease; + -moz-transition: all 0.28s ease; + -webkit-transition: all 0.28s ease; + -o-transition: all 0.28s ease; +} +.site-card .info .desc { + font-size: var(--global-font-size); + word-wrap: break-word; + line-height: 1.2; + color: #888; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 2; +} +.site-card .img { + -webkit-transition: all 0.28s ease; + -moz-transition: all 0.28s ease; + -o-transition: all 0.28s ease; + -ms-transition: all 0.28s ease; + transition: all 0.28s ease; + -moz-transition: all 0.28s ease; + -webkit-transition: all 0.28s ease; + -o-transition: all 0.28s ease; +} +.site-card:hover .img { + -webkit-box-shadow: 0 4px 8px 0px rgba(0,0,0,0.1), 0 2px 4px 0px rgba(0,0,0,0.1), 0 4px 8px 0px rgba(0,0,0,0.1), 0 8px 16px 0px rgba(0,0,0,0.1); + box-shadow: 0 4px 8px 0px rgba(0,0,0,0.1), 0 2px 4px 0px rgba(0,0,0,0.1), 0 4px 8px 0px rgba(0,0,0,0.1), 0 8px 16px 0px rgba(0,0,0,0.1); +} +.site-card:hover .info .title { + color: #ff5722; +} +p.p.subtitle { + font-weight: bold; + color: #44b299; + font-size: 1.25rem !important; + padding-top: 1.5rem; +} +p.p.subtitle:first-child { + padding-top: 1rem; +} +span.p.left, +p.p.left { + display: block; + text-align: left; +} +span.p.center, +p.p.center { + display: block; + text-align: center; +} +span.p.right, +p.p.right { + display: block; + text-align: right; +} +span.p.small, +p.p.small { + font-size: var(--global-font-size); +} +span.p.large, +p.p.large { + font-size: 2.5rem; + line-height: 1.4; +} +span.p.huge, +p.p.huge { + font-size: 4rem; + line-height: 1.4; +} +span.p.ultra, +p.p.ultra { + font-size: 6rem; + line-height: 1.4; +} +span.p.small, +p.p.small, +span.p.large, +p.p.large, +span.p.huge, +p.p.huge, +span.p.ultra, +p.p.ultra { + margin: 0; + padding: 0; +} +span.p.bold, +p.p.bold { + font-weight: bold; +} +span.p.h1, +p.p.h1, +span.p.h2, +p.p.h2 { + padding-bottom: 0.2rem; + font-weight: 500; +} +span.p.h1, +p.p.h1 { + font-size: 1.625rem; + color: var(--color-h1); + padding-top: 2em; +} +span.p.h2, +p.p.h2 { + font-size: 1.625rem; + color: var(--color-h2); + padding-top: 2em; + border-bottom: 1px solid rgba(68,68,68,0.1); +} +span.p.h3, +p.p.h3 { + font-size: 1.375rem; + color: var(--color-h3); + padding-top: 2em; +} +span.p.h4, +p.p.h4 { + font-size: 1.125rem; + color: var(--color-h4); + padding-top: 2em; +} +span.p.h5, +p.p.h5 { + font-size: 1rem; + color: var(--color-h5); + padding-top: 1.5em; +} +span.p.red, +p.p.red { + color: #e8453c; +} +span.p.yellow, +p.p.yellow { + color: #fcec60; +} +span.p.green, +p.p.green { + color: #3dc550; +} +span.p.cyan, +p.p.cyan { + color: #1bcdfc; +} +span.p.blue, +p.p.blue { + color: #2196f3; +} +span.p.purple, +p.p.purple { + color: #9c27b0; +} +span.p.gray, +p.p.gray { + color: #999; +} +#article-container .tabs { + position: relative; + margin: 0 0 20px; + border: 3px solid var(--anzhiyu-secondbg); + margin: 1rem 0 !important; + border-radius: 12px; + overflow: hidden; + -webkit-box-shadow: var(--anzhiyu-shadow-border); + box-shadow: var(--anzhiyu-shadow-border); + background: var(--anzhiyu-card-bg); + padding: 8px; +} +#article-container .tabs > .nav-tabs { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -o-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + margin: 0; + padding: 16px; + background: var(--anzhiyu-card-bg); +} +#article-container .tabs > .nav-tabs > .tab { + padding: 8px 18px; + background: var(--anzhiyu-secondbg); + color: var(--anzhiyu-fontcolor); + line-height: 1; + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + -ms-transition: all 0.4s; + transition: all 0.4s; + margin: 4px; + border: var(--style-border-always); + border-radius: 8px; +} +#article-container .tabs > .nav-tabs > .tab i { + width: 1.5em; +} +#article-container .tabs > .nav-tabs > .tab.active { + border: var(--style-border-hover-always); + background: var(--anzhiyu-background); + border-radius: 8px; + cursor: default; +} +#article-container .tabs > .nav-tabs > .tab:not(.active):hover { + background: var(--anzhiyu-main); + color: var(--anzhiyu-white); + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + border: var(--style-border-hover-always); +} +#article-container .tabs > .nav-tabs.no-default ~ .tab-to-top { + display: none; +} +#article-container .tabs > .tab-contents .tab-item-content { + position: relative; + display: none; + background: var(--anzhiyu-background); + border: var(--style-border-always); + padding: 1.2rem 1.2rem; + border-radius: 8px; +} +@media screen and (max-width: 768px) { + #article-container .tabs > .tab-contents .tab-item-content { + padding: 24px 14px; + } +} +#article-container .tabs > .tab-contents .tab-item-content.active { + display: block; +} +#article-container .tabs > .tab-to-top { + padding: 0 16px 10px 0; + width: 100%; + text-align: right; +} +#article-container .tabs > .tab-to-top button { + color: #99a9bf; +} +#article-container .tabs > .tab-to-top button:hover { + color: #425aef; +} +@-moz-keyframes tabshow { + 0% { + -webkit-transform: translateY(15px); + -moz-transform: translateY(15px); + -o-transform: translateY(15px); + -ms-transform: translateY(15px); + transform: translateY(15px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-webkit-keyframes tabshow { + 0% { + -webkit-transform: translateY(15px); + -moz-transform: translateY(15px); + -o-transform: translateY(15px); + -ms-transform: translateY(15px); + transform: translateY(15px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@-o-keyframes tabshow { + 0% { + -webkit-transform: translateY(15px); + -moz-transform: translateY(15px); + -o-transform: translateY(15px); + -ms-transform: translateY(15px); + transform: translateY(15px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes tabshow { + 0% { + -webkit-transform: translateY(15px); + -moz-transform: translateY(15px); + -o-transform: translateY(15px); + -ms-transform: translateY(15px); + transform: translateY(15px); + } + 100% { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} +#article-container .timeline { + margin: 0 0 20px 10px; + padding: 14px 20px 5px; + border-left: 2px solid var(--timeline-color, #425aef); +} +#article-container .timeline.blue { + --timeline-color: #428bca; + --timeline-bg: rgba(66,139,202, 0.2); +} +#article-container .timeline.pink { + --timeline-color: #ff69b4; + --timeline-bg: rgba(255,105,180, 0.2); +} +#article-container .timeline.red { + --timeline-color: #f00; + --timeline-bg: rgba(255,0,0, 0.2); +} +#article-container .timeline.purple { + --timeline-color: #6f42c1; + --timeline-bg: rgba(111,66,193, 0.2); +} +#article-container .timeline.orange { + --timeline-color: #ff8c00; + --timeline-bg: rgba(255,140,0, 0.2); +} +#article-container .timeline.green { + --timeline-color: #5cb85c; + --timeline-bg: rgba(92,184,92, 0.2); +} +#article-container .timeline .timeline-item { + margin: 0 0 15px; +} +#article-container .timeline .timeline-item:hover .item-circle:before { + border-color: var(--timeline-color, #425aef); +} +#article-container .timeline .timeline-item.headline .timeline-item-title .item-circle > p { + font-weight: 600; + font-size: 1.2em; +} +#article-container .timeline .timeline-item.headline .timeline-item-title .item-circle:before { + left: -28px; + border: 4px solid var(--timeline-color, #425aef); +} +#article-container .timeline .timeline-item.headline:hover .item-circle:before { + border-color: var(--pseudo-hover); +} +#article-container .timeline .timeline-item .timeline-item-title { + position: relative; +} +#article-container .timeline .timeline-item .item-circle:before { + position: absolute; + top: 50%; + left: -27px; + width: 6px; + height: 6px; + border: 3px solid var(--pseudo-hover); + border-radius: 50%; + background: var(--card-bg); + content: ''; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; + -webkit-transform: translate(0, -50%); + -moz-transform: translate(0, -50%); + -o-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); +} +#article-container .timeline .timeline-item .item-circle > p { + margin: 0 0 8px; + font-weight: 500; +} +#article-container .timeline .timeline-item .timeline-item-content { + position: relative; + padding: 12px 15px; + border-radius: 0.5rem; + border: var(--style-border-always); + font-size: 0.93em; +} +#article-container .timeline .timeline-item .timeline-item-content > :last-child { + margin-bottom: 0; +} +#article-container .timeline + .timeline { + margin-top: -20px; +} +.tip { + padding: 6px 20px; + position: relative; + color: #fff; + margin-bottom: 20px; + background: -webkit-linear-gradient(0deg, #41363c, #494648); + background: -moz-linear-gradient(0deg, #41363c, #494648); + background: -o-linear-gradient(0deg, #41363c, #494648); + background: -ms-linear-gradient(0deg, #41363c, #494648); + background: linear-gradient(90deg, #41363c, #494648); + padding: 6px 20px; + border-radius: 10px; + -webkit-box-shadow: 0 3px 5px rgba(50,50,50,0.5); + -webkit-box-shadow: 0 3px 5px rgba(50,50,50,0.5); + box-shadow: 0 3px 5px rgba(50,50,50,0.5); +} +.tip p { + margin: 0 !important; + padding: 0.5rem 0; +} +.tip:before { + background: -webkit-linear-gradient(90deg, #41363c, #494648); + background: -moz-linear-gradient(90deg, #41363c, #494648); + background: -o-linear-gradient(90deg, #41363c, #494648); + background: -ms-linear-gradient(90deg, #41363c, #494648); + background: linear-gradient(0deg, #41363c, #494648); + text-shadow: 0 -1px #41363c; + border-radius: 50%; + color: #fff; + font-size: 12px; + position: absolute; + width: 24px; + height: 24px; + line-height: 24.5px; + left: -12px; + top: -12px; + -webkit-box-shadow: 0 0 0 2.5px #f7f8f9; + box-shadow: 0 0 0 2.5px #f7f8f9; + font-weight: 600; + font-family: "Font Awesome 6 Free"; + text-align: center; +} +.tip ol { + margin: 0; +} +.tip.info { + background: #20a0ff; + background: -webkit-linear-gradient(0deg, #20a0ff, #20b8ff); + background: -moz-linear-gradient(0deg, #20a0ff, #20b8ff); + background: -o-linear-gradient(0deg, #20a0ff, #20b8ff); + background: -ms-linear-gradient(0deg, #20a0ff, #20b8ff); + background: linear-gradient(90deg, #20a0ff, #20b8ff); + padding: 6px 20px; + border-radius: 10px; + -webkit-box-shadow: 0 3px 5px rgba(32,160,255,0.5); + -webkit-box-shadow: 0 3px 5px rgba(32,160,255,0.5); + box-shadow: 0 3px 5px rgba(32,160,255,0.5); +} +.tip.info:before { + background: #20a0ff; + background: -webkit-gradient(linear, left bottom, left top, from(#0092ff), to(#20b8ff)); + background: -webkit-gradient(linear, left bottom, left top, from(#0092ff), to(#20b8ff)); + background: -webkit-gradient(linear, left bottom, left top, from(#0092ff), to(#20b8ff)); + background: -webkit-gradient(linear, left bottom, left top, from(#0092ff), to(#20b8ff)); + background: -webkit-gradient(linear, left bottom, left top, from(#0092ff), to(#20b8ff)); + background: -webkit-linear-gradient(90deg, #0092ff, #20b8ff); + background: -moz-linear-gradient(90deg, #0092ff, #20b8ff); + background: -o-linear-gradient(90deg, #0092ff, #20b8ff); + background: -ms-linear-gradient(90deg, #0092ff, #20b8ff); + background: linear-gradient(0deg, #0092ff, #20b8ff); + content: "\f05a"; + font-family: anzhiyufont; + text-shadow: 0 -1px #20a0ff; +} +.tip.success { + background: -webkit-linear-gradient(0deg, #61be33, #8fce44); + background: -moz-linear-gradient(0deg, #61be33, #8fce44); + background: -o-linear-gradient(0deg, #61be33, #8fce44); + background: -ms-linear-gradient(0deg, #61be33, #8fce44); + background: linear-gradient(90deg, #61be33, #8fce44); + text-shadow: 0 -1px #61be33; + -webkit-box-shadow: 0 3px 5px rgba(104,195,59,0.5); + -webkit-box-shadow: 0 3px 5px rgba(104,195,59,0.5); + box-shadow: 0 3px 5px rgba(104,195,59,0.5); +} +.tip.success:before { + background: -webkit-linear-gradient(90deg, #52bb1d, #95d34b); + background: -moz-linear-gradient(90deg, #52bb1d, #95d34b); + background: -o-linear-gradient(90deg, #52bb1d, #95d34b); + background: -ms-linear-gradient(90deg, #52bb1d, #95d34b); + background: linear-gradient(0deg, #52bb1d, #95d34b); + content: "\f058"; + text-shadow: 0 -1px #61be33; + font-family: anzhiyufont; +} +.tip.warning { + background: #ff953f; + background: -webkit-linear-gradient(0deg, #ff953f, #ffb449); + background: -moz-linear-gradient(0deg, #ff953f, #ffb449); + background: -o-linear-gradient(0deg, #ff953f, #ffb449); + background: -ms-linear-gradient(0deg, #ff953f, #ffb449); + background: linear-gradient(90deg, #ff953f, #ffb449); + text-shadow: 0 -1px #ff953f; + -webkit-box-shadow: 0 3px 5px rgba(255,154,73,0.5); + box-shadow: 0 3px 5px rgba(255,154,73,0.5); +} +.tip.warning::before { + background: -webkit-linear-gradient(90deg, #ff8f35, #ffc149); + background: -moz-linear-gradient(90deg, #ff8f35, #ffc149); + background: -o-linear-gradient(90deg, #ff8f35, #ffc149); + background: -ms-linear-gradient(90deg, #ff8f35, #ffc149); + background: linear-gradient(0deg, #ff8f35, #ffc149); + content: '\f06a'; + text-shadow: 0 -1px #ff953f; + font-family: anzhiyufont; +} +.tip.error { + background: #ff4949; + background: -webkit-linear-gradient(0deg, #ff4949, #ff7849); + background: -moz-linear-gradient(0deg, #ff4949, #ff7849); + background: -o-linear-gradient(0deg, #ff4949, #ff7849); + background: -ms-linear-gradient(0deg, #ff4949, #ff7849); + background: linear-gradient(90deg, #ff4949, #ff7849); + text-shadow: 0 -1px #ff4949; + -webkit-box-shadow: 0 3px 5px rgba(255,73,73,0.5); + box-shadow: 0 3px 5px rgba(255,73,73,0.5); +} +.tip.error:before { + background: -webkit-linear-gradient(90deg, #ff3838, #ff7849); + background: -moz-linear-gradient(90deg, #ff3838, #ff7849); + background: -o-linear-gradient(90deg, #ff3838, #ff7849); + background: -ms-linear-gradient(90deg, #ff3838, #ff7849); + background: linear-gradient(0deg, #ff3838, #ff7849); + content: $note-error-icon; + text-shadow: 0 -1px #ff4949; + font-family: anzhiyufont; +} +.tip.bolt { + background: -webkit-linear-gradient(80deg, #78ca33, #25822c); + background: -moz-linear-gradient(80deg, #78ca33, #25822c); + background: -o-linear-gradient(80deg, #78ca33, #25822c); + background: -ms-linear-gradient(80deg, #78ca33, #25822c); + background: linear-gradient(530deg, #78ca33, #25822c); + content: "\f058"; + text-shadow: 0 -1px #4cf706; +} +.tip.bolt:before { + background: -webkit-linear-gradient(326deg, #78ca33, #25822c); + background: -moz-linear-gradient(326deg, #78ca33, #25822c); + background: -o-linear-gradient(326deg, #78ca33, #25822c); + background: -ms-linear-gradient(326deg, #78ca33, #25822c); + background: linear-gradient(776deg, #78ca33, #25822c); + content: "\f058"; + text-shadow: 0 -1px #4cf706; + font-family: anzhiyufont; +} +.tip.ban { + background: -webkit-linear-gradient(0deg, #ff4949, #f03b49); + background: -moz-linear-gradient(0deg, #ff4949, #f03b49); + background: -o-linear-gradient(0deg, #ff4949, #f03b49); + background: -ms-linear-gradient(0deg, #ff4949, #f03b49); + background: linear-gradient(90deg, #ff4949, #f03b49); + text-shadow: 0 -1px #ff4949; + -webkit-box-shadow: 0 3px 5px rgba(255,73,73,0.5); + box-shadow: 0 3px 5px rgba(255,73,73,0.5); +} +.tip.ban:before { + background: -webkit-linear-gradient(90deg, #ff3838, #ff1022); + background: -moz-linear-gradient(90deg, #ff3838, #ff1022); + background: -o-linear-gradient(90deg, #ff3838, #ff1022); + background: -ms-linear-gradient(90deg, #ff3838, #ff1022); + background: linear-gradient(0deg, #ff3838, #ff1022); + content: "\f056"; + text-shadow: 0 -1px #ff4949; + font-family: anzhiyufont; +} +.tip.home { + background: #15e5ff; + background: -webkit-linear-gradient(0deg, #0ec0ef, #80e0f7); + background: -moz-linear-gradient(0deg, #0ec0ef, #80e0f7); + background: -o-linear-gradient(0deg, #0ec0ef, #80e0f7); + background: -ms-linear-gradient(0deg, #0ec0ef, #80e0f7); + background: linear-gradient(90deg, #0ec0ef, #80e0f7); + text-shadow: 0 -1px #0ec0ef; + -webkit-box-shadow: 0 3px 5px #01caff; + -webkit-box-shadow: 0 3px 5px #01caff; + box-shadow: 0 3px 5px #01caff; +} +.tip.home:before { + background: -webkit-linear-gradient(90deg, #0ec0ee, #0ec0ea); + background: -moz-linear-gradient(90deg, #0ec0ee, #0ec0ea); + background: -o-linear-gradient(90deg, #0ec0ee, #0ec0ea); + background: -ms-linear-gradient(90deg, #0ec0ee, #0ec0ea); + background: linear-gradient(0deg, #0ec0ee, #0ec0ea); + content: "\e606"; + font-family: anzhiyufont; + text-shadow: 0 -1px #0ec0ea; +} +.tip.sync { + background: #00a9ff; + background: -webkit-linear-gradient(220deg, #47c0e0, #2dc342); + background: -moz-linear-gradient(220deg, #47c0e0, #2dc342); + background: -o-linear-gradient(220deg, #47c0e0, #2dc342); + background: -ms-linear-gradient(220deg, #47c0e0, #2dc342); + background: linear-gradient(230deg, #47c0e0, #2dc342); + text-shadow: 0 -1px #1bcdfc; + -webkit-box-shadow: 0 3px 5px #1bcdfc; + -webkit-box-shadow: 0 3px 5px #20b1ad; + box-shadow: 0 3px 5px #20b1ad; +} +.tip.sync:before { + background: -webkit-linear-gradient(180deg, #40c0e2, #3dc550); + background: -moz-linear-gradient(180deg, #40c0e2, #3dc550); + background: -o-linear-gradient(180deg, #40c0e2, #3dc550); + background: -ms-linear-gradient(180deg, #40c0e2, #3dc550); + background: linear-gradient(270deg, #40c0e2, #3dc550); + content: "\e66b"; + font-family: anzhiyufont; + text-shadow: 0 -1px #17cfff; +} +.tip.cogs { + background: -webkit-linear-gradient(220deg, #40c0e2, #5247e2); + background: -moz-linear-gradient(220deg, #40c0e2, #5247e2); + background: -o-linear-gradient(220deg, #40c0e2, #5247e2); + background: -ms-linear-gradient(220deg, #40c0e2, #5247e2); + background: linear-gradient(230deg, #40c0e2, #5247e2); + text-shadow: 0 -1px #8278fd; + -webkit-box-shadow: 0 3px 5px #4037a7; + -webkit-box-shadow: 1 3px 5px #5e52ec; + box-shadow: 1 3px 5px #5e52ec; +} +.tip.cogs:before { + background: -webkit-linear-gradient(110deg, #40c0e2, #5246e2); + background: -moz-linear-gradient(110deg, #40c0e2, #5246e2); + background: -o-linear-gradient(110deg, #40c0e2, #5246e2); + background: -ms-linear-gradient(110deg, #40c0e2, #5246e2); + background: linear-gradient(560deg, #40c0e2, #5246e2); + content: "\e638"; + font-family: anzhiyufont; + text-shadow: 0 -1px #098cf5; +} +.tip.key { + background: #25c33b; + background: -webkit-linear-gradient(220deg, #90a4ae, #b7a7a7); + background: -moz-linear-gradient(220deg, #90a4ae, #b7a7a7); + background: -o-linear-gradient(220deg, #90a4ae, #b7a7a7); + background: -ms-linear-gradient(220deg, #90a4ae, #b7a7a7); + background: linear-gradient(230deg, #90a4ae, #b7a7a7); + text-shadow: 0 -1px #c1c0d4; + -webkit-box-shadow: 0 3px 5px #d3d2de; + -webkit-box-shadow: 1 3px 5px #d5d4de; + box-shadow: 1 3px 5px #d5d4de; +} +.tip.key:before { + background: -webkit-linear-gradient(110deg, #bccdd2, #cfced4); + background: -moz-linear-gradient(110deg, #bccdd2, #cfced4); + background: -o-linear-gradient(110deg, #bccdd2, #cfced4); + background: -ms-linear-gradient(110deg, #bccdd2, #cfced4); + background: linear-gradient(560deg, #bccdd2, #cfced4); + content: "\e673"; + font-family: anzhiyufont; + text-shadow: 0 -1px #a9b2b9; +} +.tip.bell { + background: -webkit-linear-gradient(220deg, #ffaa0d, #deb455); + background: -moz-linear-gradient(220deg, #ffaa0d, #deb455); + background: -o-linear-gradient(220deg, #ffaa0d, #deb455); + background: -ms-linear-gradient(220deg, #ffaa0d, #deb455); + background: linear-gradient(230deg, #ffaa0d, #deb455); + text-shadow: 0 -1px #c1c0d4; + -webkit-box-shadow: 1 3px 5px #d5d4de; + box-shadow: 1 3px 5px #d5d4de; +} +.tip.bell:before { + background: -webkit-linear-gradient(110deg, #f9ae07, #ffb615); + background: -moz-linear-gradient(110deg, #f9ae07, #ffb615); + background: -o-linear-gradient(110deg, #f9ae07, #ffb615); + background: -ms-linear-gradient(110deg, #f9ae07, #ffb615); + background: linear-gradient(560deg, #f9ae07, #ffb615); + content: "\e635"; + font-family: anzhiyufont; + text-shadow: 0 -1px #ffb81b; +} +[data-theme="dark"] .tip { + filter: brightness(0.7); +} +#article-container .tip a { + color: #e6eaed; +} +[data-theme='dark'] { + --global-bg: #0d0d0d; + --font-color: rgba(255,255,255,0.7); + --hr-border: rgba(255,255,255,0.4); + --hr-before-color: rgba(255,255,255,0.7); + --search-bg: #121212; + --search-input-color: rgba(255,255,255,0.7); + --search-result-title: rgba(255,255,255,0.9); + --preloader-bg: #0d0d0d; + --preloader-color: rgba(255,255,255,0.7); + --tab-border-color: #2c2c2c; + --tab-botton-bg: #2c2c2c; + --tab-botton-color: rgba(255,255,255,0.7); + --tab-button-hover-bg: #383838; + --tab-button-active-bg: #121212; + --card-bg: #121212; + --sidebar-bg: #121212; + --btn-hover-color: #787878; + --btn-color: rgba(255,255,255,0.7); + --btn-bg: #1f1f1f; + --text-bg-hover: #383838; + --light-grey: rgba(255,255,255,0.7); + --dark-grey: rgba(255,255,255,0.2); + --white: rgba(255,255,255,0.9); + --text-highlight-color: rgba(255,255,255,0.9); + --blockquote-color: rgba(255,255,255,0.7); + --blockquote-bg: #2c2c2c; + --reward-pop: #2c2c2c; + --toc-link-color: rgba(255,255,255,0.6); + --scrollbar-color: #1f1f1f; + --timeline-bg: #1f1f1f; +} +[data-theme='dark'] #web_bg:before, +[data-theme='dark'] #footer:before, +[data-theme='dark'] #page-header:before { + position: absolute; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.3); + content: ''; + z-index: 2; + pointer-events: none; +} +[data-theme='dark'] #footer { + background-color: var(--anzhiyu-card-bg); +} +[data-theme='dark'] #article-container pre > code { + background: #171717; +} +[data-theme='dark'] #article-container figure.highlight { + -webkit-box-shadow: none; + box-shadow: none; +} +[data-theme='dark'] #article-container .note code { + background: var(--anzhiyu-code-stress); +} +[data-theme='dark'] #article-container .aplayer { + filter: brightness(0.8); +} +[data-theme='dark'] #article-container kbd { + border-color: #696969; + background-color: #525252; + color: #e2f1ff; +} +[data-theme='dark'] #page-header.nav-fixed > #nav, +[data-theme='dark'] #page-header.not-top-img > #nav { + background: var(--anzhiyu-black); + -webkit-box-shadow: 0 5px 6px -5px rgba(133,133,133,0); + box-shadow: 0 5px 6px -5px rgba(133,133,133,0); +} +[data-theme='dark'] .post #page-header.nav-fixed > #nav { + background: var(--anzhiyu-card-bg); + -webkit-box-shadow: none; + box-shadow: none; +} +[data-theme='dark'] #post-comment .comment-switch { + background: #2c2c2c !important; +} +[data-theme='dark'] #post-comment .comment-switch #switch-btn { + filter: brightness(0.8); +} +[data-theme='dark'] .note { + filter: brightness(0.8); +} +[data-theme='dark'] .hide-button, +[data-theme='dark'] .btn-anzhiyu, +[data-theme='dark'] .hl-label, +[data-theme='dark'] .post-outdate-notice, +[data-theme='dark'] .error-img, +[data-theme='dark'] #article-container iframe, +[data-theme='dark'] .gist, +[data-theme='dark'] .ads-wrap { + filter: brightness(0.8); +} +[data-theme='dark'] img { + filter: blur(0) brightness(0.8); +} +[data-theme='dark'] #aside-content .aside-list > .aside-list-item:not(:last-child) { + border-bottom: 1px dashed rgba(255,255,255,0.1); +} +@media screen and (max-width: 768px) { + [data-theme='dark'] .post #aside-content { + background: var(--anzhiyu-card-bg); + } +} +[data-theme='dark'] #artitalk_main #lazy { + background: #121212; +} +[data-theme='dark'] #operare_artitalk .c2 { + background: #121212; +} +@media screen and (max-width: 900px) { + [data-theme='dark'] #card-toc { + background: #1f1f1f; + } +} +.read-mode { + --font-color: #4c4948; + --readmode-light-color: #fff; + --white: var(--anzhiyu-white); + --light-grey: #4c4948; + --gray: #d6dbdf; + --hr-border: #d6dbdf; + --hr-before-color: #b9c2c9; + --highlight-bg: #f7f7f7; + --exit-btn-bg: #c0c0c0; + --exit-btn-color: #fff; + --exit-btn-hover: #8d8d8d; + --pseudo-hover: none; +} +[data-theme='dark'] .read-mode { + --font-color: rgba(255,255,255,0.7); + --readmode-light-color: #0d0d0d; + --white: rgba(255,255,255,0.9); + --light-grey: rgba(255,255,255,0.7); + --gray: rgba(255,255,255,0.7); + --hr-border: rgba(255,255,255,0.5); + --hr-before-color: rgba(255,255,255,0.7); + --highlight-bg: #171717; + --exit-btn-bg: #1f1f1f; + --exit-btn-color: rgba(255,255,255,0.9); + --exit-btn-hover: #525252; +} +.read-mode { + background: var(--readmode-light-color); +} +.read-mode .exit-readmode { + position: fixed; + top: 30px; + right: 30px; + z-index: 100; + width: 40px; + height: 40px; + border-radius: 8px; + background: var(--exit-btn-bg); + color: var(--exit-btn-color); + font-size: 16px; + -webkit-transition: background 0.3s; + -moz-transition: background 0.3s; + -o-transition: background 0.3s; + -ms-transition: background 0.3s; + transition: background 0.3s; +} +@media screen and (max-width: 768px) { + .read-mode .exit-readmode { + top: initial; + bottom: 30px; + } +} +.read-mode .exit-readmode:hover { + background: var(--exit-btn-hover); +} +.read-mode #aside-content { + display: none; +} +.read-mode #post-firstinfo .meta-firstline a.post-meta-original { + color: var(--white) !important; +} +.read-mode #post-firstinfo .meta-firstline a.post-meta-categories { + color: var(--white) !important; +} +.read-mode #post-firstinfo .meta-firstline a.article-meta__tags { + color: var(--white) !important; +} +.read-mode #post-info #post-meta { + color: var(--white) !important; +} +.read-mode #page-header.post-bg { + background-color: transparent; + background-image: none !important; +} +.read-mode #page-header.post-bg:before { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); +} +.read-mode #page-header.post-bg > #post-info { + text-align: center; +} +.read-mode #post { + margin: 0 auto; + background: transparent; + -webkit-box-shadow: none; + box-shadow: none; +} +.read-mode #post:hover { + -webkit-box-shadow: none; + box-shadow: none; +} +.read-mode > canvas { + display: none !important; +} +.read-mode .highlight-tools, +.read-mode #footer, +.read-mode #post > *:not(#post-info):not(.post-content), +.read-mode #nav, +.read-mode .post-outdate-notice, +.read-mode #web_bg, +.read-mode #rightside, +.read-mode .not-top-img { + display: none !important; +} +.read-mode #article-container a { + color: #99a9bf; +} +.read-mode #article-container pre, +.read-mode #article-container .highlight:not(.js-file-line-container) { + background: var(--highlight-bg) !important; +} +.read-mode #article-container pre *, +.read-mode #article-container .highlight:not(.js-file-line-container) * { + color: var(--font-color) !important; +} +.read-mode #article-container figure.highlight { + border-radius: 0 !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} +.read-mode #article-container figure.highlight > :not(.highlight-tools) { + display: block !important; +} +.read-mode #article-container figure.highlight .line:before { + color: var(--font-color) !important; +} +.read-mode #article-container figure.highlight .hljs { + background: var(-highlight-bg) !important; +} +.read-mode #article-container h1, +.read-mode #article-container h2, +.read-mode #article-container h3, +.read-mode #article-container h4, +.read-mode #article-container h5, +.read-mode #article-container h6 { + padding: 0; +} +.read-mode #article-container h1:before, +.read-mode #article-container h2:before, +.read-mode #article-container h3:before, +.read-mode #article-container h4:before, +.read-mode #article-container h5:before, +.read-mode #article-container h6:before { + content: ''; +} +.read-mode #article-container h1:hover, +.read-mode #article-container h2:hover, +.read-mode #article-container h3:hover, +.read-mode #article-container h4:hover, +.read-mode #article-container h5:hover, +.read-mode #article-container h6:hover { + padding: 0; +} +.read-mode #article-container ul:hover:before, +.read-mode #article-container li:hover:before, +.read-mode #article-container ol:hover:before { + -webkit-transform: none !important; + -moz-transform: none !important; + -o-transform: none !important; + -ms-transform: none !important; + transform: none !important; +} +.read-mode #article-container ol:before, +.read-mode #article-container li:before { + background: transparent !important; + color: var(--font-color) !important; +} +.read-mode #article-container ul >li:before { + border-color: var(--gray) !important; +} +.read-mode #article-container .tabs { + border: 2px solid var(--tab-border-color); +} +.read-mode #article-container .tabs > .nav-tabs { + background: transparent; +} +.read-mode #article-container .tabs > .nav-tabs > .tab { + border-top: none !important; +} +.read-mode #article-container .tabs > .tab-contents .tab-item-content.active { + -webkit-animation: none; + -moz-animation: none; + -o-animation: none; + -ms-animation: none; + animation: none; +} +.read-mode #article-container code { + color: var(--font-color); +} +.read-mode #article-container blockquote { + border-color: var(--gray); + background-color: var(--readmode-light-color); +} +.read-mode #article-container kbd { + border: 1px solid var(--gray); + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + color: var(--font-color); +} +.read-mode #article-container .hide-toggle { + border: 1px solid var(--gray) !important; +} +.read-mode #article-container .hide-button, +.read-mode #article-container .btn-anzhiyu, +.read-mode #article-container .hl-label { + border: 1px solid var(--gray) !important; + background: var(--readmode-light-color) !important; + color: var(--font-color) !important; +} +.read-mode #article-container .note { + border: 2px solid var(--gray); + border-left-color: var(--gray) !important; + filter: none; + background-color: var(--readmode-light-color) !important; + color: var(--font-color); +} +.read-mode #article-container .note:before, +.read-mode #article-container .note .note-icon { + color: var(--font-color); +} +body .snackbar-container { + background: var(--anzhiyu-main) !important; + color: var(--anzhiyu-white) !important; + border-radius: 0 !important; + display: -webkit-box !important; + display: -moz-box !important; + display: -webkit-flex !important; + display: -ms-flexbox !important; + display: box !important; + display: flex !important; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + max-width: none !important; + min-width: 100% !important; + margin: 0 !important; + left: 0 !important; + height: 61px !important; + -webkit-transform: none !important; + -moz-transform: none !important; + -o-transform: none !important; + -ms-transform: none !important; + transform: none !important; + margin: 0 !important; + z-index: 99999; +} +body .snackbar-container p { + font-weight: 700 !important; + text-align: center !important; + font-size: 1.1rem !important; +} +body .snackbar-container .action { + color: var(--anzhiyu-white) !important; + padding: 4px 6px !important; + font-weight: 700; + border-radius: 8px; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -o-transition: 0.3s; + -ms-transition: 0.3s; + transition: 0.3s; + border: var(--style-border) !important; +} +body .snackbar-container .action:hover { + color: var(--anzhiyu-main) !important; + background: var(--anzhiyu-white); +} +body .snackbar-container::after { + position: absolute; + height: 100%; + width: 100%; + left: 0; + top: 0; + background: var(--anzhiyu-white); + opacity: 0.1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; + filter: alpha(opacity=10); + content: ""; + -webkit-animation: snackbar-progress var(--anzhiyu-snackbar-time) linear forwards; + -moz-animation: snackbar-progress var(--anzhiyu-snackbar-time) linear forwards; + -o-animation: snackbar-progress var(--anzhiyu-snackbar-time) linear forwards; + -ms-animation: snackbar-progress var(--anzhiyu-snackbar-time) linear forwards; + animation: snackbar-progress var(--anzhiyu-snackbar-time) linear forwards; + pointer-events: none; + will-change: transform; + -webkit-transform-origin: left; + -moz-transform-origin: left; + -o-transform-origin: left; + -ms-transform-origin: left; + transform-origin: left; +} +@-moz-keyframes snackbar-progress { + from { + -webkit-transform: scaleX(0); + -moz-transform: scaleX(0); + -o-transform: scaleX(0); + -ms-transform: scaleX(0); + transform: scaleX(0); + } + to { + -webkit-transform: scaleX(1); + -moz-transform: scaleX(1); + -o-transform: scaleX(1); + -ms-transform: scaleX(1); + transform: scaleX(1); + } +} +@-webkit-keyframes snackbar-progress { + from { + -webkit-transform: scaleX(0); + -moz-transform: scaleX(0); + -o-transform: scaleX(0); + -ms-transform: scaleX(0); + transform: scaleX(0); + } + to { + -webkit-transform: scaleX(1); + -moz-transform: scaleX(1); + -o-transform: scaleX(1); + -ms-transform: scaleX(1); + transform: scaleX(1); + } +} +@-o-keyframes snackbar-progress { + from { + -webkit-transform: scaleX(0); + -moz-transform: scaleX(0); + -o-transform: scaleX(0); + -ms-transform: scaleX(0); + transform: scaleX(0); + } + to { + -webkit-transform: scaleX(1); + -moz-transform: scaleX(1); + -o-transform: scaleX(1); + -ms-transform: scaleX(1); + transform: scaleX(1); + } +} +@keyframes snackbar-progress { + from { + -webkit-transform: scaleX(0); + -moz-transform: scaleX(0); + -o-transform: scaleX(0); + -ms-transform: scaleX(0); + transform: scaleX(0); + } + to { + -webkit-transform: scaleX(1); + -moz-transform: scaleX(1); + -o-transform: scaleX(1); + -ms-transform: scaleX(1); + transform: scaleX(1); + } +} +/* 处理单页背景 */ +body[data-type="album_detail"] #web_bg { + background: var(--anzhiyu-background); +} +body[data-type="album_detail"] #page { + border: 0; + box-shadow: none !important; + padding: 0 !important; + background: 0 0 !important; +} +body[data-type="album_detail"] #page .page-title { + display: none; +} + +/* 处理页面样式 */ +#album_detail .album-container-img { + display: flex; + align-items: center; + justify-content: space-around; + width: 100%; + height: 100%; + flex-wrap: wrap; + margin-bottom: 0.3rem; +} +#album_detail .album-container-img .album-content-noimg { + width: calc(100% / 2 - 5px); +} + +#album_detail .album-content-img img { + object-fit: cover; + max-width: 100%; + border-radius: 12px; + margin: 10px 0; +} + +#album_detail .album-content-img { + height: 100%; + max-height: 300px; + border-radius: 12px; + overflow: hidden; + display: flex; + position: relative; +} + +#album_detail .album-content .datacont { + order: 0; + font-size: 0.8rem; + font-weight: 700; + color: var(--anzhiyu-fontcolor); + width: 100%; + line-height: 1.38; + border-radius: 12px; + margin-bottom: 0.5rem; + display: flex; + flex-direction: column; + text-align: justify; +} +#album_detail p { + margin: 0px; +} +#album_detail div.album-content { + display: flex; + flex-flow: wrap; + border-radius: 12px; + width: 100%; + height: 100%; +} +#album_detail .timeline ul li.album-item { + position: relative; + width: 32%; + border: var(--style-border-always); + border-radius: 12px; + padding: 1rem 1rem 0.5rem; + transition: all 0.3s ease 0s; + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + align-items: flex-start; + background: var(--anzhiyu-card-bg); + box-shadow: var(--anzhiyu-shadow-border); + margin-right: 2%; +} +#album_detail .timeline #waterfall.show { + opacity: 1; +} +#album_detail .timeline #waterfall { + opacity: 0; + transition: all 0.3s ease 0s; +} +#album_detail ul.list { + display: flex; + flex-flow: row wrap; + justify-content: space-between; +} +#album_detail { + margin-top: 1rem; + width: 100%; +} +#album_detail > section > ul > li.album-item { + margin-bottom: 1rem; +} + +#album-tips { + font-size: 14px; + display: flex; + justify-content: center; + margin-top: 1rem; +} + +#album_detail .timeline ul li.album-item hr { + display: flex; + position: relative; + margin: 8px 0px; + border: 1px dashed var(--anzhiyu-theme-op); + width: 100%; +} + +#album_detail .album-info { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + width: 95%; +} + +#album_detail > section > ul > li > div .album-info-time, +#album_detail > section > ul > li > div .album-info-address, +#album_detail > section > ul > li > div .album-info-from { + color: var(--anzhiyu-fontcolor); + font-size: 0.7rem; + background-color: var(--anzhiyu-gray-op); + padding: 0px 8px; + border-radius: 20px; + cursor: default; + display: flex; + align-items: center; + height: 35px; + line-height: 35px; + margin: 4px; + overflow: hidden; +} +#album_detail > section > ul > li > div .album-info-time time { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +#album_detail > section > ul > li > div .album-info-address, +#album_detail > section > ul > li > div .album-info-from { + margin-left: 4px; +} +#album_detail > section > ul > li > div .album-info-address span, +#album_detail > section > ul > li > div .album-info-from span { + margin-left: 4px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +#album_detail .album-info .anzhiyufont.anzhiyu-icon-instagram { + margin-right: 8px; +} + +#album_detail .album-bottom { + display: flex; + justify-content: space-between; + width: 100%; + margin-top: 10px; +} + +#album_detail .album-bottom .album-reply { + cursor: pointer; + width: 5%; +} + +#album_detail .timeline ul li.album-item:hover { + border: var(--style-border-hover); +} + +#album_detail .album-content-link { + display: flex; + margin-left: 0.5rem; + font-size: 0.7rem; + align-items: center; + background-color: rgba(245, 108, 108, 0.13); + color: rgb(245, 108, 108); + padding: 0px 8px; + border-radius: 20px; +} +#album_detail .album-content-link i { + margin-right: 3px; +} +#album_detail .album-content-link:hover { + background-color: var(--anzhiyu-main); + color: var(--anzhiyu-white); +} +#album_detail .album-music { + width: 100%; + height: 90px; + margin: 0.5rem 0; + border-radius: 8px; + overflow: hidden; + border: var(--style-border-always); + background: var(--anzhiyu-secondbg); +} +#album_detail .aplayer { + margin: 0; +} + +#album_detail .aplayer.aplayer-withlrc .aplayer-pic { + height: 82px; + width: 82px; + margin: 4px; + border-radius: 4px; +} +.album-music .aplayer.aplayer-withlrc .aplayer-info { + padding: 5px 7px 0; +} +#album_detail .aplayer .aplayer-info .aplayer-music { + height: 23px; +} +#album_detail .aplayer .aplayer-info .aplayer-music .aplayer-title { + font-size: 0.8rem; + font-weight: 700; + margin: 0; + color: var(--anzhiyu-fontcolor); +} + +#album_detail .aplayer .aplayer-info .aplayer-controller { + align-items: center; +} +#album_detail .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap { + padding: 0; +} +#album_detail .aplayer .aplayer-info .aplayer-controller .aplayer-time { + position: initial; +} +#album_detail .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar { + background: var(--anzhiyu-gray); + height: 8px; + border-radius: 12px; + transition: 0.3s; + overflow: hidden; +} +#album_detail .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded { + height: 100%; + border-radius: 12px; +} +#album_detail .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played { + height: 100%; + border-radius: 12px; +} +#album_detail .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb { + display: none; +} +#album_detail .aplayer .aplayer-info .aplayer-controller .aplayer-time { + position: initial; +} + +body[data-type="album_detail"] #page .author-content-item .card-content .banner-button-group .banner-button:hover { + color: var(--anzhiyu-white); + border-radius: 20px !important; +} + +/* 响应式 */ +@media screen and (max-width: 1200px) { + #album_detail .timeline ul li.album-item { + width: 49%; + margin-right: 1%; + } +} +@media screen and (max-width: 768px) { + #album_detail .timeline ul li.album-item { + width: 100%; + margin-right: 0px; + } +} +[data-theme="dark"] #album_detail .album-music .aplayer, +[data-theme="dark"] #album_detail .aplayer .aplayer-lrc:before, +[data-theme="dark"] #album_detail .aplayer .aplayer-lrc:after { + background: var(--anzhiyu-card-bg); + color: var(--anzhiyu-fontcolor); +} +#album_detail .aplayer .aplayer-lrc p { + color: var(--anzhiyu-fontcolor); +} + +#album_detail .type-gallery { + overflow: hidden; + margin-top: 40px; +} + +#album_detail_gallery_load_more { + opacity: 0; +} + +#album_detail .tag-address { + display: flex; + position: absolute; + left: 8px; + top: 8px; + padding: 4px 6px; + border-radius: 8px; + background: var(--anzhiyu-black-op); + font-size: 12px; + color: var(--anzhiyu-white); + transition: 0.3s; + z-index: 1; + user-select: none; +} + +/* 处理单页背景 */ +body[data-type="album"] #web_bg { + background: var(--anzhiyu-background); +} +body[data-type="album"] #page { + border: 0; + box-shadow: none !important; + padding: 0 !important; + background: 0 0 !important; +} +body[data-type="album"] #page .page-title { + display: none; +} + +/* 变量定义 */ +:root { + --album-background-dark: #2d3548; + --album-text-light: rgba(255, 255, 255, 0.6); + --album-text-lighter: rgba(255, 255, 255, 0.9); + --album-spacing-s: 8px; + --album-spacing-m: 16px; + --album-spacing-l: 24px; + --album-spacing-xl: 32px; + --album-spacing-xxl: 64px; +} + +/* 卡片样式 */ +#album .card-album { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + margin: var(--album-spacing-xxl) 0 0; +} +#album .card-album .album-content-nocover { + width: calc(100% / 4 - 40px); +} + +#album .card-album .card { + list-style: none; + position: relative; + display: flex; + width: calc(100% / 4 - 10px); + padding: 10px; +} +#album .card-album .card:hover { + cursor: pointer; +} + +#album .card_cover { + border-radius: var(--album-spacing-l); + filter: brightness(0.75) saturate(1.2) contrast(0.85); + transform-origin: center; + transform: scale(1) translateZ(0); + transition: filter 200ms linear, transform 200ms linear; + max-width: 100%; + overflow: hidden; + height: 550px; + width: 100%; + max-width: 100%; + object-fit: cover; + border-radius: var(--album-spacing-l); +} + +#album .card:hover .card_cover { + transform: scale(1.05) translateZ(0); + filter: brightness(0.9) saturate(1.2) contrast(1); +} + +#album .card-album:hover > .card:not(:hover) .card_cover { + filter: brightness(0.5) saturate(0.9) contrast(1.2) blur(20px); +} + +#album .card__content { + left: 0; + padding: var(--album-spacing-l); + position: absolute; + top: 0; +} + +#album .card__category { + color: var(--album-text-light); + font-size: 0.9rem; + margin-bottom: var(--album-spacing-s); + text-transform: uppercase; +} + +#album .card__heading { + color: var(--album-text-lighter); + font-size: 1.9rem; + text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2); + line-height: 1.4; + word-spacing: 100vw; +} + +@media (min-width: 1024px) { + #album img.card_cover { + height: 600px; + } +} + +@media (max-width: 960px) { + #album .card-album .card { + width: calc(100% / 2 - 40px); + } +} + +@media (max-width: 540px) { + #album .card-album .card { + width: calc(100%); + } +} + +@media (max-width: 768px) { + #album .card-album { + margin-top: 10px; + } + #album .card-album .card { + padding: 10px 0px; + } +} + +h1#site-title { + font-size: 3em !important; +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 3em; + /* 可以定义图标大小 */ + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* 时间轴生肖icon */ +svg.icon { + width: 1em; + height: 1em; + /* width和height定义图标的默认宽度和高度*/ + vertical-align: -0.15em; + fill: currentColor; + overflow: hidden; +} + +.icon-zhongbiao::before { + color: #f7c768; +} + +/* 解决artitalk的图标问题 */ +#uploadSource > svg { + width: 1.19em; + height: 1.5em; +} + +/*top-img黑色透明玻璃效果移除，不建议加，除非你执着于完全一图流或者背景图对比色明显 */ +/* #page-header:not(.not-top-img):before { + background-color: transparent !important; +} */ + +/* 文章页面正文背景 */ +div#post { + background: rgba(255, 255, 255, 0.9); +} +#recent-posts > .recent-post-item:not(:first-child):active { + transform: scale(0.97); +} +/* 分页页面 */ +div#page { + background: rgba(255, 255, 255, 0.9); +} + +/* 归档页面 */ +div#archive { + background: rgba(255, 255, 255, 0.9); +} + +/* 标签页面 */ +div#tag { + background: rgba(255, 255, 255, 0.9); +} + +/* 分类页面 */ +div#category { + background: rgba(255, 255, 255, 0.9); +} + +/*夜间模式伪类遮罩层透明*/ +[data-theme="dark"] #recent-posts > .recent-post-item { + background: #121212; +} + +[data-theme="dark"] .card-widget { + background: var(--anzhiyu-card-bg); +} + +[data-theme="dark"] div#post { + background: var(--anzhiyu-card-bg); +} + +[data-theme="dark"] div#tag { + background: var(--anzhiyu-card-bg); +} + +[data-theme="dark"] div#archive { + background: var(--anzhiyu-card-bg); +} + +[data-theme="dark"] div#page { + background: var(--anzhiyu-card-bg); +} + +[data-theme="dark"] div#category { + background: var(--anzhiyu-card-bg); +} + +[data-theme="dark"] div#category { + background: transparent !important; +} + +/* md网站下划线 */ +#article-container a:hover { + text-decoration: none !important; +} + +#article-container #hpp_talk p img { + display: inline; +} + +/* 宽屏适配 */ +.page .layout, +.post .layout { + max-width: 1400px; +} + +.card-widget.card-clock { + font-size: 14px; +} + +#article-container + a:not([data-fancybox="gallery"]):not(.headerlink):not(.cf-friends-link):not(.tag-Link):not(.btn-anzhiyu):not( + .no-text-decoration + ) { + font-weight: 500; + border-bottom: solid 2px var(--anzhiyu-lighttext); + color: var(--anzhiyu-fontcolor); + padding: 0 0.2em; + text-decoration: none; + font-family: auto; +} +#article-container + a:not([data-fancybox="gallery"]):not(.headerlink):not(.cf-friends-link):not(.btn-anzhiyu):not( + .no-text-decoration + ):hover { + color: var(--anzhiyu-white); + background: var(--anzhiyu-main); + box-shadow: var(--anzhiyu-shadow-lightblack); + border-radius: 0.25em; + text-decoration: none; +} + +html.hide-aside .layout > div:first-child { + width: 100%; +} + +/* 动画wowjs兼容调整 */ +.animate__animated { + -webkit-animation-fill-mode: backwards !important; + animation-fill-mode: backwards !important; +} + +/* 文章hover边框 */ +#recent-posts .recent-post-item:hover { + border: var(--style-border-hover); +} +#recent-posts .recent-post-item:hover .recent-post-info .article-title { + color: var(--anzhiyu-theme); +} +#recent-posts .recent-post-item { + height: fit-content; + background: var(--anzhiyu-card-bg); + border-radius: 12px; + cursor: pointer; + border: var(--style-border); + box-shadow: var(--anzhiyu-shadow-border); + user-select: none; +} +/* 移动端容器padding */ +@media screen and (max-width: 768px) { + #body-wrap .layout #page { + padding: 20px 15px !important; + } +} +/* 首页文章宽度 */ +@media screen and (max-width: 1200px) { + .layout > div:first-child { + width: 100% !important; + } +} + +[data-theme="dark"] #footer:before { + content: none; +} + +@media screen and (max-width: 768px) { + .layout > div:first-child:not(.recent-posts) { + border-radius: 12px 12px 0 0; + } +} + +.banners-title { + animation: slide-in 0.6s 0.3s backwards; +} +#algolia-search .search-dialog { + animation: slide-in 0.6s ease 0s 1 normal none running; +} + +@media screen and (min-width: 1200px) { + #page > div:not(.author-content-item) { + animation: slide-in 0.6s 0.2s backwards; + } +} + +@media screen and (min-width: 1200px) { + .author-content-item { + animation: slide-in 0.6s 0s backwards; + } +} + +/* 元素透明度改变 */ +@keyframes slide-in-op { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +#aside-content .card-widget#card-wechat { + background: #57bd6a; + display: flex; + justify-content: center; + align-content: center; + padding: 0; + cursor: pointer; + border: none; + height: 110px; +} +[data-theme="dark"] #aside-content .card-widget#card-wechat { + background-color: #121121; + border: var(--style-border); +} + +#flip-wrapper { + -webkit-perspective: 1000; + perspective: 1000; +} + +#flip-wrapper { + position: relative; + width: 235px; + height: 110px; + z-index: 1; +} +#flip-content { + width: 100%; + height: 100%; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + transition: cubic-bezier(0, 0, 0, 1.29) 0.3s; +} +#aside-content #flip-wrapper #flip-content .face { + position: absolute; + width: 100%; + height: 100%; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + background-size: 100%; +} + +#aside-content #flip-wrapper #flip-content .back.face { + display: block; + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); + box-sizing: border-box; + background-size: 100%; +} +#flip-wrapper:hover #flip-content { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); +} + +/* 分类目录条、标签目录条 */ +#catalog-bar { + border-radius: var(--anzhiyu-border-radius); + display: flex; + border: var(--anzhiyu-border-radius); + margin-bottom: 1rem; + justify-content: flex-start; + align-items: center; +} + +#catalog-bar:hover { + border-color: var(--anzhiyu-theme); +} + +#catalog-bar i { + line-height: inherit; +} + +#catalog-list { + /* 分类/标签较少时，可以选择不设置 width，居中显示 catalog-list-item */ + display: flex; + white-space: nowrap; + overflow-x: scroll; +} + +#catalog-list::-webkit-scrollbar { + display: none; +} + +.catalog-list-item a { + margin-right: 0.3rem; + font-weight: bold; + color: var(--font-color); + transition: all 0.3s ease-in-out; + display: flex; + align-items: center; + padding: 0.1rem 0.5rem; + border-radius: 8px; + height: 30px; + line-height: 30px; +} +.catalog-list-item { + display: flex; + align-items: center; +} + +.catalog-list-item.selected a { + background: var(--anzhiyu-lighttext); + color: var(--anzhiyu-white); +} + +a.catalog-more { + min-width: fit-content; + font-weight: bold; + color: var(--anzhiyu-fontcolor); + margin-left: 16px; +} + +a.catalog-more:hover { + color: var(--anzhiyu-theme); +} + +#categoryBar { + width: 100%; + display: flex; +} + +#category-bar { + padding: 0.5rem 10px; + background: var(--anzhiyu-card-bg); + display: flex; + white-space: nowrap; + overflow: hidden; + border: var(--style-border); + width: 100%; + height: 50px; + border-radius: 12px; + transition: all 0.3s ease 0s; + animation: slide-in 0.6s 0.3s backwards; +} + +.category-bar-next { + margin-left: 16px; + cursor: pointer; + display: flex; +} + +.category-bar-next:hover { + color: var(--anzhiyu-lighttext); +} + +#category-bar #catalog-bar { + margin-bottom: 0; + overflow-y: hidden; + margin: -0.2rem 0; +} + +#category-bar.category-bar:hover { + border: var(--style-border-hover); + box-shadow: var(--anzhiyu-shadow-main); +} + +#category #category-bar { + padding: 0; + border: none; +} + +#category a.catalog-list-item.select a { + display: none; +} + +#category #catalog-list .catalog-list-item:first-child { + margin-left: 5px; +} + +.catalog-list-item:hover a { + background: var(--anzhiyu-main); + color: var(--anzhiyu-white); +} + +.catalog-list-item.select a { + background: var(--anzhiyu-main); + color: var(--anzhiyu-white); + border-radius: 8px; +} + +.category-bar-more { + margin-left: 1rem; + font-weight: bold; +} + +[data-theme="dark"] #category-bar.category-bar { + background: var(--anzhiyu-background); +} + +@media screen and (max-width: 768px) { + #catalog-bar i { + margin-right: 5px; + } + #categoryBar { + margin-bottom: 0; + position: -webkit-sticky; + position: sticky; + top: 60px; + z-index: 2; + align-items: center; + margin-top: 0; + } + #category-bar.category-bar { + width: 100%; + } + #category-bar.category-bar { + background: var(--anzhiyu-background); + } + [data-theme="dark"] #category-bar.category-bar { + background: var(--anzhiyu-black); + } + #category-bar.category-bar:hover { + border: none; + box-shadow: none; + } + #category-bar { + border: none; + border-radius: 0px; + padding: 0.5rem 20px; + } +} + +/*和风天气 */ +#he-plugin-simple { + z-index: 92; + transition: 0.3s; + position: fixed !important; +} + +#he-plugin-simple.shown { + opacity: 0.5; + pointer-events: unset; +} + +#he-plugin-simple .sticker-important { + color: var(--anzhiyu-white) !important; +} + +.s-sticker div[data-v-41ba7e2c]:not(:first-child):not(:last-child) { + padding: 0 0.07em !important; +} + +body:has(#sidebar-menus.open) #he-plugin-simple { + z-index: 104; + left: 95px !important; + opacity: 1; + display: block; + transition: 0.3s; +} + +div.s-sticker { + background-color: transparent !important; +} +.s-sticker div { + color: var(--font-color) !important; + font-weight: bold; +} +body:has(.post-bg.nav-fixed) #he-plugin-simple .s-sticker div { + color: var(--font-color) !important; +} +body:has(.post-bg) #he-plugin-simple .s-sticker div { + color: var(--anzhiyu-white) !important; +} +[data-theme="dark"] body:has(.post-bg) #he-plugin-simple .s-sticker div { + color: var(--font-color) !important; +} + +#weather-view-he { + height: 285px !important; + padding: 10px !important; + border-radius: 10px !important; + background-color: var(--anzhiyu-card-bg) !important; + box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px; + margin-top: 20px !important; + transform: 0.3s; + opacity: 1; +} +.s-sticker ~ [data-v-41ba7e2c] { + opacity: 0; +} +[data-v-41ba7e2c]:has([data-v-db6ccf64][data-v-41ba7e2c]) { + opacity: 1; +} +[data-v-db6ccf64][data-v-41ba7e2c] { + top: 38px !important; +} +.wv-lt-location, +.wv-lt-refresh { + display: inline-block; +} +.wv-lt-location a { + padding: 0 5px; + border-radius: 3px; + color: var(--anzhiyu-blue) !important; + background-color: var(--anzhiyu-blue-tint); + text-decoration: none !important; +} +.wv-lt-col-5 { + text-align: right; +} +.wv-lt-refresh a { + font-size: 0 !important; +} +.wv-lt-refresh a::after { + content: "\5b89\77e5\9c7c\548c\98ce"; + font-size: small !important; +} +.vw-f-cell a, +.wv-n-h-now-rain-text, +.wv-n-h-now-tmp span, +.wv-n-h-now-txt span, +.wv-n-h-now-txt-t { + color: var(--anzhiyu-fontcolor) !important; +} +.wv-f-table div .vw-f-cell:nth-child(1) a { + color: #9b9b9b !important; +} +.wv-top-backdrop { + height: 285px !important; + padding-top: 50px !important; +} +.wv-top-backdrop::after { + content: "\8BF7\4F7F\7528\952E\76D8\2191\2193\9009\62E9\FF0C\56DE\8F66\9009\5B9A" !important; + padding-left: 5%; +} +.wv-top-button, +.wv-top-select { + height: 36px !important; + border: none !important; + border-radius: 5px !important; + cursor: pointer; + transition: 0.25s; +} +.wv-top-select { + padding-left: 10px !important; +} +.wv-top-button { + background-color: var(--anzhiyu-blue) !important; + color: #fff !important; +} + +.wv-top-button:hover { + background-color: var(--anzhiyu-blue-hover) !important; +} +.wv-top-button:active { + background-color: var(--anzhiyu-blue-hover) !important; +} + +@media screen and (max-width: 1400px) { + #he-plugin-simple { + display: none; + } +} + +@media screen and (min-width: 1400px) and (max-width: 1690px) { + #he-plugin-simple { + left: 262px !important; + } +} + +#article-container ol, +#article-container ul { + margin-top: 0.4rem; + padding: 0px 0px 0px 0.8rem; + list-style: none; + counter-reset: li 0; +} +#article-container code { + padding: 0.2rem 0.4rem; + border-radius: 4px; + margin: 0 4px; + line-height: 2; + box-shadow: var(--anzhiyu-shadow-border); +} +#article-container.post-content li::marker { + content: none; +} +#article-container ol li:not(.tab), +#article-container ul li:not(.tab) { + position: relative; + margin: 0.2rem 0px; +} +#article-container ul > li:not(.tab) { + padding: 0.2em 0.2em 0.2em 1.4em; +} +#article-container ul > li:not(.tab):before { + border: 0.21em solid var(--anzhiyu-lighttext); + background: var(--anzhiyu-lighttext); +} +#article-container ul > li:not(.tab)::before { + top: 0.78em; + width: 0.42em; + height: 0.42em; + border-radius: 0.42em; + content: ""; + line-height: 0.42em; +} + +#article-container ol li::before, +#article-container ul li::before { + position: absolute; + top: 0px; + left: 0px; + background: var(--anzhiyu-main); + color: rgb(255, 255, 255); + transition: all 0.3s ease-out 0s; +} +#article-container ol > li::before { + margin-top: 0.65em; + width: 1.45em; + height: 1.45em; + border-radius: 0.725em; + content: counter(li); + counter-increment: li 1; + text-align: center; + font-size: 0.85em; + line-height: 1.45em; +} +#article-container ol[start] { + counter-reset: unset; +} +#article-container ol li:not(.tab), +#article-container ul li:not(.tab) { + position: relative; + margin: 0.2rem 0px; +} +#article-container ol > li:not(.tab) { + padding: 0.2em 0.2em 0.2em 1.8em; +} + +/* 代码框主题 */ +#article-container figure.highlight { + border-radius: 10px; +} +#post-comment blockquote { + background: var(--anzhiyu-secondbg); + border: var(--style-border); + box-shadow: none; + margin: 0px 0px 0.5rem; + font-size: 12px; + color: var(--anzhiyu-secondtext); + border-radius: 8px; +} + +details.folding-tag[open] { + border-radius: 15px !important; + border-color: var(--anzhiyu-main) !important; + border: 1px solid var(--anzhiyu-main) !important; +} + +li details.folding-tag { + border-radius: 8px; +} + +li details.folding-tag summary { + border-radius: 8px; +} + +details.folding-tag { + transition: border 0s ease !important; + border: none !important; +} + +details.folding-tag[open] > summary { + color: var(--anzhiyu-white) !important; + background: var(--anzhiyu-main) !important; + border: 1px solid var(--anzhiyu-main) !important; + border-top: none !important; + border-left: none !important; + border-right: none !important; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} +details.folding-tag > summary { + border: var(--style-border) !important; + background: var(--anzhiyu-card-bg); + border-radius: 14px !important; + box-shadow: var(--anzhiyu-shadow-border); + color: var(--font-color) !important; + user-select: none; +} +details.folding-tag > summary::marker { + color: var(--anzhiyu-main); + font-size: 16px; +} +details.folding-tag > summary::before { + content: " "; + margin-right: 2px; +} +details.folding-tag[open] > div.content { + border-radius: 0 0 16px 16px; +} +details.folding-tag summary:hover::marker { + color: var(--anzhiyu-white); +} +details.folding-tag[open] > summary::marker { + color: var(--anzhiyu-white); +} +details.folding-tag summary:hover { + cursor: pointer; + background: var(--anzhiyu-main) !important; + color: var(--anzhiyu-white) !important; + transition: 0.3s; + box-shadow: var(--anzhiyu-shadow-main); +} +details .content > *:nth-child(1) { + margin-top: 0 !important; +} + +.flink details.folding-tag[open] > div.content { + padding: 20px; + margin: 0px; + margin-top: 0; +} + +.comment-barrage { + position: fixed; + bottom: 0; + right: 60px; + padding: 0 0 20px 10px; + z-index: 100; + display: flex; + flex-direction: column; + justify-content: end; + align-items: flex-end; + z-index: 999; + transition: 0.3s; +} +@media screen and (max-width: 768px) { + .comment-barrage { + display: none !important; + } +} +.comment-barrage-item { + min-width: 300px; + max-width: 300px; + width: fit-content; + min-height: 80px; + max-height: 150px; + margin: 4px; + padding: 8px 14px; + background: var(--anzhiyu-maskbgdeep); + border-radius: 8px; + color: var(--anzhiyu-fontcolor); + animation: barrageIn 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); + transition: 0.3s; + display: flex; + flex-direction: column; + border: var(--style-border); + backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); + transform: translateZ(0); + position: fixed; + box-shadow: var(--anzhiyu-shadow-border); +} +.comment-barrage-item:hover { + border: var(--style-border-hover); + box-shadow: var(--anzhiyu-shadow-main); +} +.comment-barrage-item.out { + opacity: 0; + animation: barrageOut 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); +} +.comment-barrage-item a.barrageContent:hover { + color: var(--anzhiyu-main); +} +.comment-barrage-item.hovered { + opacity: 0; +} +.comment-barrage-item .comment-barrage-close { + color: var(--anzhiyu-secondtext); + cursor: pointer; + line-height: 1; + padding: 4px; +} +.comment-barrage-item .comment-barrage-close:hover { + color: var(--anzhiyu-main); +} +.comment-barrage-item pre { + display: none; +} +.comment-barrage-item p img:not(.tk-owo-emotion) { + display: none; +} + +.comment-barrage-item .barrageHead { + height: 30px; + padding: 0; + line-height: 30px; + font-size: 12px; + border-bottom: var(--style-border); + display: flex; + justify-content: space-between; + align-items: center; + font-weight: 700; + padding-bottom: 6px; +} +.comment-barrage-item .barrageHead .barrageTitle { + color: var(--anzhiyu-card-bg); + margin-right: 8px; + background: var(--anzhiyu-fontcolor); + line-height: 1; + padding: 4px; + border-radius: 4px; +} +.comment-barrage-item .barrageHead .barrageTitle.barrageBloggerTitle { + background: var(--anzhiyu-orange); +} +.comment-barrage-item .barrageAvatar { + width: 16px; + height: 16px; + margin: 0; + margin-left: auto; + margin-right: 8px; + border-radius: 50%; + background: var(--anzhiyu-secondbg); +} +.comment-barrage-item .barrageContent { + font-size: 14px !important; + font-weight: 400 !important; + height: calc(100% - 30px); + overflow: scroll; + cursor: pointer; +} +.comment-barrage-item .barrageContent::-webkit-scrollbar { + height: 0; + width: 4px; +} +.comment-barrage-item .barrageContent::-webkit-scrollbar-button { + display: none; +} +.comment-barrage-item .barrageContent p { + margin: 8px 0; + line-height: 1.3; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + display: -webkit-box; + -webkit-box-orient: vertical; +} +.comment-barrage-item .barrageContent blockquote p { + margin: 0; +} +.comment-barrage-item .barrageContent h1, +.comment-barrage-item .barrageContent h2, +.comment-barrage-item .barrageContent h3, +.comment-barrage-item .barrageContent h4 { + font-size: 14px !important; + font-weight: 400 !important; + margin: 8px 0 !important; +} + +/* 中控台 */ +#console { + display: flex; + position: fixed; + width: 100vw; + height: 100vh; + top: 0; + left: 0; + justify-content: center; + opacity: 0; + transition: 0.3s ease-out, color 0s; + flex-direction: column; + align-items: center; + pointer-events: none; + margin: 0 !important; + z-index: 2; +} +#console-music-bg { + display: none; +} + +#console.show, +#console.reward-show { + opacity: 1; + pointer-events: all; +} + +#console.reward-show .console-card-group { + pointer-events: none; +} + +#console .console-card-group { + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 30px; + transform: translateY(20px); + transition: 0.3s; + opacity: 0; + max-width: 80%; + max-height: 70%; +} + +#console.show .console-card-group { + transform: translateY(0px); + opacity: 1; + transition-delay: 0.1s; +} + +#console .console-card-group-left { + margin-right: 0.5rem; + width: 40%; + height: 100%; +} + +#console .console-card-group-right { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + width: 60%; + overflow: hidden; + min-width: 575px; +} + +#console .console-card { + background: var(--card-bg); + border-radius: 12px; + overflow: hidden; + border: var(--style-border); + box-shadow: var(--anzhiyu-shadow-border); + padding: 40px; +} + +#console .console-card.tags { + height: calc(100% - 172px); +} + +#console .console-mask { + background: var(--anzhiyu-maskbgdeep); + backdrop-filter: saturate(100%) blur(0px); + -webkit-backdrop-filter: blur(0px); + width: 100vw; + height: 100vh; + top: 0; + left: 0; + position: absolute; + z-index: -1; + transition: 0.3s; + margin: 0px !important; +} + +#console.show .console-mask, +#console.reward-show .console-mask { + backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); + transform: translateZ(0); +} + +#card-newest-comments .aside-list-item .thumbnail img { + width: 20px; + height: 20px; + margin-right: 8px; + border-radius: 20px; +} + +#card-newest-comments .aside-list-item { + background: var(--anzhiyu-card-bg); + border-radius: 12px; + border: var(--style-border); + padding: 12px 16px; + width: 49%; + display: flex; + flex-direction: column; + height: 150px; + transition: 0.3s; + cursor: pointer; +} + +#card-newest-comments .aside-list-item:not(:last-child) { + margin-bottom: 0.5rem; +} + +#card-newest-comments .aside-list-item .name { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: 130px; + font-weight: bold; +} + +#console .author-content-item-tips { + opacity: 0.8; + font-size: 12px; + margin-bottom: 0.5rem; + color: var(--font-color); +} + +#console .author-content-item-title { + font-size: 27px; + font-weight: 700; + line-height: 1; + color: var(--font-color); +} + +#console .aside-list-item .thumbnail { + display: flex; + align-items: center; + width: fit-content; +} + +#console .aside-list-item .content { + display: flex; + flex-direction: column; + height: 100%; + margin-top: 0.5rem; +} + +#card-newest-comments .aside-list-item:hover { + background: var(--anzhiyu-main); + color: var(--anzhiyu-white); +} + +#console .aside-list-item .content .comment { + -webkit-line-clamp: 2; + display: -webkit-box; + overflow: hidden; + -webkit-box-orient: vertical; + line-height: 24px; + font-size: 14px; + border-radius: 0px; +} + +#console .aside-list-item:hover .thumbnail, +#console .aside-list-item:hover .content .comment, +#console .aside-list-item:hover .content time { + color: var(--anzhiyu-white); +} + +#console .aside-list-item .content time { + font-size: 12px; + margin-top: auto; + color: var(--anzhiyu-fontcolor); +} + +#console .aside-list { + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: space-between; + margin-top: 0.5rem; +} + +#console .button-group { + display: flex; + margin: 1rem auto 0 auto; + justify-content: center; + width: fit-content; +} + +#console .button-group .console-btn-item { + width: 60px; + height: 60px; + transition: 0.3s; + cursor: pointer; +} + +#console .button-group .console-btn-item:not(:last-child) { + margin-right: 0.5rem; +} + +#console .button-group .console-btn-item a { + width: 100%; + height: 100%; + background: var(--card-bg); + border: var(--style-border); + border-radius: 60px; + display: flex; + align-items: center; + justify-content: center; + color: var(--anzhiyu-fontcolor); +} + +#console .button-group .console-btn-item.on a { + background: var(--anzhiyu-orange); + color: var(--anzhiyu-white); + transition: 0.3s; +} + +.console-card.tags .card-tag-cloud { + margin-top: 1.5rem; + display: flex; + flex-wrap: wrap; + max-height: 230px; + overflow: hidden; +} + +.console-card.tags .card-tag-cloud a { + color: var(--anzhiyu-fontcolor) !important; + margin: 6px 4px; + padding: 2px 8px; + border-radius: 8px; + background: var(--anzhiyu-secondbg); + border: var(--style-border); + font-size: 14px !important; + font-weight: bold; +} + +.console-card.tags .card-tag-cloud a:hover { + background: var(--anzhiyu-main); + color: var(--anzhiyu-white) !important; +} + +.console-card.tags .card-tag-cloud a sup { + opacity: 0.6; +} + +#console .console-card.history { + margin-top: 8px; + padding: 0; + background: none; + box-shadow: none; + border: none; + overflow: hidden; + min-width: 575px; +} + +#console .console-card.history .item-headline { + display: none; +} + +#console .console-card.history .card-archive-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +#console .console-card.history .card-archive-list li.card-archive-list-item { + flex: 0 0 25%; +} + +#console .console-card.history .card-archive-list .card-archive-list-link { + border-radius: 8px; + margin: 4px; + display: flex; + flex-direction: column; + align-content: space-between; + border: var(--style-border); + background: var(--card-bg); + padding: 8px 16px; +} + +#console .console-card.history .card-archive-list .card-archive-list-link:hover { + background: var(--anzhiyu-main); + color: var(--anzhiyu-white); +} + +#console #card-newest-comments { + height: 100%; + min-height: 580px; +} + +#console .button-group i { + font-size: 1rem; +} + +#console hr { + display: none; +} + +#console ul { + padding-left: 0; +} +#console ul li { + list-style: none; +} +#console .console-card.history ul.card-archive-list { + margin: -4px; +} + +[data-theme="dark"] #console .button-group .console-btn-item a.darkmode_switchbutton { + background: var(--anzhiyu-orange); + color: var(--anzhiyu-white); +} + +/* 控制台音乐css */ +body:has(#console.show) + #nav-music + .aplayer + .aplayer-info + .aplayer-controller + .aplayer-bar-wrap:hover + .aplayer-bar + .aplayer-played + .aplayer-thumb { + display: inline; +} + +body:has(#console.show) .aplayer.aplayer-arrow .aplayer-icon-loop, +.aplayer.aplayer-arrow .aplayer-icon-order { + display: inline; +} +body:has(#console.show) .aplayer-volume-wrap { + display: none; +} +body:has(#console.show) #nav-music { + z-index: 10000; + left: 45%; + top: 23%; + box-shadow: none; + align-items: flex-start; + transition: 0s; + height: 35%; + width: 42%; + opacity: 1 !important; + justify-content: center; +} + +body:has(#console.show) #nav-music:active { + transform: scale(1); +} +body:has(#console.show) #nav-music .aplayer.aplayer-withlrc .aplayer-lrc { + opacity: 1; + width: 100%; + height: 180px; + margin: 0; + padding: 0; +} +body:has(#console.show) #nav-music .aplayer .aplayer-lrc p.aplayer-lrc-current, +body:has(#console.show) #nav-music .aplayer .aplayer-lrc p { + color: var(--anzhiyu-fontcolor); +} +body:has(#console.show) #nav-music #nav-music-hoverTips { + opacity: 0; + height: 70px; + width: 70px; + margin-left: 0px; + border-radius: 50%; + box-shadow: 0 0 14px #ffffffa6; + transform: rotate(0deg) scale(1.1); + border: var(--style-border-always); + animation: changeright 24s linear infinite; + margin-top: 10px; + left: auto; +} +body:has(#console.show) + #nav-music + .aplayer + .aplayer-info + .aplayer-controller + .aplayer-bar-wrap + .aplayer-bar + .aplayer-loaded { + display: block; + border-radius: 10px; + height: 10px; +} +body:has(#console.show) meting-js { + height: 100%; + width: 100%; +} +body:has(#console.show) #nav-music .aplayer .aplayer-body { + align-items: center; + flex-direction: column; + width: 100%; + cursor: auto; +} +body:has(#console.show) #nav-music .aplayer { + height: 100%; + width: 100%; + padding: 10px 10px 0; +} +body:has(#console.show) #nav-music .aplayer { + background: none; + border: none; +} +body:has(#console.show) #nav-music.playing { + animation: none; +} +body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-music { + height: auto; + margin-bottom: 10px; +} +body:has(#console.show) #nav-music .aplayer.aplayer-withlrc .aplayer-info { + flex-direction: column; + height: auto; + position: relative; +} + +body:has(#console.show) .aplayer .aplayer-pic .aplayer-play { + width: 30px; + height: 30px; +} +body:has(#console.show) .aplayer .aplayer-pic .aplayer-play svg { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-44%, -50%); +} +body:has(#console.show) #nav-music .aplayer.aplayer-withlrc .aplayer-pic { + height: 70px; + width: 70px; + margin-left: 0px; + border-radius: 50%; +} +body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-music .aplayer-author { + display: inline; +} +body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-music .aplayer-title { + color: var(--anzhiyu-fontcolor); + cursor: auto; + line-height: 2; + display: inline-block; + white-space: nowrap; + max-width: 300px; + overflow: hidden; + text-overflow: ellipsis; + transition: 0.3s; + user-select: none; + margin-right: 3px; +} +body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-controller { + width: 100%; + height: auto; + top: 26px; + align-items: center; +} +body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar { + height: 10px; + border-radius: 10px; + background: #cdcdcd; +} +body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-time { + display: block; + bottom: 0; +} +body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap { + margin: 0; + padding: 0; +} +body:has(#console.show) + #nav-music + .aplayer.aplayer-withlist + .aplayer-info + .aplayer-controller + .aplayer-time + .aplayer-icon.aplayer-icon-menu { + display: none; +} +body:has(#console.show) + #nav-music + .aplayer + .aplayer-info + .aplayer-controller + .aplayer-bar-wrap + .aplayer-bar + .aplayer-played { + background: var(--anzhiyu-main) !important; + opacity: 0.8; + animation: none; + border-radius: 10px; +} +body:has(#console.show) + #nav-music + .aplayer + .aplayer-info + .aplayer-controller + .aplayer-bar-wrap + .aplayer-bar + .aplayer-played + .aplayer-thumb { + margin-top: -2px; + width: 15px; + height: 15px; +} +body:has(#console.show) #nav-music .aplayer .aplayer-lrc .aplayer-lrc-contents { + margin-top: 80px; +} + +@media screen and (min-width: 1200px) and (max-width: 1450px) { + body:has(#console.show) #nav-music { + left: 45%; + } +} + +/* 赞赏部分控制台css */ +.console-card-group-reward { + opacity: 0; + display: none; +} +.reward-show .console-card-group-reward { + opacity: 1; + display: block; + position: absolute; +} +.console-card-group-reward .reward-all { + display: flex; + align-items: center; + justify-content: center; +} +.console-card-group-reward .reward-all .reward-item { + display: flex; + flex-direction: column; + align-items: center; + margin: 0.625rem; +} +.console-card-group-reward .reward-all .reward-item img { + width: 230px; + height: 230px; +} + +@media screen and (max-width: 1200px) { + /* 移动端音乐列表 */ + body:has(#console.show) #nav-music .aplayer-list { + display: block; + position: absolute; + z-index: 1; + background: white; + left: 0; + } + body:has(#console.show) .aplayer-list { + max-height: none !important; + } + body:has(#console.show) .aplayer-list { + position: fixed; + display: none; + width: 100%; + bottom: -76%; + left: 0; + background: var(--sidebar-bg); + height: auto; + border-radius: 15px 15px 0px 0px; + padding: 15px 0px; + } + body:has(#console.show) .aplayer-list.aplayer-list-hide { + bottom: 0% !important; + } + body:has(#console.show) ol > li { + display: flex; + margin: 0 10px; + } + body:has(#console.show) ol > li span.aplayer-list-title { + width: 30%; + } + body:has(#console.show) ol > li.aplayer-list-light { + background: #33a673; + padding: 5px 20px; + border-radius: 10px; + } + + body:has(#console.show) ol > li.aplayer-list-light span { + color: #fff; + } + body:has(#console.show) ol > li span.aplayer-list-title { + max-width: 55%; + width: auto; + display: -webkit-box; + -webkit-line-clamp: 1; + overflow: hidden; + -webkit-box-orient: vertical; + } + body:has(#console.show) ol > li span.aplayer-list-author { + position: absolute; + right: 10px; + width: auto; + max-width: 35%; + display: -webkit-box; + -webkit-line-clamp: 1; + overflow: hidden; + -webkit-box-orient: vertical; + } + body:has(#console.show) ol > li.aplayer-list-light span.aplayer-list-author { + right: 15px; + } + /* 移动端音乐 */ + body:has(#console.show) meting-js { + position: relative; + } + #console .console-card-group { + justify-content: center; + } + + #console .console-card-group { + display: none; + } + + #console .console-card-group-right { + width: 100%; + margin: 0; + } + + #consoleCommentBarrage { + display: none; + } + + #console .button-group { + position: absolute; + bottom: 70px; + } + body:has(#console.show) #nav-music #nav-music-hoverTips { + display: none; + } + body:has(#console.show) #nav-music { + position: fixed; + display: block !important; + left: 5.2%; + top: 3.9rem !important; + height: 70%; + width: 85%; + } + body:has(#console.show) #console-music-bg { + display: block; + filter: blur(33px); + display: block; + background: #000000; + opacity: 0.58; + width: 100%; + height: 100%; + position: absolute; + top: 0; + transform: scale(1.2); + } + [data-theme="dark"] body:has(#console.show) #console-music-bg { + background: var(--anzhiyu-white); + } + body:has(#console.show) #console-music-bg::after { + box-shadow: inset 0 0px 10px 116px #000000; + position: absolute; + content: ""; + width: 100%; + height: 100%; + top: 0; + left: 0; + } + [data-theme="dark"] body:has(#console.show) #console-music-bg::after { + box-shadow: inset 0 0px 10px 116px var(--anzhiyu-white); + } + body:has(#console.show) #nav-music .aplayer.aplayer-withlrc .aplayer-pic { + height: 100px; + width: 100px; + border-radius: 50%; + animation: none; + border: none; + transform: none !important; + box-shadow: none; + margin-top: 80px; + } + + body:has(#console.show) #nav-music .aplayer { + padding: 30px; + border-radius: 0; + } + body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-music .aplayer-title, + body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-music .aplayer-author { + color: var(--anzhiyu-white); + } + body:has(#console.show) #nav-music .aplayer.aplayer-withlrc .aplayer-info { + width: 100%; + height: 45%; + } + body:has(#console.show) #nav-music .aplayer .aplayer-body { + justify-content: space-between; + } + body:has(#console.show) #nav-music .aplayer.aplayer-withlrc .aplayer-info::after { + position: absolute; + content: "iPhone"; + top: -20px; + left: 0; + color: #b5b8bc; + } + body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-music { + padding: 25px 0 0; + position: absolute; + left: 0; + } + body:has(#console.show) #nav-music .aplayer.aplayer-withlrc .aplayer-lrc { + height: 25px; + text-align: left; + } + + body:has(#console.show) #nav-music .aplayer .aplayer-lrc p.aplayer-lrc-current { + color: var(--anzhiyu-white); + font-size: 20px; + line-height: 25px !important; + float: left; + white-space: nowrap; + animation: an-text-roll 4s cubic-bezier(0.6, 0, 0.5, 1) alternate infinite; + min-width: 100%; + /* margin: 0; */ + } + body:has(#console.show) #nav-music .aplayer .aplayer-lrc p { + color: var(--anzhiyu-white); + font-size: 16px; + margin: 0; + margin-top: 20px; + margin-bottom: 20px; + } + body:has(#console.show) #nav-music .aplayer .aplayer-lrc .aplayer-lrc-contents { + margin: -40px 0px 0; + } + body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-time { + color: var(--anzhiyu-white); + left: 50%; + transform: translateX(-50%); + top: 15px; + position: absolute; + width: 100%; + padding: 0; + } + body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-controller { + top: 58px; + } + body:has(#console.show) .aplayer .aplayer-icon-back, + body:has(#console.show) .aplayer .aplayer-icon-forward, + body:has(#console.show) .aplayer .aplayer-icon-order, + body:has(#console.show) .aplayer .aplayer-icon-play, + body:has(#console.show) + #nav-music + .aplayer.aplayer-withlist + .aplayer-info + .aplayer-controller + .aplayer-time + .aplayer-icon.aplayer-icon-menu, + body:has(#console.show) .aplayer.aplayer-mobile .aplayer-icon-volume-down { + display: inline-block; + opacity: 1; + } + body:has(#console.show) .aplayer .aplayer-icon-volume-down { + width: 36px; + height: 30px; + } + body:has(#console.show) .aplayer-volume-wrap { + position: absolute; + top: 150px; + left: 50%; + transform: translateX(-50%); + width: 75px; + } + body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar { + height: 10px; + border-radius: 10px; + } + body:has(#console.show) + #nav-music + .aplayer + .aplayer-info + .aplayer-controller + .aplayer-bar-wrap + .aplayer-bar + .aplayer-loaded { + display: block; + height: 10px; + border-radius: 10px; + } + + body:has(#console.show) .aplayer .aplayer-icon-back { + left: 0; + } + body:has(#console.show) .aplayer .aplayer-icon-forward { + right: 0; + } + body:has(#console.show) .aplayer .aplayer-icon-forward, + body:has(#console.show) .aplayer .aplayer-icon-back { + height: 40px; + width: 33%; + margin: 15px 0; + position: absolute; + } + + body:has(#console.show) .aplayer .aplayer-pic .aplayer-play { + width: 120px; + height: 120px; + } + body:has(#console.show) .aplayer .aplayer-pic .aplayer-pause { + width: 100px; + height: 100px; + } + body:has(#console.show) .aplayer .aplayer-pic .aplayer-play svg { + width: 60px; + height: 60px; + } + body:has(#console.show) .aplayer .aplayer-pic .aplayer-pause svg { + width: 50px; + height: 50px; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + + body:has(#console.show) .aplayer .aplayer-icon-play { + height: 50px; + width: 33%; + margin: 10px 0; + position: absolute; + left: 50%; + transform: translateX(-50%); + } + + body:has(#console.show) + .aplayer.aplayer-withlist + .aplayer-info + .aplayer-controller + .aplayer-time + .aplayer-icon.aplayer-icon-menu { + right: 0; + } + body:has(#console.show) .aplayer.aplayer-arrow .aplayer-icon-order { + left: 0; + } + body:has(#console.show) + .aplayer.aplayer-withlist + .aplayer-info + .aplayer-controller + .aplayer-time + .aplayer-icon.aplayer-icon-menu, + body:has(#console.show) .aplayer.aplayer-arrow .aplayer-icon-order { + height: 40px; + width: 33%; + top: 80px; + position: absolute; + } + + body:has(#console.show) .aplayer.aplayer-arrow .aplayer-icon-loop { + height: 40px; + width: 33%; + position: absolute; + left: 50%; + top: 80px; + transform: translateX(-50%); + } + + body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap { + margin: 0; + padding: 0; + } + body:has(#console.show) .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner { + position: relative; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + } + body:has(#console.show) .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path { + fill: var(--anzhiyu-white); + } + body:has(#console.show) .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap { + overflow: visible; + bottom: 0px; + left: 45px; + right: auto; + } + body:has(#console.show) + .aplayer + .aplayer-info + .aplayer-controller + .aplayer-volume-wrap + .aplayer-volume-bar-wrap + .aplayer-volume-bar, + body:has(#console.show) + .aplayer + .aplayer-info + .aplayer-controller + .aplayer-volume-wrap + .aplayer-volume-bar-wrap + .aplayer-volume-bar + .aplayer-volume { + width: 20px; + border-radius: 4px; + } +} + +@media screen and (max-width: 867px) { + #center-console:checked + label { + display: none; + } + #console .console-card-group { + display: none; + } + + #consoleHideAside { + display: none; + } + .console-card-group-reward .reward-all .reward-item img { + width: 130px; + height: 130px; + } + #console #consoleKeyboard { + display: none; + } +} + +@media screen and (max-height: 800px) { + #console .console-card-group { + display: none; + } + + #consoleMusic { + display: none; + } + + #consoleCommentBarrage { + display: none; + } + + body:has(#console.show) #nav-music { + display: none; + } +} + +@media screen and (min-width: 768px) { + #console .button-group .console-btn-item a:hover { + background: var(--anzhiyu-main) !important; + } + #console .button-group .console-btn-item:hover a { + background: var(--anzhiyu-main); + color: var(--anzhiyu-white); + } +} +@media screen and (max-width: 768px) { + body:has(#console.show) #nav-music { + width: 90%; + } + #center-console + label { + display: none; + } +} +/* 歌词超出文本滚动动画 */ +@keyframes an-text-roll { + from { + margin-left: 0; + } + to { + margin-left: 100%; + transform: translateX(-100%); + } +} + +body[data-type="essay"] #page { + border: 0; + box-shadow: none !important; + padding: 0 !important; + background: transparent !important; +} +body[data-type="essay"] #page .page-title { + display: none; +} +body[data-type="essay"] #web_bg { + background: var(--anzhiyu-background); +} +#bber .bber-container-img { + display: flex; + align-items: center; + justify-content: space-around; + width: 100%; + flex-wrap: wrap; + margin-bottom: 0.3rem; +} +#bber .bber-container-img .bber-content-noimg { + width: calc(100% / 4 - 5px); +} + +#bber .bber-content-img img { + object-fit: cover; + max-height: 100%; +} + +#bber .bber-content-img, +#bber .bber-content-video { + height: 100px; + border-radius: 8px; + overflow: hidden; + display: flex; + justify-content: center; + position: relative; + width: calc(100% / 4 - 5px); + margin-bottom: 10px; +} + +#bber .bber-content-video video { + border-radius: 8px; + object-fit: cover; + max-height: 100%; +} +#bber .bber-content-video::after { + content: "视频"; + display: inline-block; + padding: 1px 6px; + background: var(--anzhiyu-black-op); + border-radius: 8px; + margin-left: 4px; + font-size: 12px; + font-weight: 700; + color: var(--anzhiyu-white); + backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); + transform: translateZ(0); + position: absolute; + left: 0; + top: 4px; + z-index: 2; +} + +#bber .bber-content .datacont { + order: 0; + font-size: 0.8rem; + font-weight: 700; + color: var(--anzhiyu-fontcolor); + width: 100%; + line-height: 1.38; + border-radius: 12px; + margin-bottom: 0.5rem; + display: flex; + flex-direction: column; + text-align: justify; +} +#bber p { + margin: 0px; +} +#bber div.bber-content { + display: flex; + flex-flow: wrap; + border-radius: 12px; + width: 100%; + height: 100%; +} +#bber .timeline ul li.bber-item { + position: relative; + width: 32%; + border: var(--style-border-always); + border-radius: 12px; + padding: 1rem 1rem 0.5rem; + transition: all 0.3s ease 0s; + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + align-items: flex-start; + background: var(--anzhiyu-card-bg); + box-shadow: var(--anzhiyu-shadow-border); + margin-right: 2%; +} +#bber .timeline #waterfall.show { + opacity: 1; +} +#bber .timeline #waterfall { + opacity: 0; + transition: all 0.3s ease 0s; +} +#bber ul.list { + display: flex; + flex-flow: row wrap; + justify-content: space-between; +} +#bber { + margin-top: 1rem; + width: 100%; +} +#bber > section > ul > li.bber-item { + margin-bottom: 1rem; +} + +#bber-tips { + font-size: 14px; + display: flex; + justify-content: center; + margin-top: 1rem; +} + +#bber .timeline ul li.bber-item hr { + display: flex; + position: relative; + margin: 8px 0px; + border: 1px dashed var(--anzhiyu-theme-op); + width: 100%; +} + +#bber .bber-info { + display: flex; + align-items: center; +} + +#bber > section > ul > li > div .bber-info-time, +#bber > section > ul > li > div .bber-info-from { + color: var(--anzhiyu-fontcolor); + font-size: 0.7rem; + background-color: var(--anzhiyu-gray-op); + padding: 0px 8px; + border-radius: 20px; + cursor: default; + display: flex; + align-items: center; +} + +#bber .bber-info .anzhiyufont.anzhiyu-icon-clock { + margin-right: 4px; + font-size: 0.7rem; +} +#bber > section > ul > li > div .bber-info-from span, +#bber > section > ul > li > div .bber-info-from { + margin-left: 4px; +} +#bber > section > ul > li > div .bber-info-from i { + font-size: 0.7rem; +} +#bber .bber-item hr::before { + display: none; +} + +#bber .bber-bottom { + display: flex; + justify-content: space-between; + width: 100%; + margin-top: 10px; +} + +.bber-reply { + cursor: pointer !important; +} + +.bber-reply:hover { + color: var(--anzhiyu-main); + max-height: 35px; +} + +#bber .timeline ul li.bber-item:hover { + border: var(--style-border-hover); +} + +#bber .bber-content-link { + display: flex; + margin-left: 0.5rem; + font-size: 0.7rem; + align-items: center; + background-color: rgba(245, 108, 108, 0.13); + color: rgb(245, 108, 108); + padding: 0px 8px; + border-radius: 20px; +} +#bber .bber-content-link i { + margin-right: 3px; + font-size: 0.7rem; +} +#bber .bber-content-link:hover { + background-color: var(--anzhiyu-main); + color: var(--anzhiyu-white); +} +#bber .bber-music { + width: 100%; + height: 90px; + margin: 0.5rem 0; + border-radius: 8px; + overflow: hidden; + border: var(--style-border-always); + background: var(--anzhiyu-secondbg); +} +#bber .aplayer { + margin: 0; +} + +#bber .aplayer.aplayer-withlrc .aplayer-pic { + height: 82px; + width: 82px; + margin: 4px; + border-radius: 4px; +} +.bber-music .aplayer.aplayer-withlrc .aplayer-info { + padding: 5px 7px 0; +} +#bber .aplayer .aplayer-info .aplayer-music { + height: 23px; +} +#bber .aplayer .aplayer-info .aplayer-music .aplayer-title { + font-size: 0.8rem; + font-weight: 700; + margin: 0; + color: var(--anzhiyu-fontcolor); +} + +#bber .aplayer .aplayer-info .aplayer-controller { + align-items: center; +} +#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap { + padding: 0; +} +#bber .aplayer .aplayer-info .aplayer-controller .aplayer-time { + position: initial; +} +#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar { + background: var(--anzhiyu-gray); + height: 8px; + border-radius: 12px; + transition: 0.3s; + overflow: hidden; +} +#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded { + height: 100%; + border-radius: 12px; +} +#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played { + height: 100%; + border-radius: 12px; +} +#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb { + display: none; +} +#bber .aplayer .aplayer-info .aplayer-controller .aplayer-time { + position: initial; +} + +/* 顶部样式 */ +.author-content.author-content-item.essayPage { + height: 19rem; + color: var(--anzhiyu-white); + overflow: hidden; + margin-top: 0px; +} +body[data-type="essay"] #page .author-content-item .card-content .banner-button-group .banner-button:hover { + color: var(--anzhiyu-white); + border-radius: 20px !important; +} + +/* 响应式 */ +@media screen and (max-width: 1200px) { + #bber .timeline ul li.bber-item { + width: 49%; + margin-right: 1%; + } +} +@media screen and (max-width: 768px) { + #bber .timeline ul li.bber-item { + width: 100%; + margin-right: 0px; + } +} +[data-theme="dark"] #bber .bber-music .aplayer, +[data-theme="dark"] #bber .aplayer .aplayer-lrc:before, +[data-theme="dark"] #bber .aplayer .aplayer-lrc:after { + background: var(--anzhiyu-card-bg); + color: var(--anzhiyu-fontcolor); +} +#bber .aplayer .aplayer-lrc p { + color: var(--anzhiyu-fontcolor); + min-height: 40px; + line-height: 30px !important; + height: 40px !important; + margin: 0 !important; +} + +#bbTimeList { + background: var(--anzhiyu-white); + color: var(--anzhiyu-fontcolor); + padding: 0.5rem 1rem; + border-radius: 12px; + box-shadow: var(--anzhiyu-shadow-lightblack); + display: flex; + transition: all 0.3s ease 0s; + margin: 1rem auto 0; + border: var(--style-border); + align-items: center; + height: 50px; + width: 100%; + max-width: calc(1400px - 3rem); + animation: slide-in .6s 0s backwards; +} +@media screen and (max-width: 1400px) { + #bbTimeList { + max-width: calc(100% - 3rem); + animation: slide-in 0.6s 0s backwards; + } +} +@media screen and (max-width: 768px) { + div#bbTimeList { + margin: 0 20px 15px; + } +} +[data-theme="dark"] #bbTimeList { + background: #000 !important; +} +#bbtalk { + width: 100%; +} +#bber-talk { + width: 100%; + height: 30px; + line-height: 30px; + display: flex; + flex-direction: column; +} +i.bber-logo { + font-size: 2rem; + line-height: 22px; + margin-right: 1rem; + transition: all 0.3s ease 0s; + cursor: pointer !important; +} +i.bber-logo:hover, +i.bber-gotobb:hover { + color: var(--anzhiyu-main); +} + +i.bber-gotobb { + line-height: 30px; + margin-left: 1rem; + transition: all 0.3s ease 0s; + cursor: pointer; +} + +#bber-talk .li-style { + width: 100%; + max-width: 100%; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + transition: 0.3s; + font-weight: 700; + margin: auto; + cursor: pointer; + white-space: nowrap; +} +#bber-talk .li-style:hover { + color: var(--anzhiyu-main); +} + +#bbTimeList:hover { + border: var(--style-border-hover); + box-shadow: var(--anzhiyu-shadow-main); +} + +/* 文章页H1-H6图标样式效果 */ +@-webkit-keyframes rotate { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(-1turn); + transform: rotate(-1turn); + } +} +@keyframes rotate { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(-1turn); + transform: rotate(-1turn); + } +} + +/* 音乐播放器 */ + +.aplayer.aplayer-narrow .aplayer-body, +.aplayer.aplayer-narrow .aplayer-pic { + height: 66px; + width: 66px; +} + +/* 导航栏音乐 */ +@media screen and (max-width: 1200px) { + #nav-music { + display: none !important; + } +} + +#nav-music { + display: flex; + align-items: center; + z-index: 9; + position: fixed; + bottom: 20px; + left: 20px; + cursor: pointer; + transition: all 0.5s, left 0s; + transform-origin: left bottom; + box-shadow: var(--anzhiyu-shadow-border); + border-radius: 40px; + overflow: hidden; +} + +#nav-music:active { + transform: scale(0.97); +} + +#nav-music.playing { + border: var(--style-border); + box-shadow: 0 0px 12px -3px var(--anzhiyu-none); + animation: playingShadow 5s linear infinite; +} + +@keyframes playingShadow { + 0% { + box-shadow: 0 0px 12px -3px var(--anzhiyu-none); + } + + 50% { + box-shadow: 0 0px 12px 0px var(--anzhiyu-main); + } + + 100% { + box-shadow: 0 0px 12px -3px var(--anzhiyu-none); + } +} + +#nav-music .aplayer.aplayer-withlrc .aplayer-pic { + height: 25px; + width: 25px; + border-radius: 40px; + z-index: 1; + transition: 0.3s; + transform: rotate(0deg) scale(1); + border: var(--style-border-always); + animation: changeright 24s linear infinite; + animation-play-state: paused; +} + +#nav-music.playing .aplayer.aplayer-withlrc .aplayer-pic { + box-shadow: 0 0 14px #ffffffa6; + transform: rotate(0deg) scale(1.1); + border-color: var(--anzhiyu-white); + animation-play-state: running; +} + +@keyframes changeright { + 0% { + transform: rotate(0deg) scale(1.1); + box-shadow: 0 0 2px #ffffff00; + } + + 25% { + transform: rotate(90deg) scale(1.1); + box-shadow: 0 0 14px #ffffff; + } + + 50% { + transform: rotate(180deg) scale(1.1); + box-shadow: 0 0 2px #ffffff00; + } + + 75% { + transform: rotate(270deg) scale(1.1); + box-shadow: 0 0 14px #ffffff; + } + + 100% { + transform: rotate(360deg) scale(1.1); + box-shadow: 0 0 2px #ffffff00; + } +} + +#nav-music .aplayer.aplayer-withlrc .aplayer-info { + height: 100%; + color: var(--anzhiyu-fontcolor); + margin: 0; + padding: 0; + display: flex; + align-items: center; +} + +#nav-music.playing .aplayer.aplayer-withlrc .aplayer-info { + color: var(--anzhiyu-white); +} + +#nav-music.playing #nav-music-hoverTips { + width: 0; + opacity: 0; +} +#nav-music #nav-music-hoverTips { + color: var(--anzhiyu-white); + background: var(--anzhiyu-main); + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + align-items: center; + justify-content: center; + display: flex; + border-radius: 40px; + opacity: 0; + font-size: 12px; + z-index: 2; + transition: 0.3s; +} + +#nav-music:hover:not(.playing) #nav-music-hoverTips { + opacity: 1; +} + +#nav-music + .aplayer + .aplayer-info + .aplayer-controller + .aplayer-bar-wrap:hover + .aplayer-bar + .aplayer-played + .aplayer-thumb { + display: none; +} + +#nav-music .aplayer { + background: var(--card-bg); + border-radius: 60px; + height: 41px; + display: flex; + margin: 0; + transition: 0.3s; + border: var(--style-border); + box-shadow: none; +} + +#nav-music.playing .aplayer { + background: var(--anzhiyu-main); + border: var(--style-border-hover); + backdrop-filter: saturate(180%) blur(20px); + backdrop-filter: blur(20px); + transform: translateZ(0); +} + +#nav-music .aplayer .aplayer-notice { + display: none; +} + +#nav-music .aplayer .aplayer-miniswitcher { + display: none; +} + +#nav-music .aplayer .aplayer-body { + position: relative; + display: flex; + align-items: center; +} + +#nav-music .aplayer-list { + display: none; +} + +#nav-music .aplayer .aplayer-info .aplayer-music { + margin: 0; + display: flex; + align-items: center; + padding: 0 12px 0 8px; + cursor: pointer; + z-index: 1; + height: 100%; +} + +#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-time { + display: none; +} + +#nav-music .aplayer .aplayer-info .aplayer-music .aplayer-author { + display: none; +} + +#nav-music .aplayer.aplayer-withlist .aplayer-info { + border: none; +} + +#nav-music .aplayer .aplayer-pic .aplayer-button { + bottom: 50%; + right: 50%; + transform: translate(50%, 50%); + margin: 0; + transition: 0.3s; +} +#nav-music .aplayer .aplayer-pic:has(.aplayer-button.aplayer-play) { + animation-play-state: paused; + transform: rotate(0deg) scale(1) !important; +} +#nav-music .aplayer.aplayer-withlrc .aplayer-pic { + margin-left: 8px; +} +#nav-music .aplayer .aplayer-info .aplayer-music .aplayer-title { + cursor: pointer; + line-height: 1; + display: inline-block; + white-space: nowrap; + max-width: 120px; + overflow: hidden; + text-overflow: ellipsis; + transition: 0.3s; + user-select: none; +} + +#nav-music .aplayer .aplayer-info .aplayer-controller { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; +} + +#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap { + margin: 0; + padding: 0; +} + +#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar { + height: 100%; + background: 0 0; +} + +#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded { + display: none; +} + +#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played { + height: 100%; + opacity: 0.1; + background-color: var(--anzhiyu-white) !important; + animation: lightBar 5s ease infinite; + animation-play-state: paused; +} + +#nav-music.playing .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played { + animation-play-state: running; +} + +@keyframes lightBar { + 0% { + opacity: 0.1; + } + + 60% { + opacity: 0.3; + } + + 100% { + opacity: 0.1; + } +} + +/* 歌词 */ +#nav-music .aplayer.aplayer-withlrc .aplayer-lrc { + width: 0; + opacity: 0; + transition: 0.3s; + margin-top: -2px; + padding: 5px 0; +} +#nav-music.stretch .aplayer.aplayer-withlrc .aplayer-lrc { + width: 200px; + margin-left: 8px; + opacity: 1; +} + +#nav-music .aplayer .aplayer-lrc p.aplayer-lrc-current { + color: var(--anzhiyu-white); + border: none; + min-height: 20px; +} + +#nav-music .aplayer .aplayer-lrc:after, +#nav-music .aplayer .aplayer-lrc:before { + display: none; +} + +#nav-music .aplayer .aplayer-lrc p { + color: #ffffffb3; + line-height: 40px !important; + height: 40px !important; + margin: 0px 0; + vertical-align: top; + /* display: inline-block; */ +} + +#nav-music .aplayer .aplayer-pic { + pointer-events: none; +} +#nav-music .aplayer .aplayer-pic .aplayer-button { + pointer-events: all; +} + +/* bilibli番剧插件 */ +#page #article-container .bangumi-tab.bangumi-active { + background: var(--anzhiyu-theme); + color: var(--anzhiyu-ahoverbg); + border-radius: 10px; +} +#page #article-container .bangumi-tabs .bangumi-tab { + border-bottom: none; + border-radius: 10px; +} +#page #article-container .bangumi-tabs a.bangumi-tab:hover { + text-decoration: none !important; + border-radius: 10px; + column-gap: var(--anzhiyu-ahoverbg); +} +#page #article-container .bangumi-pagination a.bangumi-button { + border-bottom: none; + border-radius: 10px; +} +.bangumi-button:hover { + background: var(--anzhiyu-theme) !important; + border-radius: 10px !important; + color: var(--anzhiyu-ahoverbg) !important; +} +a.bangumi-button.bangumi-nextpage:hover { + text-decoration: none !important; +} +.bangumi-button { + padding: 5px 10px !important; +} + +a.bangumi-tab { + padding: 5px 10px !important; +} +svg.icon.faa-tada { + font-size: 1.1em; +} +.bangumi-info-item { + border-right: 1px solid #f2b94b; +} +.bangumi-info-item span { + color: #f2b94b; +} +.bangumi-info-item em { + color: #f2b94b; +} + +/*哔哩哔哩视频适配*/ +.aspect-ratio { + position: relative; + width: 100%; + height: 0; + padding-bottom: 75%; + margin: 3% auto; + text-align: center; +} +.aspect-ratio iframe { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; +} +#page:has(#lib-cards):has(#libCategories) #post-comment .tk-comments-container > .tk-comment { + border: none; + box-shadow: none; +} +@media screen and (max-width: 768px) { + #libCategories { + margin-top: 0 !important; + } + #page:has(#lib-cards):has(#libCategories) h1.page-title { + margin-bottom: 0; + } + body[data-type="categories"] #body-wrap #category { + padding: 20px 15px 20px; + } +} + +.card-glass .card-background { + box-shadow: none; + margin: 0 15px; +} +[data-theme="dark"] .card-glass .card-background { + background-color: transparent; +} + +/* 留言板样式补丁 */ +#maincontent #form-wrap .formmain .comments-main h3.title3 { + justify-content: center; +} + +body[data-type="envelope"] #page #post-comment .tk-comments-container > .tk-comment { + border: none; + box-shadow: none; +} + +[data-theme="dark"] #universe { + display: block; + position: fixed; + margin: 0; + padding: 0; + border: 0; + outline: 0; + left: 0; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 1; +} +canvas#universe { + display: none; +} + +@media screen and (max-width: 768px) { + #page .fcircle_page .author-content-item .card-content .banner-button-group .banner-button i, + #page .fcircle_page .author-content-item .card-content .banner-button-group .banner-button svg { + margin-left: 140px; + margin-top: 15px; + } +} + +#gitcalendar #git_container ul li { + margin: 0 !important; +} +#gitcalendar #git_container ul li::before{ + content: none !important; +} +.dplayer-video-wrap, +.dplayer { + border-radius: 12px; +} + +.note .hide-block { + margin: 0; +} +.note .hide-block button { + border-radius: 30px; +} + +body[data-type="link"] main #page { + border: 0; + box-shadow: none !important; + padding: 0 !important; + background: transparent !important; +} + +[data-theme="dark"] body[data-type="link"] #page { + background: transparent; +} + +.flink .anzhiyu-flink-list { + padding: 0; +} + +/* 修复时间轴wowjs超出盒子 */ +div#archive { + overflow: hidden; + padding: 22px; +} +/* 修复加载时图片太大超出范围 */ +.aplayer.aplayer-fixed { + overflow: hidden; +} + +@media screen and (max-width: 768px) { + #page .fcircle_page .author-content-item .card-content .banner-button-group .banner-button { + background-color: transparent !important; + } +} + +.relatedPosts > .relatedPosts-list > div { + border-radius: var(--anzhiyu-border-radius); +} + +/* 侧边栏按钮圆角 */ +#rightside > div > button { + border-radius: 5px; +} + +/* site-card样式修复 */ +#article-container .site-card-group a { + padding: 0; + border-bottom: 0; + font-weight: 400; +} +#article-container .site-card-group .site-card { + background: #fff !important; + border-radius: 8px; +} +#article-container .site-card-group a:hover { + padding: 0; + border-bottom: 0; + font-weight: 400; +} +[data-theme="light"] #footer-wrap { + color: var(--font-color); +} +#footer-wrap .anzhiyufont.anzhiyu-icon-heartbeat { + transition: 0.3s; + animation: heartbeat-bounce 2s ease-in-out infinite; + -webkit-font-smoothing: antialiased; + display: var(--fa-display, inline-block); + font-style: normal; + font-variant: normal; + line-height: 1; + text-rendering: auto; +} +@keyframes heartbeat-bounce { + 0%, + 100% { + transform: scale(1); + } + + 10%, + 30% { + transform: scale(0.9); + } + 20%, + 40%, + 60%, + 80% { + transform: scale(1.1); + } + 50%, + 70% { + transform: scale(1.1); + } +} + +/* 顶部样式 */ +.fcircle_page .author-content.fcirclePage { + height: 19rem; + color: var(--anzhiyu-white); + overflow: hidden; + margin-top: 0px; +} +body[data-type="fcircle"] #web_bg { + background-color: #f7f9fe; +} + +[data-theme="dark"] body[data-type="fcircle"] #web_bg { + background-color: #000; +} + +body[data-type="fcircle"] #page .page-title { + display: none; +} + +body[data-type="fcircle"] #page { + border: 0; + box-shadow: none !important; + padding: 0 !important; + background: transparent !important; +} +.fcircle_page a { + border-bottom: none !important; +} +.fcircle_page .cf-article-avatar a:hover { + background: none !important; + color: var(--anzhiyu-fontcolor) !important; +} +/* 随机文章样式 */ + +.title-h2-a { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 0.5rem; +} +.title-h2-a-left { + display: flex; + align-items: center; +} +.title-h2-a-left h2 { + margin-top: 0 !important; + margin-bottom: 0 !important; +} +.title-h2-a a { + margin-left: 0.5rem; + color: var(--anzhiyu-fontcolor); + font-weight: 700; +} +#random-post { + min-height: 32px; + background: var(--card-bg); + border: var(--style-border-always); + box-shadow: var(--anzhiyu-shadow-border); + padding: 20px 30px; + border-radius: 12px; + margin-top: 8px; +} +#random-post .random-friends-post { + text-decoration: none; + border-bottom: 2px solid var(--anzhiyu-lighttext) !important; + color: var(--anzhiyu-fontcolor); + font-weight: 700; + padding: 0 4px; +} + +#random-post .random-friends-post:hover { + text-decoration: none; + border-bottom: 2px solid var(--anzhiyu-none) !important; + color: var(--anzhiyu-white) !important; + background: var(--anzhiyu-main) !important; + border-radius: 4px; + box-shadow: var(--anzhiyu-shadow-main); +} +#article-container .title-h2-a a:hover { + color: var(--anzhiyu-hovertext) !important; +} +.fcircle_page .title-h2-a-right a.random-post-all { + color: var(--anzhiyu-fontcolor); +} +#cf-overshow.cf-show-now p a.cf-article-title:hover, +.fcircle_page #fcircleContainer .cf-article a.cf-article-title:hover, +.fcircle_page .title-h2-a-right a.random-post-all:hover, +.fcircle_page .title-h2-a-left a.random-post-start:hover { + background: none; + box-shadow: none; + color: var(--anzhiyu-theme); +} +.fcircle_page .fish-pond-item .cf-article .cf-article-title { + line-height: 2; +} + +#greetingBox { + position: fixed; + top: 10px; + left: 15%; + width: 400px; + text-align: center; + z-index: 999; + pointer-events: none; +} +@media screen and (max-width: 768px) { + #greetingBox { + display: none; + } +} + +#greeting { + display: inline-block; + position: relative; + opacity: 0; + top: -110px; + padding: 5px 40px; + border-radius: 50px; + background-color: white; + color: black; + font-size: small; + transition: 0.5s; + box-shadow: rgb(0 0 0 / 5%) 0 10px 20px; +} + +#greeting.shown { + opacity: 1; + top: 0; +} + +/* 首页分类框展示 */ +.categoryGroup { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + min-width: 200px; + height: 24%; + width: 100%; + + animation: slide-in 0.6s 0.2s backwards; +} +.categoryItem:last-child { + margin-right: 0; +} +.categoryItem { + width: calc(100% / 3 - 0.33rem); + height: 100%; + margin-right: 0.5rem; +} + +.categoryItem { + overflow: hidden; + transform: scale(1); + transition: all 0.8s cubic-bezier(0.65, 0.15, 0.37, 1.19); + height: 100%; + border-radius: 12px; +} + +a.categoryButton { + height: 100%; + width: 100%; + background: var(--anzhiyu-card-bg); + border-radius: 12px; + display: inline-block; + text-align: left; + line-height: 4em; + font-weight: 700; + font-size: 1.1rem; + color: var(--anzhiyu-white); + transition: all 0.8s cubic-bezier(0.39, 0.575, 0.565, 1); + transform: scale(1); + overflow: hidden; + font-family: inherit; +} +.categoryButtonText { + padding-left: 21px; +} +a.categoryButton svg, +a.categoryButton i { + font-size: 5rem; + opacity: 0.2; + position: absolute; + right: 0; + top: 20%; + transition: 0.3s; + width: 100px; + text-align: center; + filter: blur(2px); + transform: scale(1) rotate(15deg); +} + +a.categoryButton.blue { + background: linear-gradient(to right, #358bff, #15c6ff); + background-size: 200%; +} +a.categoryButton.red { + background: linear-gradient(to right, #f65, #ffbf37); + background-size: 200%; +} +a.categoryButton.green { + background: linear-gradient(to right, #18e7ae, #1eebeb); + background-size: 200%; +} + +.categoryItem:hover { + width: 50%; +} + +.categoryItem:hover svg, +.categoryItem:hover i { + opacity: 0.8; + transition: 0.8s; + transition-delay: 0.15s; + transform: scale(1.03); + font-size: 2.5rem; + filter: blur(0); + top: 15%; +} +a.categoryButton:after { + top: 47px; + width: 1rem; + left: 21px; + height: 2px; + background: var(--anzhiyu-white); + content: ""; + border-radius: 1px; + position: absolute; +} + +@media screen and (max-width: 768px) { + .categoryGroup { + display: none; + } +} + +[data-theme="dark"] a.categoryButton.blue { + background: linear-gradient(to right, #0653b8, #2fcbff); + background-size: 200%; +} +[data-theme="dark"] a.categoryButton.red { + background: linear-gradient(to right, #e22a16, #da980c); + background-size: 200%; +} +[data-theme="dark"] a.categoryButton.green { + background: linear-gradient(to right, #099e74, #0ea4a4); + background-size: 200%; +} + +#topPostGroup .top-group-list-item { + display: flex; + width: calc(100% / 4 - 5px); + flex-direction: column; + align-items: flex-start; + background: var(--anzhiyu-card-bg); + border-radius: 12px; + overflow: hidden; + height: 128px; + max-height: 128px; + border: var(--style-border-always); + transition: 0.3s; + box-shadow: var(--anzhiyu-shadow-border); +} +#topPostGroup .post_cover { + width: 100%; +} +#topPostGroup .post_cover img { + object-fit: cover; + width: 100%; + height: 80px; + background: var(--anzhiyu-secondbg); + border-radius: 12px 12px 0 0; +} + +#topPostGroup .top-group-list-item .post_cover a { + height: 80px; + overflow: hidden; + display: flex; + position: relative; +} + +span.top-group-text { + position: absolute; + top: 0; + left: -40px; + display: flex; + z-index: 1; + background: var(--anzhiyu-theme); + color: var(--anzhiyu-white); + padding: 2px 8px; + font-size: 12px; + border-radius: 12px 0 12px 0; + transition: 0.3s; + cursor: pointer; +} +.top-group-list-item:hover span.top-group-text { + left: 0; +} + +#topPostGroup .top-group-list-item .top-group-info { + padding: 0.3rem 0.5rem 0.3rem 0.5rem !important; + transition: 0.3s; +} + +#topPostGroup .top-group-list-item .top-group-info .article-title { + -webkit-line-clamp: 2; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + line-height: 1.5; + justify-content: center; + align-items: flex-end; + align-content: center; + padding-top: 0.5rem; + font-weight: 700; + font-size: 0.8rem !important; + padding: 0 !important; +} + +#topPostGroup .top-group-list-item:hover { + border: var(--style-border-hover); + box-shadow: var(--anzhiyu-shadow-main); + transform: scale(1.03); +} + +#topPostGroup .top-group-list-item:hover .article-title { + color: var(--anzhiyu-theme); +} + +.top-group-list-none { + width: calc(100% / 4 - 5px); +} +#topPostGroup .topPostGroupTime { + font-size: 12px; +} + +@media screen and (max-width: 1450px) { + #topPostGroup .top-group-list-item { + width: calc(100% / 4 - 20px) !important; + } +} +@media screen and (max-width: 768px) { + #topPostGroup .top-group-list-item { + width: calc(100% / 2 - 5px) !important; + margin: 2px; + } +} +@media screen and (max-width: 768px) { + #topGroup { + display: none; + } +} + +a span.top-group-text { + border-radius: 0px 0 12px 0; +} + +div#bannerGroup { + width: calc(100% - 600px - 2rem); + height: 340px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +#swiper_container_blog { + width: 49%; + transition: all 0.3s, width 0s; + border-radius: 12px; +} +.swiper-wrapper { + align-items: center; +} +div#swiper_container { + transition: 0.3s; +} +/* 防止轮播图css未加载完时的超度横行滚动条 */ +#swiper_container { + overflow: hidden !important; +} +div.swiper_container_card { + margin: 1rem auto 0; +} +@media screen and (max-width: 768px) { + div.swiper_container_card { + margin: 0.2rem auto 0; + } +} +div#swiper_container { + background: rgba(255, 255, 255, 0); + width: 100%; + padding: 0; + overflow: initial; + background: var(--card-bg); + border-radius: 12px; + border: var(--style-border); +} +div#swiper_container:hover { + border: var(--style-border-hover); + box-shadow: var(--anzhiyu-shadow-main); +} +.blog-slider { + width: 100%; + position: relative; + border-radius: 12px 8px 8px 12px; + margin: 0 auto; +} +.blog-slider__item { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +.blog-slider__item.swiper-slide-active .blog-slider__img img { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transition-delay: 0.3s; + -moz-transition-delay: 0.3s; + -o-transition-delay: 0.3s; + -ms-transition-delay: 0.3s; + transition-delay: 0.3s; +} +.blog-slider__item.swiper-slide-active .blog-slider__content > * { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: none; + -moz-transform: none; + -o-transform: none; + -ms-transform: none; + transform: none; +} +.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(1) { + -webkit-transition-delay: 0.3s; + -moz-transition-delay: 0.3s; + -o-transition-delay: 0.3s; + -ms-transition-delay: 0.3s; + transition-delay: 0.3s; +} +.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(2) { + -webkit-transition-delay: 0.4s; + -moz-transition-delay: 0.4s; + -o-transition-delay: 0.4s; + -ms-transition-delay: 0.4s; + transition-delay: 0.4s; +} +.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(3) { + -webkit-transition-delay: 0.5s; + -moz-transition-delay: 0.5s; + -o-transition-delay: 0.5s; + -ms-transition-delay: 0.5s; + transition-delay: 0.5s; +} +.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(4) { + -webkit-transition-delay: 0.6s; + -moz-transition-delay: 0.6s; + -o-transition-delay: 0.6s; + -ms-transition-delay: 0.6s; + transition-delay: 0.6s; +} +.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(5) { + -webkit-transition-delay: 0.7s; + -moz-transition-delay: 0.7s; + -o-transition-delay: 0.7s; + -ms-transition-delay: 0.7s; + transition-delay: 0.7s; +} +.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(6) { + -webkit-transition-delay: 0.8s; + -moz-transition-delay: 0.8s; + -o-transition-delay: 0.8s; + -ms-transition-delay: 0.8s; + transition-delay: 0.8s; +} +.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(7) { + -webkit-transition-delay: 0.9s; + -moz-transition-delay: 0.9s; + -o-transition-delay: 0.9s; + -ms-transition-delay: 0.9s; + transition-delay: 0.9s; +} +.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(8) { + -webkit-transition-delay: 1s; + -moz-transition-delay: 1s; + -o-transition-delay: 1s; + -ms-transition-delay: 1s; + transition-delay: 1s; +} +.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(9) { + -webkit-transition-delay: 1.1s; + -moz-transition-delay: 1.1s; + -o-transition-delay: 1.1s; + -ms-transition-delay: 1.1s; + transition-delay: 1.1s; +} +.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(10) { + -webkit-transition-delay: 1.2s; + -moz-transition-delay: 1.2s; + -o-transition-delay: 1.2s; + -ms-transition-delay: 1.2s; + transition-delay: 1.2s; +} +.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(11) { + -webkit-transition-delay: 1.3s; + -moz-transition-delay: 1.3s; + -o-transition-delay: 1.3s; + -ms-transition-delay: 1.3s; + transition-delay: 1.3s; +} +.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(12) { + -webkit-transition-delay: 1.4s; + -moz-transition-delay: 1.4s; + -o-transition-delay: 1.4s; + -ms-transition-delay: 1.4s; + transition-delay: 1.4s; +} +.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(13) { + -webkit-transition-delay: 1.5s; + -moz-transition-delay: 1.5s; + -o-transition-delay: 1.5s; + -ms-transition-delay: 1.5s; + transition-delay: 1.5s; +} +.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(14) { + -webkit-transition-delay: 1.6s; + -moz-transition-delay: 1.6s; + -o-transition-delay: 1.6s; + -ms-transition-delay: 1.6s; + transition-delay: 1.6s; +} +.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(15) { + -webkit-transition-delay: 1.7s; + -moz-transition-delay: 1.7s; + -o-transition-delay: 1.7s; + -ms-transition-delay: 1.7s; + transition-delay: 1.7s; +} +.blog-slider__img { + width: 290px; + -webkit-flex-shrink: 0; + flex-shrink: 0; + height: 200px; + padding: 10px; + border-radius: 5px; + transform: translateX(0); + overflow: hidden; +} +.blog-slider__img:after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 5px; + opacity: 0.8; +} +.blog-slider__img img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + opacity: 0; + border-radius: 5px; + transition: all 0.3s; +} +.blog-slider__content { + padding-right: 50px; + padding-left: 50px; +} +.blog-slider__content > * { + opacity: 0; + -webkit-transform: translateY(25px); + -moz-transform: translateY(25px); + -o-transform: translateY(25px); + -ms-transform: translateY(25px); + transform: translateY(25px); + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + -ms-transition: all 0.4s; + transition: all 0.4s; +} +.blog-slider__code { + color: var(--font-color); + margin-bottom: 0; + display: block; + font-weight: 500; +} +.blog-slider__title { + font-size: 18px; + font-weight: 700; + color: var(--font-color); + margin-bottom: 15px; + -webkit-line-clamp: 1; + display: -webkit-box; + overflow: hidden; + -webkit-box-orient: vertical; +} +.blog-slider__text { + color: var(--font-color); + margin-bottom: 15px; + line-height: 1.5em; + width: 100%; + height: 50px; + word-break: break-all; + word-wrap: break-word; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} +.blog-slider__button { + display: -webkit-inline-box; + display: -moz-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-box; + display: inline-flex; + background-color: var(--btn-bg); + padding: 4px 14px; + border-radius: 8px; + color: var(--btn-color); + text-decoration: none; + font-weight: 500; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + text-align: center; + letter-spacing: 1px; + display: none; +} +.blog-slider__button:hover { + background-color: var(--btn-hover-color); + color: var(--btn-color); +} +.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, +.blog-slider .swiper-pagination-custom, +.blog-slider .swiper-pagination-fraction { + bottom: 10px; + left: 0; + width: 100%; +} +.blog-slider__pagination { + position: absolute; + z-index: 21; + right: 20px; + width: 11px !important; + text-align: center; + left: auto !important; + top: 50%; + bottom: auto !important; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -o-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} +.blog-slider .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet { + margin: 8px 0; +} +.blog-slider__pagination .swiper-pagination-bullet { + width: 11px; + height: 11px; + display: block; + border-radius: 10px; + background: #858585; + opacity: 0.2; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; +} +.blog-slider__pagination .swiper-pagination-bullet-active { + opacity: 1; + -ms-filter: none; + filter: none; + background: var(--btn-bg); + height: 30px; +} +@media screen and (max-width: 768px) { + .blog-slider__pagination { + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + -o-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + left: 50% !important; + top: 320px; + width: 100% !important; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + } + .blog-slider .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet { + margin: 0 5px; + } + .blog-slider__pagination .swiper-pagination-bullet-active { + height: 11px; + width: 30px; + } + .blog-slider__button { + display: -webkit-inline-box; + display: -moz-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-box; + display: inline-flex; + width: 100%; + } + .blog-slider { + min-height: 350px; + height: auto; + margin-bottom: 10px; + } + .blog-slider__content { + text-align: center; + padding: 0 30px; + } + .blog-slider__item { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } + .blog-slider__img { + width: 100%; + padding-top: 0; + } + .blog-slider__content { + padding-left: 10px; + padding-right: 10px; + margin-top: 15px; + } + .blog-slider__pagination.swiper-pagination-clickable.swiper-pagination-bullets { + top: 218px; + } + + .swiper_container_card #swiper_container_blog div#swiper_container.blog-slider { + padding: 10px; + overflow: hidden; + } + .blog-slider__item .blog-slider__content .blog-slider__code { + margin-top: 10px; + } + .blog-slider__title { + margin-bottom: 0; + } +} +@media screen and (min-width: 768px) { + .blog-slider { + height: 200px; + } + .blog-slider__img { + height: 200px; + } +} + +@media screen and (max-width: 1200px) { + div#swiper_container { + width: 100%; + } + #swiper_container_blog { + width: 99%; + } +} + +.swiper_container_card { + display: flex !important; + justify-content: space-around; + flex-direction: row !important; + user-select: none; +} + +.todayCard-title, +.todayCard-tips, +.topGroup .banner-button { + color: #ffffff; +} + +.topGroup { + height: 340px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: calc(600px + 1.5rem); + position: relative; + align-content: space-between; +} +.topGroup .todayCard { + position: absolute; + width: calc(600px + 1rem); + height: 100%; + z-index: 1; + top: 0; + left: 0; + background: var(--anzhiyu-card-bg); + border-radius: 12px; + margin-left: 0.5rem; + overflow: hidden; + transition: 0.3s; + display: flex; + cursor: pointer; + pointer-events: all; +} + +.topGroup .todayCard .todayCard-info { + position: absolute; + bottom: 2rem; + left: 2rem; + z-index: 2; + color: var(--anzhiyu-white); + max-width: 60%; + transition: 0.3s; +} + +.topGroup .todayCard .todayCard-info .todayCard-tips { + opacity: 0.8; + font-size: 12px; +} + +.topGroup .todayCard .todayCard-info .todayCard-title { + font-size: 28px; + font-weight: bold; + line-height: 36px; +} +.topGroup .todayCard .todayCard-cover { + position: absolute; + min-width: 100%; + min-height: 100%; + top: 0; + left: 0; + background-size: cover; + z-index: -1; + transition: 0.3s; +} + +.topGroup .banner-button-group { + position: absolute; + right: 2rem; + bottom: 2rem; + display: flex; + transition: 0.3s; +} + +.topGroup .todayCard.hide .todayCard-cover { + transform: scale(1.2); +} + +.topGroup .banner-button { + background: var(--anzhiyu-white-op); + border-radius: 20px; + color: var(--anzhiyu-white); + display: flex; + align-items: center; + z-index: 1; + transition: 0.3s; + cursor: pointer; + backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); + transform: translateZ(0); + height: 40px; + width: 125px; + justify-content: center; +} +.topGroup .banner-button-group .banner-button .banner-button-text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.topGroup .banner-button i, +.topGroup .banner-button svg { + margin-right: 8px; + font-size: 22px; +} +.topGroup .todayCard::after { + position: absolute; + content: ""; + width: 100%; + height: 100%; + top: 0; + left: 0; + box-shadow: 0 -109px 133px -9px #000000 inset; +} + +.topGroup .todayCard.hide { + opacity: 0; + pointer-events: none; +} +.topGroup .todayCard img { + object-fit: cover; + width: 100%; + height: 80px; + background: var(--anzhiyu-secondbg); + border-radius: 12px 12px 0 0; +} +.topGroup .recent-post-item:nth-child(4), +.topGroup .recent-post-item:nth-child(5), +.topGroup .recent-post-item:nth-child(6) { + margin-bottom: 0; + margin-top: 4px; +} + +.topGroup .recent-post-item { + display: none; + width: 200px; + flex-direction: column; + align-items: flex-start; + background: var(--anzhiyu-card-bg); + border-radius: 12px; + overflow: hidden; + min-width: 200px; + height: 164px !important; + max-height: 164px; + border: var(--style-border-always); + transition: 0.3s; + position: relative; + box-shadow: var(--anzhiyu-shadow-border); + margin-left: 0.5rem; + margin-right: 0px; + margin-bottom: 0.5rem; + cursor: pointer; +} +.topGroup .recent-post-item:hover .recent-post-info .article-title { + color: var(--anzhiyu-main); +} +.topGroup .recent-post-item .post_cover { + width: 100%; +} +.topGroup .recent-post-item .post_cover a { + height: 100px; + overflow: hidden; + display: flex; +} +.topGroup span.recent-post-top-text { + position: absolute; + top: 0; + left: -40px; + display: flex; + z-index: 1; + background: var(--anzhiyu-theme); + color: var(--anzhiyu-white); + padding: 2px 8px; + font-size: 12px; + border-radius: 12px 0 12px 0; + transition: 0.3s; + cursor: pointer; +} + +.topGroup .recent-post-item .post_cover img { + object-fit: cover; + width: 100%; + background: var(--anzhiyu-secondbg); + border-radius: 12px 12px 0 0; +} +.topGroup .recent-post-item .recent-post-info { + padding: 0.3rem 0.5rem 0.3rem 0.5rem; + transition: 0.3s; +} +.topGroup .recent-post-item .recent-post-info .article-title { + -webkit-line-clamp: 2; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + line-height: 1.5; + justify-content: center; + align-items: flex-end; + align-content: center; + padding-top: 0.5rem; + font-weight: bold; + font-size: 1rem !important; + padding: 0 !important; +} + +.topGroup .recent-post-item:hover .recent-post-top-text { + left: 0; +} + +@media screen and (max-width: 1200px) { + .topGroup .todayCard { + background: #0e57d5; + } + + div#bannerGroup { + height: auto; + width: auto; + } + + .topGroup .recent-post-item { + display: flex; + } + + .categoryGroup .categoryItem:nth-child(3) { + display: none; + } + .categoryGroup { + flex-direction: column; + height: 95%; + } + .topGroup { + display: flex; + flex-wrap: nowrap; + width: auto; + height: auto; + } + + .topGroup .todayCard { + display: none; + } + + .swiper_container_card { + display: flex; + flex-direction: row !important; + justify-content: flex-start !important; + flex-wrap: nowrap; + width: 100%; + overflow-x: scroll; + } + + .categoryItem { + height: 48%; + min-width: 200px; + box-shadow: none !important; + } + .categoryGroup { + display: flex !important; + } + #bbTimeList { + margin: 0 1.5rem; + max-width: 100%; + width: auto; + } +} + +.swiper_container_card::-webkit-scrollbar { + display: none; +} + +.topGroup .banner-button:hover { + background: var(--anzhiyu-theme); + color: var(--anzhiyu-white); +} + +#local-search .search-dialog .local-search__hit-item:before { + content: none !important; +} +#local-search .search-dialog .local-search__hit-item { + padding: 10px !important; + border-radius: 8px; + border: var(--style-border); + margin-bottom: 10px; + display: flex; + justify-content: space-between; + align-items: center; +} +#local-search .search-dialog .local-search__hit-item .search-left { + width: 35%; +} +#local-search .search-dialog .local-search__hit-item .search-right { + width: 60%; +} +#local-search .search-dialog .local-search__hit-item .search-left img { + object-fit: cover; + width: 100%; + background: var(--anzhiyu-secondbg); + border-radius: 8px; +} +#local-search .search-dialog .local-search__hit-item .search-result { + cursor: pointer; +} +#local-search .tag-list { + padding: 4px 8px; + border-radius: 8px; + margin-right: 0.5rem; + margin-top: 0.5rem; + border: var(--style-border); + cursor: pointer; +} +#local-search .search-dialog .local-search__hit-item .tag-list { + display: inline; +} +#local-search .search-dialog .local-search__hit-item .tag-list:hover { + background: var(--anzhiyu-main); + color: var(--anzhiyu-white); +} + +b, strong { + color: var(--anzhiyu-lighttext); +} +.about-reward { + position: absolute; + top: 1rem; + right: 2rem; +} +@media screen and (max-width: 768px) { + .reward .about-reward #con { + width: 170px; + } + .reward #tube-con { + display: none; + } +} + +[data-theme="dark"] body[data-type="room"] #page { + background: #000 !important; +} +body[data-type="room"] #page { + border: 0; + box-shadow: none !important; + padding: 0 !important; + background: transparent !important; +} +body[data-type="room"] #page .page-title { + display: none; +} +#room_page .banner-button-group { + position: absolute; + bottom: 0.8rem; + right: 2rem; +} +#room_page .banner-button-group .banner-button:hover { + background: var(--anzhiyu-card-bg); + color: var(--font-color); +} +#room_page .banner-button-group .banner-button i, +#room_page .banner-button-group .banner-button svg { + margin-right: 8px; +} +#room_page .banner-button-group .banner-button { + height: 40px; + width: 140px; + border-radius: 20px; + justify-content: center; + color: var(--anzhiyu-white); + background: var(--anzhiyu-theme); + display: flex; + align-items: center; + z-index: 1; + transition: 0.3s; + cursor: pointer; + border-bottom: 0 !important; +} + +#room_page .description { + margin: 20px auto 20px; + border-radius: 24px; + background: var(--anzhiyu-card-bg); + border: var(--style-border-always); + box-shadow: var(--anzhiyu-shadow-border); + position: relative; + padding: 1rem 2rem; + overflow: hidden; +} + +#room_page *, +#room_page *::after, +#room_page *::before { + margin: 0; + padding: 0; + box-sizing: border-box; + user-select: none; + transform-style: preserve-3d; + -webkit-tap-highlight-color: transparent; +} + +/* Generic */ +#room_page { + margin-top: 590px; +} + +#room_page .face { + position: absolute; +} + +/***************/ +#room_page .house { + position: absolute; + width: 28vw; + height: 28vw; + transform: perspective(90vw) rotateX(75deg) rotateZ(45deg) translateZ(-9vw); + left: 45%; + top: 100px; +} + +#room_page .h-shadow { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-shadow: 1.5vw -3vw 3vw black, 1.5vw 0.5vw 1.5vw black; +} + +#room_page .h-lights { + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + width: 45vw; + height: 45vw; +} + +.h-light { + position: absolute; +} + +.h-light:nth-of-type(1) { + bottom: 5vw; + right: 0; + width: 14vw; + height: 14vw; + border-radius: 50%; + background-image: radial-gradient(#1b182a, transparent); + filter: blur(1vw); +} + +.h-light:nth-of-type(2) { + bottom: 18vw; + right: -1vw; + width: 2vw; + height: 12vw; + border-radius: 50%; + transform: rotateZ(-50deg); + background-image: radial-gradient(rgba(81, 137, 251, 0.45) 50%, rgba(40, 125, 210, 0.45), transparent); + box-shadow: -1vw -1vw 2vw 1vw rgba(131, 171, 252, 0.1); + filter: blur(1vw); +} + +.h-light:nth-of-type(3) { + bottom: -2vw; + right: 17vw; + width: 5vw; + height: 12vw; + border-radius: 50%; + transform: rotateZ(-50deg); + background-image: radial-gradient(rgba(81, 137, 251, 0.5) 50%, rgba(40, 125, 210, 0.5), transparent); + filter: blur(2vw); +} + +.h-light:nth-of-type(3)::before, +.h-light:nth-of-type(3)::after { + content: ""; + position: absolute; + width: 200%; + top: -6vw; + height: 150%; + background-image: linear-gradient(to bottom, rgba(40, 125, 210, 0.1), rgba(81, 137, 251, 0.1), transparent); + border-top-left-radius: 10vw; + border-top-right-radius: 10vw; + filter: blur(1.5vw); +} + +.h-light:nth-of-type(3)::before { + right: -50%; + transform-origin: top right; + transform: rotateZ(15deg); + box-shadow: -2vw -2vw 0 rgba(81, 137, 251, 0.075); +} + +.h-light:nth-of-type(3)::after { + left: -50%; + transform-origin: top left; + transform: rotateZ(-15deg); + box-shadow: 2vw -2vw 0 rgba(81, 137, 251, 0.075); +} + +.h-light:nth-of-type(4) { + bottom: 5vw; + left: 8vw; + width: 28vw; + height: 4vw; + transform-origin: top left; + transform: skewX(58deg); + background-image: linear-gradient( + to right, + rgba(81, 137, 251, 0.075) 10%, + transparent 25%, + transparent, + rgba(0, 0, 0, 0.15) + ); + filter: blur(0.25vw); +} + +.h-light:nth-of-type(6) { + bottom: 14vw; + right: 2vw; + width: 8vw; + height: 16vw; + transform-origin: bottom left; + transform: skewY(49deg); + background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7)); + filter: blur(0.35vw); +} + +/***************/ +/***************/ +.alt { + position: absolute; + left: 0; + top: 0; + width: 27vw; + height: 27vw; +} + +.alt__front { + width: 27vw; + height: 0.5vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(26.5vw); +} + +.alt__back { + width: 27vw; + height: 0.5vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-27vw) translateY(-0.5vw); +} + +.alt__right { + width: 27vw; + height: 0.5vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(27vw) translateX(-27vw) translateY(-0.5vw); +} + +.alt__left { + width: 27vw; + height: 0.5vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw); +} + +.alt__top { + width: 27vw; + height: 27vw; + transform-origin: top left; + transform: translateZ(0.5vw); +} + +.alt__bottom { + width: 27vw; + height: 27vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-27vw); +} + +.alt__front { + background-color: #9e99c1; +} + +.alt__back { + background-color: #383358; +} + +.alt__right { + background-color: #383358; +} + +.alt__left { + background-color: #fbfafe; +} + +.alt__top { + background-image: linear-gradient(to bottom, #0b0c1f, #383358, #9e99c1); +} + +.alt__top .light:nth-of-type(1) { + position: absolute; + height: 100%; + width: 100%; + background-image: linear-gradient(to bottom, rgba(20, 61, 103, 0.75), rgba(81, 137, 251, 0.75), transparent); +} + +.alt__top .light:nth-of-type(2) { + position: absolute; + left: 4vw; + height: 100%; + width: 6vw; + background-image: linear-gradient(to bottom, transparent 20%, rgba(40, 125, 210, 0.75), rgba(81, 137, 251, 0.25) 80%); + filter: blur(0.1vw); +} + +.alt__top .light:nth-of-type(3) { + position: absolute; + bottom: 10vw; + left: 5vw; + width: 6vw; + height: 3vw; + border-radius: 50%; + transform: rotateZ(42deg); + background-image: radial-gradient(rgba(131, 171, 252, 0.75) 50%, rgba(32, 99, 167, 0.75)); + filter: blur(0.55vw); +} + +.alt__top .light:nth-of-type(4) { + position: absolute; + bottom: 7vw; + left: 4vw; + width: 8.5vw; + height: 2vw; + border-radius: 50%; + transform: rotateZ(40deg); + background-image: radial-gradient(rgba(131, 171, 252, 0.75) 50%, rgba(32, 99, 167, 0.75)); + filter: blur(0.55vw); +} + +.alt__top .light:nth-of-type(5) { + position: absolute; + bottom: 3.5vw; + left: 4.5vw; + width: 6vw; + height: 2vw; + border-radius: 50%; + transform: rotateZ(40deg); + background-image: radial-gradient(rgba(141, 178, 252, 0.75) 50%, rgba(32, 99, 167, 0.75)); + filter: blur(0.75vw); +} + +.alt__top .light:nth-of-type(6) { + position: absolute; + bottom: 3vw; + left: 0.5vw; + width: 4vw; + height: 2vw; + border-radius: 50%; + transform: rotateZ(40deg); + background-image: radial-gradient(rgba(141, 178, 252, 0.75) 50%, rgba(32, 99, 167, 0.75)); + filter: blur(0.35vw); +} + +.alt__top .light:nth-of-type(7) { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + background-image: linear-gradient(to right, black, #5189fb 10%, transparent 20%); +} + +.alt__top .light:nth-of-type(7)::before { + content: ""; + position: absolute; + width: 20%; + height: 100%; + background-image: linear-gradient(to right, rgba(5, 70, 199, 0.6), transparent 60%); +} + +.alt__top .light:nth-of-type(7)::after { + content: ""; + position: absolute; + width: 100%; + height: 20%; + background-image: linear-gradient(to bottom, rgba(6, 78, 224, 0.5), transparent 60%); +} + +.alt__top .light:nth-of-type(8) { + position: absolute; + bottom: 5vw; + left: 10vw; + width: 6vw; + height: 4vw; + border-radius: 50%; + transform: rotateZ(40deg); + background-image: radial-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(128, 121, 174, 0.1)); + filter: blur(0.8vw); +} + +.alt__bottom { + background-color: #383358; +} + +.alb { + position: absolute; + left: 0; + bottom: 0; + width: 27vw; + height: 1vw; +} + +.alb__front { + width: 27vw; + height: 2vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(-1vw); +} + +.alb__back { + width: 27vw; + height: 2vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-27vw) translateY(-2vw); +} + +.alb__right { + width: 1vw; + height: 2vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(27vw) translateX(-1vw) translateY(-2vw); +} + +.alb__left { + width: 1vw; + height: 2vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-2vw); +} + +.alb__top { + width: 27vw; + height: 1vw; + transform-origin: top left; + transform: translateZ(2vw); +} + +.alb__bottom { + width: 27vw; + height: 1vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-27vw); +} + +.alb__front { + background-image: linear-gradient(to right, #9e99c1 40%, #8f89b7); +} + +.alb__back { + background-color: #383358; +} + +.alb__right { + background-color: #383358; +} + +.alb__left { + background-color: #fbfafe; +} + +.alb__top { + background-image: linear-gradient(to right, #fbfafe 40%, #eae5fa); +} + +.alb__bottom { + background-color: #383358; +} + +.arb { + position: absolute; + right: 0; + bottom: 0; + width: 1vw; + height: 28vw; +} + +.arb__front { + width: 1vw; + height: 2vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(26vw); +} + +.arb__back { + width: 1vw; + height: 2vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-2vw); +} + +.arb__right { + width: 28vw; + height: 2vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-28vw) translateY(-2vw); +} + +.arb__left { + width: 28vw; + height: 2vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-2vw); +} + +.arb__top { + width: 1vw; + height: 28vw; + transform-origin: top left; + transform: translateZ(2vw); +} + +.arb__bottom { + width: 1vw; + height: 28vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-1vw); +} + +.arb__front { + background-color: #8f89b7; +} + +.arb__back { + background-color: #383358; +} + +.arb__right { + background-image: linear-gradient(to right, #282347 40%, #0f0e17); +} + +.arb__left { + background-color: #9e99c1; +} + +.arb__top { + background-image: linear-gradient(to top, #fbfafe, #3b3469 25%, #2e2a48 75%, #9e99c1); +} + +.arb__top::before { + content: ""; + position: absolute; + width: 100%; + height: 30%; + top: 0; + background-image: linear-gradient(to bottom, transparent, rgba(81, 137, 251, 0.85), transparent); +} + +.arb__bottom { + background-color: #383358; +} + +/***************/ +/***************/ +.blt { + position: absolute; + left: 0; + top: 0; + width: 1vw; + height: 27vw; + transform: translateZ(0.5vw); +} + +.blt__front { + width: 1vw; + height: 20vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(7vw); +} + +.blt__back { + width: 1vw; + height: 20vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-20vw); +} + +.blt__right { + width: 27vw; + height: 20vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-27vw) translateY(-20vw); +} + +.blt__left { + width: 27vw; + height: 20vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-20vw); +} + +.blt__top { + width: 1vw; + height: 27vw; + transform-origin: top left; + transform: translateZ(20vw); +} + +.blt__bottom { + width: 1vw; + height: 27vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-1vw); +} + +.blt__front { + background-image: linear-gradient(to bottom, #383358, #9e99c1); +} + +.blt__back { + background-color: #383358; +} + +.blt__right { + background-image: linear-gradient(to bottom, #151225, #383358, #383358 90%, #242040); +} + +.blt__right::before { + content: ""; + position: absolute; + bottom: 0; + width: 100%; + height: 0.75vw; + background-image: linear-gradient(to bottom, #8f89b7, #287dd2); + border-top: 0.1vw solid #282347; + border-bottom: 0.1vw solid #282347; +} + +.blt__right::after { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient( + to bottom, + rgba(6, 78, 224, 0.35), + transparent 30%, + transparent 70%, + rgba(40, 125, 210, 0.35) + ); +} + +.blt__left { + background-color: #fbfafe; +} + +.blt__bottom { + background-color: #383358; +} + +.blt2 { + position: absolute; + left: 0; + top: 0; + width: 2vw; + height: 27vw; + transform: translateZ(20.5vw); +} + +.blt2__front { + width: 2vw; + height: 0.75vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(26.25vw); +} + +.blt2__back { + width: 2vw; + height: 0.75vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-2vw) translateY(-0.75vw); +} + +.blt2__right { + width: 27vw; + height: 0.75vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(2vw) translateX(-27vw) translateY(-0.75vw); +} + +.blt2__left { + width: 27vw; + height: 0.75vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw); +} + +.blt2__top { + width: 2vw; + height: 27vw; + transform-origin: top left; + transform: translateZ(0.75vw); +} + +.blt2__bottom { + width: 2vw; + height: 27vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-2vw); +} + +.blt2__front { + background-color: #383358; +} + +.blt2__back { + background-color: #383358; +} + +.blt2__right { + background-image: linear-gradient(to right, #8f89b7, #9e99c1, #7169a4); +} + +.blt2__right::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + bottom: 0; + border-bottom: 0.1vw solid rgba(251, 250, 254, 0.75); + background-image: linear-gradient(to top, rgba(81, 137, 251, 0.35), transparent); +} + +.blt2__left { + background-color: #fbfafe; +} + +.blt2__top { + background-image: linear-gradient(to top, #9e99c1, #fbfafe); +} + +.blt2__bottom { + background-color: #383358; +} + +.blb { + position: absolute; + left: 1vw; + top: 0; + width: 26vw; + height: 1vw; + transform: translateZ(0.5vw); +} + +.blb__front { + width: 26vw; + height: 20vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(-19vw); +} + +.blb__back { + width: 26vw; + height: 20vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-26vw) translateY(-20vw); +} + +.blb__right { + width: 1vw; + height: 20vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(26vw) translateX(-1vw) translateY(-20vw); +} + +.blb__left { + width: 1vw; + height: 20vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-20vw); +} + +.blb__top { + width: 26vw; + height: 1vw; + transform-origin: top left; + transform: translateZ(20vw); +} + +.blb__bottom { + width: 26vw; + height: 1vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-26vw); +} + +.blb__front { + background-image: linear-gradient(to bottom, #4b4572, #595388 20%, #4b4572); +} + +.blb__front::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient( + to bottom, + rgba(40, 125, 210, 0.25), + transparent 20%, + transparent 80%, + rgba(40, 125, 210, 0.5) + ), + linear-gradient(to right, rgba(31, 33, 88, 0.35), transparent), + linear-gradient(to bottom, rgba(31, 33, 88, 0.35), transparent), + linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 20%, transparent 80%, rgba(40, 125, 210, 0.25)); +} + +.blb__front::after { + content: ""; + position: absolute; + bottom: 0; + width: 100%; + height: 0.75vw; + background-image: linear-gradient(to bottom, #8f89b7, #287dd2); + border-top: 0.1vw solid #282347; + border-bottom: 0.1vw solid #282347; +} + +.blb__back { + background-color: #383358; +} + +.blb__right { + background-image: linear-gradient(to bottom, #151225, #0f0e17 80%, #151225); +} + +.blb__bottom { + background-color: #383358; +} + +.blb2 { + position: absolute; + left: 2vw; + top: 0; + width: 25vw; + height: 1vw; + transform: translateZ(20.5vw); +} + +.blb2__front { + width: 25vw; + height: 0.75vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(1.25vw); +} + +.blb2__back { + width: 25vw; + height: 0.75vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-25vw) translateY(-0.75vw); +} + +.blb2__right { + width: 2vw; + height: 0.75vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(25vw) translateX(-2vw) translateY(-0.75vw); +} + +.blb2__left { + width: 2vw; + height: 0.75vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw); +} + +.blb2__top { + width: 25vw; + height: 2vw; + transform-origin: top left; + transform: translateZ(0.75vw); +} + +.blb2__bottom { + width: 25vw; + height: 2vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-25vw); +} + +.blb2__front { + background-image: linear-gradient(to right, #7169a4, #9e99c1, #8f89b7); +} + +.blb2__front::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + bottom: 0; + border-bottom: 0.1vw solid rgba(251, 250, 254, 0.75); + background-image: linear-gradient(to top, rgba(40, 125, 210, 0.25), transparent); +} + +.blb2__back { + background-color: #383358; +} + +.blb2__right { + background-color: #151225; +} + +.blb2__left { + background-color: #9e99c1; +} + +.blb2__top { + background-image: linear-gradient(to left, #9e99c1, #fbfafe); +} + +.blb2__bottom { + background-color: #383358; +} + +/***************/ +/***************/ +.bocina-l, +.bocina-r { + position: absolute; + left: 1.5vw; + bottom: 5.25vw; + width: 0.75vw; + height: 1.5vw; + transform: translateZ(8vw); +} + +.bocina-l__front, +.bocina-r__front { + width: 0.75vw; + height: 6vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(-4.5vw); +} + +.bocina-l__back, +.bocina-r__back { + width: 0.75vw; + height: 6vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-0.75vw) translateY(-6vw); +} + +.bocina-l__right, +.bocina-r__right { + width: 1.5vw; + height: 6vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.75vw) translateX(-1.5vw) translateY(-6vw); +} + +.bocina-l__left, +.bocina-r__left { + width: 1.5vw; + height: 6vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-6vw); +} + +.bocina-l__top, +.bocina-r__top { + width: 0.75vw; + height: 1.5vw; + transform-origin: top left; + transform: translateZ(6vw); +} + +.bocina-l__bottom, +.bocina-r__bottom { + width: 0.75vw; + height: 1.5vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-0.75vw); +} + +.bocina-l__right, +.bocina-r__right { + background-image: radial-gradient(black, black); +} + +.bocina-l__top, +.bocina-r__top { + background-image: linear-gradient(to left, #d9d0f6, #9e99c1, #7169a4); +} + +.bocina-l__bottom, +.bocina-r__bottom { + background-color: #383358; +} + +.bocina-l__front { + background-image: linear-gradient(to right, #5189fb, #595388 30%, #b7a5ed); +} + +.bocina-l__back { + background-image: linear-gradient(to right, #383358, #232038); +} + +.bocina-l__back::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient(to right, rgba(81, 137, 251, 0.35) 65%, rgba(81, 137, 251, 0.95)); +} + +.bocina-l__left { + background-color: #282347; +} + +.bocina-l__left::before { + content: ""; + position: absolute; + top: -10%; + left: 20%; + width: 120%; + height: 120%; + background-image: linear-gradient(to left, rgba(7, 23, 39, 0.75), rgba(0, 0, 0, 0.75)); + filter: blur(0.5vw); +} + +.bocina-r { + top: 5.25vw; +} + +.bocina-r__front { + background-image: linear-gradient(to right, #383358, #0f0e17); +} + +.bocina-r__front::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient(to left, rgba(81, 137, 251, 0.35) 65%, rgba(81, 137, 251, 0.95)); +} + +.bocina-r__back { + background-image: linear-gradient(to right, #595388, #b7a5ed); +} + +.bocina-r__left { + background-color: #282347; +} + +.bocina-r__left::before { + content: ""; + position: absolute; + top: -10%; + left: -20%; + width: 120%; + height: 120%; + background-image: linear-gradient(to right, rgba(7, 23, 39, 0.75), rgba(0, 0, 0, 0.75)); + filter: blur(0.5vw); +} + +.repisa-t, +.repisa-b { + position: absolute; + left: 1.5vw; + top: 9vw; + width: 1.5vw; + height: 10vw; + transform: translateZ(16vw); +} + +.repisa-t__front, +.repisa-b__front { + width: 1.5vw; + height: 0.25vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(9.75vw); +} + +.repisa-t__back, +.repisa-b__back { + width: 1.5vw; + height: 0.25vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-1.5vw) translateY(-0.25vw); +} + +.repisa-t__right, +.repisa-b__right { + width: 10vw; + height: 0.25vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.5vw) translateX(-10vw) translateY(-0.25vw); +} + +.repisa-t__left, +.repisa-b__left { + width: 10vw; + height: 0.25vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.25vw); +} + +.repisa-t__top, +.repisa-b__top { + width: 1.5vw; + height: 10vw; + transform-origin: top left; + transform: translateZ(0.25vw); +} + +.repisa-t__bottom, +.repisa-b__bottom { + width: 1.5vw; + height: 10vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-1.5vw); +} + +.repisa-t__front, +.repisa-b__front { + background-color: #9e99c1; +} + +.repisa-t__back, +.repisa-b__back { + background-color: #fbfafe; +} + +.repisa-t__right, +.repisa-b__right { + background-color: #8079ae; +} + +.repisa-t__left, +.repisa-b__left { + background-color: #fbfafe; +} + +.repisa-t__top, +.repisa-b__top { + background-color: #d9d0f6; +} + +.repisa-t__top::before, +.repisa-b__top::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient(to right, rgba(6, 78, 224, 0.75), transparent); +} + +.repisa-t__bottom, +.repisa-b__bottom { + background-color: #383358; +} + +.repisa-t__bottom::before, +.repisa-b__bottom::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient(to right, rgba(6, 78, 224, 0.75), transparent); +} + +.repisa-b { + transform: translateZ(5vw); +} + +.tv { + position: absolute; + left: 1.51vw; + top: 8vw; + width: 0.5vw; + height: 12vw; + transform: translateZ(8vw); +} + +.tv__front { + width: 0.5vw; + height: 6vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(6vw); +} + +.tv__back { + width: 0.5vw; + height: 6vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-6vw); +} + +.tv__right { + width: 12vw; + height: 6vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-12vw) translateY(-6vw); +} + +.tv__left { + width: 12vw; + height: 6vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-6vw); +} + +.tv__top { + width: 0.5vw; + height: 12vw; + transform-origin: top left; + transform: translateZ(6vw); +} + +.tv__bottom { + width: 0.5vw; + height: 12vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-0.5vw); +} + +.tv__front { + background-color: #0b0c1f; +} + +.tv__back { + background-color: #0b0c1f; +} + +.tv__right { + background-color: #9cbcfc; + border: 0.125vw solid black; + animation: pantalla-tv 0.25s infinite alternate; +} + +.tv__right::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + box-shadow: 0.125vw 0.125vw 1vw rgba(81, 137, 251, 0.5), -0.125vw 0.125vw 1vw rgba(81, 137, 251, 0.5), + 0.125vw -0.125vw 1vw rgba(81, 137, 251, 0.5), -0.125vw -0.125vw 1vw rgba(81, 137, 251, 0.5); + background-image: url("https://img02.anheyu.com/adminuploads/1/2022/10/20/6351038493d46.gif"); + background-size: cover; + background-repeat: no-repeat; + background-position: bottom; + opacity: 0.8; +} + +.tv__left { + display: flex; + justify-content: center; + align-items: center; + background-color: #0b0c1f; +} + +.tv__left::before { + content: ""; + position: absolute; + width: 13vw; + height: 7vw; + background-image: radial-gradient(rgba(36, 112, 188, 0.95), rgba(56, 121, 250, 0.95)); + filter: blur(1.25vw); + animation: luz-tv 0.25s infinite alternate; +} + +.tv__top { + background-color: #0b0c1f; +} + +.tv__bottom { + background-color: #0b0c1f; +} + +.librero { + position: absolute; + left: 13vw; + top: 1vw; + width: 12vw; + height: 0.5vw; + transform: translateZ(7vw); +} + +.librero__front { + width: 12vw; + height: 0.25vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(1.25vw); +} + +.librero__back { + width: 12vw; + height: 0.25vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-12vw) translateY(-0.25vw); +} + +.librero__right { + width: 1.5vw; + height: 0.25vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(12vw) translateX(-1.5vw) translateY(-0.25vw); +} + +.librero__left { + width: 1.5vw; + height: 0.25vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.25vw); +} + +.librero__top { + width: 12vw; + height: 1.5vw; + transform-origin: top left; + transform: translateZ(0.25vw); +} + +.librero__bottom { + width: 12vw; + height: 1.5vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-12vw); +} + +.librero__front { + background-color: #9e99c1; +} + +.librero__back { + background-color: #383358; +} + +.librero__back::before { + content: ""; + position: absolute; + width: 100%; + height: 4vw; + border-radius: 50%; + background-image: radial-gradient(rgba(106, 154, 251, 0.7) 50%, rgba(32, 99, 167, 0.6), transparent); + filter: blur(1.25vw); +} + +.librero__right { + background-color: #383358; +} + +.librero__left { + background-color: #9e99c1; +} + +.librero__top { + background-color: #d9d0f6; +} + +.librero__top::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient(to bottom, rgba(31, 104, 249, 0.75), transparent); +} + +.librero__bottom { + background-color: #383358; +} + +.librero__bottom::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient(to bottom, rgba(31, 104, 249, 0.75), transparent); +} + +.libros { + position: absolute; +} + +.libro { + position: absolute; + top: 1vw; + width: 0.5vw; + height: 1vw; + transform: translateZ(7.25vw); +} + +.libro__front { + width: 0.5vw; + height: 1.5vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(-0.5vw); +} + +.libro__back { + width: 0.5vw; + height: 1.5vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-1.5vw); +} + +.libro__right { + width: 1vw; + height: 1.5vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-1vw) translateY(-1.5vw); +} + +.libro__left { + width: 1vw; + height: 1.5vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.5vw); +} + +.libro__top { + width: 0.5vw; + height: 1vw; + transform-origin: top left; + transform: translateZ(1.5vw); +} + +.libro__bottom { + width: 0.5vw; + height: 1vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-0.5vw); +} + +.libro__front { + background-image: linear-gradient(to bottom, #9e99c1, #8079ae); +} + +.libro__front::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient(to bottom, rgba(81, 137, 251, 0.4), transparent); +} + +.libro__back { + background-color: #fbfafe; +} + +.libro__right { + background-color: #645c98; +} + +.libro__right::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient(to bottom, rgba(81, 137, 251, 0.85), rgba(40, 125, 210, 0.35)); +} + +.libro__left { + background-color: #9e99c1; +} + +.libro__top { + background-color: #d9d0f6; +} + +.libro__top::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient(to bottom, rgba(81, 137, 251, 0.85), rgba(40, 125, 210, 0.35)); +} + +.libro__bottom { + background-color: #554d85; +} + +.libro:nth-of-type(1) { + left: 16vw; + transform-origin: left; + transform: translateZ(7.25vw) rotateZ(-10deg); +} + +.libro:nth-of-type(2) { + left: 17vw; + transform: translateZ(7.25vw) rotateZ(2deg); +} + +.libro:nth-of-type(3) { + left: 17.75vw; + transform: translateZ(7.25vw) rotateZ(5deg); +} + +.libro:nth-of-type(4) { + left: 19vw; + transform-origin: left; + transform: translateZ(7.25vw) rotateZ(10deg); +} + +.libro:nth-of-type(5) { + left: 20vw; + transform-origin: left; + transform: translateZ(7.25vw) rotateZ(10deg); +} + +.libro:nth-of-type(6) { + left: 23vw; + transform-origin: left; + transform: translateZ(7.25vw) rotateY(-90deg); +} + +.fotos { + position: absolute; +} + +.foto { + position: absolute; + width: 0.125vw; + height: 2vw; + left: 2vw; + top: 11vw; + transform: translateZ(5.26vw); +} + +.foto__front { + width: 0.125vw; + height: 1.125vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(1.125vw); +} + +.foto__back { + width: 0.125vw; + height: 1.125vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-0.125vw) translateY(-1.125vw); +} + +.foto__right { + width: 2.25vw; + height: 1.125vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.125vw) translateX(-2.25vw) translateY(-1.125vw); +} + +.foto__left { + width: 2.25vw; + height: 1.125vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.125vw); +} + +.foto__top { + width: 0.125vw; + height: 2.25vw; + transform-origin: top left; + transform: translateZ(1.125vw); +} + +.foto__bottom { + width: 0.125vw; + height: 2.25vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-0.125vw); +} + +.foto__front { + background-image: linear-gradient(to bottom, #9e99c1, #8079ae); +} + +.foto__front::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient(to bottom, rgba(81, 137, 251, 0.4), transparent); +} + +.foto__back { + background-color: #fbfafe; +} + +.foto__right { + display: flex; + justify-content: center; + align-items: center; + background-color: #8f89b7; + border: 0.15vw solid #1f2158; +} + +.foto__right::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: repeating-linear-gradient(to bottom, #9e99c1 0.1vw, #b7a5ed 0.2vw); +} + +.foto__left { + background-color: #9e99c1; +} + +.foto__top { + background-color: #d9d0f6; +} + +.foto__top::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient(to bottom, rgba(81, 137, 251, 0.85), rgba(40, 125, 210, 0.35)); +} + +.foto__bottom { + background-color: #595388; +} + +.foto__bottom::before { + content: ""; + position: absolute; + right: -100%; + width: 400%; + height: 100%; + background-color: rgba(11, 12, 31, 0.75); + filter: blur(0.15vw); +} + +.foto:nth-of-type(1) { + top: 10.5vw; + transform: translateZ(5.26vw) rotateZ(5deg); +} + +.foto:nth-of-type(2) { + top: 15vw; + transform: translateZ(5.26vw) rotateZ(-15deg); +} + +.cajas { + position: absolute; +} + +.caja { + position: absolute; + width: 1vw; + height: 1.5vw; + left: 2vw; + transform: translateZ(16.35vw); +} + +.caja__front { + width: 1vw; + height: 0.75vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(0.75vw); +} + +.caja__back { + width: 1vw; + height: 0.75vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-0.75vw); +} + +.caja__right { + width: 1.5vw; + height: 0.75vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-1.5vw) translateY(-0.75vw); +} + +.caja__left { + width: 1.5vw; + height: 0.75vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw); +} + +.caja__top { + width: 1vw; + height: 1.5vw; + transform-origin: top left; + transform: translateZ(0.75vw); +} + +.caja__bottom { + width: 1vw; + height: 1.5vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-1vw); +} + +.caja__front { + background-image: linear-gradient(to bottom, #9e99c1, #8079ae); +} + +.caja__front::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient(to bottom, rgba(81, 137, 251, 0.4), transparent); +} + +.caja__back { + background-color: #9e99c1; +} + +.caja__right { + background-color: #645c98; +} + +.caja__right::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient(to bottom, rgba(81, 137, 251, 0.85), rgba(40, 125, 210, 0.35)); +} + +.caja__left { + background-color: #9e99c1; +} + +.caja__top { + background-color: #d9d0f6; +} + +.caja__top::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient(to bottom, rgba(81, 137, 251, 0.85), rgba(40, 125, 210, 0.35)); +} + +.caja__bottom { + background-color: #595388; +} + +.caja__bottom::before { + content: ""; + position: absolute; + right: -50%; + width: 150%; + height: 120%; + background-color: rgba(31, 33, 88, 0.5); + filter: blur(0.15vw); +} + +.caja:nth-of-type(1) { + top: 11.6vw; +} + +.caja:nth-of-type(2) { + top: 13.5vw; +} + +.caja:nth-of-type(3) { + top: 17vw; +} + +.cuadro-l, +.cuadro-r { + position: absolute; + left: 13vw; + top: 1vw; + width: 5vw; + height: 0.5vw; + transform: translateZ(10vw); +} + +.cuadro-l__front, +.cuadro-r__front { + width: 5vw; + height: 7vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(-6.75vw); +} + +.cuadro-l__back, +.cuadro-r__back { + width: 5vw; + height: 7vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-5vw) translateY(-7vw); +} + +.cuadro-l__right, +.cuadro-r__right { + width: 0.25vw; + height: 7vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(5vw) translateX(-0.25vw) translateY(-7vw); +} + +.cuadro-l__left, +.cuadro-r__left { + width: 0.25vw; + height: 7vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-7vw); +} + +.cuadro-l__top, +.cuadro-r__top { + width: 5vw; + height: 0.25vw; + transform-origin: top left; + transform: translateZ(7vw); +} + +.cuadro-l__bottom, +.cuadro-r__bottom { + width: 5vw; + height: 0.25vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-5vw); +} + +.cuadro-l__front, +.cuadro-r__front { + background-repeat: no-repeat; + background-size: contain; + background-position: center; +} + +.cuadro-l__back, +.cuadro-r__back { + background-color: #383358; + box-shadow: 0.35vw 0.35vw 0.35vw rgba(81, 137, 251, 0.2), -0.35vw 0.35vw 0.35vw rgba(81, 137, 251, 0.2), + -0.35vw -0.35vw 0.35vw rgba(81, 137, 251, 0.2), 0.35vw -0.35vw 0.35vw rgba(81, 137, 251, 0.2); +} + +.cuadro-l__right, +.cuadro-r__right { + background-color: #383358; +} + +.cuadro-l__left, +.cuadro-r__left { + background-color: #9e99c1; +} + +.cuadro-l__top, +.cuadro-r__top { + background-color: #9e99c1; +} + +.cuadro-l__bottom, +.cuadro-r__bottom { + background-color: #383358; +} + +.cuadro-l__front { + background-image: url("https://img02.anheyu.com/adminuploads/1/2022/10/20/63510384967db.jpg"); + background-color: #d51e24; + border: 1vw solid #d51e24; +} + +.cuadro-l__front::before { + content: ""; + position: absolute; + top: -1vw; + left: -1vw; + width: 5vw; + height: 7vw; + background-origin: padding-box; + background-image: linear-gradient(to bottom, rgba(40, 125, 210, 0.15), rgba(40, 125, 210, 0.15)); +} + +.cuadro-r { + left: 20vw; +} + +.cuadro-r__front { + background-image: url("https://img02.anheyu.com/adminuploads/1/2022/10/20/6351038496f25.jpg"); + background-color: #0f1110; + border: 0.5vw solid #0f1110; +} + +.cuadro-r__front::before { + content: ""; + position: absolute; + top: -0.5vw; + left: -0.5vw; + width: 5vw; + height: 7vw; + background-origin: padding-box; + background-image: linear-gradient(to bottom, rgba(40, 125, 210, 0.15), rgba(40, 125, 210, 0.15)); +} + +.puerta-c { + position: absolute; + left: 3vw; + top: 1vw; + width: 8vw; + height: 0.5vw; + transform: translateZ(0.5vw); +} + +.puerta-c::before { + content: ""; + position: absolute; + width: 100%; + height: 200%; + background-color: rgba(0, 0, 0, 0.65); + filter: blur(0.5vw); +} + +.puerta { + position: absolute; + left: 0.5vw; + top: 0; + width: 7vw; + height: 0.5vw; +} + +.puerta__front { + width: 7vw; + height: 16vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(-15.75vw); +} + +.puerta__back { + width: 7vw; + height: 16vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-7vw) translateY(-16vw); +} + +.puerta__right { + width: 0.25vw; + height: 16vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(7vw) translateX(-0.25vw) translateY(-16vw); +} + +.puerta__left { + width: 0.25vw; + height: 16vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-16vw); +} + +.puerta__top { + width: 7vw; + height: 0.25vw; + transform-origin: top left; + transform: translateZ(16vw); +} + +.puerta__bottom { + width: 7vw; + height: 0.25vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-7vw); +} + +.puerta__front { + background-image: linear-gradient(to bottom, #0f1110, #121332); + border: 0.125vw solid #5189fb; +} + +.puerta__front::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: radial-gradient(transparent 50%, rgba(4, 61, 174, 0.25)); + box-shadow: 0.65vw 0.65vw 0.5vw rgba(81, 137, 251, 0.6), -0.65vw 0.65vw 0.5vw rgba(81, 137, 251, 0.6), + -0.65vw -0.65vw 0.5vw rgba(81, 137, 251, 0.6), 0.65vw -0.65vw 0.5vw rgba(81, 137, 251, 0.6); +} + +.puerta__front::after { + content: ""; + position: absolute; + top: 50%; + right: 0.75vw; + width: 1vw; + height: 0.25vw; + background-color: #9e99c1; + box-shadow: 0.125vw 0.125vw 0.25vw rgba(81, 137, 251, 0.6), -0.125vw 0.125vw 0.25vw rgba(81, 137, 251, 0.6), + -0.125vw -0.125vw 0.25vw rgba(81, 137, 251, 0.6), 0.125vw -0.125vw 0.25vw rgba(81, 137, 251, 0.6); +} + +.puerta-l, +.puerta-r { + position: absolute; + left: 0; + top: 0; + width: 0.5vw; + height: 0.5vw; +} + +.puerta-l__front, +.puerta-r__front { + width: 0.5vw; + height: 16vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(-15.5vw); +} + +.puerta-l__back, +.puerta-r__back { + width: 0.5vw; + height: 16vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-16vw); +} + +.puerta-l__right, +.puerta-r__right { + width: 0.5vw; + height: 16vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-0.5vw) translateY(-16vw); +} + +.puerta-l__left, +.puerta-r__left { + width: 0.5vw; + height: 16vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-16vw); +} + +.puerta-l__top, +.puerta-r__top { + width: 0.5vw; + height: 0.5vw; + transform-origin: top left; + transform: translateZ(16vw); +} + +.puerta-l__bottom, +.puerta-r__bottom { + width: 0.5vw; + height: 0.5vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-0.5vw); +} + +.puerta-l__front, +.puerta-r__front { + background-color: #121332; +} + +.puerta-l__back, +.puerta-r__back { + background-color: #0b0c1f; +} + +.puerta-l__right, +.puerta-r__right { + background-color: #0b0c1f; +} + +.puerta-l__left, +.puerta-r__left { + background-color: #121332; +} + +.puerta-l__bottom, +.puerta-r__bottom { + background-color: #0b0c1f; +} + +.puerta-r { + left: calc(100% - 0.5vw); +} + +.puerta-t { + left: 0; + top: 0; + width: 8vw; + height: 0.5vw; + transform: translateZ(16vw); +} + +.puerta-t__front { + width: 8vw; + height: 0.5vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(0vw); +} + +.puerta-t__back { + width: 8vw; + height: 0.5vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-8vw) translateY(-0.5vw); +} + +.puerta-t__right { + width: 0.5vw; + height: 0.5vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(8vw) translateX(-0.5vw) translateY(-0.5vw); +} + +.puerta-t__left { + width: 0.5vw; + height: 0.5vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw); +} + +.puerta-t__top { + width: 8vw; + height: 0.5vw; + transform-origin: top left; + transform: translateZ(0.5vw); +} + +.puerta-t__bottom { + width: 8vw; + height: 0.5vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-8vw); +} + +.puerta-t__front { + background-color: #121332; +} + +.puerta-t__back { + background-color: #0b0c1f; +} + +.puerta-t__right { + background-color: #0b0c1f; +} + +.puerta-t__left { + background-color: #121332; +} + +.puerta-t__top { + background-color: #1f2158; +} + +.puerta-t__bottom { + background-color: #0b0c1f; +} + +.muro { + position: absolute; + left: 1vw; + top: 6vw; + width: 0.5vw; + height: 16vw; + transform: translateZ(0.51vw); +} + +.muro__front { + width: 0.5vw; + height: 18vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(-2vw); +} + +.muro__back { + width: 0.5vw; + height: 18vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-18vw); +} + +.muro__right { + width: 16vw; + height: 18vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-16vw) translateY(-18vw); +} + +.muro__left { + width: 16vw; + height: 18vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-18vw); +} + +.muro__top { + width: 0.5vw; + height: 16vw; + transform-origin: top left; + transform: translateZ(18vw); +} + +.muro__bottom { + width: 0.5vw; + height: 16vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-0.5vw); +} + +.muro__front { + background-color: #0b0c1f; +} + +.muro__back { + background-color: #0b0c1f; +} + +.muro__right { + display: flex; + justify-content: center; + background-image: radial-gradient(circle, #1f2158, #0b0c1f); + overflow: hidden; +} + +.muro__right::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient( + to bottom, + rgba(40, 125, 210, 0.25), + transparent 30%, + transparent 70%, + rgba(40, 125, 210, 0.15) + ); +} + +.muro__right::after { + content: ""; + position: absolute; + bottom: 0; + left: 5%; + width: 90%; + height: 25%; + background-image: linear-gradient(to bottom, rgba(4, 5, 13, 0.75), rgba(4, 5, 13, 0.95)); + filter: blur(0.75vw); +} + +.muro__left { + background-color: #0b0c1f; + box-shadow: 0.5vw 0.5vw 0.6vw rgba(81, 137, 251, 0.3), 0.5vw -0.5vw 0.6vw rgba(81, 137, 251, 0.3), + -0.5vw 0.5vw 0.6vw rgba(81, 137, 251, 0.3), -0.5vw -0.5vw 0.6vw rgba(81, 137, 251, 0.3); +} + +.muro__top { + background-color: #0b0c1f; +} + +.muro__top::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + bottom: 0; + background-image: linear-gradient(to left, rgba(40, 125, 210, 0.5), rgba(81, 137, 251, 0.25)); +} + +.muro__bottom { + background-color: #0b0c1f; +} + +.muro__bottom::before { + content: ""; + position: absolute; + top: 0; + right: 0; + width: 5vw; + height: 100%; + background-image: linear-gradient(to left, #0b0c1f, transparent 50%); + transform-origin: right bottom; + transform: skewY(-20deg); + filter: blur(0.25vw); +} + +.sillon-c { + position: absolute; + right: 2vw; + bottom: 6vw; + width: 6vw; + height: 16vw; + transform: translateZ(0.5vw); +} + +.sillon-c::before { + content: ""; + position: absolute; + top: -10%; + left: -10%; + width: 120%; + height: 120%; + background-color: rgba(11, 12, 31, 0.85); + filter: blur(0.75vw); +} + +.sillon-b { + position: absolute; + left: 0; + top: 1vw; + width: 6vw; + height: 14vw; +} + +.sillon-b__front { + width: 6vw; + height: 3vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(11vw); +} + +.sillon-b__back { + width: 6vw; + height: 3vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-3vw); +} + +.sillon-b__right { + width: 14vw; + height: 3vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-14vw) translateY(-3vw); +} + +.sillon-b__left { + width: 14vw; + height: 3vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-3vw); +} + +.sillon-b__top { + width: 6vw; + height: 14vw; + transform-origin: top left; + transform: translateZ(3vw); +} + +.sillon-b__bottom { + width: 6vw; + height: 14vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-6vw); +} + +.sillon-b__front { + background-color: #121332; +} + +.sillon-b__back { + background-color: #0b0c1f; +} + +.sillon-b__right { + background-color: #0b0c1f; +} + +.sillon-b__left { + background-image: linear-gradient(to bottom, #121332, #0b0c1f); +} + +.sillon-b__left::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient(to bottom, rgba(40, 125, 210, 0.1), transparent); +} + +.sillon-b__top { + background-image: linear-gradient(to right, #1f2158, #121332); + border-left: 0.1vw solid rgba(158, 153, 193, 0.5); +} + +.sillon-b__top::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient(to right, rgba(40, 125, 210, 0.25), transparent); +} + +.sillon-b__bottom { + background-color: #0b0c1f; +} + +.sillon-l, +.sillon-r { + position: absolute; + left: 0; + bottom: 0; + width: 6vw; + height: 1vw; +} + +.sillon-l__front, +.sillon-r__front { + width: 6vw; + height: 4.5vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(-3.5vw); +} + +.sillon-l__back, +.sillon-r__back { + width: 6vw; + height: 4.5vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-4.5vw); +} + +.sillon-l__right, +.sillon-r__right { + width: 1vw; + height: 4.5vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-1vw) translateY(-4.5vw); +} + +.sillon-l__left, +.sillon-r__left { + width: 1vw; + height: 4.5vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-4.5vw); +} + +.sillon-l__top, +.sillon-r__top { + width: 6vw; + height: 1vw; + transform-origin: top left; + transform: translateZ(4.5vw); +} + +.sillon-l__bottom, +.sillon-r__bottom { + width: 6vw; + height: 1vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-6vw); +} + +.sillon-l__front, +.sillon-r__front { + background-image: linear-gradient(to bottom, #121332, #0b0c1f); +} + +.sillon-l__back, +.sillon-r__back { + background-color: #0b0c1f; +} + +.sillon-l__right, +.sillon-r__right { + background-image: linear-gradient(to bottom, #0b0c1f, black); +} + +.sillon-l__left, +.sillon-r__left { + background-image: linear-gradient(to bottom, #121332, #0b0c1f); +} + +.sillon-l__top, +.sillon-r__top { + background-image: linear-gradient(to right, #1f2158, #0f102b); + border-bottom: 0.1vw solid rgba(158, 153, 193, 0.5); +} + +.sillon-l__top::before, +.sillon-r__top::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient(to right, rgba(40, 125, 210, 0.75), transparent); +} + +.sillon-l__bottom, +.sillon-r__bottom { + background-color: #0b0c1f; +} + +.sillon-r { + top: 0; +} + +.sillon-t { + position: absolute; + right: 0; + top: 1vw; + width: 1vw; + height: 1vw; + transform-origin: right; + transform: rotateY(7deg); +} + +.sillon-t__front { + width: 1vw; + height: 6.5vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(7.5vw); +} + +.sillon-t__back { + width: 1vw; + height: 6.5vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-6.5vw); +} + +.sillon-t__right { + width: 14vw; + height: 6.5vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-14vw) translateY(-6.5vw); +} + +.sillon-t__left { + width: 14vw; + height: 6.5vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-6.5vw); +} + +.sillon-t__top { + width: 1vw; + height: 14vw; + transform-origin: top left; + transform: translateZ(6.5vw); +} + +.sillon-t__bottom { + width: 1vw; + height: 14vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-1vw); +} + +.sillon-t__front { + background-image: linear-gradient(to bottom, #0b0c1f, #070814); +} + +.sillon-t__back { + background-image: linear-gradient(to bottom, #0b0c1f, #0b0c1f); +} + +.sillon-t__right { + background-image: linear-gradient(to bottom, #0b0c1f, black); +} + +.sillon-t__left { + background-color: #121332; +} + +.sillon-t__top { + background-image: linear-gradient(to right, #1f2158, #0f102b); + border-bottom: 0.1vw solid rgba(158, 153, 193, 0.5); +} + +.sillon-t__top::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient(to right, rgba(40, 125, 210, 0.5), transparent); +} + +.sillon-t__bottom { + background-color: #0b0c1f; +} + +.mesa-c { + position: absolute; + left: 7vw; + top: 9.5vw; + width: 10vw; + height: 9vw; + transform: translateZ(0.5vw); +} + +.mesa-shadow { + position: absolute; + width: 100%; + height: 100%; + border-radius: 10%; + background-color: rgba(11, 12, 31, 0.95); + filter: blur(1vw); + transform: translateZ(0); +} + +.mesa { + position: absolute; + left: 0; + top: 0; + width: 10vw; + height: 9vw; + transform: translateZ(2vw); +} + +.mesa__front { + width: 10vw; + height: 0.5vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(8.5vw); +} + +.mesa__back { + width: 10vw; + height: 0.5vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-10vw) translateY(-0.5vw); +} + +.mesa__right { + width: 9vw; + height: 0.5vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(10vw) translateX(-9vw) translateY(-0.5vw); +} + +.mesa__left { + width: 9vw; + height: 0.5vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw); +} + +.mesa__top { + width: 10vw; + height: 9vw; + transform-origin: top left; + transform: translateZ(0.5vw); +} + +.mesa__bottom { + width: 10vw; + height: 9vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-10vw); +} + +.mesa__front { + background-image: linear-gradient(to right, #0b0c1f, black); +} + +.mesa__front::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: linear-gradient(45deg, rgba(81, 137, 251, 0.125), rgba(180, 205, 253, 0.25), transparent 55%); +} + +.mesa__back { + background-color: #0b0c1f; +} + +.mesa__right { + background-color: black; +} + +.mesa__left { + background-color: #121332; +} + +.mesa__top { + background-image: linear-gradient(45deg, #0e0f27, #04050d); + overflow: hidden; +} + +.mesa__top::before { + content: ""; + position: absolute; + bottom: 0; + width: 50%; + height: 50%; + background-image: linear-gradient(45deg, rgba(81, 137, 251, 0.5), rgba(251, 250, 254, 0.125) 50%, transparent 55%); + filter: blur(0.5vw); +} + +.mesa__top::after { + content: ""; + position: absolute; + left: 2vw; + top: 2vw; + width: 20%; + height: 50%; + border-radius: 50%; + background-color: rgba(40, 125, 210, 0.079); + transform: rotateZ(-40deg); + filter: blur(0.75vw); +} + +.mesa__bottom { + background-color: #0b0c1f; +} + +.mesa-p { + position: absolute; + width: 0.25vw; + height: 0.25vw; +} + +.mesa-p__front { + width: 0.25vw; + height: 1.75vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(-1.5vw); +} + +.mesa-p__back { + width: 0.25vw; + height: 1.75vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-0.25vw) translateY(-1.75vw); +} + +.mesa-p__right { + width: 0.25vw; + height: 1.75vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.25vw) translateX(-0.25vw) translateY(-1.75vw); +} + +.mesa-p__left { + width: 0.25vw; + height: 1.75vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vw); +} + +.mesa-p__top { + width: 0.25vw; + height: 0.25vw; + transform-origin: top left; + transform: translateZ(1.75vw); +} + +.mesa-p__bottom { + width: 0.25vw; + height: 0.25vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-0.25vw); +} + +.mesa-p__front { + background-color: #0b0c1f; +} + +.mesa-p__back { + background-color: #0b0c1f; +} + +.mesa-p__right { + background-color: black; +} + +.mesa-p__left { + background-color: #121332; +} + +.mesa-p__top { + background-color: #1f2158; +} + +.mesa-p__bottom { + background-color: #0b0c1f; +} + +.mesa-p__bottom::before { + content: ""; + position: absolute; + width: 600%; + height: 200%; + top: 0; + right: 0; + border-radius: 10%; + transform: translateZ(-0.1vw); + background-color: rgba(0, 0, 0, 0.75); + filter: blur(0.35vw); +} + +.mesa-p:nth-of-type(1) { + left: 0.5vw; + top: 0.5vw; +} + +.mesa-p:nth-of-type(2) { + right: 0.5vw; + top: 0.5vw; +} + +.mesa-p:nth-of-type(3) { + left: 0.5vw; + bottom: 0.5vw; +} + +.mesa-p:nth-of-type(4) { + right: 0.5vw; + bottom: 0.5vw; +} + +.tablet { + position: absolute; + left: 13vw; + top: 12vw; + width: 2vw; + height: 2.5vw; + transform: translateZ(3.01vw) rotateZ(15deg); +} + +.tablet__front { + width: 2vw; + height: 0.125vw; + transform-origin: bottom left; + transform: rotateX(-90deg) translateZ(2.375vw); +} + +.tablet__back { + width: 2vw; + height: 0.125vw; + transform-origin: top left; + transform: rotateX(-90deg) rotateY(180deg) translateX(-2vw) translateY(-0.125vw); +} + +.tablet__right { + width: 2.5vw; + height: 0.125vw; + transform-origin: top left; + transform: rotateY(90deg) rotateZ(-90deg) translateZ(2vw) translateX(-2.5vw) translateY(-0.125vw); +} + +.tablet__left { + width: 2.5vw; + height: 0.125vw; + transform-origin: top left; + transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.125vw); +} + +.tablet__top { + width: 2vw; + height: 2.5vw; + transform-origin: top left; + transform: translateZ(0.125vw); +} + +.tablet__bottom { + width: 2vw; + height: 2.5vw; + transform-origin: top left; + transform: rotateY(180deg) translateX(-2vw); +} + +.tablet__front { + background-color: #8079ae; +} + +.tablet__back { + background-color: #383358; +} + +.tablet__right { + background-color: #383358; +} + +.tablet__left { + background-color: #9e99c1; +} + +.tablet__top { + background-color: #83abfc; + border: 0.2vw solid rgba(81, 137, 251, 0.25); + animation: pantalla-tablet 0.25s infinite; +} + +.tablet__bottom { + background-color: black; + box-shadow: 0.25vw 0.25vw 0.5vw rgba(24, 74, 124, 0.75), -0.25vw 0.25vw 0.5vw rgba(24, 74, 124, 0.75), + -0.25vw -0.25vw 0.5vw rgba(24, 74, 124, 0.75), 0.25vw -0.25vw 0.5vw rgba(24, 74, 124, 0.75); +} + +/**********************/ +/**********************/ +@keyframes pantalla-tablet { + from { + background-color: #6a9afb; + } +} + +@keyframes pantalla-tv { + from { + background-color: #6a9afb; + box-shadow: 0.125vw 0.125vw 0vw rgba(81, 137, 251, 0), -0.125vw 0.125vw 0vw rgba(81, 137, 251, 0), + 0.125vw -0.125vw 0vw rgba(81, 137, 251, 0), -0.125vw -0.125vw 0vw rgba(81, 137, 251, 0); + } +} + +@keyframes luz-tv { + from { + background-image: radial-gradient(rgba(36, 112, 188, 0.8), rgba(56, 121, 250, 0.8)); + } +} + +div#runtime { + width: 180px; + margin: auto; + color: #fff; + padding-inline: 5px; + border-radius: 10px; + background-color: rgba(0, 0, 0, 0.7); +} +#workboard { + font-size: 12px; +} +[data-theme="dark"] div#runtime { + color: #28b4c8; + box-shadow: 0 0 5px rgba(28, 69, 218, 0.71); + animation: flashlight 1s linear infinite alternate; +} +#ghbdages .github-badge img { + height: 20px; + max-width: 150px; + border-radius: 4px; + pointer-events: none; +} +#workboard img.boardsign { + width: 100%; + max-width: 130px; + border-radius: 0px; +} +@-moz-keyframes flashlight { + from { + box-shadow: 0 0 5px #1478d2; + } + to { + box-shadow: 0 0 2px #1478d2; + } +} +@-webkit-keyframes flashlight { + from { + box-shadow: 0 0 5px #1478d2; + } + to { + box-shadow: 0 0 2px #1478d2; + } +} +@-o-keyframes flashlight { + from { + box-shadow: 0 0 5px #1478d2; + } + to { + box-shadow: 0 0 2px #1478d2; + } +} +@keyframes flashlight { + from { + box-shadow: 0 0 5px #1478d2; + } + to { + box-shadow: 0 0 2px #1478d2; + } +} + +.author-content.author-content-item { + height: 19rem; + background-color: var(--anzhiyu-main); + background-position: left 28%; + background-repeat: no-repeat; + background-size: cover; + color: var(--anzhiyu-white); + overflow: hidden; + margin-top: 0; + background-image: linear-gradient(-45deg, var(--anzhiyu-main), #0f4667, #2a6973 150%, #67044d); + background-size: 400%; + animation: gradient 15s ease infinite; +} + +#skills-tags-group-all { + display: flex; + transform: rotate(0); + transition: 0.3s; +} +#skills-tags-group-all .tags-group-wrapper { + margin-top: 40px; + display: flex; + flex-wrap: nowrap; + animation: rowup 60s linear infinite; +} +#skills-tags-group-all .tags-group-icon-pair { + margin-left: 1rem; +} +#skills-tags-group-all .tags-group-icon { + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 66px; + font-weight: 700; + box-shadow: var(--anzhiyu-shadow-blackdeep); + width: 120px; + height: 120px; + border-radius: 30px; +} +#skills-tags-group-all .tags-group-icon img { + width: 60px; + margin: 0 auto !important; +} +[data-theme="dark"] #skills-tags-group-all .tags-group-icon img { + filter: none; +} +#skills-tags-group-all .tags-group-icon-pair .tags-group-icon:nth-child(even) { + margin-top: 1rem; + transform: translate(-60px); +} + +#skills-tags-group-all .etc { + margin-right: 10px; + margin-top: 10px; +} + +@keyframes rowup { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-50%); + } +} + +#article-container .tag-Link { + background: var(--anzhiyu-secondbg); + border-radius: 8px !important; + display: flex; + border: var(--style-border); + flex-direction: column; + padding: 0.5rem 1rem !important; + border-width: 1px !important; + margin: 1rem 0; +} + +#article-container .tag-Link:hover { + border: var(--style-border-hover); +} + +#article-container .tag-Link .tag-link-tips { + border-bottom: var(--style-border); + padding-bottom: 4px; + font-size: 12px; + color: var(--anzhiyu-gray); + font-weight: normal; +} + +#article-container .tag-Link:hover .tag-link-tips { + color: var(--anzhiyu-white); +} + +#article-container .tag-Link .tag-link-bottom { + display: flex; + margin-top: 0.5rem; + align-items: center; + justify-content: space-around; +} + +#article-container .tag-Link .tag-link-bottom .tag-link-left { + width: 60px; + min-width: 60px; + height: 60px; + background-size: cover; + border-radius: var(--anzhiyu-border-radius); + background-color: var(--anzhiyu-card-bg); + display: flex; + align-items: center; + justify-content: center; +} +#article-container .tag-Link .tag-link-bottom .tag-link-left i { + margin: 0; + padding: 0; + margin: auto; + font-size: 24px; + color: var(--anzhiyu-fontcolor); +} + +#article-container .tag-Link .tag-link-bottom .tag-link-right { + margin-left: 1rem; + max-width: calc(100% - 76px - 1rem); +} + +#article-container .tag-Link .tag-link-bottom .tag-link-right .tag-link-title { + font-size: 1rem; + line-height: 1.2; +} + +#article-container .tag-Link .tag-link-bottom .tag-link-right .tag-link-sitename { + font-size: 0.7rem; + color: var(--anzhiyu-gray); + font-weight: normal; + margin-top: 4px; +} + +#article-container .tag-Link:hover .tag-link-bottom .tag-link-right .tag-link-sitename { + color: var(--anzhiyu-white); +} + +#article-container .tag-Link .tag-link-bottom i { + margin-left: auto; +} + +.site-card-group .site-card .info { + margin-top: 0; +} +.site-card-group > a { + width: calc(100% / 4 - 0.5rem); + height: 150px; + position: relative; + display: block; + margin: 0.5rem 0.25rem; + float: left; + overflow: hidden; + padding: 0; + border-radius: 8px; + transition: all 0.3s ease 0s, transform cubic-bezier(0.71, 0.15, 0.16, 1.15) 0.6s; + box-shadow: none; + border: var(--style-border) !important; +} + +.site-card-group > a .wrapper { + position: relative; +} + +.site-card-group > a .cover { + width: 100%; + -webkit-transition: -webkit-transform 0.5s ease-out; + -moz-transition: -moz-transform 0.5s ease-out; + -o-transition: -o-transform 0.5s ease-out; + -ms-transition: -ms-transform 0.5s ease-out; + transition: transform 0.5s ease-out; +} + +.site-card-group > a .info, +.site-card-group > a .wrapper .cover { + position: absolute; + top: 0; + left: 0; +} + +.site-card-group > a .info { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + width: 100%; + height: 100%; + overflow: hidden; + border-radius: 3px; + background-color: rgba(255, 255, 255, 0.7); + -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; + -moz-transition: -moz-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; + -o-transition: -o-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; + -ms-transition: -ms-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; + transition: transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; +} + +.site-card-group > a .info img { + position: relative; + top: 19px; + width: 80px; + height: 80px; + border-radius: 50%; + -webkit-box-shadow: 0 0 10px rgb(0 0 0 / 30%); + box-shadow: 0 0 10px rgb(0 0 0 / 30%); + z-index: 1; + text-align: center; + pointer-events: none; +} + +.site-card-group > a .info span { + padding: 20px 10% 60px 10%; + font-size: 16px; + width: 100%; + text-align: center; + -webkit-box-shadow: 0 0 10px rgb(0 0 0 / 30%); + box-shadow: 0 0 10px rgb(0 0 0 / 30%); + background-color: rgba(255, 255, 255, 0.7); + color: var(--font-color); + white-space: nowrap; + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; +} + +.site-card-group .site-card:hover { + border-color: var(--anzhiyu-main) !important; + background-color: var(--anzhiyu-main) !important; + -webkit-box-shadow: var(--anzhiyu-shadow-theme) !important; + box-shadow: var(--anzhiyu-shadow-theme) !important; +} +.site-card-group > a:hover .wrapper img { + -webkit-transform: scale(1.2); + -moz-transform: scale(1.2); + -o-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); +} + +.site-card-group > a .cover { + width: 100%; + -webkit-transition: -webkit-transform 0.5s ease-out; + -moz-transition: -moz-transform 0.5s ease-out; + -o-transition: -o-transform 0.5s ease-out; + -ms-transition: -ms-transform 0.5s ease-out; + transition: transform 0.5s ease-out; +} +.site-card-group > a .wrapper img { + height: 150px; + pointer-events: none; +} +.site-card-group .site-card .wrapper img { + -webkit-transition: -webkit-transform 0.5s ease-out !important; + -moz-transition: -moz-transform 0.5s ease-out !important; + -o-transition: -o-transform 0.5s ease-out !important; + -ms-transition: -ms-transform 0.5s ease-out !important; + transition: transform 0.5s ease-out !important; +} +.site-card-group > a .wrapper .fadeIn { + -webkit-animation: coverIn 0.8s ease-out forwards; + -moz-animation: coverIn 0.8s ease-out forwards; + -o-animation: coverIn 0.8s ease-out forwards; + -ms-animation: coverIn 0.8s ease-out forwards; + animation: coverIn 0.8s ease-out forwards; +} + +.site-card-group > a:hover .info { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -o-transform: translateY(-100%); + -ms-transform: translateY(-100%); + transform: translateY(-100%); +} + diff --git a/css/var.css b/css/var.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/dailyPhoto/index.html b/dailyPhoto/index.html new file mode 100644 index 0000000000..b95d2afc6b --- /dev/null +++ b/dailyPhoto/index.html @@ -0,0 +1,342 @@ +日常生活 | WaterBoat的博客
    加载头像

    日常生活

    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/equipment/index.html b/equipment/index.html new file mode 100644 index 0000000000..963823a4f6 --- /dev/null +++ b/equipment/index.html @@ -0,0 +1,341 @@ +我的装备 | WaterBoat的博客
    加载头像

    我的装备

    好物
    实物装备推荐
    跟 安知鱼 一起享受科技带来的乐趣

    生产力

    提升自己生产效率的硬件设备
    MacBook Pro 2021 14 英寸
    MacBook Pro 2021 14 英寸
    M1 16G / 512TB
    屏幕显示效果好、色彩准确、对比度强、性能强劲、续航优秀。可以用来开发和设计。
    查看文章
    redmi K60
    redmi K60
    黑色 / 512G
    超瓷晶面板，玻璃背板搭配铝金属边框，曲线优美的圆角设计，mini大小正好一只手就抓住，深得我心，唯一缺点大概就是续航不够。
    详情

    出行

    用来出行的实物及设备
    Apple Watch Series 8
    Apple Watch Series 8
    黑色
    始终为我的健康放哨，深夜弹出站立提醒，不过确实有效的提高了我的运动频率，配合apple全家桶还是非常棒的产品，缺点依然是续航。
    详情
    NATIONAL GEOGRAPHIC双肩包
    NATIONAL GEOGRAPHIC双肩包
    黑色
    国家地理黑色大包，正好装下16寸 Macbook Pro，并且背起来很舒适，底部自带防雨罩也好用，各种奇怪的小口袋深得我心。
    详情
    NATIONAL GEOGRAPHIC学生书包🎒
    NATIONAL GEOGRAPHIC学生书包🎒
    红白色
    国家地理黑色大包，冰冰🧊同款，颜值在线且实用。
    详情
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/essay/index.html b/essay/index.html new file mode 100644 index 0000000000..b05cc0d91a --- /dev/null +++ b/essay/index.html @@ -0,0 +1,341 @@ +即刻短文 | WaterBoat的博客
    加载头像

    即刻短文

    即刻短文
    咸鱼的日常生活。
    随时随地，分享生活

    • 高强度学习中....

    • 大伟哥:技术宅拯救世界真的很酷!!!

      链接

    • 今天在深圳去阳光国风认识了一位桂林老表,2333

    • JOJO是真的好看！

      链接
    - 只展示最近30条短文 -
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000..cd8205bc37 Binary files /dev/null and b/favicon.ico differ diff --git a/img/404.jpg b/img/404.jpg new file mode 100644 index 0000000000..4d2270827a Binary files /dev/null and b/img/404.jpg differ diff --git a/img/512.png b/img/512.png new file mode 100644 index 0000000000..c38a1c05be Binary files /dev/null and b/img/512.png differ diff --git a/img/algolia.svg b/img/algolia.svg new file mode 100644 index 0000000000..fd1569187a --- /dev/null +++ b/img/algolia.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/img/comment_bg.png b/img/comment_bg.png new file mode 100644 index 0000000000..3b0d5d5369 Binary files /dev/null and b/img/comment_bg.png differ diff --git a/img/default_cover.jpg b/img/default_cover.jpg new file mode 100644 index 0000000000..297f5ca3c7 Binary files /dev/null and b/img/default_cover.jpg differ diff --git a/img/favicon.ico b/img/favicon.ico new file mode 100644 index 0000000000..cd8205bc37 Binary files /dev/null and b/img/favicon.ico differ diff --git a/img/friend_404.gif b/img/friend_404.gif new file mode 100644 index 0000000000..8b2de5e795 Binary files /dev/null and b/img/friend_404.gif differ diff --git a/img/loading.gif b/img/loading.gif new file mode 100644 index 0000000000..e17ef6e322 Binary files /dev/null and b/img/loading.gif differ diff --git a/img/siteicon/16.png b/img/siteicon/16.png new file mode 100644 index 0000000000..16afd7ed57 Binary files /dev/null and b/img/siteicon/16.png differ diff --git a/img/siteicon/32.png b/img/siteicon/32.png new file mode 100644 index 0000000000..180fd76e0b Binary files /dev/null and b/img/siteicon/32.png differ diff --git a/img/siteicon/apple-icon-180.png b/img/siteicon/apple-icon-180.png new file mode 100644 index 0000000000..2007e6da96 Binary files /dev/null and b/img/siteicon/apple-icon-180.png differ diff --git a/img/siteicon/manifest-icon-192.maskable.png b/img/siteicon/manifest-icon-192.maskable.png new file mode 100644 index 0000000000..a4d7056ae4 Binary files /dev/null and b/img/siteicon/manifest-icon-192.maskable.png differ diff --git a/img/siteicon/manifest-icon-512.maskable.png b/img/siteicon/manifest-icon-512.maskable.png new file mode 100644 index 0000000000..2a24339f3b Binary files /dev/null and b/img/siteicon/manifest-icon-512.maskable.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000000..eee4a6cc88 --- /dev/null +++ b/index.html @@ -0,0 +1,441 @@ +WaterBoat的博客 - 正因你我生于繁华，弥足之花方显珍贵
    加载头像
    Solidity 龟速入门教程
    Solidity
    最新未读
    Solidity 龟速入门教程
    发表于更新于 Solidity 区块链 教程
    Solidity 入门教程Solidity 是什么 + +Solidity 是一门面向合约的、为实现智能合约而创建的高级编程语言。这门语言受到了 C++，Python 和 Javascript 语言的影响，设计的目的是能在以太坊虚拟机（EVM）上运行。 +Solidity 是静态类型语言，支持继承、库和复杂的用户定义类型等特性。 +开发工具Remixremix是以太坊官方推荐的智能合约开发IDE（集成开发环境），适合新手，可以在浏览器中快速部署测试智能合约，你不需要在本地安装任何程序。 +网址：remix.ethereum.org +进入remix，我们可以看到最左边的菜单有三个按钮，分别对应文件（写代码的地方），编译（跑代码），部署（部署到链上）。我们点新建（Create New File）按钮，就可以创建一个空白的solidity合约 + +我们来编写一段代码 +1234567// SPDX-License-Identifier: MIT // 不写这个编辑器会警告,但是不影响运行pragma solidity ^0.8.0; // 指定编译器版本 不允许小于 0.8.0 或大于 0.9.0的编译器 ...
    Cypress 使用指南
    前端
    未读
    Cypress 使用指南
    发表于更新于 Cypress 测试
    什么是 CypressCypress 是一个现代化的前端端到端（End-to-End，E2E）测试框架。它被设计用于对 Web 应用程序进行自动化测试，可以模拟用户在真实环境中与应用程序的交互行为。 +以下是 Cypress 的一些关键特点和优势： + +简单易用: Cypress 具有简洁而直观的 API，使得编写和维护测试用例非常容易。 +强大的调试能力: Cypress 提供了丰富的调试工具，开发人员可以通过断点、控制台日志和实时命令行等方式方便地调试测试用例。 +可见即可信: Cypress 在测试过程中会记录并生成视频，可以可视化地查看每个测试用例的执行过程，方便回放和排查问题。 + +为什么要用 Cypress? +JavaScript 技术栈: Cypress 是以 JavaScript 为技术栈编写的，而我们团队 BCS 端都是使用 JavaScript 技术栈为主，切换为以 JavaScript 为主的自动化测试框架是一件低成本的事情。 +简化测试流程: Cypress 提供了一个全面的测试解决方案，可以覆盖从用户界面到后端服务器的整个应用程序。它集成了测试框架、断言库和模拟工具，使得 ...
    npm 别名---让小明变成小红
    npm
    未读
    npm 别名---让小明变成小红
    发表于更新于 npm
    12345npm i lodash@npm:wuhu # 这样就把 lodash 的名称配置成了 wuhu# 实际使用一般来说 node-sass 是业界毒瘤,用 dart-sass 就可以替换掉 node-sassnpm install node-sass@npm:dart-sass# 如果你使用的是 yarnyarn add node-sass@yarn:dart-sass +
    发布-订阅模式
    前端
    设计模式
    JavaScript
    未读
    发布-订阅模式
    发表于更新于 JavaScript
    什么是发布-订阅模式以我们使用过的 documeng.body.addEventListener(“click”,function(){}) 为例，这样的就是发布-订阅模式的具体实现。我们订阅了 documeng.body 上的 click 事件，当被点击的时候 body 节点便会向订阅者发布者消息。 +如果用生活中的例子举例，那就是我们订阅微信公众号，公众号发送消息，订阅的用户就会接收到消息。 +基于以上的例子，我们总结出发布订阅模式的三要素： + +一个订阅者 +一个发布者 +一个处理 订阅和发布的中间人 + +接下来让我们来实现一个发布-订阅模式。我们规定 listen-订阅 trigger-发布 -remove 取消订阅 +一个简单的发布订阅模式调用的形式如下: +123456salesOffices.listen(function (price) { console.log("价格", price);});salesOffices.trigger(100);salesOffices.remove(100); + +具体实现如下: +12345678910111 ...
    Vue Cli 配置
    未读
    Vue Cli 配置
    发表于更新于 Vue
    引入 cdnvue.config.js +12345678910111213141516171819202122232425262728293031323334353637const isProduction = process.env.NODE_ENV === "production";const cdn = { // 开发环境 dev: { css: [], js: [], }, // 生产环境 build: { css: ["//lib.baomitu.com/swiper/7.4.1/swiper-bundle.css"], js: [ "//lib.baomitu.com/vue/3.2.26/vue.cjs.js", "//lib.baomitu.com/vuex/4.0.0/vuex.cjs.min.js", "//lib.baomitu.com/vue-router/4.0.0/v ...
    Vue3-Setup语法糖
    未读
    Vue3-Setup语法糖
    发表于更新于 Vue
    <script setup></script> 是一种编译时语法糖，用于在单文件组件中使用组合式 API，如果你同时使用单文件组件和组合式 API，建议使用该语法。 +它与普通语法相比，代码更加简洁、性能更加强悍、更好的 TS 支持。 +1npm install -g @vue/cli + +1234567891011121314<script setup>// 此处代码将会被编译为 setup 函数代码// 也就是说此处代码将会在组件每次创建实例时执行// 在内部声明的顶级变量和函数都可以在模板中你直接使用const msg = "Hello Vue3 setup";function log() { console.log(msg);}</script><template> <div @click="log">{{ msg }}</div></template> + +12345678910< ...
    JavaScript 高级
    JavaScript
    未读
    JavaScript 高级
    发表于更新于 JavaScript
    01.call, apply 和 bind 的区别call 的使用方式：123456789101112131415161718192021222324252627//#region call// 定义一个对象let character = { name: "派蒙", weapon: [], // 得到一把武器 getWeapon: function (weapon, weapon2) { this.weapon = [weapon, weapon2]; },};let character2 = { name: "行秋", weapon: [],};console.log(character);// 调用方法获取了一把护摩character.getWeapon("护摩", "薙草之稻光");console.log(character);// character2也想得到一把武器,但是没有这个方法获得.character1表示可以把 ...
    JavaScript 小技巧
    JavaScript
    未读
    JavaScript 小技巧
    发表于更新于 JavaScript
    1.sleep 延迟函数1234567891011121314function sleep(delay) { var start = new Date().getTime(); while (new Date().getTime() - start < delay) { continue; }}function test() { console.log("111"); sleep(2000); console.log("222");}test(); + +2.获取 URL 参数1234decodeURI("%E5%95%8A%E5%93%88%E5%93%88"); // 解码中文// window.location.search 获取 URL 参数let params = new URLSearchParams("?project=js&type=1").get("type");console.l ...
    Nuxt 笔记
    未读
    Nuxt 笔记
    发表于更新于 Vue Nuxt
    Nuxt 是什么?Nuxt.js 是一个基于 Vue.js 的通用应用框架。 +通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。 +我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。 +Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。 +除此之外，我们还提供了一种命令叫：nuxt generate ，为基于 Vue.js 的应用提供生成对应的静态站点的功能。 +我们相信这个命令所提供的功能，是向开发集成各种微服务（Microservices）的 Web 应用迈开的新一步。 +作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。 +目录结构Nuxt.js 的默认应用目录架构提供了良好的代码分层结构，适用于开发或大或小的应用。当然，你也可以根据自己的偏好组织应用代码。 +pages 目录Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由 ...
    React-hooks
    未读
    React-hooks
    发表于更新于 React
    什么是 hooks?Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 +我们先来看一个例子,这是传统的 class 组件的 +12345678910111213141516171819import React from "react";class index extends React.component { state = { msg: "你好", }; updateMsg = () => { this.setState({ msg: "真好", }); }; render() { <div> <span>{this.state.msg}</span> <button onClick={this.updateMsg} ...
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/js/anzhiyu/ai_abstract.js b/js/anzhiyu/ai_abstract.js new file mode 100644 index 0000000000..e018047bdf --- /dev/null +++ b/js/anzhiyu/ai_abstract.js @@ -0,0 +1,438 @@ +(function () { + const { + randomNum, + basicWordCount, + btnLink, + key: AIKey, + Referer: AIReferer, + gptName, + switchBtn, + mode: initialMode, + } = GLOBAL_CONFIG.postHeadAiDescription; + + const { title, postAI, pageFillDescription } = GLOBAL_CONFIG_SITE; + + let lastAiRandomIndex = -1; + let animationRunning = true; + let mode = initialMode; + let refreshNum = 0; + let prevParam; + let audio = null; + let isPaused = false; + let summaryID = null; + + const post_ai = document.querySelector(".post-ai-description"); + const aiTitleRefreshIcon = post_ai.querySelector(".ai-title .anzhiyufont.anzhiyu-icon-arrow-rotate-right"); + let aiReadAloudIcon = post_ai.querySelector(".anzhiyu-icon-circle-dot"); + const explanation = post_ai.querySelector(".ai-explanation"); + + let aiStr = ""; + let aiStrLength = ""; + let delayInit = 600; + let indexI = 0; + let indexJ = 0; + let timeouts = []; + let elapsed = 0; + + const observer = createIntersectionObserver(); + const aiFunctions = [introduce, aiTitleRefreshIconClick, aiRecommend, aiGoHome]; + + const aiBtnList = post_ai.querySelectorAll(".ai-btn-item"); + const filteredHeadings = Array.from(aiBtnList).filter(heading => heading.id !== "go-tianli-blog"); + filteredHeadings.forEach((item, index) => { + item.addEventListener("click", () => { + aiFunctions[index](); + }); + }); + + document.getElementById("ai-tag").addEventListener("click", onAiTagClick); + aiTitleRefreshIcon.addEventListener("click", onAiTitleRefreshIconClick); + document.getElementById("go-tianli-blog").addEventListener("click", () => { + window.open(btnLink, "_blank"); + }); + aiReadAloudIcon.addEventListener("click", readAloud); + + async function readAloud() { + if (!summaryID) { + anzhiyu.snackbarShow("摘要还没加载完呢，请稍后。。。"); + return; + } + aiReadAloudIcon = post_ai.querySelector(".anzhiyu-icon-circle-dot"); + aiReadAloudIcon.style.opacity = "0.2"; + if (audio && !isPaused) { + audio.pause(); + isPaused = true; + aiReadAloudIcon.style.opacity = "1"; + aiReadAloudIcon.style.animation = ""; + aiReadAloudIcon.style.cssText = "animation: ''; opacity: 1;cursor: pointer;"; + return; + } + + if (audio && isPaused) { + audio.play(); + isPaused = false; + aiReadAloudIcon.style.cssText = "animation: breathe .5s linear infinite; opacity: 0.2;cursor: pointer"; + return; + } + + const options = { + key: AIKey, + Referer: AIReferer, + }; + const requestParams = new URLSearchParams({ + key: options.key, + id: summaryID, + }); + + const requestOptions = { + method: "GET", + headers: { + "Content-Type": "application/json", + Referer: options.Referer, + }, + }; + + try { + const response = await fetch(`https://summary.tianli0.top/audio?${requestParams}`, requestOptions); + if (response.status === 403) { + console.error("403 refer与key不匹配。"); + } else if (response.status === 500) { + console.error("500 系统内部错误"); + } else { + const audioBlob = await response.blob(); + const audioURL = URL.createObjectURL(audioBlob); + audio = new Audio(audioURL); + audio.play(); + aiReadAloudIcon.style.cssText = "animation: breathe .5s linear infinite; opacity: 0.2;cursor: pointer"; + audio.addEventListener("ended", () => { + audio = null; + aiReadAloudIcon.style.opacity = "1"; + aiReadAloudIcon.style.animation = ""; + }); + } + } catch (error) { + console.error("请求发生错误❎"); + } + } + if (switchBtn) { + document.getElementById("ai-Toggle").addEventListener("click", changeShowMode); + } + + aiAbstract(); + showAiBtn(); + + function createIntersectionObserver() { + return new IntersectionObserver( + entries => { + let isVisible = entries[0].isIntersecting; + animationRunning = isVisible; + if (animationRunning) { + delayInit = indexI === 0 ? 200 : 20; + timeouts[1] = setTimeout(() => { + if (indexJ) { + indexI = 0; + indexJ = 0; + } + if (indexI === 0) { + explanation.innerHTML = aiStr.charAt(0); + } + requestAnimationFrame(animate); + }, delayInit); + } + }, + { threshold: 0 } + ); + } + + function animate(timestamp) { + if (!animationRunning) { + return; + } + if (!animate.start) animate.start = timestamp; + elapsed = timestamp - animate.start; + if (elapsed >= 20) { + animate.start = timestamp; + if (indexI < aiStrLength - 1) { + let char = aiStr.charAt(indexI + 1); + let delay = /[,.，。!?！？]/.test(char) ? 150 : 20; + if (explanation.firstElementChild) { + explanation.removeChild(explanation.firstElementChild); + } + explanation.innerHTML += char; + let div = document.createElement("div"); + div.className = "ai-cursor"; + explanation.appendChild(div); + indexI++; + if (delay === 150) { + post_ai.querySelector(".ai-explanation .ai-cursor").style.opacity = "0.2"; + } + if (indexI === aiStrLength - 1) { + observer.disconnect(); + explanation.removeChild(explanation.firstElementChild); + } + timeouts[0] = setTimeout(() => { + requestAnimationFrame(animate); + }, delay); + } + } else { + requestAnimationFrame(animate); + } + } + + function clearTimeouts() { + if (timeouts.length) { + timeouts.forEach(item => { + if (item) { + clearTimeout(item); + } + }); + } + } + + function startAI(str, df = true) { + indexI = 0; + indexJ = 1; + clearTimeouts(); + animationRunning = false; + elapsed = 0; + observer.disconnect(); + explanation.innerHTML = df ? "生成中. . ." : "请等待. . ."; + aiStr = str; + aiStrLength = aiStr.length; + observer.observe(post_ai); + } + + async function aiAbstract(num = basicWordCount) { + if (mode === "tianli") { + await aiAbstractTianli(num); + } else { + aiAbstractLocal(); + } + } + + async function aiAbstractTianli(num) { + indexI = 0; + indexJ = 1; + clearTimeouts(); + animationRunning = false; + elapsed = 0; + observer.disconnect(); + + num = Math.max(10, Math.min(2000, num)); + const options = { + key: AIKey, + Referer: AIReferer, + }; + const truncateDescription = (title + pageFillDescription).trim().substring(0, num); + + const requestBody = { + key: options.key, + content: truncateDescription, + url: location.href, + }; + + const requestOptions = { + method: "POST", + headers: { + "Content-Type": "application/json", + Referer: options.Referer, + }, + body: JSON.stringify(requestBody), + }; + console.info(truncateDescription.length); + try { + let animationInterval = null; + let summary; + if (animationInterval) clearInterval(animationInterval); + animationInterval = setInterval(() => { + const animationText = "生成中" + ".".repeat(indexJ); + explanation.innerHTML = animationText; + indexJ = (indexJ % 3) + 1; + }, 500); + const response = await fetch(`https://summary.tianli0.top/`, requestOptions); + let result; + if (response.status === 403) { + result = { + summary: "403 refer与key不匹配。", + }; + } else if (response.status === 500) { + result = { + summary: "500 系统内部错误", + }; + } else { + result = await response.json(); + } + + summary = result.summary.trim(); + summaryID = result.id; + + setTimeout(() => { + aiTitleRefreshIcon.style.opacity = "1"; + }, 300); + if (summary) { + startAI(summary); + } else { + startAI("摘要获取失败!!!请检查Tianli服务是否正常!!!"); + } + clearInterval(animationInterval); + } catch (error) { + console.error(error); + explanation.innerHTML = "发生异常" + error; + } + } + + function aiAbstractLocal() { + const strArr = postAI.split(",").map(item => item.trim()); + if (strArr.length !== 1) { + let randomIndex = Math.floor(Math.random() * strArr.length); + while (randomIndex === lastAiRandomIndex) { + randomIndex = Math.floor(Math.random() * strArr.length); + } + lastAiRandomIndex = randomIndex; + startAI(strArr[randomIndex]); + } else { + startAI(strArr[0]); + } + setTimeout(() => { + aiTitleRefreshIcon.style.opacity = "1"; + }, 600); + } + + function aiRecommend() { + indexI = 0; + indexJ = 1; + clearTimeouts(); + animationRunning = false; + elapsed = 0; + explanation.innerHTML = "生成中. . ."; + aiStr = ""; + aiStrLength = ""; + observer.disconnect(); + timeouts[2] = setTimeout(() => { + explanation.innerHTML = recommendList(); + }, 600); + } + + function recommendList() { + let thumbnail = document.querySelectorAll(".relatedPosts-list a"); + if (!thumbnail.length) { + const cardRecentPost = document.querySelector(".card-widget.card-recent-post"); + if (!cardRecentPost) return ""; + + thumbnail = cardRecentPost.querySelectorAll(".aside-list-item a"); + + let list = ""; + for (let i = 0; i < thumbnail.length; i++) { + const item = thumbnail[i]; + list += `
    ${ + i + 1 + }：${item.title}
    `; + } + + return `很抱歉，无法找到类似的文章，你也可以看看本站最新发布的文章：
    ${list}
    `; + } + + let list = ""; + for (let i = 0; i < thumbnail.length; i++) { + const item = thumbnail[i]; + list += `
    推荐${ + i + 1 + }：${item.title}
    `; + } + + return `推荐文章：
    ${list}
    `; + } + + function aiGoHome() { + startAI("正在前往博客主页...", false); + timeouts[2] = setTimeout(() => { + if (window.pjax) { + pjax.loadUrl("/"); + } else { + location.href = location.origin; + } + }, 1000); + } + + function introduce() { + if (mode == "tianli") { + startAI("我是文章辅助AI: TianliGPT，点击下方的按钮，让我生成本文简介、推荐相关文章等。"); + } else { + startAI(`我是文章辅助AI: ${gptName} GPT，点击下方的按钮，让我生成本文简介、推荐相关文章等。`); + } + } + + function aiTitleRefreshIconClick() { + aiTitleRefreshIcon.click(); + } + + function onAiTagClick() { + if (mode === "tianli") { + post_ai.querySelectorAll(".ai-btn-item").forEach(item => (item.style.display = "none")); + document.getElementById("go-tianli-blog").style.display = "block"; + startAI( + "你好，我是Tianli开发的摘要生成助理TianliGPT，是一个基于GPT-4的生成式AI。我在这里只负责摘要的预生成和显示，你无法与我直接沟通，如果你也需要一个这样的AI摘要接口，可以在下方购买。" + ); + } else { + post_ai.querySelectorAll(".ai-btn-item").forEach(item => (item.style.display = "block")); + document.getElementById("go-tianli-blog").style.display = "none"; + startAI( + `你好，我是本站摘要生成助理${gptName} GPT，是一个基于GPT-4的生成式AI。我在这里只负责摘要的预生成和显示，你无法与我直接沟通。` + ); + } + } + + function onAiTitleRefreshIconClick() { + const truncateDescription = (title + pageFillDescription).trim().substring(0, basicWordCount); + + aiTitleRefreshIcon.style.opacity = "0.2"; + aiTitleRefreshIcon.style.transitionDuration = "0.3s"; + aiTitleRefreshIcon.style.transform = "rotate(" + 360 * refreshNum + "deg)"; + if (truncateDescription.length <= basicWordCount) { + let param = truncateDescription.length - Math.floor(Math.random() * randomNum); + while (param === prevParam || truncateDescription.length - param === prevParam) { + param = truncateDescription.length - Math.floor(Math.random() * randomNum); + } + prevParam = param; + aiAbstract(param); + } else { + let value = Math.floor(Math.random() * randomNum) + basicWordCount; + while (value === prevParam || truncateDescription.length - value === prevParam) { + value = Math.floor(Math.random() * randomNum) + basicWordCount; + } + aiAbstract(value); + } + refreshNum++; + } + + function changeShowMode() { + mode = mode === "tianli" ? "local" : "tianli"; + if (mode === "tianli") { + document.getElementById("ai-tag").innerHTML = "TianliGPT"; + + aiReadAloudIcon.style.opacity = "1"; + aiReadAloudIcon.style.cursor = "pointer"; + } else { + aiReadAloudIcon.style.opacity = "0"; + aiReadAloudIcon.style.cursor = "auto"; + if ((document.getElementById("go-tianli-blog").style.display = "block")) { + document.querySelectorAll(".ai-btn-item").forEach(item => (item.style.display = "block")); + document.getElementById("go-tianli-blog").style.display = "none"; + } + document.getElementById("ai-tag").innerHTML = gptName + " GPT"; + } + aiAbstract(); + } + + function showAiBtn() { + if (mode === "tianli") { + document.getElementById("ai-tag").innerHTML = "TianliGPT"; + } else { + document.getElementById("ai-tag").innerHTML = gptName + " GPT"; + } + } +})(); diff --git a/js/anzhiyu/comment_barrage.js b/js/anzhiyu/comment_barrage.js new file mode 100644 index 0000000000..b7e456fe3c --- /dev/null +++ b/js/anzhiyu/comment_barrage.js @@ -0,0 +1,179 @@ +if (document.querySelector(".comment-barrage")) { + var commentBarrageConfig = { + maxBarrage: GLOBAL_CONFIG.commentBarrageConfig.maxBarrage, + barrageTime: GLOBAL_CONFIG.commentBarrageConfig.barrageTime, + twikooUrl: GLOBAL_CONFIG.twikooEnvId, + accessToken: GLOBAL_CONFIG.commentBarrageConfig.accessToken, + mailMd5: GLOBAL_CONFIG.commentBarrageConfig.mailMd5, + pageUrl: window.location.pathname, + barrageTimer: [], + barrageList: [], + barrageIndex: 0, + dom: document.querySelector(".comment-barrage"), + }; + var commentInterval = null; + var hoverOnCommentBarrage = false; + + document.querySelector(".comment-barrage").addEventListener("mouseenter", function () { + hoverOnCommentBarrage = true; + }); + document.querySelector(".comment-barrage").addEventListener("mouseleave", function () { + hoverOnCommentBarrage = false; + }); + + function initCommentBarrage() { + if (!commentBarrageConfig.dom) return; + + var data = JSON.stringify({ + event: "COMMENT_GET", + "commentBarrageConfig.accessToken": commentBarrageConfig.accessToken, + url: commentBarrageConfig.pageUrl, + }); + var xhr = new XMLHttpRequest(); + xhr.withCredentials = true; + xhr.addEventListener("readystatechange", function () { + if (this.readyState === 4 && this.responseText) { + commentBarrageConfig.barrageList = commentLinkFilter(JSON.parse(this.responseText).data); + commentBarrageConfig.dom.innerHTML = ""; + } + }); + xhr.open("POST", commentBarrageConfig.twikooUrl); + xhr.setRequestHeader("Content-Type", "application/json"); + xhr.send(data); + + clearInterval(commentInterval); + commentInterval = null; + + commentInterval = setInterval(() => { + if (commentBarrageConfig.barrageList.length && !hoverOnCommentBarrage) { + popCommentBarrage(commentBarrageConfig.barrageList[commentBarrageConfig.barrageIndex]); + commentBarrageConfig.barrageIndex += 1; + commentBarrageConfig.barrageIndex %= commentBarrageConfig.barrageList.length; + } + if ( + commentBarrageConfig.barrageTimer.length > + (commentBarrageConfig.barrageList.length > commentBarrageConfig.maxBarrage + ? commentBarrageConfig.maxBarrage + : commentBarrageConfig.barrageList.length) && + !hoverOnCommentBarrage + ) { + removeCommentBarrage(commentBarrageConfig.barrageTimer.shift()); + } + }, commentBarrageConfig.barrageTime); + } + + function commentLinkFilter(data) { + data.sort((a, b) => { + return a.created - b.created; + }); + let newData = []; + data.forEach(item => { + newData.push(...getCommentReplies(item)); + }); + return newData; + } + + function getCommentReplies(item) { + if (item.replies) { + let replies = [item]; + item.replies.forEach(item => { + replies.push(...getCommentReplies(item)); + }); + return replies; + } else { + return []; + } + } + + function popCommentBarrage(data) { + let barrage = document.createElement("div"); + barrage.className = "comment-barrage-item"; + barrage.innerHTML = ` +
    + + ${data.mailMd5 === commentBarrageConfig.mailMd5 ? "博主" : "热评"} + +
    ${data.nick}
    + + +
    + + ${data.comment} + + `; + + // 获取anzhiyu标签内的所有pre元素 + let anzhiyuPres = barrage.querySelectorAll("anzhiyu pre"); + + // 遍历每个pre元素，将其替换为"【代码】" + anzhiyuPres.forEach(pre => { + let codePlaceholder = document.createElement("span"); + codePlaceholder.innerText = "【代码】"; + pre.parentNode.replaceChild(codePlaceholder, pre); + }); + + // 获取anzhiyu标签内的所有图片元素 + let anzhiyuImages = barrage.querySelectorAll("anzhiyu img"); + + // 遍历每个图片元素，将其替换为"【图片】"，但排除带有class=tk-owo-emotion的图片 + anzhiyuImages.forEach(image => { + if (!image.classList.contains("tk-owo-emotion")) { + image.style.display = "none"; // 隐藏图片 + let placeholder = document.createElement("span"); + placeholder.innerText = "【图片】"; + image.parentNode.replaceChild(placeholder, image); + } + }); + commentBarrageConfig.barrageTimer.push(barrage); + commentBarrageConfig.dom.append(barrage); + } + + function removeCommentBarrage(barrage) { + barrage.className = "comment-barrage-item out"; + + setTimeout(() => { + if (commentBarrageConfig.dom && commentBarrageConfig.dom.contains(barrage)) { + commentBarrageConfig.dom.removeChild(barrage); + } + }, 1000); + } + + // 自动隐藏 + const commentEntryCallback = entries => { + const commentBarrage = document.querySelector(".comment-barrage"); + const postComment = document.getElementById("post-comment"); + + entries.forEach(entry => { + if (postComment && commentBarrage && document.body.clientWidth > 768) { + commentBarrage.style.bottom = entry.isIntersecting ? `-${commentBarrageConfig.maxBarrage * 200}px` : "0"; + } + }); + }; + // 创建IntersectionObserver实例 + const observer = new IntersectionObserver(commentEntryCallback, { + root: null, + rootMargin: "0px", + threshold: 0, + }); + // 监视目标元素 + const postCommentTarget = document.getElementById("post-comment"); + if (postCommentTarget) { + observer.observe(postCommentTarget); + } + + initCommentBarrage(); + + if (localStorage.getItem("commentBarrageSwitch") !== "false") { + document.querySelector(".comment-barrage").style.display = "flex"; + document.querySelector(".menu-commentBarrage-text").textContent = "关闭热评"; + } else { + document.querySelector(".comment-barrage").style.display = "none"; + document.querySelector(".menu-commentBarrage-text").textContent = "显示热评"; + } + + document.addEventListener("pjax:send", function () { + clearInterval(commentInterval); + }); +} diff --git a/js/anzhiyu/people.js b/js/anzhiyu/people.js new file mode 100644 index 0000000000..bf90d9b663 --- /dev/null +++ b/js/anzhiyu/people.js @@ -0,0 +1,271 @@ +"use strict"; +function _toConsumableArray(e) { + return _arrayWithoutHoles(e) || _iterableToArray(e) || _unsupportedIterableToArray(e) || _nonIterableSpread(); +} + +function _nonIterableSpread() { + throw new TypeError( + "Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method." + ); +} + +function _unsupportedIterableToArray(e, r) { + if (e) { + if ("string" == typeof e) return _arrayLikeToArray(e, r); + var t = Object.prototype.toString.call(e).slice(8, -1); + return ( + "Object" === t && e.constructor && (t = e.constructor.name), + "Map" === t || "Set" === t + ? Array.from(e) + : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) + ? _arrayLikeToArray(e, r) + : void 0 + ); + } +} + +function _iterableToArray(e) { + if (("undefined" != typeof Symbol && null != e[Symbol.iterator]) || null != e["@@iterator"]) return Array.from(e); +} + +function _arrayWithoutHoles(e) { + if (Array.isArray(e)) return _arrayLikeToArray(e); +} + +function _arrayLikeToArray(e, r) { + (null == r || r > e.length) && (r = e.length); + for (var t = 0, a = new Array(r); t < r; t++) a[t] = e[t]; + return a; +} + +function _classCallCheck(e, r) { + if (!(e instanceof r)) throw new TypeError("Cannot call a class as a function"); +} + +function _defineProperties(e, r) { + for (var t = 0; t < r.length; t++) { + var a = r[t]; + (a.enumerable = a.enumerable || !1), + (a.configurable = !0), + "value" in a && (a.writable = !0), + Object.defineProperty(e, a.key, a); + } +} + +function _createClass(e, r, t) { + return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), e; +} +var peopleConfig = { + src: GLOBAL_CONFIG.peoplecanvas.img, + rows: 15, + cols: 7, + }, + randomRange = function (e, r) { + return e + Math.random() * (r - e); + }, + randomIndex = function (e) { + return 0 | randomRange(0, e.length); + }, + removeFromArray = function (e, r) { + return e.splice(r, 1)[0]; + }, + removeItemFromArray = function (e, r) { + return removeFromArray(e, e.indexOf(r)); + }, + removeRandomFromArray = function (e) { + return removeFromArray(e, randomIndex(e)); + }, + getRandomFromArray = function (e) { + return e[0 | randomIndex(e)]; + }, + resetPeep = function (e) { + var r, + t, + a = e.stage, + n = e.peep, + o = 0.5 < Math.random() ? 1 : -1, + i = 100 - 250 * gsap.parseEase("power2.in")(Math.random()), + s = a.height - n.height + i; + return ( + 1 == o ? ((r = -n.width), (t = a.width), (n.scaleX = 1)) : ((r = a.width + n.width), (t = 0), (n.scaleX = -1)), + (n.x = r), + (n.y = s), + { + startX: r, + startY: (n.anchorY = s), + endX: t, + } + ); + }, + normalWalk = function (e) { + var r = e.peep, + t = e.props, + a = (t.startX, t.startY), + n = t.endX, + o = gsap.timeline(); + return ( + o.timeScale(randomRange(0.5, 1.5)), + o.to( + r, + { + duration: 10, + x: n, + ease: "none", + }, + 0 + ), + o.to( + r, + { + duration: 0.25, + repeat: 40, + yoyo: !0, + y: a - 10, + }, + 0 + ), + o + ); + }, + walks = [normalWalk], + Peep = (function () { + function a(e) { + var r = e.image, + t = e.rect; + _classCallCheck(this, a), + (this.image = r), + this.setRect(t), + (this.x = 0), + (this.y = 0), + (this.anchorY = 0), + (this.scaleX = 1), + (this.walk = null); + } + return ( + _createClass(a, [ + { + key: "setRect", + value: function (e) { + (this.rect = e), + (this.width = e[2]), + (this.height = e[3]), + (this.drawArgs = [this.image].concat(_toConsumableArray(e), [0, 0, this.width, this.height])); + }, + }, + { + key: "render", + value: function (e) { + e.save(), + e.translate(this.x, this.y), + e.scale(this.scaleX, 1), + e.drawImage.apply(e, _toConsumableArray(this.drawArgs)), + e.restore(); + }, + }, + ]), + a + ); + })(), + img = document.createElement("img"); +(img.onload = init), (img.src = peopleConfig.src); +let peoplecanvasEl = document.getElementById("peoplecanvas"); + +let ctx = peoplecanvasEl ? peoplecanvasEl.getContext("2d") : undefined, + stage = { + width: 0, + height: 0, + }, + allPeeps = [], + availablePeeps = [], + crowd = []; + +function init() { + if (!peoplecanvasEl) return; + createPeeps(), resize(), gsap.ticker.add(render), window.addEventListener("resize", resize); +} +document.addEventListener("pjax:success", e => { + peoplecanvasEl = document.getElementById("peoplecanvas"); + if (peoplecanvasEl) { + (ctx = peoplecanvasEl ? peoplecanvasEl.getContext("2d") : undefined), window.removeEventListener("resize", resize); + gsap.ticker.remove(render); + setTimeout(() => { + if (!peoplecanvasEl) return; + resize(), gsap.ticker.add(render), window.addEventListener("resize", resize); + }, 300); + } +}); + +function createPeeps() { + for ( + var e = peopleConfig.rows, + r = peopleConfig.cols, + t = e * r, + a = img.naturalWidth / e, + n = img.naturalHeight / r, + o = 0; + o < t; + o++ + ) + allPeeps.push( + new Peep({ + image: img, + rect: [(o % e) * a, ((o / e) | 0) * n, a, n], + }) + ); +} + +function resize() { + if (peoplecanvasEl && peoplecanvasEl.clientWidth != 0) { + (stage.width = peoplecanvasEl.clientWidth), + (stage.height = peoplecanvasEl.clientHeight), + (peoplecanvasEl.width = stage.width * devicePixelRatio), + (peoplecanvasEl.height = stage.height * devicePixelRatio), + crowd.forEach(function (e) { + e.walk.kill(); + }), + (crowd.length = 0), + (availablePeeps.length = 0), + availablePeeps.push.apply(availablePeeps, allPeeps), + initCrowd(); + } +} + +function initCrowd() { + for (; availablePeeps.length; ) addPeepToCrowd().walk.progress(Math.random()); +} + +function addPeepToCrowd() { + var e = removeRandomFromArray(availablePeeps), + r = getRandomFromArray(walks)({ + peep: e, + props: resetPeep({ + peep: e, + stage: stage, + }), + }).eventCallback("onComplete", function () { + removePeepFromCrowd(e), addPeepToCrowd(); + }); + return ( + (e.walk = r), + crowd.push(e), + crowd.sort(function (e, r) { + return e.anchorY - r.anchorY; + }), + e + ); +} + +function removePeepFromCrowd(e) { + removeItemFromArray(crowd, e), availablePeeps.push(e); +} + +function render() { + if (!peoplecanvasEl) return; + (peoplecanvasEl.width = peoplecanvasEl.width), + ctx.save(), + ctx.scale(devicePixelRatio, devicePixelRatio), + crowd.forEach(function (e) { + e.render(ctx); + }), + ctx.restore(); +} diff --git a/js/anzhiyu/random_friends_post.js b/js/anzhiyu/random_friends_post.js new file mode 100644 index 0000000000..d717ec212e --- /dev/null +++ b/js/anzhiyu/random_friends_post.js @@ -0,0 +1,215 @@ +var fdata = { + apiurl: GLOBAL_CONFIG.friends_vue_info.apiurl, + defaultFish: 100, + hungryFish: 100, +}; +//可通过 var fdataUser 替换默认值 +if (typeof fdataUser !== "undefined") { + for (var key in fdataUser) { + if (fdataUser[key]) { + fdata[key] = fdataUser[key]; + } + } +} +var randomPostTimes = 0; +var randomPostWorking = false; +var randomPostTips = [ + "钓到了绝世好文！", + "在河边打了个喷嚏，吓跑了", + "你和小伙伴抢夺着", + "你击败了巨龙，在巢穴中发现了", + "挖掘秦始皇坟时找到了", + "在路边闲逛的时候随手买了一个", + "从学校班主任那拿来了孩子上课偷偷看的", + "你的同桌无情的从你的语文书中撕下了那篇你最喜欢的", + "考古学家近日发现了", + "外星人降临地球学习地球文化，落地时被你塞了", + "从图书馆顶层的隐秘角落里发现了闪着金光的", + "徒弟修炼走火入魔，为师立刻掏出了", + "在大山中唱山歌，隔壁的阿妹跑来了，带着", + "隔壁家的孩子数学考了满分，都是因为看了", + "隔壁家的孩子英语考了满分，都是因为看了", + "小米研发了全新一代MIX手机，据说灵感", + "修炼渡劫成功，还好提前看了", + "库克坐上了苹果CEO的宝座，因为他面试的时候看了", + "阿里巴巴大喊芝麻开门，映入眼帘的就是", + "师傅说练武要先炼心，然后让我好生研读", + "科考队在南极大陆发现了被冰封的", + "飞机窗户似乎被一张纸糊上了，仔细一看是", + "历史上满写的仁义道德四个字，透过字缝里却全是", + "十几年前的录音机似乎还能够使用，插上电发现正在播的是", + "新版语文书拟增加一篇熟读并背诵的", + "经调查，99%的受访者都没有背诵过", + "今年的高考满分作文是", + "唐僧揭开了佛祖压在五指山上的", + "科学家发现能够解决衰老的秘密，就是每日研读", + "英特尔发布了全新的至强处理器，其芯片的制造原理都是", + "新的iPhone产能很足，新的进货渠道是", + "今年亩产突破了八千万斤，多亏了", + "陆隐一统天上宗，在无数祖境高手的目光下宣读了", + "黑钻风跟白钻风说道，吃了唐僧肉能长生不老，他知道是因为看了", + "上卫生间没带纸，直接提裤跑路也不愿意玷污手中", + "种下一篇文章就会产生很多很多文章，我种下了", + "三十年河东，三十年河西，莫欺我没有看过", + "踏破铁血无觅处，得来全靠", + "今日双色球中了两千万，预测全靠", + "因为卷子上没写名字，老师罚抄", + "为了抗议世间的不公，割破手指写下了", + "在艺术大街上被贴满了相同的纸，走近一看是", + "这区区迷阵岂能难得住我？其实能走出来多亏了", + "今日被一篇文章顶上了微博热搜，它是", + "你送给乞丐一个暴富秘籍，它是", + "UZI一个走A拿下五杀，在事后采访时说他当时回想起了", + "科学家解刨了第一个感染丧尸病毒的人，发现丧尸抗体存在于", + "如果你有梦想的话，就要努力去看", + "决定我们成为什么样人的，不是我们的能力，而是是否看过", + "有信心不一定会成功，没信心就去看", + "你真正是谁并不重要，重要的是你看没看过", + "玄天境重要的是锻体，为师赠你此书，好好修炼去吧，这是", + "上百祖境高手在天威湖大战三天三夜为了抢夺", + "这化仙池水乃上古真仙对后人的考校，要求熟读并背诵", + "庆氏三千年根基差点竟被你小子毁于一旦，能够被我拯救全是因为我看了", + "我就是神奇宝贝大师！我这只皮卡丘可是", + "我就是神奇宝贝大师！我这只小火龙可是", + "我就是神奇宝贝大师！我这只可达鸭可是", + "我就是神奇宝贝大师！我这只杰尼龟可是", + "上古遗迹中写道，只要习得此书，便得成功。你定睛一看，原来是", + "奶奶的，玩阴的是吧，我就是双料特工代号穿山甲，", + "你的背景太假了，我的就逼真多了，学到这个技术全是因为看了", + "我是云南的，云南怒江的，怒江芦水市，芦水市六库，六库傈僳族，傈僳族是", + "我真的栓Q了，我真的会谢如果你看", + "你已经习得退退退神功，接下来的心法已经被记录在", + "人生无常大肠包小肠，小肠包住了", + "你抽到了普通文章，它是", + "你收到了稀有文章，它是", + "你抽到了金色普通文章，它是", + "你抽到了金色稀有文章，它是", + "你抽到了传说文章！它是", + "哇！金色传说！你抽到了金色传说文章，它是", + "报告！侦察兵说在前往300米有一个男子在偷偷看一本书，上面赫然写着", + "芷莲姑娘大摆擂台，谁若是能读完此书，便可娶了她。然后从背后掏出了", + "请问你的梦想是什么？我的梦想是能读到", + "读什么才能增智慧？当然是读", + "纳兰嫣然掏出了退婚书，可是发现出门带错了，结果拿出了一本", + "你要尽全力保护你的梦想。那些嘲笑你的人，他们必定会失败，他们想把你变成和他们一样的人。如果你有梦想的话，就要努力去读", + "走人生的路就像爬山一样，看起来走了许多冤枉的路，崎岖的路，但终究需要读完", + "游戏的规则就是这么的简单，你听懂了吗？管你听没听懂，快去看", +]; +var randomPostClick = 0; +function fetchRandomPost() { + if (!document.getElementById("random-post")) return; + if (randomPostWorking == false) { + randomPostWorking = true; + //获取旋转角度 + let randomRotate = randomPostTimes * 360; + let randomPostTipsItem = randomPostTips[Math.floor(Math.random() * randomPostTips.length)]; + let randomPostLevel = ""; + if (randomPostTimes > 10000) { + randomPostLevel = "愿者上钩"; + } else if (randomPostTimes > 1000) { + randomPostLevel = "俯览天下"; + } else if (randomPostTimes > 1000) { + randomPostLevel = "超越神了"; + } else if (randomPostTimes > 100) { + randomPostLevel = "绝世渔夫"; + } else if (randomPostTimes > 75) { + randomPostLevel = "钓鱼王者"; + } else if (randomPostTimes > 50) { + randomPostLevel = "钓鱼宗师"; + } else if (randomPostTimes > 20) { + randomPostLevel = "钓鱼专家"; + } else if (randomPostTimes > 5) { + randomPostLevel = "钓鱼高手"; + } else { + randomPostLevel = "钓鱼新手"; + } + if (randomPostTimes >= 5) { + document.getElementById("random-post").innerHTML = + `钓鱼中... （Lv.` + randomPostTimes + ` 当前称号：` + randomPostLevel + `）`; + } else { + document.getElementById("random-post").innerHTML = `钓鱼中...`; + } + + let randomTime = randomNum(1000, 3000); + + if (randomPostTimes == 0) { + randomTime = 0; + } + + document.querySelector(".random-post-start").style.opacity = "0.2"; + document.querySelector(".random-post-start").style.transitionDuration = "0.3s"; + document.querySelector(".random-post-start").style.transform = "rotate(" + randomRotate + "deg)"; + + //判断是否饥饿 + if ( + document.getElementById("random-post") && + randomPostClick * fdata.hungryFish + fdata.defaultFish < randomPostTimes && + Math.round(Math.random()) == 0 + ) { + document.getElementById("random-post").innerHTML = + "因为只钓鱼不吃鱼，过分饥饿导致本次钓鱼失败...(点击任意一篇钓鱼获得的文章即可恢复）"; + randomPostWorking = false; + } else { + var fetchUrl = fdata.apiurl + "randompost"; + fetch(fetchUrl) + .then(res => res.json()) + .then(json => { + var title = json.title; + var link = json.link; + var author = json.author; + if (document.getElementById("random-post")) { + window.setTimeout(function () { + document.getElementById("random-post").innerHTML = + randomPostTipsItem + + `来自友链 ` + + author + + ` 的文章：` + + title + + ``; + randomPostTimes += 1; + localStorage.setItem("randomPostTimes", randomPostTimes); + document.querySelector(".random-post-start").style.opacity = "1"; + }, randomTime); + } + }); + randomPostWorking = false; + } + } +} + +//初始化检查 +function initRandomPost() { + // 获取已经存储的数据 + if (localStorage.randomPostTimes) { + randomPostTimes = parseInt(localStorage.randomPostTimes); + randomPostClick = parseInt(localStorage.randomPostClick); + document.querySelector(".random-post-start").style.transitionDuration = "0.3s"; + document.querySelector(".random-post-start").style.transform = "rotate(" + 360 * randomPostTimes + "deg)"; + } + fetchRandomPost(); +} + +initRandomPost(); + +//添加点击统计 +function randomClickLink() { + randomPostClick += 1; + localStorage.setItem("randomPostClick", randomPostClick); +} + +// 生成随机数 +function randomNum(minNum, maxNum) { + switch (arguments.length) { + case 1: + return parseInt(Math.random() * minNum + 1, 10); + break; + case 2: + return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); + break; + default: + return 0; + break; + } +} diff --git a/js/anzhiyu/right_click_menu.js b/js/anzhiyu/right_click_menu.js new file mode 100644 index 0000000000..9cae0ffe72 --- /dev/null +++ b/js/anzhiyu/right_click_menu.js @@ -0,0 +1,479 @@ +// 初始化函数 +rm = {}; + +//禁止图片与超链接拖拽 +let aElements = document.getElementsByTagName("a"); +for (let i = 0; i < aElements.length; i++) { + aElements[i].setAttribute("draggable", "false"); + let imgElements = aElements[i].getElementsByTagName("img"); + for (let j = 0; j < imgElements.length; j++) { + imgElements[j].setAttribute("draggable", "false"); + } +} + +// 显示菜单 +rm.showRightMenu = function (isTrue, x = 0, y = 0) { + console.info(x, y); + let rightMenu = document.getElementById("rightMenu"); + rightMenu.style.top = x + "px"; + rightMenu.style.left = y + "px"; + if (isTrue) { + rightMenu.style.display = "block"; + stopMaskScroll(); + } else { + rightMenu.style.display = "none"; + } +}; + +// 隐藏菜单 +rm.hideRightMenu = function () { + rm.showRightMenu(false); + let rightMenuMask = document.querySelector("#rightmenu-mask"); + rightMenuMask.style.display = "none"; +}; + +// 尺寸 +let rmWidth = document.getElementById("rightMenu").offsetWidth; +let rmHeight = document.getElementById("rightMenu").offsetHeight; + +// 重新定义尺寸 +rm.reloadrmSize = function () { + rightMenu.style.visibility = "hidden"; + rightMenu.style.display = "block"; + // 获取宽度和高度 + rmWidth = document.getElementById("rightMenu").offsetWidth; + rmHeight = document.getElementById("rightMenu").offsetHeight; + rightMenu.style.visibility = "visible"; +}; + +// 获取点击的href +let domhref = ""; +let domImgSrc = ""; +let globalEvent = null; + +var oncontextmenuFunction = function (event) { + if (document.body.clientWidth > 768) { + let pageX = event.clientX + 10; //加10是为了防止显示时鼠标遮在菜单上 + let pageY = event.clientY; + + //其他额外菜单 + const $rightMenuOther = document.querySelector(".rightMenuOther"); + const $rightMenuPlugin = document.querySelector(".rightMenuPlugin"); + const $rightMenuCopyText = document.querySelector("#menu-copytext"); + const $rightMenuPasteText = document.querySelector("#menu-pastetext"); + const $rightMenuCommentText = document.querySelector("#menu-commenttext"); + const $rightMenuNewWindow = document.querySelector("#menu-newwindow"); + const $rightMenuNewWindowImg = document.querySelector("#menu-newwindowimg"); + const $rightMenuCopyLink = document.querySelector("#menu-copylink"); + const $rightMenuCopyImg = document.querySelector("#menu-copyimg"); + const $rightMenuDownloadImg = document.querySelector("#menu-downloadimg"); + const $rightMenuSearch = document.querySelector("#menu-search"); + const $rightMenuSearchBaidu = document.querySelector("#menu-searchBaidu"); + const $rightMenuMusicToggle = document.querySelector("#menu-music-toggle"); + const $rightMenuMusicBack = document.querySelector("#menu-music-back"); + const $rightMenuMusicForward = document.querySelector("#menu-music-forward"); + const $rightMenuMusicPlaylist = document.querySelector("#menu-music-playlist"); + const $rightMenuMusicCopyMusicName = document.querySelector("#menu-music-copyMusicName"); + + let href = event.target.href; + let imgsrc = event.target.currentSrc; + + // 判断模式 扩展模式为有事件 + let pluginMode = false; + $rightMenuOther.style.display = "block"; + globalEvent = event; + + // 检查是否需要复制 是否有选中文本 + if (selectTextNow && window.getSelection()) { + pluginMode = true; + $rightMenuCopyText.style.display = "block"; + $rightMenuCommentText.style.display = "block"; + $rightMenuSearch.style.display = "block"; + $rightMenuSearchBaidu.style.display = "block"; + } else { + $rightMenuCopyText.style.display = "none"; + $rightMenuCommentText.style.display = "none"; + $rightMenuSearchBaidu.style.display = "none"; + $rightMenuSearch.style.display = "none"; + } + + //检查是否右键点击了链接a标签 + if (href) { + pluginMode = true; + $rightMenuNewWindow.style.display = "block"; + $rightMenuCopyLink.style.display = "block"; + domhref = href; + } else { + $rightMenuNewWindow.style.display = "none"; + $rightMenuCopyLink.style.display = "none"; + } + + //检查是否需要复制图片 + if (imgsrc) { + pluginMode = true; + $rightMenuCopyImg.style.display = "block"; + $rightMenuDownloadImg.style.display = "block"; + $rightMenuNewWindowImg.style.display = "block"; + document.getElementById("rightMenu").style.width = "12rem"; + domImgSrc = imgsrc; + } else { + $rightMenuCopyImg.style.display = "none"; + $rightMenuDownloadImg.style.display = "none"; + $rightMenuNewWindowImg.style.display = "none"; + } + + // 判断是否为输入框 + if (event.target.tagName.toLowerCase() === "input" || event.target.tagName.toLowerCase() === "textarea") { + pluginMode = true; + $rightMenuPasteText.style.display = "block"; + } else { + $rightMenuPasteText.style.display = "none"; + } + const navMusicEl = document.querySelector("#nav-music"); + //判断是否是音乐 + if (navMusicEl && navMusicEl.contains(event.target)) { + pluginMode = true; + $rightMenuMusicToggle.style.display = "block"; + $rightMenuMusicBack.style.display = "block"; + $rightMenuMusicForward.style.display = "block"; + $rightMenuMusicPlaylist.style.display = "block"; + $rightMenuMusicCopyMusicName.style.display = "block"; + } else { + $rightMenuMusicToggle.style.display = "none"; + $rightMenuMusicBack.style.display = "none"; + $rightMenuMusicForward.style.display = "none"; + $rightMenuMusicPlaylist.style.display = "none"; + $rightMenuMusicCopyMusicName.style.display = "none"; + } + + // 如果不是扩展模式则隐藏扩展模块 + if (pluginMode) { + $rightMenuOther.style.display = "none"; + $rightMenuPlugin.style.display = "block"; + } else { + $rightMenuPlugin.style.display = "none"; + } + + rm.reloadrmSize(); + + // 鼠标默认显示在鼠标右下方，当鼠标靠右或靠下时，将菜单显示在鼠标左方\上方 + if (pageX + rmWidth > window.innerWidth) { + pageX -= rmWidth + 10; + } + if (pageY + rmHeight > window.innerHeight) { + pageY -= pageY + rmHeight - window.innerHeight; + } + + rm.showRightMenu(true, pageY, pageX); + document.getElementById("rightmenu-mask").style.display = "flex"; + return false; + } +}; + +// 监听右键初始化 +window.oncontextmenu = oncontextmenuFunction; + +// 下载图片状态 +rm.downloadimging = false; + +// 复制图片到剪贴板 +rm.writeClipImg = function (imgsrc) { + console.log("按下复制"); + rm.hideRightMenu(); + anzhiyu.snackbarShow("正在下载中，请稍后", false, 10000); + if (rm.downloadimging == false) { + rm.downloadimging = true; + setTimeout(function () { + copyImage(imgsrc); + anzhiyu.snackbarShow("复制成功！图片已添加盲水印，请遵守版权协议"); + rm.downloadimging = false; + }, "10000"); + } +}; + +function imageToBlob(imageURL) { + const img = new Image(); + const c = document.createElement("canvas"); + const ctx = c.getContext("2d"); + img.crossOrigin = ""; + img.src = imageURL; + return new Promise(resolve => { + img.onload = function () { + c.width = this.naturalWidth; + c.height = this.naturalHeight; + ctx.drawImage(this, 0, 0); + c.toBlob( + blob => { + // here the image is a blob + resolve(blob); + }, + "image/png", + 0.75 + ); + }; + }); +} + +async function copyImage(imageURL) { + const blob = await imageToBlob(imageURL); + const item = new ClipboardItem({ "image/png": blob }); + navigator.clipboard.write([item]); +} + +rm.copyUrl = function (id) { + const input = document.createElement("input"); // Create a new element + input.id = "copyVal"; // Set the id of the new element to "copyVal" + document.body.appendChild(input); // Append the new element to the end of the element + + const text = id; + input.value = text; + input.select(); + input.setSelectionRange(0, input.value.length); + document.execCommand("copy"); + + input.remove(); // Remove the element from the DOM +}; + +function stopMaskScroll() { + if (document.getElementById("rightmenu-mask")) { + let xscroll = document.getElementById("rightmenu-mask"); + xscroll.addEventListener( + "mousewheel", + function (e) { + //阻止浏览器默认方法 + rm.hideRightMenu(); + // e.preventDefault(); + }, + { passive: true } + ); + } + if (document.getElementById("rightMenu")) { + let xscroll = document.getElementById("rightMenu"); + xscroll.addEventListener( + "mousewheel", + function (e) { + //阻止浏览器默认方法 + rm.hideRightMenu(); + // e.preventDefault(); + }, + { passive: true } + ); + } +} + +rm.rightmenuCopyText = function (txt) { + if (navigator.clipboard) { + navigator.clipboard.writeText(txt); + } + rm.hideRightMenu(); +}; + +rm.copyPageUrl = function (url) { + if (!url) { + url = window.location.href; + } + rm.copyUrl(url); + anzhiyu.snackbarShow("复制链接地址成功", false, 2000); + rm.hideRightMenu(); +}; + +// 复制当前选中文本 +var selectTextNow = ""; +document.onmouseup = document.ondblclick = selceText; + +function selceText() { + var txt; + if (document.selection) { + txt = document.selection.createRange().text; + } else { + txt = window.getSelection().toString(); + } + selectTextNow = txt !== "" ? txt : ""; +} + +// 读取剪切板 +rm.readClipboard = function () { + if (navigator.clipboard) { + navigator.clipboard.readText().then(clipText => rm.insertAtCaret(globalEvent.target, clipText)); + } +}; + +// 粘贴文本到焦点 +rm.insertAtCaret = function (elemt, value) { + const startPos = elemt.selectionStart, + endPos = elemt.selectionEnd; + if (document.selection) { + elemt.focus(); + var sel = document.selection.createRange(); + sel.text = value; + elemt.focus(); + } else { + if (startPos || startPos == "0") { + var scrollTop = elemt.scrollTop; + elemt.value = elemt.value.substring(0, startPos) + value + elemt.value.substring(endPos, elemt.value.length); + elemt.focus(); + elemt.selectionStart = startPos + value.length; + elemt.selectionEnd = startPos + value.length; + elemt.scrollTop = scrollTop; + } else { + elemt.value += value; + elemt.focus(); + } + } +}; + +//粘贴文本 +rm.pasteText = function () { + const result = rm.readClipboard() || ""; + rm.hideRightMenu(); +}; + +//引用到评论 +rm.rightMenuCommentText = function (txt) { + rm.hideRightMenu(); + const postCommentDom = document.getElementById("post-comment"); + var domTop = postCommentDom.offsetTop; + window.scrollTo(0, domTop - 80); + if (txt == "undefined" || txt == "null") txt = "好棒！"; + function setText() { + setTimeout(() => { + var input = document.getElementsByClassName("el-textarea__inner")[0]; + if (!input) setText(); + let evt = document.createEvent("HTMLEvents"); + evt.initEvent("input", true, true); + let inputValue = replaceAll(txt, "\n", "\n> "); + input.value = "> " + inputValue + "\n\n"; + input.dispatchEvent(evt); + input.focus(); + input.setSelectionRange(-1, -1); + if (document.getElementById("comment-tips")) { + document.getElementById("comment-tips").classList.add("show"); + } + }, 100); + } + setText(); +}; + +//替换所有内容 +function replaceAll(string, search, replace) { + return string.split(search).join(replace); +} + +// 百度搜索 +rm.searchBaidu = function () { + anzhiyu.snackbarShow("即将跳转到百度搜索", false, 2000); + setTimeout(function () { + window.open("https://www.baidu.com/s?wd=" + selectTextNow); + }, "2000"); + rm.hideRightMenu(); +}; + +//分享链接 +rm.copyLink = function () { + rm.rightmenuCopyText(domhref); + anzhiyu.snackbarShow("已复制链接地址"); +}; + +function addRightMenuClickEvent() { + // 添加点击事件 + document.getElementById("menu-backward").addEventListener("click", function () { + window.history.back(); + rm.hideRightMenu(); + }); + + document.getElementById("menu-forward").addEventListener("click", function () { + window.history.forward(); + rm.hideRightMenu(); + }); + + document.getElementById("menu-refresh").addEventListener("click", function () { + window.location.reload(); + }); + + document.getElementById("menu-top").addEventListener("click", function () { + anzhiyu.scrollToDest(0, 500); + rm.hideRightMenu(); + }); + + document.getElementById("menu-translate").addEventListener("click", function () { + window.translateFn.translatePage(); + rm.hideRightMenu(); + }); + + const menuLinks = document.querySelectorAll(".menu-link"); + menuLinks.forEach(function (link) { + link.addEventListener("click", rm.hideRightMenu); + }); + + document.getElementById("menu-home") && + document.getElementById("menu-home").addEventListener("click", function () { + window.location.href = window.location.origin; + }); + + document.getElementById("menu-randomPost").addEventListener("click", function () { + toRandomPost(); + }); + + document.getElementById("menu-commentBarrage").addEventListener("click", anzhiyu.switchCommentBarrage); + + document.getElementById("rightmenu-mask").addEventListener("click", rm.hideRightMenu); + + document.getElementById("rightmenu-mask").addEventListener("contextmenu", function (event) { + rm.hideRightMenu(); + event.preventDefault(); // Prevent the default context menu from appearing + }); + + document.getElementById("menu-copy").addEventListener("click", () => { + rm.copyPageUrl(); + }); + + document.getElementById("menu-pastetext").addEventListener("click", rm.pasteText); + + document.getElementById("menu-copytext").addEventListener("click", function () { + rm.rightmenuCopyText(selectTextNow); + const copyright = GLOBAL_CONFIG.copyright; + if (copyright.copy) { + anzhiyu.snackbarShow(copyright.languages.copySuccess); + } + }); + + document.getElementById("menu-commenttext").addEventListener("click", function () { + rm.rightMenuCommentText(selectTextNow); + }); + + document.getElementById("menu-newwindow").addEventListener("click", function () { + window.open(domhref, "_blank"); + rm.hideRightMenu(); + }); + + document.getElementById("menu-copylink").addEventListener("click", rm.copyLink); + + document.getElementById("menu-downloadimg").addEventListener("click", function () { + anzhiyu.downloadImage(domImgSrc, "anzhiyu"); + }); + + document.getElementById("menu-newwindowimg").addEventListener("click", function () { + window.open(domImgSrc, "_blank"); + rm.hideRightMenu(); + }); + + document.getElementById("menu-copyimg").addEventListener("click", function () { + rm.writeClipImg(domImgSrc); + }); + + document.getElementById("menu-searchBaidu").addEventListener("click", rm.searchBaidu); + + //音乐 + document.getElementById("menu-music-toggle").addEventListener("click", anzhiyu.musicToggle); + + document.getElementById("menu-music-back").addEventListener("click", anzhiyu.musicSkipBack); + + document.getElementById("menu-music-forward").addEventListener("click", anzhiyu.musicSkipForward); + + document.getElementById("menu-music-copyMusicName").addEventListener("click", function () { + rm.rightmenuCopyText(anzhiyu.musicGetName()); + anzhiyu.snackbarShow("复制歌曲名称成功", false, 3000); + }); +} + +addRightMenuClickEvent(); diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000000..fd10511344 --- /dev/null +++ b/js/main.js @@ -0,0 +1,1813 @@ +// 第一次播放音乐 +var anzhiyu_musicFirst = false; +// 快捷键 +var anzhiyu_keyboard = null; +// 音乐播放状态 +var anzhiyu_musicPlaying = false; +var $bodyWrap = document.getElementById("body-wrap"); +var anzhiyu_intype = false; +var anzhiyu_keyUpEvent_timeoutId = null; +var anzhiyu_keyUpShiftDelayEvent_timeoutId = null; + +// 右键菜单对象 +var rm = null; + +var popupWindowTimer = null; + +var adjectives = [ + "美丽的", + "英俊的", + "聪明的", + "勇敢的", + "可爱的", + "慷慨的", + "善良的", + "可靠的", + "开朗的", + "成熟的", + "稳重的", + "真诚的", + "幽默的", + "豁达的", + "有趣的", + "活泼的", + "优雅的", + "敏捷的", + "温柔的", + "温暖的", + "敬业的", + "细心的", + "耐心的", + "深沉的", + "朴素的", + "含蓄的", + "率直的", + "开放的", + "务实的", + "坚强的", + "自信的", + "谦虚的", + "文静的", + "深刻的", + "纯真的", + "朝气蓬勃的", + "慎重的", + "大方的", + "顽强的", + "迷人的", + "机智的", + "善解人意的", + "富有想象力的", + "有魅力的", + "独立的", + "好奇的", + "干净的", + "宽容的", + "尊重他人的", + "体贴的", + "守信的", + "有耐性的", + "有责任心的", + "有担当的", + "有远见的", + "有智慧的", + "有眼光的", + "有冒险精神的", + "有爱心的", + "有同情心的", + "喜欢思考的", + "喜欢学习的", + "具有批判性思维的", + "善于表达的", + "善于沟通的", + "善于合作的", + "善于领导的", + "有激情的", + "有幽默感的", + "有思想的", + "有个性的", + "有正义感的", + "有责任感的", + "有创造力的", + "有想象力的", + "有艺术细胞的", + "有团队精神的", + "有协调能力的", + "有决策能力的", + "有组织能力的", + "有学习能力的", + "有执行能力的", + "有分析能力的", + "有逻辑思维的", + "有创新能力的", + "有专业素养的", + "有商业头脑的", +]; +var vegetablesAndFruits = [ + "萝卜", + "白菜", + "芹菜", + "生菜", + "青椒", + "辣椒", + "茄子", + "豆角", + "黄瓜", + "西红柿", + "洋葱", + "大蒜", + "土豆", + "南瓜", + "豆腐", + "韭菜", + "花菜", + "西兰花", + "蘑菇", + "金针菇", + "苹果", + "香蕉", + "橙子", + "柠檬", + "猕猴桃", + "草莓", + "葡萄", + "桃子", + "杏子", + "李子", + "石榴", + "西瓜", + "哈密瓜", + "蜜瓜", + "樱桃", + "蓝莓", + "柿子", + "橄榄", + "柚子", + "火龙果", +]; + +// 已随机的歌曲 +var selectRandomSong = []; +// 音乐默认声音大小 +var musicVolume = 0.8; +// 是否切换了周杰伦音乐列表 +var changeMusicListFlag = false; +// 当前默认播放列表 +var defaultPlayMusicList = []; +var themeColorMeta, pageHeaderEl, navMusicEl, consoleEl; + +document.addEventListener("DOMContentLoaded", function () { + let headerContentWidth, $nav, $rightMenu; + let mobileSidebarOpen = false; + + const adjustMenu = init => { + const getAllWidth = ele => { + return Array.from(ele).reduce((width, i) => width + i.offsetWidth, 0); + }; + + if (init) { + const blogInfoWidth = getAllWidth(document.querySelector("#blog_name > a").children); + const menusWidth = getAllWidth(document.getElementById("menus").children); + headerContentWidth = blogInfoWidth + menusWidth; + $nav = document.getElementById("nav"); + } + + const hideMenuIndex = window.innerWidth <= 768 || headerContentWidth > $nav.offsetWidth - 120; + $nav.classList.toggle("hide-menu", hideMenuIndex); + }; + + // 初始化header + const initAdjust = () => { + adjustMenu(true); + $nav.classList.add("show"); + }; + + // sidebar menus + const sidebarFn = { + open: () => { + anzhiyu.sidebarPaddingR(); + anzhiyu.animateIn(document.getElementById("menu-mask"), "to_show 0.5s"); + document.getElementById("sidebar-menus").classList.add("open"); + mobileSidebarOpen = true; + }, + close: () => { + const $body = document.body; + $body.style.paddingRight = ""; + anzhiyu.animateOut(document.getElementById("menu-mask"), "to_hide 0.5s"); + document.getElementById("sidebar-menus").classList.remove("open"); + mobileSidebarOpen = false; + }, + }; + + /** + * 首頁top_img底下的箭頭 + */ + const scrollDownInIndex = () => { + const handleScrollToDest = () => { + const bbTimeList = document.getElementById("bbTimeList"); + if (bbTimeList) { + anzhiyu.scrollToDest(bbTimeList.offsetTop - 62, 300); + } else { + anzhiyu.scrollToDest(document.getElementById("home_top").offsetTop - 60, 300); + } + }; + + const $scrollDownEle = document.getElementById("scroll-down"); + $scrollDownEle && anzhiyu.addEventListenerPjax($scrollDownEle, "click", handleScrollToDest); + }; + + /** + * 代码 + * 只适用于Hexo默认的代码渲染 + */ + const addHighlightTool = function () { + const highLight = GLOBAL_CONFIG.highlight; + if (!highLight) return; + + const { highlightCopy, highlightLang, highlightHeightLimit, plugin } = highLight; + const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink; + const isShowTool = highlightCopy || highlightLang || isHighlightShrink !== undefined; + const $figureHighlight = + plugin === "highlight.js" + ? document.querySelectorAll("figure.highlight") + : document.querySelectorAll('pre[class*="language-"]'); + + if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) return; + + const isPrismjs = plugin === "prismjs"; + const highlightShrinkClass = isHighlightShrink === true ? "closed" : ""; + const highlightShrinkEle = + isHighlightShrink !== undefined + ? '' + : ""; + const highlightCopyEle = highlightCopy + ? '
    ' + : ""; + + const alertInfo = (ele, text) => { + if (GLOBAL_CONFIG.Snackbar !== undefined) { + anzhiyu.snackbarShow(text); + } else { + const prevEle = ele.previousElementSibling; + prevEle.textContent = text; + prevEle.style.opacity = 1; + setTimeout(() => { + prevEle.style.opacity = 0; + }, 800); + } + }; + + const copy = ctx => { + if (document.queryCommandSupported && document.queryCommandSupported("copy")) { + document.execCommand("copy"); + alertInfo(ctx, GLOBAL_CONFIG.copy.success); + } else { + alertInfo(ctx, GLOBAL_CONFIG.copy.noSupport); + } + }; + + // click events + const highlightCopyFn = ele => { + const $buttonParent = ele.parentNode; + $buttonParent.classList.add("copy-true"); + const selection = window.getSelection(); + const range = document.createRange(); + const preCodeSelector = isPrismjs ? "pre code" : "table .code pre"; + range.selectNodeContents($buttonParent.querySelectorAll(`${preCodeSelector}`)[0]); + selection.removeAllRanges(); + selection.addRange(range); + copy(ele.lastChild); + selection.removeAllRanges(); + $buttonParent.classList.remove("copy-true"); + }; + + const highlightShrinkFn = ele => { + ele.classList.toggle("closed"); + }; + + const highlightToolsFn = function (e) { + const $target = e.target.classList; + if ($target.contains("expand")) highlightShrinkFn(this); + else if ($target.contains("copy-button")) highlightCopyFn(this); + }; + + const expandCode = function () { + this.classList.toggle("expand-done"); + }; + + const createEle = (lang, item, service) => { + const fragment = document.createDocumentFragment(); + + if (isShowTool) { + const hlTools = document.createElement("div"); + hlTools.className = `highlight-tools ${highlightShrinkClass}`; + hlTools.innerHTML = highlightShrinkEle + lang + highlightCopyEle; + anzhiyu.addEventListenerPjax(hlTools, "click", highlightToolsFn); + fragment.appendChild(hlTools); + } + + if (highlightHeightLimit && item.offsetHeight > highlightHeightLimit + 30) { + const ele = document.createElement("div"); + ele.className = "code-expand-btn"; + ele.innerHTML = ''; + anzhiyu.addEventListenerPjax(ele, "click", expandCode); + fragment.appendChild(ele); + } + + if (service === "hl") { + item.insertBefore(fragment, item.firstChild); + } else { + item.parentNode.insertBefore(fragment, item); + } + }; + + if (isPrismjs) { + $figureHighlight.forEach(item => { + if (highlightLang) { + const langName = item.getAttribute("data-language") || "Code"; + const highlightLangEle = `
    ${langName}
    `; + anzhiyu.wrap(item, "figure", { class: "highlight" }); + createEle(highlightLangEle, item); + } else { + anzhiyu.wrap(item, "figure", { class: "highlight" }); + createEle("", item); + } + }); + } else { + $figureHighlight.forEach(item => { + if (highlightLang) { + let langName = item.getAttribute("class").split(" ")[1]; + if (langName === "plain" || langName === undefined) langName = "Code"; + const highlightLangEle = `
    ${langName}
    `; + createEle(highlightLangEle, item, "hl"); + } else { + createEle("", item, "hl"); + } + }); + } + }; + + /** + * PhotoFigcaption + */ + function addPhotoFigcaption() { + document.querySelectorAll("#article-container img").forEach(function (item) { + const parentEle = item.parentNode; + const altValue = item.title || item.alt; + if (altValue && !parentEle.parentNode.classList.contains("justified-gallery")) { + const ele = document.createElement("div"); + ele.className = "img-alt is-center"; + ele.textContent = altValue; + parentEle.insertBefore(ele, item.nextSibling); + } + }); + } + + /** + * Lightbox + */ + const runLightbox = () => { + anzhiyu.loadLightbox(document.querySelectorAll("#article-container img:not(.no-lightbox)")); + }; + + /** + * justified-gallery 圖庫排版 + */ + const runJustifiedGallery = function (ele) { + const htmlStr = arr => { + let str = ""; + const replaceDq = str => str.replace(/"/g, """); // replace double quotes to " + arr.forEach(i => { + const alt = i.alt ? `alt="${replaceDq(i.alt)}"` : ""; + const title = i.title ? `title="${replaceDq(i.title)}"` : ""; + const address = i.address ? i.address : ""; + const galleryItem = ` +
    + ${address ? `
    ${address}
    ` : ""} + +
    + `; + str += galleryItem; + }); + + return str; + }; + + const lazyloadFn = (i, arr, limit) => { + const loadItem = Number(limit); + const arrLength = arr.length; + if (arrLength > loadItem) i.insertAdjacentHTML("beforeend", htmlStr(arr.splice(0, loadItem))); + else { + i.insertAdjacentHTML("beforeend", htmlStr(arr)); + i.classList.remove("lazyload"); + } + window.lazyLoadInstance && window.lazyLoadInstance.update(); + return arrLength > loadItem ? loadItem : arrLength; + }; + + const fetchUrl = async url => { + const response = await fetch(url); + return await response.json(); + }; + + const runJustifiedGallery = (item, arr) => { + const limit = item.getAttribute("data-limit") ?? arr.length; + if (!item.classList.contains("lazyload") || arr.length < limit) { + // 不懒加载 + item.innerHTML = htmlStr(arr); + item.nextElementSibling.style.display = "none"; + } else { + if (!item.classList.contains("btn_album_detail_lazyload") || item.classList.contains("page_img_lazyload")) { + // 滚动懒加载 + lazyloadFn(item, arr, limit); + const clickBtnFn = () => { + const lastItemLength = lazyloadFn(item, arr, limit); + fjGallery( + item, + "appendImages", + item.querySelectorAll(`.fj-gallery-item:nth-last-child(-n+${lastItemLength})`) + ); + anzhiyu.loadLightbox(item.querySelectorAll("img")); + if (lastItemLength < Number(limit)) { + observer.unobserve(item.nextElementSibling); + } + }; + + // 创建IntersectionObserver实例 + const observer = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + // 如果元素进入视口 + if (entry.isIntersecting) { + // 执行clickBtnFn函数 + setTimeout(clickBtnFn(), 100); + } + }); + }); + observer.observe(item.nextElementSibling); + } else { + // 相册详情 按钮懒加载 + lazyloadFn(item, arr, limit); + const clickBtnFn = () => { + const lastItemLength = lazyloadFn(item, arr, limit); + fjGallery( + item, + "appendImages", + item.querySelectorAll(`.fj-gallery-item:nth-last-child(-n+${lastItemLength})`) + ); + anzhiyu.loadLightbox(item.querySelectorAll("img")); + lastItemLength < limit && item.nextElementSibling.removeEventListener("click", clickBtnFn); + }; + item.nextElementSibling.addEventListener("click", clickBtnFn); + } + } + + anzhiyu.initJustifiedGallery(item); + anzhiyu.loadLightbox(item.querySelectorAll("img")); + window.lazyLoadInstance && window.lazyLoadInstance.update(); + }; + + const addJustifiedGallery = () => { + ele.forEach(item => { + item.classList.contains("url") + ? fetchUrl(item.textContent).then(res => { + runJustifiedGallery(item, res); + }) + : runJustifiedGallery(item, JSON.parse(item.textContent)); + }); + }; + + if (window.fjGallery) { + addJustifiedGallery(); + return; + } + + getCSS(`${GLOBAL_CONFIG.source.justifiedGallery.css}`); + getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`).then(addJustifiedGallery); + }; + + /** + * 滚动处理 + */ + const scrollFn = function () { + const $rightside = document.getElementById("rightside"); + const innerHeight = window.innerHeight + 56; + let lastScrollTop = 0; + + if (document.body.scrollHeight <= innerHeight) { + $rightside.style.cssText = "opacity: 1; transform: translateX(-58px)"; + } + + // find the scroll direction + function scrollDirection(currentTop) { + const result = currentTop > initTop; // true is down & false is up + initTop = currentTop; + return result; + } + + let initTop = 0; + let isChatShow = true; + const $header = document.getElementById("page-header"); + const $popupWindow = document.getElementById("popup-window"); + const isChatBtnHide = typeof chatBtnHide === "function"; + const isChatBtnShow = typeof chatBtnShow === "function"; + + // 第一次滑动到底部的标识符 + let scrollBottomFirstFlag = false; + // 缓存常用dom元素 + const musicDom = document.getElementById("nav-music"), + footerDom = document.getElementById("footer"), + waterfallDom = document.getElementById("waterfall"), + $percentBtn = document.getElementById("percent"), + $navTotop = document.getElementById("nav-totop"), + $bodyWrap = document.getElementById("body-wrap"); + // 页面底部Dom是否存在 + let pageBottomDomFlag = document.getElementById("post-comment") || document.getElementById("footer"); + + function percentageScrollFn(currentTop) { + // 处理滚动百分比 + let docHeight = $bodyWrap.clientHeight; + const winHeight = document.documentElement.clientHeight; + const contentMath = + docHeight > winHeight ? docHeight - winHeight : document.documentElement.scrollHeight - winHeight; + const scrollPercent = currentTop / contentMath; + const scrollPercentRounded = Math.round(scrollPercent * 100); + const percentage = scrollPercentRounded > 100 ? 100 : scrollPercentRounded <= 0 ? 1 : scrollPercentRounded; + $percentBtn.textContent = percentage; + + function isInViewPortOfOneNoDis(el) { + if (!el) return; + const elDisplay = window.getComputedStyle(el).getPropertyValue("display"); + if (elDisplay == "none") { + return; + } + const viewPortHeight = + window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; + const offsetTop = el.offsetTop; + const scrollTop = document.documentElement.scrollTop; + const top = offsetTop - scrollTop; + return top <= viewPortHeight; + } + + if (isInViewPortOfOneNoDis(pageBottomDomFlag || percentage > 90) && currentTop > 20) { + $navTotop.classList.add("long"); + $percentBtn.textContent = "返回顶部"; + } else { + $navTotop.classList.remove("long"); + $percentBtn.textContent = percentage; + } + + // 如果当前页面需要瀑布流，就处理瀑布流 + if (waterfallDom) { + const waterfallResult = currentTop % document.documentElement.clientHeight; // 卷去一个视口 + if (!scrollBottomFirstFlag && waterfallResult + 100 >= document.documentElement.clientHeight) { + console.info(waterfallResult, document.documentElement.clientHeight); + setTimeout(() => { + waterfall("#waterfall"); + }, 500); + } else { + setTimeout(() => { + waterfallDom && waterfall("#waterfall"); + }, 500); + } + } + } + + const scrollTask = anzhiyu.throttle(() => { + const currentTop = window.scrollY || document.documentElement.scrollTop; + const isDown = scrollDirection(currentTop); + + const delta = Math.abs(lastScrollTop - currentTop); + if (currentTop > 60 && delta < 20 && delta != 0) { + // ignore small scrolls + return; + } + if ( + $popupWindow && + $popupWindow.classList.contains("show-popup-window") && + currentTop > 60 && + delta > 20 && + lastScrollTop != 0 + ) { + // 滚动后延迟1s关闭弹窗 + anzhiyu.throttle(() => { + if (popupWindowTimer) clearTimeout(popupWindowTimer); + popupWindowTimer = setTimeout(() => { + if (!$popupWindow.classList.contains("popup-hide")) { + $popupWindow.classList.add("popup-hide"); + } + setTimeout(() => { + $popupWindow.classList.remove("popup-hide"); + $popupWindow.classList.remove("show-popup-window"); + }, 1000); + }, 1000); + }, 1000)(); + } + lastScrollTop = currentTop; + + if (currentTop > 26) { + if (isDown) { + if ($header.classList.contains("nav-visible")) $header.classList.remove("nav-visible"); + if (isChatBtnShow && isChatShow === true) { + chatBtnHide(); + isChatShow = false; + } + } else { + if (!$header.classList.contains("nav-visible")) $header.classList.add("nav-visible"); + if (isChatBtnHide && isChatShow === false) { + chatBtnShow(); + isChatShow = true; + } + } + requestAnimationFrame(() => { + anzhiyu.initThemeColor(); + $header.classList.add("nav-fixed"); + }); + if (window.getComputedStyle($rightside).getPropertyValue("opacity") === "0") { + $rightside.style.cssText = "opacity: 0.8; transform: translateX(-58px)"; + } + } else { + if (currentTop <= 5) { + requestAnimationFrame(() => { + $header.classList.remove("nav-fixed"); + $header.classList.remove("nav-visible"); + // 修改顶栏颜色 + anzhiyu.initThemeColor(); + }); + } + $rightside.style.cssText = "opacity: ''; transform: ''"; + } + + if (document.body.scrollHeight <= innerHeight) { + $rightside.style.cssText = "opacity: 0.8; transform: translateX(-58px)"; + } + + percentageScrollFn(currentTop); + }, 96); + + // 进入footer隐藏音乐 + if (footerDom) { + anzhiyu + .intersectionObserver( + () => { + if (footerDom && musicDom && 768 < document.body.clientWidth) { + musicDom.style.bottom = "-10px"; + musicDom.style.opacity = "0"; + } + scrollBottomFirstFlag = true; + }, + () => { + if (footerDom && musicDom && 768 < document.body.clientWidth) { + musicDom.style.bottom = "20px"; + musicDom.style.opacity = "1"; + } + } + )() + .observe(footerDom); + } + + scrollTask(); + anzhiyu.addEventListenerPjax(window, "scroll", scrollTask, { passive: true }); + }; + + /** + * toc,anchor + */ + const scrollFnToDo = function () { + const isToc = GLOBAL_CONFIG_SITE.isToc; + const isAnchor = GLOBAL_CONFIG.isAnchor; + const $article = document.getElementById("article-container"); + + if (!($article && (isToc || isAnchor))) return; + + let $tocLink, $cardToc, autoScrollToc, isExpand; + if (isToc) { + const $cardTocLayout = document.getElementById("card-toc"); + $cardToc = $cardTocLayout.querySelector(".toc-content"); + $tocLink = $cardToc.querySelectorAll(".toc-link"); + isExpand = $cardToc.classList.contains("is-expand"); + + // toc元素點擊 + const tocItemClickFn = e => { + const target = e.target.closest(".toc-link"); + if (!target) return; + + e.preventDefault(); + anzhiyu.scrollToDest( + anzhiyu.getEleTop(document.getElementById(decodeURI(target.getAttribute("href")).replace("#", ""))) - 60, + 300 + ); + if (window.innerWidth < 900) { + $cardTocLayout.classList.remove("open"); + } + }; + + anzhiyu.addEventListenerPjax($cardToc, "click", tocItemClickFn); + + autoScrollToc = item => { + const activePosition = item.getBoundingClientRect().top; + const sidebarScrollTop = $cardToc.scrollTop; + if (activePosition > document.documentElement.clientHeight - 100) { + $cardToc.scrollTop = sidebarScrollTop + 150; + } + if (activePosition < 100) { + $cardToc.scrollTop = sidebarScrollTop - 150; + } + }; + } + + // find head position & add active class + const list = $article.querySelectorAll("h1,h2,h3,h4,h5,h6"); + const filteredHeadings = Array.from(list).filter(heading => heading.id !== "CrawlerTitle"); + let detectItem = ""; + const findHeadPosition = function (top) { + if (top === 0) { + return false; + } + + let currentId = ""; + let currentIndex = ""; + + filteredHeadings.forEach(function (ele, index) { + if (top > anzhiyu.getEleTop(ele) - 80) { + const id = ele.id; + currentId = id ? "#" + encodeURI(id) : ""; + currentIndex = index; + } + }); + if (detectItem === currentIndex) return; + if (isAnchor) anzhiyu.updateAnchor(currentId); + detectItem = currentIndex; + if (isToc) { + $cardToc.querySelectorAll(".active").forEach(i => { + i.classList.remove("active"); + }); + + if (currentId === "") { + return; + } + const currentActive = $tocLink[currentIndex]; + currentActive.classList.add("active"); + + setTimeout(() => { + autoScrollToc(currentActive); + }, 0); + + if (isExpand) return; + let parent = currentActive.parentNode; + + for (; !parent.matches(".toc"); parent = parent.parentNode) { + if (parent.matches("li")) parent.classList.add("active"); + } + } + }; + + // main of scroll + const tocScrollFn = anzhiyu.throttle(() => { + const currentTop = window.scrollY || document.documentElement.scrollTop; + findHeadPosition(currentTop); + }, 100); + + anzhiyu.addEventListenerPjax(window, "scroll", tocScrollFn, { passive: true }); + }; + + const handleThemeChange = mode => { + const globalFn = window.globalFn || {}; + const themeChange = globalFn.themeChange || {}; + if (!themeChange) { + return; + } + + Object.keys(themeChange).forEach(key => { + const themeChangeFn = themeChange[key]; + themeChangeFn(mode); + }); + + rm && rm.hideRightMenu(); + + const menuDarkmodeText = $rightMenu.querySelector(".menu-darkmode-text"); + if (mode === "light") { + menuDarkmodeText.textContent = "深色模式"; + } else { + menuDarkmodeText.textContent = "浅色模式"; + } + + if (!GLOBAL_CONFIG_SITE.isPost) { + const root = document.querySelector(":root"); + root.style.setProperty("--anzhiyu-bar-background", "var(--anzhiyu-meta-theme-color)"); + requestAnimationFrame(() => { + anzhiyu.initThemeColor(); + }); + + // 要改回来默认主色; + document.documentElement.style.setProperty( + "--anzhiyu-main", + getComputedStyle(document.documentElement).getPropertyValue("--anzhiyu-theme") + ); + document.documentElement.style.setProperty( + "--anzhiyu-theme-op", + getComputedStyle(document.documentElement).getPropertyValue("--anzhiyu-main") + "23" + ); + document.documentElement.style.setProperty( + "--anzhiyu-theme-op-deep", + getComputedStyle(document.documentElement).getPropertyValue("--anzhiyu-main") + "dd" + ); + } + }; + + /** + * Rightside + */ + const rightSideFn = { + readmode: () => { + // read mode + const $body = document.body; + $body.classList.add("read-mode"); + const newEle = document.createElement("button"); + newEle.type = "button"; + newEle.className = "anzhiyufont anzhiyu-icon-xmark exit-readmode"; + $body.appendChild(newEle); + + const clickFn = () => { + $body.classList.remove("read-mode"); + newEle.remove(); + newEle.removeEventListener("click", clickFn); + }; + + newEle.addEventListener("click", clickFn); + }, + darkmode: () => { + // switch between light and dark mode + const willChangeMode = document.documentElement.getAttribute("data-theme") === "dark" ? "light" : "dark"; + if (willChangeMode === "dark") { + activateDarkMode(); + GLOBAL_CONFIG.Snackbar !== undefined && anzhiyu.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night); + } else { + activateLightMode(); + GLOBAL_CONFIG.Snackbar !== undefined && anzhiyu.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day); + } + saveToLocal.set("theme", willChangeMode, 2); + handleThemeChange(willChangeMode); + }, + "rightside-config": item => { + // Show or hide rightside-hide-btn + const hideLayout = item.firstElementChild; + if (hideLayout.classList.contains("show")) { + hideLayout.classList.add("status"); + setTimeout(() => { + hideLayout.classList.remove("status"); + }, 300); + } + + hideLayout.classList.toggle("show"); + }, + "go-up": () => { + // Back to top + anzhiyu.scrollToDest(0, 500); + }, + "hide-aside-btn": () => { + // Hide aside + const $htmlDom = document.documentElement.classList; + const saveStatus = $htmlDom.contains("hide-aside") ? "show" : "hide"; + saveToLocal.set("aside-status", saveStatus, 2); + $htmlDom.toggle("hide-aside"); + }, + "mobile-toc-button": item => { + // Show mobile toc + const tocEle = document.getElementById("card-toc"); + tocEle.style.transformOrigin = `right ${item.getBoundingClientRect().top + 17}px`; + tocEle.style.transition = "transform 0.3s ease-in-out"; + tocEle.classList.toggle("open"); + tocEle.addEventListener( + "transitionend", + () => { + tocEle.style.transition = ""; + tocEle.style.transformOrigin = ""; + }, + { once: true } + ); + }, + "chat-btn": () => { + // Show chat + window.chatBtnFn(); + }, + translateLink: () => { + // switch between traditional and simplified chinese + window.translateFn.translatePage(); + }, + }; + + document.getElementById("rightside").addEventListener("click", function (e) { + const $target = e.target.closest("[id]"); + if ($target && rightSideFn[$target.id]) { + rightSideFn[$target.id](this); + } + }); + + //监听蒙版关闭 + document.addEventListener( + "touchstart", + e => { + anzhiyu.removeRewardMask(); + }, + { passive: true } + ); + + /** + * menu + * 側邊欄sub-menu 展開/收縮 + */ + const clickFnOfSubMenu = () => { + const handleClickOfSubMenu = e => { + const target = e.target.closest(".site-page.group"); + if (!target) return; + target.classList.toggle("hide"); + }; + + document.querySelector("#sidebar-menus .menus_items") && + document.querySelector("#sidebar-menus .menus_items").addEventListener("click", handleClickOfSubMenu); + }; + + /** + * 手机端目录点击 + */ + const openMobileMenu = () => { + const handleClick = () => { + sidebarFn.open(); + }; + anzhiyu.addEventListenerPjax(document.getElementById("toggle-menu"), "click", handleClick); + }; + + /** + * 複製時加上版權信息 + */ + const addCopyright = () => { + const { limitCount, languages, copy, copyrightEbable } = GLOBAL_CONFIG.copyright; + + const handleCopy = e => { + if (copy) { + anzhiyu.snackbarShow(languages.copySuccess); + } + if (copyrightEbable) { + e.preventDefault(); + const copyFont = window.getSelection(0).toString(); + let textFont = copyFont; + if (copyFont.length > limitCount) { + textFont = `${copyFont}\n\n\n${languages.author}\n${languages.link}${window.location.href}\n${languages.source}\n${languages.info}`; + } + if (e.clipboardData) { + return e.clipboardData.setData("text", textFont); + } else { + return window.clipboardData.setData("text", textFont); + } + } + }; + + document.body.addEventListener("copy", handleCopy); + }; + + /** + * 網頁運行時間 + */ + const addRuntime = () => { + const $runtimeCount = document.getElementById("runtimeshow"); + if ($runtimeCount) { + const publishDate = $runtimeCount.getAttribute("data-publishDate"); + $runtimeCount.textContent = `${anzhiyu.diffDate(publishDate)} ${GLOBAL_CONFIG.runtime}`; + } + }; + + /** + * 最後一次更新時間 + */ + const addLastPushDate = () => { + const $lastPushDateItem = document.getElementById("last-push-date"); + if ($lastPushDateItem) { + const lastPushDate = $lastPushDateItem.getAttribute("data-lastPushDate"); + $lastPushDateItem.textContent = anzhiyu.diffDate(lastPushDate, true); + } + }; + + /** + * table overflow + */ + const addTableWrap = () => { + const $table = document.querySelectorAll("#article-container table"); + if (!$table.length) return; + + $table.forEach(item => { + if (!item.closest(".highlight")) { + anzhiyu.wrap(item, "div", { class: "table-wrap" }); + } + }); + }; + + /** + * tag-hide + */ + const clickFnOfTagHide = () => { + const hideButtons = document.querySelectorAll("#article-container .hide-button"); + if (!hideButtons.length) return; + const handleClick = function (e) { + const $this = this; + $this.classList.add("open"); + const $fjGallery = $this.nextElementSibling.querySelectorAll(".gallery-container"); + $fjGallery.length && addJustifiedGallery($fjGallery); + }; + + hideButtons.forEach(item => { + item.addEventListener("click", handleClick, { once: true }); + }); + }; + + const tabsFn = () => { + const navTabsElement = document.querySelectorAll("#article-container .tabs"); + if (!navTabsElement.length) return; + + const removeAndAddActiveClass = (elements, detect) => { + Array.from(elements).forEach(element => { + element.classList.remove("active"); + if (element === detect || element.id === detect) { + element.classList.add("active"); + } + }); + }; + + const addTabNavEventListener = (item, isJustifiedGallery) => { + const navClickHandler = function (e) { + const target = e.target.closest("button"); + if (target.classList.contains("active")) return; + removeAndAddActiveClass(this.children, target); + this.classList.remove("no-default"); + const tabId = target.getAttribute("data-href"); + const tabContent = this.nextElementSibling; + removeAndAddActiveClass(tabContent.children, tabId); + if (isJustifiedGallery) { + const $isTabJustifiedGallery = tabContent.querySelectorAll(`#${tabId} .fj-gallery`); + if ($isTabJustifiedGallery.length > 0) { + anzhiyu.initJustifiedGallery($isTabJustifiedGallery); + } + } + }; + anzhiyu.addEventListenerPjax(item.firstElementChild, "click", navClickHandler); + }; + + const addTabToTopEventListener = item => { + const btnClickHandler = e => { + const target = e.target.closest("button"); + if (!target) return; + anzhiyu.scrollToDest(anzhiyu.getEleTop(item), 300); + }; + anzhiyu.addEventListenerPjax(item.lastElementChild, "click", btnClickHandler); + }; + + navTabsElement.forEach(item => { + const isJustifiedGallery = !!item.querySelectorAll(".gallery-container"); + addTabNavEventListener(item, isJustifiedGallery); + addTabToTopEventListener(item); + }); + }; + + const toggleCardCategory = () => { + const cardCategory = document.querySelector("#aside-cat-list.expandBtn"); + if (!cardCategory) return; + + const handleToggleBtn = e => { + const target = e.target; + if (target.nodeName === "I") { + e.preventDefault(); + target.parentNode.classList.toggle("expand"); + } + }; + anzhiyu.addEventListenerPjax(cardCategory, "click", handleToggleBtn, true); + }; + + const switchComments = () => { + const switchBtn = document.getElementById("switch-btn"); + if (!switchBtn) return; + let switchDone = false; + const commentContainer = document.getElementById("post-comment"); + const handleSwitchBtn = () => { + commentContainer.classList.toggle("move"); + if (!switchDone && typeof loadOtherComment === "function") { + switchDone = true; + loadOtherComment(); + } + }; + anzhiyu.addEventListenerPjax(switchBtn, "click", handleSwitchBtn); + }; + + const addPostOutdateNotice = function () { + const data = GLOBAL_CONFIG.noticeOutdate; + const diffDay = anzhiyu.diffDate(GLOBAL_CONFIG_SITE.postUpdate); + if (diffDay >= data.limitDay) { + const ele = document.createElement("div"); + ele.className = "post-outdate-notice"; + ele.textContent = data.messagePrev + " " + diffDay + " " + data.messageNext; + const $targetEle = document.getElementById("article-container"); + if (data.position === "top") { + $targetEle.insertBefore(ele, $targetEle.firstChild); + } else { + $targetEle.appendChild(ele); + } + } + }; + + const lazyloadImg = () => { + window.lazyLoadInstance = new LazyLoad({ + elements_selector: "img", + threshold: 0, + data_src: "lazy-src", + }); + }; + + const relativeDate = function (selector) { + selector.forEach(item => { + const timeVal = item.getAttribute("datetime"); + item.textContent = anzhiyu.diffDate(timeVal, true); + item.style.display = "inline"; + }); + }; + + const mouseleaveHomeCard = function () { + const topGroup = document.querySelector(".topGroup"); + if (!topGroup) return; + //首页大卡片恢复显示 + topGroup.addEventListener("mouseleave", function () { + document.getElementById("todayCard").classList.remove("hide"); + document.getElementById("todayCard").style.zIndex = 1; + }); + }; + + // 表情放大 + const owoBig = function () { + let flag = 1, // 设置节流阀 + owo_time = "", // 设置计时器 + m = 3; // 设置放大倍数 + // 创建盒子 + let div = document.createElement("div"); + // 设置ID + div.id = "owo-big"; + // 插入盒子 + let body = document.querySelector("body"); + body.appendChild(div); + + // 监听 post-comment 元素的子元素添加事件 + const observer = new MutationObserver(mutations => { + mutations.forEach(mutation => { + const addedNodes = mutation.addedNodes; + // 判断新增的节点中是否包含 OwO-body 类名的元素 + for (let i = 0; i < addedNodes.length; i++) { + const node = addedNodes[i]; + if ( + node.nodeType === Node.ELEMENT_NODE && + node.classList.contains("OwO-body") && + !node.classList.contains("comment-barrage") + ) { + const owo_body = node; + // 禁用右键（手机端长按会出现右键菜单，为了体验给禁用掉） + owo_body.addEventListener("contextmenu", e => e.preventDefault()); + // 鼠标移入 + owo_body.addEventListener("mouseover", handleMouseOver); + // 鼠标移出 + owo_body.addEventListener("mouseout", handleMouseOut); + } + } + }); + }); + + // 配置 MutationObserver 选项 + const config = { childList: true, subtree: true }; + + // 开始监听 + observer.observe(document.getElementById("post-comment"), config); + + function handleMouseOver(e) { + if (e.target.tagName == "IMG" && flag) { + flag = 0; + // 移入100毫秒后显示盒子 + owo_time = setTimeout(() => { + let height = e.target.clientHeight * m; // 盒子高 + let width = e.target.clientWidth * m; // 盒子宽 + let left = e.x - e.offsetX - (width - e.target.clientWidth) / 2; // 盒子与屏幕左边距离 + if (left + width > body.clientWidth) { + left -= left + width - body.clientWidth + 10; + } // 右边缘检测，防止超出屏幕 + if (left < 0) left = 10; // 左边缘检测，防止超出屏幕 + let top = e.y - e.offsetY; // 盒子与屏幕顶部距离 + + // 设置盒子样式 + div.style.height = height + "px"; + div.style.width = width + "px"; + div.style.left = left + "px"; + div.style.top = top + "px"; + div.style.display = "flex"; + // 在盒子中插入图片 + div.innerHTML = ``; + }, 100); + } + } + + function handleMouseOut(e) { + // 隐藏盒子 + div.style.display = "none"; + flag = 1; + clearTimeout(owo_time); + } + }; + + //封面纯色 + const coverColor = async () => { + const root = document.querySelector(":root"); + const path = document.getElementById("post-top-bg")?.src; + if (!path) { + // 非文章情况，直接设置不需要请求了 + root.style.setProperty("--anzhiyu-bar-background", "var(--anzhiyu-meta-theme-color)"); + requestAnimationFrame(() => { + anzhiyu.initThemeColor(); + }); + + // 要改回来默认主色 + document.documentElement.style.setProperty( + "--anzhiyu-main", + getComputedStyle(document.documentElement).getPropertyValue("--anzhiyu-theme") + ); + document.documentElement.style.setProperty( + "--anzhiyu-theme-op", + getComputedStyle(document.documentElement).getPropertyValue("--anzhiyu-main") + "23" + ); + document.documentElement.style.setProperty( + "--anzhiyu-theme-op-deep", + getComputedStyle(document.documentElement).getPropertyValue("--anzhiyu-main") + "dd" + ); + + return; + } + + // 文章内 + if (GLOBAL_CONFIG.mainTone) { + if (GLOBAL_CONFIG_SITE.postMainColor) { + let value = GLOBAL_CONFIG_SITE.postMainColor; + if (getContrastYIQ(value) === "light") { + value = LightenDarkenColor(colorHex(value), -40); + } + + root.style.setProperty("--anzhiyu-bar-background", value); + requestAnimationFrame(() => { + anzhiyu.initThemeColor(); + }); + + if (GLOBAL_CONFIG.mainTone.cover_change) { + document.documentElement.style.setProperty("--anzhiyu-main", value); + document.documentElement.style.setProperty( + "--anzhiyu-theme-op", + getComputedStyle(document.documentElement).getPropertyValue("--anzhiyu-main") + "23" + ); + document.documentElement.style.setProperty( + "--anzhiyu-theme-op-deep", + getComputedStyle(document.documentElement).getPropertyValue("--anzhiyu-main") + "dd" + ); + } + } else { + const fallbackValue = "var(--anzhiyu-theme)"; + let fetchPath = ""; + if (GLOBAL_CONFIG.mainTone.mode == "cdn" || GLOBAL_CONFIG.mainTone.mode == "both") { + fetchPath = path + "?imageAve"; + } else if (GLOBAL_CONFIG.mainTone.mode == "api") { + fetchPath = GLOBAL_CONFIG.mainTone.api + path; + } + // cdn/api模式请求 + try { + const response = await fetch(fetchPath); + if (response.ok && response.headers.get("content-type")?.includes("application/json")) { + const obj = await response.json(); + let value = + GLOBAL_CONFIG.mainTone.mode == "cdn" || GLOBAL_CONFIG.mainTone.mode == "both" + ? "#" + obj.RGB.slice(2) + : obj.RGB; + if (getContrastYIQ(value) === "light") { + value = LightenDarkenColor(colorHex(value), -40); + } + + root.style.setProperty("--anzhiyu-bar-background", value); + requestAnimationFrame(() => { + anzhiyu.initThemeColor(); + }); + + if (GLOBAL_CONFIG.mainTone.cover_change) { + document.documentElement.style.setProperty("--anzhiyu-main", value); + document.documentElement.style.setProperty( + "--anzhiyu-theme-op", + getComputedStyle(document.documentElement).getPropertyValue("--anzhiyu-main") + "23" + ); + document.documentElement.style.setProperty( + "--anzhiyu-theme-op-deep", + getComputedStyle(document.documentElement).getPropertyValue("--anzhiyu-main") + "dd" + ); + } + } else { + if (GLOBAL_CONFIG.mainTone.mode == "both") { + // both继续请求 + try { + const response = await fetch(GLOBAL_CONFIG.mainTone.api + path); + if (response.ok && response.headers.get("content-type")?.includes("application/json")) { + const obj = await response.json(); + let value = obj.RGB; + + if (getContrastYIQ(value) === "light") { + value = LightenDarkenColor(colorHex(value), -40); + } + + root.style.setProperty("--anzhiyu-bar-background", value); + requestAnimationFrame(() => { + anzhiyu.initThemeColor(); + }); + + if (GLOBAL_CONFIG.mainTone.cover_change) { + document.documentElement.style.setProperty("--anzhiyu-main", value); + document.documentElement.style.setProperty( + "--anzhiyu-theme-op", + getComputedStyle(document.documentElement).getPropertyValue("--anzhiyu-main") + "23" + ); + document.documentElement.style.setProperty( + "--anzhiyu-theme-op-deep", + getComputedStyle(document.documentElement).getPropertyValue("--anzhiyu-main") + "dd" + ); + } + } else { + root.style.setProperty("--anzhiyu-bar-background", fallbackValue); + requestAnimationFrame(() => { + anzhiyu.initThemeColor(); + }); + document.documentElement.style.setProperty("--anzhiyu-main", fallbackValue); + } + } catch { + root.style.setProperty("--anzhiyu-bar-background", fallbackValue); + requestAnimationFrame(() => { + anzhiyu.initThemeColor(); + }); + document.documentElement.style.setProperty("--anzhiyu-main", fallbackValue); + } + } else { + root.style.setProperty("--anzhiyu-bar-background", fallbackValue); + requestAnimationFrame(() => { + anzhiyu.initThemeColor(); + }); + document.documentElement.style.setProperty("--anzhiyu-main", fallbackValue); + } + } + } catch (err) { + console.error("Error fetching data:", err); + root.style.setProperty("--anzhiyu-bar-background", fallbackValue); + requestAnimationFrame(() => { + anzhiyu.initThemeColor(); + }); + document.documentElement.style.setProperty("--anzhiyu-main", fallbackValue); + } + } + } + }; + + //RGB颜色转化为16进制颜色 + const colorHex = str => { + const hexRegex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/; + + if (/^(rgb|RGB)/.test(str)) { + const aColor = str.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(","); + return aColor.reduce((acc, val) => { + const hex = Number(val).toString(16).padStart(2, "0"); + return acc + hex; + }, "#"); + } + + if (hexRegex.test(str)) { + if (str.length === 4) { + return Array.from(str.slice(1)).reduce((acc, val) => acc + val + val, "#"); + } + return str; + } + + return str; + }; + + // Lighten or darken a color + const LightenDarkenColor = (col, amt) => { + const usePound = col.startsWith("#"); + + if (usePound) { + col = col.slice(1); + } + + let num = parseInt(col, 16); + + const processColor = (colorValue, amount) => { + colorValue += amount; + return colorValue > 255 ? 255 : colorValue < 0 ? 0 : colorValue; + }; + + const r = processColor(num >> 16, amt); + const b = processColor((num >> 8) & 0x00ff, amt); + const g = processColor(num & 0x0000ff, amt); + + return (usePound ? "#" : "") + String("000000" + (g | (b << 8) | (r << 16)).toString(16)).slice(-6); + }; + + // Determine whether a color is light or dark + const getContrastYIQ = hexcolor => { + const colorRgb = color => { + const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; + color = color.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b); + + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color); + return result ? `rgb(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)})` : null; + }; + + const colorrgb = colorRgb(hexcolor); + const colors = colorrgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); + + const [_, red, green, blue] = colors; + + const brightness = (red * 299 + green * 587 + blue * 114) / 255000; + + return brightness >= 0.5 ? "light" : "dark"; + }; + + //监听跳转页面输入框是否按下回车 + const listenToPageInputPress = function () { + var input = document.getElementById("toPageText"); + if (input) { + input.addEventListener("keydown", event => { + if (event.keyCode === 13) { + // 如果按下的是回车键，则执行特定的函数 + anzhiyu.toPage(); + var link = document.getElementById("toPageButton"); + var href = link.href; + pjax.loadUrl(href); + } + }); + } + }; + + // 监听nav是否被其他音频暂停⏸️ + const listenNavMusicPause = function () { + const timer = setInterval(() => { + if (navMusicEl && navMusicEl.querySelector("#nav-music meting-js").aplayer) { + clearInterval(timer); + let msgPlay = '播放音乐'; + let msgPause = '暂停音乐'; + navMusicEl.querySelector("#nav-music meting-js").aplayer.on("pause", function () { + navMusicEl.classList.remove("playing"); + document.getElementById("menu-music-toggle").innerHTML = msgPlay; + document.getElementById("nav-music-hoverTips").innerHTML = "音乐已暂停"; + document.querySelector("#consoleMusic").classList.remove("on"); + anzhiyu_musicPlaying = false; + navMusicEl.classList.remove("stretch"); + }); + navMusicEl.querySelector("#nav-music meting-js").aplayer.on("play", function () { + navMusicEl.classList.add("playing"); + document.getElementById("menu-music-toggle").innerHTML = msgPause; + document.querySelector("#consoleMusic").classList.add("on"); + anzhiyu_musicPlaying = true; + // navMusicEl.classList.add("stretch"); + }); + } + }, 16); + }; + + // 开发者工具键盘监听 + window.onkeydown = function (e) { + 123 === e.keyCode && anzhiyu.snackbarShow("开发者模式已打开，请遵循GPL协议", !1); + }; + + // 欢迎语 + function greetingInit() { + const greetingBoxInfo = GLOBAL_CONFIG.greetingBox.list; + const greetingBoxDefault = GLOBAL_CONFIG.greetingBox.default; + //- 创建盒子 + let div = document.createElement("div"); + //- 设置ID + div.id = "greeting"; + //- 设置class + setTimeout(() => { + div.classList.add("shown"); + }, 1000); + //- 插入盒子 + let greetingBox = document.getElementById("greetingBox"); + if (!greetingBox) return; + greetingBox.appendChild(div); + const nowTime = new Date().getHours(); + let greetings = greetingBoxDefault; + for (let i = 0; i < greetingBoxInfo.length; i++) { + if (nowTime >= greetingBoxInfo[i].startTime && nowTime <= greetingBoxInfo[i].endTime) { + greetings = greetingBoxInfo[i].greeting; + break; + } + } + div.innerHTML = greetings; + setTimeout(() => { + div.classList.remove("shown"); + setTimeout(() => { + greetingBox.remove(); + }, 500); + }, 3000); + } + function statistics51aInit() { + const loadScript = (url, charset = "UTF-8", crossorigin, id) => { + return new Promise((resolve, reject) => { + const script = document.createElement("script"); + script.src = url; + script.async = true; + if (id) { + script.setAttribute("id", id); + } + if (charset) { + script.setAttribute("charset", charset); + } + if (crossorigin) { + script.setAttribute("crossorigin", crossorigin); + } + script.onerror = reject; + script.onload = script.onreadystatechange = function () { + const loadState = this.readyState; + if (loadState && loadState !== "loaded" && loadState !== "complete") return; + script.onload = script.onreadystatechange = null; + resolve(); + }; + document.head.appendChild(script); + }); + }; + + const scriptUrls = [ + { url: "https://sdk.51.la/js-sdk-pro.min.js", charset: "UTF-8", crossorigin: false, id: "LA_COLLECT" }, + { url: "https://sdk.51.la/perf/js-sdk-perf.min.js", crossorigin: "anonymous" }, + ]; + + Promise.all(scriptUrls.map(({ url, charset, crossorigin, id }) => loadScript(url, charset, crossorigin, id))) + .then(() => { + LA.init({ id: GLOBAL_CONFIG.LA51.ck, ck: GLOBAL_CONFIG.LA51.ck }); + new LingQue.Monitor().init({ id: GLOBAL_CONFIG.LA51.LingQueMonitorID, sendSuspicious: true }); + }) + .catch(error => { + console.error("加载51a统计异常，本地加载403是正常情况:", error); + }); + } + + function setInputFocusListener() { + const inputs = document.querySelectorAll("input, textarea"); + const filteredinputs = Array.from(inputs).filter(heading => { + if (heading.id !== "center-console" || heading.id !== "page-type") { + return; + } + }); + filteredinputs.forEach(input => { + input.addEventListener("focus", () => { + anzhiyu_intype = true; + }); + + input.addEventListener("blur", () => { + anzhiyu_intype = false; + }); + }); + } + + // 是否开启快捷键 + function executeShortcutKeyFunction() { + // 是否开启快捷键 + anzhiyu_keyboard = localStorage.getItem("keyboardToggle") ? localStorage.getItem("keyboardToggle") : false; + function addKeyShotListener() { + const windowObject = window; + windowObject.removeEventListener("keydown", keyDownEvent); + windowObject.removeEventListener("keyup", keyUpEvent); + windowObject.addEventListener("keydown", keyDownEvent); + windowObject.addEventListener("keyup", keyUpEvent); + } + + function keyDownEvent(event) { + const isEscapeKeyPressed = event.keyCode === 27; + const isShiftKeyPressed = event.shiftKey; + const isKeyboardEnabled = anzhiyu_keyboard; + const isInInputField = anzhiyu_intype; + + if (isEscapeKeyPressed) { + anzhiyu.hideLoading(); + anzhiyu.hideConsole(); + rm && rm.hideRightMenu(); + } + const shortcutKeyDelay = GLOBAL_CONFIG.shortcutKey.delay ? GLOBAL_CONFIG.shortcutKey.delay : 100; + const shortcutKeyShiftDelay = GLOBAL_CONFIG.shortcutKey.shiftDelay ? GLOBAL_CONFIG.shortcutKey.shiftDelay : 200; + if (isKeyboardEnabled && isShiftKeyPressed && !isInInputField) { + anzhiyu_keyUpShiftDelayEvent_timeoutId = setTimeout(() => { + switch (event.keyCode) { + case 16: + anzhiyu_keyUpEvent_timeoutId = setTimeout(() => { + document.querySelector("#keyboard-tips").classList.add("show"); + }, shortcutKeyShiftDelay); + break; + case 65: + anzhiyu.switchConsole(); + break; + case 77: + anzhiyu.musicToggle(); + break; + case 75: + anzhiyu.keyboardToggle(); + break; + case 73: + anzhiyu.rightMenuToggle(); + break; + case 82: + toRandomPost(); + break; + case 72: + pjax.loadUrl("/"); + break; + case 68: + rightSideFn.darkmode(); + break; + case 70: + pjax.loadUrl("/fcircle/"); + break; + case 76: + pjax.loadUrl("/link/"); + break; + case 80: + pjax.loadUrl("/about/"); + break; + default: + break; + } + event.preventDefault(); + }, shortcutKeyDelay); + } + } + + window.onfocus = function () { + document.getElementById("keyboard-tips").classList.remove("show"); + }; + + function keyUpEvent(event) { + anzhiyu_keyUpEvent_timeoutId && clearTimeout(anzhiyu_keyUpEvent_timeoutId); + anzhiyu_keyUpShiftDelayEvent_timeoutId && clearTimeout(anzhiyu_keyUpShiftDelayEvent_timeoutId); + if (event.keyCode === 16) { + const keyboardTips = document.querySelector("#keyboard-tips"); + keyboardTips.classList.remove("show"); + } + } + + addKeyShotListener(); + } + + function changeDocumentTitle() { + let leaveTitle = GLOBAL_CONFIG.diytitle.leaveTitle; + let backTitle = GLOBAL_CONFIG.diytitle.backTitle; + let OriginTitile = document.title; + let titleTime; + + document.addEventListener("visibilitychange", function () { + if (document.hidden) { + //离开当前页面时标签显示内容 + document.title = leaveTitle; + clearTimeout(titleTime); + } else { + //返回当前页面时标签显示内容 + document.title = backTitle + OriginTitile; + //两秒后变回正常标题 + titleTime = setTimeout(function () { + document.title = OriginTitile; + }, 2000); + } + }); + } + + function addDarkModeEventListener(elementId, childSelector) { + const element = document.getElementById(elementId); + if (element && childSelector) { + const childElement = element.querySelector(childSelector); + childElement && childElement.addEventListener("click", rightSideFn.darkmode); + } else if (element) { + element.addEventListener("click", rightSideFn.darkmode); + } + } + + const unRefreshFn = function () { + window.addEventListener("resize", () => { + adjustMenu(false); + mobileSidebarOpen && anzhiyu.isHidden(document.getElementById("toggle-menu")) && sidebarFn.close(); + }); + + document.getElementById("menu-mask").addEventListener("click", e => { + sidebarFn.close(); + }); + + // 处理右键 + $rightMenu = document.getElementById("rightMenu"); + addDarkModeEventListener("menu-darkmode"); + addDarkModeEventListener("sidebar", ".darkmode_switchbutton"); + + clickFnOfSubMenu(); + GLOBAL_CONFIG.islazyload && lazyloadImg(); + GLOBAL_CONFIG.copyright !== undefined && addCopyright(); + GLOBAL_CONFIG.navMusic && listenNavMusicPause(); + if (GLOBAL_CONFIG.shortcutKey && document.getElementById("consoleKeyboard")) { + localStorage.setItem("keyboardToggle", "true"); + document.getElementById("consoleKeyboard").classList.add("on"); + anzhiyu_keyboard = true; + executeShortcutKeyFunction(); + } + if (GLOBAL_CONFIG.autoDarkmode) { + window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => { + if (saveToLocal.get("theme") !== undefined) return; + e.matches ? handleThemeChange("dark") : handleThemeChange("light"); + }); + } + // 欢迎语 + GLOBAL_CONFIG.greetingBox && greetingInit(); + // 51la统计&灵雀统计 + GLOBAL_CONFIG.LA51 && statistics51aInit(); + }; + + window.refreshFn = function () { + initAdjust(); + themeColorMeta = document.querySelector('meta[name="theme-color"]'); + pageHeaderEl = document.getElementById("page-header"); + navMusicEl = document.getElementById("nav-music"); + consoleEl = document.getElementById("console"); + + addDarkModeEventListener("console", ".darkmode_switchbutton"); + + if (GLOBAL_CONFIG_SITE.isPost) { + GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice(); + GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll("#post-meta time")); + } else { + if (GLOBAL_CONFIG.relativeDate.homepage) { + relativeDate(document.querySelectorAll("#recent-posts time")); + } else if (GLOBAL_CONFIG.relativeDate.simplehomepage) { + relativeDate(document.querySelectorAll("#recent-posts time"), true); + } + GLOBAL_CONFIG.runtime && addRuntime(); + addLastPushDate(); + toggleCardCategory(); + } + + GLOBAL_CONFIG.diytitle && changeDocumentTitle(); + scrollFnToDo(); + GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex(); + addHighlightTool(); + GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption(); + scrollFn(); + + // 刷新时第一次滚动百分比 + window.scrollCollect && window.scrollCollect(); + + const $jgEle = document.querySelectorAll("#content-inner .fj-gallery"); + $jgEle.length && runJustifiedGallery($jgEle); + + runLightbox(); + addTableWrap(); + clickFnOfTagHide(); + tabsFn(); + switchComments(); + document.getElementById("toggle-menu").addEventListener("click", () => { + sidebarFn.open(); + }); + + // 如果当前页有评论就执行函数 + if (document.getElementById("post-comment")) owoBig(); + + mouseleaveHomeCard(); + coverColor(); + listenToPageInputPress(); + openMobileMenu(); + + // needRefresh + // nav中间的标题变化 + document.getElementById("page-name").innerText = document.title.split(` | ${GLOBAL_CONFIG_SITE.configTitle}`)[0]; + anzhiyu.initIndexEssay(); + anzhiyu.changeTimeInEssay(); + anzhiyu.removeBodyPaceClass(); + anzhiyu.qrcodeCreate(); + anzhiyu.changeTimeInAlbumDetail(); + anzhiyu.reflashEssayWaterFall(); + anzhiyu.sayhi(); + anzhiyu.stopImgRightDrag(); + anzhiyu.addNavBackgroundInit(); + anzhiyu.setValueToBodyType(); + anzhiyu.catalogActive(); + anzhiyu.tagsPageActive(); + anzhiyu.categoriesBarActive(); + anzhiyu.topCategoriesBarScroll(); + anzhiyu.switchRightClickMenuHotReview(); + anzhiyu.getCustomPlayList(); + anzhiyu.addEventListenerConsoleMusicList(false); + anzhiyu.initPaginationObserver(); + + setTimeout(() => { + setInputFocusListener(); + if (typeof addFriendLinksInFooter === "function") { + addFriendLinksInFooter(); + } + }, 200); + }; + + refreshFn(); + unRefreshFn(); +}); diff --git a/js/search/algolia.js b/js/search/algolia.js new file mode 100644 index 0000000000..e004701b39 --- /dev/null +++ b/js/search/algolia.js @@ -0,0 +1,192 @@ +window.addEventListener("load", () => { + const $searchMask = document.getElementById("search-mask"); + const $searchDialog = document.querySelector("#algolia-search .search-dialog"); + + const openSearch = () => { + anzhiyu.animateIn($searchMask, "to_show 0.5s"); + $searchDialog.style.display = "block"; + setTimeout(() => { + document.querySelector("#algolia-search .ais-SearchBox-input").focus(); + }, 100); + + // shortcut: ESC + document.addEventListener("keydown", function f(event) { + if (event.code === "Escape") { + closeSearch(); + document.removeEventListener("keydown", f); + } + }); + + fixSafariHeight(); + window.addEventListener("resize", fixSafariHeight); + }; + + // shortcut: shift+S + if (anzhiyu_keyboard) { + window.addEventListener("keydown", function (event) { + if (event.keyCode == 83 && event.shiftKey) { + console.info(selectTextNow); + if (selectTextNow) { + openSearch(); + const t = document.querySelector("#algolia-search-input > div > form > input"); + t.value = selectTextNow; + t.dispatchEvent(new Event("input")); + setTimeout(() => { + document.querySelector("#algolia-search-input > div > form > button.ais-SearchBox-submit").click(); + }, 64); + } else { + openSearch(); + } + + return false; + } + }); + } + + const closeSearch = () => { + anzhiyu.animateOut($searchDialog, "search_close .5s"); + anzhiyu.animateOut($searchMask, "to_hide 0.5s"); + window.removeEventListener("resize", fixSafariHeight); + }; + + // fix safari + const fixSafariHeight = () => { + if (window.innerWidth < 768) { + $searchDialog.style.setProperty("--search-height", window.innerHeight + "px"); + } + }; + + const searchClickFn = () => { + anzhiyu.addEventListenerPjax(document.querySelector("#search-button > .search"), "click", openSearch); + }; + + const searchFnOnce = () => { + $searchMask.addEventListener("click", closeSearch); + document.querySelector("#algolia-search .search-close-button").addEventListener("click", closeSearch); + }; + + const algolia = GLOBAL_CONFIG.algolia; + const isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName; + if (!isAlgoliaValid) { + return console.error("Algolia setting is invalid!"); + } + + const search = instantsearch({ + indexName: algolia.indexName, + /* global algoliasearch */ + searchClient: algoliasearch(algolia.appId, algolia.apiKey), + searchFunction(helper) { + if (helper.state.query) { + let innerLoading = ''; + document.getElementById("algolia-hits").innerHTML = innerLoading; + helper.search(); + } + }, + }); + + const configure = instantsearch.widgets.configure({ + hitsPerPage: algolia.hits.per_page ?? 5, + }); + + const searchBox = instantsearch.widgets.searchBox({ + container: "#algolia-search-input", + showReset: false, + showSubmit: false, + placeholder: algolia.languages.input_placeholder, + showLoadingIndicator: true, + searchOnEnterKeyPressOnly: true, + searchAsYouType: false, + }); + + const hits = instantsearch.widgets.hits({ + container: "#algolia-hits", + templates: { + item(data) { + const link = data.permalink ? data.permalink : GLOBAL_CONFIG.root + data.path; + const result = data._highlightResult; + const loadingLogo = document.querySelector("#algolia-hits .anzhiyu-spin"); + if (loadingLogo) { + loadingLogo.style.display = "none"; + } + setTimeout(() => { + document.querySelector("#algolia-search .ais-SearchBox-input").focus(); + }, 200); + return ` + + ${result.title.value || "no-title"} + `; + }, + empty: function (data) { + const loadingLogo = document.querySelector("#algolia-hits .anzhiyu-spin"); + console.info(loadingLogo); + if (loadingLogo) { + loadingLogo.style.display = "none"; + } + setTimeout(() => { + document.querySelector("#algolia-search .ais-SearchBox-input").focus(); + }, 200); + return ( + '
    ' + + GLOBAL_CONFIG.algolia.languages.hits_empty.replace(/\$\{query}/, data.query) + + "
    " + ); + }, + }, + cssClasses: { + item: "algolia-hit-item", + }, + }); + + const stats = instantsearch.widgets.stats({ + container: "#algolia-info > .algolia-stats", + templates: { + text: function (data) { + const stats = GLOBAL_CONFIG.algolia.languages.hits_stats + .replace(/\$\{hits}/, data.nbHits) + .replace(/\$\{time}/, data.processingTimeMS); + return `
    ${stats}`; + }, + }, + }); + + const powerBy = instantsearch.widgets.poweredBy({ + container: "#algolia-info > .algolia-poweredBy", + }); + + const pagination = instantsearch.widgets.pagination({ + container: "#algolia-pagination", + totalPages: algolia.hits.per_page ?? 5, + templates: { + first: '', + last: '', + previous: '', + next: '', + }, + scrollTo: false, + showFirstLast: false, + cssClasses: { + root: "pagination", + item: "pagination-item", + link: "page-number", + active: "current", + disabled: "disabled-item", + }, + }); + + search.addWidgets([configure, searchBox, hits, stats, powerBy, pagination]); // add the widgets to the instantsearch instance + + search.start(); + + searchClickFn(); + searchFnOnce(); + + window.addEventListener("pjax:complete", () => { + !anzhiyu.isHidden($searchMask) && closeSearch(); + searchClickFn(); + }); + + window.pjax && + search.on("render", () => { + window.pjax.refresh(document.getElementById("algolia-hits")); + }); +}); diff --git a/js/search/local-search.js b/js/search/local-search.js new file mode 100644 index 0000000000..44b5d62ff2 --- /dev/null +++ b/js/search/local-search.js @@ -0,0 +1,270 @@ +window.addEventListener("load", () => { + let loadFlag = false; + let dataObj = []; + const $searchMask = document.getElementById("search-mask"); + + const openSearch = () => { + const bodyStyle = document.body.style; + bodyStyle.width = "100%"; + bodyStyle.overflow = "hidden"; + anzhiyu.animateIn($searchMask, "to_show 0.5s"); + anzhiyu.animateIn(document.querySelector("#local-search .search-dialog"), "titleScale 0.5s"); + setTimeout(() => { + document.querySelector("#local-search-input input").focus(); + }, 100); + if (!loadFlag) { + search(); + loadFlag = true; + } + // shortcut: ESC + document.addEventListener("keydown", function f(event) { + if (event.code === "Escape") { + closeSearch(); + document.removeEventListener("keydown", f); + } + }); + }; + + const closeSearch = () => { + const bodyStyle = document.body.style; + bodyStyle.width = ""; + bodyStyle.overflow = ""; + anzhiyu.animateOut(document.querySelector("#local-search .search-dialog"), "search_close .5s"); + anzhiyu.animateOut($searchMask, "to_hide 0.5s"); + }; + + const searchClickFn = () => { + document.querySelector("#search-button > .search").addEventListener("click", openSearch); + document.querySelector("#menu-search").addEventListener("click", openSearch); + }; + + const searchClickFnOnce = () => { + document.querySelector("#local-search .search-close-button").addEventListener("click", closeSearch); + $searchMask.addEventListener("click", closeSearch); + if (GLOBAL_CONFIG.localSearch.preload) dataObj = fetchData(GLOBAL_CONFIG.localSearch.path); + }; + + // check url is json or not + const isJson = url => { + const reg = /\.json$/; + return reg.test(url); + }; + + const fetchData = async path => { + let data = []; + const response = await fetch(path); + if (isJson(path)) { + data = await response.json(); + } else { + const res = await response.text(); + const t = await new window.DOMParser().parseFromString(res, "text/xml"); + const a = await t; + + data = [...a.querySelectorAll("entry")].map(item => { + let tagsArr = []; + if (item.querySelector("tags") && item.querySelector("tags").getElementsByTagName("tag")) { + Array.prototype.forEach.call(item.querySelector("tags").getElementsByTagName("tag"), function (item, index) { + tagsArr.push(item.textContent); + }); + } + let content = item.querySelector("content") && item.querySelector("content").textContent; + let imgReg = /|\/>)/gi; //匹配图片中的img标签 + let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配图片中的src + let arr = content.match(imgReg); //筛选出所有的img + + let srcArr = []; + if (arr) { + for (let i = 0; i < arr.length; i++) { + let src = arr[i].match(srcReg); + // 获取图片地址 + if (!src[1].indexOf("http")) srcArr.push(src[1]); + } + } + + return { + title: item.querySelector("title").textContent, + content: content, + url: item.querySelector("url").textContent, + tags: tagsArr, + oneImage: srcArr && srcArr[0], + }; + }); + } + if (response.ok) { + const $loadDataItem = document.getElementById("loading-database"); + $loadDataItem.nextElementSibling.style.display = "block"; + $loadDataItem.remove(); + } + return data; + }; + + const search = () => { + if (!GLOBAL_CONFIG.localSearch.preload) { + dataObj = fetchData(GLOBAL_CONFIG.localSearch.path); + } + const $input = document.querySelector("#local-search-input input"); + const $resultContent = document.getElementById("local-search-results"); + const $loadingStatus = document.getElementById("loading-status"); + + $input.addEventListener("input", function () { + const keywords = this.value.trim().toLowerCase().split(/[\s]+/); + if (keywords[0] !== "") + $loadingStatus.innerHTML = ''; + + $resultContent.innerHTML = ""; + let str = '
    '; + if (keywords.length <= 0) return; + let count = 0; + // perform local searching + dataObj.then(data => { + data.forEach(data => { + let isMatch = true; + let dataTitle = data.title ? data.title.trim().toLowerCase() : ""; + let dataTags = data.tags; + let oneImage = data.oneImage ?? ""; + const dataContent = data.content + ? data.content + .trim() + .replace(/<[^>]+>/g, "") + .toLowerCase() + : ""; + const dataUrl = data.url.startsWith("/") ? data.url : GLOBAL_CONFIG.root + data.url; + let indexTitle = -1; + let indexContent = -1; + let firstOccur = -1; + // only match articles with not empty titles and contents + if (dataTitle !== "" || dataContent !== "") { + keywords.forEach((keyword, i) => { + indexTitle = dataTitle.indexOf(keyword); + indexContent = dataContent.indexOf(keyword); + if (indexTitle < 0 && indexContent < 0) { + isMatch = false; + } else { + if (indexContent < 0) { + indexContent = 0; + } + if (i === 0) { + firstOccur = indexContent; + } + } + }); + } else { + isMatch = false; + } + + // show search results + if (isMatch) { + if (firstOccur >= 0) { + // cut out 130 characters + // let start = firstOccur - 30 < 0 ? 0 : firstOccur - 30 + // let end = firstOccur + 50 > dataContent.length ? dataContent.length : firstOccur + 50 + let start = firstOccur - 30; + let end = firstOccur + 100; + let pre = ""; + let post = ""; + + if (start < 0) { + start = 0; + } + + if (start === 0) { + end = 100; + } else { + pre = "..."; + } + + if (end > dataContent.length) { + end = dataContent.length; + } else { + post = "..."; + } + + let matchContent = dataContent.substring(start, end); + + // highlight all keywords + keywords.forEach(keyword => { + const regS = new RegExp(keyword, "gi"); + matchContent = matchContent.replace(regS, '' + keyword + ""); + dataTitle = dataTitle.replace(regS, '' + keyword + ""); + }); + + str += '
    '; + if (oneImage) { + str += `
    ${dataTitle}`; + } else { + str += '
    '; + } + + str += "
    "; + + if (oneImage) { + str += + '
    ' + + dataTitle + + ""; + } else { + str += + '
    ' + + dataTitle + + ""; + } + + count += 1; + + if (dataContent !== "") { + str += + '

    ' + + pre + + matchContent + + post + + "

    "; + } + if (dataTags.length) { + str += '
    '; + + for (let i = 0; i < dataTags.length; i++) { + const element = dataTags[i].trim(); + + str += + '#' + + element + + ""; + } + + str += "
    "; + } + } + str += "
    "; + } + }); + if (count === 0) { + str += + '
    ' + + GLOBAL_CONFIG.localSearch.languages.hits_empty.replace(/\$\{query}/, this.value.trim()) + + "
    "; + } + str += "
    "; + $resultContent.innerHTML = str; + if (keywords[0] !== "") $loadingStatus.innerHTML = ""; + window.pjax && window.pjax.refresh($resultContent); + }); + }); + }; + + searchClickFn(); + searchClickFnOnce(); + + // pjax + window.addEventListener("pjax:complete", () => { + !anzhiyu.isHidden($searchMask) && closeSearch(); + searchClickFn(); + }); +}); diff --git a/js/tw_cn.js b/js/tw_cn.js new file mode 100644 index 0000000000..86a0d7b033 --- /dev/null +++ b/js/tw_cn.js @@ -0,0 +1,130 @@ +document.addEventListener('DOMContentLoaded', function () { + const { defaultEncoding, translateDelay, msgToTraditionalChinese, msgToSimplifiedChinese } = GLOBAL_CONFIG.translate + const snackbarData = GLOBAL_CONFIG.Snackbar + let currentEncoding = defaultEncoding + const targetEncodingCookie = 'translate-chn-cht' + let targetEncoding = + saveToLocal.get(targetEncodingCookie) === undefined + ? defaultEncoding + : Number(saveToLocal.get('translate-chn-cht')) + let translateButtonObject, translateRightMenuButtonObject; + const isSnackbar = snackbarData !== undefined + + function setLang () { + document.documentElement.lang = targetEncoding === 1 ? 'zh-TW' : 'zh-CN' + } + + 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) { + let objs + if (typeof fobj === 'object') objs = fobj.childNodes + else objs = document.body.childNodes + for (let i = 0; i < objs.length; i++) { + const obj = objs.item(i) + if ( + '||BR|HR|'.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.placeholder !== '' && obj.placeholder != null) { obj.placeholder = translateText(obj.placeholder) } + 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.textContent = msgToTraditionalChinese + isSnackbar && anzhiyu.snackbarShow(snackbarData.cht_to_chs) + } else if (targetEncoding === 2) { + currentEncoding = 2 + targetEncoding = 1 + translateButtonObject.textContent = msgToSimplifiedChinese + isSnackbar && anzhiyu.snackbarShow(snackbarData.chs_to_cht) + } + saveToLocal.set(targetEncodingCookie, targetEncoding, 2) + setLang() + translateBody() + } + + function JTPYStr () { + return '万与丑专业丛东丝丢两严丧个丬丰临为丽举么义乌乐乔习乡书买乱争于亏云亘亚产亩亲亵亸亿仅从仑仓仪们价众优伙会伛伞伟传伤伥伦伧伪伫体余佣佥侠侣侥侦侧侨侩侪侬俣俦俨俩俪俭债倾偬偻偾偿傥傧储傩儿兑兖党兰关兴兹养兽冁内冈册写军农冢冯冲决况冻净凄凉凌减凑凛几凤凫凭凯击凼凿刍划刘则刚创删别刬刭刽刿剀剂剐剑剥剧劝办务劢动励劲劳势勋勐勚匀匦匮区医华协单卖卢卤卧卫却卺厂厅历厉压厌厍厕厢厣厦厨厩厮县参叆叇双发变叙叠叶号叹叽吁后吓吕吗吣吨听启吴呒呓呕呖呗员呙呛呜咏咔咙咛咝咤咴咸哌响哑哒哓哔哕哗哙哜哝哟唛唝唠唡唢唣唤唿啧啬啭啮啰啴啸喷喽喾嗫呵嗳嘘嘤嘱噜噼嚣嚯团园囱围囵国图圆圣圹场坂坏块坚坛坜坝坞坟坠垄垅垆垒垦垧垩垫垭垯垱垲垴埘埙埚埝埯堑堕塆墙壮声壳壶壸处备复够头夸夹夺奁奂奋奖奥妆妇妈妩妪妫姗姜娄娅娆娇娈娱娲娴婳婴婵婶媪嫒嫔嫱嬷孙学孪宁宝实宠审宪宫宽宾寝对寻导寿将尔尘尧尴尸尽层屃屉届属屡屦屿岁岂岖岗岘岙岚岛岭岳岽岿峃峄峡峣峤峥峦崂崃崄崭嵘嵚嵛嵝嵴巅巩巯币帅师帏帐帘帜带帧帮帱帻帼幂幞干并广庄庆庐庑库应庙庞废庼廪开异弃张弥弪弯弹强归当录彟彦彻径徕御忆忏忧忾怀态怂怃怄怅怆怜总怼怿恋恳恶恸恹恺恻恼恽悦悫悬悭悯惊惧惨惩惫惬惭惮惯愍愠愤愦愿慑慭憷懑懒懔戆戋戏戗战戬户扎扑扦执扩扪扫扬扰抚抛抟抠抡抢护报担拟拢拣拥拦拧拨择挂挚挛挜挝挞挟挠挡挢挣挤挥挦捞损捡换捣据捻掳掴掷掸掺掼揸揽揿搀搁搂搅携摄摅摆摇摈摊撄撑撵撷撸撺擞攒敌敛数斋斓斗斩断无旧时旷旸昙昼昽显晋晒晓晔晕晖暂暧札术朴机杀杂权条来杨杩杰极构枞枢枣枥枧枨枪枫枭柜柠柽栀栅标栈栉栊栋栌栎栏树栖样栾桊桠桡桢档桤桥桦桧桨桩梦梼梾检棂椁椟椠椤椭楼榄榇榈榉槚槛槟槠横樯樱橥橱橹橼檐檩欢欤欧歼殁殇残殒殓殚殡殴毁毂毕毙毡毵氇气氢氩氲汇汉污汤汹沓沟没沣沤沥沦沧沨沩沪沵泞泪泶泷泸泺泻泼泽泾洁洒洼浃浅浆浇浈浉浊测浍济浏浐浑浒浓浔浕涂涌涛涝涞涟涠涡涢涣涤润涧涨涩淀渊渌渍渎渐渑渔渖渗温游湾湿溃溅溆溇滗滚滞滟滠满滢滤滥滦滨滩滪漤潆潇潋潍潜潴澜濑濒灏灭灯灵灾灿炀炉炖炜炝点炼炽烁烂烃烛烟烦烧烨烩烫烬热焕焖焘煅煳熘爱爷牍牦牵牺犊犟状犷犸犹狈狍狝狞独狭狮狯狰狱狲猃猎猕猡猪猫猬献獭玑玙玚玛玮环现玱玺珉珏珐珑珰珲琎琏琐琼瑶瑷璇璎瓒瓮瓯电画畅畲畴疖疗疟疠疡疬疮疯疱疴痈痉痒痖痨痪痫痴瘅瘆瘗瘘瘪瘫瘾瘿癞癣癫癯皑皱皲盏盐监盖盗盘眍眦眬着睁睐睑瞒瞩矫矶矾矿砀码砖砗砚砜砺砻砾础硁硅硕硖硗硙硚确硷碍碛碜碱碹磙礼祎祢祯祷祸禀禄禅离秃秆种积称秽秾稆税稣稳穑穷窃窍窑窜窝窥窦窭竖竞笃笋笔笕笺笼笾筑筚筛筜筝筹签简箓箦箧箨箩箪箫篑篓篮篱簖籁籴类籼粜粝粤粪粮糁糇紧絷纟纠纡红纣纤纥约级纨纩纪纫纬纭纮纯纰纱纲纳纴纵纶纷纸纹纺纻纼纽纾线绀绁绂练组绅细织终绉绊绋绌绍绎经绐绑绒结绔绕绖绗绘给绚绛络绝绞统绠绡绢绣绤绥绦继绨绩绪绫绬续绮绯绰绱绲绳维绵绶绷绸绹绺绻综绽绾绿缀缁缂缃缄缅缆缇缈缉缊缋缌缍缎缏缐缑缒缓缔缕编缗缘缙缚缛缜缝缞缟缠缡缢缣缤缥缦缧缨缩缪缫缬缭缮缯缰缱缲缳缴缵罂网罗罚罢罴羁羟羡翘翙翚耢耧耸耻聂聋职聍联聩聪肃肠肤肷肾肿胀胁胆胜胧胨胪胫胶脉脍脏脐脑脓脔脚脱脶脸腊腌腘腭腻腼腽腾膑臜舆舣舰舱舻艰艳艹艺节芈芗芜芦苁苇苈苋苌苍苎苏苘苹茎茏茑茔茕茧荆荐荙荚荛荜荞荟荠荡荣荤荥荦荧荨荩荪荫荬荭荮药莅莜莱莲莳莴莶获莸莹莺莼萚萝萤营萦萧萨葱蒇蒉蒋蒌蓝蓟蓠蓣蓥蓦蔷蔹蔺蔼蕲蕴薮藁藓虏虑虚虫虬虮虽虾虿蚀蚁蚂蚕蚝蚬蛊蛎蛏蛮蛰蛱蛲蛳蛴蜕蜗蜡蝇蝈蝉蝎蝼蝾螀螨蟏衅衔补衬衮袄袅袆袜袭袯装裆裈裢裣裤裥褛褴襁襕见观觃规觅视觇览觉觊觋觌觍觎觏觐觑觞触觯詟誉誊讠计订讣认讥讦讧讨让讪讫训议讯记讱讲讳讴讵讶讷许讹论讻讼讽设访诀证诂诃评诅识诇诈诉诊诋诌词诎诏诐译诒诓诔试诖诗诘诙诚诛诜话诞诟诠诡询诣诤该详诧诨诩诪诫诬语诮误诰诱诲诳说诵诶请诸诹诺读诼诽课诿谀谁谂调谄谅谆谇谈谊谋谌谍谎谏谐谑谒谓谔谕谖谗谘谙谚谛谜谝谞谟谠谡谢谣谤谥谦谧谨谩谪谫谬谭谮谯谰谱谲谳谴谵谶谷豮贝贞负贠贡财责贤败账货质贩贪贫贬购贮贯贰贱贲贳贴贵贶贷贸费贺贻贼贽贾贿赀赁赂赃资赅赆赇赈赉赊赋赌赍赎赏赐赑赒赓赔赕赖赗赘赙赚赛赜赝赞赟赠赡赢赣赪赵赶趋趱趸跃跄跖跞践跶跷跸跹跻踊踌踪踬踯蹑蹒蹰蹿躏躜躯车轧轨轩轪轫转轭轮软轰轱轲轳轴轵轶轷轸轹轺轻轼载轾轿辀辁辂较辄辅辆辇辈辉辊辋辌辍辎辏辐辑辒输辔辕辖辗辘辙辚辞辩辫边辽达迁过迈运还这进远违连迟迩迳迹适选逊递逦逻遗遥邓邝邬邮邹邺邻郁郄郏郐郑郓郦郧郸酝酦酱酽酾酿释里鉅鉴銮錾钆钇针钉钊钋钌钍钎钏钐钑钒钓钔钕钖钗钘钙钚钛钝钞钟钠钡钢钣钤钥钦钧钨钩钪钫钬钭钮钯钰钱钲钳钴钵钶钷钸钹钺钻钼钽钾钿铀铁铂铃铄铅铆铈铉铊铋铍铎铏铐铑铒铕铗铘铙铚铛铜铝铞铟铠铡铢铣铤铥铦铧铨铪铫铬铭铮铯铰铱铲铳铴铵银铷铸铹铺铻铼铽链铿销锁锂锃锄锅锆锇锈锉锊锋锌锍锎锏锐锑锒锓锔锕锖锗错锚锜锞锟锠锡锢锣锤锥锦锨锩锫锬锭键锯锰锱锲锳锴锵锶锷锸锹锺锻锼锽锾锿镀镁镂镃镆镇镈镉镊镌镍镎镏镐镑镒镕镖镗镙镚镛镜镝镞镟镠镡镢镣镤镥镦镧镨镩镪镫镬镭镮镯镰镱镲镳镴镶长门闩闪闫闬闭问闯闰闱闲闳间闵闶闷闸闹闺闻闼闽闾闿阀阁阂阃阄阅阆阇阈阉阊阋阌阍阎阏阐阑阒阓阔阕阖阗阘阙阚阛队阳阴阵阶际陆陇陈陉陕陧陨险随隐隶隽难雏雠雳雾霁霉霭靓静靥鞑鞒鞯鞴韦韧韨韩韪韫韬韵页顶顷顸项顺须顼顽顾顿颀颁颂颃预颅领颇颈颉颊颋颌颍颎颏颐频颒颓颔颕颖颗题颙颚颛颜额颞颟颠颡颢颣颤颥颦颧风飏飐飑飒飓飔飕飖飗飘飙飚飞飨餍饤饥饦饧饨饩饪饫饬饭饮饯饰饱饲饳饴饵饶饷饸饹饺饻饼饽饾饿馀馁馂馃馄馅馆馇馈馉馊馋馌馍馎馏馐馑馒馓馔馕马驭驮驯驰驱驲驳驴驵驶驷驸驹驺驻驼驽驾驿骀骁骂骃骄骅骆骇骈骉骊骋验骍骎骏骐骑骒骓骔骕骖骗骘骙骚骛骜骝骞骟骠骡骢骣骤骥骦骧髅髋髌鬓魇魉鱼鱽鱾鱿鲀鲁鲂鲄鲅鲆鲇鲈鲉鲊鲋鲌鲍鲎鲏鲐鲑鲒鲓鲔鲕鲖鲗鲘鲙鲚鲛鲜鲝鲞鲟鲠鲡鲢鲣鲤鲥鲦鲧鲨鲩鲪鲫鲬鲭鲮鲯鲰鲱鲲鲳鲴鲵鲶鲷鲸鲹鲺鲻鲼鲽鲾鲿鳀鳁鳂鳃鳄鳅鳆鳇鳈鳉鳊鳋鳌鳍鳎鳏鳐鳑鳒鳓鳔鳕鳖鳗鳘鳙鳛鳜鳝鳞鳟鳠鳡鳢鳣鸟鸠鸡鸢鸣鸤鸥鸦鸧鸨鸩鸪鸫鸬鸭鸮鸯鸰鸱鸲鸳鸴鸵鸶鸷鸸鸹鸺鸻鸼鸽鸾鸿鹀鹁鹂鹃鹄鹅鹆鹇鹈鹉鹊鹋鹌鹍鹎鹏鹐鹑鹒鹓鹔鹕鹖鹗鹘鹚鹛鹜鹝鹞鹟鹠鹡鹢鹣鹤鹥鹦鹧鹨鹩鹪鹫鹬鹭鹯鹰鹱鹲鹳鹴鹾麦麸黄黉黡黩黪黾龙历志制一台皋准复猛钟注范签' + } + function FTPYStr () { + return '萬與醜專業叢東絲丟兩嚴喪個爿豐臨為麗舉麼義烏樂喬習鄉書買亂爭於虧雲亙亞產畝親褻嚲億僅從侖倉儀們價眾優夥會傴傘偉傳傷倀倫傖偽佇體餘傭僉俠侶僥偵側僑儈儕儂俁儔儼倆儷儉債傾傯僂僨償儻儐儲儺兒兌兗黨蘭關興茲養獸囅內岡冊寫軍農塚馮衝決況凍淨淒涼淩減湊凜幾鳳鳧憑凱擊氹鑿芻劃劉則剛創刪別剗剄劊劌剴劑剮劍剝劇勸辦務勱動勵勁勞勢勳猛勩勻匭匱區醫華協單賣盧鹵臥衛卻巹廠廳曆厲壓厭厙廁廂厴廈廚廄廝縣參靉靆雙發變敘疊葉號歎嘰籲後嚇呂嗎唚噸聽啟吳嘸囈嘔嚦唄員咼嗆嗚詠哢嚨嚀噝吒噅鹹呱響啞噠嘵嗶噦嘩噲嚌噥喲嘜嗊嘮啢嗩唕喚呼嘖嗇囀齧囉嘽嘯噴嘍嚳囁嗬噯噓嚶囑嚕劈囂謔團園囪圍圇國圖圓聖壙場阪壞塊堅壇壢壩塢墳墜壟壟壚壘墾坰堊墊埡墶壋塏堖塒塤堝墊垵塹墮壪牆壯聲殼壺壼處備複夠頭誇夾奪奩奐奮獎奧妝婦媽嫵嫗媯姍薑婁婭嬈嬌孌娛媧嫻嫿嬰嬋嬸媼嬡嬪嬙嬤孫學孿寧寶實寵審憲宮寬賓寢對尋導壽將爾塵堯尷屍盡層屭屜屆屬屢屨嶼歲豈嶇崗峴嶴嵐島嶺嶽崠巋嶨嶧峽嶢嶠崢巒嶗崍嶮嶄嶸嶔崳嶁脊巔鞏巰幣帥師幃帳簾幟帶幀幫幬幘幗冪襆幹並廣莊慶廬廡庫應廟龐廢廎廩開異棄張彌弳彎彈強歸當錄彠彥徹徑徠禦憶懺憂愾懷態慫憮慪悵愴憐總懟懌戀懇惡慟懨愷惻惱惲悅愨懸慳憫驚懼慘懲憊愜慚憚慣湣慍憤憒願懾憖怵懣懶懍戇戔戲戧戰戩戶紮撲扡執擴捫掃揚擾撫拋摶摳掄搶護報擔擬攏揀擁攔擰撥擇掛摯攣掗撾撻挾撓擋撟掙擠揮撏撈損撿換搗據撚擄摑擲撣摻摜摣攬撳攙擱摟攪攜攝攄擺搖擯攤攖撐攆擷擼攛擻攢敵斂數齋斕鬥斬斷無舊時曠暘曇晝曨顯晉曬曉曄暈暉暫曖劄術樸機殺雜權條來楊榪傑極構樅樞棗櫪梘棖槍楓梟櫃檸檉梔柵標棧櫛櫳棟櫨櫟欄樹棲樣欒棬椏橈楨檔榿橋樺檜槳樁夢檮棶檢欞槨櫝槧欏橢樓欖櫬櫚櫸檟檻檳櫧橫檣櫻櫫櫥櫓櫞簷檁歡歟歐殲歿殤殘殞殮殫殯毆毀轂畢斃氈毿氌氣氫氬氳彙漢汙湯洶遝溝沒灃漚瀝淪滄渢溈滬濔濘淚澩瀧瀘濼瀉潑澤涇潔灑窪浹淺漿澆湞溮濁測澮濟瀏滻渾滸濃潯濜塗湧濤澇淶漣潿渦溳渙滌潤澗漲澀澱淵淥漬瀆漸澠漁瀋滲溫遊灣濕潰濺漵漊潷滾滯灩灄滿瀅濾濫灤濱灘澦濫瀠瀟瀲濰潛瀦瀾瀨瀕灝滅燈靈災燦煬爐燉煒熗點煉熾爍爛烴燭煙煩燒燁燴燙燼熱煥燜燾煆糊溜愛爺牘犛牽犧犢強狀獷獁猶狽麅獮獰獨狹獅獪猙獄猻獫獵獼玀豬貓蝟獻獺璣璵瑒瑪瑋環現瑲璽瑉玨琺瓏璫琿璡璉瑣瓊瑤璦璿瓔瓚甕甌電畫暢佘疇癤療瘧癘瘍鬁瘡瘋皰屙癰痙癢瘂癆瘓癇癡癉瘮瘞瘺癟癱癮癭癩癬癲臒皚皺皸盞鹽監蓋盜盤瞘眥矓著睜睞瞼瞞矚矯磯礬礦碭碼磚硨硯碸礪礱礫礎硜矽碩硤磽磑礄確鹼礙磧磣堿镟滾禮禕禰禎禱禍稟祿禪離禿稈種積稱穢穠穭稅穌穩穡窮竊竅窯竄窩窺竇窶豎競篤筍筆筧箋籠籩築篳篩簹箏籌簽簡籙簀篋籜籮簞簫簣簍籃籬籪籟糴類秈糶糲粵糞糧糝餱緊縶糸糾紆紅紂纖紇約級紈纊紀紉緯紜紘純紕紗綱納紝縱綸紛紙紋紡紵紖紐紓線紺絏紱練組紳細織終縐絆紼絀紹繹經紿綁絨結絝繞絰絎繪給絢絳絡絕絞統綆綃絹繡綌綏絛繼綈績緒綾緓續綺緋綽緔緄繩維綿綬繃綢綯綹綣綜綻綰綠綴緇緙緗緘緬纜緹緲緝縕繢緦綞緞緶線緱縋緩締縷編緡緣縉縛縟縝縫縗縞纏縭縊縑繽縹縵縲纓縮繆繅纈繚繕繒韁繾繰繯繳纘罌網羅罰罷羆羈羥羨翹翽翬耮耬聳恥聶聾職聹聯聵聰肅腸膚膁腎腫脹脅膽勝朧腖臚脛膠脈膾髒臍腦膿臠腳脫腡臉臘醃膕齶膩靦膃騰臏臢輿艤艦艙艫艱豔艸藝節羋薌蕪蘆蓯葦藶莧萇蒼苧蘇檾蘋莖蘢蔦塋煢繭荊薦薘莢蕘蓽蕎薈薺蕩榮葷滎犖熒蕁藎蓀蔭蕒葒葤藥蒞蓧萊蓮蒔萵薟獲蕕瑩鶯蓴蘀蘿螢營縈蕭薩蔥蕆蕢蔣蔞藍薊蘺蕷鎣驀薔蘞藺藹蘄蘊藪槁蘚虜慮虛蟲虯蟣雖蝦蠆蝕蟻螞蠶蠔蜆蠱蠣蟶蠻蟄蛺蟯螄蠐蛻蝸蠟蠅蟈蟬蠍螻蠑螿蟎蠨釁銜補襯袞襖嫋褘襪襲襏裝襠褌褳襝褲襇褸襤繈襴見觀覎規覓視覘覽覺覬覡覿覥覦覯覲覷觴觸觶讋譽謄訁計訂訃認譏訐訌討讓訕訖訓議訊記訒講諱謳詎訝訥許訛論訩訟諷設訪訣證詁訶評詛識詗詐訴診詆謅詞詘詔詖譯詒誆誄試詿詩詰詼誠誅詵話誕詬詮詭詢詣諍該詳詫諢詡譸誡誣語誚誤誥誘誨誑說誦誒請諸諏諾讀諑誹課諉諛誰諗調諂諒諄誶談誼謀諶諜謊諫諧謔謁謂諤諭諼讒諮諳諺諦謎諞諝謨讜謖謝謠謗諡謙謐謹謾謫譾謬譚譖譙讕譜譎讞譴譫讖穀豶貝貞負貟貢財責賢敗賬貨質販貪貧貶購貯貫貳賤賁貰貼貴貺貸貿費賀貽賊贄賈賄貲賃賂贓資賅贐賕賑賚賒賦賭齎贖賞賜贔賙賡賠賧賴賵贅賻賺賽賾贗讚贇贈贍贏贛赬趙趕趨趲躉躍蹌蹠躒踐躂蹺蹕躚躋踴躊蹤躓躑躡蹣躕躥躪躦軀車軋軌軒軑軔轉軛輪軟轟軲軻轤軸軹軼軤軫轢軺輕軾載輊轎輈輇輅較輒輔輛輦輩輝輥輞輬輟輜輳輻輯轀輸轡轅轄輾轆轍轔辭辯辮邊遼達遷過邁運還這進遠違連遲邇逕跡適選遜遞邐邏遺遙鄧鄺鄔郵鄒鄴鄰鬱郤郟鄶鄭鄆酈鄖鄲醞醱醬釅釃釀釋裏钜鑒鑾鏨釓釔針釘釗釙釕釷釺釧釤鈒釩釣鍆釹鍚釵鈃鈣鈈鈦鈍鈔鍾鈉鋇鋼鈑鈐鑰欽鈞鎢鉤鈧鈁鈥鈄鈕鈀鈺錢鉦鉗鈷缽鈳鉕鈽鈸鉞鑽鉬鉭鉀鈿鈾鐵鉑鈴鑠鉛鉚鈰鉉鉈鉍鈹鐸鉶銬銠鉺銪鋏鋣鐃銍鐺銅鋁銱銦鎧鍘銖銑鋌銩銛鏵銓鉿銚鉻銘錚銫鉸銥鏟銃鐋銨銀銣鑄鐒鋪鋙錸鋱鏈鏗銷鎖鋰鋥鋤鍋鋯鋨鏽銼鋝鋒鋅鋶鐦鐧銳銻鋃鋟鋦錒錆鍺錯錨錡錁錕錩錫錮鑼錘錐錦鍁錈錇錟錠鍵鋸錳錙鍥鍈鍇鏘鍶鍔鍤鍬鍾鍛鎪鍠鍰鎄鍍鎂鏤鎡鏌鎮鎛鎘鑷鐫鎳鎿鎦鎬鎊鎰鎔鏢鏜鏍鏰鏞鏡鏑鏃鏇鏐鐔钁鐐鏷鑥鐓鑭鐠鑹鏹鐙鑊鐳鐶鐲鐮鐿鑔鑣鑞鑲長門閂閃閆閈閉問闖閏闈閑閎間閔閌悶閘鬧閨聞闥閩閭闓閥閣閡閫鬮閱閬闍閾閹閶鬩閿閽閻閼闡闌闃闠闊闋闔闐闒闕闞闤隊陽陰陣階際陸隴陳陘陝隉隕險隨隱隸雋難雛讎靂霧霽黴靄靚靜靨韃鞽韉韝韋韌韍韓韙韞韜韻頁頂頃頇項順須頊頑顧頓頎頒頌頏預顱領頗頸頡頰頲頜潁熲頦頤頻頮頹頷頴穎顆題顒顎顓顏額顳顢顛顙顥纇顫顬顰顴風颺颭颮颯颶颸颼颻飀飄飆飆飛饗饜飣饑飥餳飩餼飪飫飭飯飲餞飾飽飼飿飴餌饒餉餄餎餃餏餅餑餖餓餘餒餕餜餛餡館餷饋餶餿饞饁饃餺餾饈饉饅饊饌饢馬馭馱馴馳驅馹駁驢駔駛駟駙駒騶駐駝駑駕驛駘驍罵駰驕驊駱駭駢驫驪騁驗騂駸駿騏騎騍騅騌驌驂騙騭騤騷騖驁騮騫騸驃騾驄驏驟驥驦驤髏髖髕鬢魘魎魚魛魢魷魨魯魴魺鮁鮃鯰鱸鮋鮓鮒鮊鮑鱟鮍鮐鮭鮚鮳鮪鮞鮦鰂鮜鱠鱭鮫鮮鮺鯗鱘鯁鱺鰱鰹鯉鰣鰷鯀鯊鯇鮶鯽鯒鯖鯪鯕鯫鯡鯤鯧鯝鯢鯰鯛鯨鯵鯴鯔鱝鰈鰏鱨鯷鰮鰃鰓鱷鰍鰒鰉鰁鱂鯿鰠鼇鰭鰨鰥鰩鰟鰜鰳鰾鱈鱉鰻鰵鱅鰼鱖鱔鱗鱒鱯鱤鱧鱣鳥鳩雞鳶鳴鳲鷗鴉鶬鴇鴆鴣鶇鸕鴨鴞鴦鴒鴟鴝鴛鴬鴕鷥鷙鴯鴰鵂鴴鵃鴿鸞鴻鵐鵓鸝鵑鵠鵝鵒鷳鵜鵡鵲鶓鵪鶤鵯鵬鵮鶉鶊鵷鷫鶘鶡鶚鶻鶿鶥鶩鷊鷂鶲鶹鶺鷁鶼鶴鷖鸚鷓鷚鷯鷦鷲鷸鷺鸇鷹鸌鸏鸛鸘鹺麥麩黃黌黶黷黲黽龍歷誌製壹臺臯準復勐鐘註範籤' + } + function Traditionalized (cc) { + let str = '' + const ss = JTPYStr() + const tt = FTPYStr() + for (let 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) { + let str = '' + const ss = JTPYStr() + const tt = FTPYStr() + for (let 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 translateInitialization() { + translateButtonObject = document.getElementById('translateLink'); + translateRightMenuButtonObject = document.getElementById('menu-translate').querySelector('span'); + + if (translateButtonObject || translateRightMenuButtonObject) { + if (currentEncoding !== targetEncoding) { + const textContent = targetEncoding === 1 ? msgToSimplifiedChinese : msgToTraditionalChinese; + + if (translateButtonObject) { + translateButtonObject.textContent = textContent; + } + + if (translateRightMenuButtonObject) { + translateRightMenuButtonObject.textContent = textContent; + } + + setLang(); + setTimeout(translateBody, translateDelay); + } + } + } + + window.translateFn = { + translatePage, + Traditionalized, + Simplized + } + + translateInitialization() + document.addEventListener('pjax:complete', translateInitialization) +}) \ No newline at end of file diff --git a/js/utils.js b/js/utils.js new file mode 100644 index 0000000000..01e887b4be --- /dev/null +++ b/js/utils.js @@ -0,0 +1,1435 @@ +const anzhiyu = { + debounce: (func, wait = 0, immediate = false) => { + let timeout; + return (...args) => { + const later = () => { + timeout = null; + if (!immediate) func(...args); + }; + const callNow = immediate && !timeout; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + if (callNow) func(...args); + }; + }, + + throttle: function (func, wait, options = {}) { + let timeout, context, args; + let previous = 0; + + const later = () => { + previous = options.leading === false ? 0 : new Date().getTime(); + timeout = null; + func.apply(context, args); + if (!timeout) context = args = null; + }; + + const throttled = (...params) => { + const now = new Date().getTime(); + if (!previous && options.leading === false) previous = now; + const remaining = wait - (now - previous); + context = this; + args = params; + 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; + }, + + sidebarPaddingR: () => { + const innerWidth = window.innerWidth; + const clientWidth = document.body.clientWidth; + const paddingRight = innerWidth - clientWidth; + if (innerWidth !== clientWidth) { + document.body.style.paddingRight = paddingRight + "px"; + } + }, + + snackbarShow: (text, showActionFunction = false, duration = 2000, actionText = false) => { + const { position, bgLight, bgDark } = GLOBAL_CONFIG.Snackbar; + const bg = document.documentElement.getAttribute("data-theme") === "light" ? bgLight : bgDark; + const root = document.querySelector(":root"); + root.style.setProperty("--anzhiyu-snackbar-time", duration + "ms"); + + Snackbar.show({ + text: text, + backgroundColor: bg, + onActionClick: showActionFunction, + actionText: actionText, + showAction: actionText, + duration: duration, + pos: position, + customClass: "snackbar-css", + }); + }, + + loadComment: (dom, callback) => { + if ("IntersectionObserver" in window) { + const observerItem = new IntersectionObserver( + entries => { + if (entries[0].isIntersecting) { + callback(); + observerItem.disconnect(); + } + }, + { threshold: [0] } + ); + observerItem.observe(dom); + } else { + callback(); + } + }, + + scrollToDest: (pos, time = 500) => { + const currentPos = window.pageYOffset; + if ("scrollBehavior" in document.documentElement.style) { + window.scrollTo({ + top: pos, + behavior: "smooth", + }); + return; + } + + let start = null; + pos = +pos; + window.requestAnimationFrame(function step(currentTime) { + start = !start ? currentTime : start; + const progress = currentTime - start; + if (currentPos < pos) { + window.scrollTo(0, ((pos - currentPos) * progress) / time + currentPos); + } else { + window.scrollTo(0, currentPos - ((currentPos - pos) * progress) / time); + } + if (progress < time) { + window.requestAnimationFrame(step); + } else { + window.scrollTo(0, pos); + } + }); + }, + + initJustifiedGallery: function (selector) { + const runJustifiedGallery = i => { + if (!anzhiyu.isHidden(i)) { + fjGallery(i, { + itemSelector: ".fj-gallery-item", + rowHeight: i.getAttribute("data-rowHeight"), + gutter: 4, + onJustify: function () { + this.$container.style.opacity = "1"; + }, + }); + } + }; + + if (Array.from(selector).length === 0) runJustifiedGallery(selector); + else + selector.forEach(i => { + runJustifiedGallery(i); + }); + }, + + animateIn: (ele, text) => { + ele.style.display = "block"; + ele.style.animation = text; + }, + + animateOut: (ele, text) => { + ele.addEventListener("animationend", function f() { + ele.style.display = ""; + ele.style.animation = ""; + ele.removeEventListener("animationend", f); + }); + ele.style.animation = text; + }, + + /** + * @param {*} selector + * @param {*} eleType the type of create element + * @param {*} options object key: value + */ + wrap: (selector, eleType, options) => { + const creatEle = document.createElement(eleType); + for (const [key, value] of Object.entries(options)) { + creatEle.setAttribute(key, value); + } + selector.parentNode.insertBefore(creatEle, selector); + creatEle.appendChild(selector); + }, + + isHidden: ele => ele.offsetHeight === 0 && ele.offsetWidth === 0, + + getEleTop: ele => { + let actualTop = ele.offsetTop; + let current = ele.offsetParent; + + while (current !== null) { + actualTop += current.offsetTop; + current = current.offsetParent; + } + + return actualTop; + }, + + loadLightbox: ele => { + const service = GLOBAL_CONFIG.lightbox; + + if (service === "mediumZoom") { + const zoom = mediumZoom(ele); + zoom.on("open", e => { + const photoBg = document.documentElement.getAttribute("data-theme") === "dark" ? "#121212" : "#fff"; + zoom.update({ + background: photoBg, + }); + }); + } + + if (service === "fancybox") { + Array.from(ele).forEach(i => { + if (i.parentNode.tagName !== "A") { + const dataSrc = i.dataset.lazySrc || i.src; + const dataCaption = i.title || i.alt || ""; + anzhiyu.wrap(i, "a", { + href: dataSrc, + "data-fancybox": "gallery", + "data-caption": dataCaption, + "data-thumb": dataSrc, + }); + } + }); + + if (!window.fancyboxRun) { + Fancybox.bind("[data-fancybox]", { + Hash: false, + Thumbs: { + autoStart: false, + }, + }); + window.fancyboxRun = true; + } + } + }, + + setLoading: { + add: ele => { + const html = ` +
    +
    +
    +
    +
    + `; + ele.insertAdjacentHTML("afterend", html); + }, + remove: ele => { + ele.nextElementSibling.remove(); + }, + }, + + updateAnchor: anchor => { + if (anchor !== window.location.hash) { + if (!anchor) anchor = location.pathname; + const title = GLOBAL_CONFIG_SITE.title; + window.history.replaceState( + { + url: location.href, + title, + }, + title, + anchor + ); + } + }, + + getScrollPercent: (currentTop, ele) => { + const docHeight = ele.clientHeight; + const winHeight = document.documentElement.clientHeight; + const headerHeight = ele.offsetTop; + const contentMath = + docHeight > winHeight ? docHeight - winHeight : document.documentElement.scrollHeight - winHeight; + const scrollPercent = (currentTop - headerHeight) / contentMath; + const scrollPercentRounded = Math.round(scrollPercent * 100); + const percentage = scrollPercentRounded > 100 ? 100 : scrollPercentRounded <= 0 ? 0 : scrollPercentRounded; + return percentage; + }, + + addGlobalFn: (key, fn, name = false, parent = window) => { + const globalFn = parent.globalFn || {}; + const keyObj = globalFn[key] || {}; + + if (name && keyObj[name]) return; + + name = name || Object.keys(keyObj).length; + keyObj[name] = fn; + globalFn[key] = keyObj; + parent.globalFn = globalFn; + }, + + addEventListenerPjax: (ele, event, fn, option = false) => { + ele.addEventListener(event, fn, option); + anzhiyu.addGlobalFn("pjax", () => { + ele.removeEventListener(event, fn, option); + }); + }, + + removeGlobalFnEvent: (key, parent = window) => { + const { globalFn = {} } = parent; + const keyObj = globalFn[key] || {}; + const keyArr = Object.keys(keyObj); + if (!keyArr.length) return; + keyArr.forEach(i => { + keyObj[i](); + }); + delete parent.globalFn[key]; + }, + + //更改主题色 + changeThemeMetaColor: function (color) { + // console.info(`%c ${color}`, `font-size:36px;color:${color};`); + if (themeColorMeta !== null) { + themeColorMeta.setAttribute("content", color); + } + }, + + //顶栏自适应主题色 + initThemeColor: function () { + let themeColor = getComputedStyle(document.documentElement) + .getPropertyValue("--anzhiyu-bar-background") + .trim() + .replace('"', "") + .replace('"', ""); + const currentTop = window.scrollY || document.documentElement.scrollTop; + if (currentTop > 26) { + if (anzhiyu.is_Post()) { + themeColor = getComputedStyle(document.documentElement) + .getPropertyValue("--anzhiyu-meta-theme-post-color") + .trim() + .replace('"', "") + .replace('"', ""); + } + if (themeColorMeta.getAttribute("content") === themeColor) return; + this.changeThemeMetaColor(themeColor); + } else { + if (themeColorMeta.getAttribute("content") === themeColor) return; + this.changeThemeMetaColor(themeColor); + } + }, + //是否是文章页 + is_Post: function () { + var url = window.location.href; //获取url + if (url.indexOf("/posts/") >= 0) { + //判断url地址中是否包含code字符串 + return true; + } else { + return false; + } + }, + //监测是否在页面开头 + addNavBackgroundInit: function () { + var scrollTop = 0, + bodyScrollTop = 0, + documentScrollTop = 0; + if ($bodyWrap) { + bodyScrollTop = $bodyWrap.scrollTop; + } + if (document.documentElement) { + documentScrollTop = document.documentElement.scrollTop; + } + scrollTop = bodyScrollTop - documentScrollTop > 0 ? bodyScrollTop : documentScrollTop; + + if (scrollTop != 0) { + pageHeaderEl.classList.add("nav-fixed"); + pageHeaderEl.classList.add("nav-visible"); + } + }, + // 下载图片 + downloadImage: function (imgsrc, name) { + //下载图片地址和图片名 + rm.hideRightMenu(); + if (rm.downloadimging == false) { + rm.downloadimging = true; + anzhiyu.snackbarShow("正在下载中，请稍后", false, 10000); + setTimeout(function () { + let image = new Image(); + // 解决跨域 Canvas 污染问题 + image.setAttribute("crossOrigin", "anonymous"); + image.onload = function () { + let canvas = document.createElement("canvas"); + canvas.width = image.width; + canvas.height = image.height; + let context = canvas.getContext("2d"); + context.drawImage(image, 0, 0, image.width, image.height); + let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据 + let a = document.createElement("a"); // 生成一个a元素 + let event = new MouseEvent("click"); // 创建一个单击事件 + a.download = name || "photo"; // 设置图片名称 + a.href = url; // 将生成的URL设置为a.href属性 + a.dispatchEvent(event); // 触发a的单击事件 + }; + image.src = imgsrc; + anzhiyu.snackbarShow("图片已添加盲水印，请遵守版权协议"); + rm.downloadimging = false; + }, "10000"); + } else { + anzhiyu.snackbarShow("有正在进行中的下载，请稍后再试"); + } + }, + //禁止图片右键单击 + stopImgRightDrag: function () { + var img = document.getElementsByTagName("img"); + for (var i = 0; i < img.length; i++) { + img[i].addEventListener("dragstart", function () { + return false; + }); + } + }, + //滚动到指定id + scrollTo: function (id) { + var domTop = document.querySelector(id).offsetTop; + window.scrollTo(0, domTop - 80); + }, + //隐藏侧边栏 + hideAsideBtn: () => { + // Hide aside + const $htmlDom = document.documentElement.classList; + $htmlDom.contains("hide-aside") + ? saveToLocal.set("aside-status", "show", 2) + : saveToLocal.set("aside-status", "hide", 2); + $htmlDom.toggle("hide-aside"); + $htmlDom.contains("hide-aside") + ? document.querySelector("#consoleHideAside").classList.add("on") + : document.querySelector("#consoleHideAside").classList.remove("on"); + }, + // 热评切换 + switchCommentBarrage: function () { + let commentBarrage = document.querySelector(".comment-barrage"); + if (commentBarrage) { + if (window.getComputedStyle(commentBarrage).display === "flex") { + commentBarrage.style.display = "none"; + anzhiyu.snackbarShow("✨ 已关闭评论弹幕"); + document.querySelector(".menu-commentBarrage-text").textContent = "显示热评"; + document.querySelector("#consoleCommentBarrage").classList.remove("on"); + localStorage.setItem("commentBarrageSwitch", "false"); + } else { + commentBarrage.style.display = "flex"; + document.querySelector(".menu-commentBarrage-text").textContent = "关闭热评"; + document.querySelector("#consoleCommentBarrage").classList.add("on"); + anzhiyu.snackbarShow("✨ 已开启评论弹幕"); + localStorage.removeItem("commentBarrageSwitch"); + } + } + rm && rm.hideRightMenu(); + }, + initPaginationObserver: () => { + const commentElement = document.getElementById("post-comment"); + const paginationElement = document.getElementById("pagination"); + + if (commentElement && paginationElement) { + new IntersectionObserver(entries => { + const commentBarrage = document.querySelector(".comment-barrage"); + + entries.forEach(entry => { + if (entry.isIntersecting) { + paginationElement.classList.add("show-window"); + if (commentBarrage) { + commentBarrage.style.bottom = "-200px"; + } + } else { + paginationElement.classList.remove("show-window"); + if (commentBarrage) { + commentBarrage.style.bottom = "0px"; + } + } + }); + }).observe(commentElement); + } + }, + // 初始化即刻 + initIndexEssay: function () { + if (!document.getElementById("bbTimeList")) return; + setTimeout(() => { + let essay_bar_swiper = new Swiper(".essay_bar_swiper_container", { + passiveListeners: true, + direction: "vertical", + loop: true, + autoplay: { + disableOnInteraction: true, + delay: 3000, + }, + mousewheel: true, + }); + + let essay_bar_comtainer = document.getElementById("bbtalk"); + if (essay_bar_comtainer !== null) { + essay_bar_comtainer.onmouseenter = function () { + essay_bar_swiper.autoplay.stop(); + }; + essay_bar_comtainer.onmouseleave = function () { + essay_bar_swiper.autoplay.start(); + }; + } + }, 100); + }, + scrollByMouseWheel: function ($list, $target) { + const scrollHandler = function (e) { + $list.scrollLeft -= e.wheelDelta / 2; + e.preventDefault(); + }; + $list.addEventListener("mousewheel", scrollHandler, { passive: false }); + if ($target) { + $target.classList.add("selected"); + $list.scrollLeft = $target.offsetLeft - $list.offsetLeft - ($list.offsetWidth - $target.offsetWidth) / 2; + } + }, + // catalog激活 + catalogActive: function () { + const $list = document.getElementById("catalog-list"); + if ($list) { + const pathname = decodeURIComponent(window.location.pathname); + const catalogListItems = $list.querySelectorAll(".catalog-list-item"); + + let $catalog = null; + catalogListItems.forEach(item => { + if (pathname.startsWith(item.id)) { + $catalog = item; + return; + } + }); + + anzhiyu.scrollByMouseWheel($list, $catalog); + } + }, + // Page Tag 激活 + tagsPageActive: function () { + const $list = document.getElementById("tag-page-tags"); + if ($list) { + const $tagPageTags = document.getElementById(decodeURIComponent(window.location.pathname)); + anzhiyu.scrollByMouseWheel($list, $tagPageTags); + } + }, + // 修改时间显示"最近" + diffDate: function (d, more = false, simple = false) { + const dateNow = new Date(); + const datePost = new Date(d); + const dateDiff = dateNow.getTime() - datePost.getTime(); + const minute = 1000 * 60; + const hour = minute * 60; + const day = hour * 24; + const month = day * 30; + + let result; + if (more) { + const monthCount = dateDiff / month; + const dayCount = dateDiff / day; + const hourCount = dateDiff / hour; + const minuteCount = dateDiff / minute; + + if (monthCount >= 1) { + result = datePost.toLocaleDateString().replace(/\//g, "-"); + } else if (dayCount >= 1) { + result = parseInt(dayCount) + " " + GLOBAL_CONFIG.date_suffix.day; + } else if (hourCount >= 1) { + result = parseInt(hourCount) + " " + GLOBAL_CONFIG.date_suffix.hour; + } else if (minuteCount >= 1) { + result = parseInt(minuteCount) + " " + GLOBAL_CONFIG.date_suffix.min; + } else { + result = GLOBAL_CONFIG.date_suffix.just; + } + } else if (simple) { + const monthCount = dateDiff / month; + const dayCount = dateDiff / day; + const hourCount = dateDiff / hour; + const minuteCount = dateDiff / minute; + if (monthCount >= 1) { + result = datePost.toLocaleDateString().replace(/\//g, "-"); + } else if (dayCount >= 1 && dayCount <= 3) { + result = parseInt(dayCount) + " " + GLOBAL_CONFIG.date_suffix.day; + } else if (dayCount > 3) { + result = datePost.getMonth() + 1 + "/" + datePost.getDate(); + } else if (hourCount >= 1) { + result = parseInt(hourCount) + " " + GLOBAL_CONFIG.date_suffix.hour; + } else if (minuteCount >= 1) { + result = parseInt(minuteCount) + " " + GLOBAL_CONFIG.date_suffix.min; + } else { + result = GLOBAL_CONFIG.date_suffix.just; + } + } else { + result = parseInt(dateDiff / day); + } + return result; + }, + + // 修改即刻中的时间显示 + changeTimeInEssay: function () { + document.querySelector("#bber") && + document.querySelectorAll("#bber time").forEach(function (e) { + var t = e, + datetime = t.getAttribute("datetime"); + (t.innerText = anzhiyu.diffDate(datetime, true)), (t.style.display = "inline"); + }); + }, + // 修改相册集中的时间 + changeTimeInAlbumDetail: function () { + document.querySelector("#album_detail") && + document.querySelectorAll("#album_detail time").forEach(function (e) { + var t = e, + datetime = t.getAttribute("datetime"); + (t.innerText = anzhiyu.diffDate(datetime, true)), (t.style.display = "inline"); + }); + }, + // 刷新瀑布流 + reflashEssayWaterFall: function () { + const waterfallEl = document.getElementById("waterfall"); + if (waterfallEl) { + setTimeout(function () { + waterfall(waterfallEl); + waterfallEl.classList.add("show"); + }, 800); + } + }, + sayhi: function () { + const $sayhiEl = document.getElementById("author-info__sayhi"); + + const getTimeState = () => { + const hour = new Date().getHours(); + let message = ""; + + if (hour >= 0 && hour <= 5) { + message = "睡个好觉，保证精力充沛"; + } else if (hour > 5 && hour <= 10) { + message = "一日之计在于晨"; + } else if (hour > 10 && hour <= 14) { + message = "吃饱了才有力气干活"; + } else if (hour > 14 && hour <= 18) { + message = "集中精力，攻克难关"; + } else if (hour > 18 && hour <= 24) { + message = "不要太劳累了，早睡更健康"; + } + + return message; + }; + + if ($sayhiEl) { + $sayhiEl.innerHTML = getTimeState(); + } + }, + + // 友链注入预设评论 + addFriendLink() { + var input = document.getElementsByClassName("el-textarea__inner")[0]; + if (!input) return; + const evt = new Event("input", { cancelable: true, bubbles: true }); + const defaultPlaceholder = + "昵称（请勿包含博客等字样）：\n网站地址（要求博客地址，请勿提交个人主页）：\n头像图片url（请提供尽可能清晰的图片，我会上传到我自己的图床）：\n描述：\n站点截图（可选）：\n"; + input.value = this.getConfigIfPresent(GLOBAL_CONFIG.linkPageTop, "addFriendPlaceholder", defaultPlaceholder); + input.dispatchEvent(evt); + input.focus(); + input.setSelectionRange(-1, -1); + }, + // 获取配置，如果为空则返回默认值 + getConfigIfPresent: function (config, configKey, defaultValue) { + if (!config) return defaultValue; + if (!config.hasOwnProperty(configKey)) return defaultValue; + if (!config[configKey]) return defaultValue; + return config[configKey]; + }, + //切换音乐播放状态 + musicToggle: function (changePaly = true) { + if (!anzhiyu_musicFirst) { + anzhiyu.musicBindEvent(); + anzhiyu_musicFirst = true; + } + let msgPlay = '播放音乐'; + let msgPause = '暂停音乐'; + if (anzhiyu_musicPlaying) { + navMusicEl.classList.remove("playing"); + document.getElementById("menu-music-toggle").innerHTML = msgPlay; + document.getElementById("nav-music-hoverTips").innerHTML = "音乐已暂停"; + document.querySelector("#consoleMusic").classList.remove("on"); + anzhiyu_musicPlaying = false; + navMusicEl.classList.remove("stretch"); + } else { + navMusicEl.classList.add("playing"); + document.getElementById("menu-music-toggle").innerHTML = msgPause; + document.querySelector("#consoleMusic").classList.add("on"); + anzhiyu_musicPlaying = true; + navMusicEl.classList.add("stretch"); + } + if (changePaly) document.querySelector("#nav-music meting-js").aplayer.toggle(); + rm && rm.hideRightMenu(); + }, + // 音乐伸缩 + musicTelescopic: function () { + if (navMusicEl.classList.contains("stretch")) { + navMusicEl.classList.remove("stretch"); + } else { + navMusicEl.classList.add("stretch"); + } + }, + + //音乐上一曲 + musicSkipBack: function () { + navMusicEl.querySelector("meting-js").aplayer.skipBack(); + rm && rm.hideRightMenu(); + }, + + //音乐下一曲 + musicSkipForward: function () { + navMusicEl.querySelector("meting-js").aplayer.skipForward(); + rm && rm.hideRightMenu(); + }, + + //获取音乐中的名称 + musicGetName: function () { + var x = document.querySelector(".aplayer-title"); + var arr = []; + for (var i = x.length - 1; i >= 0; i--) { + arr[i] = x[i].innerText; + } + return arr[0]; + }, + + //初始化console图标 + initConsoleState: function () { + //初始化隐藏边栏 + const $htmlDomClassList = document.documentElement.classList; + $htmlDomClassList.contains("hide-aside") + ? document.querySelector("#consoleHideAside").classList.add("on") + : document.querySelector("#consoleHideAside").classList.remove("on"); + }, + + // 显示打赏中控台 + rewardShowConsole: function () { + // 判断是否为赞赏打开控制台 + consoleEl.classList.add("reward-show"); + anzhiyu.initConsoleState(); + }, + // 显示中控台 + showConsole: function () { + consoleEl.classList.add("show"); + anzhiyu.initConsoleState(); + }, + + //隐藏中控台 + hideConsole: function () { + if (consoleEl.classList.contains("show")) { + // 如果是一般控制台，就关闭一般控制台 + consoleEl.classList.remove("show"); + } else if (consoleEl.classList.contains("reward-show")) { + // 如果是打赏控制台，就关闭打赏控制台 + consoleEl.classList.remove("reward-show"); + } + // 获取center-console元素 + const centerConsole = document.getElementById("center-console"); + + // 检查center-console是否被选中 + if (centerConsole.checked) { + // 取消选中状态 + centerConsole.checked = false; + } + }, + // 取消加载动画 + hideLoading: function () { + document.getElementById("loading-box").classList.add("loaded"); + }, + // 将音乐缓存播放 + cacheAndPlayMusic() { + let data = localStorage.getItem("musicData"); + if (data) { + data = JSON.parse(data); + const currentTime = new Date().getTime(); + if (currentTime - data.timestamp < 24 * 60 * 60 * 1000) { + // 如果缓存的数据没有过期，直接使用 + anzhiyu.playMusic(data.songs); + return; + } + } + + // 否则重新从服务器获取数据 + fetch("/json/music.json") + .then(response => response.json()) + .then(songs => { + const cacheData = { + timestamp: new Date().getTime(), + songs: songs, + }; + localStorage.setItem("musicData", JSON.stringify(cacheData)); + anzhiyu.playMusic(songs); + }); + }, + // 播放音乐 + playMusic(songs) { + const anMusicPage = document.getElementById("anMusic-page"); + const metingAplayer = anMusicPage.querySelector("meting-js").aplayer; + const randomIndex = Math.floor(Math.random() * songs.length); + const randomSong = songs[randomIndex]; + const allAudios = metingAplayer.list.audios; + if (!selectRandomSong.includes(randomSong.name)) { + // 如果随机到的歌曲已经未被随机到过，就添加进metingAplayer.list + metingAplayer.list.add([randomSong]); + // 播放最后一首(因为是添加到了最后) + metingAplayer.list.switch(allAudios.length); + // 添加到已被随机的歌曲列表 + selectRandomSong.push(randomSong.name); + } else { + // 随机到的歌曲已经在播放列表中了 + // 直接继续随机直到随机到没有随机过的歌曲，如果全部随机过了就切换到对应的歌曲播放即可 + let songFound = false; + while (!songFound) { + const newRandomIndex = Math.floor(Math.random() * songs.length); + const newRandomSong = songs[newRandomIndex]; + if (!selectRandomSong.includes(newRandomSong.name)) { + metingAplayer.list.add([newRandomSong]); + metingAplayer.list.switch(allAudios.length); + selectRandomSong.push(newRandomSong.name); + songFound = true; + } + // 如果全部歌曲都已被随机过，跳出循环 + if (selectRandomSong.length === songs.length) { + break; + } + } + if (!songFound) { + // 如果全部歌曲都已被随机过，切换到对应的歌曲播放 + const palyMusicIndex = allAudios.findIndex(song => song.name === randomSong.name); + if (palyMusicIndex != -1) metingAplayer.list.switch(palyMusicIndex); + } + } + + console.info("已随机歌曲：", selectRandomSong, "本次随机歌曲：", randomSong.name); + }, + // 音乐节目切换背景 + changeMusicBg: function (isChangeBg = true) { + const anMusicBg = document.getElementById("an_music_bg"); + + if (isChangeBg) { + // player listswitch 会进入此处 + const musiccover = document.querySelector("#anMusic-page .aplayer-pic"); + anMusicBg.style.backgroundImage = musiccover.style.backgroundImage; + } else { + // 第一次进入，绑定事件，改背景 + let timer = setInterval(() => { + const musiccover = document.querySelector("#anMusic-page .aplayer-pic"); + // 确保player加载完成 + if (musiccover) { + clearInterval(timer); + // 绑定事件 + anzhiyu.addEventListenerMusic(); + // 确保第一次能够正确替换背景 + anzhiyu.changeMusicBg(); + + // 暂停nav的音乐 + if ( + document.querySelector("#nav-music meting-js").aplayer && + !document.querySelector("#nav-music meting-js").aplayer.audio.paused + ) { + anzhiyu.musicToggle(); + } + } + }, 100); + } + }, + // 获取自定义播放列表 + getCustomPlayList: function () { + if (!window.location.pathname.startsWith("/music/")) { + return; + } + const urlParams = new URLSearchParams(window.location.search); + const userId = "8152976493"; + const userServer = "netease"; + const anMusicPageMeting = document.getElementById("anMusic-page-meting"); + if (urlParams.get("id") && urlParams.get("server")) { + const id = urlParams.get("id"); + const server = urlParams.get("server"); + anMusicPageMeting.innerHTML = ``; + } else { + anMusicPageMeting.innerHTML = ``; + } + anzhiyu.changeMusicBg(false); + }, + //隐藏今日推荐 + hideTodayCard: function () { + if (document.getElementById("todayCard")) { + document.getElementById("todayCard").classList.add("hide"); + const topGroup = document.querySelector(".topGroup"); + const recentPostItems = topGroup.querySelectorAll(".recent-post-item"); + recentPostItems.forEach(item => { + item.style.display = "flex"; + }); + } + }, + + // 监听音乐背景改变 + addEventListenerMusic: function () { + const anMusicPage = document.getElementById("anMusic-page"); + const aplayerIconMenu = anMusicPage.querySelector(".aplayer-info .aplayer-time .aplayer-icon-menu"); + const anMusicBtnGetSong = anMusicPage.querySelector("#anMusicBtnGetSong"); + const anMusicRefreshBtn = anMusicPage.querySelector("#anMusicRefreshBtn"); + const anMusicSwitchingBtn = anMusicPage.querySelector("#anMusicSwitching"); + const metingAplayer = anMusicPage.querySelector("meting-js").aplayer; + //初始化音量 + metingAplayer.volume(0.8, true); + metingAplayer.on("loadeddata", function () { + anzhiyu.changeMusicBg(); + }); + + aplayerIconMenu.addEventListener("click", function () { + document.getElementById("menu-mask").style.display = "block"; + document.getElementById("menu-mask").style.animation = "0.5s ease 0s 1 normal none running to_show"; + anMusicPage.querySelector(".aplayer.aplayer-withlist .aplayer-list").style.opacity = "1"; + }); + + function anMusicPageMenuAask() { + if (window.location.pathname != "/music/") { + document.getElementById("menu-mask").removeEventListener("click", anMusicPageMenuAask); + return; + } + + anMusicPage.querySelector(".aplayer-list").classList.remove("aplayer-list-hide"); + } + + document.getElementById("menu-mask").addEventListener("click", anMusicPageMenuAask); + + // 监听增加单曲按钮 + anMusicBtnGetSong.addEventListener("click", () => { + if (changeMusicListFlag) { + const anMusicPage = document.getElementById("anMusic-page"); + const metingAplayer = anMusicPage.querySelector("meting-js").aplayer; + const allAudios = metingAplayer.list.audios; + const randomIndex = Math.floor(Math.random() * allAudios.length); + // 随机播放一首 + metingAplayer.list.switch(randomIndex); + } else { + anzhiyu.cacheAndPlayMusic(); + } + }); + anMusicRefreshBtn.addEventListener("click", () => { + localStorage.removeItem("musicData"); + anzhiyu.snackbarShow("已移除相关缓存歌曲"); + }); + anMusicSwitchingBtn.addEventListener("click", () => { + anzhiyu.changeMusicList(); + }); + + // 监听键盘事件 + //空格控制音乐 + document.addEventListener("keydown", function (event) { + //暂停开启音乐 + if (event.code === "Space") { + event.preventDefault(); + metingAplayer.toggle(); + } + //切换下一曲 + if (event.keyCode === 39) { + event.preventDefault(); + metingAplayer.skipForward(); + } + //切换上一曲 + if (event.keyCode === 37) { + event.preventDefault(); + metingAplayer.skipBack(); + } + //增加音量 + if (event.keyCode === 38) { + if (musicVolume <= 1) { + musicVolume += 0.1; + metingAplayer.volume(musicVolume, true); + } + } + //减小音量 + if (event.keyCode === 40) { + if (musicVolume >= 0) { + musicVolume += -0.1; + metingAplayer.volume(musicVolume, true); + } + } + }); + }, + // 切换歌单 + changeMusicList: async function () { + const anMusicPage = document.getElementById("anMusic-page"); + const metingAplayer = anMusicPage.querySelector("meting-js").aplayer; + const currentTime = new Date().getTime(); + const cacheData = JSON.parse(localStorage.getItem("musicData")) || { timestamp: 0 }; + let songs = []; + + if (changeMusicListFlag) { + songs = defaultPlayMusicList; + } else { + // 保存当前默认播放列表，以使下次可以切换回来 + defaultPlayMusicList = metingAplayer.list.audios; + // 如果缓存的数据没有过期，直接使用 + if (currentTime - cacheData.timestamp < 24 * 60 * 60 * 1000) { + songs = cacheData.songs; + } else { + // 否则重新从服务器获取数据 + const response = await fetch("/json/music.json"); + songs = await response.json(); + cacheData.timestamp = currentTime; + cacheData.songs = songs; + localStorage.setItem("musicData", JSON.stringify(cacheData)); + } + } + + // 清除当前播放列表并添加新的歌曲 + metingAplayer.list.clear(); + metingAplayer.list.add(songs); + + // 切换标志位 + changeMusicListFlag = !changeMusicListFlag; + }, + // 控制台音乐列表监听 + addEventListenerConsoleMusicList: function () { + const navMusic = document.getElementById("nav-music"); + if (!navMusic) return; + navMusic.addEventListener("click", e => { + const aplayerList = navMusic.querySelector(".aplayer-list"); + const listBtn = navMusic.querySelector( + "div.aplayer-info > div.aplayer-controller > div.aplayer-time.aplayer-time-narrow > button.aplayer-icon.aplayer-icon-menu svg" + ); + if (e.target != listBtn && aplayerList.classList.contains("aplayer-list-hide")) { + aplayerList.classList.remove("aplayer-list-hide"); + } + }); + }, + // 监听按键 + toPage: function () { + var toPageText = document.getElementById("toPageText"), + toPageButton = document.getElementById("toPageButton"), + pageNumbers = document.querySelectorAll(".page-number"), + lastPageNumber = Number(pageNumbers[pageNumbers.length - 1].innerHTML), + pageNumber = Number(toPageText.value); + + if (!isNaN(pageNumber) && pageNumber >= 1 && Number.isInteger(pageNumber)) { + var url = "/page/" + (pageNumber > lastPageNumber ? lastPageNumber : pageNumber) + "/"; + toPageButton.href = pageNumber === 1 ? "/" : url; + } else { + toPageButton.href = "javascript:void(0);"; + } + }, + + //删除多余的class + removeBodyPaceClass: function () { + document.body.className = "pace-done"; + }, + // 修改body的type类型以适配css + setValueToBodyType: function () { + const input = document.getElementById("page-type"); // 获取input元素 + const value = input.value; // 获取input的value值 + document.body.dataset.type = value; // 将value值赋值到body的type属性上 + }, + //匿名评论 + addRandomCommentInfo: function () { + // 从形容词数组中随机取一个值 + const randomAdjective = adjectives[Math.floor(Math.random() * adjectives.length)]; + + // 从蔬菜水果动物名字数组中随机取一个值 + const randomName = vegetablesAndFruits[Math.floor(Math.random() * vegetablesAndFruits.length)]; + + // 将两个值组合成一个字符串 + const name = `${randomAdjective}${randomName}`; + + function dr_js_autofill_commentinfos() { + var lauthor = [ + "#author", + "input[name='comname']", + "#inpName", + "input[name='author']", + "#ds-dialog-name", + "#name", + "input[name='nick']", + "#comment_author", + ], + lmail = [ + "#mail", + "#email", + "input[name='commail']", + "#inpEmail", + "input[name='email']", + "#ds-dialog-email", + "input[name='mail']", + "#comment_email", + ], + lurl = [ + "#url", + "input[name='comurl']", + "#inpHomePage", + "#ds-dialog-url", + "input[name='url']", + "input[name='website']", + "#website", + "input[name='link']", + "#comment_url", + ]; + for (var i = 0; i < lauthor.length; i++) { + var author = document.querySelector(lauthor[i]); + if (author != null) { + author.value = name; + author.dispatchEvent(new Event("input")); + author.dispatchEvent(new Event("change")); + break; + } + } + for (var j = 0; j < lmail.length; j++) { + var mail = document.querySelector(lmail[j]); + if (mail != null) { + mail.value = visitorMail; + mail.dispatchEvent(new Event("input")); + mail.dispatchEvent(new Event("change")); + break; + } + } + return !1; + } + + dr_js_autofill_commentinfos(); + var input = document.getElementsByClassName("el-textarea__inner")[0]; + input.focus(); + input.setSelectionRange(-1, -1); + }, + + // 跳转开往 + totraveling: function () { + anzhiyu.snackbarShow( + "即将跳转到「开往」项目的成员博客，不保证跳转网站的安全性和可用性", + element => { + element.style.opacity = 0; + travellingsTimer && clearTimeout(travellingsTimer); + }, + 5000, + "取消" + ); + travellingsTimer = setTimeout(function () { + window.open("https://www.travellings.cn/go.html", "_blank"); + }, "5000"); + }, + + // 工具函数替换字符串 + replaceAll: function (e, n, t) { + return e.split(n).join(t); + }, + + // 音乐绑定事件 + musicBindEvent: function () { + document.querySelector("#nav-music .aplayer-music").addEventListener("click", function () { + anzhiyu.musicTelescopic(); + }); + document.querySelector("#nav-music .aplayer-button").addEventListener("click", function () { + anzhiyu.musicToggle(false); + }); + }, + + // 判断是否是移动端 + hasMobile: function () { + let isMobile = false; + if ( + navigator.userAgent.match( + /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i + ) || + document.body.clientWidth < 800 + ) { + // 移动端 + isMobile = true; + } + return isMobile; + }, + + // 创建二维码 + qrcodeCreate: function () { + if (document.getElementById("qrcode")) { + document.getElementById("qrcode").innerHTML = ""; + var qrcode = new QRCode(document.getElementById("qrcode"), { + text: window.location.href, + width: 250, + height: 250, + colorDark: "#000", + colorLight: "#ffffff", + correctLevel: QRCode.CorrectLevel.H, + }); + } + }, + + // 判断是否在el内 + isInViewPortOfOne: function (el) { + if (!el) return; + const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; + const offsetTop = el.offsetTop; + const scrollTop = document.documentElement.scrollTop; + const top = offsetTop - scrollTop; + return top <= viewPortHeight; + }, + //添加赞赏蒙版 + addRewardMask: function () { + if (!document.querySelector(".reward-main")) return; + document.querySelector(".reward-main").style.display = "flex"; + document.querySelector(".reward-main").style.zIndex = "102"; + document.getElementById("quit-box").style.display = "flex"; + }, + // 移除赞赏蒙版 + removeRewardMask: function () { + if (!document.querySelector(".reward-main")) return; + document.querySelector(".reward-main").style.display = "none"; + document.getElementById("quit-box").style.display = "none"; + }, + + keyboardToggle: function () { + const isKeyboardOn = anzhiyu_keyboard; + + if (isKeyboardOn) { + const consoleKeyboard = document.querySelector("#consoleKeyboard"); + consoleKeyboard.classList.remove("on"); + anzhiyu_keyboard = false; + } else { + const consoleKeyboard = document.querySelector("#consoleKeyboard"); + consoleKeyboard.classList.add("on"); + anzhiyu_keyboard = true; + } + + localStorage.setItem("keyboardToggle", isKeyboardOn ? "false" : "true"); + }, + rightMenuToggle: function () { + if (window.oncontextmenu) { + window.oncontextmenu = null; + } else if (!window.oncontextmenu && oncontextmenuFunction) { + window.oncontextmenu = oncontextmenuFunction; + } + }, + switchConsole: () => { + // switch console + const consoleEl = document.getElementById("console"); + //初始化隐藏边栏 + const $htmlDom = document.documentElement.classList; + $htmlDom.contains("hide-aside") + ? document.querySelector("#consoleHideAside").classList.add("on") + : document.querySelector("#consoleHideAside").classList.remove("on"); + if (consoleEl.classList.contains("show")) { + consoleEl.classList.remove("show"); + } else { + consoleEl.classList.add("show"); + } + const consoleKeyboard = document.querySelector("#consoleKeyboard"); + + if (consoleKeyboard) { + if (localStorage.getItem("keyboardToggle") === "true") { + consoleKeyboard.classList.add("on"); + anzhiyu_keyboard = true; + } else { + consoleKeyboard.classList.remove("on"); + anzhiyu_keyboard = false; + } + } + }, + // 定义 intersectionObserver 函数，并接收两个可选参数 + intersectionObserver: function (enterCallback, leaveCallback) { + let observer; + return () => { + if (!observer) { + observer = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.intersectionRatio > 0) { + enterCallback?.(); + } else { + leaveCallback?.(); + } + }); + }); + } else { + // 如果 observer 对象已经存在，则先取消对之前元素的观察 + observer.disconnect(); + } + return observer; + }; + }, + // CategoryBar滚动 + scrollCategoryBarToRight: function () { + // 获取需要操作的元素 + const items = document.getElementById("catalog-list"); + const nextButton = document.getElementById("category-bar-next"); + + // 检查元素是否存在 + if (items && nextButton) { + const itemsWidth = items.clientWidth; + + // 判断是否已经滚动到最右侧 + if (items.scrollLeft + items.clientWidth + 1 >= items.scrollWidth) { + // 滚动到初始位置并更新按钮内容 + items.scroll({ + left: 0, + behavior: "smooth", + }); + nextButton.innerHTML = ''; + } else { + // 滚动到下一个视图 + items.scrollBy({ + left: itemsWidth, + behavior: "smooth", + }); + } + } else { + console.error("Element(s) not found: 'catalog-list' and/or 'category-bar-next'."); + } + }, + // 分类条 + categoriesBarActive: function () { + const urlinfo = decodeURIComponent(window.location.pathname); + const $categoryBar = document.getElementById("category-bar"); + if (!$categoryBar) return; + + if (urlinfo === "/") { + $categoryBar.querySelector("#首页").classList.add("select"); + } else { + const pattern = /\/categories\/.*?\//; + const patbool = pattern.test(urlinfo); + if (!patbool) return; + + const nowCategorie = urlinfo.split("/")[2]; + $categoryBar.querySelector(`#${nowCategorie}`).classList.add("select"); + } + }, + topCategoriesBarScroll: function () { + const $categoryBarItems = document.getElementById("category-bar-items"); + if (!$categoryBarItems) return; + + $categoryBarItems.addEventListener("mousewheel", function (e) { + const v = -e.wheelDelta / 2; + this.scrollLeft += v; + e.preventDefault(); + }); + }, + // 切换菜单显示热评 + switchRightClickMenuHotReview: function () { + const postComment = document.getElementById("post-comment"); + const menuCommentBarrageDom = document.getElementById("menu-commentBarrage"); + if (postComment) { + menuCommentBarrageDom.style.display = "flex"; + } else { + menuCommentBarrageDom.style.display = "none"; + } + }, + // 切换作者卡片状态文字 + changeSayHelloText: function () { + const greetings = GLOBAL_CONFIG.authorStatus.skills; + + const authorInfoSayHiElement = document.getElementById("author-info__sayhi"); + + // 如果只有一个问候语，设置为默认值 + if (greetings.length === 1) { + authorInfoSayHiElement.textContent = greetings[0]; + return; + } + + let lastSayHello = authorInfoSayHiElement.textContent; + + let randomGreeting = lastSayHello; + while (randomGreeting === lastSayHello) { + randomGreeting = greetings[Math.floor(Math.random() * greetings.length)]; + } + authorInfoSayHiElement.textContent = randomGreeting; + }, +}; + +const anzhiyuPopupManager = { + queue: [], + processing: false, + Jump: false, + + enqueuePopup(title, tip, url, duration = 3000) { + this.queue.push({ title, tip, url, duration }); + if (!this.processing) { + this.processQueue(); + } + }, + + processQueue() { + if (this.queue.length > 0 && !this.processing) { + this.processing = true; + const { title, tip, url, duration } = this.queue.shift(); + this.popupShow(title, tip, url, duration); + } + }, + + popupShow(title, tip, url, duration) { + const popupWindow = document.getElementById("popup-window"); + if (!popupWindow) return; + const windowTitle = popupWindow.querySelector(".popup-window-title"); + const windowContent = popupWindow.querySelector(".popup-window-content"); + const cookiesTip = windowContent.querySelector(".popup-tip"); + if (popupWindow.classList.contains("show-popup-window")) { + popupWindow.classList.add("popup-hide"); + } + + // 等待上一个弹窗完全消失 + setTimeout(() => { + // 移除之前的点击事件处理程序 + popupWindow.removeEventListener("click", this.clickEventHandler); + if (url) { + if (window.pjax) { + this.clickEventHandler = event => { + event.preventDefault(); + pjax.loadUrl(url); + popupWindow.classList.remove("show-popup-window"); + popupWindow.classList.remove("popup-hide"); + this.Jump = true; + + // 处理队列中的下一个弹出窗口 + this.processing = false; + this.processQueue(); + }; + + popupWindow.addEventListener("click", this.clickEventHandler); + } else { + this.clickEventHandler = () => { + window.location.href = url; + }; + popupWindow.addEventListener("click", this.clickEventHandler); + } + if (popupWindow.classList.contains("no-url")) { + popupWindow.classList.remove("no-url"); + } + } else { + if (!popupWindow.classList.contains("no-url")) { + popupWindow.classList.add("no-url"); + } + + this.clickEventHandler = () => { + popupWindow.classList.add("popup-hide"); + setTimeout(() => { + popupWindow.classList.remove("popup-hide"); + popupWindow.classList.remove("show-popup-window"); + }, 1000); + }; + popupWindow.addEventListener("click", this.clickEventHandler); + } + + if (popupWindow.classList.contains("popup-hide")) { + popupWindow.classList.remove("popup-hide"); + } + popupWindow.classList.add("show-popup-window"); + windowTitle.textContent = title; + cookiesTip.textContent = tip; + }, 800); + + setTimeout(() => { + if (url && !this.Jump) { + this.Jump = false; + } + if (!popupWindow.classList.contains("popup-hide") && popupWindow.className != "") { + popupWindow.classList.add("popup-hide"); + } + + // 处理队列中的下一个弹出窗口 + this.processing = false; + this.processQueue(); + }, duration); + }, +}; diff --git a/json/music.json b/json/music.json new file mode 100644 index 0000000000..1e24066f58 --- /dev/null +++ b/json/music.json @@ -0,0 +1 @@ +[{"name":"青花瓷","artist":"周杰伦","url":"https://npm.elemecdn.com/anzhiyu-music@1.0.4/青花瓷/青花瓷.mp3","cover":"https://y.qq.com/music/photo_new/T002R300x300M000002eFUFm2XYZ7z_2.jpg?max_age=2592000","lrc":"https://npm.elemecdn.com/anzhiyu-music@1.0.4/青花瓷/青花瓷.lrc"},{"name":"稻香","artist":"周杰伦","url":"https://npm.elemecdn.com/anzhiyu-music@1.0.1/周杰伦/稻香/稻香.mp3","cover":"https://y.qq.com/music/photo_new/T002R300x300M000002Neh8l0uciQZ_1.jpg?max_age=2592000","lrc":"https://npm.elemecdn.com/anzhiyu-music@1.0.1/周杰伦/稻香/稻香.lrc"},{"name":"晴天","artist":"周杰伦","url":"https://npm.elemecdn.com/anzhiyu-music@1.0.2/晴天/晴天.mp3","cover":"https://y.qq.com/music/photo_new/T002R300x300M000000MkMni19ClKG_3.jpg?max_age=2592000","lrc":"https://npm.elemecdn.com/anzhiyu-music@1.0.2/晴天/晴天.lrc"},{"name":"七里香","artist":"周杰伦","url":"https://npm.elemecdn.com/anzhiyu-music@1.0.2/七里香/七里香.mp3","cover":"https://y.qq.com/music/photo_new/T002R300x300M000003DFRzD192KKD_1.jpg?max_age=2592000","lrc":"https://npm.elemecdn.com/anzhiyu-music@1.0.2/七里香/七里香.lrc"},{"name":"花海","artist":"周杰伦","url":"https://npm.elemecdn.com/anzhiyu-music-jay@1.0.1/花海/花海.flac","cover":"https://y.qq.com/music/photo_new/T002R300x300M000002Neh8l0uciQZ_1.jpg?max_age=2592000","lrc":"https://npm.elemecdn.com/anzhiyu-music-jay@1.0.1/花海/花海.lrc"},{"name":"反方向的钟","artist":"周杰伦","url":"https://npm.elemecdn.com/anzhiyu-music-jay@1.0.1/反方向的钟/反方向的钟.flac","cover":"https://y.qq.com/music/photo_new/T002R300x300M000000f01724fd7TH_1.jpg?max_age=2592000","lrc":"https://npm.elemecdn.com/anzhiyu-music-jay@1.0.1/反方向的钟/反方向的钟.lrc"},{"name":"兰亭序","artist":"周杰伦","url":"https://npm.elemecdn.com/anzhiyu-music@1.0.1/周杰伦/兰亭序/兰亭序.mp3","cover":"https://y.qq.com/music/photo_new/T002R300x300M000002Neh8l0uciQZ_1.jpg?max_age=2592000","lrc":"https://npm.elemecdn.com/anzhiyu-music@1.0.1/周杰伦/兰亭序/兰亭序.lrc"},{"name":"说好的辛福呢","artist":"周杰伦","url":"https://npm.elemecdn.com/anzhiyu-music@1.0.2/说好的辛福呢/说好的辛福呢.mp3","cover":"https://y.qq.com/music/photo_new/T002R300x300M000002Neh8l0uciQZ_1.jpg?max_age=2592000","lrc":"https://npm.elemecdn.com/anzhiyu-music@1.0.2/说好的辛福呢/说好的幸福呢.lrc"},{"name":"等你下课 (with 杨瑞代)","artist":"周杰伦","url":"https://npm.elemecdn.com/anzhiyu-music@1.0.1/周杰伦/等你下课/等你下课.mp3","cover":"https://y.qq.com/music/photo_new/T002R300x300M000003bSL0v4bpKAx_1.jpg?max_age=2592000","lrc":"https://npm.elemecdn.com/anzhiyu-music@1.0.1/周杰伦/等你下课/等你下课.lrc"},{"name":"我落泪情绪零碎","artist":"周杰伦","url":"https://npm.elemecdn.com/anzhiyu-music@1.0.2/我落泪情绪零碎/我落泪情绪零碎.mp3","cover":"https://y.qq.com/music/photo_new/T002R300x300M000000bviBl4FjTpO_1.jpg?max_age=2592000","lrc":"https://npm.elemecdn.com/anzhiyu-music@1.0.2/我落泪情绪零碎/我落泪情绪零碎.lrc"},{"name":"听妈妈的话","artist":"周杰伦","url":"https://npm.elemecdn.com/anzhiyu-music@1.0.2/听妈妈的话/听妈妈的话.mp3","cover":"https://y.qq.com/music/photo_new/T002R300x300M000002jLGWe16Tf1H_1.jpg?max_age=2592000","lrc":"https://npm.elemecdn.com/anzhiyu-music@1.0.2/听妈妈的话/听妈妈的话.lrc"},{"name":"明明就","artist":"周杰伦","url":"https://npm.elemecdn.com/anzhiyu-music-jay@1.0.1/明明就/明明就.flac","cover":"https://y.qq.com/music/photo_new/T002R300x300M000003Ow85E3pnoqi_1.jpg?max_age=2592000","lrc":"https://npm.elemecdn.com/anzhiyu-music-jay@1.0.1/明明就/明明就.lrc"},{"name":"我是如此相信","artist":"周杰伦","url":"https://npm.elemecdn.com/anzhiyu-music-jay@1.0.1/我是如此相信/我是如此相信.flac","cover":"https://y.qq.com/music/photo_new/T002R300x300M000001hGx1Z0so1YX_1.jpg?max_age=2592000","lrc":"https://npm.elemecdn.com/anzhiyu-music-jay@1.0.1/我是如此相信/我是如此相信.lrc"},{"name":"发如雪","artist":"周杰伦","url":"https://npm.elemecdn.com/anzhiyu-music@1.0.3/发如雪/发如雪.mp3","cover":"https://y.qq.com/music/photo_new/T002R300x300M0000024bjiL2aocxT_3.jpg?max_age=2592000","lrc":"https://npm.elemecdn.com/anzhiyu-music@1.0.3/发如雪/发如雪.lrc"},{"name":"以父之名","artist":"周杰伦","url":"https://npm.elemecdn.com/anzhiyu-music@1.0.3/以父之名/以父之名.mp3","cover":"https://y.qq.com/music/photo_new/T002R300x300M000000MkMni19ClKG_3.jpg?max_age=2592000","lrc":"https://npm.elemecdn.com/anzhiyu-music@1.0.3/以父之名/以父之名.lrc"},{"name":"园游会","artist":"周杰伦","url":"https://npm.elemecdn.com/anzhiyu-music@1.0.3/园游会/园游会.flac","cover":"https://y.qq.com/music/photo_new/T002R300x300M000003DFRzD192KKD_1.jpg?max_age=2592000","lrc":"https://npm.elemecdn.com/anzhiyu-music@1.0.3/园游会/园游会.lrc"},{"name":"本草纲目","artist":"周杰伦","url":"https://npm.elemecdn.com/anzhiyu-music@1.0.4/本草纲目/本草纲目.mp3","cover":"https://y.qq.com/music/photo_new/T002R300x300M000002jLGWe16Tf1H_1.jpg?max_age=2592000","lrc":"https://npm.elemecdn.com/anzhiyu-music@1.0.4/本草纲目/本草纲目.lrc"},{"name":"龙卷风","artist":"周杰伦","url":"https://npm.elemecdn.com/anzhiyu-music@1.0.4/龙卷风/龙卷风.mp3","cover":"https://y.qq.com/music/photo_new/T002R300x300M000000f01724fd7TH_1.jpg?max_age=2592000","lrc":"https://npm.elemecdn.com/anzhiyu-music@1.0.4/龙卷风/龙卷风.lrc"}] \ No newline at end of file diff --git a/link/index.html b/link/index.html new file mode 100644 index 0000000000..eaffc7ced1 --- /dev/null +++ b/link/index.html @@ -0,0 +1,342 @@ +link | WaterBoat的博客
    加载头像

    link

    🎣 钓鱼

    全部友链

    框架(2)

    cover
    coverHexo
    cover
    coveranzhiyu主题

    小伙伴(2)

    那些人，那些事
    安知鱼
    安知鱼
    生活明朗，万物可爱
    Jaida Wu
    Jaida Wu
    欢迎来猫窝，喵。
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/music/index.html b/music/index.html new file mode 100644 index 0000000000..9a4b245758 --- /dev/null +++ b/music/index.html @@ -0,0 +1,341 @@ +音乐馆 | WaterBoat的博客
    加载头像

    音乐馆

    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/page/2/index.html b/page/2/index.html new file mode 100644 index 0000000000..60bc733589 --- /dev/null +++ b/page/2/index.html @@ -0,0 +1,483 @@ +WaterBoat的博客 - 正因你我生于繁华，弥足之花方显珍贵
    加载头像
    React-常用库
    未读
    React-常用库
    发表于更新于 React
    5 个用于 React 项目的延迟加载库1. react-lazyloadreact-lazyload 可用于延迟加载 React 应用程序中的任何类型的组件。它是 React 社区中最流行的延迟加载库之一，支持装饰器和服务器端渲染。其特点如下： + +具有一组属性，使用户能够自定义组件的功能。 +提供诸如 forceCheck 之类的实用程序来显示隐藏的内容，这些内容在没有调整大小或滚动事件的情况下变得可见。 +开箱即用支持水平延迟加载。 +只为所有延迟加载的组件实现两个事件监听器，进一步优化性能。 + +GitHub：github.com/twobin/reac… +2. react-lazy-loadreact-lazy-load 是一个 React 组件，可用于以可预测的方式延迟加载内容。它相对较快，具有最小的包大小（缩小为 6KB）。其特点如下： + +自动检测滚动容器，例如带有滚动条的 +，因此甚至可以在滚动容器内使用。 + +允许用户设置阈值以从视口的任何一侧开始内容加载，使用诸如 offsetVertical、offsetHorizontal、offsetTop、offset ...
    工具下载
    开发工具
    未读
    工具下载
    发表于更新于 开发工具
    链接看雪吾爱国光 +
    开发工具 powershell
    开发工具
    未读
    开发工具 powershell
    发表于更新于 开发工具 shell
    前言用过 oh-my-zsh 的小伙伴都知道有非常好看的主题和插件,其中我最喜欢的就是一个插件就是显示自己输入过的命令,但是在 windows 下面的命令行没有发现这个功能一直让我敲代码的快感 -1,一次偶然的机会发现 Powerline 有类似的功能以此介绍了大家 +可能遇到的问题 +Restricted 执行策略不允许任何脚本运行。 +AllSigned 和 RemoteSigned 执行策略可防止 Windows PowerShell 运行没有数字签名的脚本。 +本主题说明如何运行所选未签名脚本（即使在执行策略为 RemoteSigned 的情况下），还说明如何对 脚本进行签名以便您自己使用。 +有关 Windows PowerShell 执行策略的详细信息，请参阅 about_Execution_Policy。 +解决方案 : +管理员打开 powershell +12get-executionpolicyset-executionpolicy remotesigned + +一路 Y 即可 + + +Powerline 安装安装完成的效果 + + +字体文件开始安装之前请先安装字体文件 +Releases · ...
    hash 和 history 路由的区别
    前端
    未读
    hash 和 history 路由的区别
    发表于更新于 JavaScript
    前端路由实现方式路由需要实现三个功能： + +当浏览器地址变化时，切换页面； + +点击浏览器【后退】、【前进】按钮，网页内容跟随变化； + +刷新浏览器，网页加载当前路由对应内容； + + +在单页面 web 网页中, 单纯的浏览器地址改变, 网页不会重载，如单纯的 hash 网址改变网页不会变化，因此我们的路由主要是通过监听事件，并利用 js 实现动态改变网页内容，有两种实现方式： + +hash 模式：监听浏览器地址 hash 值变化，执行相应的 js 切换网页； + +history 模式：利用 history API 实现 url 地址改变，网页内容改变； + + +它们的区别最明显的就是 hash 会在浏览器地址后面增加#号，而 history 可以自定义地址。 +hash 模式使用 window.location.hash 属性及窗口的 onhashchange 事件，可以实现监听浏览器地址 hash 值变化，执行相应的 js 切换网页。下面具体介绍几个使用过程中必须理解的要点： + +hash 指的是地址中#号以及后面的字符，也称为散列值。hash 也称作锚点，本身是用来做页面跳转定位的。如 http:// ...
    Effective JavaScript 编写高质量JavaScript代码的68个有效方法
    前端
    未读
    Effective JavaScript 编写高质量JavaScript代码的68个有效方法
    发表于更新于 JavaScript
    JavaScript 中的浮点数大多数编程语言都有几种数值型数据类型，但是 JavaScript 却只有一种。你可以使用 typeof 运算符查看数字的类型。不管是整数还是浮点数，JavaScript 都将它们简单地归类为数字。 +123typeof 10; // numbertypeof 10.1; // numbertypeof -10.1; // number + +事实上，JavaScript 中所有的数字都是双精度浮点数。这是由IEE 754标准制定的 64 位编码数字—即 “doubles” 。 +那么 JavaScript 是如何表达整数的呢? +请先记住一个概念 : 双精度浮点数能完美地表示高达 53 位精度的整数,范围大小为 -2^53—-2^53 的所有整数都是有效的双精度浮点数 +因此，尽管 JavaScript 中缺少明显的整数类型，但是完全可以进行整数运算。 +大多数的算术运算符可以使用整数、实数或两者的组合进行计算。 +12345console.log(0.1 * 1.9); // 0.19;console.log(-10 + 11); // 1console.log(20 ...
    Redux 笔记
    未读
    Redux 笔记
    发表于更新于 React
    Redux和 vuex 一样为了解决组件之间的通信问题而使用的架构 +设计思想 +Web 应用是一个状态机，视图与状态是一一对应的。 +所有的状态，保存在一个对象里面。 + +Redux 核心理念1. 通过store来保存数据 +2. 通过action来修改数据 +3. 通过reducer将store和action串联起来 reducer(state=initialState) {} + +12345678 ------------- ---------> | Component | --------- | ------------- | | ⬇------------- ------------- -------------| Store | <---- | Reducer | <---- | Action |------------ ...
    React 笔记
    未读
    React 笔记
    发表于更新于 React
    [[toc]] +React 介绍用于构建用户界面的 JavaScript 库 +声明式React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。 +以声明式编写 UI，可以让你的代码更加可靠，且方便调试。 +组件化创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。 +组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。 +一次学习，随处编写无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。 +React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。 +React 初体验使用 React 的 2 种方式1.自行配置1.1 https://zh-hans.reactjs.org/docs/add-react-to-a-website.html +123456789101112131415161718192021<!doctype html><html ...
    React 总结笔记
    未读
    React 总结笔记
    发表于更新于 React
    父传子props 传数据父 +12345678910111213import ClassProps from "./components/ClassProps";import FunctionProps from "./components/FunctionProps";function App() { return ( <div className="App"> <ClassProps name="张三" age={18} /> <FunctionProps name="梨花" age={20} /> </div> );}export default App; + +子 +123456789101112131415161718192021222324252627282930313233343536373839404142import React fro ...
    实现防抖和节流
    前端
    未读
    实现防抖和节流
    发表于更新于 JavaScript
    防抖所谓防抖，就是指触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间 +1234567891011121314function debounce(fn, daytime) { let timer; clearInterval(timer); timer = setTimeout(() => { fn(); }, daytime);}function fn() { console.log("fn");}let result = debounce(fn, 10);console.log(result); + +节流所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。 +123456789101112131415function throttle(fn, dalay) { let start = 0; return () => { let now = new Date().getTime(); if (now - ...
    SQL 基础
    未读
    SQL 基础
    发表于更新于 sql
    [[toc]] +了解 Sql使用的工具本文档的代码都是在 MySQL 8.0.23 版本下面运行的MySQL 下载地址 znavicat 数据库可视化工具 +数据库数据库这个术语的用法很多，（从 SQL 的角度来看），数据库是一个以某种有组织的方式存储的数据集合。最简单的办法是将数据库想象为一个文件柜。这个文件柜是一个存放数据的物理位置，不管数据是什么也不管数据是如何组织的。如果你使用 navicat 查看数据库，那么你可以在下面查看到数据库 + +::: warning 注意数据库概念混淆 +人们通常用数据库这个术语来代表他们使用的数据库软件，这是不正确的，也因此产生了许多混淆。确切地说，数据库软件应称为数据库管理系统（DBMS）。数据库是通过 DBMS 创建和操纵的容器，而具体它究竟是什么，形式如何，各种数据库都不一样。 +::: +表拥有了数据库我们就可以把数据存储在表中，表是一个存储数据的容器，它可以是一个文件，也可以是一个数据库中的一个表。 +表是一种结构化的文件，可用来存储某种特定类型的数据。 +数据库中的每个表都有一个名字来标识自己。这个名字是唯一的，即数据库中没有其他表具有相同的名字。 ...
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/page/3/index.html b/page/3/index.html new file mode 100644 index 0000000000..a17b6f0cd8 --- /dev/null +++ b/page/3/index.html @@ -0,0 +1,491 @@ +WaterBoat的博客 - 正因你我生于繁华，弥足之花方显珍贵
    加载头像
    MySQL踩坑记录
    未读
    MySQL踩坑记录
    发表于更新于 sql
    GROUP_CONCAT 返回长度限制123# 默认是 1024 字符长度增长长度SET SESSION group_concat_max_len = 10240;SET GLOBAL group_concat_max_len = 10240; + +GROUP_CONCAT 对于是 NULL 的数据是不会返回的所以记得 IFNOLL +1CONCAT('"shengping":"', IFNULL(wp.shengping,''), '"}')), + +33 个概念 +
    TypeScript 笔记
    未读
    TypeScript 笔记
    发表于更新于 TypeScript
    [[toc]] +代码库点击去往 +环境搭建12345678910# 安装npm install typescript -gtsc xx.ts # 生成 js 文件tsc -d xx.ts #生成 xx.d.ts文件node xx.js # 运行 js 文件# 方便直接运行 ts 文件的包npm install ts-node -gts-node xx.ts # 直接运行 ts 文件 + +体验一下 ts类型注解(annotation) +我们告诉 typescript 变量是什么类型 + +12let a: number; // annotationa = 11; + + +声明数字 + +1let a: number = 10; + + +声明数组 + +123let a: number[] = [1, 2, 3]; // 声明数字数组let b: string[] = ["1", "2", "3"]; // 声明字符串数组let c: Array<number> = [1, 2, 3]; //运用泛型声明数组 + + +声明对象 + +1const o ...
    Vue 2.0 笔记
    未读
    Vue 2.0 笔记
    发表于更新于 Vue
    v-for 的更新机制 +改变数组的方法就会导致 v-for 更新 +无法改变数组的方法,返回新的数组的,就不会导致 v-for 更新,可采用覆盖数组或者 this.$set(“更新的值”,”更新位置”,”更新值”) + +1234567891011121314151617181920212223242526272829303132333435363738394041<template> <div> <h1>v-for 的更新机制</h1> <template v-for="item in list"> <h1 :key="item">{{ item }}</h1> </template> <button @click="reverse">翻转</button> <button @click="slice"&g ...
    原神抽卡记录抓取
    未读
    原神抽卡记录抓取
    发表于更新于 原神
    日志文件原神的日志文件存储在本地 +12345678var os = require("os");var path = require("path");// 获取原神日志路径let outputPath = path.join( os.userInfo().homedir, "/AppData/LocalLow/miHoYo/原神/output_log.txt",);console.log(outputPath); + +进入游戏后访问自己的抽卡记录，日志里面就会生成对应的访问链接，里面带有用户的 token。 +OnGetWebViewPageFinish +抓包得到的 APIhttps://hk4e-api.mihoyo.com/event/gacha_info/api/getGachaLog +关键参数 + + + +参数 +含义 + + + +size +每页多少条（最多 20） + + +page +第多少页（不知道上限 获取到没有为止） + + +gacha_type +抽卡的类型枚举，分别代表新手、常驻、角色 up 池、武器 up 池 + + +
    Vue 3.0 笔记
    未读
    Vue 3.0 笔记
    发表于更新于 Vue
    Node（后端）中的 MVC 与 前端中的 MVVM 之间的区别（了解内容） +MVC 主要是后端的分层开发思想；把 一个完整的后端项目，分成了三个部分： +Model：（数据层）主要负责 数据库的操作； +View：（视图层）所有前端页面，统称为 View 层 +Controller：（业务逻辑层）主要处理对应的业务逻辑；（对于后台来说，这是开发的重点） + + +MVVM 是前端页面的分层开发思想，主要关注于 视图层 分离，也就是说：MVVM 把前端的视图层，分为了 三部分 Model, View, ViewModel +Model 是 页面中，需要用到的数据 +View 是页面中的 HTML 结构； +ViewModel 是 一个 中间的调度者,提供了双向数据绑定的概念； + + +为什么有了 MVC 还要有 MVVM +因为 MVC 是后端的开发思想，并没有明确定义前端的页面该如何开发； +MVVM 是前端的页面的开发思想，把每个页面，分成了三个部分，同时 VM 作为 MVVM 的核心，提供了双向数据绑定的概念，前端程序员，不需要手动渲染页面了，而且，页面数据发送变化，也不需要程序员手动把 数据的变化同步到 ...
    Vue 3.0 组合式 API
    未读
    Vue 3.0 组合式 API
    发表于更新于 Vue
    1. 为什么学习 Vue3 +目标: 了解学习 Vue3 的必要性。 + + +Vue3 运行性能大幅提升，速度是 Vue2 的 1.5 倍左右 + +Vue3 支持 tree shaking，可以进行按需编译，编译后的文件体积比 Vue2 更小 + +Vue3 组合式 API 使应用中的功能代码更聚合，使组件间公共逻辑的抽取更容易 + +Vue3 对 TypeScript 的支持更加友好，对大型前端应用的支持更加游刃有余 + +Vue3 中提供了更加先进的功能，比如 teleport，suspense 等 + +Vue 是目前国内前端使用者最多的框架，Vue3 是将来的必然趋势 + + + + +Vue3 官方中文文档 +2. 使用 Vite 创建项目 +目标: 能够使用 vite 构建工具创建 Vue 应用。Vite 官方 + +Vite 是一款新型的前端构建工具，核心卖点就是快，启用速度快，编译速度快。 + +创建应用：npm init vite-app vue-tutorial 或者 npx create-vite-app vue-tutorial +切换至应用根目录：cd vue-tutorial +下载应用依赖：npm ins ...
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/tags/Cypress/index.html b/tags/Cypress/index.html new file mode 100644 index 0000000000..a8d0269b60 --- /dev/null +++ b/tags/Cypress/index.html @@ -0,0 +1,417 @@ +标签: Cypress | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/tags/JavaScript/index.html b/tags/JavaScript/index.html new file mode 100644 index 0000000000..b86e7ea68d --- /dev/null +++ b/tags/JavaScript/index.html @@ -0,0 +1,417 @@ +标签: JavaScript | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/tags/Nuxt/index.html b/tags/Nuxt/index.html new file mode 100644 index 0000000000..6dde6d3984 --- /dev/null +++ b/tags/Nuxt/index.html @@ -0,0 +1,417 @@ +标签: Nuxt | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/tags/React/index.html b/tags/React/index.html new file mode 100644 index 0000000000..13f0395903 --- /dev/null +++ b/tags/React/index.html @@ -0,0 +1,417 @@ +标签: React | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/tags/Solidity/index.html b/tags/Solidity/index.html new file mode 100644 index 0000000000..863d8ca45e --- /dev/null +++ b/tags/Solidity/index.html @@ -0,0 +1,417 @@ +标签: Solidity | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/tags/TypeScript/index.html b/tags/TypeScript/index.html new file mode 100644 index 0000000000..7bace5da20 --- /dev/null +++ b/tags/TypeScript/index.html @@ -0,0 +1,417 @@ +标签: TypeScript | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/tags/Vue/index.html b/tags/Vue/index.html new file mode 100644 index 0000000000..8be95a1168 --- /dev/null +++ b/tags/Vue/index.html @@ -0,0 +1,417 @@ +标签: Vue | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/tags/index.html b/tags/index.html new file mode 100644 index 0000000000..26eaf7ea84 --- /dev/null +++ b/tags/index.html @@ -0,0 +1,417 @@ +tags | WaterBoat的博客
    加载头像

    tags

    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/tags/npm/index.html b/tags/npm/index.html new file mode 100644 index 0000000000..b1bff491fd --- /dev/null +++ b/tags/npm/index.html @@ -0,0 +1,417 @@ +标签: npm | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/tags/shell/index.html b/tags/shell/index.html new file mode 100644 index 0000000000..c105005e98 --- /dev/null +++ b/tags/shell/index.html @@ -0,0 +1,417 @@ +标签: shell | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/tags/sql/index.html b/tags/sql/index.html new file mode 100644 index 0000000000..88de9ff2db --- /dev/null +++ b/tags/sql/index.html @@ -0,0 +1,417 @@ +标签: sql | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/tags/\345\214\272\345\235\227\351\223\276/index.html" "b/tags/\345\214\272\345\235\227\351\223\276/index.html" new file mode 100644 index 0000000000..1ab7961a5e --- /dev/null +++ "b/tags/\345\214\272\345\235\227\351\223\276/index.html" @@ -0,0 +1,417 @@ +标签: 区块链 | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/tags/\345\216\237\347\245\236/index.html" "b/tags/\345\216\237\347\245\236/index.html" new file mode 100644 index 0000000000..0b1ef3e6d4 --- /dev/null +++ "b/tags/\345\216\237\347\245\236/index.html" @@ -0,0 +1,417 @@ +标签: 原神 | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/tags/\345\274\200\345\217\221\345\267\245\345\205\267/index.html" "b/tags/\345\274\200\345\217\221\345\267\245\345\205\267/index.html" new file mode 100644 index 0000000000..a6adda38dd --- /dev/null +++ "b/tags/\345\274\200\345\217\221\345\267\245\345\205\267/index.html" @@ -0,0 +1,417 @@ +标签: 开发工具 | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/tags/\346\225\231\347\250\213/index.html" "b/tags/\346\225\231\347\250\213/index.html" new file mode 100644 index 0000000000..51f00a09ef --- /dev/null +++ "b/tags/\346\225\231\347\250\213/index.html" @@ -0,0 +1,417 @@ +标签: 教程 | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git "a/tags/\346\265\213\350\257\225/index.html" "b/tags/\346\265\213\350\257\225/index.html" new file mode 100644 index 0000000000..79db19d04e --- /dev/null +++ "b/tags/\346\265\213\350\257\225/index.html" @@ -0,0 +1,417 @@ +标签: 测试 | WaterBoat的博客
    加载头像
    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file diff --git a/wordScenery/index.html b/wordScenery/index.html new file mode 100644 index 0000000000..1dbef4cbb1 --- /dev/null +++ b/wordScenery/index.html @@ -0,0 +1,342 @@ +世界各地风景 | WaterBoat的博客
    加载头像

    世界各地风景

    avatar
    正因你我生于繁华，弥足之花方显珍贵

    WaterBoat

    正因你我生于繁华，弥足之花方显珍贵
    Cypress1JavaScript6Nuxt1React5Solidity1TypeScript1Vue6npm1shell1sql2区块链1原神1开发工具2教程1测试1
    归档 +
    网站资讯
    文章总数 :
    26
    建站天数 :
    引用到评论
    随便逛逛博客分类文章标签
    复制地址关闭热评深色模式轉為繁體
    \ No newline at end of file