摘录

我见过春日夏风,秋月冬雪,也曾踏遍南水北山,东麓西岭,可这四季春秋,苍山央水,都不及你瞅我展眉一笑

阅读全文
mac 远程 Linux 步骤
  1. 打开 mac 终端
  2. 在菜单栏中找到 Shell->新建远程链接
  3. Shell 中新增服务器配置

mac2linux

1
2
3
4
ssh root@localhost -p 29180
# root - 用户名
# localhost - ip
# 29180 - 端口
阅读全文
Linux 系统上搭建 shadowsocks 服务

服务端安装

如果没有 root 权限,首先获取 root 权限

1
sudo su

Debian / Ubuntu

1
2
apt-get install python-pip
pip install shadowsocks

CentOS

1
2
yum install python-setuptools && easy_install pip
pip install shadowsocks
阅读全文
Hexo 配置 Aloglia

首先注册Algolia账户

Algolia 登陆页面,可以使用 GitHub 或者 Google 账户直接登录,也可以注册一个新账户。我直接用谷歌账户登陆了,注册后的 14 天内拥有所有功能(包括收费类别的)。之后若未续费会自动降级为免费账户,免费账户 总共有 10,000 条记录,每月有 100,000 的可以操作数。

注册完成后,创建一个新的 Index,这个 index name 之后会用到

Index 创建完成后,此时这个 Index 里未包含任何数据。 接下来需要安装 Hexo Algolia 扩展, 这个扩展的功能是搜集站点的内容并通过 API 发送给 Algolia。前往站点根目录,执行命令安装:

npm install hexo-algolia –save # 目前最新版本是1.2.4,下面的操作都是基于这个版本的文档

复制代码获取 Key,更新站点根目录配置

前往站点根目录打开_config.yml添加以下代码

Algolia Search API Key

1
2
3
4
algolia:
applicationID: '你的Application ID'
apiKey: '你的Search-Only API Key'
indexName: '输入刚才创建index name'

复制代码修改Algolia搜索ACL(访问控制列表)

选中后保存。
操作完成后执行命令

1
2
export(windows 为 set) (Powershell 用 $env:) HEXO_ALGOLIA_INDEXING_KEY=你的Search-Only API key
set (Mac和git bash 为 export) (Powershell 用 $env:) HEXO_ALGOLIA_INDEXING_KEY #查看是否设置成功如果没有值就设置失败

查看环境变量HEXO_ALGOLIA_INDEXING_KEY是否已经存在

1
2
3
export | grep ALGOLIA

hexo algolia

阅读全文
Git

概述

我们可以把 Git 分成两个部分,一个是远程仓库 Remote Repository,还有一个是本地环境 Development Environment
git1.png

命令

git clone

git2.png

git add

git3.png

git commit -m ‘commit’

git4.png

git push

git5.png

git pull

拉取远程仓库的代码

git status

查看 Working Directory 和 Staging Area 中更改的文件

1
2
3
4
5
6
7
8
9
10
11
12
> git status
On branch pre
Changes to be committed:
(use "git reset HEAD <file>..." to unstage)

modified: src/config.js

Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)

modified: src/main.js

阅读全文
阿里云 OSS 部署前端静态页面

OSS 前端自动化部署:

使用 node.js 或 python。

阿里云官方文档(使用 nodejs)

快速入门

OSS(options)中的各个配置项说明如下:

  • [accessKeyId] {String}:通过阿里云控制台创建的AccessKey。
  • [accessKeySecret] {String}:通过阿里云控制台创建的AccessSecret。
  • [stsToken] {String}:使用临时授权方式,详情请参见使用 STS 进行临时授权。
  • [bucket] {String}:通过控制台或PutBucket创建的bucket。
  • [endpoint] {String}:OSS域名。
  • [region] {String}:bucket所在的区域, 默认oss-cn-hangzhou。
  • [internal] {Boolean}:是否使用阿里云内网访问,默认false。比如通过ECS访问OSS,则设置为true,采用internal的endpoint可节约费用。
  • [cname] {Boolean}:是否支持上传自定义域名,默认false。如果cname为true,endpoint传入自定义域名时,自定义域名需要先同bucket进行绑定。
  • [isRequestPay] {Boolean}:bucket是否开启请求者付费模式,默认false。具体可查看请求者付费模式。
  • [secure] {Boolean}:(secure: true)则使用HTTPS,(secure: false)则使用HTTP,详情请查看常见问题。
  • [timeout] {String|Number}:超时时间,默认60s。
阅读全文
前端性能优化方法
  1. 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。

  2. 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数

  3. 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。

  4. 当需要设置的样式很多时设置className而不是直接操作style。

  5. 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

  6. 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。

  7. 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。

  8. 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。

    对普通的网站有一个统一的思路,就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是,在不影响功能和体验的情况下,能在浏览器执行的不要在服务端执行,能在缓存服务器上直接返回的不要到应用服务器,程序能直接取得的结果不要到外部取得,本机内能取得的数据不要到远程取,内存能取到的不要到磁盘取,缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成(例如join查询),减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分,换语言是无法“优化”的。

阅读全文
HTML、CSS优化

能用 HTML/CSS 解决的问题就不要用 JS

导航高亮

可以用 class 来标识菜单是否选中,选中的 class 增加特殊样式,:hover 选择器可以用来表示鼠标悬浮的样式

鼠标悬浮时显示

使用 :hover 选择器实现

自定义 radio/checkbox 的样式

input 始终隐藏,通过设置 span.checkbox 的样式来实现自定义样式,通过 :checked 伪类更改选中状态的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
input[type=checkbox]{
display: none;
}
/* 未选中的 checkbox 的样式 */
.checkbox{
/* 具体实现 */
}
input[type=checkbox]:checked + .checkbox{
/* 具体实现 */
}
</style>
<label>
<input type="checkbox">
<span class="checkbox"></span>
</label>

阅读全文
Linux 常用命令

先升级 npm 可能会导致 nodejs 和 npm 版本不一致,无法安装其他包

npm 安装包失败可尝试以下命令:

1
2
sudo chown -R $USER:$GROUP ~/.npm
sudo chown -R $USER:$GROUP ~/.config


1
sudo npm install -g --unsafe-perm=true --allow-root

安装 node-sass 失败

1
sudo npm install node-sass@4.11.0 --unsafe-perm=true --allow-root

阅读全文
Linux 常用命令

Linux入门

编写命令:

1
echo hello world!!!

不知道这个命令什么意思吗?没关系:

1
man echo	manual(手册)
阅读全文
Algolia