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

hexo(博主采用next主题)日常维护教程

修改scaffolds/post.md(默认标题文件)

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

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

新建md文件

hexo new/hexo n "文件名"

查看新建文件

进入目录是source/_posts

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

也就是刚才上面那堆东西

在blog目录下(因人而异)打开git bash

输入

hexo clean
hexo g -d

即可上传

输入

hexo s

即可实时查看网页

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

下插件

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

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

修改host/_config.yml

permalink控制了永久域名的样式

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

直接粘贴图片

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

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

1

实现侧边栏标题全展开

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

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

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

.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;
    }

原配置为:

原配置--height: 0;
height: 0;
opacity: 0;
overflow: hidden;
transition-property: height, opacity, visibility;
transition: $transition-ease;
visibility: hidden;

实现文字高亮

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

先换个markdown编译器

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

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

(我的颜色和typora已经保持一致,用的是simplehappy主题)

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

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

markdown:
  preset: "commonmark"
  plugins:
    - markdown-it-mark  # 启用高亮语法支持(==内容==

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