DDqiuqiu
0%

Blog多平台同步

Posted on Edited on In ,

本文主要记录了博客搭建的过程以及如何利用git实现多平台博客同步

当前配置

原理及操作详解： 先看这个和视频，整懂原理

博客搭建推荐视频：手把手教你搭建属于自己的hexo+github博客

图床推荐使用Onedrive : 图床折腾之旅

博客迁移原理视频：备份和迁移hexo博客

Windows:hexo部署平台所在地，已生成一定量的博客托管在Github上

Arch:新系统,已有nodejs环境。

Github：博客托管平台，main为主分支，计划以master分支作为部署文件。

添加标签页和分类页

参考文档：

NexT使用官方文档

NexT标签分类页使用官方文档

在next主题的_config.yml配置文件中即可修改

menu部分把tags和categories的注释取消掉

1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

在hexo-site页面新建tag页面和categories页面

1
hexo new page tags
1
hexo new page categories
1
cd your-hexo-site
1
cd source/tags
1
vim index.md
1
2
3
4
5
---
title: tags
date: 2023-11-24 16:50:27
type: "tags"
---
1
cd ../
1
cd categories
1
vim index.md
1
2
3
4
5
---
title: categories
date: 2023-11-24 16:52:48
type: "categories"
---

更改新建文章模板

1
cd your-hexo-site
1
cd scaffolds   
1
vim post.md
1
2
3
4
5
6
7
8
9
10
---
title: {{ title }}
date: {{ date }}
mathjax: true
tags:
categories:
---


<!--more-->

同步原理

更改master分支为默认分支（方便Arch通过git clone获得部署文件)

选择后点Update即可，最后结果是

把该分支克隆到本地，进入dingdingqiuqiu.github.io文件夹，可以看到分支为master

删除原分支除.git外的所有文件（这里误删了.git，后面将其恢复了），并将原dingdingqiuqiu文件里除.deploy_git外所有文件移动到dingdingqiuqiu.github.io

安装一些必要插件（可能不是很必要，装上也没啥影响）

1
npm install -g cnpm -registry=https://registry.npm.taobao.org
1
cnpm install hexo-deployer-git --save

别随便装插件，容易产生依赖问题，报错看着很难受

用gitbash中的cnpm安装，用npm安装也会报错

然而用cnpm安装以后迁移hexo检测不到安装的模块

最后还是删除此模块后又用npm安装解决的问题。

最后剩下的文件结构

注意到这里存在.gitignore文件，如果不存在，创建并写入

1
2
3
4
5
6
7
8
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
_multiconfig.yml

注意，如果之前克隆过theme里的主题文件，应该把主题文件中的.git删除，因为git无法嵌套上传（我这里看了下，仅有.github，无.git，因此不必删除.git）

最后将所有更改提交即可

1
git add .
1
git commit -m "new hexo file"
1
git push

提交后看下两个分支，main为静态HTML,master为博客部署文件，符合预期。

Linux下

1
git clone git@github.com:dingdingqiuqiu/dingdingqiuqiu.github.io.git
1
2
#赋予文件夹被修改的权限，不然无法编辑
chmod -R 777 dingdingqiuqiu.github.io.git
1
cd dingdingqiuqiu.github.io
1
pacman -S npm

第一次配置时出了点问题，下面是第二次写的，首先，目录结构应该是这样的：

1
2
# ls                    
_config.landscape.yml  _config.yml  package.json  package-lock.json  scaffolds  source  themes
1
pacman -S npm
1
npm install hexo  
1
npm install      
1
npm install hexo-deployer-git 
1
cnpm install -g hexo-cli

-g表示全局用户，这里其实应该用npm的，当时晚高峰，梯子效果不够好，就用了cnpm。

开梯子对安装似乎有效果，三次安装只有梯子延迟低的时候装上了

1
2
##对post文件进行修改
........
1
git add .
1
git commit -m "Arch's commit"
1
git push

最后，两个平台在写博客之前先同步一下

1
git pull

参考文档：

Hexo博客多台电脑设备同步管理

Hexo多台电脑同步

后续添加的配置

数学公式渲染

第零步：探索

参考github-hexo渲染数学公式，第0步的内容是根据别的博客进行的尝试，但这个引擎并没有生效，仅做记录用，从第一步往后的步骤有效。

以下命令执行均需在dingdingqiuqiu.github.io\下，因为npm需要安装包到dingdingqiuqiu.github.io\node_modules下

npm设置代理下载(7890是clash的代理端口,走clash代理)

1
npm config set proxy=http://127.0.0.1:7890

卸载原有渲染引擎：

1
npm uninstall hexo-renderer-marked

下载新的渲染引擎

1
npm install hexo-renderer-pandoc

然后在 dingdingqiuqiu.github.io/themes/hexo-theme-next-7.8.0/_config.yml 中将 mathjax 的 enable 打开。

1
2
3
4
math:
  ...
  mathjax:
    enable: true
第一步：安装MathJax

MathJax就是我们用来渲染数学公式的js引擎。

不过在这之前，我们还需要卸载自带的hexo-math以避免冲突。

1
npm uninstall hexo-math --save
1
npm install hexo-renderer-mathjax --save
第二步：更新MathJax的CDN链接

由于MathJax官方cdn已停止维护，其他cdn也有如不稳定，必须翻墙等问题，我找到了一个可以使用的cdn地址。

以下命令显示版本：

1
2
npm show mathjax version
# 3.2.2

打开dingdingqiuqiu.github.io/node_modules/hexo-renderer-mathjax/mathjax.html

将最后一行cdn地址改为（版本可以根据实际情况修改，我根据上述命令得到版本是3.2.2）

1
<script src="//cdn.bootcss.com/mathjax/3.2.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>
第三步：更换默认渲染引擎

Hexo默认的渲染引擎hexo-renderer-marked对MathJax的支持很不好，我们修改为kramed引擎

1
npm uninstall hexo-renderer-marked --save
1
npm install hexo-renderer-kramed --save
第四步：更改转义规则

转义规则原博客作者是错的，这里给出正确的。

因为 hexo 默认的转义规则会将一些字符进行转义，比如 _ 转为 <em> ，所以我们需要对默认的规则进行修改。
首先， 打开dingdingqiuqiu.github.io/node_modules/kramed/lib/rules/inline.js

把：

1
escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,

更改为：

1
escape: /^\\([`*\[\]()#$+\-.!_>])/,

把：

1
em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

更改为：

1
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
第五步：使用hexo-filter-mathjax

对部分支持MathJax的主题来说，只需在主题配置文件将相关配置项开启即可使用MathJax。但对很多主题，如我使用的CleanBlog主题来说，没有这样的功能。有一个工具可以帮助我们：hexo-filter-mathjax。

安装：

1
npm install hexo-filter-mathjax --save

对需要开启的博文，在其Front-Matter处增加mathjax: true这一行即可，如：

1
2
3
4
5
6
---
title: On the Electrodynamics of Moving Bodies
categories: Physics
date: 1905-06-30 12:00:00
mathjax: true
---

如果你还想配一些个性化需求，可以在hexo-filter-mathjax的教程中查看。

这样就大功告成了，写MarkDown的时候正常写数学公式，就可以在生成的博客中展示。

第六步：修复无法渲染块级公式的BUG

当前配置渲染行内公式有效，对于块级公式，仍无法渲染，更换hexo-renderer-marked版本即可。

参考：hexo latex 换行 多行公式 终极解决方案

更换版本：

1
cd blog
1
npm uninstall hexo-renderer-marked --save
1
npm install hexo-renderer-marked@1.0.0 --save

编辑dingdingqiuqiu.github.io\node_modules\marked\lib\marked.js

539行

1
2
3
escape: /^\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/,
改成
escape: /^\\([!"#$&'()*+,\-./:;<=>?@\[\]^_`|~])/,

564行

1
2
3
inline._escapes = /\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/g;
改成
inline._escapes = /\\([!"#$&'()*+,\-./:;<=>?@\[\]^_`|~])/g;

中文目录跳转

  • 在next github 上已经提出了该问题并给出了解决方案
  • 修改dingdingqiuqiu.github.io\themes\hexo-theme-next-7.8.0\source\js\utils.js中的以下函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
registerSidebarTOC: function() {
  const navItems = document.querySelectorAll('.post-toc li');
  const sections = [...navItems].map(element => {
    var link = element.querySelector('a.nav-link');
 var target = document.getElementById(decodeURI(link.getAttribute('href')).replace('#', ''));
    // TOC item animation navigate.
    link.addEventListener('click', event => {
      event.preventDefault();
      //var target = document.getElementById(event.currentTarget.getAttribute('href').replace('#', ''));
      var offset = target.getBoundingClientRect().top + window.scrollY;
      window.anime({
        targets  : document.scrollingElement,
        duration : 500,
        easing   : 'linear',
        scrollTop: offset + 10
      });
    });
    //return document.getElementById(link.getAttribute('href').replace('#', ''));
 return target;
  });

站内搜索

参考这篇:hexoNext主题添加站内搜索

插件安装

博客根目录下执行以下代码安装插件

1
npm install hexo-generator-searchdb --save
配置博客

安装完成，编辑博客配置文件：_config.yml

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
配置主题

Next 主题自带搜索设置，编辑主题配置文件：_config.yml

找到文件中 Local search 的相关配置，设为 true

1
2
3
# Local search
local_search:
  enable: true

hexo 重新部署

BUG:hexo d失败

梯子换成TUN模式重新尝试即可。