hexo主题教程-顶部滚动通知

更新日期：2022年8月1日
css样式表中已经删去第13行，现在可以直接复制。

修改部分提示内容。

警告
原创作品，谢绝未在文章开头标注原文链接及作者的转载。

前言

本文章并不适合小白，如果你没有基础请自行离开。

提示

  1. 教程基于matery主题。

  2. 涉及对主题源文件的修改，请注意备份。

  3. 请熟知主题文件树结构。

  4. 因使用本教程造成的损失本人概不负责。

:::

一、思路

  • 目标：在页面顶部添加一个容器，内部包含一个图标、通知日期以及滚动的通知内容。

  • 大概框架：

    1
    2
    3
    4
    5
    6
    <!-- 类名经用于功能识别 -->
    <div class='cast_main'>
        <i class="cast_icon"></i>
        <p class="cast_date">日期：2022年7月18日</p>
        <marquee><p class="cast_text"></p></marquee> <!--marquee标签可以让盘标签滚动显示-->
    </div>

  • 理念：

    • 尽量减少对原有文件的修改，新加的内容尽量独立在新的ejs、css、js中。
    • 尽可能使内容可以在配置文件中修改。

  • 其他：css布局、点击事件的js、运用_config.yml。

二、动手环节

1、新建文件部分

cast.ejs

在layout/_partial下新建cast.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
<%- css('css/cast') %>
<!-- 引入css，你也可以将其放在head.ejs中，建议放在此处，放在head.ejs中时，当theme.csat.enable为false时，nav会有2em的空白 -->
<div class="cast" id="cast">
    <% if( theme.cast.icon.enable ) { %>
        <% if (theme.cast.icon.class) { %>
            <i id="casticon" class="<%- theme.cast.icon.class %>"></i>
        <% } else { %>
            <i id="casticon" class="fa-solid fa-bell"></i>
        <% } %>
    <% } %>
    <!-- 4-10 行判断是否使用自定义的fa图标，如果配置文件中留空则使用默认图标 -->
    <% if (theme.cast.date) { %>
        <p class="castdate"><%- theme.cast.date %></p>
    <% } %>
    <!-- 上面三行判断是否显示公告时间 -->
    <marquee class="casttext"><p class="casttextin" title="点击查看更多"><%- theme.cast.text %></p></marquee>
    <!-- 下面的代码判断配置文件中是否填写url，若填写，则插入点击跳转的事件 -->
    <% if(theme.cast && theme.cast.url){ %>
        <script>
            $(".casttextin").click(function(){
                window.open('<%- theme.cast.url %>',"_self");
            })
        </script>
    <% } %>
</div>
<!-- 下面的代码判断是否设置自定义图标颜色 -->
<% if( theme.cast.icon.color ){ %>
    <Style>#casticon{color: <%- theme.cast.icon.color %> ;}</Style>
<% } else { %>
    <Style>#casticon{color: white;}</Style>
<% } %>

cast.css

在 source/css 文件夹下新建 cast.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
32
nav{
    height: calc(64px + 2em);
}
/* 
1-3行增加导航栏的高度，避免造成显示错位。
css未做浏览器兼容，需要的请自行添加-moz等等前缀。
css可能有不必要的项目，请自行修改
*/
.cast{
    display: flex;
    align-items: center;
    height: 2em;
    margin: 0;
    padding: 0.5em;
}
#casticon{
    display: inline-block;
    height: 1em;
}
.casttext{
    direction:left;
}
.castdate{
	text-overflow:ellipsis;
	white-space: nowrap;
}
.cast > *{
    padding: 0 4px;
}
.casttextin{
    cursor: pointer;
}

2、修改部分

header.ejs

修改 header.ejs 使所有页面出现滚动通知，在第二行和第三行之间添加：

1
2
3
4
<% if (theme.cast && theme.cast.enable) { %>
	<%- partial('_partial/cast') %>
<% } %>
<!-- 只有当主题配置文件中包含cast字段和cast.enable的值为true时才引入cast.ejs模板 -->

注意

请注意HTML的嵌套关系，例如对于matery主题，添加的内容应该位于class为 bg-color nav-transparent 的div内，且在class为 nav-wrapper container 的div之前，如我的header.ejs修改后：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
    <!-- 下面三行为添加内容 -->    
	<% if (theme.cast && theme.cast.enable) { %>
		<%- partial('_partial/cast') %>
	<% } %>
     
        <div id="navContainer" class="nav-wrapper container">
            <div class="brand-logo">
                <a href="<%- url_for() %>" class="waves-effect waves-light">
                    <% if (theme.logo !== undefined && theme.logo.length > 0) { %>
                    <img src="<%- theme.jsDelivr.url %><%- url_for(theme.logo) %>" class="logo-img" alt="LOGO">
                    <% } %>
                    <span class="logo-span"><%= config.title %></span>
                </a>
            </div>
            <%- partial('_partial/navigation') %>
        </div>
        <% if (theme.githubLink && theme.githubLink.enable) { %>
            <%- partial('_partial/github-link') %>
        <% } %>
    </nav>
</header>

因为使用了资源压缩插件，无需在意空格，如果没有安装插件，请注意减少留空。

_config.yml

在主题配置文件尾部追加如下内容：

1
2
3
4
5
6
7
8
9
10
# 滚动公告
cast:
  enable: true # 是否启用公告
  icon: # 图标设置
    enable: true #是否启用图标
    class: # fa图标class，留空为fa-solid fa-bell
    color: # 图标颜色，支持css颜色格式，留空为白色
  date: 2022年7月11日 # 留空不显示
  text: 修改本站大部分图片资源由png转为webp，提高加载速度。 # 滚动内容
  url: './../cast/'  # 无需跳转请留空，相对链接请注意相对关系，绝度地址请包含协议头。