前端开发常用工具

发表于 2018-04-25 | 分类于前端 | 阅读次数：

本文字数： 36 | 阅读时长 ≈ 1 分钟

css相关

RGBA&Hex 颜色转换

工具类

正则表达式

上传图片预览

发表于 2018-04-24 | 分类于前端 | 阅读次数：

本文字数： 2.7k | 阅读时长 ≈ 2 分钟

图片上传前预览本地图片的几种方法，假设input[type=file]的id是fileupload，预览的img标签的id是preview。

使用FileReader

if(window.FileReader) {
    var file = document.getElementById("fileupload");
    var fr = new FileReader();
    fr.onloadend = function(e) {
        document.getElementById("preview").src = e.target.result;
    }
    fr.readAsDataURL(file.files[0]);
}

使用createObjectURL

1
2
3

var file = document.getElementById("fileupload");
var url = window.URL.createObjectURL(file.files[0]);
document.getElementById("preview").src = url;

IE8、9使用滤镜

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    .image_container {
        width: 48px;
        height: 48px;
        position: relative;
    }
    </style>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script language="javascript">
    $(function() {
        $("#file_upload").change(function() {
            var $file = $(this);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = $("#preview");
 
            if(fileObj && fileObj.files && fileObj.files[0]){
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                $img.attr('src',dataURL);
            }else{
                //IE8、9获取图片真实路径需要document.selection.createRange().text
                $file[0].select();
                $file[0].blur();
                dataURL = document.selection.createRange().text
                // dataURL = $file.val();
                var imgObj = document.getElementById("preview");
                // 两个坑:
                // 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
                // 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
            }
        });
    });
    </script>
</head>
<body>
    <div id="demo">
        <input id="file_upload" type="file" />
        <div class="image_container">
            <img id="preview" width="60" height="60">
        </div>
    </div>
</body>
</html>

CSS边框问题

发表于 2018-04-23 | 分类于 html | 阅读次数：

本文字数： 167 | 阅读时长 ≈ 1 分钟

最近开发一个页面使用background-image属性作为img标签的背景，img没有设置src属性，图片一直显示一个边框，怎么也去不掉。
示例

解决办法

后来在网上找到解决方法，图片没有设置src属性，浏览器会当作没有图片处理，会默认给一个边框，解决版本是给图片src一个空白的图片。
这种情况最好不要使用img标签，更换为其他标签。

为什么要建博客

发表于 2018-04-21 | 分类于随笔 | 阅读次数：

本文字数： 970 | 阅读时长 ≈ 1 分钟

周末醒来外面下着小雨，感觉很困、很累。回想一下这周的经过，白天、晚上都在研究hexo，耽误了自己的工作也没啥成果，把自己搞得很疲惫，所以想把这些感想记录下来，以后的生活也好有个借鉴。

为什么要建这个博客

之前研究了一些东西，没有做过笔记、整理。过段时间再用的时候已经忘了，还要重新搜索、整理，这种情况重复了很多次。所以有了建立一个博客的想法，暂时还不清楚要写那些内容，但重点应该是记录研究过的知识点，不能花太多时间，权当记笔记吧，最重要的是先行动起来。

误区

建立这个博客的初衷是为了记录东西，重点关注的应该是内容，本不应该关注一些外在的东西的。刚开始的时候纠结于选择哪个博客平台号，在网上乱搜一通，一直在比较哪个好，比了一天也没结果，后来我想自己建博客只是为了记录一些知识，随便选一个就行了，就决定使用hexo建这个静态博客了，先试用一段时间再说。
选了hexo以后我又在主题和个性化上纠结了很长时间，花了一周时间研究主题和个性化，才有了前面的两篇文章，Hexo使用教程和Hexo集成Travis CI，当时一周白天、晚上啥也没干就研究这个，晚上还整到1、2点搞的自己很疲惫，东西能完以后我问自己为啥花一周时间搞这些不太重要的东西呢，我写博客的初衷只是为了记录一下点东西，干嘛太注重这个。我重新下载了一份next6.x的主题覆盖了原来的版本，让一切回归内容上来，以后不能太关注主题这些东西，人还是太容易被其他的东西分散注意力。

应该写什么内容

