From 12c04bb97c05b46c9f0d21a78918676a3e6ccedf Mon Sep 17 00:00:00 2001 From: FredZeng Date: Tue, 20 Feb 2024 09:58:16 +0000 Subject: [PATCH] deploy: FredZeng/Hexo-Blog@4bac491bb3c882dce311eb54875a2b3e780ab44b --- 2021/11/19/git/index.html | 2 +- page/2/index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/2021/11/19/git/index.html b/2021/11/19/git/index.html index 9595f4b..771b780 100644 --- a/2021/11/19/git/index.html +++ b/2021/11/19/git/index.html @@ -1 +1 @@ -Git 速记 - FredTsang

Git 速记

2021-11-19
  • 添加/修改远程仓库地址
1
2
3
4
5
# 添加仓库地址
git remote add [shortname] [url]

# 修改仓库地址
git remote set-url [shortname] [url]
  • 修改最近一次 commit 的 message
1
git commit --amend
  • 修改最近一次 commit 的作者信息
1
git commit --amend --author "xxx <xxx@abc.com>"
  • 批量重置 commit author
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#!/bin/sh

git filter-branch --env-filter '

OLD_EMAIL="your-old-email@example.com"
CORRECT_NAME="Your Correct Name"
CORRECT_EMAIL="your-correct-email@example.com"

if [ "$GIT_COMMITTER_EMAIL" = "$OLD_EMAIL" ]
then
    export GIT_COMMITTER_NAME="$CORRECT_NAME"
    export GIT_COMMITTER_EMAIL="$CORRECT_EMAIL"
fi
if [ "$GIT_AUTHOR_EMAIL" = "$OLD_EMAIL" ]
then
    export GIT_AUTHOR_NAME="$CORRECT_NAME"
    export GIT_AUTHOR_EMAIL="$CORRECT_EMAIL"
fi
' --tag-name-filter cat -- --branches --tags
  • 创建一个全新的分支，没有历史记录
1
git checkout --orphan <branch>
  • 全局配置 GitHub token

GitHub 不再支持 “用户名 + 密码” 的登录方式，推荐使用 GitHub token 来进行鉴权；
给每个 clone 下来的项目单独配置 token 过于繁琐，可以使用以下方式全局配置 GitHub token。

方法一：

1
2
git config --global github.token <你的 GitHub token>
git config --global github.user <github上的用户名>

方法二：

1
git config --global url."https://<你的 GitHub token>@github.com".insteadOf "https://github.com"
Powered by Hexo | Theme - Even ©2019 - 2024 FredTsang
\ No newline at end of file +Git 速记 - FredTsang

Git 速记

2021-11-19
  • 添加/修改远程仓库地址
1
2
3
4
5
# 添加仓库地址
git remote add [shortname] [url]

# 修改仓库地址
git remote set-url [shortname] [url]
  • 修改最近一次 commit 的 message
1
git commit --amend
  • 修改最近一次 commit 的作者信息
1
git commit --amend --author "xxx <xxx@abc.com>"
  • 批量重置 commit author
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#!/bin/sh

git filter-branch --env-filter '

OLD_EMAIL="your-old-email@example.com"
CORRECT_NAME="Your Correct Name"
CORRECT_EMAIL="your-correct-email@example.com"

if [ "$GIT_COMMITTER_EMAIL" = "$OLD_EMAIL" ]
then
    export GIT_COMMITTER_NAME="$CORRECT_NAME"
    export GIT_COMMITTER_EMAIL="$CORRECT_EMAIL"
fi
if [ "$GIT_AUTHOR_EMAIL" = "$OLD_EMAIL" ]
then
    export GIT_AUTHOR_NAME="$CORRECT_NAME"
    export GIT_AUTHOR_EMAIL="$CORRECT_EMAIL"
fi
' --tag-name-filter cat -- --branches --tags
  • 创建一个全新的分支，没有历史记录
1
git checkout --orphan <branch>
  • 加速 clone 项目
1
git clone --depth 1 <url>
  • 全局配置 GitHub token

