IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
    • 登录 注册

    Butterfly如何自定义页面，简单明了！创建自己的网站收藏页面

    JayHrn发表于 2023-12-19 09:35:28
    love 0

    用了这么久的Butterfly主题了，也对这个主题有了一定的了解了，随着使用的次数增加，对它的要求也就越来越高了，看到别人好多的新功能，就想着自己也应该做些让自己方便的事情了。毕竟博客就是为了方便自己（记笔记、回顾知识等），所以就想着有些自定义的页面，这样自己网站也不会太单调。

    这篇教程就是针对Butterfly主题如何实现自定义页面的。

    详解

    首先，我们需要了解Butterfly主题是怎么识别不同的页面的。当然，你得了解一点点前端的东西，其实就不难理解主题中的每一个文件的作用了。

    一开始我们是不是不太明白为什么创建友链的时候创建link页面的时候需要加上type: "link"。其实这个就是告诉主题我们这个页面是特殊的页面。打开themes/butterfly/layout/page.pug文件，

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    extends includes/layout.pug

    block content
      #page
        if top_img === false
          h1.page-title= page.title

        case page.type
          when 'tags'
            include includes/page/tags.pug
          when 'link'
            include includes/page/flink.pug
          when 'categories'
            include includes/page/categories.pug
          when 'stars'
            include includes/page/stars.pug
          default
            include includes/page/default-page.pug

        if page.comments !== false && theme.comments && theme.comments.use
          - var commentsJsLoad = true
          !=partial('includes/third-party/comments/index', {}, {cache: true})

    可以看到，这里会选择页面的类型，进入不同的页面。即when 'link'进入的就是友情链接页面，其他同理。

    打开themes/butterfly/layout/includes/page文件，我们可以看到有flink.pug，tags.pug等，这些就是这个页面的代码了，需要自定义的小伙伴可以在里面进行修改。

    创建自定义页面

    看了上面的讲解，是不是已经了解了如何自定义页面了呢。

    下面就是关于我是如何实现网站收藏页面的过程（顶部大图模块可以自行f12取），你可以参考自行选择。

    创建页面

    1. 在博客根目录输入hexo new page stars，在source/stars/index.md的头部输入type: "stars"

    2. 在themes/butterfly/layout/includes/page文件下新建stars.pug文件

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      .flink#article-container
          if site.data.stars
              each i in site.data.stars
                  if i.class_name
                      h2!= i.class_name
                  if i.class_desc
                      .flink-desc!=i.class_desc
                  .flink-list
                      each item in i.link_list
                          .flink-list-item
                              a(href=url_for(item.link)  title=item.name target="_blank")
                                  - var urlNoProtocol = item.link.replace(/^https?\:\/\//i, "")
                                  - var imgUrl = "https://api.iowen.cn/favicon/" + urlNoProtocol + ".png"
                                  img.flink-avatar.entered.loaded(src=url_for(imgUrl) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name)
                                  .img-alt.is-center= item.name
                                  .flink-item-info
                                      span.flink-item-name= item.name
                                      span.flink-item-desc(title=item.descr)= item.descr
          != page.content

    引入页面

    修改themes/butterfly/layout/page.pug文件，注意对齐

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    extends includes/layout.pug

    block content
      #page
        if top_img === false
          h1.page-title= page.title

        case page.type
          when 'tags'
            include includes/page/tags.pug
          when 'link'
            include includes/page/flink.pug
          when 'categories'
            include includes/page/categories.pug
    +      when 'stars'
    +        include includes/page/stars.pug
          default
            include includes/page/default-page.pug

        if page.comments !== false && theme.comments && theme.comments.use
          - var commentsJsLoad = true
          !=partial('includes/third-party/comments/index', {}, {cache: true})

    引入样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    .flink#article-container .flink-desc {
        margin: 0.2rem 0px 0.5rem;
    }

    .flink#article-container .flink-list {
        overflow: auto;
        padding: 10px 10px 0px;
        text-align: center;
    }

    .flink#article-container .flink-list > .flink-list-item {
        position: relative;
        float: left;
        overflow: hidden;
        margin: 15px 7px;
        width: calc(25% - 12px);
        height: 90px;
        border-radius: 5px;
        line-height: 17px;
        transform: translateZ(0px);
        transition: all 0.3s ease 0s;
    }

    @media screen and (max-width: 1200px) {
        .flink#article-container .flink-list > .flink-list-item {
            width: calc(25% - 12px) !important;
        }
    }

    @media screen and (max-width: 1024px) {
        .flink#article-container .flink-list > .flink-list-item {
            width: calc(33.3333% - 12px) !important;
        }
    }

    @media screen and (max-width: 768px) {
        .flink#article-container .flink-list > .flink-list-item {
            width: calc(50% - 12px) !important;
        }
    }

    @media screen and (max-width: 600px) {
        .flink#article-container .flink-list > .flink-list-item {
            width: calc(100% - 12px) !important;
        }
    }

    .flink#article-container .flink-list > .flink-list-item:hover {
        background: rgb(0, 108, 242);
        transform: scale(1.05);
    }

    .flink#article-container .flink-list > .flink-list-item a {
        color: var(--Jay-fontcolor);
        text-decoration: none;
    }

    .flink#article-container .flink-list > .flink-list-item a img {
        float: left;
        margin: 15px 10px;
        width: 60px;
        height: 60px;
        border-radius: 35px;
        transition: all 0.3s ease 0s;
    }

    .flink#article-container .flink-list > .flink-list-item a .img-alt {
        display: none;
    }

    .flink#article-container .flink-list > .flink-list-item a .flink-item-name {
        display: block;
        padding: 16px 10px 0px 0px;
        height: 40px;
        font-weight: 700;
        font-size: 1.43em;
    }

    .flink#article-container .flink-list > .flink-list-item a .flink-item-desc {
        display: block;
        padding: 16px 10px 16px 0px;
        height: 50px;
        font-size: 0.93em;
    }
    .flink#article-container .flink-list {
        padding: 0;
        margin: 1rem -6px 0 -6px;
        overflow-x: hidden;
    }

    .flink#article-container .flink-desc {
        margin: 0;
    }

    .flink#article-container .flink-list > .flink-list-item a .flink-item-desc {
        white-space: normal;
        padding: 5px 10px 16px 0;
        color: var(--Jay-fontcolor);
        text-align: left;
        height: 40px;
        text-overflow: ellipsis;
        opacity: 0.7;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .flink#article-container .flink-list > .flink-list-item:hover a .flink-item-desc {
        color: var(--Jay-white);
    }

    .flink-list-item .flink-item-info {
        max-width: 136px;
        overflow: hidden;
    }

    .flink-list-item:hover .flink-item-info {
        max-width: 100%;
    }

    .flink#article-container .flink-list > .flink-list-item a .flink-item-name {
        text-align: left;
        font-size: 19px;
        color: var(--Jay-fontcolor);
    }

    .flink#article-container .flink-list > .flink-list-item:hover a .flink-item-name {
        color: var(--Jay-white);
    }

    .flink#article-container .flink-list > .flink-list-item a {
        display: flex;
        border: none;
    }

    .flink#article-container .flink-list > .flink-list-item a:hover {
        background: none;
    }

    /* 友链头像 */
    .flink#article-container .flink-list > .flink-list-item a img {
        border-radius: 32px;
        margin: 15px 20px 15px 15px;
        transition: 0.3s;
        background: var(--Jay-background);
        min-width: 60px;
        min-height: 60px;
    }

    /* 悬浮状态头像 */
    .flink#article-container .flink-list > .flink-list-item:hover a img {
        transition: 0.6s;
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0.5rem;
        min-width: 0px;
        min-height: 0px;
    }

    .flink#article-container .flink-list > .flink-list-item a span {
        transition: 0.3s;
    }

    .flink#article-container .flink-list > .flink-list-item:hover a .flink-item-desc {
        overflow: inherit;
        width: 100%;
    }

    .flink#article-container .flink-list > .flink-list-item {
        margin: 6px 6px;
        transition: 0.3s;
        border-radius: 12px;
        transition-timing-function: ease-in-out;
        position: relative;
        width: calc(20% - 12px);
        border: var(--style-border);
        box-shadow: var(--Jay-shadow-border);
        background: var(--Jay-card-bg);
    }

    .flink#article-container .flink-list > .flink-list-item:hover {
        transform: scale(1);
        background: var(--Jay-theme);
        border: var(--style-border-hover);
        box-shadow: var(--Jay-shadow-main);
    }

    @media screen and (min-width: 1300px) {
        .flink#article-container .flink-list > .flink-list-item:hover {
            transform: scale(1.03);
        }

        .flink#article-container .flink-list > .flink-list-item:active {
            transform: scale(0.97);
        }
    }

    创建网页链接

    上面已经创建好了页面，那么剩下的就是如何将想要收藏的页面发上去了。

    1. 新建source/_data/stars.yml文件，写法和友链页面一样

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      # siteshot就是站点缩略图的链接
      # list_style设置友链样式，不设置默认为butterfly

      - class_name: 设计素材
        class_desc: 为你的设计添加色彩
        list_style: butterfly
        link_list:
          - name: Font Awesome
            link: https://fontawesome.com/
            descr: 一个基于CSS和LESS的字体和图标工具包

      - class_name: 博客资源网
        class_desc: 帮助构建博客的资源网站
        list_style: butterfly
        link_list:
          - name: 百家号
            link: https://baijiahao.baidu.com/
            descr: 创作者打造的集创作、发布、变现于一体的内容创作平台（暂时可图床）

      这里不用填写avatar链接了，因为已经通过api获取了。

    由于博主样式太多，已无法完整获取对应的样式（样式有点乱），所以缺少样式可以f12获取。



沪ICP备19023445号-2号
友情链接