这个是我正在使用的Hexo主题

大佬主题教程已出,你们可以基本上不用看我的这篇文章了,点击跳转查看文档

这个主题的最大优点——-很有创新性,不同于其他Blog的以文字为主

主题下载地址 Hexo magzine主题

之所以选择这个magzine主题而不是另一个我比较喜欢的 Hexo Vivia 主题主要是因为感觉这种杂志一样的Blog更具有创新性而且更好看

对了提一下,Vivia的作者就是现在 Astro fuwari主题的作者 saicaca ,而我另一个网站使用的 Astro MizukiAstro主题就是 Mizuki大佬基于fuwari主题的美化,小孩子才做选择,我全都要狗头狗头狗头

但是,虽然这两个主题都非常好看,但是从心理学的角度来说,我们更倾向于图像内容而不是文字内容

这里我举个例子以下是 itch.io上的几个小游戏大家可以对比一下

这是第一个游戏 ,不仅有文字描述还有游戏实机图像甚至还有宣传片

点击跳转

这是第二个游戏文字描述非常少图片就像是随手截的图一样网页配色也让人很难受(可能这个游戏作者是一个小萌新)

点击跳转

要是我,我一定不会玩第二个游戏,真的碰都不会碰,第一个我八成会想试一试

所以大家也可以发现一件事,那就是我们人类是看脸的生物,大家绝对第一眼先看图片再看文字,或者说根本不看文字

对于Blog 我个人认为类似CSDN这种界面真的好难看你们可以看看

小小的界面塞进去几十个没用的东西,配色也很阴间,甚至强制登录,也是无敌了,这个公司的员工的审美这么差劲吗（＃￣～￣＃）

对比一下 stackoverflow 就知道差距有多大了,人家界面起码能保证UI和配色一致不辣眼睛(毕竟是论坛所以文字居多)

所以把东西都藏到边边角角里反而会给用户更好的观感,而不是把功能全部呈现给用户甚至展现一些没用的东西

所以要么主题以文字为主,要么以图像加文字为主,类似于哔哩哔哩这种界面反而效果更好看

比如forever218 大佬的magzine的界面看起来就很让人舒服~~ 看Blog 就好像在刷视频一样

而 fuwari 主题这种只展现文字的每一篇文章我完全没有一点点点开的欲望所以这种绝对不适合作为个人Blog

只适合作为某个软件或项目的文档或者说明书之类的东西因为这个排版感觉太严肃了

使用方式

第一种使用方式(可视化)———–面向已经熟练使用hexo的大佬

由于 forever218 大佬暂时比较忙没时间制作使用文档,这里我就说明一下怎么使用吧

大佬已经制作了hexo可视化交互界面软件,但是这个软件我个人觉得对小白不是很友好

不过我就首先推荐你们使用这个吧 <( * ￣▽￣ * )/

这个是下载链接 HexoHub ,那怎么使用呢? 自己看github上大佬的文档还有hexo的官方文档去狗头狗头狗头

我是希望在这个软件的上方增加一个类似于“使用文档” 的按钮以及“ 主题选择 ” 的按钮这样就不用去看hexo的官方手册还有去hexo的官方主题市场下载主题了这样对于小白超友好 ♪ ( ^ ∇ ^ *)

第二种使用方式(命令行) ———–小白必学之路

这个起源于我第一次使用的时候踩的坑 o(╥﹏╥)o

当时给大佬写了几封信反馈了一下,我就把信件原话给你们看看吧,然后加入我的一些补充

我尽量写的详细一点,从零开始教(够详细吧),我尽量讲讲我会的部分,还有一些我还没有学

不过我感觉别的功能你们也绝对用不上,毕竟这个只是用来写文章的,非开发人员也没有必要折腾其他的ヾ( =^ ▽ ^ =)ノ

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

第一步: 下载git和 nodejs

首先我们需要下载 Git - Install for Windows

我们还需要下载 Node.js — 下载 Node.js®

然后我们点开这个nodejs的控制台(应该是控制台吧,我不熟悉nodejs哈哈)

第二步:下载Hexo和主题

这是一些hexo指令,我们先提前了解一下

首先在D盘新建一个文件夹比如就叫 Blog

在nidejs控制台输入

进入文件夹路径

1 2	D: cd D:\Blog

然后再输入

1	npm install -g hexo-cli

然后没出错的话就检查一下,输入hexo -v即可查看是否安装成功,只要显示hexo的版本号就行了

