博客搭建 教程 2. hexo主题安知鱼主题设置 小鸡吧 2025-04-27 2025-08-29 文档:https://docs.anheyu.com/initall.html 
视频教程:https://www.bilibili.com/video/BV1Rs4y127hu/ 
安知鱼主题 需要使用npm安装主题
1 npm i hexo-theme-anzhiyu 
需要使用npm安装插件,配置好后使用hexo s查看效果
打开 Hexo  根目录下的 config.yml, 找到以下配置项,把主题改为anzhiyu
1 2 3 4 # Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: anzhiyu 
1 npm install hexo-renderer-pug hexo-renderer-stylus --save 
安知鱼主题设置 一、样式设置 1. nav 相关设置 
修改 _config.anzhiyu.yml 中的代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 nav:   enable:  true     travelling:  false    clock:  false    menu:      -  title:  网页        item:          -  name:  GitHub            link:  https://github.com/pythonahy6            icon:  https://pic.imgdb.cn/item/67574d30d0e0a243d4e0bd1a.jpg          -  name:  AI            link:  https://free.share-ai.top/            icon:  https://pic.imgdb.cn/item/6757f02ed0e0a243d4e0fc7c.png      -  title:  项目        item:          -  name:  图床            link:  https://tgstate.ikun123.com/            icon:  https://picgo-1.pages.dev//favicon.ico  
2. 博客名称设置 修改 _config.yml 中tltle 和 subtitle 顺便把 language 为中文 zh-CN
1 2 3 4 5 6 7 8 title:  观形物语 subtitle:  欢迎来到我的博客,希望你在这里能有收获 description:  '' keywords: author:  Pythonahy language:  zh-CN timezone:  '' 
3. 菜单栏设置 3.1 文章 1 2 3 4 5 menu:    文章:       文章:  /archives/  ||  anzhiyu-icon-box-archive       分类:  /categories/  ||  anzhiyu-icon-shapes       标签:  /tags/  ||  anzhiyu-icon-tags  
在 Hexo 博客根目录下打开终端,输入:
1 hexo new page categories 
找到 source/categories/index.md 这个文件,修改添加 type: "categories":
1 2 3 4 5 6 7 8 --- title:  categories top_img:  false  date:  2024-12-10 16:26:39 type:  "categories"  comments:  false  aside:  false  --- 
在 Hexo 博客根目录下打开终端,输入下面的命令生成标签页:
找到 source/tags/index.md 这个文件,修改添加 type: "tags":
1 2 3 4 5 6 7 8 --- title:  tags date:  2024-12-10 16:34:02 type:  "tags" comments:  false aside:  false top_img:  false --- 
3.2 友链 _config.anzhiyu.yml,只设置友人帐:
1 2 3 4 5 6 7 8 9 10 menu:    文章:       文章:  /archives/  ||  anzhiyu-icon-box-archive       分类:  /categories/  ||  anzhiyu-icon-shapes       标签:  /tags/  ||  anzhiyu-icon-tags     友链:       友人帐:  /link/  ||  anzhiyu-icon-link              
在 Hexo 博客根目录下打开终端,输入:
找到 source/link/index.md 这个文件:
1 2 3 4 5 6 7 8 --- title:  link top_img:  false  date:  2024-12-10 16:45:58 type:  "link" comments:  false aside:  false --- 
新建文件 source/_data/link.yml,如果没有 _data 文件夹,请自己新建。在 source/_data/link.yml 中输入:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 -  class_name:  框架   flink_style:  flexcard    hundredSuffix:  ""    link_list:      -  name:  anzhiyu主题        link:  https://blog.anheyu.com/        avatar:  https://npm.elemecdn.com/anzhiyu-blog-static@1.0.4/img/avatar.jpg        descr:  生活明朗,万物可爱        siteshot:  https://npm.elemecdn.com/anzhiyu-theme-static@1.1.6/img/blog.anheyu.com.jpg  -  class_name:  推荐博客   flink_style:  telescopic    hundredSuffix:  ""    link_list:      -  name:  亲自巡山的大王        link:  https://dodopoi.github.io/        avatar:  https://avatars.githubusercontent.com/u/118941122?v=4        descr:  夕晴照雪霁无瑕        siteshot:  https://npm.elemecdn.com/anzhiyu-theme-static@1.1.6/img/blog.anheyu.com.jpg        color:  vip        tag:  技术  
4. 搜索设置 安装插件 hexo-generator-search ,并根据它的文档进行配置:
1 npm install hexo-generator-search --save 
打开 _config.anzhiyu.yml,搜索 Local search,把 enable 的值改为 true。
设置主题配置文件:
1 2 3 4 local_search:   enable:  true    preload:  false    CDN:  
参数 
解释 
 
 
enable是否开启本地搜索 
 
