Acrylic主题自定义三：修改部分功能

修改页脚

主题默认页脚功能和个人需求有些差异，小改一下

修改页脚导航

页脚的导航功能不太需要，但不写内容也会占空间，不太好看，修改一下结构，需要使用才显示

  1. 修改主题配置文件

    1
    2
    3
    4
    5
    6
    7
    # 页脚
    footer:
      group:
      	# 是否显示
        enable: false
        # 导航列表
        list:

  2. 修改代码

    需要修改的代码位置 themes/Acrylic/layout/partial/footer.ejs，根据 id="heo-footer" 找到代码位置，进行替换

    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
    <div id="heo-footer" style="display: <%= theme.footer.group.enable ? 'block' : 'none' %>;">
        <% for(const x in theme.footer.group.list){ %>
            <div class="footer-group">
                <h3 class="footer-title"><%= x %></h3>
                <div class="footer-links">
                    <% for(const y in theme.footer.group.list[x]){ %>
                        <a class="footer-item" href="<%= url_for(theme.footer.group.list[x][y]) %>" title="<%= y %>" rel="noopener external nofollow noreferrer"><%= y %></a>
                    <% } %>    
                </div>
            </div>
        <% } %>
      	<%# 以下为友链内容无需修改 %>
        <% if(theme.footer.randomlink){ %>
            <div class="footer-group">
                <div class="footer-title-group">
                    <h3 class="footer-title">友链</h3>
                    <a class="random-friends-btn" href="javascript:randomLinksList();" rel="external nofollow">
                        <i class="fa-solid fa-arrow-rotate-right"></i>
                    </a>
                </div>
                <div class="footer-links" id="friend-links-in-footer">
                </div>
            </div>
        <% } %>
    </div>

修改页脚链接

有些社区使用链接不太方便，于是乎修改成左边使用链接，右边使用账号或码

  1. 修改主题配置文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # 页脚
    footer:
      information:
        left:
          Github:
            icon: fa-brands fa-github
            url: https://github.com/Dream-ruins
          Mail:
            icon: fa-solid fa-envelope
            url: mailto:thedreamruins@163.com
        right:
          QQ:
            icon: fa-brands fa-qq
            code: 2548116435
          Steam:
            icon: fa-brands fa-steam
            code: 896813506

  2. 修改代码

修改 Logo 悬浮效果

个人感觉 Logo 悬浮效果有些僵硬，小改一下

需要修改的代码位置 themes/Acrylic/source/css/main.css，替换成下列代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#nav #site-name:after {
  content: "";
  background: url(/img/theme/home.png) no-repeat 50% 50%;
  position: absolute;
  display: flex;
  z-index: 1;
  width: 74px;
  height: 58px;
  transform: scale(0);
  transition: .2s ease-in;
}  

#nav #site-name:hover:after {
  transform: scale(0.3);
}

👇下面是网站名称文字的缩放效果

需要修改的代码位置 themes/Acrylic/source/css/custom.css，替换成下列代码

1
2
3
4
5
6
7
8
9
10
.heoicon {
  transition: .2s ease-in;
  padding: 0 2px;
}

@media screen and (min-width: 900px){
    #page-header #nav a:hover .heoicon{
      transform: scale(0);
    }
}

修改 ICP

添加 ICP 图标

ICP 图标：ICP

将 ICP 图片添加到 themes/Acrylic/source/img

需要修改的代码位置 themes/Acrylic/layout/partial/footer.ejs，根据 theme.site.icp 找到代码位置，进行替换

1
2
3
4
5
6
<% if(theme.site.icp){ %>
    <a class="footer-banner-link" target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index" rel="noopener external nofollow noreferrer noopener">
        <img class="icp" src="/img/icp.png" alt="icp">
        <%= theme.site.icp %>
    </a>
<% } %>

需要修改的代码位置 themes/Acrylic/source/css/main.css，新增下列代码

1
2
3
4
5
.icp {
  width: 18px;
  height: 18px;
  vertical-align: text-bottom;
}

修改主题组件文件夹名称

发现主题的组件文件夹名称拼写错误，纠正一下

文件夹路径 themes/Acrylic/layout/partial/compoment

将 compoment 改成 component，可以使用 IDE 全局替换

修改关闭音乐模块模块遗存

我发现关闭主题音乐模块，还有部分 HTML 遗留

通过全局搜索 /third-party/music 定位代码位置 themes/Acrylic/layout/layout.ejs

将

1
<%- partial('partial/component/third-party/music', {cache: true}) %>

替换成

1
2
3
<% if(theme.thirdparty.aplayer.enable){ %>
    <%- partial('partial/component/third-party/music', {cache: true}) %>
<% } %>

复用侧边栏标签模块

查看代码时发现 themes/Acrylic/layout/partial/sidebar.ejs 中的标签模块和 themes/Acrylic/layout/partial/component/aside/asideTag.ejs 的代码是一样的，所以决定直接进行复用

将 themes/Acrylic/layout/partial/sidebar.ejs 中的

1
2
3
4
5
6
7
<div class="card-tag-cloud">
    <% site.tags.data.forEach(data => { %>
        <a href="<%= url_for(data.path) %>" style="font-size: 1em; color: #d3d3d3"><%= data.name %>
            <sup><%= data.length %></sup>
        </a>
    <% }) %>
</div>

替换成

1
<%- partial('partial/component/aside/asideTag', {cache: true}) %>

该文章会根据是否发现问题来决定是否更新