GitHub 不再支持 “用户名 + 密码” 的登录方式，推荐使用 GitHub token 来进行鉴权；
给每个 clone 下来的项目单独配置 token 过于繁琐，可以使用以下方式全局配置 GitHub token。

方法一：

1
2
git config --global github.token <你的 GitHub token>
git config --global github.user <github上的用户名>

方法二：

1
git config --global url."https://<你的 GitHub token>@github.com".insteadOf "https://github.com"
Powered by Hexo | Theme - Even ©2019 - 2024 FredTsang
\ No newline at end of file diff --git a/page/2/index.html b/page/2/index.html index b203708..e5ee372 100644 --- a/page/2/index.html +++ b/page/2/index.html @@ -1 +1 @@ -FredTsang

Convert TSConfig paths to Webpack alias

2021-12-22

Inspired by marzelin/convert-tsconfig-paths-to-webpack-aliases.

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
const fs = require('fs');
const path = require('path');
const get = require('lodash/get');
const JSON5 = require('json5');

/**
 * convert tsconfig.json paths to webpack alias
 */
const convertTSConfigPaths2Aliases = () => {
  const tsConfigPath = path.resolve(process.cwd(), './tsconfig.json');

  try {
    if (fs.existsSync(tsConfigPath)) {
      // dealing with json file with comments, we use json5 to parse tsconfig.json instead of requiring directly
      const tsConfig = JSON5.parse(fs.readFileSync(tsConfigPath));
      let { baseUrl, paths } = get(tsConfig, 'compilerOptions', {});

      if (paths) {
        baseUrl = baseUrl ? path.resolve(process.cwd(), baseUrl) : process.cwd();

        const replaceGlobs = (path) => path.replace(/(\/\*\*)*\/\*$/, '');

        return Object.keys(paths).reduce((aliases, pathName) => {
          const alias = replaceGlobs(pathName);
          const aliasPath = replaceGlobs(paths[pathName][0]);
          aliases[alias] = path.resolve(baseUrl, aliasPath);
          return aliases;
        }, {});
      }
    }
  } catch (err) {
    console.error(err);
    return {};
  }

  return {};
};

Usage

1
2
3
4
5
6
7
8
9
// webpack.js

module.exports = {
  resolve: {
    alias: {
      ...convertTSConfigPaths2Aliases(),
    }
  }
};

使用 GitHub Actions 自动化构建/部署 GitHub Page

2021-11-24
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
# .github/workflows/deploy.yml
name: Deploy Blog
on:
  push:
    branches:
      - master # 当有 commit 被 push 到 master 分支时，执行下面的 jobs
jobs:
  deploy: # job name
    runs-on: macos-latest # jobs 运行在 macos 上
    steps:
      - name: Check out Git repository
        uses: actions/checkout@v2 # 拉取当前最新代码

      - name: Install Node.js, NPM and Yarn
        uses: actions/setup-node@v2 # 初始化 node 环境
        with:
          node-version: '12'

      - name: Cache NPM dependencies
        uses: actions/cache@v2 # 缓存 ~/.npm 内的 npm 包，以免每次执行 jobs 的时候都需要重新下载
        with:
          path: ~/.npm
          key: ${{ runner.os }}-npm-cache
          restore-keys: |
            ${{ runner.os }}-npm-cache

      - name: Build # 安装 npm 包 & 执行 hexo 的打包命令（不使用 hexo 的 deploy 命令，而是通过下一个 step 来部署）
        run: |
          npm install
          npm run build-only
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3 # hexo 构建后的文件在 public 目录下，将该目录下的文件推送到另一个仓库
        with:
          personal_token: ${{ secrets.ACCESS_TOKEN }} # 由于推送到另一个仓库需要权限，所以需要创建/配置一个 personal access token
          external_repository: FredZeng/FredZeng.github.io # 如果是推送到同一个仓库，就可以不用写这个
          publish_dir: ./public
          publish_branch: master

