本文主要针对 hexo-theme-butterfly 主题进行了个性化自定义，并对修改内容做了简单介绍。

原作者文档👉 hexo-theme-butterfly 安装文档

已完成

美化

svg 背景

使用 SVG 编辑器 修改

  • footer 背景
    - var footer_img =  theme.footer_bg.footer_img
          - var footer_bg = theme.footer_bg.enable == false ? '' : `background-image: url(${footer_img})`
          - var is_bg = theme.footer_bg.enable == false ? 'color' : 'photo'
  • 友链头像 404 默认图
  • 评论区背景图

page 背景图

在原作者的基础上添加了修改 books 页面 bg 的 strict，不得不说作者真的很细心。

if theme.douban_background.enable
    if is_current('/movies/', [strict])
      - var source = theme.movie_background
    if is_current('/books/', [strict])
      - var source = theme.book_background
    if source
      - var bg_img = `background-image: url(${source})`
      #web_bg(data-type='photo' style=bg_img)

  //更换文字为logo图片
//a#site-name.blog_title(href=url_for('/')) #[=config.title]
a#site-name.blog_title(href=url_for('/'))
  - var site_logo = theme.site_logo
  - var site_patch = `background: url(${site_logo})`
  span.site-logo(style=site_patch)
//网站换为图片之后加样式
    .site-logo
      display: inline-block;
      vertical-align: middle;
      width: 150px;
      height: 40px
      background-size: cover!important;

表格美化

姓名 年龄 性别 民族
张三丰 100 男 汉族
张翠山 35 男 汉族
殷素素 33 女 汉族
张无忌 12 男 汉族
赵敏 12 女 蒙古族
小昭 12 女 波斯人

参考 Hexo 下表格的美化和优化

新增

  • 参考Next主题外挂
    参见此处 note 挂件；
    gallery已经实现需求，所以没有必要实现了。


用户状态

  • 用户卡片页显示个人工作状态（支持 fa 和 emoji 😀）
    头像 hover 事件修改
    参考此处实现头像不翻转，鼠标 hover 放大
    .card-info
        img
          display: inline-block
          width: 110px
          height: 110px
          border-radius: 70px
          vertical-align: top
          margin: 0 auto
          webkit-transition: 1.4s all
          moz-transition: 1.4s all
          ms-transition: 1.4s all
          transition: 1.4s all

          &:hover
            background-color: $avatar-bg
            webkit-transform: rotate(360deg) scale(1.1)
            moz-transform: rotate(360deg) scale(1.1)
            ms-transform: rotate(360deg) scale(1.1)
            transform: rotate(360deg) scale(1.1)
  • 添加 badge
    #/Butterfly/layout/includes/footer.pug

iframe 实现 豆瓣书影音 页面

<!--用户名替换为自己的豆瓣id-->
<div id="iframe">
    <iframe height="100%" src="https://m.douban.com/people/imoyao/subject_profile" sandbox="allow-forms allow-scripts allow-same-origin allow-popups"></iframe>
</div>

实现 Netlify CMS 管理

使用Hexo Netlify CMS实现
参考将 Hexo 静态博客部署到 Netlify | reuixiy

吐个槽

  • 侧边栏添加吐个槽，用户可以进行反馈

改进

文章页sidebar图标

  • 更换另外一种图标，同时hover变成显眼按钮

个人信息

  • 图标显示风格左右旋转而不是上下颠倒

赞赏

鉴于国人现实经济状况，只有在font-matter中添加reward: true才会打开赞赏功能；

// themes/Butterfly/layout/post.pug
if theme.reward.enable && page.reward

page 页侧边栏

  • 不要展示只看一次就可以的信息（如网站概览，公告等）
  • 只在首页显示公告和网站概览；跳到对应页时，侧边栏不显示对应 card（避免信息重复）；
    layout/includes/widget/index.pug

    文章页结束语

    //结束语分割线
      .divider.divider-horizontal.divider-with-text-center(role='separator')
        span.divider-inner-text=theme.divider_text

TODO

原作者废弃

  • 文章font matter: hide 支持

新增

首页添加描述卡

  • 自述页面
  • music
  • video

添加 logos 页面存放网站 logo 等个人信息

参考

page 页

  • 增加正文结束分割线，可以自定义分割线文字内容；
  • 修改 books、movies 页面的背景，更加沉浸式；
    TODO:暂时页面 id 重复未解决

侧边栏

  • 给友链页面中的朋友栏增加首页友链卡；
  • 侧边栏只显示 20 条 tag，剩余的访问 tag 页面才能看到；
  • 豆瓣历史页面不显示侧边栏；
        //douban 页面特殊处理
    else if page.type === 'douban'
      article#page.no-aside-page
        .article-container!= page.content

摘要

  • 目前的摘要功能应该是我没有配置好，感觉没有生效；
    - var specific_desc = article.description || article.subtitle || article.excerpt
         if specific_desc
           .content!= specific_desc
         else if theme.auto_excerpt && theme.auto_excerpt.enable
           - const content = strip_html(article.content)
           - let expert = content.substring(0, theme.auto_excerpt.length) 
           - content.length > theme.auto_excerpt.length ? expert += ' ...' : ''
           .content!= expert

    因为主题 UI 的关系，主頁文章節選只支持自動節選和文章頁 description。优先选择自動節選。
    在 butterfly.yml 里可以开启 auto_excerpt 的选项，你的文章将会在自动截取部分显示在主页。（默认显示 150 个字）。

    auto_excerpt: 
    enable: true 
    length: 150

编辑直达

暗色模式

  • 一些自定义样式修改；