博客搭建 教程 2. hexo主题安知鱼主题设置 小鸡吧 2025-04-27 2025-05-22 文档: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
效果:
[