preload预加载,开启后,进入网页后会自动加载搜索文件。关闭时,只有点击搜索按钮后,才会加载搜索文件 
 
CDN搜索文件的 CDN 地址(默认使用的本地链接) 
 
5. 首页顶部设置 
1 2 3 4 5 6 7 8 9 10 11 peoplecanvas:   enable:  false    img:  https://upload-bbs.miyoushe.com/upload/2023/09/03/125766904/ee23df8517f3c3e3efc4145658269c06_5714860933110284659.png  home_top:   enable:  true     timemode:  date     title:  在纷繁中见本质    subTitle:  于平凡处觅真知    siteText:  designai.us.kg  
创建 /source/_data/creativity.yml,输入以下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 -  class_name:  开启创造力   creativity_list:      -  name:  Docker        color:  "#57b6e6"        icon:  https://bu.dusays.com/2023/04/09/643293b0f0abe.png      -  name:  Photoshop        color:  "#4082c3"        icon:  https://bu.dusays.com/2022/12/15/639aa3a5c240e.png      -  name:  Node        color:  "#333"        icon:  https://npm.elemecdn.com/anzhiyu-blog@2.1.1/img/svg/node-logo.svg      -  name:  Python        color:  "#fff"        icon:  https://bu.dusays.com/2023/04/09/643293b1230f7.png      -  name:  JS        color:  "#f7cb4f"        icon:  https://bu.dusays.com/2023/04/09/643293b121f02.png      -  name:  Git        color:  "#df5b40"        icon:  https://bu.dusays.com/2023/04/09/643293b10ccdd.webp  
6. 首页顶部设置 
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 home_top:   enable:  true     timemode:  date     title:  在纷繁中见本质    subTitle:  于平凡处觅真知    siteText:  designai.us.kg    category:          -  name:  设计        path:  /design/        shadow:  var(--anzhiyu-shadow-blue)        class:  blue        icon:  anzhiyu-icon-dove      -  name:  AI        path:  //        shadow:  var(--anzhiyu-shadow-red)        class:  green        icon:  anzhiyu-icon-fire      -  name:  Python        path:  /Python/        shadow:  var(--anzhiyu-shadow-green)        class:  red        icon:  anzhiyu-icon-book  
7. 非轮播显示 
配置 _config.anzhiyu.yml:
1 2 3 4 5 6 7 8 9 10   swiper:      enable:  false      swiper_css:  https://npm.elemecdn.com/anzhiyu-theme-static@1.0.0/swiper/swiper.min.css       swiper_js:  https://npm.elemecdn.com/anzhiyu-theme-static@1.0.0/swiper/swiper.min.js     banner:      tips:  xxx      title:  xxx      image:  https://xxx.jpg      link:  https://hxxx.com  tips、title、image、link  自己填 
8. 侧边栏设置 
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 aside:   enable:  true    hide:  false    button:  true    mobile:  true     position:  right     display:       archive:  true      tag:  true      category:  true    card_author:      enable:  true      description:  xxx       name_link:  /  
description 这里把 xxx 换成自己要说的话
社交链接:
1 2 3 4 5 6 7 social:    Github:  https://github.com/dodopoi  ||  anzhiyu-icon-github     BiliBili:  https://space.bilibili.com/37696304  ||  anzhiyu-icon-bilibili  
侧边个人资料图像:
1 2 3 4 5 6 7 8 9 10 favicon:  /favicon.ico avatar:   img:  https://pic.imgdb.cn/item/675827bed0e0a243d4e1780a.jpg    effect:  false  
二、其它设置 1. 配置文章模板 在 /scaffolds 目录下有几个模板文件,其中:
post.md:新建文章模板page.md:新建标签页模板 
1.1 post.md 模板,仅供参考 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 --- title:  {{ title  }} date:  {{ date  }} updated:  tags:  categories:  cover:  https://pic.imgdb.cn/item/675827bed0e0a243d4e1780a.jpg  password:  top:  keywords:  description:  top_img:  comments:  toc:  toc_number:  toc_style_simple:  copyright:  copyright_author:  copyright_author_href:  copyright_url:  copyright_info:  mathjax:  katex:  aplayer:  highlight_shrink:  aside:  swiper_index:  10  top_group_index:  10  ai:  background:  "#fff"  --- <div  class="video-container"> [up主专用,视频内嵌代码贴在这 ] </div> <style> .video-container  {    position:  relative;      width:  100 %;      padding-top:  56.25 %;  /*  16 :9  aspect  ratio  (height/width  =  9 /16  *  100 %)  */  } .video-container  iframe  {    position:  absolute;      top:  0 ;      left:  0 ;      width:  100 %;      height:  100 %;  } </style> 
1.2 page.md 模板,仅供参考 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 --- title:  {{ title  }} date:  {{ date  }} type:  updated:  comments:  description:  keywords:  top_img:  https://img.090227.xyz/file/ae62475a131f3734a201c.png  mathjax:  katex:  aside:  aplayer:  highlight_shrink:  top_single_background:  --- 
2. 文章设置置顶 配置置顶参数 top:
如果存在多个置顶文章,top 后的参数越大,越靠前:
3. 给文章设定密码 先安装 hexo-blog-encrypt:
1 npm install --save hexo-blog-encrypt 
不需要将 password: 密码 添加到文章开头,在前面的自定义 post.md :新建文章模板中已经内置了,在需要的时候,设置 password 的值就行。
4. 字数统计 先安装插件:
1 npm install hexo-wordcount --save 
将下面的 enable 修改为 true:
1 2 3 4 5 6 7 wordcount:   enable:  true    post_wordcount:  true    min2read:  true    total_wordcount:  true  
地点显示日本修改 location 即可,把 expand 设置为 true,会展开全部目录。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 toc:   post:  true    page:  false    number:  true    expand:  true      style_simple:  false   post_copyright:   enable:  true    decode:  false    author_href:    location:  日本    license:  CC  BY-NC-SA  4.0    license_url:  https://creativecommons.org/licenses/by-nc-sa/4.0/    avatarSinks:  false     copyright_author_img_back:    copyright_author_img_front:    copyright_author_link:  /  
1 npm install hexo-generator-feed --save 
在 _config.yml 文件中配置:
1 2 3 4 5 6 7 8 9 10 11 12 title:  Pythonahy subtitle:  ‘欢迎来到我的博客,希望你在这里能有收获' description:  '' keywords: author:  Pythonahy language:  zh-CN timezone:  '' url:  https://xxx  
再配置 _config.anzhiyu.yml:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 social:   rss:  https://designai.us.kg/atom.xml  ||  anzhiyu-icon-rss        feed:   enable:  true    type:  atom    path:  atom.xml    limit:  20    hub:    content:  true      content_limit:  140    content_limit_delim:  ' '    order_by:  -date    icon:  icon.png    autodiscovery:  true  
6. 博客永久链接设置 安装 hexo-abbrlink 插件:
1 npm install hexo-abbrlink --save 
配置 _config.yml 中的内容:
1 2 3 4 5 6 7 8 9 10 11 url:  https://designai.us.kg  permalink:  posts/:abbrlink.html abbrlink:   alg:  crc32     rep:  hex   permalink_defaults: pretty_urls:   trailing_index:  false     trailing_html:  true   
7. 添加音乐 修改 _config.anzhiyu.yml:其它默认,修改 id 为自己网易音乐的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 nav_music:   enable:  true    console_widescreen_music:  false     id:  517301810    theme:  '#42b983'    server:  netease    fixed:  true           autoplay:  true       loop:  'all'           order:  'random'       preload:  'auto'       volume:  0.7           listFolded:  true      hideLrc:  true         listMaxHeight:  "525px"   music_page_default:  nav_music 
8. 添加豆瓣看书电影到博客 
1. 先安装插件 hexo-douban 1 npm install hexo-douban --save 
2. 配置文件 打开 _config.yml 只要修改 id,其它默认:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 douban:   id:  285338112    builtin:  true    dynamic:  true    item_per_page:  10    meta_max_line:  4    customize_layout:  page    swup:  false    book:      path:  books/index.html      title:  "无为书斋"      quote:  "书在几上,道在心中"      actions:        -  do        -  wish        -  collect      option:    movie:      path:  movies/index.html      title:  "坐忘影室"      quote:  "万象皆为虚幻,悟道方见真常"      actions:        -  do        -  wish        -  collect      option:                                                        
3. 生成豆瓣页面 
不知道为什么,获取的电影太慢
4. 配置生成目录 打开 _config.anzhiyu.yml,会在主题文件夹下的 public 目录生成一个 books 和 movies 文件夹。
1 2 3 4 5 6 7 8 9 10 11 12 13 menu:    文章:       文章:  /archives/  ||  anzhiyu-icon-box-archive       分类:  /categories/  ||  anzhiyu-icon-shapes       标签:  /tags/  ||  anzhiyu-icon-tags     友链:       友人帐:  /link/  ||  anzhiyu-icon-link                 书影:      阅读:  /books/  ||  anzhiyu-icon-book-open      电影:  /movies/  ||  anzhiyu-icon-play  
上面的自定义图标:
1 2 阅读: /books/  || anzhiyu-icon-book-open  电影: /movies/  || anzhiyu-icon-play 
安知鱼支持修改图标,打开 anzhiyu 主题图标 ,使用 anzhiyu-icon- + 图标的名字,比如 anzhiyu-icon-play。
9. 添加烟火特效 enable 设置为 true 即可:
1 2 3 4 fireworks:   enable:  true    zIndex:  9999     mobile:  false  
10. 配置 Twikoo 评论系统 
进邮箱验证激活账号。
填写问卷调查。
选择免费套餐,云服务商选择 aws,地区选择 N. Virginia (us-east-1)。
接下来会得到一个用户名和密码,先复制一份保存,等下会用到。
在 Database Access 页面点击 Add New Database User 创建数据库用户。
Authentication Method 选 Password,在 Password Authentication 下设置数据库用户名,点击 Autogenerate Secure Password 生成密码并复制密码。
选择 Atlas Admin,最后点击 Add User。
在 Network Access 页面点击 Add IP Address,点击 ALLOW ACCESS FROM ANYWHERE,点击 Confirm。
在 Database 页面点击 Connect,连接方式选择 Drivers。 
 
