CYQ’s BLOG
0%

Problems & Solutions & Experiences

Posted on Edited on In

【字字血泪】
本文可能是用来记录搭建博客中遇到的问题/踩到的坑，记录解决方法和今后的注意事项。

为博客添加背景

前情提要

网上的教程很多，然而各个教程的详略程度有差别，加上博客文件夹中许多重名的文件，导致个人当时配置背景尝试很久没有成功。

操作步骤

  1. 添加背景图片文件
    在next主题文件夹中（/themes/next）的source文件夹中，找到images目录并添加背景图片文件background.jpg
    （即地址为/themes/next/source/images/background.jpg）
  2. 修改配置
    打开next主题配置的_config.yml文件，定位到如下片段
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Define custom file paths.
    # Create your custom files in site directory `source/_data` and uncomment needed files below.
    custom_file_path:
    #head: source/_data/head.swig
    #header: source/_data/header.swig
    #sidebar: source/_data/sidebar.swig
    #postMeta: source/_data/post-meta.swig
    #postBodyEnd: source/_data/post-body-end.swig
    #footer: source/_data/footer.swig
    #bodyEnd: source/_data/body-end.swig
    #variable: source/_data/variables.styl
    #mixin: source/_data/mixins.styl
    #style: source/_data/styles.styl
    将最下面的style取消注释
    1
    style: source/_data/styles.styl
  3. 创建背景配置文件
    在博客根目录的source文件夹下新建_data文件夹与styles.styl文件，添加代码
    1
    2
    3
    4
    5
    6
    7
    8
    // 添加背景图片
    body {
     background: url(/images/background.jpg);//第一步的图片地址
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: 50% 50%;
    }
  4. 高级修改：背景透明度调整
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    .content-wrap {
      opacity: 0.8;
    }
    .main-inner { 
      // margin-top: 60px;
      // padding: 60px 60px 60px 60px;
       .post-block {
         background: rgba(255,255,255,0.8) none repeat scroll !important;
       }
    }
    //侧边框的透明度设置
    .sidebar {
      opacity: 0.8;
    }
    //菜单栏的透明度设置
    .header-inner {
      background: rgba(255,255,255,0.8);
    }
    //搜索框（local-search）的透明度设置
    .popup {
      opacity: 0.7;
    }
  5. 重要的一步
    在/themes/next/source/css/main.styl文件的末尾添加如下代码
    1
    2
    3
    4
    // Custom Layer
    // --------------------------------------------------
    for $inject_style in hexo-config('injects.style')
      @import '/Users/chenyuqing/blog/source/_data/styles.styl';
    用于导入至配置文件
  6. hexo clean && hexo g -d生成并部署即可

Tips

  • 每一步的目标文件夹
  • 最后一步的导入代码

数学公式 Mathjax

前情提要

写大雾实验不确定度分析教程这篇博客的时候用到了数学公式
而next自带的渲染器不支持latex语法
尽管vscode书写时可以预览，但是网页上不能显示出来

解决过程

  1. 上网搜索，最终选择了pandoc作为数学公式的渲染器
  2. 首先安装pandoc 
    1
    brew install pandoc
  3. 更换渲染器 
    1
    2
    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-pandoc --save
  4. 修改配置 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
     # Math Formulas Render Support
    math:
      # Default (true) will load mathjax / katex script on demand.
      # That is it only render those page which has `mathjax: true` in Front-matter.
      # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
      per_page: true

     # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
      mathjax:
        enable: true
        # See: https://mhchem.github.io/MathJax-mhchem/
        mhchem: false
        cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML

      # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
      katex:
        enable: false
        # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
        copy_tex: false
    如果将per_page设置为true，需要在每一篇需要渲染数学公式的博客最前面添加一行
    1
    mathjax: true
    使公式能够渲染
    而设为false，则自动渲染每一篇博客，不需要再前面添加
    个人想保证整体的加载速度就选择了per_page: true
  5. hexo clean && hexo g -d生成并部署即可

