Fluid主题文章页面调整

AI摘要：

Hexo 主题:编写自己的 Hexo 主题 | Easy Hexo 👨‍💻

ejs：EJS – 嵌入式 JavaScript 模板引擎 | EJS 中文文档 (bootcss.com)

修改左侧栏内容，新增容器side_container

左边栏对应主题ejs文件，修改如下

aside是positon属性为sticky的特殊部件

blog\themes\fluid\layout\_partials\post\sidebar-left.ejs:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 添加公告栏时钟 -->
<div id="clockdiv" class="side_container" style="margin-right: -1rem; margin-top: 2rem; text-align: center; left: 5rem">
  <canvas id="dom" width="200" height="200">时钟canvas</canvas>
</div>
<script type="text/javascript" src="/js/clock.js"></script>

<aside class="sidebar" style="margin-right: -1rem; margin-top: 15px; left: 5rem">

  <div class="side_container" >
    <%- partial('_partials/post/toc') %>
  </div>

  <div class="side_container category-bar" style="margin-top: 2rem;" >
    <%- partial('_partials/post/category-bar') %>
  </div>
</aside>

修改side_container容器css样式

blog\themes\fluid\source\css\_pages\_base\_widget\toc.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.sidebar
  position -webkit-sticky
  position sticky
  top 2rem
  padding 3rem 0
  z-index 3

.side_container
  padding: 1rem
  background-color var(--board-bg-color)
  transition background-color .2s ease-in-out
  border-radius 0.5rem
  -webkit-box-shadow 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19)
  box-shadow 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19)

调整左栏和文章栏位置

下面这种修改方法已弃用，存在缩放变形问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 文章栏修改 */
.col-lg-8.nopadding-x-md > .container.nopadding-x-md > #board {
    width: 103%;
    right: -18%; 
}
@media (max-width: 767px) {
    .col-lg-8.nopadding-x-md > .container.nopadding-x-md > #board {
        width: 100%;
        left: 0; 
    }
}
@media (max-width: 424px) {
    .col-lg-8.nopadding-x-md > .container.nopadding-x-md > #board {
        width: 100%;
        left: 0; 
    }
}
/* 侧边栏修改 */
.side-col.d-none.d-lg-block.col-lg-2 {
    left: 12%
}

其他调整

  • waifu.css 调整看板娘大小，对话框大小

  • szgotop.css 调整悬挂的猫位置

新的修改方法

修改 blog\themes\fluid\layout\_partials\post\sidebar-left.ejs，新增一栏占位，右栏删除

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="row nomargin-x">
    //新增一栏占左位
    <div class="side-col d-none d-lg-block col-lg-1">
    </div>
    
    //左栏
    <div class="side-col d-none d-lg-block col-lg-2">
      <%- inject_point('postLeft') %>
    </div>

    //文章栏
    <div class="col-lg-8 nopadding-x-md">
     
    </div>
	
    //右栏
    <div class="side-col d-none d-lg-block col-lg-2">
      <%- inject_point('postRight') %>
    </div>

增加css样式，减小文字页边距，增加@media (min-width: 992px)

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
/* 减小文字页边距 */
.post-content{
    padding-left: 8%;
    padding-right: 8%;
}

/* 侧边栏和文章栏修改 */
/* 原992 */
@media (min-width: 992px){ 
    .col-lg-1{
        -ms-flex: 0 0 10%; 
        flex: 0 0 10%; 
        max-width: 10%;
    }
    .col-lg-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .col-lg-8{
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        max-width: 70%;
    }
}

新增最近文章和相关文章

借鉴 archive-list.ejs 和 category-list.ejs

