logo 范 · 拾光录
网址收集 关于作者 Github Gitee
杂文随笔5
Hexo博客:基础使用Hexo博客:Next主题Hexo博客:Next进阶使用Hexo博客:Next高级配置基于Node的WIKI管理
前端知识16
HTML常用知识CSS常用知识CSS美化checkbox复选框JavaScript常用知识JavaScript格式化时间戳JavaScript窗口宽高处理JavaScript黑夜主题切换实现方案JavaScript数字转大写简易图片查看器TypeScript基础知识Threejs基础三要素Threejs网格辅助和轨道控制器Threejs物体绘制Electron基础使用Nodejs基础知识animate.css页面动画
Vue框架19
Vite的使用及扩展Vue3父子组件Vue3使用Marked解析MarkdownMermaid图表生成库初始化页面加载动画Axios表单提交二维码解决方案NProgress加载进度条Vue3动态菜单实现Vue3使用ECharts图表Vue3处理Excel导入导出keep-alive页面缓存及setup问题Element:文件上传Element:结合Pinia实现动态菜单Element:图片上传组件Element:自定义统一弹窗组件Element:表格自定义指令控制按钮显示(鉴权)可视化大屏使用缩放适配分辨率
UniApp15
UniApp的基础使用封装网络请求工具及文件上传uni-app的开发记录微信小程序分享原生文件上传Pinia取消滚动条(兼容小程序)tabbar消息数量显示scroll-view上滑到底部加载数据状态栏高度动态设配数据共享与传递uview-plus导航栏实现背景融合Wot UIWot UI实现顶部背景图融合uni-app x
Java基础知识10
基础知识面向对象Lambda表达式常用API常用知识积累try-with-resource注解反射多线程经纬度距离计算
SpringBoot31
application配置Maven创建聚合项目全局异常处理锁机制项目启动初始化数据方式邮件功能集成原生定时任务异步集成阿里云OSS阿里OSS预签名上传基于hutool读excelJSR303WebSocketWebSocket版AI接口流式调用Smart-Doc接口文档生成器application配置信息加密雪花算法工具AOP实现请求参数脱敏思路JWT生成Token及工具类SpringBoot默认JSON与对象转换若依框架:安装使用若依框架:优化和调整文件上传若依框架:管理后台页面优化若依框架:后端接口代码优化SpringAISpringBoot实现AI接口流式调用服务启动时创建MySQL连接自建项目工程树形结构处理工具微信支付代码微信手机号登录
SpringMVC14
跨域处理拦截器RESTful风格伪前后端分离Jackson转换器调整Thymeleaf基于拦截器做权限校验AOP打印接口请求响应日志AOP打印接口请求响应耗时文件上传和回显POST请求加解密实现(AES)POST请求加解密实现(RSA+AES)参数动态校验实现方案真实IP和归属地
MyBatis8
MyBatis基本使用与配置Mapper使用相关MaBatis多数据源配置MyBatisPlus数据统计类处理方案MyBatisPlus条件查询正向工程的实现(H2)mybatis-plus-join
SpringCloud15
Netflix:微服务与搭建Netflix:服务的消费与提供Netflix:EurekaNetflix:ActuatorNetflix:RibbonNetflix:FeignNetflix:HystrixNetflix:ZuulAlibaba:简介与搭建Alibaba:Nacos注册中心Alibaba:RibbonAlibaba:OpenFeignAlibaba:Nacos配置中心Alibaba:GetewayAlibaba:Sentinel
MySQL6
MySQL基础知识MySQL多表查询与事务MySQL常用函数及解决方案MySQL视图MySQL索引安装MySQL
Redis7
Redis介绍和安装Redis配置文件Redis持久化Redis集群Redis语法基础Redis相关问题及解决方案SpringBoot集成Redis使用记录
MongoDB10
Linux安装MongoDBMongoDB基础语法MongoTemplate及SpringBoot配置MongoTemplate中Update操作MongoTemplate中聚合查询MongoTemplate日期归档示例项目使用相关知识归纳地理位置存储与距离查询MongoDB副本集与事务获取类名和属性名工具类
其他数据库1
H2数据库
Python编程6
Python基础知识Python语法yolo目标检测OpenCV的使用及树莓派平台condauv
工具集合13
IDEAMavenGradleGitNginx安装Nginx配置VSCodeJMeter压测DockerOllamaRustFSPicGoObs录制
Linux知识11
Linux常用命令Jar启动脚本VirtualBox安装CentOSVirtualBox安装Ubuntu树莓派安装及使用frp内网穿透ArchLinux:基础系统安装ArchLInux:图形化界面安装ArchLinux:常用软件ArchLinux:深度优化ArchLinux:Niri
创意设计2
Blender:入门知识UI设计基础知识
AI相关9
Claude CodeHermes AgentOpenAI基本使用OpenAI工具调用OpenAI记忆管理OpenAI推理执行OpenAI开发框架Langchainllama.cpp

静态博客网页生成器,相较于其他生成器来说速度较快,功能相对完善,官网有较多的主题和插件来丰富网站展示。本文使用Hexo版本为8.1.1,记录Hexo在使用过程中涉及的知识和遇到的问题

