在hexo博客中 , 可以添加站内文章搜索的支持
但是需要生成所有文章的索引
安装hexo官方提供的插件

1

npm install hexo-generator-search --save

阅读全文

Hexo 是一个快速、简洁且高效的博客框架，需要nodejs环境运行
使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可生成静态网页。

阅读全文

占位符 %

使用占位符定义的代码块 , 它同普通的基类一样可以被继承 , 但是本身在编译后不会产生任何代码 , 可以有效避免代码的冗余

1
2
3
4
5
6

%base {
  margin : 5px;
}
.btn {
  @extend %base;
}

阅读全文

变量

在scss当中定义变量的语法如下

$变量名 : 变量值;

阅读全文

CSS本身并不算是一种编程语言 , 它没有变量 , 也没有条件语句
只是作为单纯的描述 , 写起来比较费事 , 同时也需要考虑很多的兼容性问题
很自然地 , 有人开始为CSS加入编程元素 , 这类工具就叫做CSS预处理器
这类工具使用编程的风格去编写类似CSS的代码 , 然后通过工具的处理生成浏览器可以识别的CSS文件

阅读全文

HTML5当中新增了两种浏览器端的缓存方式
分别是sessionStorage和localStorage

• sessionStorage - 用于会话级别数据的缓存 , 这些数据只有在同一个会话中的页面才能访问 , 当会话结束后数据就会随之销毁
• localStorage - 用于持久化的本地存储 , 除非主动删除数据 , 否则数据是永远不会过期的

  阅读全文

在CSS当中 , 我们通常使用@font-face来定义字体
除了可以引入外部字体之外 , 也可以给系统本地的字体定义别名
比如

1
2
3
4
5
6
7

@font-face {
  font-family : YH;
  src : local("microsoft yahei");
}
.font {
  font-family:YH;
}

这样我们就可以在需要使用这个字体的地方直接使用这个别名

阅读全文

使用上一节提到的transition已经可以实现相对简单的一些动画效果
但是对于相对复杂一些的效果 , 尤其是其中需要分为多个阶段的 , 就难以实现
CSS3的animation属性 , 就提供了更加强大的动画设计功能

阅读全文

CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡
这种效果可以在鼠标点击 获得焦点 或对元素的任何改变中触发
并圆滑的以动画效果改变CSS的属性值

阅读全文

CSS3当中与动画有关的属性有 :

• transform - 变形
• transition - 转换
• animation - 动画

  阅读全文