2025

04-10

加载动画

修改 butterfly/layout/includes/loading/fullpage-loading.pug

script.
  const preloader = {
    endLoading: () => {
      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    },
    initLoading: () => {
      document.body.style.overflow = '';
      document.getElementById('loading-box').classList.remove("loaded")

    }
  }
  window.addEventListener('load',()=> { preloader.endLoading() })

  if (!{theme.pjax && theme.pjax.enable}) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }

修改 butterfly/layout/includes/loading/index.pug

if theme.preloader.source === 1
  include ./fullpage-loading.pug
else if theme.preloader.source === 2
  include ./pace.pug
else
  include ./fullpage-loading.pug
  include ./pace.pug

修改 butterfly/source/css/_layout/loading.styl

if hexo-config('preloader')
  .loading-bg
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    background: var(--anzhiyu-card-bg);
    z-index: 1001;
    opacity: 1;
    transition: .3s;

  #loading-box
    .loading-img
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: auto;
      border: 4px solid #f0f0f2;
      animation-duration: .3s;
      animation-name: loadingAction;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    &.loaded
      .loading-bg
        opacity: 0;
        z-index: -1000;

  @keyframes loadingAction
    0% {
        opacity: 1;
    }

    100% {
        opacity: .4;
    }

修改 css/style.css

