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

发表于 更新于 分类于 阅读次数：
| 置顶
本文字数： 1.8k 阅读时长 ≈ 3 分钟

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  # 启用高亮语法支持（==内容==）

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