Hexo + Butterfly 搭建个人网站(二)

修改网站资料


修改站点配置文件 _config.yml

默认语言是 en 

主题支持三种语言

        default(en)
        zh-CN (简体中文)
        zh-TW (繁体中文)

# Site
title: # 网站标题
subtitle: '' # 网站副标题
description: ''  #侧边栏头像下方描述信息
keywords: # 网站的关键词。支持多个关键词
author:  # 作者
language: en  # 语言(简体中文)
timezone: Asia/Shanghai  #中国的时区

导航栏设置

# 主题配置文件中
nav:
  logo:  #image
  display_title:  true
  fixed:  false    # fixed navigation bar
配置参数介绍
logo    网站的 logo,支持图片,直接填入图片链接
display_title是否显示网站标题,填写 true 或者 false
fixed

是否固定状态栏,填写 true 或者 false

 导航栏菜单

Home: / || fas fa-home
Archives: /archives/ || fas fa-archive
Tags: /tags/ || fas fa-tags
Categories: /categories/ || fas fa-folder-open
List||fas fa-list:
  Music: /music/ || fas fa-music
  Movie: /movies/ || fas fa-video
Link: /link/ || fas fa-link
About: /about/ || fas fa-heart

菜单栏格式:

        名字:/路径/  || fas 图标名

多重菜单格式:

菜单名 || 图标名

        名字:/路径/  || fas 图标名

!如果不希望显示图标,图标名可不写。

默认子目录是展开的,如果你想要隐藏,目录里添加 hide 。 

菜单 || fas fa-list || hide:

# 导航的文字可自行更改
menu:
  首页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  列表||fa fa-heartbeat:
    音乐: /music/ || fas fa-music
    照片: /Gallery/ || fas fa-images
    电影: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

代码高亮主题 

支持6种代码高亮样式:

        darker
        pale night
        light
        ocean
        mac
        mac light

# 在主题配置文件修改

highlight_theme: light

 代码复制

# 主题支持代码复制功能

highlight_copy: true

 代码框

# 在默认情况下,代码框自动展开,可设置是否所有代码框都关闭状态,点击>可展开代码

       #  true 全部代码框不展开,需点击>打开
       # false 代码框展开,有>点击按钮
       # none 不显示>按钮

highlight_shrink: true 

 代码换行

在默认情况下,Hexo 编译的时候代码不会自动换行。如果不希望在代码块的区域里有横向滚动条,那么考虑开启这个功能。

code_word_wrap :  true

 如果使用 highlight 渲染,需要找到 Hexo 配置文件 _config.yml ,将 line_number 改成 false。

highlight:
  enable: true
  line_number:  false  # <- 改这里
  auto_detect: false
  tab_replace:

如果使用 prismjs 渲染,需要找到 Hexo 配置文件 _config.yml ,将 line_number 改成 false。

prismjs:
  enable: false
  preprocess: true
  line_number: false  # <- 改这里
  tab_replace: ''

 代码高度限制

代码高度限制,超出的部分会隐藏,并显示展开按钮。

highlight_height_limit :  false   # unit: px

# highlight_height_limit :  300  可自定义高度

侧边栏头像底部图标

书写格式 : 图标名: url ||  描述性文字  ||  color

social:

        fab fa-github:  地址 || 图标名 || 颜色    # 颜色可以不使用
        fab fa-github:  https://github.com/xxxxx || Github || "#hdhfbb"
        fas fa-envelope:  mailto:xxxxxx@gmail.com || Email || "#000000"

 侧边栏头像

avatar:
  img:  # 可以用本地图片或者网络图片地址
  effect: false   # true 头像会一直转圈,false 鼠标放上去头像才会转圈

封面

如果不要显示封面图,可直接配置 disable_top_img: true

其它页面 ( tags /categories/ 自建页面)和 文章页 的 top_img ,请到对应的 md文档 页面设置  top_img

