hexo-Fluid主题-创建仿关于（about）页面的步骤

本文最后更新于：December 3, 2021 pm

创建类似于about页面的效果的方法步骤。

目录

本文以建一个资料库页面（databases）为例，页面效果类似与关于（about）页面。

第一步

利用hexo新建一个页面。输入以下命令。

1
hexo new page databases

在根目录下的source 文件夹中找到 databases 文件夹，并打开里面的index.md文件。

第二步

在根目录下的source 文件夹中找到 databases 文件夹，并打开里面的index.md文件。
在头部里面添加以下代码：

1
2
layout: databases 
//此databases可以任取，但为方便管理，推荐这样取名。并且需要记住此名称，因为后面还需要用到。

第三步

找到主题配置文件，注意，不是根目录的配置文件，是themes文件夹里面的配置文件，即你下载的主题里面的配置文件。

再在配置文件里面，找到类似的代码的地方。不一定和这个一模一样的，找到类似的代码的地方即可。如：友链页、自定义页、关于页、标签页、分类页、归档页等写配置的地方。

1
2
3
4
5
6
7
8
9
10
11
#---------------------------
# 404页
# 404 Page
#---------------------------
page404:
  enable: true
  banner_img: avter.png
  banner_img_height: 85
  banner_mask_alpha: 0.3
  subtitle: "Page not found"

第四步

添加页面配置代码。根据以下代码可以自行修改，或者是根据关于（about）的配置代码进行修改。
注意：这里的databases就是在index.md里面写的那个名称。

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
#---------------------------
# 资料库
# databases Page
#---------------------------
databases:
  enable: true
  banner_img: avter.png
  banner_img_height: 60
  banner_mask_alpha: 0.3
  subtitle: 资料库 # 打字机内容,即页面显示的内容



#---------------------------
# 关于页
# About Page
#---------------------------
about:
  enable: true
  banner_img: avter.png
  banner_img_height: 60
  banner_mask_alpha: 0.3
  subtitle: 关于写者 # 打字机内容
  avatar: avter.png # 头像图片
  name: "墨水的记忆"
  introduce: "青春是用来奋斗的。如果有理想，就努力去实现T。"
  icons:
    - { class: "iconfont icon-qq-fill", link: "", tip: "顽强" }
    - { class: "iconfont icon-wechat-fill", link: "", tip: "拼搏" }
    - { class: "iconfont icon-alipay-fill", link: "", tip: "奋斗" }
    - { class: "iconfont icon-map", link: "", tip: "坚持" }


第五步

这也是最重要的一步。添加文件。在主题目录（themes文件夹）下，打开自己的主题文件夹，找到 layout 文件夹，再在里面找到 about.ejs 文件（根据自行的配置，找对应的文件）。复制一份，并将其命名为 databases.ejs （名称即在第四步中的那个名称）。

第六步

修改刚复制好的文件里面的代码。

首先，这是被复制的文件的代码（根据自行的配置，所选的文件不同，代码可能不同），即 about.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
42
43
44
45
46
47
48
49
50
51
<%
page.layout = "about"
page.title = theme.about.title || __('about.title')
page.subtitle = theme.about.subtitle || __('about.subtitle')
page.banner_img = theme.about.banner_img
page.banner_img_height = theme.about.banner_img_height
page.banner_mask_alpha = theme.about.banner_mask_alpha
%>

<div class="text-center">
  <div class="about-info">
    <div class="about-name"><%- theme.about.name %></div>
    <div class="about-intro"><%- theme.about.introduce %></div>
    <div class="about-icons">
      <% for(const each of theme.about.icons || []) { %>
        <% if (!each.class) continue; %>
        <% var cls = each.class %>
        <% var isQr = each.qrcode %>
        <a href="<%= isQr ? 'javascript:;' : url_for(each.link) %>" class="<%= isQr ? 'qr-trigger' : '' %>
           <%= !isQr && each.tip ? 'hint--bottom hint--rounded' : '' %>"
           <%= !isQr && each.tip ? 'aria-label=' + each.tip : '' %>
        >
          <i class="<%= cls %>" aria-hidden="true"></i>
          <% if (isQr) { %>
            <img class="qr-img" src="<%= url_for(each.qrcode) %>" alt="qrcode" />
          <% } %>
        </a>
      <% } %>
    </div>
  </div>
</div>

<article class="about-content mt-5">
  <div class="markdown-body">
    <%- page.content %>
  </div>

  <% if(page.comments) { %>
    <!-- Comments -->
    <article class="comments" id="comments">
      <% var type %>
      <% if (typeof page.comment === 'string' && page.comment !== '') { %>
        <% type = '_partial/comments/' + page.comment %>
      <% } else { %>
        <% type = '_partial/comments/' + theme.post.comments.type %>
      <% } %>
      <%- partial(type) %>
    </article>
  <% } %>
</article>

然后修改，其实就只是修改了第三行的代码，其他的都没有改变。将第三行代码原来的 about 改为了 databases 而已。这个名称就是第四步里面的名称。

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
<%
page.layout = "about"
page.title = theme.about.title || __('about.title')
page.subtitle = theme.databases.subtitle || __('databases.subtitle')
page.banner_img = theme.about.banner_img
page.banner_img_height = theme.about.banner_img_height
page.banner_mask_alpha = theme.about.banner_mask_alpha
%>

<div class="text-center">
  <div class="about-info">
    <div class="about-name"><%- theme.about.name %></div>
    <div class="about-intro"><%- theme.about.introduce %></div>
    <div class="about-icons">
      <% for(const each of theme.about.icons || []) { %>
        <% if (!each.class) continue; %>
        <% var cls = each.class %>
        <% var isQr = each.qrcode %>
        <a href="<%= isQr ? 'javascript:;' : url_for(each.link) %>" class="<%= isQr ? 'qr-trigger' : '' %>
           <%= !isQr && each.tip ? 'hint--bottom hint--rounded' : '' %>"
           <%= !isQr && each.tip ? 'aria-label=' + each.tip : '' %>
        >
          <i class="<%= cls %>" aria-hidden="true"></i>
          <% if (isQr) { %>
            <img class="qr-img" src="<%= url_for(each.qrcode) %>" alt="qrcode" />
          <% } %>
        </a>
      <% } %>
    </div>
  </div>
</div>

<article class="about-content mt-5">
  <div class="markdown-body">
    <%- page.content %>
  </div>

  <% if(page.comments) { %>
    <!-- Comments -->
    <article class="comments" id="comments">
      <% var type %>
      <% if (typeof page.comment === 'string' && page.comment !== '') { %>
        <% type = '_partial/comments/' + page.comment %>
      <% } else { %>
        <% type = '_partial/comments/' + theme.post.comments.type %>
      <% } %>
      <%- partial(type) %>
    </article>
  <% } %>
</article>