Acrylic 主题自定义一：新增开发参考文档页面

将浏览器中书签的网站在博客中备份

新增页面

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    nav:
    menu:
      开发:
        url: false
        child:
          开发文档:
            url: /docs/
            icon: fas fa-laptop-code
            
    # 开发参考文档
    docs: true

  2. 新增页面类型

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

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

    1
    2
    3
    4
    5
    ---
    title: 开发参考文档
    type: docs
    comments: true
    ---

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

    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
    docs_list:
      - type: API
        description: 'HTML/CSS/JS API 查询网站'
        child: 
          - title: "MDN"
            img: "https://developer.mozilla.org/apple-touch-icon.6803c6f0.png"
            url: "https://developer.mozilla.org/zh-CN"
            description: "MDN Web docs"
          - title: "HTML Reference"
            img: "https://htmlreference.io/images/html-reference-icon.png"
            url: "https://htmlreference.io/"
            description: "A free guide to all HTML elements and attributes"
          - title: "CSS Reference"
            img: "https://cssreference.io/images/css-reference-icon.png"
            url: "https://cssreference.io/"
            description: "A free visual guide to CSS"
          - title: "菜鸟教程"
            img: "https://static.runoob.com/images/favicon.ico"
            url: "https://www.runoob.com/"
            description: "学的不仅是技术，更是梦想"
      - type: 框架
        description: '前端框架'
        child: 
          - title: "Vue"
            img: "https://cn.vuejs.org/logo.svg"
            url: "https://cn.vuejs.org/"
            description: "渐进式 JavaScript 框架"
          - title: "React"
            img: "https://image.dreamruins.com/images/react.svg"
            url: "https://react.docschina.org/"
            description: "用于构建 Web 和原生交互界面的库"
          - title: "Angular"
            img: "https://angular.cn/assets/images/logos/angular/angular.svg"
            url: "https://angular.cn/"
            description: "现代 Web 开发平台"

  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 'docs': %>
                    <%- partial('page/docs') %>
                <% 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 下新建代码文件 docs.ejs，HTML 代码就写在这里面

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

  6. 引入样式文件

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

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

页面开发

页面设计参考张洪大佬的博客

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<% if (theme.docs) { %>
<div id="docs-page">
  <h1 class="docs-title"> 开发参考文档 </h1>
  <% site.data.docs.docs_list.forEach(data => { %> 
    <h2 class="docs-type"><%= data.type %></h2>
    <div class="docs-description"><%= data.description %></div>
    <div class="docs-list">
      <% data.child.forEach(item => { %> 
        <div class="docs-list-item">
          <a href="<%= item.url %>" rel="external nofollow" title="<%= item.title %>" target="_blank">
            <img src="<%= item.img %>" alt="<%= item.title %>">
            <div class="docs-item-info">
              <span class="docs-item-name"><%= item.title %></span>
              <span class="docs-item-desc" title="<%= item.description %>"><%= item.description %></span>
            </div>
          </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
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
#docs-page {
  margin-top: 1rem;
  overflow-wrap: break-word;
}

#docs-page .docs-title,
#docs-page .docs-type {
  margin: 0;
}

#docs-page .docs-title {
  text-align: center;
}

#docs-page .docs-description {
  margin: 0;
  color: var(--ruins-secondtext);
}

#docs-page .docs-list {
  padding: 0;
  margin: 0.5rem -6px 1rem -6px;
  overflow-x: hidden;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}

#docs-page .docs-list .docs-list-item {
  display: flex;
  height: 90px;
  line-height: 18px;
  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(--ruins-shadow-border);
  background: var(--ruins-card-bg);
}

#docs-page .docs-list .docs-list-item:hover {
  transform: scale(1);
  background: var(--ruins-theme);
  border: var(--style-border-hover);
  box-shadow: var(--ruins-shadow-main);
}

#docs-page .docs-list .docs-list-item a {
  display: flex;
  border: none;
  width: 100%;
  height: 100%;
  align-items: center;
  color: var(--ruins-fontcolor);
  text-decoration: none;
  font-weight: bold;
  padding: 0 4px;
  border-radius: 4px 4px 0 0;
}

#docs-page .docs-list .docs-list-item a img {
  display: block;
  object-fit: cover;
  border-radius: 6px;
  margin: 15px 20px 15px 15px;
  background: var(--ruins-background);
  min-width: 60px;
  min-height: 60px;
  width: 60px;
  height: 60px;
  transition: all 0.3s ease 0s;
}

#docs-page .docs-list .docs-list-item:hover a img {
  transition: 0.4s;
  width: 0;
  height: 0;
  opacity: 0;
  margin: 0.5rem;
  min-width: 0px;
  min-height: 0px;
}

#docs-page .docs-list .docs-list-item .docs-item-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(100% - 90px);
  height: fit-content;
}

#docs-page .docs-list .docs-list-item:hover .docs-item-info {
  min-width: calc(100% - 20px);
}

#docs-page .docs-list .docs-item-info .docs-item-name {
  display: block;
  padding: 0px 10px 0px 0px;
  font-weight: 700;
  font-size: 1.43em;
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-size: 19px;
  line-height: 20px;
  color: var(--ruins-fontcolor);
}

#docs-page .docs-list .docs-list-item:hover .docs-item-info .docs-item-name {
  color: var(--ruins-white);
}

#docs-page .docs-list .docs-item-info .docs-item-desc {
  white-space: normal;
  padding: 5px 10px 16px 0;
  color: var(--ruins-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;
  font-size: 0.93em;
}

#docs-page .docs-list .docs-list-item:hover .docs-item-info .docs-item-desc {
  overflow: hidden;
  width: 100%;
  color: var(--ruins-white);
}

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

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

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

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

页面最终效果，请参考我博客的 参考文档