Acrylic主题自定义四：新增按钮模版页面

将个人收集的按钮效果进行展示

新增页面

  1. 需要在主题配置文件_config.Acrylic.yml新增菜单

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    nav:
    menu:
      开发:
        url: false
        child:
          按钮模版:
            url: /button/
            icon: fas fa-tablet-button
            
    # 模版
    template: true

  2. 新增页面类型

    在博客项目根目录下执行命令 hexo new page button

    Hexo 会在 source 文件夹新建一个 button 文件夹，文件夹下有一个 index.md 文件，文件内容修改如下

    1
    2
    3
    4
    5
    ---
    title: 按钮模版
    type: button
    comments: true
    ---

  3. 新增模版内容文件
    在 source/_data 中新建 button.yml 文件，文件结构如下

    • name：按钮名称
    • abbrlink：文章编码（需要使用 hexo-abbrlink ）
    • path：模版资源路径（使用相对路径）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    button_list:
      light:
        - name: btn-1
          abbrlink: 3d97474c
          path: "/assets/template/button/btn-1.html"
      dark:
        - name: btn-3
          abbrlink: d3992660
          path: "/assets/template/button/btn-3.html"

  4. 在代码中添加页面类型

    在 themes/Acrylic/layout/page.ejs 中新增页面类型，修改后的代码如下

    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
    <main class="layout <%= page.aside ? '' : 'hide-aside' %>" id="content-inner">
        <div id="page">
            <% switch (page.type) {
                case 'categories': %>
                    <%- partial('page/categories') %>
                <% break;
                case 'tags': %>
                <%- partial('page/tags') %>
                <% break;
                case 'links': %>
                    <%- partial('page/links') %>
                <% break;
                case 'about': %>
                    <%- partial('page/about') %>
                <% break;
                // 按钮模版 start
                case 'button': %>
                    <%- partial('page/button') %>
                <% break;
                // 按钮模版 end
                case 'says': %>
                    <%- partial('page/says') %>
                <% break;
                case 'album': %>
                    <%- partial('album/album') %>
                <% break;
                case 'album_detail': %>
                    <%- partial('album/album_detail') %>
                <% break;
                default: %>
                    <%- partial('page/page') %>
                <% break;
            } %>
            <% if(page.comment){ %>
                <%- partial('partial/component/third-party/comments/comment') %>
            <% } %>
        </div>
        <% if(page.aside){ %>
            <%- partial('partial/component/aside/aside') %>
        <% } %>
    </main>

  5. 新增页面代码文件

    在 themes/Acrylic/layout/page 下新建代码文件 button.ejs，HTML 代码就写在这里面

    在 themes/Acrylic/source/css 下新建代码文件 template.css，CSS 代码就写在这里面

  6. 引入文件

    在 themes/Acrylic/layout/partial/head.ejs 中引入 template.css，需要在 var.css 和 main.css 之后引用

    1
    <link rel="stylesheet" href="/css/template.css">

页面开发

  • HTML 代码文件位置 themes/Acrylic/layout/page/button.ejs

  • CSS 代码文件位置 themes/Acrylic/source/css/template.css

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
<% if (theme.template) { %>
  <div id="template-page">
    <h1 class="template-title"> 按钮模版 </h1>
    <div class="template-description"> Click on the name to view the code </div>
    <h2 class="template-type">明亮风格</h2>
    <div class="template-list">
      <% site.data.button.button_list.light.forEach(item=> { %>
        <div class="template-list-item">
          <a class="template-container" target="_blank">
            <iframe src="<%- item.path %>" frameborder="0"></iframe>
          </a>
          <a class="template-item-name" href="<%= url_for('/template/'+item.abbrlink) %>"><%= item.name %></a>
        </div>
      <% }) %>
    </div>
    <hr>
    <h2 class="template-type">暗黑风格</h2>
    <div class="template-list">
      <% site.data.button.button_list.dark.forEach(item=> { %>
        <div class="template-list-item">
          <a class="template-container" target="_blank">
            <iframe src="<%- item.path %>" frameborder="0"></iframe>
          </a>
          <a class="template-item-name" href="<%= url_for('/template/'+item.abbrlink) %>">
            <%= item.name %>
          </a>
        </div>
      <% }) %>
    </div>
  </div>
<% } %>
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
#template-page {
  margin: 1rem;
  overflow-wrap: break-word;
}

#template-page .template-title {
  margin: 0;
  text-align: center;
}

#template-page .template-description {
  margin: 0;
  color: var(--ruins-secondtext);
  text-align: center;
}

#template-page .template-type {
  margin: 12px;
}

#template-page .template-list {
  padding: 0;
  overflow-x: hidden;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}

#template-page .template-list .template-list-item {
  display: flex;
  width: calc(20% - 12px);
  height: 160px;
  line-height: 18px;
  margin: 6px 6px;
  transition: 0.3s;
  border-radius: 12px;
  transition-timing-function: ease-in-out;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#template-page .template-list .template-list-item a {
  height: calc(100% - 8px - 24px);
}

#template-page .template-list .template-list-item .template-item-name {
  color: var(--ruins-fontcolor);
  text-shadow: none;
  display: block;
  height: 24px;
  line-height: 24px;
  cursor: pointer;
  margin-top: 8px;
  font-size: 1rem;
}

#template-page .template-list .template-list-item iframe {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

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

@media screen and (max-width: 1024px) {
  #template-page .template-list .template-list-item {
    width: calc(33.33% - 12px) !important;
  }
}

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

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

按钮模版

在 source/assets 文件夹下存储模版资源文件

注：需要在 _config.yml 中将 assets 文件夹添加至编译忽略列表中

1
2
skip_render:
  - 'assets/**'

我的按钮模版资源文件夹结构 source/assets/template/button/

可以根据自己的习惯自定义，引入模版资源时，根据自己的结构引入即可

在按钮模版资源文件夹下新建模版文件 btn-1.html，代码如下

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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BTN-1</title>
  <style>
    body {
      height: 160px;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
    }

    @keyframes btn-1 {
      0% {
        color: #8ca7d0;
      }

      50% {
        color: #e9f0ff;
      }

      100% {
        color: #8ca7d0;
      }
    }

    .btn-1 {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: linear-gradient(-45deg, #fff, #e9f0ff);
      box-shadow: 4px 4px 5px 0 rgba(166, 180, 211, 0.2);
      color: #8ca7d0;
      border: none;
      cursor: pointer;
    }

    .btn-1:hover {
      animation: btn-1 .8s ease infinite;
    }
  </style>
</head>

<body>
  <button class="btn-1">BTN-1</button>
</body>

</html>

页面最终效果，请参考我博客的 按钮模版