主题更新-2.0

主题更新-2.0

发表于 · 分类：开源 · 标签：#博客, #开源, #教程

访问量 0

AI摘要

简介

主题迎来了又一次更新啦，本次更新版本号为2.0，所有代码以上传开源仓库

开源地址： 点我跳转

更！新！主！题！请！备！份！源！文！件！

本次更新属于小更新，更新步骤比较简单，但是更新内容很丰富，首先是更新步骤概览仅需替换主题文件夹-aiovtue整个文件夹为新版本即可，参考下方配置文件新增设置项增加对应配置即可，当然，什么都不改就会和你原来的站点一样，主题更新的时候会尽量保证原有样式，以便有人不喜欢更新部分难以取舍，当然，有需求可以提，雪有时间可能会一起加进去，不过经过本次更新后，主题依旧基本完善，在没有特殊需求的情况系可能需要堆积一些修改才会更新（有修改的话），也欢迎大家提交遇到的问题，当然，能自己动手就更好啦哈哈哈，再和大家讲一讲本次更新内容

  • 新增主页文章列表样式-list模式，包含单双两种样式
  • 优化站点显示样式-grid模式，即网格背景
  • 优化音乐悬浮球收纳吸边
  • 新增twikoo文章访问数量统计功能，在文章详情页顶部
  • 新增友链页面每个分组独立设置显示样式
  • 新增周刊功能支持，需手动开启
  • 修复文章详情页顶部文字和图标对不齐的问题
  • 优化移动端card模式下显示样式
  • 修复文章发布时间计算问题，时区问题，影响不大
  • 优化页脚底部排列顺序
  • 页脚增加分隔线
  • 电脑端增加顶栏自动隐藏功能
  • 电脑端顶栏增加固定（随页面移出屏幕）效果

注意，初次更新直接跳转开源仓库fork部署即可，不需要查看本教程，根据配置文件按需修改即可

开源地址：点我跳转

效果预览

文章列表样式

新增了一个文章列表样式，名为list样式，该样式下，电脑端文章列表会显示的更紧凑，并且可以切换单列或者双列显示，同时新增了随机样式设置，可以在多个列表样式之间切换，每次刷新显示不同的样式（单双列也会随机），随机内容可以自己设置，当然也可以不开启随机，本站目前开启的是list模式单双列随机，两个模式样式略微有些区别，具体看下图 可以自由切换分页模式或者是自动加载的模式，建议选择分页模式，主要是AIOVTUE-雪觉得这俩都挺好看的，很那抉择，就做成随机了，不过开启随机的话，主页文件内容会大大增加，因此，确定自己喜欢什么样子就不要随机了，选一个喜欢的就好（并且开启随机会出现小问题，后续教程文件已移除随机相关配置，但是保留了功能，有兴趣的可以查看前瞻对应部分自行设置，随机功能旨在演示不同样式使用，不建议实装，list模式下两个样式切换除外）

Grid样式

Grid即网格模式，会将全站所有页面（除了头图）的背景变为网格样式，更加有立体感，同时可以通过配置文件自定义网格大小和粗细，不想开启网格模式选择另一个即可，开启后移动端会同步开启，效果一样，具体样式参考下图

友链页

友链页改动不大，原本友链页支持两种友链样式，但是只能整页替换，此次更新增加单个分组设置，也就是说可以在同一个页面设置不同的样式了，方便友链数量过多后的展示效果，具体参考下图

访问量统计

文章新增访问量统计，使用的是twikoo评论自带的统计功能，需要同时配置twikoo和开启此功能才会展示，展示效果如图 同时在这个地方修复了一个bug，原本的时间和其他文字显示不再同一行，有点影响观感，已修复

移动端card样式优化

原本移动端card模式下比较大，导致每次看文章需要下滑很久，但是有想要card模式，觉得可以优化一下高度和布局，下面是最终效果，介意者谨慎更新

周刊功能