Tips

  • 如果在渲染的时候出现报错
    1
    [ERROR][hexo-renderer-pandoc] pandoc exited with code null.
    说明没有安装/没有合适版本的pandoc，推荐用homebrew下载
  • pandoc渲染基本完全支持latex语法，但在书写的时候存在一些需要注意的细节，比如标题换行后得到正文，需要在标题行最后打两个空格

Large files

前情提要

我怎么就不小心hexo g -d了超过100m的大文件
部署了很久，然而显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
枚举对象中: 67, 完成.
对象计数中: 100% (67/67), 完成.
使用 8 个线程进行压缩
Connection to github.com closed by remote host.
send-pack: unexpected disconnect while reading sideband packet
压缩对象中: 100% (52/52), 完成.
fatal: 远端意外挂断了57)
FATAL {
  err: Error: Spawn failed
      at ChildProcess.<anonymous> (/Users/chenyuqing/blog/node_modules/hexo-util/lib/spawn.js:51:21)
      at ChildProcess.emit (node:events:537:28)
      at ChildProcess._handle.onexit (node:internal/child_process:291:12) {
    code: 128
  }
} Something's wrong. Maybe you can find the solution here: %s https://hexo.io/docs/troubleshooting.html
就算真的部署完毕了也不能成功，显示
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
remote: warning: File files/MathematicalAnalysis/Notebook/Ch8_AnalyticGeometry.one is 74.82 MB; this is larger than GitHub's recommended maximum file size of 50.00 MB
remote: warning: File files/MathematicalAnalysis/Notebook/Test_b1.one is 52.46 MB; this is larger than GitHub's recommended maximum file size of 50.00 MB
remote: warning: File files/MathematicalAnalysis/Notebook/Test_b2.one is 82.30 MB; this is larger than GitHub's recommended maximum file size of 50.00 MB
remote: warning: File files/MathematicalAnalysis/Notebook/Ch6_DifferentialEquations.one is 86.36 MB; this is larger than GitHub's recommended maximum file size of 50.00 MB
remote: error: Trace: 589652ae3f02e38266f560fb2a49243b2f2710fe06a49f20fab4842dcad4d899
remote: error: See http://git.io/iEPt8g for more information.
remote: error: File files/MathematicalAnalysis/Notebook/Ch13_ImproperIntegral.one is 200.91 MB; this exceeds GitHub's file size limit of 100.00 MB
remote: error: File files/MathematicalAnalysis/Notebook/Ch3_Differential.one is 358.02 MB; this exceeds GitHub's file size limit of 100.00 MB
remote: error: File files/MathematicalAnalysis/Notebook/Ch11_LineIntegralsAndSurfaceIntegrals.one is 275.85 MB; this exceeds GitHub's file size limit of 100.00 MB
remote: error: File files/MathematicalAnalysis/Notebook/Ch12_FourierAnalysis.one is 113.83 MB; this exceeds GitHub's file size limit of 100.00 MB
remote: error: File files/MathematicalAnalysis/Notebook/Ch4_IndefiniteIntegral.one is 109.76 MB; this exceeds GitHub's file size limit of 100.00 MB
remote: error: File files/MathematicalAnalysis/Notebook/Ch9_DifferentiationOfFunctionsOfSeveralVariables.one is 175.32 MB; this exceeds GitHub's file size limit of 100.00 MB
remote: error: File files/MathematicalAnalysis/Notebook/Ch10_MultipleIntegrals.one is 189.91 MB; this exceeds GitHub's file size limit of 100.00 MB
remote: error: File files/MathematicalAnalysis/Notebook/Ch2_Functions.one is 218.66 MB; this exceeds GitHub's file size limit of 100.00 MB
remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com.
To github.com:Mint-CYQ/mint-cyq.github.io.git
 ! [remote rejected] HEAD -> master (pre-receive hook declined)
error: 无法推送一些引用到 'github.com:Mint-CYQ/mint-cyq.github.io.git'
FATAL {
  err: Error: Spawn failed
      at ChildProcess.<anonymous> (/Users/chenyuqing/blog/node_modules/hexo-util/lib/spawn.js:51:21)
      at ChildProcess.emit (node:events:537:28)
      at ChildProcess._handle.onexit (node:internal/child_process:291:12) {
    code: 1
  }
} Something's wrong. Maybe you can find the solution here: %s https://hexo.io/docs/troubleshooting.html