hexo -v

出错了的话,把报错信息丢给 ChatGPT Gemini Grok Claude 豆包 DeepSeek Kimi 不要问我哦,因为我也不知道你错哪了ヽ（ ≧ □ ≦ ）ノ

没问题那就执行这个

1 2	hexo init npm install

出现这个即可

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

我们先不要执行 hexo g 和 hexo s 命令

先去下载主题 Hexo主题官网

需要梯子才能进入到这个官网 , 挑选你喜欢的主题

这里我们就用forever218大佬的 Hexo magzine主题

下载之后把这个 magzine 文件夹复制到 themes 文件夹

然后找到这个 _comfig.yml 文件(不是magzine里面的那个!!! 不要点错了)

把 theme 后面的改成主题的名字比如我们的 magzine , 其他主题也是一样的

然后还在刚才的那个nodejs的控制台里输入(你不会已经反手就关了吧? 要是关了需要重新进入Blog文件夹路径和刚才一样)

1	npm install

现在我们可以来使用我们的主题了!

① 预览和部署

因为我比较懒,所以我选择使用bat自启动脚本

什么是bat启动脚本,就是把txt文件格式改为bat,然后在里面写命令,点击就会自动执行命令

预览(preview)

一个是hexo自带的预览,也就是本地服务器,也就是 preview.bat

@echo off
cd /d "D:\Blog\huyangpahuo"  //把这个替换为本地网站资源的文件夹位置,替换完后删除你看到的这句中文

echo ===== 1. clean =====
call hexo clean
if errorlevel 1 pause & goto :eof

echo ===== 2. generate =====
call hexo generate
if errorlevel 1 pause & goto :eof

echo ===== 3. server =====
echo Starting Hexo server, please open http://localhost:4000/
hexo server

出现这个http://localhost:4000/之后成功了

1	http://localhost:4000/

我们在浏览器粘贴进去之后(你不要反手就把这个黑色窗口关了,这个窗口相当于是后台,关了之后是用不了这个预览功能的)

就可以看到我们的网站了

部署(deploy)

这个是 deploy.bat 脚本

一个是hexo的git部署这个我就不演示了和上面的那个一模一样但是你们先不要部署因为我们还没有搞github的仓库

先听我说完全部内容最后再部署狗头狗头狗头

@echo off
cd /d "D:\Blog\huyangpahuo"   //把这个替换为本地网站资源的文件夹位置,替换完后删除你看到的这句中文

echo ===== 1. clean =====
call hexo clean
if errorlevel 1 pause & goto :eof

echo ===== 2. generate =====
call hexo generate
if errorlevel 1 pause & goto :eof

echo ===== 3. deploy =====
echo Deploying to GitHub Pages...
call hexo deploy
if errorlevel 1 pause & goto :eof

echo ===== Finished! =====
echo Your site should be live soon at https://funingna-wakawaka.github.io  //替换为自己的github.io网址
pause

在原本的_config.yml文件最下面添加这几句

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: 
  branch: master

怎么放到Github里我不想讲了,我已经写了几千字了不想再写了 ┭┮﹏┭┮

你们直接看这个大佬的文章吧点击查看大佬文章

对了,你们要是嫌github.io速度慢可以自己买域名,这个我就不说了,自己在B站上找

② about (关于)

比如那个 “ 关于” 还有“ 分类” “标签” 以及“ 友链 ”包括搜索功能,一开始就是点击只会显示 404 not found

我们仍然使用 bat 启动脚本 ,不过你们也可以自己建文件夹,取名字和我的一致,里面放一个名为“index.md”的文件

首先制作about.bat脚本

1	cmd /k "cd /d D:\Blog && hexo new page "about"" //把这个路径替换为本地网站资源的文件夹位置,替换完后删除你看到的这句中文,并点击脚本启动

然后你可以看到这个about文件夹就出现了,里面还多了一个md空文档其他几个文件夹

对应hexo官网描述

在md(就是这个文件夹里面的index.md ) 里插入YAML写

1 2	title: 个人介绍 layout: about

什么.你不会插入YAML,假如你有Typora软件的话

在虚线上面写这些就行了

创建了之后大家可能不知道怎么改没关系,大家可以在里面写一些自我介绍

magizne文件夹这个地方找到这个脚本

我没有学过pug 第一次我使用的时候about.pug不是现在这个样子,这个我原先让AI改成我自己的信息了,也删改了部分代码

