hexo下next主题的优化

article/2025/11/11 5:18:03

1.站点信息的配置。

修改一些基本的配置,比如站点名、站点描述等等。

# Site
title: halisi7
subtitle: '一个专注技术的组织'
description: '涉猎的主要编程语言为 c语言、Java、mysql、linux、docker,领域涵盖算法、服务研发和对象存储等。'
keywords: c语言、Java、mysql、linux。
author: halisi7
language: zh-CN
timezone: ''
  • 修改位置为根目录下的_config.yml文件。
Snipaste_2022-01-07_14-12-54

2.修改主题(Next)。

首先命令行进入到项目的根目录,执行如下命令即可:

git clone https://github.com/theme-next/hexo-theme-next themes/next
  • 执行完毕之后 Next 主题的源码就会出现在项目的 themes/next 文件夹下。

更换主题。

  • 然后我们需要修改下博客所用的主题名称,修改项目根目录下的 _config.yml 文件,找到 theme 字段,修改为 next 即可,修改如下:
theme: next

重启服务。

hexo s

访问刷新下页面,就可以看到 next 主题就切换成功了,预览效果如下:Snipaste_2022-01-07_14-17-55

3.主题配置。

a.样式

  • 通过修改配置文件的 scheme 字段即可。
scheme: Gemini

Snipaste_2022-01-07_14-20-48

有多种样式可以选择:

Snipaste_2022-01-07_14-22-35

b.个人头像。

  • 将头像文件放置到themes/next/source/images/avatar.png 路径
  • 在主题Next里面 的_config.yml 文件下编辑 avatar 的配置,修改为正确的路径即可。
  • rounded 选项是是否显示圆形,rotated 是是否带有旋转效果,大家可以根据喜好选择是否开启。

Snipaste_2022-01-07_14-26-36

c.代码块。

Snipaste_2022-01-07_14-29-12

效果:

Snipaste_2022-01-07_14-30-40

d.top

  • 我们在浏览网页的时候,如果已经看完了想快速返回到网站的上端,一般都是有一个按钮来辅助的,这里也支持它的配置,修改 _config.yml 的 back2top 字段即可,我的设置如下:

Snipaste_2022-01-07_14-32-20

e.github_banner

  • 大家可能注意到在页面的右上角有个 GitHub 图标,点击之后可以跳转到其源码页面。

配置如下:

Snipaste_2022-01-07_14-45-31

f.math

  • 可能在一些情况下我们需要写一个公式,比如演示一个算法推导过程,MarkDown 是支持公式显示的,Hexo 的 Next 主题同样是支持的。
  • Next 主题提供了两个渲染引擎,分别是 mathjax 和 katex,后者相对前者来说渲染速度更快,而且不需要 JavaScript 的额外支持,但后者支持的功能现在还不如前者丰富。

我这里选择了 mathjax,通过修改配置即可启用:

Snipaste_2022-01-07_14-42-01

mathjax 的使用需要我们额外安装一个插件,叫做 hexo-renderer-kramed,另外也可以安装 hexo-renderer-pandoc,命令如下:

npm un hexo-renderer-marked --save
npm i hexo-renderer-kramed --save

g.标签页。

  1. 现在我们的博客只有首页、文章页,如果我们想要增加标签页,可以自行添加,这里 Hexo 也给我们提供了这个功能,在根目录执行命令如下:
hexo new page tags //标签页
hexo new page categories //分类页
  1. 执行这个命令之后会自动帮我们生成一个 source/tags/index.md 文件,内容就只有这样子的:

Snipaste_2022-01-07_14-49-52

  1. 我们可以自行添加一个 type 字段来指定页面的类型:
type: tags //标签页
comments: false 
type: categories //分类页
comments: false
  1. 然后再在主题的 _config.yml 文件将这个页面的链接添加到主菜单里面,修改 menu 字段如下:

Snipaste_2022-01-07_14-52-38

效果如下:

Snipaste_2022-01-07_14-53-46

h.搜索页。

  1. 如果要添加搜索的支持,需要先安装一个插件,叫做 hexo-generator-searchdb,命令如下:
npm install hexo-generator-searchdb --save
  1. 然后在项目的 _config.yml 里面添加搜索设置如下:

Snipaste_2022-01-07_14-55-05

  1. 然后在主题的 _config.yml 里面修改如下:

Snipaste_2022-01-07_14-56-14

然后在项目的 _config.yml 里面添加搜索设置如下:

在这里插入图片描述

  1. 然后在主题的 _config.yml 里面修改如下:

在这里插入图片描述


http://chatgpt.dhexx.cn/article/hwuRpFK4.shtml

相关文章

Hexo博客-NexT主题自定义主页配置方法

Refrence https://zhuanlan.zhihu.com/p/366761432 问题 在使用Hexo博客框架的Next主题时,默认主页是数篇博客的摘要。想要修改主页(也即首页)的内容(例如给出网站的介绍等),需要进行自定义配置。 步骤 …

Hexo-Next主题搭建个人博客最新配置教程!

个人博客 网页预览:https://benn314.github.io/ Hexo-Next 是一款我很喜欢的主题,布局简约,很适合用于搭配 live-2d 和 网格动画,打造属于自己的个人博客。博客目前部署于 Github Pages 相关Github仓库 https://github.com/Ben…

NexT主题优化