Hexo安装

Hexo静态博客生成器需要Node.js环境,官网建议使用Node.js 12.0及以上版本,同时可以安装Git来进行代码管理

// 默认安装最新的版本
npm install hexo-cli -g
// 指定版本进行安装
npm install -g hexo@8.1.1

这里的-g表示全局安装(系统任何地方可使用),不建议局部安装(仅项目文件夹中可用),局部安装无法直接使用hexo命令,需要配置环境变量,较为复杂,安装完成后可以使用npm view hexo version查看安装的版本

然后在某个文件夹中打开终端执行hexo init即可初始化一个博客模板,使用hexo s就能运行,之后的一切操作都是在这个模板上进行,其中

使用hexo init初始化文档项目时可能因为网络原因较为慢(国外网址),建议多尝试几次

Hexo相关命令

npm相关命令

网站信息配置

配置文件为目录下_config.yml注意该文件的改动需要重新执行hexo s命令才会生效

# Site
title: FANMR.CN                    # 网站名称
subtitle: 因为热爱,所以追求        # 副标题
description: 坚持学习新的知识       # 描述
keywords: 知识库,博客网站          # 网站关键字
author: FANMR.CN                   # 作者
language: zh-CN                    # 语言
timezone: ''                       # 时区

个人网址

url: https://fanmr.cn

用于版权声明等情况,注意使用httphttps开头

永久链接

permalink: /article/:year:month:day:hour:minute:second.html

默认的文章路径为:year/:month/:day/:title/,即文章发布时间加文章名字,如果文章的名字有所调整,那么文章原有的链接就无法访问该文章,对于收藏和分享来说是不友好的

以上方式将文章的链接改为了文章发布时间,只要不对发布时间做调整,文章就可以被永久访问到

文章创建及格式

文章放在source/_posts下,采用Markdown语法格式,可以随意创建文件夹,文章的完整格式如下:

---
title: 文章名
categories: 分类名称                 # 分类,支持多级,同tags 
sort: 1                              # 排序号,需要启用
date: 2026-04-29 10:47:55            # 发表日期,改为永久链接后这个就不要改动了
updated: 2026-04-29 10:47:55         # 更新日期
tags:                                # 标签
  - Hexo
  - 博客系列
photos:                              # 顶部图片
---

# 正文从这里开始

阅读全文

在文章合适的位置加上分割标志,在VsCode编辑器中可以使用CTRL+/快速打出注释

<!--more-->
以下内容不会展示在首页

本地图片

默认情况下发现本地图片是无法显示的,网上的解决方案大部分都是使用hexo-asset-image插件,但是我发现source下非_posts的目录是被打包的,利用这个特性,即可实现本地图片的使用。在source下创建图片目录,如images,将图片放入其中,在引用的文章中直接使用Markdown的图片语法即可,如:

// 绝对路径(仅网站可用)
![](/images/20211227093201.png)
// 相对路径(不影响编辑器直接查询文章),VsCode会提示
![](../../images/20211227144740.png)

VsCode写Mardown

使用VsCode进行Markdown写作时,个人其中使用的一些必要插件:

同时可以使用Snipaste进行截图操作

VsCode文章头自动生成

使用的是VsCode的代码片段,在设置代码片段新建全局代码片段,在其中添加以下配置:

{
	"hexo post header info": {
		"prefix": "hexo",
		"body": [
			"---",
			"title: xxx",
			"categories: xxx",
			"sort: 1",
			"date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
			"updated: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
			"tags:",
			"  - xx",
			"photos: ",
			"---",
			"",
			""
		],
		"description": "hexo post header info template"
	}
}

注意:此时是无法使用的,VsCode默认并没有开启Markdown的全局片段,在硬盘上搜索C:\Users\Administrator\AppData\Roaming\Code\User\settings.json文件,在其中加入以下配置:

"[markdown]": {
    "editor.quickSuggestions": {
        "other": "on",
        "comments": "on",
        "strings": "on"
    }
}

然后在头部打hexo就会出现提示,自动生成头部信息

Github Pages自定义域名

域名的自定义在开启Pages的仓库中即可绑定,但是前提是添加进了Github的域名管理,点击我的头像SettingsPages中根据提示添加domains并校验成功,即可使用。同时注意,绑定自定义的域名会在部署仓库下多一个CNAME文件,别忘了放入博客中

部署Github Pages

需要先安装部署插件

npm install hexo-deployer-git

然后配置

# Deployment
deploy:
  type: git
  repo: https://github.com/fanmore/fanmore.github.io
  branch: main

最后使用hexo d就能将public中的文件推送到仓库了

部署阿里云OSS

解决访问慢问题,部署插件:hexo-deployer-aliyun

阿里云的配置:

阿里云的Region查阅:https://www.zyku.net/aliyun/2017.html

使用感受:对于图片过大的情况会报错,因为上传机制是上传所有文件,而非Git的更新

Hexo安装
Hexo相关命令
npm相关命令
网站信息配置
个人网址
永久链接
文章创建及格式
阅读全文
本地图片
VsCode写Mardown
VsCode文章头自动生成
Github Pages自定义域名
部署Github Pages
部署阿里云OSS