blog station

一、变量是个好东西
在任何语言中，变量的有一点作用都是一样的，那就是可以降低维护成本，附带还有更高性能，文件更高压缩率的好处。

随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行，CSS工作组迅速跟进CSS变量的规范制定，并且，很多浏览器已经跟进，目前，在部分项目中已经可以直接使用了。

Chrome/Firefox/Safari浏览器都是绿油油的，兼容性大大超出我的预期，于是果断尝鲜记录下语法用法和特性。

二、CSS变量var()语法和用法和特性
CSS中原生的变量定义语法是：–*，变量使用语法是：var(--*)，其中*表示我们的变量名称。关于命名这个东西，各种语言都有些显示，例如CSS选择器不能是数字开头，JS中的变量是不能直接数值的，但是，在CSS变量中，这些限制通通没有，例如：

标签变为可编辑

contenteditable=true

textarea标签问题

加边框在移动端会出现双边框

技术迭代版本飞快，只有时刻保持学习和探索，才能跟上不掉队，框架更是如此，需要不断更新，不断修改文章记录，如果一成不变，那写文章将毫无意义

NEXT主题官方文档，操作扩展都非常详细，有兴趣可以看一看

NEXT主题配置
NEXT官方文档

配置

animation:

• animation-name : xuanzhuan //动画名字
• animation-duration : 1s ; //动画时长
• animation-timing-function : linear; //动画运动方式
• animation-fill-mode : both; //动画最终停留状态
• animation-iteration-count : infinite; //动画运动次数
• animation-direction : alternate; //动画来回
• animation-delay : 1s; //动画延迟
• animation-play-state : paused / running; //给js 用的动画控制

$.fn.fullpage. 调用方法

旋转图片：transform:

一。表达式中添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。

1. uppercase 过滤器将字符串格式化为大写：

1

<p>姓名为 {{ lastName | uppercase }}</p>

2. lowercase 过滤器将字符串格式化为小写：

1

<p>姓名为 {{ lastName | lowercase }}</p>

3. currency 过滤器将数字格式化为货币格式：

1

<p>总价 = {{ (quantity * price) | currency }}</p>

vue中使用swiper

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!--！！！！重中之重：swiper不能用v-show或者v-if来控制显示隐藏，这样初始化时不会添加swiper-slide-active这个类名，没有这个类名，就无法动态控制显示哪一个slide,也就是参数initialSlide，用visibility: hidden来控制显示隐藏-->
<!--下面这个swiper实现了fixed布局下的swiper-->
<section class="swiper-box" :class="{'hidden':!showEqSwiper}">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(v,i) in Data" :key="i">
        <img :src="v.image_url" alt>
        <h4>{{v.title}}</h4>
        <p>{{v.description}}</p>
      </div>
    </div>
  </div>
  <!--关闭按钮-->
  <img class="close-swiper" src="./img/eq-close.png" alt @click="showEqSwiper = false">
</section>

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

`$ npm install swiper`
//这种引入方式有bug，再微信PC端浏览器打不开，在部分老机型也打不开，比如iPhone6：
import Swiper from "swiper";
//另一种就是直接引入cdn文件（放在index.html中，当然这种是全局的）：
//而且如果想下载swiper.js到本地，还是会报错。。。暂时没找到原因；
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
export default {
mounted() {
    //轮播
    new Swiper(".swiper-container", {
      observer: true,
      //将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新
      observeParents: true,
      //centeredSlides设定为true时，active slide会居中，而不是默认状态下的居左。
      centeredSlides: true,
      //设置slider容器能够同时显示的slides数量(carousel模式)。默认：1
      slidesPerView: "auto",
      //分页器使用，如果要自定义样式，style不能加scope属性！！！！！！！！！重中之重。。。让我搞半天
      pagination: {
        el: ".prepay-swiper-pagination"
      }
    });
  },
  methods: {
    //这个方法用来控制 swiper显示并且切换到指定slide
    EqSwiper(v) {
      let that = this;
      let curIndex = v;
      this.showEqSwiper = true;
      new Swiper(".swiper-container", {
        centeredSlides: true,
        slidesPerView: "auto",
        //initialSlide设定初始化时slide的索引。
        initialSlide: curIndex
      });
    }
  }
}

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

.swiper-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  &.hidden {
    visibility: hidden;
  }
  .swiper-container {
    padding: 0 1.38rem;
    .swiper-wrapper {
      display: flex;
      transition-property: transform;
    }
    .swiper-slide {
      width: 16rem;
      display: flex;
      flex-shrink: 0;
      flex-direction: column;
      align-items: center;
      background: #fff;
      border-radius: 0.38rem;
      margin: 0 0.35rem;
      img {
        border-radius: 0.38rem 0.38rem 0 0;
      }
      h4 {
        font-size: 1rem;
        font-weight: bold;
        color: rgba(34, 34, 34, 1);
        margin-top: 1.9rem;
      }
      p {
        font-size: 0.7rem;
        font-weight: bold;
        color: rgba(102, 102, 102, 1);
        margin-top: 0.63rem;
        padding-bottom: 1.7rem;
      }
    }
  }
  .close-swiper {
    width: 0.72rem;
    margin-top: 1.75rem;
    margin-left: 9rem;
  }
}

关于git的几个专用名词

• Workspace：工作区
• Index / Stage：暂存区
• Repository：仓库区（或本地仓库）
• Remote：远程仓库

新建代码库

1
2
3
4
5

//在当前目录新建一个git代码库
$ git init

//克隆一个项目
$ git clone https://github.com/gxhpersonal/blog.git

标题

标题是每篇文章需要也是最常用的格式，在Markdown中，如果一段文字被定义为标题，只要在这段文字前加 # 号即可。
# 一级标题
…
###### 六级标题

以此类推，建议在 # 号后面加上一个空格，这是最标准的Markdown语法。

列表

call()和apply()

1、方法定义
call方法:
语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

apply方法：
语法：apply([thisObj[,argArray]])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。
说明：
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

cookie

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

//设置cookie  
//name是cookie中的名，value是对应的值，iTime是多久过期（单位为天）  
function setCookie(name,value,iTime){  
    var oDate = new Date();  
    //设置cookie过期时间  
    oDate.setDate(oDate.getDate()+iTime);  
    document.cookie = name+'='+value+';expires='+oDate.toGMTString();  
}  
//获取cookie  
function getCookie(name){  
    //cookie中的数据都是以分号加空格区分开  
    var arr = document.cookie.split("; ");  
    for(var i=0; i<arr.length; i++){  
        if(arr[i].split("=")[0] == name){  
            return arr[i].split("=")[1];  
        }  
    }  
    //未找到对应的cookie则返回空字符串  
    return '';  
}  
//删除cookie  
function removeCookie(name){  
    //调用setCookie方法，把时间设置为-1  
    setCookie(name,1,-1);  
}