Nginx redirect request to CDN Server

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

http {

  # Split clients (approximately) equally based on
  # client ip address
  split_clients $remote_addr $cdn_host {
    33% cdn1;
    33% cdn2;
    - cdn3;
  }

  server {
    server_name example.com;

    # Use the variable defined by the split_clients block to determine
    # the rewritten hostname for requests beginning with /images/
    location /images/ {
      rewrite ^ http://$cdn_host.example.com$request_uri? permanent;
    }
    # 匹配 类似 /eg/a.png /eg/static/a.png 的路径
    # 向客户端发送一个301重定向响应
    # 客户端在接收到该响应后会到对应的Location获取资源
    location ~* ^/eg(.*).(css|js|jpg|jpeg|png)$ {
      rewrite ^ https://your.cdn.server$request_uri? permanent;
    }
  }
}

CSS 如何固定导航目录

在博客页面中有一个很常用的布局是文章主题居中，目录居左或居右固定，那么这个布局要如何用CSS渲染出来呢
不多说，直接上代码

1. html

   1 2 3 4 5 6 7 8 9 10

   <div class="wrapper"> <div class="main-page"> 内容 </div> <div class="nav-block"> <div class="nav-inner"> 目录 </div> </div> </div>

2. css

   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

   body { background-color: #EEEEEE; } .wrapper { width: 400px; margin: auto; max-width: 100%; } .main-page { display: inline-block; height: 9999px; width: 400px; background: white; } .nav-block { display: inline-block; margin-left: 20px; position: fixed; top: 30px; background-color: white; } .nav-inner { width: 120px }

Online Demo

点我查看

Git 常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

git add . // 追踪文件变更
git mv oldFileName newFileName // 重命名文件
git rm fileName // 删除文件
git stash save "stash message" // 暂存本地修改
git stash list // 展示暂存列表
git stash apply stash@{0} // 应用最新暂存到仓库，<stash@{0}>可以不加
git stash pop stash@{0} // 同上，应用最新暂存到仓库并删除改暂存
git stash drop stash@{0} // 删除暂存
git commit -m "message" // 提交文件修改信息
git branch -a // 展示所有分支信息（包括远程）
git branch -d branchName // 删除本地分支
git push --set-upstream origin branchName // 创建远程分支并提交本地分支到远程
git push --delete origin branchName // 删除远程分支
git push // 提交当前分支的本地更改
git pull // 拉取远程分支并merge到本地
git merge branchName // 将<branchName> 合并到当前分支

tsconfig 中 typeRoots types @types 的区别和意义

1. typeRoots 和 types 都是 tsconfig 中 compilerOptions 的配置项

2. typeRoots 定义在哪些路径下查找ts定义模块，types 定义导入哪些定义模块

3. @types 是由社区维护的第三方模块定义库，很多优秀的js模块都可以在这里找到定义库
   例如JQuery这种纯js库在ts中使用 可以直接 npm install -D @types/jquery 这样在import Jquery 时就会自动导入定义库了

示例代码

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

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "sourceMap": true,
    "baseUrl": ".",
    "typeRoots": ["./types", "./node_modules/@types"], // 只在列表中的路径下导入定义
    "types": ["webpack-env", "jest", "lodash", "moment"], // 只导入列表中的模块
    "paths": {
      "@/*": ["src/*"],
      "~/*": ["types/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": ["types/*.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
  "exclude": ["node_modules"]
}

svn-observer

svn-observer 可以监听 svn 项目更新并执行自定义回调。

使用方式

1. 全局安装 npm 包

   1	npm install -g svn-observer

2. 生成配置文件目录，目录地址可以为相对或绝对路径：

   1	svn-observer config -s yourConfigFolder

   配置文件解析如下：

   1 2 3 4 5 6 7

   yourConfigFolder | | ecosystem.config.js // pm2 配置文件, 无需更改 | global.default.js // 全局配置文件 | index.js // 配置文件加载脚本, 无需更改 | repos.default.js // svn 项目配置脚本 |

   生成完成后更改相关配置文件为实际配置

3. 在配置文件目录中打开命令行执行

   1

   pm2 start

   确认是否启动成功可以使用如下命令查看项目日志

   1	pm2 log svn-observer

   

TODO

1. 添加 web 面板

许可证

MIT

如何解决设置 webpackChunkName 后，打包文件异常的问题

在配置 vue-route 时，设置了 webpackChunkName 后发现打包完成后的部分 ChunkFile 文件夹异常，经过排查后发现 /* ChunkFileName: "anyChunkName" */ 后面没有加空格就会导致webpack解析 ChunkName 时会出错，生成了奇怪的文件夹。从而导致打出来的包有关这个ChunkName的功能都不能正常使用。

示例代码：（注意路径前要有空格）

1
2
3
4
5

{
  name: 'About',
  path: '/About',
  component: () => import(/* webpackChunkName: "About" */ '../views/About.vue')
}

闲来无事，又开始了自己搭建博客的计划，之前断断续续用过 WordPress，typecho 等博客系统，慢慢发现自己写的文章还没有系统代码多，有很多功能自己并不能用上。现在转行做了前端，于是决定从前端的生态搞起，用 hexo 重新搭建博客页面。本篇文章主要讲一下在博客生成完之后如何使用 Travis CI 自动生成博客并提交到 gh-page 分支上。

操作流程

1. 在项目根目录中新建_config.yml文件并添加如下配置a

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

   language: node_js node_js: - 12 cache: npm os: linux # linux of windows dist: bionic # bionic for 18.04, focal for 20.04 ,default is xenial 16.04 branches: only: - master # build master branch only before_install: - export TZ='Asia/Shanghai' install: - npm install script: - hexo generate # generate static files deploy: provider: pages skip_cleanup: true keep_history: true token: $GH_TOKEN on: branch: master local_dir: public

   阅读全文 »

清除规则

1
2
3

iptables -F
iptables -X
iptables -Z

设置政策

1
2
3

iptables -P INPUT DROP
iptables -P OUTPUT ACCEPT
iptables -P FORWARD ACCEPT