兰喆

chrome好用的插件

Wed, 16 Sep 2020 00:00:00 +0000

自己必装的chrome插件

1.Octotree

github树形代码结构工具，上查看代码的时候总是一层层进入再出来，有点麻烦，没关系，有Octotree。安装Octotree之后，浏览托管在Github上的项目，可看到左侧的树形结构，更方便查看代码。

2.Vue.js devtools

Vue开发调试工具

3.Wappalyzer

可以看到网站用的什么框架什么技术写的

4.（AdGuard广告拦截器）和（广告终结者）

AdGuard：亲测优酷，芒果，腾讯，搜狐可以。爱奇艺不行（2020-9-18测）广告终结者：（全部可以）

AdGuard号称是世界上最高级的广告拦截器。过滤器的强大不仅体现在它内置了多个常用的过滤列表，能够让你一上手就轻松使用，同时它还支持多种自定义过滤选项，让你能够自定义自己所需要的过滤规则。它可以轻松阻挡广告、减少页面加载时间、富媒体或其他非标准类型的广告，在对网页垃圾信息进行屏蔽后可加快页面载入速度。同时AdGuard还支持反钓鱼并对反恶意软件以及网站进行过滤。多平台应用，支持Windows、Mac和手机。主要功能有六种：广告拦截、安全网络冲浪、隐私保护、家长控制、保护数据、在线掩饰自己。

目前两个结合使用

5.Momentum

美化你的chrome标签页，自动更换标签页壁纸搜索，天气，todolist，设置（分别在四个角）

6.Google 翻译

选中后直接右键翻译

Sublime text 3安装和常用插件安装

Sun, 06 Sep 2020 00:00:00 +0000

Sublime text 3安装和配置

一：Sublime3下载

下载地址：http://www.sublimetext.com/3
我选择下载Win64位安装程序

二：安装

按步骤傻瓜式安装，一直点下一步即可。
安装Package Control（Package Control是一个管理Sublime Text插件的插件，通过Package Control我们可以直接使用Sublime Text控制台来安装其他插件，快捷简单。）
1. Ctrl+Shift+P打开命令面板;
2. 输入Install Package Control静等一会儿，菜单栏点击Perferences如果出现Package Settings和Package Control说明安装成功了，结果如下图所示。（如果没出现，重启一下sublime）

Sublime text 3插件的安装和配置

组合键Ctrl+Shift+P 调出命令面板
输入install回车
在搜索框中输入要安装的包名（一个一个，不能同时安多个）
静待几秒即可安装成功

前端常用插件介绍

1. Emmet

(一种快速编写html/css的方法) 插件介绍以及演示 ***

2. AutoFileName

(自动完成文件名的输入，如图片选取选择路径时) 插件介绍以及演示 ***

3. JavaScript Completions

(支持javascript原生语法提示，妈妈再也不用担心我输入document.getElementById(id)。) 插件介绍以及演示 ***

4. HTML-CSS-JS Prettify

(THML、CSS、JS代码格式化，压缩过后的代码可以通过该工具复原。) 插件介绍以及演示安装完成后，需要设置node路径：Ctrl+Shift+P后输入htmlprettify

格式化代码的快捷健为Ctrl+Shift+H ***

5. A File Icon

(显示侧边栏图标)

6. Sublime Text3 的 Markdown 实时预览

MarkdownPreview	支持在浏览器中预览markdown文件
LiveReload	是一个可实时刷新的插件

先安装两个插件，安装完成后

组合键 Ctrl+Shift+P 调出命令面板
输入mdp找到并选中Markdown Preview： Preview in Browser
出现两个选项：github和markdown。选择markdown
Sublime Text支持自定义快捷键，Markdown Preview默认没有快捷键，我们可以自己为Markdown Preview： Preview in Browser设置快捷键。方法是在Preferences -> Key Bindings打开的文件的右侧栏的中括号中添加一行代码：快捷健设置成了alt+m
```
{ "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"}  }
```
再次Ctrl+shift+p, 输入dpi选择LiveReload: Enable/disable plug-ins, 回车, 选择 Simple Reload with delay (400ms)或者Simple Reload，两者的区别仅仅在于后者没有延迟。

常用git笔记

Sat, 22 Aug 2020 00:00:00 +0000

git命令情形

本地改动了文件index.html和index.css

情形1：改了文件还没有执行git add想撤销index.html的内容

$ git checkout -- pages/src/index.html

情形2：改了文件还没有执行git add想撤销所有的内容

$ git reset --hard HEAD

情形3：改了文件执行了git add但是没有执行git commit想撤销index.html内容.

$ git reset HEAD pages/src/index.html
$ git checkout -- pages/src/index.html

用命令git reset HEAD 可以把暂存区的修改撤销掉（unstage），重新放回工作区(也就是git add之前)

理解这张图(重要)

设置Git

安装完git后设置你的全局的用户名和邮箱

$ git config --global user.name "John Doe"
$ git config --global user.email "john@doe.org"