配置

  1. Creating a personal access token 创建自己的 access token，一般勾选上 repo 就可以了；请务必复制，保存好生成的 token。
  2. Encrypted secrets 将创建好的 token 添加到项目的 Actions secrets 中，这样你才能在 action 里面用到上述的 secrets.ACCESS_TOKEN。
  3. 🎉🎉🎉 你已经完成了所有前置步骤，可以享受自动化部署了

其他

其他方案可参考官方文档 将 Hexo 部署到 GitHub Pages 实现自动化部署。

使用 jsDelivr 来加速你的博客

2021-11-24

jsDelivr 为开源项目提供了免费的 CDN 服务，我们可以使用 jsDelivr 来给我们的 GitHub Page 静态资源提供 CDN 服务。

  • 用法：

针对 GitHub，jsdelivr 提供了以下方式来访问仓库内的文件：

1
2
3
4
5
6
7
8
9
10
// load any GitHub release, commit, or branch

// note: we recommend using npm for projects that support it

https://cdn.jsdelivr.net/gh/user/repo@version/file


// load jQuery v3.2.1

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js
  • 如何应用在 hexo 上？

给你的 图片、js、css 加上 https://cdn.jsdelivr.net/gh/user/repo@version/ 前缀。

  1. 给 markdown 图片加上前缀

如果你使用的是 hexo-renderer-marked@^4.1.0，你可以将下述代码片段复制到你的 scripts 目录下。
如果没有 scripts 目录，那么在你的 hexo 项目根目录下创建一个；hexo 会自动读取并加载 scripts 下的 js 文件。
下述的代码片段主要来自 hexo-renderer-marked#render.js，主要是覆写了它处理 markdown 中 image 的逻辑，以便给图片加上前缀。

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
// scripts/render.js

const { encodeURL, url_for } = require('hexo-util');

