Butterfly主题微改

本文与那篇美化文不同，仅仅是对于源代码的小改

相关推荐移至侧栏^[1]

• JS 修改
• Post 样式修改
• 首页样式修改

修改 themes\butterfly\scripts\helpers\related_post.js

从大概47行开始到70行的部分。

• diff代码块
• 改动完成的代码块

  if (relatedPosts.length > 0) {
-  result += '<div class="relatedPosts">'
-  result += `<div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>${headlineLang}</span></div>`
-  result += '<div class="relatedPosts-list">'
+  result += '<div class="card-widget card-recommend-post">'
+  result += `<div class="item-headline"><i class="fas fa-dharmachakra"></i><span>${headlineLang}</span></div>`
+  result += '<div class="aside-list">'
    for (let i = 0; i < Math.min(relatedPosts.length, limitNum); i++) {
      const cover =
        relatedPosts[i].cover === false
          ? relatedPosts[i].randomcover
          : relatedPosts[i].cover
-    result += `<div><a href="${this.url_for(relatedPosts[i].path)}" title="${relatedPosts[i].title}">`
-    result += `<img class="cover" src="${this.url_for(cover)}" alt="cover">`
+    result += `<div class="aside-list-item">`
+    result += `<a class="thumbnail" href="${this.url_for(relatedPosts[i].path)}" title="${relatedPosts[i].title}"><img src="${this.url_for(cover)}" alt="${relatedPosts[i].title}"></a>`
+    result += `<div class="content">`
+    result += `<a class="title" href="${this.url_for(relatedPosts[i].path)}" title="${relatedPosts[i].title}">${relatedPosts[i].title}</a>`
      if (dateType === 'created') {
-       result += `<div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> ${this.date(relatedPosts[i].created, hexoConfig.date_format)}</div>`
+       result += `<time datetime="${this.date(relatedPosts[i].created, hexoConfig.date_format)}" title="发表于 ${this.date(relatedPosts[i].created, hexoConfig.date_format)}">${this.date(relatedPosts[i].created, hexoConfig.date_format)}</time>`
      } else {
-        result += `<div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> ${this.date(relatedPosts[i].updated, hexoConfig.date_format)}</div>`
+        result += `<time datetime="${this.date(relatedPosts[i].updated, hexoConfig.date_format)}" title="发表于 ${this.date(relatedPosts[i].updated, hexoConfig.date_format)}">${this.date(relatedPosts[i].updated, hexoConfig.date_format)}</time>`
      }
-     result += `<div class="title">${relatedPosts[i].title}</div>`
-     result += '</div></a></div>'
+     result += `</div></div>`
    }

    result += '</div></div>'
    return result
  }

if (relatedPosts.length > 0) {
    result += '<div class="card-widget card-recommend-post">'
    result += `<div class="item-headline"><i class="fas fa-dharmachakra"></i><span>${headlineLang}</span></div>`
    result += '<div class="aside-list">'
    for (let i = 0; i < Math.min(relatedPosts.length, limitNum); i++) {
      const cover =
        relatedPosts[i].cover === false
          ? relatedPosts[i].randomcover
          : relatedPosts[i].cover
      result += `<div class="aside-list-item">`
      result += `<a class="thumbnail" href="${this.url_for(relatedPosts[i].path)}" title="${relatedPosts[i].title}"><img src="${this.url_for(cover)}" alt="${relatedPosts[i].title}"></a>`
      result += `<div class="content">`
      result += `<a class="title" href="${this.url_for(relatedPosts[i].path)}" title="${relatedPosts[i].title}">${relatedPosts[i].title}</a>`
      if (dateType === 'created') {
        result += `<time datetime="${this.date(relatedPosts[i].created, hexoConfig.date_format)}" title="发表于 ${this.date(relatedPosts[i].created, hexoConfig.date_format)}">${this.date(relatedPosts[i].created, hexoConfig.date_format)}</time>`
      } else {
        result += `<time datetime="${this.date(relatedPosts[i].updated, hexoConfig.date_format)}" title="发表于 ${this.date(relatedPosts[i].updated, hexoConfig.date_format)}">${this.date(relatedPosts[i].updated, hexoConfig.date_format)}</time>`
      }
      result += `</div></div>`
    }
    result += '</div></div>'
    return result
  }

修改 themes\butterfly\layout\post.pug

移除在文章底部的推荐版块

  if theme.post_pagination
    include includes/pagination.pug
-if theme.related_post && theme.related_post.enable
-  != related_posts(page,site.posts)

  if page.comments !== false && theme.comments && theme.comments.use

修改 themes\butterfly\layout\includes\widget\index.pug,

添加相关文章模块：

#aside-content.aside-content
  //- post
  if is_post()
    if showToc && theme.toc.style_simple
      .sticky_layout
        include ./card_post_toc.pug
    else
      !=partial('includes/custom/SAO_card_player', {}, {cache:theme.fragment_cache})
      !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
      !=partial('includes/widget/card_top_self', {}, {cache:theme.fragment_cache})  
      .sticky_layout
        if showToc
          include ./card_post_toc.pug
+        if theme.related_post && theme.related_post.enable
+          != related_posts(page,site.posts)
        !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
        !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})

---

文章页显示网站统计

• 相关配置
• 代码改动

关于侧栏网站咨询，其实对应的是 themes/butterfly/layout/includes/widget/card_webinfo.pug 这个文件

然后关于页面侧栏配置，则对应的是 themes/butterfly/layout/includes/widget/index.pug这个文件

明白了两个文件所在的位置，我们要做的只是在合适的地方加上合适的内容罢了。

