Matery主题自定义(七)修改页面特效

根据个人喜好修改一些主题特效

添加或修改主题结构样式的思路

授之以鱼不如授之以渔

  1. 首先通过 F12 定位到需要修改内容的节点（如 div），通过分析节点（如 class 或 id），再到编辑器中全局搜索找到 HTML 和 CSS 代码所在文件位置
  2. 再构思自己需要添加或修改的效果
  3. 最后修改或替换代码即可

推荐文章鼠标悬浮效果

主题默认推荐文章没有鼠标悬浮效果，就想自己添加一下

推荐文章鼠标悬浮效果
通过 post-card 即可定位代码文件位置

  • HTML 代码文件位置 themes>hexo-theme-matery>layout>_widget\recommend.ejs
  • CSS 代码文件位置 themes\hexo-theme-matery\source\css\matery.css

主要效果都是围绕着 transform 属性来实现

利用透视实现背景图片向后倾斜的效果，再放大内容达到凸显的效果

将 <div class="row"></div> 中的代码替换成下面的 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
<!-- HTML代码 -->

<% for (var i = 0; i < topPostsCount; i++) { %>
    <%
        var post = topPosts[i];
        var grid = topPostsCount % 2 === 0 ? 's12 m6' : (i % 3 === 0) ? 's12' : 's12 m6';
        var description = (i % 3 === 0) ? strip_html(post.content).substring(0, 85)
                : strip_html(post.content).substring(0, 70);
        if (post.summary && post.summary.length > 0) {
            description = post.summary;
        }
        var featureImg = post.img ? url_for(post.img) : url_for(featureImages[Math.abs(hashCode(post.title) % imgCount)]);
        var bgColor = bgColorArr[i % colorCount];
    %>
    <div class="col <%- grid %>" <% if (i > 0) { %>data-aos="zoom-in-up"<% } %>>
        <div class="post-card" >
            <% if (post.img) {%>
            <div class="post-card-bg" style="background-image: url('<%- featureImg %>')">
            <%}else{%>
            <div class="post-card-bg" style="background-image: url('<%- theme.jsDelivr.url %><%- featureImg %>')">
            <% } %>
            </div>
            <div class="post-body">
                <div class="post-categories">
                    <% if (theme.recommend.useConfig) { %>
                        <a href="<%- url_for(post.categoryPath) %>" class="category"><%= post.categoryName %></a>
                    <% } else { %>
                        <% post.categories.forEach(category => { %>
                            <a href="<%- url_for(category.path) %>" class="category"><%= category.name %></a>
                        <% }); %>
                    <% } %>
                </div>
                <a href="<%- url_for(post.path) %>">
                    <h3 class="post-title"><%= post.title %></h3>
                </a>
                <p class="post-description"><%= description %></p>
                <a href="<%- url_for(post.path) %>" class="read-more btn waves-effect waves-light" style="background: <%- bgColor %>" target="_blank">
                    <i class="icon far fa-eye fa-fw"></i><%- __('readMore') %>
                </a>
            </div>
        </div>
    </div>
<% } %>

对比原 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
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
/* CSS代码 */

.recommend .post-card {
    position: relative;
    width: 100%;
    height: 300px;
    max-height: 300px;
    margin-bottom: 15px;
    margin-top: 15px;
    text-align: center;
    border: 0;
    border-radius: 10px;
    color: rgba(0, 0, 0, .87);
}

.recommend .post-card .post-card-bg {
    width: 100%;
    height: 300px;
    max-height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
    background: #fff 50%;
    background-size: cover;
    transition: .8s;
    transform-origin: bottom;
    box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);
}

.recommend .post-card .post-card-bg:before {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
    left: 0;
    top: 0;
    content: "";
    background-color: rgba(0, 0, 0, .3);
    border-radius: 10px;
}

.recommend .post-card:hover .post-card-bg {
    transform: perspective(1000px) rotateX(20deg);
}

.recommend .post-card .post-body {
    position: relative;
    margin: 0 auto;
    padding: 1.8rem 1.25rem;
    z-index: 2;
    transform-origin: bottom;
    transition: .8s;
}