由于雪发布了自己的周刊，所以网站也增加了相应功能，一起同步到开源仓库了，不过需要主动开启才行，直接访问是空的（并且没有入口），不过有需要的朋友可以按教程开启，包括首次部署的也需要手动开启，简单介绍一下，周刊功能带来独立的文章列表页面和rss订阅连接，可以单独订阅周刊文章，并且周刊列表样式经过独立设计，专为周刊设计，虽然雪觉得还是有点缺陷，不过也说不上来，不知道怎么改了，先这样吧，毕竟内容才是最重要的

音乐按钮

没什么太大变化，增加了吸附边缘的功能，因为一直显示按钮雪觉得有点碍眼，挡视线了，因此增加吸附，虽然可能直接关掉更合适？并且减少了部分可以配置的选项，只支持放在左下角或右下角，不再支持拖动，并且不支持不吸附，依旧可以关闭音乐功能，谨慎选择更新

页脚

页脚部分各部位排列稍微换了下位置，强迫症是这样的，这个可以自己调，其次在上方增加了一条分割虚线，没什么太大变化，是的

更新教程

下面是本次更新需要的各种教程以及文件的变更细节，如果你是初次部署本项目，本页面教程对您不适用，以下教程仅针对依旧部署过本主题旧版本的用户（版本回退同理，不过回退的时候最好将各项修改一起回退，而不单单是回退主题文件夹），初次部署请跳转部署教程：点我跳转

注意！！！任何更新前请备份原始项目文件以防数据丢失
再确认站点配置没问题之前不要轻易推送部署
再！次！提！醒！备！份！数！据！

更新步骤一，下载开源仓库zip压缩包，不要直接同步修改，删除你原本博客项目（即旧版本项目文件）的主题文件夹，路径为：\themes\aiovtue，删除整个aiovtue文件夹，将下载的开源仓库zip压缩包内的同路径aiovtue文件夹移动到原项目同位置，简言之就是覆盖原本主题文件夹全部内容

更新步骤二，替换完主题文件夹后，需要在配置文件，即hugo.toml文件内增加对应的配置项，其实不增加也问题不大，但是部分功能需要手动开启，所以不添加和没更新区别不大（但是修复了部分bug），如果你看下方教程找不到或者我说的不够明白，请查看开原仓库的配置文件，对比你的配置文件进行配置，仓库的文件我也会进行更新和注释

文章列表样式

下面是对应部分新增代码，包含了原本代码，注意替换的时候不要多替换或者少替换了，一般情况都是该部分所有配置一起替换，注意不要替换到其他部分就好，注意，不在支持懒加载，即自动加载更多的功能，仅分页，谨慎更新

text
# --- 首页公告栏（右侧域名列表）---
  # --- 首页文章列表布局 ---
  # cards：默认卡片列表（含公告栏与随机文章轮播）
  # list：紧凑列表（电脑端单列时左栏站点信息/公告/标签 + 右栏文章；双列时无侧栏；不显示顶部公告栏）
  # timeline：居中时间线，文章左右交替；不显示公告栏与随机文章
  # layout：关闭随机时使用的固定布局；layouts 未设置时的后备
  # layouts：首页布局候选池（cards / list / timeline）（不建议使用）
  # layoutRandom：是否启用随机（仅电脑端；移动端固定使用 layout） （不建议使用）
  # layouts 含 2 项及以上：电脑端在布局变体间随机
  # layouts 仅含 list 时：电脑端在 list 单列/双列间随机
  # layoutRandom = false 时：固定使用 layout 与 desktopListColumns
  # mobileCardsLayout：cards / list 模式下手机端文章列表样式（仅 max-width: 768px 生效）
  # stack — 竖向卡片（cards 模式默认；list 模式下可显式设为 stack 以覆盖默认 list）
  # list  — 列表样式：隐藏公告栏与随机文章
  # single — 单列（默认）
  # double — 双列
  
  
  [params.home]
    layout = 'list'   # （cards，list，timeline）建议不要使用时间线模式，即timeline，不成熟样式
    desktopListColumns = 'single' # （single，double）list模式下单双列样式切换在此配置
    mobileCardsLayout = 'stack'     #移动端样式设置（list、stack）注意桌面端cards和list模式下移动端布局略有区别，具体自行切换查看和体验
    desktopCardsPaging = 'pagination'  # （pagination，loadMore）分页还是懒加载，推荐分页，因为懒加载可能存在问题，毕竟雪常用的是分页
    mobileCardsBatchSize = 10  # 每页文章数，这个和上一个配置都是桌面移动端通用的，只是名字没改而已
    # timelineBatchSize = 10   # 时间线模式：首屏条数及每次滚动加载条数
    
    # 下列配置在list模式下生效，不建议更改
    archiveHeatmapColumns = 13  # 右侧归档热力图：每行列数
    archiveHeatmapRows = 4      # 右侧归档热力图：行数（格子总数 = 列数 × 行数）
    randomSidebarCount = 7      # 右侧随机文章显示篇数，不建议过多
    
    # 下方配置不建议动，过大会影响网页性能
    featuredCount = 4           # list 模式推荐区同时可见卡片数
    featuredPoolCount = 12      # list 模式推荐区候选池（排序后取前 N 篇 SSR，供切换按钮轮换）