修改 blog\themes\fluid\layout\_partials\post\sidebar-left.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
<!-- 添加公告栏时钟 -->
  <div id="clockdiv" class="side_container" style="margin-right: -1rem; margin-top: 2rem; text-align: center; left: 5rem">
    <canvas id="dom" width="150" height="150">时钟canvas</canvas>
  </div>
  <script type="text/javascript" src="/js/clock.js"></script>

  <aside class="sidebar" style="margin-right: -1rem; margin-top: 15px; left: 5rem">
    <div class="side_container" >
      <%- partial('_partials/post/toc') %>
    </div>

    <div class="side_container category-bar" style="margin-top: 2rem;" >
      <p>
        <i class="iconfont icon-list"></i>
        <a style="font-weight: 700; font-size: 1.25em; text-indent: 2em; text-align: justify!important;">相关文章 </a>
      </p>      
      <%- partial('_partials/custom/relative-post') %>
    </div>  

    <div class="side_container category-bar" style="margin-top: 2rem;" >
      <p>
        <i class="iconfont icon-list"></i>
        <a style="font-weight: 700; font-size: 1.25em; text-indent: 2em; text-align: justify!important;">近期文章 </a>
      </p>
      <div class="list-group">
        <% site.posts.sort('-date').slice(0,5).each(function (post) { %>
          <a href="<%= url_for(post.path) %>" class="list-group-item list-group-item-action">
            <time style="flex: 0 0 3.5rem;"><%= date(post.date, "MM-DD") %></time>
            <div class="list-group-item-title"><%= post.title %></div>
          </a>
        <% }) %>
      </div>
    </div>
  </aside>

新增 blog\themes\fluid\layout\_partials\custom\relative-post.ejs，获取同子分类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%
var parent = page.categories.filter(c => c)
if(parent["length"] > 1){
    parent = page.categories.filter(c => c.parent)
}

var filterIds = page.categories.map(c => c._id)
filterIds.push(page._id)
%>

<%- partial('_partials/custom/relative-post-list', {
    curCats  : parent,
    params: {
      type     : 'post',
      filterIds: filterIds,
      postLimit: theme.post.category_bar.post_limit,
      postOrderBy: theme.post.category_bar.post_order_by || config.index_generator.order_by
    }
}) %>

新增 blog\themes\fluid\layout\_partials\custom\relative-post-list.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
<% function render_categories(curCats, params = {}, depth = 0) { %>
    <% return curCats.each((cat) => { %>
        <% var subCats = site.categories.find({ parent: cat._id }).sort(params.orderBy || 'name').filter(cat => cat.length) %>
        <% var collapsed = subCats.length === 0 || depth >= theme.category.collapse_depth %>
        <% if ((params.filterIds || []).includes(cat._id)) collapsed = false %>
        
        <div class="category-collapse collapse <%= collapsed ? '' : 'show' %>" id="collapse-<%= md5(cat.name) %>"
                role="tabpanel" aria-labelledby="heading-<%= md5(cat.name) %>">
            <% var posts = cat.posts.sort(params.postOrderBy || '-date') %>
            <%- render_posts(posts, cat, params) %>
        </div>
    <% }) %>
<% } %>
  
<% function render_posts(posts, cat, params) { %>
<div class="category-post-list">
    <% var limit = 5 /*params.postLimit*/ %>
    <% for (var idx = 0; idx < posts.length; idx++) { %>
        <% var post = posts.data[idx] %>
        <% if (idx && limit && idx >= limit) { %>
            <a href="<%= url_for(cat.path) %>" class="list-group-item list-group-item-action">
            <span class="category-post"><%- __('category.more') %></span>
            </a>
            <% break %>
        <% } else { %>
            <a href="<%= url_for(post.path) %>" title="<%= post.title %>"
                class="list-group-item list-group-item-action
                <%= (params.filterIds || []).includes(post._id) ? 'active' : ''  %>">
            <span class="category-post" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"><%= post.title %></span>
            </a>
        <% } %>
    <% } %>
</div>
<% } %>
  
<div class="category-list">
<%- render_categories(curCats, params) %>
</div>

<% function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  } %>
相关教程 > Hexo
#Hexo #Fluid
Fluid主题文章页面调整
https://blog.cngo.rr.nu/posts/d022.html
作者
cngo
发布于
2024年7月13日
许可协议