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

Next是Hexo静态博客生成器下的一款博客展示主题样式,该主题相较而言比较好看,功能也比较全,博客网站拥有的功能都有所具备,同时也支持其他功能的扩展,文章使用版本为8.27.0

官网及下载

Next官网,下载方式到最新的Next仓库拉取或直接下载,然后放到themes下,在配置文件中启用

// 这里是文件夹名字
theme: next

Next主题的所有配置在Next目录下的_config.yml中,更改文件即会生效,不需要重启。如需清除Next冗余文件,下面为Next的必须文件

next
  |--languages
  |--layout
  |--scripts
  |--source
  |--_config.yml
  |--_vendors.yml
  |--package.json

之后的配置都在_config.yml中进行

主题选择

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

网站图标

favicon:
  small: https://s1.ax1x.com/2020/11/10/BqTOfA.png
  medium: https://s1.ax1x.com/2020/11/10/BqTOfA.png
  apple_touch_icon: https://s1.ax1x.com/2020/11/10/BqTOfA.png
  safari_pinned_tab: https://s1.ax1x.com/2020/11/10/BqTOfA.png

菜单配置

menu:
  home: / || fa fa-home
  导航: /nav || fa fa-paper-plane
  categories: /categories || fa fa-th
  archives: /archives || fa fa-archive
  作者: /author || fa fa-user

通过命令hexo n page nav创建与路径同名的文件,然后进行配置:

---
title: 标签
date: 2020-11-10 13:57:59
type: "tags"
comments: false
---

Next使用的图标为Font Awesome,可根据喜欢自行选择

侧边头像

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.png
  # If true, the avatar will be displayed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false

侧边社交

social:
  GitHub: https://github.com/fanmore  || fab fa-github
  Gitee: https://gitee.com/riskfan  || fab fa-github-alt

开启版权

creative_commons:
  license: by-nc-sa
  sidebar: true
  post: false
  language:

浏览进度

默认放在右下角,开启后放在文章目录下

back2top:
  enable: true
  # Back to top in sidebar. 放在作者下
  sidebar: true
  # Scroll percent label in b2t button. 浏览进行百分比
  scrollpercent: true

关闭大纲数字和展示所有

toc:
  number: false
  expand_all: true

底部运行时间

footer:
  # Specify the year when the site was setup. If not defined, current year will be used.
  since: 2021

备案号

beian:
  enable: true
  icp: 黔ICP备2021005697号

背景彩带

解决页面整体黑白调的问题

canvas_ribbon:
  enable: true
  size: 100 # The width of the ribbon
  alpha: 0.4 # The transparency of the ribbon
  zIndex: -1 # The display level of the ribbon

关闭首页阅读全文

read_more_btn: false

代码复制功能

copy_button:
    enable: true

代码样式

copy_button:
  enable: true
  # Available values: default | flat | mac
  style: mac

source/css/main.styl中加入

// 代码样式
figure.highlight {
  box-shadow: none;
}
figure.highlight::before {
  height: 9px;
  width: 9px;
}

异步加载

相同的数据不在重复加载,加快页面加载,页面转换更流畅

# Easily enable fast Ajax navigation on your website.
# For more information: https://github.com/next-theme/pjax
pjax: true

图片放大功能

mediumzoom: true

图片懒加载

页面滚动到才加载,但是会影响文章侧边导航定位的精确性,有时会因为没有加载图片无法直接到达某个标题

# Vanilla JavaScript plugin for lazyloading images.
# For more information: https://apoorv.pro/lozad.js/demo/
lazyload: true

导航开启统计

menu_settings:
  icons: true
  badges: true

在进入文章后页面后,导航是没有小点的,这个时候会出现导航右侧空白的情况,不喜欢该风格的情况可以开启导航统计,缓解右侧空白的情况并且导航统计是左右对称的,小点是靠右一丢丢的,与自定义的左侧分类能保持一致的宽度

标签云配置

tagcloud:
  min: 13 # Minimum font size in px
  max: 24 # Maximum font size in px
  amount: 1000 # Total amount of tags
  orderby: name # Order of tags
  order: 1 # Sort order

顶部加载条

pace:
  enable: false
  # All available colors:
  # black | blue | green | orange | pink | purple | red | silver | white | yellow
  color: blue
  # All available themes:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: minimal

底部驱动

个人建议还是开启,毕竟开源需要大家维护

footer:
  # Powered by Hexo & NexT
  powered: true

ICP备案展示

footer:
  beian:
    enable: true
    icp: xxxx

文章底部标签图标

# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: true

默认使用的是#,开启后就有图标了

文章文字间距固定

某些文字间的间距因为页面宽度而增大,手机端尤为严重,是文字的对齐方式造成的,可在配置文件中配置

# Set the text alignment in posts / pages.
text_align:
  # Available values: start | end | left | right | center | justify | justify-all | match-parent
  desktop: left
  mobile: left

全局字体配置

font:
  enable: false

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host:

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

  # Global font settings used for all elements inside <body>.
  global:
    external: true
    family: Helvetica # 更改此处
    size:

首页摘要

Next默认是开启的,在文章的头部加上description:即可,同时可以美化样式

// 摘要
.post-description {
  margin-bottom: 20px;
  text-align: left;
  text-indent: 2em;
}
官网及下载
主题选择
网站图标
菜单配置
侧边头像
侧边社交
开启版权
浏览进度
关闭大纲数字和展示所有
底部运行时间
备案号
背景彩带
关闭首页阅读全文
代码复制功能
代码样式
异步加载
图片放大功能
图片懒加载
导航开启统计
标签云配置
顶部加载条
底部驱动
ICP备案展示
文章底部标签图标
文章文字间距固定
全局字体配置
首页摘要