Hexo搭建博客教程（四）首页配置

Hexo搭建博客教程（四）首页配置

Hexo搭建博客教程（四）首页配置

本教程参考安知鱼的主题

2023-09-01
1387 字 · 11 分钟
Hexo魔改 博客 Hexo

本教程参考安知鱼的主题，详见 文档 | anzhiyu↗

首页顶部

即刻短文

博客根目录下打开 vscode，运行

PLAINTEXT
hexo new page essay

打开 source/essay/index.md 进行修改

PLAINTEXT
---
title: 即刻短文
date: 2023-08-30 22:43:40
comments: true
aside: false
top_img: false
type: essay
---

新建source/_data/essay.yml，输入以下内容

PLAINTEXT
- title: 即刻短文
  subTitle: 分享生活的小确幸
  tips: 使用 即刻短文静态部署版 构建
  buttonText: 关于我
  buttonLink: /about/
  limit: 30
  home_essay: true
  top_background: https://f.pz.al/pzal/2023/08/30/2af54f9b65eb6.jpg
  essay_list:
    - content: “妈妈，有人拍我们！”“摆个 pose 呗。”
      date: 2019/09/28 10:00:00
      image:
        - https://f.pz.al/pzal/2023/08/30/2af54f9b65eb6.jpg
        - https://f.pz.al/pzal/2023/08/30/22ab6011d9d17.jpg
        - https://f.pz.al/pzal/2023/08/30/22ab6011d9d17.jpg
    - content: 大年初一就带爸妈玩紧张刺激的……😂
      date: 2021/02/12 10:00:00
      address: 白石山
      image:
        - https://f.pz.al/pzal/2023/08/30/5371d725f6da9.jpg
        - https://f.pz.al/pzal/2023/08/30/db8f08a17c46e.jpg
        - https://f.pz.al/pzal/2023/08/30/5d007e42e58c3.jpg
        - https://f.pz.al/pzal/2023/08/30/c38342ee97deb.jpg
        - https://f.pz.al/pzal/2023/08/30/5921e42d1d8b8.jpg
        - https://f.pz.al/pzal/2023/08/30/7ad9aebb51767.jpg
        - https://f.pz.al/pzal/2023/08/30/977b0f0406723.jpg
        - https://f.pz.al/pzal/2023/08/30/fcd365a97e40e.jpg
        - https://f.pz.al/pzal/2023/08/30/a3e7123a21ba4.jpg

技能点配置

新建 /source/_data/creativity.yml，输入以下内容

PLAINTEXT
- class_name: 开启创造力
  creativity_list:
    - name: Java
      color: "#fff"
      icon: https://bu.dusays.com/2023/04/09/643293b1184e9.jpg
    - 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: Webpack
      color: "#2e3a41"
      icon: https://bu.dusays.com/2023/04/09/643293b68026c.png
    - name: Pinia
      color: "#fff"
      icon: https://npm.elemecdn.com/anzhiyu-blog@2.0.8/img/svg/pinia-logo.svg
    - name: Python
      color: "#fff"
      icon: https://bu.dusays.com/2023/04/09/643293b1230f7.png
    - name: Vite
      color: "#937df7"
      icon: https://npm.elemecdn.com/anzhiyu-blog@2.0.8/img/svg/vite-logo.svg
    - name: Flutter
      color: "#4499e4"
      icon: https://bu.dusays.com/2023/04/09/643293b1055c2.png
    - name: Vue
      color: "#b8f0ae"
      icon: https://bu.dusays.com/2023/04/09/643293b6788bd.png
    - name: React
      color: "#222"
      icon: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K
    - name: CSS3
      color: "#2c51db"
      icon: https://bu.dusays.com/2022/12/15/639aa3a5c251e.png
    - name: JS
      color: "#f7cb4f"
      icon: https://bu.dusays.com/2023/04/09/643293b121f02.png
    - name: HTML
      color: "#e9572b"
      icon: https://bu.dusays.com/2022/12/15/639aa3a5c241c.png
    - name: Git
      color: "#df5b40"
      icon: https://bu.dusays.com/2023/04/09/643293b10ccdd.webp
    - name: Apifox
      color: "#e65164"
      icon: https://bu.dusays.com/2022/11/19/6378d6458c6b6.png

