0%

博客报错的一些问题

Hexo d部署报错之spawn failed的解决方案

这是我遇到的并且解决掉的问题有遇到一样的可以参考下

关于Hexo部署的时候报错导致无法推送到github估计是很多小伙伴第一次接触Hexo框架编写博客的常见问题, 下面介绍两种解决方案.

解决方案(一)

  1. 在博客文件夹(通常是\blog)中删除时 .deploy_git 文件
  2. 命令行(terminal)[不推荐使用cmd, 使用 git bash 等] 中输入 git config --global core.autocrlf false把git加入系统环境变量
  3. 重新执行hexo c hexo g hexo d

上Google百度一查大部分都是这种方法, xdm可以自己试试看万一成了呢. 但我下面推荐另一种可能的解决方案

解决方案(二)

  1. 首先用文本编辑器(我使用的是Notepad++)打开博客文件夹(通常是\blog)中的 _config.yml 配置文件

  2. 修改配置文件中的repo

    1
    2
    3
    4
    5
    6
    7
    8
    # Deployment
    ## Docs: https://hexo.io/docs/one-command-deployment
    deploy:
    type: git
    repo: https://github.com/YourName/YourName.github.io.git(不要使用这个)
    git@github.com:YourName/YourName.github.io.git(用这个)
    branch: master
    1234567
  3. 重新执行hexo c hexo g hexo d

这样就大功告成啦, 很简单吧, 继续写你的博客吧!

参考

https://blog.zhheo.com/p/128998ac.html

https://blog.csdn.net/njc_sec/article/details/89021083

Hexo 添加背景图片并自适应

  1. 在站点配置文件夹source/images/放入你的背景图片
  2. 然后修改主题文件夹themes/source/css/_custom/custom.styl
    PS: 这个文件是存放用户自定义css样式的
    custom.styl开头加入如下的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body {
background:url(/images/background.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;

/*这是设置底部文字, 看个人需要修改*/
#footer > div > div {
color:#eee;
}
}

hexo博客如何插入图片

1
title: hexo博客如何插入图片

Hexo是一个静态的博客网站生成器,生成一个博客只需要分分钟的时间就能搞定。

Hexo的博文是支持Markdown格式的,发表一篇文章只需要简简单单的几个命令。

hexo new '文章'就会生成一个名为’文章’的md文件。

在图中位置添加描述,分类以及标签,有利于搜索分类。

如何向hexo博客中插入图片

众所周知,在md文件中插入图片的语法为![]()

其中方括号是图片描述,圆括号是图片路径。

一般来说有三种图片路径,分别是相对路径,绝对路径和网络路径

所谓的网络路径就是直接引用网上的图片,直接复制图片地址,放在圆括号中就完事了。

这种方式十分的方便,但是也存在一定的问题:

  • 图片失效导致无法加载;
  • 打开网页后要再请求加载图片;
  • 原网站限制,如微信公众号的图片会变得不可见等。

这种方式算是有利有弊。

绝对路径是图片在计算机中的绝对位置,相对路径是相对于当前文件的路径。

由于我们的博客是要部署在网站上,部署后会生成新的文件目录,所以我们选择使用相对路径的方式。

在hexo中使用文章资源文件夹需要在config.yaml文件中更改一下配置:

1
post_asset_folder: true

当该配置被应用后,使用hexo new命令创建新文章时,会生成相同名字的文件夹,也就是文章资源文件夹。

由于项目会生成新的文件目录,同时会解析Markdown中的图片路径,会导致一个问题。
如在一个文件目录下,博客名为1.md,相应的存在一个1文件夹存放图片image.jpg
在Typora编辑器中,普通的md文件使用![](1/image.jpg)能在编辑器中正常显示图片。
在hexo中,按理说应该是使用![](image.jpg),但网页中却无法正常显示。
此时应该使用这样的方式来引入图片:

虽然可以正常引用图片了,但是这种引用图片的方式只有一句话能形容,wtf。

图片插件

插件hexo-renderer-marked解决了这个问题。可以只用npm install hexo-renderer-marked命令直接安装,之后在config.yaml中更改配置如下:

1
2
3
4
post_asset_folder: true
marked:
prependRoot: true
postAsset: true

之后就可以在使用![](image.jpg)的方式愉快的插入图片了。

我们做了这么多都是为了方便,那么为什么不再方便一点呢。

hexo与Typora的完美结合

上述是从文章资源文件夹中引用图片,前提是先将图片放入到文章资源文件夹,如果图片数量众多的话,一张一张的放很影响效率。但是不用怕,我们有很方便的解决方法。

Typora是我非常喜欢的Markdown文本编辑器,在之前的文章中也介绍过一点。

Typora对于插入图片的支持做得非常好,在文件->偏好设置或者直接<C-,>进入设置。

新版本可能为

使用该配置后,可以直接复制网页中的图片地址,粘贴到Typora中后,会直接复制该图片到文章资源文件夹,同时自动更改路径。

如复制网络路径的图片https://...../image.jpg粘贴到Typora中叫文章名的文章后,图片会自动变为![](文章名/image.jpg)

但我们知道部署后,文件路径是不同的,所以当我们插入完所有的图片后,我们还需要删除每个图片路径中的文件名/。不慌,也很简单。

在Typora编辑器中,使用<C-f>快捷键,将所有的文章名/替换为空即可删除。

img

然后再将博客上传,图片就会随着文章一起打包。在网页中就可以看到正常显示的图片,大功告成。

————-本地预览不显示图片的问题—————-

在typora的设置中选择图片工具,为文章设置一个图片根目录。设置方式如下,之后选中存放图片的目录即可,根据不同版本的typora该设置项可以能在不能的位置。

格式 -> 图片工具 -> 设置图片根目录

————再更————

为了方便,可以在scaffolds -> post中添加如下设置。

1
typora-root-url: {{ title }}

这样每次执行hexo new命令新建文章的时候,会在Front Matter中自动添加该配置,如下:

1
typora-root-url: hexo图片显示问题

至此,在本地和服务器的图片都能正常预览。

Markdown 编辑器 Typora 永久激活

Typora 介绍:

1
复制代码一款 Markdown 编辑器和阅读器,之前是免费的, 现在收费了,看网上有些是使用dll替换破解的,这里记录一下修改代码破解的方式。

教程

1.官网下载安装

1
2
arduino
复制代码https://www.typoraio.cn/

2.不运行软件的情况下,进入安装目录打开 LicenseIndex.180dd4c7.5c394f9a.chunk.js 文件

1
2
arduino
复制代码安装盘符(默认C盘):\Typora\resources\page-dist\static\js\LicenseIndex.180dd4c7.5c394f9a.chunk.js

3.搜索关键代码e.hasActivated=”true”

1
2
1.将搜索到的位置的【e.hasActivated="true"==】 后面添加 【"true",】
2.即:e.hasActivated="true"=="true",

4.保存后运行软件

缺点:

每次打开都会弹出激活并且底栏会显示未激活

Hexo文章中图片点击实现全屏查看

这种方法使用了图片浏览放大功能fancybox插件

切换到lib目录

1
cd next/source/lib

下载插件

1
git clone https://github.com/theme-next/theme-next-fancybox3 fancybox

img

更改主题配置文件

更改next/_config.yml文件

1
fancybox: true

一定要注意fancybox是否开对

image-20230923080102625

测试效果

部署hexo s之后点击图片,如图:

img

编辑于2023/09/23

Welcome to my other publishing channels