如何用hexo新建文件并上传/如何用hexo插入图片（next主题）

发表于 更新于 分类于 阅读次数： 本文字数： 3.2k 阅读时长 ≈ 6 分钟

hexo（博主采用next主题）日常维护教程

修改scaffolds/post.md（默认标题文件）

注意修改时不要把中文加进去，在此只起到注释作用

1
2
3
4
5
title: {{ title }}
date: {{ date }}
tags:([1,2]设置同时属于不同类别可以这样)
categories:
top:(表示置顶情况，不置顶不填即可数字大小代表置顶顺序，数字越大排序越前)

新建md文件

1
hexo new/hexo n "文件名"

查看新建文件

进入目录是source/_posts

完善标题对应信息，填写md

也就是刚才上面那堆东西

在blog目录下（因人而异）打开git bash

输入

1
2
hexo clean
hexo g -d

即可上传

输入

1
hexo s

即可实时查看网页

插入图片操作（图片和md文件最好均为英文名）

下插件

见yiyungent/hexo-asset-img：🍰 Hexo 本地图片插件。|Hexo 本地图片插件：转换图片相对路径为asset_img

1
2
3
npm install hexo-asset-img --save
或者
npm install git://github.com/yiyungent/hexo-asset-img.git#main

修改host/_config.yml

permalink控制了永久域名的样式

1
2
1.post_asset_folder: true
2.permalink: :title/（我的自带了日期导致图片一直不行:year/:month/:date/:title/）

直接粘贴图片

1
![1](./hexo_maintanance/1.png)

上面是下面图片的路径。能看到下面的图片就能说明这个方法就是成功的。

1

实现侧边栏标题全展开

有些文件目录很长，不全展开不方便看。可以修改

blog\themes\next\source\css\_common\outline\sidebar\sidebar-toc.styl文件

查找修改.nav-child对应代码：

1
2
3
4
5
6
7
8
9
10
11
.nav {
  if (not hexo-config('toc.expand_all')) {
    .nav-child {
      --height: auto;          /* 取消高度限制 */
      height: auto;            /* 启用自动高度适应内容 */
      opacity: 1;              /* 取消透明度隐藏 */
      overflow: visible;       /* 允许内容溢出显示 */
      transition-property: opacity;  /* 仅保留透明度过渡 */
      visibility: visible;     /* 确保元素可见 */
      transition: $transition-ease;
    }

原配置为：

1
2
3
4
5
6
7
原配置--height: 0;
height: 0;
opacity: 0;
overflow: hidden;
transition-property: height, opacity, visibility;
transition: $transition-ease;
visibility: hidden;

实现文字高亮

网上帖子都是交怎么实现代码块高亮，但是迁移到网页之后typora本来能实现的文字高亮效果就无了。修改方法如下：

先换个markdown编译器

1
2
npm uninstall hexo-renderer-marked --save  # 卸载默认解析器
npm install hexo-renderer-markdown-it --save

然后在根目录下source/_data/__styles.styl中添加如下内容

（我的颜色和typora已经保持一致，用的是simplehappy主题）

1
2
3
4
5
6
7
// ==高亮内容样式==
mark {
  background-color: #FBE598;  // 黄色背景
  color: inherit;             // 文字颜色继承
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

最后在根目录下的_config.yml中添加如下内容：

1
2
3
4
markdown:
  preset: "commonmark"
  plugins:
    - markdown-it-mark  # 启用高亮语法支持（==内容==）

成功之后就应该能看到上述步骤一样的高亮了~

备份、README与一键发布（自动化）

随着博客内容的增加，源码的备份和环境的快速重配变得尤为重要。现在采用了以下方案：

双分支管理

  • source 分支: 存放所有源码、配置和 Markdown 文件。
  • master 分支: 存放生成的静态网页（hexo d 推送的内容）。

项目说明文档 (README)

为了防止遗忘如何配置环境，我在项目根目录下新建了一个 README.md。
它详细记录了：

  • 环境安装（Node.js, Git）
  • 如何拉取 source 分支代码
  • 日常维护命令

一键自动化脚本 (release.ps1)

为了解决"既要备份源码又要发布网站"的繁琐，编写了 release.ps1 脚本。
此脚本位于项目根目录，功能包括：

  1. 自动 add & commit: 将当前所有源码变更提交。
  2. 推送到 source 分支: 确保源码安全备份。
  3. 清理 & 生成 & 部署: 执行 hexo clean && hexo g && hexo d 发布网站。

使用方式:
直接在 PowerShell 中运行 ./release.ps1 即可。以后发布只需这一条命令，再也不用担心忘记备份源码了！

附录：示例文件 (Reference)

1. README.md 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 个人博客项目说明文档 (README)

## 1. 项目结构说明
本项目采用 Hexo + Next 主题构建。
- source 分支: 存放源码。
- master 分支: 存放静态网页。

## 2. 初始环境配置
1. 安装 Node.js 和 Git。
2. 配置 SSH Key。

## 3. 下载源代码
```bash
git clone -b source [email protected]:xxx
cd blog
npm install

4. 日常维护

  • 新建文章: hexo new "Title"
  • 本地预览: hexo s
  • 一键发布: ./release.ps1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

### 2. release.ps1 脚本示例
```powershell
$ErrorActionPreference = "Stop"

Write-Host "=== Starting Blog Backup & Deployment ===" -ForegroundColor Cyan

# 1. Source Backup
Write-Host "[1/2] Backing up Source Code..."
git add .
$time = Get-Date -Format "yyyy-MM-dd HH:mm:ss"
try { git commit -m "Backup: $time" } catch { Write-Host "Nothing to commit." }
git push -u origin source

# 2. Site Deployment
Write-Host "[2/2] Deploying Website..."
cmd /c hexo clean
cmd /c hexo g
cmd /c hexo d

Write-Host "=== All Done! ===" -ForegroundColor Cyan
Start-Sleep -Seconds 5