.loading-img {
  background: url(https://thirdqq.qlogo.cn/g?b=sdk&nk=407831426&s=140) no-repeat center center;
  background-size: cover;
}

修改 butterfly/_config.yml

preloader:
  enable: true
  source: 1
  pace_css_url:

参考: Heo同款loading动画 - 安知鱼

04-10

页脚

安装插件 hexo-butterfly-footer-marcus

1 2	npm install hexo-butterfly-footer-marcus --save npm i yamljs --save

添加 _config.yml

#hexo-butterfly-footer-marcus
#https://blog.marcus233.top/p/footer.html
footer_beautify:
  enable: true
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  layout: # 挂载容器类型
      type: id
      name: footer
      index: 1
  footer_icons:
    enable: true
    left:
      - icon: fa-solid fa-compass
        link: https://mdrzf.online/
        desrc: 个人主页
        class: out
    right:
      - icon: fa-brands fa-github
        link: https://github.com/Marcusyyds
        desrc: Github主页
        class: out
      - icon: fa-brands fa-bilibili
        link: https://space.bilibili.com/1024450661
        desrc: 哔哩哔哩主页
        class: out
  footer_logo:
    enable: true
    url: https://img01.anheyu.com/useruploads/8/2022/12/15/639adf5b8806a.png
  footer_group:
    enable: true
    footer_group_link:
      - group_title: 直达
        footer_links: 
          - text: 友链
            link: /fcircle/
            class: in
  footer_friend_links:
    enable: true
    number: 5
  footer_bottom:
    copyright:
      enable: true
      author: 自然有梦
      link: https://mdrzf.online/
      time: 2022
    left:
      - text: GitHub
        desrc: GitHub 提供源码托管
        link: https://github.com/mmdreamm/mdream.github.io
    right:
      - text: Hexo
        desrc: 框架
        link: https://hexo.io/zh-cn/
      - text: Butterfly
        desrc: 主题
        link: https://butterfly.js.org/
    runtime:
      enable: true
      time: 2022-05-13 17:28:23
  footer_css: https://cdn1.tianli0.top/npm/hexo-butterfly-footer-marcus/lib/footer.min.css
  footer_js: https://cdn1.tianli0.top/npm/hexo-butterfly-footer-marcus/lib/footer.min.js

04-08

一键部署

安装插件 hexo-deployer-git

1	npm install hexo-deployer-git --save

修改 _config.yml

deploy:
  type: git
  repo: https://github.com/mmdreamm/mdream.github.io.git
  branch: main

04-08

永久链接

安装插件 hexo-abbrlink

1	npm install hexo-abbrlink --save

修改 _config.yml

1	permalink: posts/:abbrlink/

04-08

豆瓣

安装插件 hexo-douban

1	npm install hexo-douban --save

添加 _config.yml

douban:
  id: 227562338
  movie:
    title: "影视"

04-07

音乐播放器

安装插件 hexo-tag-aplayer

1	npm install hexo-tag-aplayer --save

修改 butterfly\_config.yml

1
2
3

aplayerInject:
  enable: true
  per_page: true

魔改参考：butterfly魔改aplayer音乐 - 安知鱼

04-07

修改 butterfly\_config.yml

1 2	twikoo: envId: https://mdrea.netlify.app

04-03

安装 Butterfly

1	npm install hexo-theme-butterfly

修改 butterfly\_config.yml

# --------------------------------------
# Hexo Butterfly 主题配置
# 如有问题，请参考官方文档
# 中文: https://butterfly.js.org/
# English: https://butterfly.js.org/en/
# --------------------------------------

# --------------------------------------
# 导航设置
# --------------------------------------

nav:
  # 导航栏 Logo 图片
  logo:
  # 是否显示标题
  display_title: true
  # 是否固定导航栏
  fixed: false

menu:
  # 首页: / || fas fa-home
  # 列表||fas fa-list:
    # 音乐: /music/ || fas fa-music
   电影: /movies/ || fas fa-video
   友链: /link/ || fas fa-link

# --------------------------------------
# 代码块设置
# --------------------------------------

code_blocks:
  # 代码块主题: darker / pale night / light / ocean / false
  theme: light
  # 是否使用 Mac 风格
  macStyle: true
  # 代码块高度限制（单位: px）
  height_limit: false
  # 是否自动换行
  word_wrap: false

  # 工具栏
  # 是否显示复制按钮
  copy: true
  # 是否显示语言标签
  language: true
  # true: 收缩代码块 | false: 展开代码块 | none: 展开代码块并隐藏按钮
  shrink: false
  # 是否显示全屏显示代码块按钮
  fullpage: false

# 社交媒体链接
# 格式:
#   icon: 链接 || 描述 || 颜色
social:
   fab fa-github: https://github.com/mmdreamm || Github || '#24292e'
   fab fa-bilibili: https://space.bilibili.com/220072031 || 哔哩哔哩|| '#24292e'
   fab fa-tiktok: https://v.douyin.com/6WT6Nv5FFMo || 抖音 || '#24292e'

# --------------------------------------
# 图片设置
# --------------------------------------

# 网站的 favicon 图标
favicon: /img/favicon.png

# 头像设置
avatar:
  # 头像图片链接
  img: https://thirdqq.qlogo.cn/g?b=sdk&nk=407831426&s=140
  # 是否启用头像效果
  effect: false

# 禁用所有横幅图片
disable_top_img: false

# 如果页面未设置横幅，则显示默认的横幅图片
default_top_img:

# 主页的横幅图片
index_img:

# 归档页的横幅图片
archive_img:

# 注意: 是标签页（单个标签），不是标签页面（所有标签）
tag_img:

# 标签页的横幅图片，可以为每个标签设置横幅图片
# 格式:
#  - 标签名: 图片链接
tag_per_img:

# 注意: 是分类页（单个分类），不是分类页面（所有分类）
category_img:

# 分类页的横幅图片，可以为每个分类设置横幅图片
# 格式:
#  - 分类名: 图片链接
category_per_img:

# 页脚的背景图片
footer_img: false

# 网站背景
# 可以设置为颜色或图片
# 图片格式: url(http://xxxxxx.com/xxx.jpg)
background:

# 封面设置
cover:
  # Disable the cover or not
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 主页封面的位置
  # 选择: left/right/both
  position: both
  # 当未设置封面时，显示默认封面
  default_cover:
    # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

# 替换损坏的图片
error_img:
  # 友链页面的错误图片
  flink: /img/friend_404.gif
  # 文章页面的错误图片
  post_page: /img/404.jpg

# 简单的 404 页面
error_404:
  # 是否启用 404 页面
  enable: false
  # 404 页面的副标题
  subtitle: 'Page Not Found'
  # 404 页面的卡片背景图片
  background: /img/error-page.png

# 文章元数据设置
post_meta:
  # 主页页面
  page:
    # 日期类型: created / updated / both
    date_type: created
    # 日期格式: date / relative
    date_format: date
    # 是否显示分类
    categories: true
    # 是否显示标签
    tags: false
    # 是否显示文字标签
    label: true
  # 文章页面
  post:
    # 元数据位置: left / center
    position: left
    # 日期类型: created / updated / both
    date_type: both
    # 日期格式: date / relative
    date_format: date
    # 是否显示分类
    categories: true
    # 是否显示标签
    tags: true
    # 是否显示文字标签
    label: true

# --------------------------------------
# 首页设置
# --------------------------------------

# 首页头图的设置
# 默认: 头图全屏，站点信息在中间
# 站点信息的位置，例如: 300px/300em/300rem/10%
index_site_info_top:
# 头图的高度，例如: 300px/300em/300rem
index_top_img_height:

# 首页的副标题设置
subtitle:
  # 是否启用副标题
  enable: false
  # 是否启用打字机效果
  effect: true
  # 自定义 typed.js
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
  # 来源 - 调用第三方服务 API（仅限中文）
  # 它将首先显示来源，然后显示副标题内容
  # 选择: false/1/2/3
  # false - 禁用此功能
  # 1 - hitokoto.cn
  # 2 - yijuzhan.com
  # 3 - jinrishici.com
  source: false
  # 如果关闭打字机效果，副标题将仅显示 sub 的第一行内容
  sub:

# 首页文章布局
# 1: Cover on the left, info on the right
# 2: Cover on the right, info on the left
# 3: Cover and info alternate between left and right
# 4: Cover on top, info on the bottom
# 5: Info displayed on the cover
# 6: Masonry layout - Cover on top, info on the bottom
# 7: Masonry layout - Info displayed on the cover
index_layout: 3

# 在首页显示文章简介
# 1: 描述
# 2: 两者（如果存在描述，将显示描述，否则显示自动摘要）
# 3: 自动摘要（默认）
# false: 不显示文章简介
index_post_content:
  method: 3
  # 如果设置 method 为 2 或 3，需要配置长度
  length: 500

# --------------------------------------
# 文章设置
# --------------------------------------

toc:
  # 是否在文章中显示目录
  post: true
  # 是否在页面中显示目录
  page: false
  # 是否显示目录编号
  number: true
  # 是否默认展开目录
  expand: false
  # 是否使用简洁风格（仅适用于文章）
  style_simple: false
  # 是否显示滚动百分比
  scroll_percent: true

post_copyright:
  # 是否启用版权声明
  enable: true
  # 是否进行文章 URL 解码
  decode: false
  # 作者链接
  author_href:
  # 许可证类型
  license: CC BY-NC-SA 4.0
  # 许可证链接
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

# 贊助/打赏
reward:
  # 是否启用打赏
  enable: false
  # 打赏案例文本
  text:
  QR_code:
    # - img: /img/wechat.jpg
    #   link:
    #   text: 微信
    # - img: /img/alipay.jpg
    #   link:
    #   text: 支付宝

# 文章编辑
# 轻松在线浏览和编辑博客源代码
post_edit:
  # 是否启用在线编辑
  enable: false
  # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
  # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url:

# 相关文章
related_post:
  # 是否显示相关文章
  enable: true
  # 显示的文章数量
  limit: 6
  # 选择: created / updated
  date_type: created

# 选择: 1 / 2 / false
# 1: “下一篇文章”将链接到旧文章
# 2: “下一篇文章”将链接到新文章
# false: 禁用分页
post_pagination: 1

# 显示文章过期通知
noticeOutdate:
  # 是否启用过期通知
  enable: false
  # 样式: simple / flat
  style: flat
  # 多少天后显示通知
  limit_day: 365
  # 位置: top / bottom
  position: top
  message_prev: 已经过了
  message_next: 天自上次更新，文章内容可能已过时。

# --------------------------------------
# 页脚设置
# --------------------------------------
footer:
  owner:
    # 是否启用所有者显示
    enable: true
    # 网站创建年份
    since: 2022
  # 自定义文本
  custom_text:
  # 主题和框架的版权声明
  copyright: true

# --------------------------------------
# 侧边栏设置
# --------------------------------------

aside:
  # 是否启用侧边栏
  enable: true
  # 是否默认隐藏侧边栏
  hide: false
  # 是否在右下角显示隐藏侧边栏的按钮
  button: true
  # 移动设备上是否启用侧边栏
  mobile: true
  # 侧边栏位置: left / right
  position: right
  display:
    archive: true
    tag: true
    category: true
  card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/xxxxxx
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    # If set 0 will show all
    limit: 5
    # Sort: date / updated
    sort: date
    sort_order:
  card_newest_comments:
    enable: false
    sort_order:
    limit: 6
    # Unit: mins, save data to localStorage
    storage: 10
    avatar: true
  card_categories:
    enable: true
    # If set 0 will show all
    limit: 8
    # Choose: none / true / false
    expand: none
    sort_order:
  card_tags:
    enable: true
    # If set 0 will show all
    limit: 40
    color: false
    # Order of tags, random/name/length
    orderby: random
    # Sort of order. 1, asc for ascending; -1, desc for descending
    order: 1
    sort_order:
  card_archives:
    enable: true
    # Type: monthly / yearly
    type: monthly
    # Eg: YYYY年MM月
    format: MMMM YYYY
    # Sort of order. 1, asc for ascending; -1, desc for descending
    order: -1
    # If set 0 will show all
    limit: 8
    sort_order:
  card_post_series:
    enable: true
    # The title shows the series name
    series_title: false
    # Order by title or date
    orderBy: 'date'
    # Sort of order. 1, asc for ascending; -1, desc for descending
    order: -1
  card_webinfo:
    enable: true
    post_count: true
    # 是否显示最后推送日期
    last_push_date: true
    sort_order:
    # 发佈日期与当前日期的时间差
    # 格式：Month/Day/Year Time 或 Year/Month/Day Time
    # 如果不启用此功能，请留空
    runtime_date:

# --------------------------------------
# 右下角按钮设置
# --------------------------------------

# 右下角按钮与底部的距离（默认单位：px）
rightside_bottom:

# 简繁转换设置
translate:
  # 是否启用简繁转换
  enable: false
  # 按钮文本
  default: 繁
  # 网站语言（1 - 繁体中文 / 2 - 简体中文）
  defaultEncoding: 2
  # 转换延迟
  translateDelay: 0
  # 按钮在简体中文时的文本
  msgToTraditionalChinese: '繁'
  # 按钮在繁体中文时的文本
  msgToSimplifiedChinese: '簡'

# 阅读模式
readmode: false

# 暗黑模式设置
darkmode:
  # 是否启用暗黑模式
  enable: true
  # 切换暗黑/明亮模式的按钮
  button: true
  # 是否自动切换暗黑/明亮模式
  # autoChangeMode: 1  跟随系统设置，如果系统不支持暗黑模式，则在晚上 6 点到早上 6 点之间切换暗黑模式
  # autoChangeMode: 2  在晚上 6 点到早上 6 点之间切换暗黑模式
  # autoChangeMode: false  不自动切换
  autoChangeMode: 1
  # 设置明亮模式时间，值在 0 到 24 之间。如果未设置，默认值为 6 和 18
  start:
  end:

# 在返回顶部按钮中显示滚动百分比
rightside_scroll_percent: true

# 不要修改以下设置，除非你知道它们的工作原理
# 选择：readmode,translate,darkmode,hideAside,toc,chat,comment
# 不要重复相同的值
rightside_item_order:
  # 是否启用右侧项目顺序
  enable: false
  # 隐藏的默认项目：readmode,translate,darkmode,hideAside
  hide:
  # 显示的默认项目：toc,chat,comment
  show:

# --------------------------------------
# 全局设置
# --------------------------------------

# 锚点设置
anchor:
  # 滚动时，URL 将根据标题 ID 更新
  auto_update: false
  # 点击标题滚动并更新锚点
  click_to_scroll: false

# 图片标题
photofigcaption: false

# 复制设置
copy:
  # 是否启用复制功能
  enable: true
  # 在复制的内容后添加版权信息
  copyright:
    enable: false
    # 当复制字符数超过 limit_count 时添加版权信息
    limit_count: 150

# 需要安装 hexo-wordcount 插件
wordcount:
  # 是否启用字数统计
  enable: false
  # 在文章元信息中显示字数统计
  post_wordcount: true
  # 在文章元信息中显示閲读时间
  min2read: true
  # 在侧边栏网站信息中显示总字数
  total_wordcount: true

# 不蒜子 PV / UV 统计
busuanzi:
  # 网站 UV 统计
  site_uv: true
  # 网站 PV 统计
  site_pv: true
  # 页面 PV 统计
  page_pv: true

# --------------------------------------
# 数学公式设置
# --------------------------------------

# 关于 per_page
# 如果设置为 true，将在每个页面加载 mathjax/katex 脚本
# 如果设置为 false，将根据你的设置加载 mathjax/katex 脚本（在页面的 front-matter 中添加 'mathjax: true' 或者 'katex: true'）page's front-matter)
math:
  # 选择：mathjax, katex
  # 如果不需要数学公式，保持为空
  use:
  per_page: true
  hide_scrollbar: false

  mathjax:
    # 启用上下文菜单
    enableMenu: true
    # 选择：all / ams / none，这控制是否对公式编号以及如何编号
    tags: none

  katex:
    # 启用复制 KaTeX 公式
    copy_tex: false

# --------------------------------------
# 搜索设置
# --------------------------------------

search:
  # 选择：algolia_search / local_search / docsearch
  # 如果不需要搜索功能，保持为空
  use:
  placeholder:

  # Algolia 搜索
  algolia_search:
    # 每页搜索结果数量
    hitsPerPage: 6

  # 本地搜索
  local_search:
    # 页面加载时预加载搜索数据
    preload: false
    # 每篇文章显示的顶部 n 个搜索结果，设置为 -1 显示所有结果
    top_n_per_article: 1
    # 将 HTML 字符串反转义为可读内容
    unescape: false
    CDN:

  # Docsearch
  # https://docsearch.algolia.com/
  docsearch:
    appId:
    apiKey:
    indexName:
    option:

# --------------------------------------
# 分享系统
# --------------------------------------

share:
  # 选择：sharejs / addtoany
  # 如果不需要分享功能，保持为空
  use: sharejs

  # Share.js
  # https://github.com/overtrue/share.js
  sharejs:
    sites: facebook,twitter,wechat,weibo,qq

  # AddToAny
  # https://www.addtoany.com/
  addtoany:
    item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link

# --------------------------------------
# 评论系统
# --------------------------------------

comments:
  # 最多两个评论系统，第一个将作为默认显示
  # 如果不需要评论功能，保持为空
  # 选择：Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  # 两个评论系统的格式：Disqus,Waline
  use: Twikoo
  # 按钮旁边显示评论系统名称
  text: true
  # 懒加载：评论系统将在评论元素进入浏览器视口时加载
  # 如果设置为 true，评论计数将无效
  lazyload: false
  # 在文章顶部图片中显示评论计数
  count: false
  # 在主页显示评论计数
  card_post_count: false

# Disqus
# https://disqus.com/
disqus:
  shortname:
  # 最新评论小部件的 API 密钥
  apikey:

# 使用 Disqus API 渲染评论的替代方案
# https://github.com/SukkaW/DisqusJS
disqusjs:
  shortname:
  apikey:
  option:

# Livere
# https://www.livere.com/
livere:
  uid:

# Gitalk
# https://github.com/gitalk/gitalk
gitalk:
  client_id:
  client_secret:
  repo:
  owner:
  admin:
  option:

# Valine
# https://valine.js.org
valine:
  appId:
  appKey:
  avatar: monsterid
  # 该配置适用于国内自定义域名用户，海外版本将自动检测（无需手动填写）
  serverURLs:
  bg:
  # 使用 Valine 的访客计数作为页面的访客量
  visitor: false
  option:

# Waline 评论插件配置，一个简单的评论系统，基于 Valine 开发，支持后端
# https://waline.js.org/
waline:
  serverURL:
  bg:
  # 使用 Waline 的访客计数作为页面的访客量
  pageview: false
  option:

# Utterances
# https://utteranc.es/
utterances:
  repo:
  # 问题映射方式，可选值: pathname/url/title/og:title
  issue_term: pathname
  # 主题: github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark
  light_theme: github-light
  dark_theme: photon-dark
  js:
  option:

# Facebook 评论插件配置
# https://developers.facebook.com/docs/plugins/comments/
facebook_comments:
  app_id:
  # optional
  user_id:
  pageSize: 10
  # 评论排序方式: social / time / reverse_time
  order_by: social
  lang: en_US

# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
  envId: https://mdrea.netlify.app
  region:
  # 使用 Twikoo 的访客计数作为页面的访客量
  visitor: false
  option:

# Giscus
# https://giscus.app/
giscus:
  repo:
  repo_id:
  category_id:
  light_theme: light
  dark_theme: dark
  js:
  option:

# Remark42
# https://remark42.com/docs/configuration/frontend/
remark42:
  host:
  siteId:
  option:

# Artalk
# https://artalk.js.org/guide/frontend/config.html
artalk:
  server:
  site:
  # 使用 Artalk 的访客计数作为页面的访客量
  visitor: false
  option:

# --------------------------------------
# 聊天服务配置
# --------------------------------------

chat:
  # Choose: chatra/tidio/crisp
  # Leave it empty if you don't need chat
  use:
  # Chat Button [recommend]
  # It will create a button in the bottom right corner of website, and hide the origin button
  rightside_button: false
  # The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down
  button_hide_show: false

# https://chatra.io/
chatra:
  id:

# https://www.tidio.com/
tidio:
  public_key:

# https://crisp.chat/en/
crisp:
  website_id:

# --------------------------------------
# 分析服务配置
# --------------------------------------

# https://tongji.baidu.com/web/welcome/login
baidu_analytics:

# https://analytics.google.com/analytics/web/
google_analytics:

# https://www.cloudflare.com/zh-tw/web-analytics/
cloudflare_analytics:

# https://clarity.microsoft.com/
microsoft_clarity:

# https://umami.is/
umami_analytics:
  enable: false
  # For self-hosted setups, configure the hostname of the Umami instance
  serverURL:
  website_id:
  option:
  UV_PV:
    site_uv: false
    site_pv: false
    page_pv: false
    # Umami Cloud (API key) / self-hosted Umami (token)
    token:

# --------------------------------------
# 广告配置
# --------------------------------------

# Google Adsense
google_adsense:
  enable: false
  auto_ads: true
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  client:
  enable_page_level_ads: true

# Insert ads manually
# Leave it empty if you don't need ads
ad:
  # Insert ads in the index (every three posts)
  index:
  # Insert ads in aside
  aside:
  # Insert ads in the post (before pagination)
  post:

# --------------------------------------
# 站点验证配置
# --------------------------------------

site_verification:
  # - name: google-site-verification
  #   content: xxxxxx
  # - name: baidu-site-verification
  #   content: xxxxxxx

# --------------------------------------
# 美化 / 效果
# --------------------------------------

# 主题颜色自定义
# 注意：颜色值必须用双引号，如 "#000"，否则可能会导致错误！

# theme_color:
#   enable: true
#   main: "#49B1F5"
#   paginator: "#00c4b6"
#   button_hover: "#FF7242"
#   text_selection: "#00c4b6"
#   link_color: "#99a9bf"
#   meta_color: "#858585"
#   hr_color: "#A4D8FA"
#   code_foreground: "#F47466"
#   code_background: "rgba(27, 31, 35, .05)"
#   toc_color: "#00c4b6"
#   blockquote_padding_color: "#49b1f5"
#   blockquote_background_color: "#49b1f5"
#   scrollbar_color: "#49b1f5"
#   meta_theme_color_light: "ffffff"
#   meta_theme_color_dark: "#0d0d0d"

# The user interface setting of category and tag page
# Choose: index - same as Homepage UI / default - same as archives UI
# leave it empty or index
category_ui:
tag_ui:

# Rounded corners for UI elements
rounded_corners_ui: true

# Stretches the lines so that each line has equal width
text_align_justify: false

# Add a mask to the header and footer
mask:
  header: true
  footer: true

# Loading Animation
preloader:
  enable: false
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 1
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url:

# Page Transition
enter_transitions: true

# Default display mode - light (default) / dark
display_mode: light

# Configuration for beautifying the content of the article
beautify:
  enable: false
  # Specify the field to beautify (site or post)
  field: post
  # Specify the icon to be used as a prefix for the title, such as '\f0c1'
  title_prefix_icon:
  # Specify the color of the title prefix icon, such as '#F47466'
  title_prefix_icon_color:

# Global font settings
# Don't modify the following settings unless you know how they work
font:
  global_font_size:
  code_font_size:
  font_family:
  code_font_family:

# Font settings for the site title and site subtitle
blog_title_font:
  font_link:
  font_family:

# The setting of divider icon
hr_icon:
  enable: true
  # The unicode value of Font Awesome icon, such as '\3423'
  icon:
  icon_top:

# Typewriter Effect
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: false
  colorful: true
  shake: true
  mobile: false

# Background effects
# --------------------------------------

# canvas_ribbon
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: false
  # The size of ribbon
  size: 150
  # The opacity of ribbon (0 ~ 1)
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

# Fluttering Ribbon
canvas_fluttering_ribbon:
  enable: false
  mobile: false

# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: false
  # Color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  color: '0,0,255'
  # The opacity of line (0~1)
  opacity: 0.7
  # The z-index property of the background
  zIndex: -1
  # The number of lines
  count: 99
  mobile: false

# Mouse click effects: fireworks
fireworks:
  enable: false
  zIndex: 9999
  mobile: false

# Mouse click effects: Heart symbol
click_heart:
  enable: false
  mobile: false

# Mouse click effects: words
clickShowText:
  enable: false
  text:
    # - I
    # - LOVE
    # - YOU
  fontSize: 15px
  random: false
  mobile: false

# --------------------------------------
# Lightbox Settings
# --------------------------------------

# Choose: fancybox / medium_zoom
# https://github.com/francoischalifour/medium-zoom
# https://fancyapps.com/fancybox/
# Leave it empty if you don't need lightbox
lightbox:

# --------------------------------------
# Tag Plugins settings
# --------------------------------------

# Series
series:
  enable: false
  # Order by title or date
  orderBy: 'title'
  # Sort of order. 1, asc for ascending; -1, desc for descending
  order: 1
  number: true

# ABCJS - The ABC Music Notation Plugin
# https://github.com/paulrosen/abcjs
abcjs:
  enable: false
  per_page: true

# Mermaid
# https://github.com/mermaid-js/mermaid
mermaid:
  enable: false
  # Write Mermaid diagrams using code blocks
  code_write: false
  # built-in themes: default / forest / dark / neutral
  theme:
    light: default
    dark: dark

# chartjs
# see https://www.chartjs.org/docs/latest/
chartjs:
  enable: false
  # Do not modify unless you understand how they work.
  # The default settings are only used when the MD syntax is not specified.
  # General font color for the chart
  fontColor:
    light: 'rgba(0, 0, 0, 0.8)'
    dark: 'rgba(255, 255, 255, 0.8)'
  # General border color for the chart
  borderColor:
    light: 'rgba(0, 0, 0, 0.1)'
    dark: 'rgba(255, 255, 255, 0.2)'
  # Background color for scale labels on radar and polar area charts
  scale_ticks_backdropColor:
    light: 'transparent'
    dark: 'transparent'

# Note - Bootstrap Callout
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: flat
  icons: true
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

# --------------------------------------
# 其他设置
# --------------------------------------

# https://github.com/MoOx/pjax
pjax:
  # 是否启用 pjax
  enable: true
  # 排除指定页面不使用 pjax，如 '/music/'
  exclude:
    # - /xxxxxx/

# 注入 CSS 和脚本 (aplayer/meting)
aplayerInject:
  # 是否启用注入
  enable: true
  # 是否每页启用
  per_page: true

# Snackbar - Toast Notification
# https://github.com/polonel/SnackBar
# position: top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  enable: false
  position: bottom-left
  # The background color of Toast Notification in light mode and dark mode
  bg_light: '#49b1f5'
  bg_dark: '#1f1f1f'

# Instant.page
# https://instant.page/
instantpage: false

# Lazyload
# https://github.com/verlok/vanilla-lazyload
lazyload:
  enable: false
  # Specify the field to use lazyload (site or post)
  field: site
  placeholder:
  blur: false

# PWA
# See https://github.com/JLHwung/hexo-offline
# ---------------
pwa:
  enable: false
  manifest:
  apple_touch_icon:
  favicon_32_32:
  favicon_16_16:
  mask_icon:

# Open graph meta tags
# https://hexo.io/docs/helpers#open-graph
Open_Graph_meta:
  enable: true
  option:
    # twitter_card:
    # twitter_image:
    # twitter_id:
    # twitter_site:
    # google_plus:
    # fb_admins:
    # fb_app_id:

# Structured Data
# https://developers.google.com/search/docs/guides/intro-structured-data
structured_data: true

# Add the vendor prefixes to ensure compatibility
css_prefix: true

# Inject
# 插入代码到 head（在 '</head>' 标签之前）和底部（在 '</body>' 标签之前）
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
    - <link rel="stylesheet" href="/css/style.css">
  bottom:
    # - <script src="xxxx"></script>
    - <script async data-pjax src="/js/anzhiyu.js"></script>
    - <script async data-pjax src="/js/anzhiyufunction.js"></script>
    - <script async src="/js/anzhiyuOnlyOne.js"></script>

# CDN Settings
# Don't modify the following settings unless you know how they work
CDN:
  # The CDN provider for internal and third-party scripts
  # Options for both: local/jsdelivr/unpkg/cdnjs/custom
  # Note: Dev version can only use 'local' for internal scripts
  # Note: When setting third-party scripts to 'local', you need to install hexo-butterfly-extjs
  internal_provider: local
  third_party_provider: jsdelivr

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

  # Custom format
  # For example: https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}
  custom_format:

  option:
    # abcjs_basic_js:
    # activate_power_mode:
    # algolia_js:
    # algolia_search:
     aplayer_css: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css
     aplayer_js: https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js
    # artalk_css:
    # artalk_js:
    # blueimp_md5:
    # busuanzi:
    # canvas_fluttering_ribbon:
    # canvas_nest:
    # canvas_ribbon:
    # chartjs:
    # click_heart:
    # clickShowText:
    # disqusjs:
    # disqusjs_css:
    # docsearch_css:
    # docsearch_js:
    # egjs_infinitegrid:
    # fancybox:
    # fancybox_css:
    # fireworks:
    # fontawesome:
    # gitalk:
    # gitalk_css:
    # giscus:
    # instantpage:
    # instantsearch:
    # katex:
    # katex_copytex:
    # lazyload:
    # local_search:
    # main:
    # main_css:
    # mathjax:
    # medium_zoom:
    # mermaid:
     meting_js: https://npm.elemecdn.com/hexo-anzhiyu-music@1.0.1/assets/js/Meting2.min.js
    # prismjs_autoloader:
    # prismjs_js:
    # prismjs_lineNumber_js:
    # pjax:
    # sharejs:
    # sharejs_css:
    # snackbar:
    # snackbar_css:
    # translate:
    # twikoo:
    # typed:
    # utils:
    # valine:
    # waline_css:
    # waline_js:

04-03

安装 Hexo

1 2	npm install hexo-cli -g hexo init

修改配置文件： _config.yml

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 自然有梦
subtitle: '让瞬间成为永恒'
description: '永远相信美好的事情即将发生'
keywords: Blog
author: 自然有梦
language: zh-CN
timezone: 'Asia/Shanghai'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://mdrzf.online
# permalink: :year/:month/:day/:title/
permalink: posts/:abbrlink/ 
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
syntax_highlighter: highlight.js
highlight:
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/mmdreamm/mdream.github.io.git
  branch: main

# APlayer
# https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md
aplayer:
  meting: true
  asset_inject: false

douban:
  id: 227562338
  movie:
    title: "影视"

# abbrlink config
abbrlink:
  alg: crc16      # Algorithm used to calc abbrlink. Support crc16(default) and crc32
  rep: hex        # Representation of abbrlink in URLs. Support dec(default) and hex
  drafts: false   # Whether to generate abbrlink for drafts. (false in default)
  force: false    # Enable force mode. In this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had an abbrlink. (false in default)
  writeback: true # Whether to write changes to front-matters back to the actual markdown files. (true in default)