发表于 | 分类于

文档坐标和视口坐标

1 二者区别

1.1 文档坐标是整个HTML 形成的坐标体系，视口是显示文档内容的 浏览器的一部分,它不包括浏览器的”外壳”，如菜单和工具栏和标签页

1.2 如果文档比视口要小，或者说文档还没有出现滚动，那么这个时候文档左上角就是视口左上角，文档坐标和视口坐标是同一个系统；

1.3 文档坐标是视口坐标更加基础，因为文档坐标系统是固定不变的，元素相对于文档坐标的位置是不变的；但是视口坐标系统就不一样了，元素相对于视口坐标的位置，在发生滚动的时候，是实时变化的；

2 获取窗口滚动条的位置

1
2
3
4
5
6
7
8
9
10
11
function getSCroll(){
    return {
      left : window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
      top : window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        }
    }
   window.onscroll = function(){
        var scroll = getSCroll();
        console.log(scroll.left);
        console.log(scroll.top);
    };

3 获取窗口的可视区域的宽高

1
2
3
4
5
6
7
8
9
10
11
12
function getClient(){
  return {
  width : window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
  height : window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
	 }
  }
//在文档根元素查询这些属性的时候，返回的值和窗口的innerHeight innerWidth属性值一样
    window.onresize = function(){
        var client = getClient();
        console.log(client.width);
        console.log(client.height);
    };

4 获取文档内容的宽高

1
2
var documentHeight = document.documentElement.offsetHeight;
var documentWidth = document.documentElement.offsetWidth;

5 获取元素相对于视口坐标系统原点的距离

ele.getBoundingClientRect(); 返回一个数组,包括元素左上角和右下角距离视口坐标系统原点的距离，以及元素自身的宽高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
	<style>
        div{
            position: absolute;
            left: 100px;
            top: 150px;
            background-color: pink;
            height: 100px;
            width: 100px;
        }
    </style>
<div id = "div1"></div>	
<script>
	var div1 = document.getElementById("div1");
    var box = div1.getBoundingClientRect();
    console.log(box);
</script>

6 获取元素相对于 文档坐标系统 原点 的 距离 ；

offsetLeft offsetTop 用来获取元素(border边界)左上角相对于文档坐标原点的距离

或者 相对于 定位了的父元素 的border边界左上角的距离；

1
2
3
4
5
6
7
8
9
10
11
function getElePos(ele){
        var x = 0,y = 0 ;
        while(ele != null ){
            x += ele.offsetLeft;
            y += ele.offsetTop;
            ele = ele.offsetParent;
            console.log(ele);
        }
        return {x : x ,y: y }
    }
//这个封装的方法可以获取任何元素相对于文档坐标系统原点的  x y 坐标值

对于不支持ele.getBoundingClientRect();获取元素相对于 视口坐标系统的浏览器来说 进行以下封装,用来获取元素相对于视口坐标系统的 x y的值 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getElePos(ele){
        var x = 0,y = 0 ;
        for(var e = ele ; e != null ; e = e.offsetParent){
            x += e.offsetLeft;
            y += e.offsetTop;
            //获取元素相对于文档的坐标
        }
        for(var e = ele.parentNode ; e != null && e.nodeType == 1 ;e = e.parentNode){
            console.log(e);
            x -= e.scrollLeft;
            y -= e.scrollTop ;
          //减去元素卷曲出去距离
        }
        return {x : x ,y: y }
    }

5 滚动文档内容 window.scrollTo(x,y) window.scrollBy(x,y) 将文档内容滚动到距离 视口坐标左上角 x,y 处的位置；

发表于 | 分类于

for in

1
2
3
4
5
6
7
8
9
10
11
//for in 遍历的是数组的索引 ，而不是数组的值 	
	var arr= ["name","age","address"]
    for (let key in arr ){
        console.log(key);
    }
//---------------------------------------
//遍历对象的时候，遍历的是对象的属性，而不是属性值
 	var obj = {name:"Jhon",age:14};
    for(let key in obj){
        console.log(key);
    }