.recommend .post-card:hover .post-body {
    transform: scale(1.1);
}

标签选中效果

为选中的标签添加一个类似于玻璃反光的效果

标签选中效果

还是通过上面的思路定位代码文件位置

  • HTML 代码文件位置 themes\hexo-theme-matery\layout\_widget\tag-cloud.ejs
  • CSS 代码文件位置 themes\hexo-theme-matery\source\css\matery.css

主要通过 animation 属性来实现

1
2
3
4
5
6
7
8
9
10
<!-- HTML代码 -->

<span class="chip center-align waves-effect waves-light
        <% if (isTag && tag.name == page.tag) { %> chip-active <% } else { %> chip-default <% } %>"
        data-tagname="<%- tag.name %>" style="background-color: <%- color  %>;"><%- tag.name %>
    <span class="tag-length"><%- tag.length %></span>
    <% if(isTag && tag.name == page.tag) { %>
    <div class="chip-slider"></div>
    <% } %>
</span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* CSS代码 */

@keyframes chip_slider {
    from { margin-left: -20%; } 
    to { margin-left: 100%; }
}

.chip-container .chip-slider {
    height: 100%;
    width: 20%;
    top: 0;
    left: 0;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.8);
    filter: blur(4px);
    animation: 4s linear 0s infinite alternate chip_slider;
}

分类样式

原来已经有一个改成书本翻页的效果，不过感觉有些突兀，于是换了一个新的效果

分类样式

  • HTML 代码文件位置 themes\hexo-theme-matery\layout\_widget\category-cloud.ejs
  • CSS 代码直接在 HTML 文件中添加

通过盒子阴影实现盘子的效果，在把分类的盒子反正盘子中，利用 transform 实现鼠标悬浮好像将盒子从盘子中拿起的效果

利用 background-clip: text; 制造一种文字镂空的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- HTML代码 -->

<div class="tag-chips">
    <% if (site.categories && site.categories.length > 0) { %>
    <% site.categories.map(function(category) { %>
    <%
        i++;
        var color = i >= colorCount
                ? colorArr[Math.abs(hashCode(category.name) % colorCount)]
                : colorArr[i - 1];
    %>
    <div class="tag-warp">
        <div class="tag-container <% if (isCategory && category.name == pagecategory) { %> chip-active <% } else { %> chip-default <% } %>" 
            style="background-color: <%- color %>;">
            <a class="tag-content" href="<%- url_for(category.path) %>" title="<%-category.name %>: <%- category.length %>">
                <h2><%- category.name %></h2>
            </a>
        </div>
    </div>
    <% }); %>
    <% } else { %>
    <%= __('categoryEmptyTip') %>
    <% } %>
</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
/* CSS代码 */

/* 文章分类书本样式 */
.chip-container .tag-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.chip-container .tag-chips .tag-warp {
    max-width: calc(100% / 4);
    min-width: 10em;
    height: 100px;
    position: relative;
    background-color: #fff;
    box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.2), 
    inset -5px -5px 15px rgba(255, 255, 255, 0.1),
    -5px -5px 15px rgba(255, 255, 255, 0.1),
    5px 5px 15px rgba(0, 0, 0, 0.3);
    border-radius: 30px;
    margin-top: 2em;
}

.chip-container .tag-chips .tag-warp .tag-container  {
    max-width: calc(100% / 4 - 2em);
    min-width: calc(10em - 2em);
    height: calc(100px - 2em);
    position: absolute;
    left: 1em;
    top: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 30px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
    transition: 0.5s;
}

.tag-chips .tag-warp .tag-container:hover {
    transform: translateY(-2em);
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.5);
}

.tag-chips .tag-warp .tag-container h2 {
    margin: 0;
    color: rgba(255, 255, 255, 0.2);
    background: url('https://img.xjh.me/random_img.php?type=bg&ctype=nature&return=302');
    background-size: cover;
    background-clip: text;
    -webkit-background-clip: text;
}