封面配置介绍
index_img主页的 top_img
default_top_img默认的 top_img,当页面的 top_img 没有配置时,会显示 default_top_img
archive_img归档页面的 top_img
tag_imgtag 子页面 的 默认 top_img
tag_per_imgtag 子页面的 top_img,可配置每个 tag 的 top_img
category_imgcategory 子页面 的 默认 top_img
category_per_imgcategory 子页面的 top_img,可配置每个 category 的 top_img
tag_per_img 和 category_per_img可对 tag 和 category 进行单独的配置
tag_per_img:
  aplayer: https://xxxxxx.png
  android: ddddddd.png
  
category_per_img:
  随想: hdhdh.png
  推荐: ddjdjdjd.png

文章封面

cover:
  index_enable: true  # 是否显示文章封面
  aside_enable: true  # 侧栏是否显示文章封面图
  archives_enable: true  # 归档页面是否显示文章封面图
  position: both # 主页卡片文章封面的显示位置
  default_cover:  # 默认的 cover, 可配置图片链接/顔色/渐变色等

配置多张图片时,会随机选择一张作为 封面. 此时写法应为
default_cover:
        - https://xxxxx1.png

        - https://xxxxx2.png

        - https://xxxxx3.png

 页面显示设置

post_meta:
  page:
    date_type: both #主页文章日期是创建日或者更新日或都显示
    date_format: relative # 显示日期还是相对日期
    categories: true # 主页是否显示分类
    tags: true # 主页是否显示标签
    label: true # 显示描述性文字
  post:
    date_type: both # 文章页日期是创建日或者更新日或都显示
    date_format: relative # 显示日期还是相对日期
    categories: true # 文章页是否显示分类
    tags: true # 文章页是否显示标签
    label: true # 显示描述性文字

主页文章节选

index_post_content:
  method: 3
  length: 500 # if you set method to 2 or 3, the length need to config

页面锚点

开启锚点后,当进行滚动时,页面链接会根据标题ID进行替换。

# anchor
# when you scroll in post , the url will update according to header id.
anchor:
  button:
    enable: false
    always_show: false
    icon: # the unicode value of Font Awesome icon, such as '\3423'
  auto_update: false # when you scroll in post, the URL will update according to header id.

图片描述

优先显示 title 属性,然后是 alt 属性

photofigcaption: true

 复制相关配置

可配置网站是否可以复制、复制的内容是否添加版权信息

copy:
  enable: true   # 是否开启网站复制权限
  copyright:   # 复制的内容后面加上版权信息
    enable: true   #  是否开启复制版权信息添加
    limit_count: 50   # 字数限制,当复制文字大于这个字数限制时,将在复制的内容后面加上版权信息

文章版权

为文章展示文章版权和许可协议。

post_copyright:
  enable: true
  decode: false
  author_href:
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

!是中文网址,会被解码,可设置decode: true来显示中文网址

如果文章不需要显示版权,可以在文章页 文档 单独设置

copyright: false

文章页打赏 

在link上添加相应的打赏链接。用户点击图片就会跳转到链接去,也可以不写,会默认为图片的链接。

reward:
  enable: true  # 是否开启文章打赏
  QR_code:
    - img: /img/wechat.jpg  # 路径
      link:
      text: 微信
    - img: /img/alipay.jpg
      link:
      text: 支付宝

TOC 

文章页目录,是否显示TOC。

toc:
  post: true  # 文章页是否显示 TOC
  page: true  # 普通页面是否显示 TOC
  number: true  # 是否显示章节数
  expand: false  # 是否展开 TOC
  style_simple: false  # 简洁模式(侧边栏只显示 TOC, 只对文章页有效 )
  scroll_percent: true  # 是否显示滚动进度百分比

 相关文章

文章封面设置为 false  或者没有封面配置,相关文章背景会显示主题色。

related_post:
  enable: true
  limit: 6 # 显示推荐文章数目
  date_type: created # 文章日期显示创建日 created  或者更新日 updated

 文章过期

设置是否显示文章过期提醒,以更新时间为基准。