解决过程

  1. 首先当然是把本地文件夹中的大文件删了。但是没有用，还是会进行部署
    于是复制了报错信息，上网寻找教程，使用
    1
    git filter-branch --index-filter 'git rm --cached --ignore-unmatch  目标文件路径' -- --all
    命令，发现输出
    1
    WARNING: Ref 'refs/heads/master' is unchanged
    说明提交的目标分支内文件没有变
    于是使用git log命令查看提交内容，发现没有输出
    很头秃。这表示我并没有提交任何东西到github上
  2. 继续上网找教程，发现都是git commit相关，并没有提及hexo d的背景
    修改关键词之后查找，找到一两篇hexo提交大文件的相关内容，其中提到了用于部署的.deploy_git文件夹
    而我在我的博客根目录下没有找到该目录
    又卡了一下。但是在终端键入cd .deploy_git命令，发现是可以进去的 然后使用git log，跳出多次提交记录，按q退出 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    commit 485d8b27a090e13062482a9157c4bd771c608b73 (HEAD -> master)
    Author: 陈煜晴 <chenyuqing@chenyuqingdeMacBook-Pro.local>
    Date:   Wed Aug 17 09:52:15 2022 +0800

        Site updated: 2022-08-17 09:51:56

    commit 2afc20dc630ea4a1d223ad6e03cbb712bb7f0c06
    Author: 陈煜晴 <chenyuqing@chenyuqingdeMacBook-Pro.local>
    Date:   Mon Aug 15 16:22:28 2022 +0800

        Site updated: 2022-08-15 16:21:16

    commit e0dd530e8fd0aeb745f4179364034a52db455be8
    Author: 陈煜晴 <chenyuqing@chenyuqingdeMacBook-Pro.local>
    Date:   Sun Aug 14 14:50:57 2022 +0800

        Site updated: 2022-08-14 14:50:39
    好…明白了，意思是这个目录才是真正提交到github中的
    于是找到大文件对应的提交记录，执行重置命令 
    1
    git reset 2afc20dc630ea4a1d223ad6e03cbb712bb7f0c06
    跳出信息 
    1
    2
    3
    4
    5
    6
    7
    8
    重置后取消暂存的变更：
    M    2022/08/13/MathematicalAnalysis/index.html
    M    css/main.css
    D    files/MathematicalAnalysis/Notebook/Ch10_MultipleIntegrals.one
    D    files/MathematicalAnalysis/Notebook/Ch11_LineIntegralsAndSurfaceIntegrals.one
    D    files/MathematicalAnalysis/Notebook/Ch12_FourierAnalysis.one
    (还有很多)
    M    index.html
    应该找对路了
    然后进行hexo clean && hexo g -d
    还是不行？？报和之前一样的错误
  3. 最后直接把.deploy_git文件夹一整个删除
    cd blog进入博客根目录，执行hexo clean && hexo g -d
    等了很久…因为是重建整个部署页面
    最终居然成功了
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    枚举对象中: 278, 完成.
    对象计数中: 100% (278/278), 完成.
    使用 8 个线程进行压缩
    压缩对象中: 100% (257/257), 完成.
    写入对象中: 100% (278/278), 1.93 GiB | 1.54 MiB/s, 完成.
    总共 278（差异 20），复用 0（差异 0），包复用 0
    remote: Resolving deltas: 100% (20/20), done.
    remote: warning: See http://git.io/iEPt8g for more information.
    remote: warning: File files/MathematicalAnalysis/Ch9_DifferentiationOfFunctionsOfSeveralVariables/Exercises_Textbook.pdf is 51.75 MB; this is larger than GitHub's recommended maximum file size of 50.00 MB
    remote: warning: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com.
    To github.com:Mint-CYQ/mint-cyq.github.io.git
     + e0dd530...990248c HEAD -> master (forced update)
    分支 'master' 设置为跟踪 'git@github.com:Mint-CYQ/mint-cyq.github.io.git/master'。
    INFO  Deploy done: git
    然后结束

教训

别给我传大文件。