发表于 | 分类于

webstorm编辑器运用小技巧

1 如何比较两份文件的区别：先复制，然后与剪贴板进行比较: 视图–>与剪贴板比较

2 webstorm默认是没有换行的:

  • 单个文件设置：视图–活跃编辑器–启用自动换行
  • 系统设置，每个文件都要自动换行：文件–设置–编辑器–softwraps–启用软换行

3 鼠标点击某个方法或者某个类，按住ctrl+鼠标左键，可以直接进入该方法或者类所在文件

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
快捷键配置
点击“File”-> “settings”
Webstorm预置了其他编辑器的快捷键配置，可以点击
默认配置-Eclipse的常用快捷键对照表
查找/代替
Webstorm快捷键	Eclipse快捷键	说明
ctrl+shift+N	ctrl+shift+R	通过文件名快速查找工程内的文件（必记）
ctrl+shift+alt+N	ctrl+shift+alt+N	通过一个字符快速查找位置（必记）
ctrl+F	ctrl+F	在文件内快速查找代码
F3	ctrl+K	查找下一个
shift+F3	ctrl+shift+K	查找上一个
ctrl+R	ctrl+F	文件内代码替换
ctrl+shift+R	 	指定目录内代码批量替换
ctrl+shift+F	ctrl+H	指定目录内代码批量查找
界面操作
Webstorm快捷键	Eclipse快捷键	说明
ctrl+shift+A	ctrl+shift+A	快速查找并使用编辑器所有功能（必记）
alt+[0-9]	alt+[0-9]	快速拆合功能界面模块
ctrl+shift+F12	ctrl+shift+F12	最大区域显示代码（会隐藏其他的功能界面模块）
alt+shift+F	alt+shift+F	将当前文件加入收藏夹
ctrl+alt+s	ctrl+alt+s	打开配置窗口
ctrl+tab	ctrl+tab	切换代码选项卡（还要进行此选择，效率差些）
alt+←/→	alt+←/→	切换代码选项卡
ctrl+F4	ctrl+F4	关闭当前代码选项卡
代码编辑
Webstorm快捷键	Eclipse快捷键	说明
ctrl+D	ctrl+shift+↑	复制当前行
ctrl+W	alt+shift+↑	选中单词
ctrl+←/→
ctrl+←/→
以单词作为边界跳光标位置
alt+insert	alt+insert	新建一个文件或其他
ctrl+alt+L	ctrl+alt+L	格式化代码
shift+tab/tab	shift+tab/tab	减少/扩大缩进（可以在代码中减少行缩进）
ctrl+Y	ctrl+D	删除一行
shift+enter	shift+enter	重新开始一行（无论光标在哪个位置）
导航
Webstorm快捷键	Eclipse快捷键	说明
esc	esc	进入代码编辑区域
alt+F1	alt+F1	查找代码在其他界面模块的位置，颇为有用
ctrl+G	ctrl+L	到指定行的代码
ctrl+]/[	ctrl+]/[	光标到代码块的前面或后面
alt+up/down	ctrl+shift+up/down	上一个/下一个方法

发表于 | 分类于

如何更改github-hexo博客的主题？

目前使用的主题是：yilia

在博客的根目录下（即上一篇文章使用Hexo框架自由搭建博客中提到的 Blog 文件夹下） 克隆主题
1
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
执行：
1
$ vim _config.yml
将 theme 对应的值进行修改
1
theme: yilia
接着就自动部署一下：
1
$ npm install hexo-deployer-git --save
最后发布：
1
$ hexo clean && hexo g && hexo d

稍等片刻看一下自己的博客主页，你想要的效果就出现了。也可以点击 更多，挑选自己喜欢的主题进行修改，只要你快乐就好。

二、主题配置

现在主题是更改过来了，但还有许多细节需要处理，比如说你需要修改头像等等。

首先进入到根目录下的 themes\yilia 文件夹，执行
1
$ vim _config.yml
就能看到这样信息，我是这样配置的：
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
# Header
menu:
 主页: /
 所有文章: /archives
 # 随笔: /tags/随笔
 # SubNav
subnav:
      github: "https://github.com/Sjunxiao"  //github地址
      #weibo: "#"   //微博地址
      rss: "http://www.jianshu.com/users/fb696dcbd06b/latest_articles"  //订阅地址,我填的是自己的简书主页地址。
      #zhihu: "#"    // 下面这些前面带#的,就不显示在主页上,如果有账号,就可以打开
      #douban: "#"
      #mail: "#"
      #facebook: "#"
      #google: "#"
       #twitter: "#"
      #linkedin: "#"
rss: /atom.xml 
# Content
excerpt_link: more
fancybox: true
mathjax: true
# 是否开启动画效果
animate: true
# 是否在新窗口打开链接
open_in_new: false
# Miscellaneous
google_analytics: ''
favicon: /favicon.png
#你的头像url
avatar: "https://avatars2.githubusercontent.com/u/19587420?v=3&s=460"  //设置头像图片，可以直接拷贝Github头像链接
#是否开启分享
share_jia: true
share_addthis: false
#是否开启多说评论，填写你在多说申请的项目名称 duoshuo: duoshuo-key
#若使用disqus，请在博客config文件中填写disqus_shortname，并关闭多说评论
duoshuo: true     //使用'多说'评论
#是否开启云标签
tagcloud: false
#是否开启友情链接
#不开启——
#friends: ture
#开启——
friends:     //下面可以设置自定义友情链接
#是否开启“关于我”。
#不开启——
#aboutme: false
#开启——
aboutme: 像少年啦飞驰   //介绍
配置完成以后，回到 根目录（即上一篇文章使用Hexo框架自由搭建博客中提到的 Blog 文件夹），按顺序执行命令就OK啦。
1
2
$ npm install hexo-deployer-git --save    
$ hexo clean && hexo g && hexo d

<转载>

那么如何使用 Hexo 建立一个属于自己的网站呢？

一、 注册GitHub

首先我们需要做的是去 GitHub 注册一个帐号，并创建一个Repository仓库。这里需要注意的是仓库的名称必须是 用户名.github.io ，才能使用 Github Pages .

二、配置SSH

下载并安装 Git 。

1. 设置user name和email：

1
2
$ git config --global user.name "你的GitHub用户名"
$ git config --global user.email "你的GitHub注册邮箱"

2. 生成ssh密钥:

输入下面命令

1
$ ssh-keygen -t rsa -C "你的GitHub注册邮箱"

一般情况下是不需要密码的，所以，接下来直接回车就好。

此时，在用户文件夹下就会有一个新的文件夹 .ssh ，里面有刚刚创建的ssh密钥文件 id_rsa和 id_rsa.pub 。

注：id_rsa文件是私钥，要妥善保管，id_rsa.pub是公钥文件。

3. 添加公钥到github：

点击用户头像，进入Settings(设置)选项。在用户设置栏，点击SSH and GPG keys选项，然后点击New SSH key(新建SSH)按钮；

将id_rsa.pub中的内容复制到 Key 文本框中，然后点击Add SSH key(添加SSH)按钮。

4. 测试SSH：

1
$ ssh -T git@github.com

接下来会出来下面的确认信息：

1
2
3
The authenticity of host 'github.com (207.97.227.239)' can't be established. 
RSA key fingerprint is 17:24:ac:a5:76:28:24:36:62:1b:36:4d:eb:df:a6:45.
Are you sure you want to continue connecting (yes/no)?

输入 yes 后回车。

然后显示如下信息则OK(其中的SeayXu是用户名)。

1
2
Hi longluo! You've successfully authenticated, 
but GitHub does not provide shell access.

以上是准备工作。

三、创建本地仓库

1. 新建仓库文件夹

这里就取名为blog。

1
$ mkdir blog   在打开bash的地方新建一个文件夹

2. 初始化仓库

安装hexo

1
2
$ npm install -g hexo-cli
$ npm install -g hexo-server

进入到blog文件夹，执行初始化命令。

1
2
$ cd blog # 切换到blog目录  可以从父目录到子目录
$ git init # 初始化git仓库  在这个目录下初始化仓库

注：初始化要在Hexo安装之后执行，因为在hexo初始化的时候会从github上克隆代码，会创建.git文件夹。

如果在此之前初始化仓库会将原有的仓库信息覆盖掉，最后也会删除。

四、Hexo初始化之前必须先安装hexo客户端

1. 安装Hexo

Hexo是基于 NodeJS ，所以需要先安装NodeJS。

1
$ npm install -g hexo-cli

2. 初始化框架

1
2
$ hexo init <yourFolder>   这个代表初始化哪个文件夹，如果直接在该文件夹下hexoinit则不需要folder
$ cd <yourFolder>

3. 安装依赖

1
$ npm install

4. 初始化完成大概的目录：

1
2
3
4
5
6
7
8
9
10
11
.
├── _config.yml //网站的`配置`信息，您可以在此配置大部分的参数。
├── package.json
├── db.json // json格式的静态常量数据库    
├── node_modules // Hexo的功能JavaScript文件
├── public // 生成静态网页文件
├── scaffolds   //模版文件夹。当您新建文章时，Hexo会根据scaffold来建立文件。
├── source     //资源文件夹是存放用户资源的地方。
|   ├── _drafts // 草稿文件夹
|   └── _posts // 文章文件夹
└── themes     //主题文件夹。Hexo会根据主题来生成静态页面。

5. 新建文章（创建一个Hello World）

1
$ hexo new <title> for example: "Hello World"

在/source/_post里添加hello-world.md文件，之后新建的文章都将存放在此目录下。

如果要删除，直接在此文件夹下删除对应的文件即可。

6. 生成网站

1
$ hexo generate

此时会将/source的.md文件生成到/public中，形成网站的静态文件。

7. 服务器

1
$ hexo server -p 3000

输入 http://localhost:3000即可查看网站。

8. 部署网站

1
$ hexo deploy

该操作会将hexo生成的静态内容部署到配置的仓库中，请看下面介绍。

部署网站之前需要生成静态文件，即可以用 $ hexo generate -d 直接生成并部署。

此时需要在 _config.yml 中配置你所要部署的站点：

1
2
3
4
5
## Docs: http://hexo.io/docs/deployment.html
deploy:
    type: git
    repo: git@github.com:YourRepository.git
    branch: master

如果没有意外，部署就成功了，可以打开 http://<用户名>.github.io 查看。

常用Hexo命令

清除生成内容

1
$ hexo c == hexo clean

执行此操作会删除 public 文件夹中的内容。

1
2
$ hexo g == hexo generate
$ hexo s == hexo server

五、使用Next主题让站点更酷炫

1. 使用NexT Theme

1
2
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

从Next的Gihub仓库中获取最新版本。

2. Hexo NexT主题的文档结构

1
2
3
4
5
6
7
8
9
10
11
/languages   #用来配置国际化语言版本，里边包含各种个配置像的文本翻译。
/layout      #以swig文件来定义各种含有配置信息调用的布局
/scripts     #一些JS脚本
/source    
    /css      #用来修改自定义样式，需要掌握一定的css语法。
    /fonts    #定义字体文件，可以修改博客字体
    /images   #一些svg图片
    /js       #一些js脚本
    /vendors  
/404.html #自定义的公益404页面
/test        #用于测试

3. 启用NexT主题

需要修改/root/_config.yml配置项theme：

1
2
3
4
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next

4. 验证是否启用

1
$ hexo s --debug

访问 http://localhost:4000，确保站点正确运行。（此命令可以做平时预览用）

六、总结

通过以上步骤，我们就成功的实现了在Github上建立了一个高逼格的Hexo个人博客站点。

下面的事情就是不断的去写，去思考，去实践！

Complete By Long Luo @2016-3-08 23:12:01 at Shenzhen, China.

发表于

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment