{% if theme.baidu_site_verification %} {% endif %}

Hexo问题汇总(Hexo代码高亮显示)


前言

         Hexo是简洁高效的博客框架,用的是前端的技术,通过Markdown解析生成静态网页。我这个博客就是用的Hexo,部署在github上。相比于上个部署在云服务器的博客,整个博客轻量和很多。而且页面美观,功能齐全。当然在使用方面也碰到了各种问题,这篇文章就是做一个汇总,把我遇到最棘手的问题总结如下,大家做一个参考,如果你也碰到类似问题,参考我的文章解决了,那我这个博客就显得更有意义!

代码高亮显示

  这是没有高亮显示的效果,显示效果也太丑了。

原来的代码显示效果

于是网上找了很多帖子,我的解决方案是这样

1 先安装这样的插件

npm i -S hexo-prism-plugin

2 然后在项目的根目录_config.yml文件中修改syntax_highlighter,原来的值是highlighter.js

//_config.yml文件部分
syntax_highlighter: prism.min.js
highlight:
  enable: false
  line_number: false
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ''
prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: true    # default false
  custom_css:

3 在这个页面prismjs 下载页面下载自己定制的prism.css文件,粘贴到这个路径下:hexo\themes\hexo-theme-matery\source\libs\prism

以上操作后,会显示效果,担有个小问题,就是代码中会有@#123,@#125这样的的转义字符。

找到自己的项目名/node_modules\hexo-prism-plugin\src\index.js

把原来const map用以下覆盖就行

//hexo博客中有些代码的花括号被转义
const map = {
  ''': '\'',
  '&': '&',
  '>': '>',
  '&lt;': '<',
  '&quot;': '"',
  '&#123;': '{',
  '&#125;': '}'
};

以上方式用的是插件方式,还有一种方式是用hexo自带的代码显示方式。网上很多解决方案,但很容易搞混。所以这个问题我排查了很久。所以开始的时候你就要明确你使用的是那种方式,我用的这个是根据hexo的二次开发。所以可能与其人的有那么一点不一样,要不断调试。

远程推送出错

当时出这个问题的时候,快一个月时间没弄这个hexo博客,有一天想写点东西放上去,但远程推送出错了。问题的主要原因如下标识

ssh: connect to host github.com port 22: Connection timed out
fatal: Could not read from remote repository.

网上搜了解决方案:

1可能是网络的问题

2重新配置密钥

3尝试换端口

用3最后解决的问题。

git bash终端输入:ssh -T git@github.com

图二

如果出现上图显示的内容,那就是可能22端口出问题了,然后进入~/.ssh/目录下修改config文件,建议直接在终端中输入vim ~/.ssh/config,使用vim编辑器打开此文件,一般是为空,然后加上以下代码:

Host github.com
User git
Hostname ssh.github.com
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_rsa
Port 443

成功

图三

参考资料

以下是我在网上参考其它人的资料,觉得写的不错,分析一下。

安装插件

https://cloud.tencent.com/developer/article/1952241

部属在阿里云存储,提高访问速度(这个博客一样的框架)

https://blog.iaimi.cn/posts/54864.html

本博客框架的官方文档

https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md

美化很细节

https://blog.csdn.net/kuashijidexibao/article/details/112971657

小结

不同的技术适合不同的场景,适合的才是最好的。今后有关Hexo的问题都会汇总到这儿。

ps:2024.5.19.

最近由于发布的博客文章增多,点击第2页显示错误,报404,但是本地运行(hexo s)是显示正常。出现这种bug是很奇怪的,检查发现(hexo g)hexo/public,这是本地生成的文件。github与之相比少了一个page文件夹。而这个里面就是第2页的静态数据,所以由于github上没有这个,导致的不显示。

于是我考虑用git命令的方式更新github。

1在本地找到一个空文件夹

2文件夹打开Git Bash

3初始化git仓库

git init

4从git上拉取代码

//XXX是项目的地址,是SSH的
git pull XXX

5删除拉取的代码,但要保留.git的文件

git add .
git commit -m "Remove specific files or directories"
//XXX是项目的地址,是SSH的
git remote add origin XXX
//推送到远程
git push -u origin main

以上操作以后本以为问题解决,但发现还是没有page文件夹!

于是我就只能在github页面上操作,点击【Add file】->【Create new file】,在Name your file中填写【page】文件夹里面的目录和文件,文件夹和目录用”/“隔开。在编辑index.html文件,粘贴上hexo生成的数据,然后保存即可。这样的话就很麻烦了。但问题原因找到了,那就是git推送代码的时候,为什么【page】文件夹推不上去???


文章作者: 煜总
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 煜总 !
  目录