背景样式Grid

样式切换在原位置切换即可，但是需要自定义大小和网格粗细的话需要增加下列配置，注意新增的位置，要在空白处单独增加（不要放到某个项内部），建议放在grid切换配置附近以便修改

text
  # grid 全站背景网格（仅 params.hero.style = 'grid' 时生效）
  # size：单元格边长（px）；lineOpacity / lineOpacityDark：线条透明度 0~1，越大越深
  
  [params.hero.grid]
    size = 20   # 网格尺寸
    lineOpacity = 0.1  # 网格线条深浅（0-1）
    lineOpacityDark = 0.1  # 网格线条深浅（0-1）

顶栏自动隐藏

电脑端增加顶栏自动隐藏功能，需要新增相关配置文件并启用,替换整个隐藏顶栏部分配置即可，注意不要把其他部分删掉了哦

说一下这部分顶栏随页面滚出视口,这个功能的意思是顶栏会固定在顶部，滚动的时候会直接滚出页面，和隐藏状态栏互斥，只有关闭自动隐藏才能开启，雪建议使用自动隐藏，因为有时候需要在底部点击顶栏，要滑回顶部的话，累哦~

text
    # 移动端下滑隐藏顶栏（默认首页不生效，设 includeHome = true 则全站含首页生效）
    [params.navbar.mobileCollapse]
      enable = true
      includeHome = false
      scrollThreshold = 5   # 滚动超过该距离后才允许隐藏（px）
      scrollDelta = 10        # 单次滑动超过该值触发隐藏/恢复（px）
      revealMode = 'scrollUp' # 隐藏后如何恢复：top = 回到顶部才显示 | scrollUp = 上划即显示

    # 电脑端下滑隐藏顶栏（min-width: 769px；默认关闭）
    [params.navbar.desktopCollapse]
      enable = true
      includeHome = false
      scrollThreshold = 5
      scrollDelta = 5
      revealMode = 'scrollUp'

    # 顶栏随页面滚出视口（与自动隐藏互斥：对应端开启 collapse 时无效）
    [params.navbar.scrollWithPage]
      enable = false       # true = 内页顶栏随页面滚出视口；false = 全站 fixed 顶栏
      includeHome = false # false = 首页保持 fixed + Hero 全屏；true = 首页也随页滚动（透明顶栏叠层）

音乐播放器

这部分需要替换原本所有相关配置，因为删除了几行配置，因为无效了，即控制拖动的选项，需要删除，注意，api及其下方没有更改，不需要替换，仅方便定位，实际需要改的其实就中间的三行