hexo.extend.filter.register('marked:renderer', function (renderer) {
    const { config } = this; // Skip this line if you don't need user config from _config.yml
    renderer.image = function (href, title, text) {
        const { hexo, options } = this;
        const { relative_link } = hexo.config;
        const { lazyload, prependRoot, postPath } = options;
        let { baseUrl = '' } = options;

        if (!/^(#|\/\/|http(s)?:)/.test(href) && !relative_link && prependRoot) {
            if (!href.startsWith('/') && !href.startsWith('\\') && postPath) {
                const PostAsset = hexo.model('PostAsset');
                // findById requires forward slash
                const asset = PostAsset.findById(join(postPath, href.replace(/\\/g, '/')));
                // asset.path is backward slash in Windows
                if (asset) href = asset.path.replace(/\\/g, '/');
            }
            href = url_for.call(hexo, href);
        }

        // 此处是修改的内容：支持配置 baseUrl
        if (!/^(#|\/\/|http(s)?:)/.test(href)) {
            baseUrl = baseUrl.replace(/\\/g, '/');
            if (baseUrl.endsWith('/')) {
                baseUrl = baseUrl.slice(0, baseUrl.length - 1);
            }
            if (!href.startsWith('/')) {
                href = '/' + href;
            }
            href = baseUrl + href;
        }

        let out = `<img src="${encodeURL(href)}"`;
        if (text) out += ` alt="${text}"`;
        if (title) out += ` title="${title}"`;
        if (lazyload) out += ' loading="lazy"';

        out += '>';
        return out;
    }
})

你的 markdown 已经支持给本地图片加上前缀的功能了，而后你需要在 _config.yml 中配置你的 baseUrl。

1
2
3
marked:
  baseUrl: https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master
  lazyload: true
  1. 给js和css加上前缀

很遗憾，这并没有什么通用的解决方法。因为，假如你使用了一个主题的话，那么js和css文件的使用是写死在主题中的，你需要自己定位并修改。

更多姿势

可以将仓库作为图床，而后通过 jsDelivr cdn 访问。

遇到的一些小问题

  • 如何手动刷新 jsdelivr cdn 缓存？

使用 purge.jsdelivr.net 替换 cdn.jsdelivr.net 来访问 cdn 地址，访问后即可刷新 cdn 资源。

1
https://purge.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/css/style.css?v=

Html 速记

2021-11-22
  1. <img loading="lazy"> 由浏览器实现图片懒加载

Can I Use lazy loading

  1. 动态添加 script 到页面
1
2
3
let script = document.createElement('script');
script.src = '/xxx.js';
document.body.appendChild(script);

脚本在附加到文档后立即开始加载；默认情况下，动态脚本以 async=true 的方式表现。

  1. 关于 history.length

history.length 表示会话历史记录中的元素数量，即当前窗口访问过多少个不同的 URI。
history.go()、history.pushState()、history.replaceState() 操作都会使得 history.length + 1；
history.go(-1) 会返回到上一个页面，但是 history.length 不会减一。

Git 速记

2021-11-19
  • 添加/修改远程仓库地址
1
2
3
4
5
# 添加仓库地址
git remote add [shortname] [url]

# 修改仓库地址
git remote set-url [shortname] [url]
  • 修改最近一次 commit 的 message
1
git commit --amend
  • 修改最近一次 commit 的作者信息
1
git commit --amend --author "xxx <xxx@abc.com>"
  • 批量重置 commit author
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#!/bin/sh

git filter-branch --env-filter '

OLD_EMAIL="your-old-email@example.com"
CORRECT_NAME="Your Correct Name"
CORRECT_EMAIL="your-correct-email@example.com"

if [ "$GIT_COMMITTER_EMAIL" = "$OLD_EMAIL" ]
then
    export GIT_COMMITTER_NAME="$CORRECT_NAME"
    export GIT_COMMITTER_EMAIL="$CORRECT_EMAIL"
fi
if [ "$GIT_AUTHOR_EMAIL" = "$OLD_EMAIL" ]
then
    export GIT_AUTHOR_NAME="$CORRECT_NAME"
    export GIT_AUTHOR_EMAIL="$CORRECT_EMAIL"
fi
' --tag-name-filter cat -- --branches --tags
  • 创建一个全新的分支，没有历史记录
1
git checkout --orphan <branch>
  • 全局配置 GitHub token

GitHub 不再支持 “用户名 + 密码” 的登录方式，推荐使用 GitHub token 来进行鉴权；
给每个 clone 下来的项目单独配置 token 过于繁琐，可以使用以下方式全局配置 GitHub token。

方法一：

1
2
git config --global github.token <你的 GitHub token>
git config --global github.user <github上的用户名>

方法二：

1
git config --global url."https://<你的 GitHub token>@github.com".insteadOf "https://github.com"

ffmpeg 速记

2021-11-08

flv.js Demo

视频

  1. 将视频转为浏览器可以播放的 mp4 视频
1
ffmpeg -i input.MP4 -c:v libx264 -c:a aac -s:v 1280x720 -movflags faststart output.mp4
  • -c:v libx264 视频采用 h264 编码
  • -c:a aac 音频采用 aac(LC) 编码
  • -s:v 1280x720 视频分辨率调整为 1280x720（可选）
  1. 将 ts 文件合并为 mp4
1
ffmpeg -i index.m3u8 -c copy output.mp4
  1. 将 mp4 的 moov 前移
1
ffmpeg -i input.mp4 -c copy -movflags faststart output.mp4
  1. 以文件的形式保存 flv （直播）流
1
ffmpeg -i http://xxx.com/live.flv -c copy -f flv output.flv
  1. 将云端 hls 保存为 mp4
1
ffmpeg -protocol_whitelist "file,http,https,tcp,tls" -i "https://xxx.com/live.m3u8" -c copy output.mp4
  • -protocol_whitelist "file,http,https,tcp,tls" 默认情况下，ffmpeg 只允许使用一些常见的协议，通过该选项可以指定允许使用的协议白名单
  1. 以 CSV 格式输出视频流的帧信息
1
ffprobe -show_frames -select_streams v -of csv abc.flv > abc.csv 2>&1
  • -show_frames 查看每一帧信息
  • -select_streams 可以只查看音频（a）、视频（v）、字幕（s）的信息
  • -of 输出格式，包括 XML、INI、JSON、CSV、FLAT 等

frame 字段说明

属性说明值
media_type帧的类型（视频、音频、字幕等）video
stream_index帧所在的索引区域0
key_frame是否为关键帧1
pkt_ptsFrame 包的 pts0
pkt_pts_timeFrame 包的 pts 的时间显示0.080000
pkt_dtsFrame 包的 dts80
pkt_dts_timeFrame 包的 dts 的时间显示0.080000
pkt_durationFrame 包的时长N/A
pkt_duration_timeFrame 包的时长时间显示N/A
pkt_posFrame 包所在文件的偏移位置344
width帧显示的宽度1280
height帧显示的高度714
pix_fmt帧的图像色彩格式yuv420p
pict_type帧类型（如：I、P、B）I

IDR frame: pict_type=I 且 key_frame=1 时，表示这是 IDR frame.

音频

  1. 抽取音视频文件中的 AAC 音频流
1
ffmpeg -i input.mp4 -vn -acodec copy output.aac
  • -vn 忽略视频流
  • -an 忽略音频流
  1. 将 m4a 转为 mp3
1
ffmpeg -i abc.m4a -y -c:a libmp3lame -aq 0 abc.mp3

批量转换脚本：

1
2
3
4
5
#!/bin/bash

for i in *.m4a ; do
  ffmpeg -i "$i" -y -c:a libmp3lame -aq 0 "${i%.*}.mp3"
done
  1. 将 mp3 转为 ogg
1
ffmpeg -i abc.mp3 -y -c:a libvorbis abc.ogg

批量转换脚本：

1
2
3
4
5
#!/bin/bash

for i in *.mp3 ; do
  ffmpeg -i "$i" -y -c:a libvorbis "${i%.*}.ogg"
done
  1. 增大/减小 MP4 的音量

将 input.mp4 文件的音量调大 10dB，输出到 output.mp4 文件中。

1
ffmpeg -i input.mp4 -vcodec copy -af "volume=10dB" output.mp4

移动端问题汇总

2019-09-06

关于 <input />

1. reset input styles

1
2
3
4
.input-reset {
  -webkit-appearance: none;  // 去除系统默认的 input 样式
  outline: none;             // 去除 input 轮廓
}
Read more..
Powered by Hexo | Theme - Even ©2019 - 2024 FredTsang
\ No newline at end of file +FredTsang

Convert TSConfig paths to Webpack alias

2021-12-22

Inspired by marzelin/convert-tsconfig-paths-to-webpack-aliases.

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
const fs = require('fs');
const path = require('path');
const get = require('lodash/get');
const JSON5 = require('json5');

/**
 * convert tsconfig.json paths to webpack alias
 */
const convertTSConfigPaths2Aliases = () => {
  const tsConfigPath = path.resolve(process.cwd(), './tsconfig.json');

  try {
    if (fs.existsSync(tsConfigPath)) {
      // dealing with json file with comments, we use json5 to parse tsconfig.json instead of requiring directly
      const tsConfig = JSON5.parse(fs.readFileSync(tsConfigPath));
      let { baseUrl, paths } = get(tsConfig, 'compilerOptions', {});

      if (paths) {
        baseUrl = baseUrl ? path.resolve(process.cwd(), baseUrl) : process.cwd();

        const replaceGlobs = (path) => path.replace(/(\/\*\*)*\/\*$/, '');

        return Object.keys(paths).reduce((aliases, pathName) => {
          const alias = replaceGlobs(pathName);
          const aliasPath = replaceGlobs(paths[pathName][0]);
          aliases[alias] = path.resolve(baseUrl, aliasPath);
          return aliases;
        }, {});
      }
    }
  } catch (err) {
    console.error(err);
    return {};
  }

  return {};
};

Usage

1
2
3
4
5
6
7
8
9
// webpack.js

module.exports = {
  resolve: {
    alias: {
      ...convertTSConfigPaths2Aliases(),
    }
  }
};

使用 GitHub Actions 自动化构建/部署 GitHub Page

2021-11-24
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
# .github/workflows/deploy.yml
name: Deploy Blog
on:
  push:
    branches:
      - master # 当有 commit 被 push 到 master 分支时，执行下面的 jobs
jobs:
  deploy: # job name
    runs-on: macos-latest # jobs 运行在 macos 上
    steps:
      - name: Check out Git repository
        uses: actions/checkout@v2 # 拉取当前最新代码

      - name: Install Node.js, NPM and Yarn
        uses: actions/setup-node@v2 # 初始化 node 环境
        with:
          node-version: '12'

      - name: Cache NPM dependencies
        uses: actions/cache@v2 # 缓存 ~/.npm 内的 npm 包，以免每次执行 jobs 的时候都需要重新下载
        with:
          path: ~/.npm
          key: ${{ runner.os }}-npm-cache
          restore-keys: |
            ${{ runner.os }}-npm-cache

      - name: Build # 安装 npm 包 & 执行 hexo 的打包命令（不使用 hexo 的 deploy 命令，而是通过下一个 step 来部署）
        run: |
          npm install
          npm run build-only
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3 # hexo 构建后的文件在 public 目录下，将该目录下的文件推送到另一个仓库
        with:
          personal_token: ${{ secrets.ACCESS_TOKEN }} # 由于推送到另一个仓库需要权限，所以需要创建/配置一个 personal access token
          external_repository: FredZeng/FredZeng.github.io # 如果是推送到同一个仓库，就可以不用写这个
          publish_dir: ./public
          publish_branch: master

配置

  1. Creating a personal access token 创建自己的 access token，一般勾选上 repo 就可以了；请务必复制，保存好生成的 token。
  2. Encrypted secrets 将创建好的 token 添加到项目的 Actions secrets 中，这样你才能在 action 里面用到上述的 secrets.ACCESS_TOKEN。
  3. 🎉🎉🎉 你已经完成了所有前置步骤，可以享受自动化部署了

其他

其他方案可参考官方文档 将 Hexo 部署到 GitHub Pages 实现自动化部署。

使用 jsDelivr 来加速你的博客

2021-11-24

jsDelivr 为开源项目提供了免费的 CDN 服务，我们可以使用 jsDelivr 来给我们的 GitHub Page 静态资源提供 CDN 服务。

  • 用法：

针对 GitHub，jsdelivr 提供了以下方式来访问仓库内的文件：

1
2
3
4
5
6
7
8
9
10
// load any GitHub release, commit, or branch

// note: we recommend using npm for projects that support it

https://cdn.jsdelivr.net/gh/user/repo@version/file


// load jQuery v3.2.1

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js
  • 如何应用在 hexo 上？

给你的 图片、js、css 加上 https://cdn.jsdelivr.net/gh/user/repo@version/ 前缀。

  1. 给 markdown 图片加上前缀

如果你使用的是 hexo-renderer-marked@^4.1.0，你可以将下述代码片段复制到你的 scripts 目录下。
如果没有 scripts 目录，那么在你的 hexo 项目根目录下创建一个；hexo 会自动读取并加载 scripts 下的 js 文件。
下述的代码片段主要来自 hexo-renderer-marked#render.js，主要是覆写了它处理 markdown 中 image 的逻辑，以便给图片加上前缀。

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
// scripts/render.js

const { encodeURL, url_for } = require('hexo-util');

hexo.extend.filter.register('marked:renderer', function (renderer) {
    const { config } = this; // Skip this line if you don't need user config from _config.yml
    renderer.image = function (href, title, text) {
        const { hexo, options } = this;
        const { relative_link } = hexo.config;
        const { lazyload, prependRoot, postPath } = options;
        let { baseUrl = '' } = options;

        if (!/^(#|\/\/|http(s)?:)/.test(href) && !relative_link && prependRoot) {
            if (!href.startsWith('/') && !href.startsWith('\\') && postPath) {
                const PostAsset = hexo.model('PostAsset');
                // findById requires forward slash
                const asset = PostAsset.findById(join(postPath, href.replace(/\\/g, '/')));
                // asset.path is backward slash in Windows
                if (asset) href = asset.path.replace(/\\/g, '/');
            }
            href = url_for.call(hexo, href);
        }

        // 此处是修改的内容：支持配置 baseUrl
        if (!/^(#|\/\/|http(s)?:)/.test(href)) {
            baseUrl = baseUrl.replace(/\\/g, '/');
            if (baseUrl.endsWith('/')) {
                baseUrl = baseUrl.slice(0, baseUrl.length - 1);
            }
            if (!href.startsWith('/')) {
                href = '/' + href;
            }
            href = baseUrl + href;
        }

        let out = `<img src="${encodeURL(href)}"`;
        if (text) out += ` alt="${text}"`;
        if (title) out += ` title="${title}"`;
        if (lazyload) out += ' loading="lazy"';

        out += '>';
        return out;
    }
})

你的 markdown 已经支持给本地图片加上前缀的功能了，而后你需要在 _config.yml 中配置你的 baseUrl。

1
2
3
marked:
  baseUrl: https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master
  lazyload: true
  1. 给js和css加上前缀

很遗憾，这并没有什么通用的解决方法。因为，假如你使用了一个主题的话，那么js和css文件的使用是写死在主题中的，你需要自己定位并修改。

更多姿势

可以将仓库作为图床，而后通过 jsDelivr cdn 访问。

遇到的一些小问题

  • 如何手动刷新 jsdelivr cdn 缓存？

使用 purge.jsdelivr.net 替换 cdn.jsdelivr.net 来访问 cdn 地址，访问后即可刷新 cdn 资源。

1
https://purge.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/css/style.css?v=

Html 速记

2021-11-22
  1. <img loading="lazy"> 由浏览器实现图片懒加载

Can I Use lazy loading

  1. 动态添加 script 到页面
1
2
3
let script = document.createElement('script');
script.src = '/xxx.js';
document.body.appendChild(script);

脚本在附加到文档后立即开始加载；默认情况下，动态脚本以 async=true 的方式表现。

  1. 关于 history.length

history.length 表示会话历史记录中的元素数量，即当前窗口访问过多少个不同的 URI。
history.go()、history.pushState()、history.replaceState() 操作都会使得 history.length + 1；
history.go(-1) 会返回到上一个页面，但是 history.length 不会减一。

Git 速记

2021-11-19
  • 添加/修改远程仓库地址
1
2
3
4
5
# 添加仓库地址
git remote add [shortname] [url]

# 修改仓库地址
git remote set-url [shortname] [url]
  • 修改最近一次 commit 的 message
1
git commit --amend
  • 修改最近一次 commit 的作者信息
1
git commit --amend --author "xxx <xxx@abc.com>"
  • 批量重置 commit author
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#!/bin/sh

git filter-branch --env-filter '

OLD_EMAIL="your-old-email@example.com"
CORRECT_NAME="Your Correct Name"
CORRECT_EMAIL="your-correct-email@example.com"

if [ "$GIT_COMMITTER_EMAIL" = "$OLD_EMAIL" ]
then
    export GIT_COMMITTER_NAME="$CORRECT_NAME"
    export GIT_COMMITTER_EMAIL="$CORRECT_EMAIL"
fi
if [ "$GIT_AUTHOR_EMAIL" = "$OLD_EMAIL" ]
then
    export GIT_AUTHOR_NAME="$CORRECT_NAME"
    export GIT_AUTHOR_EMAIL="$CORRECT_EMAIL"
fi
' --tag-name-filter cat -- --branches --tags
  • 创建一个全新的分支，没有历史记录
1
git checkout --orphan <branch>
  • 加速 clone 项目
1
git clone --depth 1 <url>
  • 全局配置 GitHub token

GitHub 不再支持 “用户名 + 密码” 的登录方式，推荐使用 GitHub token 来进行鉴权；
给每个 clone 下来的项目单独配置 token 过于繁琐，可以使用以下方式全局配置 GitHub token。

方法一：

1
2
git config --global github.token <你的 GitHub token>
git config --global github.user <github上的用户名>

方法二：

1
git config --global url."https://<你的 GitHub token>@github.com".insteadOf "https://github.com"

ffmpeg 速记

2021-11-08

flv.js Demo

视频

  1. 将视频转为浏览器可以播放的 mp4 视频
1
ffmpeg -i input.MP4 -c:v libx264 -c:a aac -s:v 1280x720 -movflags faststart output.mp4
  • -c:v libx264 视频采用 h264 编码
  • -c:a aac 音频采用 aac(LC) 编码
  • -s:v 1280x720 视频分辨率调整为 1280x720（可选）
  1. 将 ts 文件合并为 mp4
1
ffmpeg -i index.m3u8 -c copy output.mp4
  1. 将 mp4 的 moov 前移
1
ffmpeg -i input.mp4 -c copy -movflags faststart output.mp4
  1. 以文件的形式保存 flv （直播）流
1
ffmpeg -i http://xxx.com/live.flv -c copy -f flv output.flv
  1. 将云端 hls 保存为 mp4
1
ffmpeg -protocol_whitelist "file,http,https,tcp,tls" -i "https://xxx.com/live.m3u8" -c copy output.mp4
  • -protocol_whitelist "file,http,https,tcp,tls" 默认情况下，ffmpeg 只允许使用一些常见的协议，通过该选项可以指定允许使用的协议白名单
  1. 以 CSV 格式输出视频流的帧信息
1
ffprobe -show_frames -select_streams v -of csv abc.flv > abc.csv 2>&1
  • -show_frames 查看每一帧信息
  • -select_streams 可以只查看音频（a）、视频（v）、字幕（s）的信息
  • -of 输出格式，包括 XML、INI、JSON、CSV、FLAT 等

frame 字段说明

属性说明值
media_type帧的类型（视频、音频、字幕等）video
stream_index帧所在的索引区域0
key_frame是否为关键帧1
pkt_ptsFrame 包的 pts0
pkt_pts_timeFrame 包的 pts 的时间显示0.080000
pkt_dtsFrame 包的 dts80
pkt_dts_timeFrame 包的 dts 的时间显示0.080000
pkt_durationFrame 包的时长N/A
pkt_duration_timeFrame 包的时长时间显示N/A
pkt_posFrame 包所在文件的偏移位置344
width帧显示的宽度1280
height帧显示的高度714
pix_fmt帧的图像色彩格式yuv420p
pict_type帧类型（如：I、P、B）I

IDR frame: pict_type=I 且 key_frame=1 时，表示这是 IDR frame.

音频

  1. 抽取音视频文件中的 AAC 音频流
1
ffmpeg -i input.mp4 -vn -acodec copy output.aac
  • -vn 忽略视频流
  • -an 忽略音频流
  1. 将 m4a 转为 mp3
1
ffmpeg -i abc.m4a -y -c:a libmp3lame -aq 0 abc.mp3

批量转换脚本：

1
2
3
4
5
#!/bin/bash

for i in *.m4a ; do
  ffmpeg -i "$i" -y -c:a libmp3lame -aq 0 "${i%.*}.mp3"
done
  1. 将 mp3 转为 ogg
1
ffmpeg -i abc.mp3 -y -c:a libvorbis abc.ogg

批量转换脚本：

1
2
3
4
5
#!/bin/bash

for i in *.mp3 ; do
  ffmpeg -i "$i" -y -c:a libvorbis "${i%.*}.ogg"
done
  1. 增大/减小 MP4 的音量

将 input.mp4 文件的音量调大 10dB，输出到 output.mp4 文件中。

1
ffmpeg -i input.mp4 -vcodec copy -af "volume=10dB" output.mp4

移动端问题汇总

2019-09-06

关于 <input />

1. reset input styles

1
2
3
4
.input-reset {
  -webkit-appearance: none;  // 去除系统默认的 input 样式
  outline: none;             // 去除 input 轮廓
}
Read more..
Powered by Hexo | Theme - Even ©2019 - 2024 FredTsang
\ No newline at end of file