这个时候，可以看到 首页顶部 和 关于页面 都已经有技能点的轮播了。

轮播图文字

修改根目录下 _config.anzhiyu.yml 的 home_top

PLAINTEXT
home_top:
  enable: true # 开关
  timemode: date #date/updated
  title: 软件|工具|效率|分享
  subTitle: 系统·高效·实用
  siteText: zayck.gitee.io

分类导航

修改根目录下 _config.anzhiyu.yml 的 banner

PLAINTEXT
  category:
    - name: 博客教程
      path: /categories/博客教程/
      shadow: var(--anzhiyu-shadow-blue)
      class: blue
      icon: anzhiyu-icon-dove
    - name: 在线工具
      path: /categories/tlink/
      shadow: var(--anzhiyu-shadow-red)
      class: red
      icon: anzhiyu-icon-fire
    - name: 生活
      path: /categories/生活日常/
      shadow: var(--anzhiyu-shadow-green)
      class: green
      icon: anzhiyu-icon-book

头图推荐

修改根目录下 _config.anzhiyu.yml 的 banner

PLAINTEXT
  banner:
    tips:
    title:
    image: https://f.pz.al/pzal/2023/08/28/350ad4f5b364a.jpg
    link: /about/

首页右侧

作者卡片

作者头像

修改根目录下 _config.anzhiyu.yml 的 Avatar

PLAINTEXT
# Avatar (头像)
avatar:
  img: https://f.pz.al/pzal/2023/08/28/9abb2f3a51d2f.png
  effect: false

作者状态

修改根目录下 _config.anzhiyu.yml 的 author_status

PLAINTEXT
# 作者卡片 状态
author_status:
  enable: true
  status: 😁

社交图标

修改根目录下 _config.anzhiyu.yml 的 Avatar

PLAINTEXT
social:
  github: https://github.com/zayck || anzhiyu-icon-github
  BiliBili: https://space.bilibili.com/341981702 || anzhiyu-icon-bilibili
  Tiktok: https://v.douyin.com/iJV4f4AF || anzhiyu-icon-tiktok

微信卡片

修改根目录下 _config.anzhiyu.yml 的 card_weixin

PLAINTEXT
  card_weixin:
    enable: true
    face: https://bu.dusays.com/2023/01/13/63c02edf44033.png
    backFace: https://f.pz.al/pzal/2023/08/29/7b1cd8856f9f1.png

数据卡片

访问人数

修改根目录下 _config.anzhiyu.yml 的 busuanzi

PLAINTEXT
# 访问人数
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

运行天数

修改根目录下 _config.anzhiyu.yml 的 runtimeshow

PLAINTEXT
runtimeshow:
  enable: true
  publish_date: 12/31/2022 00:00:00

字数统计

💻安装插件

PLAINTEXT
npm install hexo-wordcount --save
或者
yarn add hexo-wordcount

修改根目录下 _config.anzhiyu.yml 的 wordcount

PLAINTEXT
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

首页左下角

Live 2D

在页面的下方增加一个看板娘，会跟随鼠标变化。有多种样式可选，可以调整大小和位置。

PLAINTEXT
# 安装live2d  
npm install --save hexo-helper-live2d
PLAINTEXT
# 安装模型  
npm install --save live2d-widget-model-koharu

修改根目录下 _config.yml 的 live2d

PLAINTEXT
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true #开关插件版看板娘
  scriptFrom: local # 默认
  # scriptFrom: https://cdn.cbd.int/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-hijiki # npm-module package name
  # use: https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json # 你的自定义 url
  display:
    position: left #控制看板娘位置
    width: 150 #控制看板娘大小
    height: 300 #控制看板娘大小
  mobile:
    show: false # 手机中是否展示

音乐胶囊

修改根目录下 _config.anzhiyu.yml 的 nav_music

PLAINTEXT
nav_music:
  enable: true
  console_widescreen_music: false # 宽屏状态控制台显示音乐而不是标签 enable为true 控制台依然会显示
  id: 9002792233
  server: tencent
  all_playlist: /music/?id=9002792233&server=tencent