注意git config命令的--global参数，用了这个参数，表示你这台机器上所有的Git仓库都会使用这个配置，当然也可以对某个仓库指定不同的用户名和Email地址。

从一个未被纳入版本控制的项目开始

你现在正在着手在一个项目开发上，但是它还未被纳入版本控制系统的管理中，那就让我们从这个项目开始吧！在命令行界面中跳转到这个项目的根目录（root folder），然后键入 “git init” 命令来建立一个 Git 项目：

$ cd /d/dev/project
$ git init

现在我们来看看在这个目录下都有哪些文件（也包括所有的隐藏文件）：

ls -la

你将会看到其中有一个新建的并且名字为 “.git” 的隐藏目录。为什么有这么一个新的目录呢？其实这是 Git 给我们创建的一个空的本地仓库（local repository）。为什么是　“空”　呢？开始时 Git 并不会自动地把当前项目中的所有的内容当作　“初始版本（initial version）”　添加到本地仓库中的，因此现在这个本地仓库还不包含任何你的项目文件。

忽略文件设置

第一次提交

这个时候本地仓库是空的，需要把工作区的项目提交到本地仓库

把工作区的所有内容添加到暂存区

git add .

把暂存区的内容添加到本地仓库

git commit -m "第一次提交"

本地 / 远程工作流程

　假设你在github上创建了一个仓库，下面的命令是关联本地仓库和远程仓库

$ git remote add origin git@github.com:lanzhe9527/learngit.git

请千万注意，把上面的lanzhe9527替换成你自己的GitHub账户名，否则，你在本地关联的就是我的远程库，关联没有问题，但是你以后推送是推不上去的，因为你的SSH Key公钥不在我的账户列表中。添加后，远程库的名字就是origin，这是Git默认的叫法，也可以改成别的，但是origin这个名字一看就知道是远程库。

下一步把本地库的所有内容推送到远程库上

$ git push -u origin master

由于远程库是空的，我们第一次推送master分支时，加上了-u参数，Git不但会把本地的master分支内容推送的远程新的master分支，还会把本地的master分支和远程的master分支关联起来，在以后的推送或者拉取时就可以简化命令。

另外一种方式就是从远程仓库直接克隆（适用于项目才开始或者新加入到项目的成员）

git clone git@github.com:lanzhe9527/lanzhe9527.github.io.git

Jekyll搭建个人博客

Thu, 20 Aug 2020 00:00:00 +0000

接下来我会讲如何使用 Jekyll 搭建博客，博客模板效果。

介绍

　Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录，其中包含原始文本格式的文档，通过 Markdown （或者 Textile）以及 Liquid 转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的

　使用 Jekyll 搭建博客之前要确认下本机环境，Git 环境（用于部署到远端）、Ruby 环境（Jekyll 是基于 Ruby 开发的）、包管理器 RubyGems
　　如果你是 Mac 用户，你就需要安装 Xcode 和 Command-Line Tools了。下载方式 Preferences → Downloads → Components。

　　Jekyll 是一个免费的简单静态网页生成工具，可以配合第三方服务例如： Disqus（评论）、多说(评论) 以及分享等等扩展功能，Jekyll 可以直接部署在 Github（国外）或 Coding（国内）上，可以绑定自己的域名。Jekyll中文文档、Jekyll英文文档、Jekyll主题列表。

Jekyll 环境配置

前提是先安装ruby环境然后在执行下面的（安装ruby环境可自行搜索）

安装 jekyll

$ gem install jekyll

创建博客

$ jekyll new myBlog

进入博客目录

$ cd myBlog

启动本地服务

$ jekyll serve

在浏览器里输入： http://localhost:4000，就可以看到你的博客效果了。

so easy !

目录结构

　　Jekyll 的核心其实是一个文本转换引擎。它的概念其实就是：你用你最喜欢的标记语言来写文章，可以是 Markdown，也可以是 Textile,或者就是简单的 HTML, 然后 Jekyll 就会帮你套入一个或一系列的布局中。在整个过程中你可以设置URL路径, 你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现，最终生成的静态页面就是你的成品了。

一个基本的 Jekyll 网站的目录结构一般是像这样的：

.
├── _config.yml
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   ├── post.html
|   └── page.html
├── _posts
|   └── 2016-10-08-welcome-to-jekyll.markdown
├── _sass
|   ├── _base.scss
|   ├── _layout.scss
|   └── _syntax-highlighting.scss
├── about.md
├── css
|   └── main.scss
├── feed.xml
└── index.html

这些目录结构以及具体的作用可以参考官网文档

进入 _config.yml 里面，修改成你想看到的信息，重新 jekyll server ，刷新浏览器就可以看到你刚刚修改的信息了。

到此，博客初步搭建算是完成了，

博客部署到远端

　我这里讲的是部署到 Github Page 创建一个 github 账号，然后创建一个跟你账户名一样的仓库，如我的 github 账户名叫 lanzhe9527，我的 github 仓库名就叫 lanzhe9527.github.io，创建好了之后，把刚才建立的 myBlog 项目 push 到 username.github.io仓库里去（username指的是你的github用户名），检查你远端仓库已经跟你本地 myBlog 同步了，然后你在浏览器里输入 username.github.io ，就可以访问你的博客了。