前言 这算是各种文章的集合了,如果你有耐心就看完吧(T▽T) 如果是明确想要哪一种功能的童鞋,那就直接查找吧( • ̀ω•́ )✧ 本篇文章是在已经搭建好gitpagehexo的博客的前提下(不懂怎么搭建的可以参考我的另一篇…

Hexo+next主题美化静态博客

前言 需要在Hexo下配置next主题 Hexo配置next主题教程:点我跳转 更改配置以后使用素质三连:hexo clean && hexo g && hexo s即可本地看到效果。 hexo clean && hexo g && hexo s注:部分参考自互联网&…

Next主题美化

写作目的 网上关于Hexo的主题美化的博客已经很多也很全面了,但是在作者去一一尝试的时候,却发现有很多博客中提供的方法现在已经不支持或者过时了,为了避免大家和作者一样花费大量时间去一一尝试,所以作者考虑再三,决定…

Hexo博客优化之Next主题美化

前言 有了前面几篇博客的介绍,我们就可以很容易的搭建并编辑我们的博客了,不过既然是属于自己的博客网站,自然也就想让其更加美观,更有意思,所以呢我下面介绍一下Hexo博客的主题美化操作。 1. Next主题 Hexo博客支持很多主题风格,其中Next主题是Github上Star最多的主题,…

Django CBV ( 类视图函数 )

Django 类视图函数 写在前面1、先创建一个新的应用2、写一个类视图函数3、post访问试试4、再创建一个类视图函数5、as_view()里面可以传参6、TemplateView6.1、template_name写到路由里6.2、template_name写到视图里 7、ListView8、DetailView8.1、DetailView还可以不指定templ…

详解Django中FBV开发模式与CBV开发模式的区别.

你可能会好奇为什么在这里我们又要介绍CBV开发模式, 在前面的文章中, 我们调用视图函数都是使用 FBV 开发模式, 用的好好的为什么又要换呢? 其实不然,这是一个循序渐进的过程, 就像编程基础 和 框架开发&am…

什么是ccv

ccv是一个以不成熟的openframeworks为基础作的一个开源的软件。注意它并不是一个库。并且她早就不再更新了。现在openframeworks已经很成熟了,openframeworks提供的函数完全可以替代ccv,所以想继续使用ccv的同学们,赶紧回头是岸,使…

Django----FBV 与 CBV 介绍、CBV源码分析

文章目录 一、CBV和FBV二、CBV 源码分析 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应。 响应可以是一张网页的HTML内容,一个重定向&#…

FBV和CBV

一、FBV FBV(function base views) 就是在视图里使用函数处理请求。 看代码: urls.py from django.conf.urls import url, include # from django.contrib import admin from mytest import viewsurlpatterns [# url(r‘^admin/‘, admin.s…

CBV

一、CBV与FBV #Class Base View(基于类的视图) #Function Base View(基于函数的视图) 二、CBV的用法及源码分析 1、用法 #视图层 # 1 先导入View(继承它) from django.views import View # 写一个类继承它, class Test(View):#request必须传,后面的可传可不传(有可能有名,无名分…

FBV与CBV

FBV与CBV 视图函数并不只是指函数也可以是类。FBV(基于函数的视图) 面向函数式编程。CBV(基于类的视图) 面向对象式编程 问题:基于CBV的视图函数,get请求来就会走类里面get方法,post请求来就会走类里面post方法 为什么??? urls.py中 url(r^login/,views.MyLogin.…

CBV与FBV的区别/CBV源码剖析

FBV与CBV # 针对于视图函数(views.py)&#xff0c;视图函数编写逻辑既可以使用函数(FBV)也可以使用类(CBV)来编写。 区别展示&#xff1a; login.html <h1>GET请求</h1><form action"" method"post" enctype"multipart/form-data"…

FBV与CBV, CBV源码剖析

目录 FBV和VBC CBV和FBV CBV源码分析 CBV源码简述 FBV和VBC 一个视图函数(类),简称视图, 是一个简单的python函数(类),他接受web请求并且返回web响应. 响应可以是一张网页的HTML内容, 一个重定向, 一个404错误, 一个xml文档或者一张图片. 无论视图本身包含什么逻辑, 都要…

Django的CBV方式讲解

CBV使用配置 路径url的配置 cbv 顾名知义就是通过类的方法来调用&#xff0c;我们在url中配置为如下路径 url(r^cbv.html/, views.Cbv.as_view()), 这里的Cbv是一个class 类&#xff0c;要想使用cbv方法&#xff0c;这个路径后面还得必须有一个as_view()这个是必须的固定格式 v…

CBV之详解

一&#xff0c;CBV&#xff0c;基于反射实现根据请求方式不同&#xff0c;执行不同的方法。 1. 开发模式- 普通开发方式&#xff08;前后端放在一起写&#xff09;- 前后端分离2. 后端开发为前端提供URL&#xff08;API/接口的开发&#xff09;注&#xff1a;永远返回HttpRespo…

邮件协议分析

一、邮箱分类 邮件发送与接受主要存在两种形式&#xff1a;网页和客户端两种。网页形式主要是通过web页面登陆邮箱完成邮件的收发&#xff0c;如mail.139.com、mail.163.com和mail.google.com等&#xff1b;客户端是指在PC上安装第三方软件实现对邮件的收发&#xff0c;如outl…

邮件协议 (SMTP,POP3,HTTP)

SMTP协议通讯模型   SMTP协议是TCP/IP协议族中的一员&#xff0c;主要对如何将电子邮件从发送方地址传送到接收方地址&#xff0c;也即是对传输的规则做了规定。SMTP协议的通信模型并不复杂&#xff0c;主要工作集中在发送SMTP和接收SMTP上&#xff1a;首先针对用户发出的邮…

Email协议简介

一、组成部分 电子邮件的发送和接收包含三个主要组成部分 用户代理 又名”邮件阅读器“撰写、编辑和阅读邮件如Outlook、Foxmail输出和输入邮件保存在服务器上 邮件服务器 邮箱中管理和维护发送给用户邮件输出报文队列保持发送邮件报文&#xff0c;发送到每个用户的邮箱中 邮…