凌晨 2020-11-30 16:13:18

框架使用简要说明

前言

使用此框架书写文档时,推荐大家使用markdown进行,有利于保持较高的一致性,可阅读性,提高阅读效率

同时makrdown语法也十分的简单

教程地址: https://www.runoob.com/markdown/md-tutorial.html

推荐的markdown编辑软件:typora(点击访问官网) ,当然现在大部分编辑器例如VSCode都是支持打开编辑markdown文件的也支持实时预览。

安装

  1. 下载仓库

  2. 全局安装hexo npm i -g hexo

  3. 然后在项目内 npm i 安装相关依赖

注意:hexo可以不全局安装 但后续执行任何hexo相关命令时需要加上npx 例如 npx hexo s 否则会提示hexo不是’hexo’ 不是内部或外部命令,也不是可运行的程序或批处理文件。(这个其他插件都同理,例如未全局安装vue的话也可以 npx+vue执行vue相关命令)


启动项目命令

hexo s

启动完毕后命令行会输出启动服务地址 默认为http://localhost:4000


生成文档命令

hexo new -p 生成路径/文件名 文件名

示例:
hexo new -p 插件文档/生成测试.md 生成测试
-p后边跟的是想生成到的路径跟文件名 后边再重复一次文件名

执行完毕后会在相应的目录生成此文件跟一个与文件同名的文件夹,相关的图片资源等放到此文件夹内,用相对路径引用即可


编辑文档

推荐使用typora进行markdown文件的编辑

打开刚刚的新文件是一个包含此头部(示例)的markdown文件

---
title: 示例
date: 2020-11-30 16:13:18
updated: 2020-11-30 16:13:18
author:
---

别忘记自行修改下author(作者)
如果想要置顶的话可以在这里加一个top: true(只能有一篇文章置顶,如果有多篇文章包含此变量的话按排序取第一篇置顶,默认按日期倒序,即后写的在前)

如果不想用命令的话也可以自行新建文件,但需要自行复制一个文件头在自己的文件内,不然运行时候会报错

文件头位置 /scaffolds/post.md

无论是什么格式的都得在文件最上部加上此头部 头部的 title跟文件名保持一致


插入资源说明

将图片复制到文件生成时创建的同名目录用相对路径引用即可

如果是使用typora编辑的话简单很多,改动设置之后直接拖到图片到文档中即可完成插入,typora会自动帮你完成复制图片这一步骤。

设置方法如下

typora主界面选择 文件 –> 偏好设置 然后将子选项改动到与下图一致就行

page2

进阶用法可以查看 hexo文档中的 标签插件(点击前往文档)


预览

编辑文件时运行hexo s启动服务即可, 服务器会实时更新你所编辑的内容,编辑完手动刷新即可看到你刚输入的文字
想要预览生成的结构跟文件的话运行hexo g即可生成public目录,运行hexo clean即可清理


项目部署

将项目上传至码云仓库后,到如下界面 ,点击服务,选择Gitee Pages;

page1

点击启动/更新/部署(按钮根据状态不同显示不同),等待部署完成即可。

附录

本站主要框架文档

Hexo文档地址

相关命令可以直接查阅文档


hexo所支持的模板插件

ejs模板文档地址

swig模板文档地址


live2d(左下角看板娘) 模型切换方法

npm i --save 模型名称 然后修改model.user即可

模型的名称参考      模型预览