写第一篇 Hexo使用教程的时候，当时是刚学着用hexo，就在网上搜了很多教程，自己实验了一下没问题的就把内容复制了过来，花了一天多的时间整理出来了这篇文章，晚上看的时候觉得内容太多了，把自己觉得没用的东西删掉了，只留下了自己觉的以后能用到的。
写第二篇Hexo集成Travis CI的时候我还是按照第一篇的写法写的，写到一半的时候我实在写不下去了，我感觉这样太浪费时间了，网上已经有的没问题的东西自己为啥还要再写一遍呢，放个链接不就可以了，以后用到的时候也可以直接打开看不用再到处搜索了，就把写过的内容全部删除了，只留下一个链接，然后把自己感兴趣的链接里没有的东西写到了后面。

不要重复造轮子，以后还是写一些遇到的问题、问题的解决思路和方法吧，时刻提醒自己写这个的初衷是什么，不要花费太多的时间。

Github徽章

发表于 2018-04-20 | 阅读次数：

本文字数： 1.1k | 阅读时长 ≈ 1 分钟

常用的徽章: https://github.com/boennemann/badges

Trasiv CI编译徽章

1	[![](https://travis-ci.org/lijiangwei/homepage.svg?branch=master)](https://travis-ci.org/lijiangwei/homepage/)

仓库状态

Stability: 0 - Deprecated

1	[![deprecated](http://badges.github.io/stability-badges/dist/deprecated.svg)](http://github.com/badges/stability-badges)

Stability: 1 - Experimental

1	[![experimental](http://badges.github.io/stability-badges/dist/experimental.svg)](http://github.com/badges/stability-badges)

Stability: 2 - Unstable

1	[![unstable](http://badges.github.io/stability-badges/dist/unstable.svg)](http://github.com/badges/stability-badges)

Stability: 3 - Stable

1	[![stable](http://badges.github.io/stability-badges/dist/stable.svg)](http://github.com/badges/stability-badges)

Stability: 4 - Frozen

1	[![frozen](http://badges.github.io/stability-badges/dist/frozen.svg)](http://github.com/badges/stability-badges)

Stability: 5 - Locked

1	[![locked](http://badges.github.io/stability-badges/dist/locked.svg)](http://github.com/badges/stability-badges)

开源协议徽章

MIT Licence

1	![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)

项目依赖

Hexo集成Travis CI

发表于 2018-04-19 | 分类于技术 | 阅读次数：

本文字数： 4.3k | 阅读时长 ≈ 4 分钟

travis的配置和使用参考：http://dmego.me/2017/10/13/deylpoy-hexo-with-TravisCI.html

增加同步推送到gitee

gitee也有令牌，但是gitee的令牌暂时不支持像github的token那样有推送代码的权限，gitee的推送有两种方式：

通过https协议使用用户名、密码推送 https://用户名:密码@gitee.com/用户/仓库名.git
通过ssh协议，使用私钥文件免密推送 git @ gitee.com/用户/仓库名.git

由于代码都是公开的，不能把密码和ssh私钥直接放到代码里，两种方式都需要通过trasiv提供的加密服务，对密码或者私钥文件进行加密。下面是加密和配置的流程：

登录trasiv命令行

trasiv命令行需要ruby环境，建议在linux环境操作，先安装ruby和ruby的gem。

1 2	# 安装travis命令行 gem install travis

在window环境操作一直报ssl证书错误（网上有解决办法，我没有试），我是在阿里云的服务器上完成的加密。

登录travis的命令行，中间会让输入github的用户名、密码登录travis

travis login #登录命令

We need your GitHub login to identify you.
This information will not be sent to Travis CI, only to api.github.com.
The password will not be displayed.

Try running with --github-token or --auto if you don't want to enter your password anyway.
# 使用github的用户名、密码登录
Username: xxx@xxx.xxx
Password for xxx@xxx.xxx: ***
Successfully logged in as demo!

加密密码

加密可以参考travis官网的文档https://docs.travis-ci.com/user/encrypting-files/
如果密码中有特殊符号，需要转义：例如@需要转成%40

首先从github的仓库clone一份代码到本地，确保根目录有.travis.yml文件，下面的命令都是在代码的根目录操作的。

1 2	# gitee_password变量名，xxx是gitee的用户名密码 $ travis encrypt gitee_password=xxx --add

.travis.yml文件的globar会增加一个密文secure字段

修改.travis.yml文件，增加推送gitee的代码

# GE_REF和GH_REF一样是gitee要推送的仓库地址 gitee.com/用户/仓库名.git
after_script:
- cd ./public
- git init
- git config user.name "用户"
- git config user.email "xxx@xxx.com"
- git add .
- git commit -m "Update Blog By TravisCI With Build $TRAVIS_BUILD_NUMBER"
- git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master
- git push --force "https://用户:${gitee_password}@${GE_REF}" master:master

把修改后的.travis.yml文件推送到github服务器上就可以了。

加密ssh私钥文件

也需要先登录trasiv的命令行
公钥、私钥文件的生成和使用参考gitee帮助文档

# 例如私钥文件是 ~/.ssh目录下的id_rsa
travis encrypt-file ~/.ssh/id_rsa --add
# 下面是命令行打印的日志
Detected repository as xxx/xxx, is this correct? |yes| yes
encrypting ~/.ssh/id_rsa for xxx/xxx
storing result as id_rsa.enc
storing secure env variables for decryption

Make sure to add id_rsa.enc to the git repository.
Make sure not to add ~/.ssh/id_rsa to the git repository.
Commit all changes to your .travis.yml.

.travis.yml文件会增加几行配置信息

1
2
3

before_install:
  - openssl aes-256-cbc -K $encrypted_d89376f3278d_key -iv $encrypted_d89376f3278d_iv
  -in id_rsa.enc -out ~\/.ssh/id_rsa -d

同时根目录会增加一个加密后的文件id_rsa.enc

.travis.yml文件增加推送到gitee的代码

# GE_REF的配置是 gitee.com:用户名/仓库名.git
after_script:
- cd ./public
- git init
- git config user.name "用户"
- git config user.email "xxx@xxx.com"
- git add .
- git commit -m "Update Blog By TravisCI With Build $TRAVIS_BUILD_NUMBER"
- git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master
- git push --force "git@${GE_REF}" master:master

把修改后的.travis.yml文件和新增的id_rsa.enc文件推送到服务器。

这个我测试的时候报错

1 2	$ openssl aes-256-cbc -K $encrypted_cdd288e44784_key -iv $encrypted_cdd288e44784_iv -in id_rsa.enc -out ~\/.ssh/id_rsa -d ~/.ssh/id_rsa: No such file or directory

这种方式应该是可行的，目前暂时没有时间研究这个问题，后续再解决。

解决ssh密钥push代码报错

travis encrypt-file ~/.ssh/id_rsa --add命令增加的代码，把-out ~后面的转义符去掉，修改为

1
2
3

before_install:
  - openssl aes-256-cbc -K $encrypted_d89376f3278d_key -iv $encrypted_d89376f3278d_iv
  -in id_rsa.enc -out ~/.ssh/id_rsa -d

提交代码后重新测试，执行到git push的时候会提示无法确认gitee.com的真实性，需要用户输入yes确认，但是travis不是交互式的，不接收输入。

1 2	The authenticity of host 'gitee.com (120.55.226.24)' can't be established. Are you sure you want to continue connecting (yes/no)?

解决这个问题的方法参考travis文档: https://docs.travis-ci.com/user/ssh-known-hosts/

有两种方法：

在.travis.yml配置文件中增加下面的配置
1
2
3
addons:
ssh_known_hosts:
- gitee.com
在.travis.yml配置文件中把gitee.com服务器ssh的公钥写到known_hosts文件中
1
- echo 'Key' >> $HOME/.ssh/known_hosts

把key替换成gitee.com的公钥，key的获取方法参考上面的travis文档的链接。

至此使用travis同时向github和gitee推送代码的问题已经解决，同时还可以增加自己其他的服务器。

部署中遇到的其他问题

travis部署的页面是空页面hexo g的时候报错

$ hexo g
INFO  Start processing
INFO  Files loaded in 392 ms
WARN  No layout: categories/index.html
WARN  No layout: tags/index.html

原因是next主题的代码没有提交到源码中，git clone下载的代码不全，重新提交代码后问题解决。

参考：
https://www.cnblogs.com/dmego/p/7664877.html
http://notes.iissnan.com/2016/publishing-github-pages-with-travis-ci/
https://segmentfault.com/a/1190000011218410

Hexo使用教程

发表于 2018-04-18 | 分类于技术 | 阅读次数：

本文字数： 6.7k | 阅读时长 ≈ 6 分钟

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装及使用

参考官网教程：中文官网

主题设置

推荐使用NexT主题next使用教程

设置中文

修改配置文件(_config.yml)

1	language: zh-Hans

Next个性化配置

搜索功能

推荐使用Local Search作为站内搜索，搜索速度快，同时比较简洁，启用方法如下：

安装插件

1	npm install hexo-generator-searchdb --save

更改配置文件
在配置文件的任意位置增加下面的内容：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

更改主题的配置文件
开启local search做为站内搜索
1
2
3
# Local search
local_search:
enable: true

阅读全文 »