修改前面提到的 index.pug 文件：

#aside-content.aside-content
  //- post
  if is_post()
    - const tocStyle = page.toc_style_simple
    - const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple
    if showToc && tocStyleVal
      .sticky_layout
        include ./card_post_toc.pug
    else
      !=partial('includes/widget/card_author', {}, {cache: true})
      !=partial('includes/widget/card_announcement', {}, {cache: true})
      !=partial('includes/widget/card_top_self', {}, {cache: true})
      .sticky_layout
        if showToc
          include ./card_post_toc.pug
        if theme.related_post && theme.related_post.enable
          != related_posts(page,site.posts)
        !=partial('includes/widget/card_recent_post', {}, {cache: true})
        !=partial('includes/widget/card_ad', {}, {cache: true})
+      !=partial('includes/widget/card_webinfo', {}, {cache: true})

---

文章页面显示描述

• 相关配置
• 修改思路
• 代码修改

关于文章头部描述样式，

在 themes/butterfly/layout/includes/header/post-info.pug 这个文件里面

关于具体样式，在 themes/butterfly/source/css/_layout/head.styl 里面

通过阅读前面提到的 post-info.pug 这个文件，我们可以发现，只要在 h1.post-title 下面加一行描述就行。

pug 文件修改：

#post-info
  h1.post-title= page.title || _p('no_title')
+span.post-desc= page.description

styl 文件修改，大概位于180行左右:

#post-info
  .post-title
    @extend .limit-more-line
    margin-bottom: 8px
    color: var(--white)
    font-weight: normal
    font-size: 2.5em
    line-height: 1.5
    -webkit-line-clamp: 3

+.post-desc
+  color: var(--white)
+  font-style: italic
+  border-bottom: 1px solid var(--white)

---

文章底部版权页美化^[2]

• 改动思路
• 布局文件修改
• 版权页样式修改

看了下Akilar店长的改动，改了copyright相关的布局，然后版权图标样式改了，再去styl文件那边改具体样式。

post-copyright.pug没整体看过，不过自己加了一段page.description，不需要的可以自行调整。

改 \themes\butterfly\layout\includes\post\post-copyright.pug, 直接复制以下内容替换原文件内容。

此处多次用到了三元运算符作为默认项设置，在确保有主题配置文件的默认项的情况下，也可以在相应文章的 front-matter 中重新定义作者，原文链接，开源许可协议等内容。

if theme.post_copyright.enable && page.copyright !== false
  - let author = page.copyright_author ? page.copyright_author : config.author
  - let url = page.copyright_url ? page.copyright_url : page.permalink
  - let license = page.license ? page.license : theme.post_copyright.license
  - let license_url = page.license_url ? page.license_url : theme.post_copyright.license_url
  .post-copyright
    .post-copyright__title
      span.post-copyright-info
        h #[=page.title] | #[=page.description]
    .post-copyright__type
      span.post-copyright-info
        a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
    .post-copyright-m
      .post-copyright-m-info
        .post-copyright-a
          h 作者
          .post-copyright-cc-info
            h=author
        .post-copyright-c
          h 发布于
          .post-copyright-cc-info
            h=date(page.date, config.date_format)
        .post-copyright-u
          h 更新于
          .post-copyright-cc-info
            h=date(page.updated, config.date_format)
        .post-copyright-c
          h 许可协议
          .post-copyright-cc-info
            a.icon(rel='noopener' target='_blank' title='Creative Commons' href='https://creativecommons.org/')
              i.fab.fa-creative-commons
            a(rel='noopener' target='_blank' title=license href=url_for(license_url))=license

修改 \themes\butterfly\source\css\_layout\post.styl, 在大概190行的iframe下面修改：

下面的样式个人经过个性化修改，请自行判断需要部分并进行相应调整。

  .post-copyright
    position: relative
    margin: 40px 0 10px
    padding: 10px 16px
    border: 1px solid var(--light-grey)
    transition: box-shadow .3s ease-in-out
+    overflow: hidden
+    border-radius: 12px!important
+    background-color: #ffffff

	&:before
      @extend .fontawesomeIcon
      position: absolute
-      top: 2px
+      top: -120px
-      right: 12px
+      right: -30px
      color: $theme-color
      content: '\f1f9'
-      font-size: 1.3em
+      font-size: 14em
+      opacity: .6
    
    &:hover
      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)

    .post-copyright
      &-meta
        color: $light-blue
        font-weight: bold

      &-info
        padding-left: 6px

        a
-          text-decoration: underline
+          text-decoration: none
          word-break: break-word

          &:hover
            text-decoration: none

+  .post-copyright-cc-info
+    color: $theme-color;

然后在最底下加上这些：

.post-copyright-m-info
  .post-copyright-a,
  .post-copyright-c,
  .post-copyright-u
    display: inline-block
    width: fit-content
    padding: 2px 5px

[data-theme="dark"]
  #post
    .post-copyright
      background-color: #07080a
      text-shadow: #bfbeb8 0 0 2px
      border: 1px solid rgb(19 18 18 / 35%)
      box-shadow: 0 0 5px rgb(20, 120, 210)
      animation: flashlight 1s linear infinite alternate
  .post-copyright-info
    color: #e0e0e4

#post
  .post-copyright__title
    font-size: 22px
  .post-copyright__notice
    font-size: 15px
  .post-copyright
    box-shadow: 2px 2px 5px

---

1. Butterfly布局调整———相关推荐版块侧栏卡片化 | Akilarの糖果屋 ↩︎

2. （二创）Copyright-beautify | Akilar の糖果屋 ↩︎