text
# --- 音乐播放器（APlayer + Meting.js）---
  # enable：是否显示播放器；单页可在 front matter 写 musicPlayer: false 关闭
  
  [params.music]
    enable = true
    position = 'right'        # left | right，按钮默认停靠左下或右下
    
    
    
    # apis：按顺序尝试，前一个不可用时自动切换下一个，默认不需要动
    apis = [
      'https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r',
      'https://api.injahow.cn/meting/?server=:server&type=:type&id=:id',
      'https://meting.qjqq.cn/?server=:server&type=:type&id=:id',
    ]
    server = 'netease'
    type = 'playlist'                             # playlist | song | album | artist
    id = '2580064383'                             # 网易云歌单/歌曲 ID

文章访问统计

此部分仅新增一个配置项，即visitorEnable,找到对应位置增加对应项即可，注意，此功能只有twikoo可开关同时满足是才会生效，这也是我建议使用twikoo的原因，虽然现在完善了waline的使用体验，但是~ 哎呀，雪不用这个嘛~ sorry啦~

text
  # --- Twikoo 评论（仅当 params.comment.provider = twikoo 时生效）---
  # 留空 envId 时评论区显示配置提示，不影响站点其它功能
  # visitorEnable：文章访问量统计（需 provider=twikoo 且已配置 envId）
  # COMMENT_PLACEHOLDER 请在 Twikoo 管理后台「配置」中设置
  [params.twikoo]
    envId = 'https://your-twikoo.com'
    visitorEnable = true

友链样式

友链页面怎加的各组单独设置样式的功能不需要增加配置文件，只需要在友链数据文件，具体路径为\data\links.yaml,在分组部分增加type: simple字段即可，可选simple或者preview，和原配置文件一样，不设置的话会默认显示配置文件配置的样式，数据文件的优先级更高，配置文件仅为默认

text
  - name: 推荐网站
    type: simple
    desc: 这里是最熟悉的小伙伴（位置不限量哦~）
    links:

周刊功能

周刊功能不需要修改配置文件，由于雪有周刊的需要，才新增的此功能，没有需要的用户不需要配置，默认不展示，如果你也打算更新周刊，就跟着一起配置吧，周刊类型和文件一样，只是放在了特定文件夹，路径为：\content\posts\weekly,其实就是在文章页面文件夹新建了一个weekly文件夹

文件夹下需要增加一个名为：·_index.md的文件，注意前方的_也需要，内容填下方内容：

text
---
title: "艾雪周刊"
icon: "ant-design:file-text-filled"
description: "每周精选内容汇总"
---

整个粘贴进去即可，注意保留上下横线，这个时候访问周刊页面-https://your-site/posts/weekly/就可以看到页面样式了，但是还没有文章

新建文章和普通文章新建没有区别，但是属性部分略有区别，这是雪的周刊属性，供大家参考：

text
---
title: 艾雪周刊 V.01—新的尝试
description: 本系列期刊的第一篇文章哦~
date: 2026-07-11T19:00:00
lastmod: 2026-07-11T19:00:00
cover: /img/zk.png
categories: 周刊
issue: 1
tags:
  - 周刊
ai: 艾雪周刊正式创刊，定位为每周更新一次的独立系列，主要记录一周内容、项目分享以及生活随笔，希望借此督促自己长期坚持创作。同时，周刊也拥有专属封面、页面布局和 RSS 等订阅方式，目前仍处于探索阶段，后续会不断完善内容与形式，也欢迎大家提出建议，一起见证它慢慢成长
---

解释一下，这个issue就是第几期周刊，每次都加一即可，涉及到页面文章渲染效果，都一样会出问题

如果需要在顶栏和侧边栏增加周刊开关，需要在配置文件进行配置，下面是示例，也可以自己琢磨（这个不难）,图标颜色配置好了的，直接增加就行，顺便说一嘴，图标本来是没有颜色的，需要在css文件自己配置，所以会导致新增图标入口的图标会是灰色的，这个不做解释，有意可以自行摸索一下（不难哒，就当是雪留的小挑战啵~）

text
  [[params.menu.main]]
    name = '周刊'
    url = '/posts/weekly/'
    icon = 'ant-design:file-text-filled'
    weight = 3