首页底部

社交图标

修改根目录下 _config.anzhiyu.yml 的 socialBar

PLAINTEXT
  socialBar:
    enable: true
    centerImg:
    left:
      - title: email
        link: mailto:13610147631@126.com
        icon: anzhiyu-icon-envelope
      - title: 微博
        link: https://weibo.com/u/2675532694
        icon: anzhiyu-icon-weibo
      - title: 知乎
        link: https://www.zhihu.com/people/shao-yang-shou-ji/posts
        icon: icon-zhihu1
      - title: RSS
        link: atom.xml
        icon: anzhiyu-icon-rss
    right:
      - title: Github
        link: https://github.com/zayck
        icon: anzhiyu-icon-github
      - title: Bilibili
        link: https://space.bilibili.com/341981702
        icon: anzhiyu-icon-bilibili
      - title: 抖音
        link: https://v.douyin.com/iJV4f4AF/
        icon: anzhiyu-icon-tiktok
      - title: CC
        link: /copyright
        icon: anzhiyu-icon-copyright-line

导航列表

修改根目录下 _config.anzhiyu.yml 的 footer 下属 list

PLAINTEXT
  list:
    enable: true
    # randomFriends: 3
    project:
      - title: 少阳手记
        links:
          - title: 玩易
            link: /tags/易经/
          - title: 心猿
            link: /tags/启示录/
          - title: 意马
            link: /tags/思维/           
      - title: 少阳研究所
        links:
          - title: 效率软件
            link: /docs/
          - title: 神级网站
            link: https://github.com/anzhiyu-c/hexo-theme-anzhiyu
          - title: 浏览器插件
            link: /update/
      - title: 教程
        links:
          - title: Hexo魔改
            link: /categories/Hexo魔改/
          - title: Obsidian
            link: /categories/Obsidian/
      - title: 导航
        links:
          - title: 即刻短文
            link: /essay/
          - title: 文章总览
            link: /archives/
          # - title: 在线工具
          #   link: /tlink/
          - title: 网站源码
            link: https://github.com/zayck
      - title: 协议
        links:
          - title: 隐私协议
            link: /privacy/
          - title: Cookies
            link: /cookies/
          - title: 版权协议
            link: /copyright/

徽标设置

修改根目录下 _config.anzhiyu.yml 的 bdageitem

PLAINTEXT
  bdageitem:
    enable: true
    list:
      - link: https://hexo.io/ #徽标指向网站链接
        shields: https://npm.elemecdn.com/anzhiyu-blog@2.1.5/img/badge/Frame-Hexo.svg #徽标API
        message: 博客框架为Hexo_v5.4.0 #徽标提示语
      - link: https://blog.anheyu.com/
        shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
        message: 本站使用Butterfly主题
      - link: https://www.jsdelivr.com/
        shields: https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr
        message: 本站使用JsDelivr为静态资源提供CDN加速
      - link: https://github.com/
        shields: https://npm.elemecdn.com/anzhiyu-blog@2.1.5/img/badge/Source-Github.svg
        message: 本站项目由Github托管
      - link: http://creativecommons.org/licenses/by-nc-sa/4.0/
        shields: https://npm.elemecdn.com/anzhiyu-blog@2.2.0/img/badge/Copyright-BY-NC-SA.svg
        message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可

页脚

修改根目录下 _config.anzhiyu.yml 的 footer 和 footerBar

PLAINTEXT
footer:
  owner:
    enable: true
    since: 2022
PLAINTEXT
  footerBar:
    enable: true
    authorLink: /
    cc: 
      enable: true
      link: /copyright
    linkList:
      - link: /about/
        text: 关于本站
Thanks for reading!

Hexo搭建博客教程（四）首页配置

2023-09-01
1387 字 · 11 分钟
Hexo魔改 博客 Hexo
© Zayck | CC BY-NC-SA 4.0

分享这篇博客

微博 QQ
微信分享二维码

手机微信扫描二维码，点击右上角···按钮分享

已复制链接

评论

目录