包括以下所有文件的代码,都是AI修改后的,改完之后我就给大佬写信反馈了一些小bug和小建议大佬真的接受了并更新了这个项目

( * ^ ▽ ^ * )好耶

你们可以改成你们自己的身份信息哦不会改的话可以把自己的github网址,哔哩哔哩网址,邮箱发给AI让他给你改,但是注意,其他的任何代码都不要改,只改中文部分

doctype html
html(lang=config.language)
  head
    meta(charset='UTF-8')
    title= (page.title || '关于我') + ' | ' + config.title
    link(rel='stylesheet', href=url_for('/css/about.css'))
    link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css')

  body
    main.about-page
      .about-container
        .about-header
          .about-avatar
            img(src=url_for(theme.author_card && theme.author_card.avatar ? theme.author_card.avatar : '/img/avatar.png'), alt="Avatar")
          h1.about-name= theme.author_card && theme.author_card.name ? theme.author_card.name : 'Your Name'
          p.about-bio= theme.author_card && theme.author_card.bio ? theme.author_card.bio : 'Your Bio'

        .interests-showcase
          if site.data.about && site.data.about.cards
            each card in site.data.about.cards
              - var cardClass = 'interest-card'
              - if (card.layout) cardClass += ' card-' + card.layout
              - if (card.size) cardClass += ' card-' + card.size
              
              a(class=cardClass, href=card.link || '#', target="_blank")
                - var bgStyle = card.image ? `background-image: url(${url_for(card.image)});` : `background: ${card.background};`
                .card-bg(style=`${bgStyle} background-size: cover; background-position: center;`)
                
                .card-content
                  h3.card-title= card.title
                  .card-description
                    p= card.description
                  .card-icon
                    i(class=card.icon)
                  .card-hover-content
                    p= card.details
          else
             p(style="text-align:center") 暂无数据

        .about-details
          .about-section
            h2 关于我
            .profile-info
              .profile-item
                .profile-label 称呼
                .profile-value 胡杨怕火
              .profile-item
                .profile-label 年龄
                .profile-value 19岁
              .profile-item
                .profile-label 大学
                .profile-value 河南师范大学软件工程
              .profile-item
                .profile-label 爱好
                .profile-value 做游戏和绘画
              .profile-item
                .profile-label 擅长
                .profile-value 吃饱睡睡饱吃
              .profile-item
                .profile-label 身份
                .profile-value 二次元爱好者 

          .about-section
            h2 我的技能点
            .bio-content
              .skills-list
                span.skill-tag 摄影和剪辑
                span.skill-tag 像素画和二次元绘画
                span.skill-tag Logo和矢量图设计
                span.skill-tag 各种计算机语言
                span.skill-tag Blender建模
                span.skill-tag Linux
                span.skill-tag 计算机图形学
                span.skill-tag 微信小程序
                span.skill-tag AI
                span.skill-tag 游戏制作
                span.skill-tag 写小说
                span.skill-tag 我的世界模组制作
                span.skill-tag 英语
                span.skill-tag 日语
                span.skill-tag 前端和数据库
                span.skill-tag 安卓应用制作

          .about-section
            h2 碎碎念
            .bio-content(style="white-space: pre-wrap;")
              != page.content

          .about-section
            h2 联系方式
            .contact-info
              a.contact-item(href="mailto:3930088367@qq.com")
                i.fas.fa-envelope
                div
                  .contact-label 邮箱
                  .contact-value 3930088367@qq.com
              a.contact-item(href="https://github.com/huyangpahuo")
                i.fab.fa-github
                div
                  .contact-label GitHub
                  .contact-value huyangpahuo
              a.contact-item(href="https://space.bilibili.com/3546621941910044")
                i.fas.fa-tv
                div
                  .contact-label 哔哩哔哩
                  .contact-value 胡杨怕火
    
    //- 【JS 修改】降低灵敏度 + 增加角度限制
    script.
      document.addEventListener('DOMContentLoaded', function() {
        const cards = document.querySelectorAll('.interest-card');
        
        cards.forEach(card => {
          card.addEventListener('mousemove', function(e) {
            const rect = card.getBoundingClientRect();
            const x = e.clientX - rect.left - rect.width / 2;
            const y = e.clientY - rect.top - rect.height / 2;
            
            // 【修正 1】降低灵敏度：除数从 20 改为 60，动效更微小细腻
            let rotateY = x / 60; 
            let rotateX = -y / 60;
            
            // 【修正 2】角度限制：限制在 ±8 度以内，防止太歪
            rotateY = Math.max(-8, Math.min(8, rotateY));
            rotateX = Math.max(-8, Math.min(8, rotateX));
            
            // 保持上浮 -16px
            card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02) translateY(-16px)`;
          });
          
          card.addEventListener('mouseleave', function() {
            // 复原
            card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1) translateY(0)';
          });
        });
      });

还有一个就是这个 about.yml文件

这个其实就是这里

cards:
  - title: "逃离后室"
    image: "/images/13.jpg"
    link: "https://store.steampowered.com/app/1943950/Escape_the_Backrooms/"
    background: "linear-gradient(135deg, #ff9a9e 0%, #fad0c4 50%, #ffecd2 100%)"
    description: "在不断的切出层级中探寻生的希望"
    details: "下次窃皮者来的时候不要堵门你尔朵隆吗"
    icon: "fas fa-heart"
    layout: "portrait"
    size: "large"

  - title: "小丑牌"
    image: "/images/14.png"
    link: "https://store.steampowered.com/app/2379780/Balatro/"
    background: "linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 50%, #a6c0fe 100%)"
    description: "一旦拥有爱不释手"
    details: "结果就是玩上瘾了"
    icon: "fas fa-palette"
    layout: "landscape"
    size: "medium"

  - title: "看门狗"
    image: "/images/15.png"
    link: "https://store.steampowered.com/app/2239550/Watch_Dogs_Legion/"
    background: "linear-gradient(135deg, #84fab0 0%, #8fd3f4 50%, #a8e6cf 100%)"
    description: "赋予游戏以美国都市的真实感"
    details: "没错,我是嘉豪"
    icon: "fas fa-running"
    layout: "portrait"
    size: "medium"

  - title: "我的世界"
    image: "/images/16.png"
    link: "https://www.minecraft.net/zh-hans"
    background: "linear-gradient(135deg, #d4fc79 0%, #96e6a1 50%, #c2e59c 100%)"
    description: "生存探索无限,创造缔造奇迹"
    details: "准备好进服务器偷别人家了吗孩子们"
    icon: "fas fa-lightbulb"
    layout: "landscape"
    size: "large"

  - title: "师父"
    image: "/images/10.png"
    link: "https://store.steampowered.com/app/2138710/Sifu/"
    background: "linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)"
    description: "抬手不是抱歉"
    details: "这,即是武德.jpg"
    icon: "fas fa-plane"
    layout: "portrait"
    size: "small"

  - title: "米塔"
    image: "/images/7.png"
    link: "https://store.steampowered.com/app/2527500/_MiSide/"
    background: "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)"
    description: "满足了我对二次元的所有幻想"
    details: "幻想死了 狗头狗头狗头"
    icon: "fas fa-book"
    layout: "landscape"
    size: "small"

修改过后, 我不知道为什么就是必须把这两个文件夹给复制到 hexo自带的source文件夹才能生效

③ categories (分类)和 tag (标签)

我同样也是用的是bat 脚本

1	cmd /k "cd /d D:\Blog && hexo new page categories" //把这个路径替换为本地网站资源的文件夹位置,替换完后删除你看到的这句中文,并点击脚本启动

1	cmd /k "cd /d D:\Blog && hexo new page tags" //把这个路径替换为本地网站资源的文件夹位置,替换完后删除你看到的这句中文,并点击脚本启动

然后这两个md文档里插入YAML并分别改成

1
2
3

title: 分类
layout: categories
type: categories

1
2
3

title: 标签
type: tags
layout: tag

然后那就可以看到

还有

④ 创建新文章

cmd /k "cd /d D:\Blog\huyangpahuo && hexo new post "Your Article Title""    //把这个路径替换为本地网站资源的文件夹位置,替换完后删除你看到的这句中文,文章的名字自己随便写,并点击脚本启动

然后移动到_posts文件夹里

可以看到创建的文章和其同名文件夹(等会儿说为什么是这个样子)

大家第一次使用的话可能不知道文章封面上的标题和日期怎么来的,也不知道咋换封面和标签

参考我写的这个注意空格还有“ - ”符号

title: FontColorChange脚本软件的使用方法的详细说明  #文章封面标题
date: 2025-12-15 18:52:27	#写作时间,但格式必须像我这样
tags:
- Autohotkey V2				#标签名称,可以多个,但格式必须像我这样
- 脚本
categories:
- AutohotkeyScript			#分类名称,可以多个,但格式必须像我这样
- 代码
cover: /images/8.png          #封面

这个封面的路径就是

⑤ 插入图片

大家估计会好奇Blog文章怎么插入图片

刚才我们说了这个文件名和文件夹必须保持一致 md有自己的图片语法格式也就是这个格式

但是这个格式不能自由控制缩放,我也是被网上的人误导了很多次

1	![image-20260114205343604](image-20260114205343604.png)

对应我们的这个文件夹

然后在typora里把这个文件夹指定为存图片的文件夹

这样就只需要把图片粘贴到typora里就会把图片自动保存在这个文件夹了

而且记得在typora里鼠标右键

将图片大小缩小一点(即把格式转换为< img >格式)

最后下载两个hexo插件 ,用这个可以用< img >格式缩放图片, 也可以在hexo里显示图片,还是在我们刚才的那个nodejs控制台进入文件夹路径输入

1	npm install hexo-asset-img --save //nodejs的控制台进入本地网站资源文件夹路径输入

1	npm install hexo-image-link --save //nodejs的控制台进入本地网站资源文件夹路径输入

还有

然而我们之前输入这个命令来下载依赖的同时

1	npm install //nodejs的控制台进入本地网站资源文件夹路径输入

还默认自带下载了一个东西叫 hexo-asset-image (罪魁祸首)

但是开始我以为这个 hexo-asset-image 和上面这个 hexo-asset-img 一样,最后的最后发现只要这个hexo-asset-image一存在图片就显示不出来,当时花了一天时间找原因(最后才知道这个插件年久失修不兼容),找到原因后快把我气死了

删除的方法:(注意不要直接删除文件夹,用命令行才能删干净)

1	npm uninstall hexo-asset-image //nodejs的控制台进入本地网站资源文件夹路径输入

⑥ 搜索 search 功能

如下是要求的必须有的一些依赖

查看你的package.json文件夹是不是和我这个差不多

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "8.0.0"
  },
  "dependencies": {
    "hexo": "^8.0.0",
    "hexo-asset-img": "^1.2.0",
    "hexo-deployer-git": "^4.0.0",
    "hexo-generator-archive": "^2.0.0",
    "hexo-generator-category": "^2.0.0",
    "hexo-generator-index": "^4.0.0",
    "hexo-generator-search": "^2.4.3",
    "hexo-generator-tag": "^2.0.0",
    "hexo-image-link": "^0.0.6",
    "hexo-renderer-ejs": "^2.0.0",
    "hexo-renderer-marked": "^7.0.0",
    "hexo-renderer-pug": "^3.0.0",
    "hexo-renderer-stylus": "^3.0.1",
    "hexo-server": "^3.0.0",
    "hexo-theme-fluid": "^1.9.8",
    "hexo-theme-landscape": "^1.0.0",
    "hexo-theme-solitude": "^3.0.21",
    "save": "^2.9.0"
  }
}

然后这些依赖里面,刚开始的时候默认下载是可能没有这个 “hexo-generator-search”: “^2.4.3”的

我们可以输入这个来下载

1	npm install hexo-generator-search@^2.4.3 --save //nodejs的控制台进入本地网站资源文件夹路径输入

你可以参考我的这个主题设置,自己摸索几遍就知道了

# Site Settings
favicon:    # /favicon.ico
logo: /images/0.png
# 首页图
# Hero Section
hero:
  enable: false  # 是否开启首页图片
  background_image: /images/11.webp
  typing_text: Where there's a will there's a way kind of beautiful
  typing_speed: 100
  delete_speed: 50
  pause_duration: 2000
  scroll_hint: 向下滚动探索更多

# Article List 首页文章卡片大小
article_list:
  card_size: normal  # normal or large

# Colors 颜色配置
colors:
  primary: '#1a1a1a'
  secondary: '#666666'
  accent: '#ff6b6b' # 主题色
  background: '#ffffff'
  text: '#333333'
  overlay: 'rgba(0, 0, 0, 0.7)'
  tag_background: '#ffffff'  # 首页标签背景色
  card_background: '#ffffff'  # 首页文章卡片背景色

# Typography 字体配置
fonts:
  primary: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
  secondary: 'Playfair Display, Georgia, serif'
  monospace: 'Fira Code, Monaco, Consolas, monospace'

# Layout 布局配置
layout:
  max_width: 1400px
  sidebar_width: 300px
  content_padding: 2rem

# Social Links 社交链接
social:
  github: https://github.com/huyangpahuo
#  twitter: https://twitter.com/yourusername
#  instagram: https://instagram.com/yourusername
#  linkedin: https://linkedin.com/in/yourusername
  email: mailto:3930088367@qq.com
  bilibili: https://space.bilibili.com/3546621941910044

# Navigation Menu 导航菜单
menu:
  首页: /
  关于: /about/
  归档: /archives/
  分类: /categories/
  标签: /tags/
  网站:
    我的另一个网站: https://huyangpahuo.github.io/
    我的另二个网站(狗头): https://huyangpahuo.vercel.app/
    


# Header 头部
# Navigation Bar Style (导航栏样式)
navbar:
  style: "bubble"  # "fill" (填充样式) 或 "bubble" (气泡样式，两边不填充，带圆角)

# Footer 页脚
footer:
  copyright: © 2025 胡杨怕火. All rights reserved.
  custom_html: ""
  # Footer centered image with link (页脚居中图片及链接)
  image:
    enable: true  # 是否显示图片，设为true显示
    src: "https://github.com/funingna-wakawaka/picx-images-hosting/raw/master/碧蓝档案.3yew7g3xtc.webp"  # 图片URL
    link: "https://bluearchive-cn.com/"  # 图片链接地址
    alt: "Footer Image"  # 图片替代文本
    
# Features (功能)
features:
  dark_mode: true  # 是否开启暗黑模式
  smooth_scroll: true
  back_to_top: true  # 是否开启返回顶部按钮
  loading_animation: true  # 是否开启加载动画，默认开启

# Code Block Settings (代码高亮)
code_block:
  height_limit: 200  # 代码块高度限制，超过此高度显示展开按钮
  enable_folding: true  # 启用代码折叠功能
  max_height: 300px  # 代码块最大高度（像素）
  show_lang: true  # 是否在代码块上方工具栏显示代码语言（默认true）



# Author Card (作者卡片)
author_card:
  enable: true
  avatar:  /images/0.png
  name: 胡杨怕火
  bio: 传递笑容魔法的Ciallo～(∠・ω< )⌒☆
  button_text: 关于我
  button_link: /about/
  background_image: "/images/13.jpg"
  width: large # normal or large
  # 作者卡片背景动画
  background_animation:
    enable: false  # 默认为false，启用后会在没有背景图片时显示动态背景
    type: geometric  # 背景动画类型：particles, geometric, gradient
    color_scheme: auto  # 颜色方案：auto（自动跟随主题）、light、dark
    interactive: true  # 是否启用鼠标交互效果
    density: high  # 动画元素密度：low, medium, high



# Comments (optional)
comments:
  enable: true																#-----------------设置为true
  type: twikoo # disqus, gitalk, valine, twikoo
  shortname:
  # Twikoo configuration
  twikoo:
    envId: ''   # Your environment ID
    region: # Your service region, e.g. ap-guangzhou
    path: window.location.pathname  # Default is window.location.pathname
    visitor: true  # Enable visitor count
    option: # Additional options

# Share buttons (optional)
share:
  enable: true
  options:
    twitter: true
    facebook: true
    linkedin: true
    copy_link: true
    wechat: true
    qq: true
    weibo: true
    option: # Additional options

# Theme Configuration
theme_config:
  # 文章设置
  post:
    excerpt_length: 200  # 文章摘要长度
    read_more: "阅读更多"  # 阅读更多按钮文字
    use_default_cover: true  # 当文章未设置封面时是否使用默认封面
    default_cover: "/images/19.png"  # 默认封面图片路径


  # 统计分析
  analytics:
    enabled: false
    google_analytics_id: ""
    baidu_analytics_id: ""

  # 搜索功能
  search:
    enabled: true                                                                        # -----------设置为true
    provider: "local"  # local, algolia
    algolia_app_id: ""
    algolia_api_key: ""
    algolia_index_name: ""



  # 性能优化
  performance:
    # 图片懒加载
    lazyload: true
    # 代码压缩
    minify: true
    # 缓存
    cache: true

# Custom code injection
inject:
  head:
    # Custom CSS
    # - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
    - <link rel="stylesheet" href="https://cdn1.tianli0.top/gh/qxchuckle/Post-Summary-AI/chuckle-post-ai.css"> #AI
  bottom:
    # Custom JavaScript
    # - <script src="/js/xxx"></script>
    - <script src="/js/ai.js"></script> #ai
    - <script src="/js/postai.js"></script> #ai


# AI摘要配置
ai_summary:
  enable: true  # 是否启用AI摘要功能，默认关闭
  api_key: ""  # DeepSeek API密钥
  summary_directly: false  # 是否直接生成摘要，默认为false（需要点击按钮生成）
  # 其他可选配置
  ai_name: "阿罗娜"  # AI名称
  ai_introduce: "老师好, 我是阿罗娜, 一个基于OpenAI GPT-4o的强大语言模型, 今天有什么可以帮到您? 😊"  # AI介绍语
  ai_version: "OpenAI GPT-4o"  # AI版本显示,什么,你说是GPT-4o,没错,我就是挂羊头卖狗肉 [狗头][狗头][狗头]
  # 按钮文本
  buttons:
    - "介绍自己"
    - "来点灵感"
    - "生成AI简介"

# Categories Page 分类页样式
categories:
  layout: accordion  # accordion (展开式) or page (跳转式)
  accordion_animation: true  # 是否启用展开/折叠动画
  show_empty_categories: true  # 是否显示没有文章的分类


# Table of Contents (目录) 设置
toc:
  # 当没有目录时的显示方式
  # hide: 隐藏目录侧边栏，并调整主内容区域宽度为全屏
  # placeholder: 保持目录侧边栏占位，但隐藏目录内容
  empty_toc_behavior: placeholder  # hide 或 placeholder


CDN:
  # The CDN provider of internal scripts (主题内部 js 的 cdn 配置)
  # option: local/elemecdn/jsdelivr/unpkg/cdnjs/onmicrosoft/cbd/anheyu/custom
  # Dev version can only choose. ( dev版的主题只能设置为 local )
  internal_provider: local

  # The CDN provider of third party scripts (第三方 js 的 cdn 配置)
  # option: elemecdn/jsdelivr/unpkg/cdnjs/onmicrosoft/cbd/anheyu/custom
  third_party_provider: unpkg

  # Add version number to CDN, true or false
  version: true

  # Custom format
  # For example: https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}
  custom_format: # https://npm.elemecdn.com/${name}@latest/${file}

  option:

在这个hexo自己的_config.yml里

在代码底部添加这几句

# Search
search:
  path: search.json 
  field: post
  content: true
  format: html

⑦ 评论区comment 功能

找到 magizine 主题里的_config.yml 里的刚才的这一段

# Comments (optional)
comments:
  enable: true																#-----------------设置为true
  type: twikoo # disqus, gitalk, valine, twikoo
  shortname:
  # Twikoo configuration
  twikoo:
    envId: ''   # Your environment ID								#-----------自己部署的vercel的网址粘贴进去
    region: # Your service region, e.g. ap-guangzhou
    path: window.location.pathname  # Default is window.location.pathname
    visitor: true  # Enable visitor count
    option: # Additional options

我写的太多了,现在有点想吐,你们自己看 twikoo的说明书还有别人的教程吧

如何使用MongoDB存储twikoo评论(MongoDB Atlas | Twikoo 文档)

⑧ AI评论功能

这个AI评论功能估计你也看到了

# AI摘要配置
ai_summary:
  enable: true  # 是否启用AI摘要功能，默认关闭
  api_key: ""  # DeepSeek API密钥
  summary_directly: false  # 是否直接生成摘要，默认为false（需要点击按钮生成）
  # 其他可选配置
  ai_name: "阿罗娜"  # AI名称
  ai_introduce: "老师好, 我是阿罗娜, 一个基于OpenAI GPT-4o的强大语言模型, 今天有什么可以帮到您? 😊"  # AI介绍语
  ai_version: "OpenAI GPT-4o"  # AI版本显示,什么,你说是GPT-4o,没错,我就是挂羊头卖狗肉 [狗头][狗头][狗头]
  # 按钮文本
  buttons:
    - "介绍自己"
    - "来点灵感"
    - "生成AI简介"

deekseek的API可以自己去申请

DeepSeek 开放平台

但是不要直接粘贴进去,否则你的API泄露, 充值的钱钱被低调的黑客偷光狗头狗头狗头

请看作者的紧急处理方式点击这里

我因为暂时不需要这个功能就不用了

⑨ link (友链)

这个其实和刚才的about.yml异曲同工

我们需要创建一个link.yml的文件

在里面写上自己的或者别人的信息,像我这样就行

- name: 胡杨怕火
  link: https://funingna-wakawaka.github.io/
  avatar: https://funingna-wakawaka.github.io/images/0.png
  description: 传递笑容魔法的Ciallo～(∠・ω< )⌒☆

然后在这里

创建一个名为 link 的文件夹

在里面创建一个名为 index.md的文件

并在YAML里写

1
2
3

title: 友链
type: link
layout: link

你们要是嫌麻烦仍然可以使用这个bat脚本

1	cmd /k "cd /d D:\Blog && hexo new page "link"" //把这个路径替换为本地网站资源的文件夹位置,替换完后删除你看到的这句中文,并点击脚本启动

⑩ 插入视频(独创功能)

这里原本的hexo插入视频的方式如果要是支持响应式的话就必须这么写

<div class="video-container">
  <iframe
    src="//player.bilibili.com/player.html?bvid=BVxxxx"
    scrolling="no"
    frameborder="no"
    allowfullscreen>
  </iframe>
</div>

但是这种方式具有非常大的弊端,就是你不可能总是记得这个插入视频的语法,而且每个视频平台的格式并不是太一样

所以我在这里面增加了一个video.js文件

这个可以允许使用这个语法来插入视频

1	{% video VIDEO_URL %} //VIDEO_URL 是视频的https链接

例如下面这样就可以哔哩哔哩的视频

当然这个功能和hexo自带语法格式的并不冲突,你们如果不喜欢这种格式也可以不用,或者和我这种格式混用也是没有问题的

在这个文件里我其实主要支持哔哩哔哩和Youtube,,其他的相当于是支持iframe格式的所以我也加进去了,你们要是有别的需求可以让AI帮你们改一下,不过出了问题不要问我哦,因为我也是让AI写的并不知道有没有Bug

⑪ 压缩图片功能

功能文件在这里

这个需要hexo额外下载一个插件,当然不下载也不会影响正常的使用的哦

1	npm install sharp

然后触发压缩的操作为

① 先清理再生成再生成再部署

② 假如public文件夹已存在,不需要清理,直接只生成一次,再部署

③ 先清理再生成再启动服务器再部署 (推荐)

⚠️但是不要先清理再生成再部署或者直接部署了,这样不会触发压缩程序的

出现类似这样信息就是成功

1 2	🚀 [Image Compressor] Starting image optimization.. 🎉 [Image Compressor] Finished! Processed 619 images. Saved 190.29 MB.

你要是看不出来区别在哪可以对比一下public文件夹和source文件夹的图片大小就知道了

我的一些新的想法

① 桌宠取代看板娘

我其实非常不喜欢那种网页看板娘, 又大又挡视野, 我反而更喜欢满屏幕乱跑的桌宠,放寒假的时候我看看能不能把这个godot制作的爱丽丝小桌宠转换为网页版本的

②网页内嵌小游戏

我希望像itch那样直接在网页里玩游戏,到时候看看能不能做到把一些小游戏嵌入到网页里,这样可以让Blog更有个性

③ 进一步美化图片查看功能(已实现并PR,你们现在可以使用了)

之前给forever218大佬的那个AI改写的图片缩放逻辑电脑端没什么问题,手机却不行,不过现在我已经修好了,但是我觉得暂时不要再PR给大佬了,因为我觉得这个还有很大的改进空间

到时候看看能不能搞成相册那样可以跳转到上一张或下一张还能保存下载到本地而且图片可以自由放大缩小旋转自适应屏幕那种

④ 增加更加丝滑的转场

比如我们切换文章或者其他的功能的时候都会出现这个圈圈一直转,我到时候看看能不能丰富一下这个让转场更好看一点

这个目前想采用的是这种三角玻璃破碎的效果,有点类似于游戏里的转场那种,比如蔚蓝档案的官方前端网页我就觉得挺好看的

⑤ 将传统的Blog和本主题融合

到时候我看看能不能增加一个按钮,点击一下可以切换界面的格式为杂志样式或者那种 fuwari 的样式,相当于是满足不同人群的阅读习惯

⑥ 语言切换功能

这个我目前只是一个想法,就是一键可以切换网页的语言,斌结合浏览器翻译插件,但是目前我对这个hexo的国际化多语言插件 hexo-i18n 了解的不多

所以目前我还需要更多的学习(forever218大佬要是已经做了这个功能就不需要我补充了)

好啦,如果大家还有什么不懂的请在评论区告诉我哦(虽然我可能看不懂狗头狗头狗头)

关于Magzine主题的使用教程和更多想法