编写文章

　　所有的文章都是 _posts 目录下面，文章格式为 mardown 格式，文章文件名可以是 .mardown 或者 .md。

　　编写一篇新文章很简单，你可以直接从 _posts/ 目录下复制一份出来 2016-10-16-welcome-to-jekyll副本.markdown ，修改名字为 2016-10-16-article1.markdown ，注意：文章名的格式前面必须为 2016-10-16- ，日期可以修改，但必须为年-月-日- 格式，后面的 article1 是整个文章的连接 URL，如果文章名为中文，那么文章的连接URL就会变成这样的：http://lanzhe9527.github.io/2015/08/%E6%90%AD%E5/ ，所以建议文章名最好是英文的或者阿拉伯数字。双击 2016-10-16-article1.markdown 打开

---
layout: post
title:  "Welcome to Jekyll!"
date:   2016-10-16 11:29:08 +0800
categories: jekyll update
---

正文...

title: 显示的文章名，如：title: 我的第一篇文章
date: 显示的文章发布日期，如：date: 2016-10-16
categories: tag标签的分类，如：categories: 随笔

注意：文章头部格式必须为上面的，…. 就是文章的正文内容。

我写文章使用的是 webstrom 编辑器，如果你对 markdown 语法不熟悉的话，可以看看作业部落的教程

使用我的博客模板

虽然博客部署完成了，你会发现博客太简单不是你想要的，如果你喜欢我的模板的话，可以使用我的模板。

首先你要获取的我博客，Github项目地址，使用命令部署本地服务

$ jekyll server

如果你本机没配置过任何jekyll的环境，可能会报错

D:\github.com\myBlog>jekyll serve
Traceback (most recent call last):
        10: from D:/ruby/Ruby26-x64/bin/jekyll:23:in `<main>'
         9: from D:/ruby/Ruby26-x64/bin/jekyll:23:in `load'
         8: from D:/ruby/Ruby26-x64/lib/ruby/gems/2.6.0/gems/jekyll-4.1.1/exe/jekyll:11:in `<top (required)>'
         7: from D:/ruby/Ruby26-x64/lib/ruby/gems/2.6.0/gems/jekyll-4.1.1/lib/jekyll/plugin_manager.rb:52:in `require_from_bundler'
         6: from D:/ruby/Ruby26-x64/lib/ruby/2.6.0/bundler.rb:107:in `setup'
         5: from D:/ruby/Ruby26-x64/lib/ruby/2.6.0/bundler/runtime.rb:26:in `setup'
         4: from D:/ruby/Ruby26-x64/lib/ruby/2.6.0/bundler/runtime.rb:26:in `map'
         3: from D:/ruby/Ruby26-x64/lib/ruby/2.6.0/forwardable.rb:230:in `each'
         2: from D:/ruby/Ruby26-x64/lib/ruby/2.6.0/forwardable.rb:230:in `each'
         1: from D:/ruby/Ruby26-x64/lib/ruby/2.6.0/bundler/runtime.rb:31:in `block in setup'
D:/ruby/Ruby26-x64/lib/ruby/2.6.0/bundler/runtime.rb:319:in `check_for_activated_spec!': You have already activated public_suffix 4.0.5, but your Gemfile requires public_suffix 3.0.3. Prepending `bundle exec` to your command may sol
ve this. (Gem::LoadError)

解决方法：


$ bundle exec jekyll serve

提示

Configuration file: /Users/baixinpan/Desktop/OpenSource/Mine/Page-Blog/leopardpan.github.io-github/_config.yml
            Source: /Users/baixinpan/Desktop/OpenSource/Mine/Page-Blog/leopardpan.github.io-github
       Destination: /Users/baixinpan/Desktop/OpenSource/Mine/Page-Blog/leopardpan.github.io-github/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
                    done in 0.901 seconds.
 Auto-regeneration: enabled for '/Users/baixinpan/Desktop/OpenSource/Mine/Page-Blog/leopardpan.github.io-github'
Configuration file: /Users/baixinpan/Desktop/OpenSource/Mine/Page-Blog/leopardpan.github.io-github/_config.yml
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

表示本地服务部署成功。

在浏览器输入 127.0.0.1:4000 ，就可以看到lanzhe9527.github.io博客效果了。

修改成你自己的博客

如果你想使用我的模板请把 _posts/ 目录下的文章都去掉。

修改 _config.yml 文件里面的内容为你自己的。

然后使用 git push 到你自己的仓库里面去，检查你远端仓库，在浏览器输入 username.github.io 就会发现，你有一个漂亮的主题模板了。

为什么要是用 Jekyll

使用了 Jekyll 你会发现如果你想使用多台电脑发博客都很方便，只要把远端 github 仓库里的博客 clone 下来，写文章后再提交就可以了