Update record

2021-12-15: official version v1 0

1. Override related_posts.js file, following the layout of the latest article
2. Adjust the linkage content with related tutorials

Train of thought analysis

I haven't noticed before that compared with other layouts, the native recommendation section of butterfly is too abrupt (mainly without rounded corners), which suddenly appears between the article and the comment area, including me and me @II I think it's necessary to change this (but I don't want the sidebar party), @Hong Ge Yes, it integrates well with the whole text (is it the color matching effect?). Due to my habit of being frugal, I usually don't directly delete some existing functions of the theme, so what should I do with such a large recommended section? What I do is throw it into the sidebar where I can freely control the display and hiding. I can also use the SAO UI and fixed card style on the side bar of the mobile phone I wrote before.

First of all, locate the source code of the sidebar card. Use F12 to determine its class as relatedPosts. Then search the topic source code globally and find that it is not generated in pug, but processed through a helper function of hexo, that is, butterfly\scripts\helpers\related_post.js, fortunately, I have been fully exposed to this situation when writing plug-ins. The first step is to copy the html source code of the latest article sidebar card in F12, and then beautify this part of the source code to get the skeleton.

<div class="card-widget card-recent-post">

<div class="item-headline"><i class="fas fa-history"></i><span>Latest article</span>
</div>

<div class="aside-list">

  <div class="aside-list-item">

    <a class="thumbnail" href="/posts/451ac5f8/" title="Butterfly fixed card widget">
      <img src="https://cdn.jsdelivr.net/npm/akilar-candyassets/image/cover1.webp" alt="cover" >
    </a>
    <div class="content">
      <a class="title" href="/posts/451ac5f8/" title="Butterfly fixed card widget">Butterfly fixed card widget</a>
      <time datetime="2021-12-09T02:03:59.000Z" title="Published in 2021-12-09 10:03:59">2021-12-09</time>
    </div>
  </div>

</div></div>

At this step, we can basically find that the element variables of the recommended section and the latest article section are almost the same, so we can easily move them here. Here, I can also directly use some class names, so that I can inherit the existing css style and save me the effort to write the UI. Then find related_ posts. The html code construction part in JS is assembled according to the skeleton and existing variables analyzed above.

Magic change steps

Preview effect

1. Modify [Blogroot]\themes\butterfly\scripts\helpers\related_post.js, from about 47 lines to 70 lines.

• diff code block
• Change completed code block

2. Because the original section is at the bottom of the article, now we need to change it to the sidebar. Therefore, you need to modify [blogroot] \ themes \ butterfly \ layout \ post Pug at about 26 lines, first remove the recommendation section at the bottom of the article.

  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

3. Then modify [blogroot] \ themes \ butterfly \ layout \ includes \ widget \ index Pug, each version of this file looks different. Here is for reference only. Because I feel that the articles also exist at the same time as the latest articles and recommended articles, the latest articles seem a little redundant, so I annotated the sidebar card of the latest articles.

#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_recent_post', {}, {cache:theme.fragment_cache})
        !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})

4. So if you still use what I wrote fixed sidebar card style If so, remember to change the configuration item over there and modify [Blogroot]\_config.butterfly.yml

  #Sidebar suspension card control button
  #https://akilar.top/posts/451ac5f8/
  fixed_card_widget:
    enable: true
    page:  #Page display button
      - type: class #Sidebar card selector type
        name: card-info #Sidebar card selector name
        index: 0 #Sidebar card selector sequence
        icon: fas fa-address-book #Icon
        title: User information #Hover display prompt
      - type: class
        name: card-clock
        index: 0
        icon: fas fa-cloud-sun
        title: Electronic clock
      - type: class
        name: card-shuo
        index: 0
        icon: fas fa-comments
        title: Broken thoughts
      - type: class
        name: card-recent-post
        index: 0
        icon: fas fa-history
        title: Latest article
      - type: id
        name: card-newest-comments
        index: 0
        icon: fas fa-comment-dots
        title: Latest comments
      - type: class
        name: card-tags
        index: 0
        icon: fas fa-tags
        title: label
      - type: class
        name: card-webinfo
        index: 0
        icon: fas fa-chart-line
        title: Website consultation
    post: #Article page display button
      - type: class
        name: card-info
        index: 0
        icon: fas fa-address-book
        title: User information
      - type: class
        name: card-clock
        index: 0
        icon: fas fa-cloud-sun
        title: Electronic clock
      - type: class
-       name: card-recent-post
+       name: card-recommend-post
        index: 0
-       icon: fas fa-history
+       icon: fas fa-dharmachakra
-       title: Latest article
+       title: Relevant recommendations

5. After the changes are completed, you can see the completion effect by running hexo clean, hexo generate and hexo server.