复制如下数据库连接字符串,将连接字符串中的 <username>:<password> 修改为刚刚创建的数据库 用户名:密码,<> 不要保留。
[
2. Vercel 部署 打开 Vercel  注册账号,用 GitHub 登录。
点击 一键部署 ,填入项目名字,点击 Create。
点击 Continue to Dashboard。
点击设置。
点击 Domains,设置自定义域名。
不绑定自己的域名,会出现评论不显示,或者用不了的情况,所以需要绑定我们自己的域名。
 
输入自己的域名,复制下面的信息。
打开 Cloudflare  选择自己的服务器,点击,dns,记录。
在 Domains 中,出现打勾就行。
配置环境变量并调试配置,找到 Environment Variables,添加环境变量 MONGODB_URI,值为前面记录的数据库连接字符串。
找到 Deployment Protection,设置 Vercel Authentication 为 Disabled,然后点击 Save。
找到 Function,将 Function Region 修改为你需要的地区。
重新部署应用,点击 Deployments,点击三个点,点击 Redeploy。
勾选 Use existing Build Cache 然后点击下面的 Redeploy。
出现这个表示成功了。
接下来就是配置 _config.anzhiyu.yml,搜索 Twikoo:
1 2 3 4 5 6 7 8 9 10 comments:         use:  Twikoo    text:  true           lazyload:  true    count:  false     card_post_count:  false   
修改:use: Twikoo,lazyload: true。
再修改下面这里,重新部署即可:
1 2 3 4 5 6 7 twikoo:   envId:  https:xxxxxx/      region:    visitor:  false    option:  
运行命令:
1 hexo clean; hexo generate; hexo deploy 
效果:
[