noticeOutdate:
  enable: true  # 是否开启文章过期提醒
  style: flat   #  simple/flat
  limit_day: 365 # 距离更新时间多少天才显示文章过期提醒
  position: top   #  top/bottom
  message_prev: 欢迎查看文章 # 天数之前的文字
  message_next: 这篇文章已经过期 # 天数之后的文字

文章编辑

文章标题旁边显示一个编辑按钮,点击按钮会跳转到对应的链接去。

post_edit:
  enable: false  # 是否开启
  url:  # 跳转链接

文章分页 

post_pagination: false    # 关闭分页按钮

# post_pagination: 1    # 下一篇显示的是旧文章

# post_pagination: 2    # 下一篇显示的是新文章

网站年份设置

footer:
  owner:
    enable: true
    since: 2023  # 站点起始时间

页脚文本 

支持插入链接

custom_text:  Hello! world

# custom_text: <a href="网址"></a>

侧边栏配置

aside:
  enable: true  # 是否开启侧边栏
  hide: false
  button: true
  mobile: true # 是否在手机端显示
  position: right # 左left或右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: 公告 # 公告显示文字
  card_recent_post: # 最新文章
    enable: true
    limit: 5  # 最新文章显示数量
    sort: date # date、updated  日期
    sort_order: # 排序顺序 ,不要修改设置,除非你知道它是如何工作的
  card_categories:  # 标签
    enable: true
    limit: 8 # 标签显示数量
    expand: none # none/true/false
    sort_order: # Don't modify the setting unless you know how it works
  card_tags: #归档
    enable: true
    limit: 40 # if set 0 will show all
    color: false
    orderby: random # random/name/length 标签的顺序,随机/名称/长度
    order: 1 # 1,提升;-1,降
    sort_order: # Don't modify the setting unless you know how it works
  card_archives:  # 网站信息
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
    sort_order: # Don't modify the setting unless you know how it works
  card_webinfo:
    enable: true
    post_count: true #邮政计数
    last_push_date: true #最后推送日期
    sort_order: # Don't modify the setting unless you know how it works

访问人数

访问 busuanzi 的 官方网站 查看更多的介绍配置。

busuanzi:

  site_uv: true  # 本站总访客数

  site_pv: true  # 本站总访问量

  page_pv: true   # 本文总阅读量

如果需要修改 busuanzi 的 CDN 链接,可通过 主题配置文件 的 CDN 中的 option 进行修改 

CDN:
  option:
      busuanzi:  # xxxxxxxxx

网站运行时间 

runtimeshow:
  enable: true
  publish_date: 6/7/2018 00:00:00   #网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间

简繁转换 

右下角简繁转换按钮。

translate:

  enable: true

  # The text of a button # 默认按钮显示文字(网站是简体,应设置为'default: 繁')

  default: 繁

   #网站默认语言,1: 繁体中文, 2: 简体中文

  defaultEncoding: 2

  # Time delay   #延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0

  translateDelay: 0

  # The text of the button when the language is Simplified Chinese   #当文字是简体时,按钮显示的文字

  msgToTraditionalChinese: '繁'

  # The text of the button when the language is Traditional Chinese #当文字是繁体时,按钮显示的文字

  msgToSimplifiedChinese: '簡'

阅读模式 

阅读模式下会去掉除文章外的内容,右下角会有阅读模式按钮。

readmode: true

夜间模式 

右下角会有夜间模式按钮

darkmode:
  enable: true  # 是否开启
  button: true  # 是否在右下角显示日夜模式切换按钮
  autoChangeMode: false  # false、1、2     自动切换的模式

# 1 跟随系统而变化

# 2 只按照时间 start 到 end 之间切换

# false 取消自动切换
  start: # 开始时间
  end: # 结束时间

滚动状态百分比 

右下角显示滚动百分比

# 显示滚动到顶部按钮的滚动百分比

rightside_scroll_percent: true

 右下角按钮排序

rightside_item_order:
  enable: false
  hide:  # 
  show:  # 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值