💡 参考文章见Ref，感谢提供思路！
🗺️当前这篇博文地址：https://myoontyee.github.io/article/321a7025.html
⚠️警告：博客文章禁止一切形式的非授权非法转载！
⚠️Attention: All forms of unauthorized illegal reposts are prohibited !

核心思路：调对应页面样式，用li

配置页面样式

  • 用代码编辑器，如Visual Studio Code打开themes\Chic\layout\_page\archive.ejs，做如下两处修改

    • 在代码标题前后加<li></li>
    • 在li样式里设置宽、高、溢出情况的处理方式

  • 添加<li></li>
    修改前

1
2
3
4
5
6
7
8
9
10
11
12
13

<article class="archive-item">

<a class="archive-item-link" href="<%- url_for(post.path) %>">

<%= post.title %>

</a>

<span class="archive-item-date"><%- date(post.date, theme.date_format) %></span>

</article>

修改后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<article class="archive-item">

<a class="archive-item-link" href="<%- url_for(post.path) %>">

<li>

<%= post.title %>

</li>

</a>

<span class="archive-item-date"><%- date(post.date, theme.date_format) %></span>

</article>

  • 在li样式里设置宽、高、溢出情况的处理方式

在themes\Chic\layout\_page\archive.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
 
<style>

 li{

 width: 650px;

 height: 29.5px;

 /*不换行*/

 white-space: nowrap;

 /*溢出的话，隐藏*/

 overflow: hidden;

 /*文本溢出时，是否....*/

 text-overflow: ellipsis;

 }

</style>

  • themes\Chic\layout\_page\archive.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
 
<div class="post-wrap archive">

 <!-- 添加了页面的头部与空一行 -->

 <h2 class="post-title">-&nbsp;📖文章&nbsp;-</h2>

 <br>

 <!-- 上面是添加的内容 -->

  

 <% var last_year = ''; %>

 <% page.posts.each(function (post) { %>

 <% var cur_year = post.date.year(); %>

  

 <% if(last_year !== cur_year){ %>

 <h3><%- cur_year %></h3>

 <% last_year = cur_year; } %>

  

 <article class="archive-item">

 <a class="archive-item-link" href="<%- url_for(post.path) %>">

 <%= post.title %>

 </a>

 <span class="archive-item-date"><%- date(post.date, theme.date_format) %></span>

 </article>

 <% }) %>

 <%- partial('_partial/paginator') %>

  

</div>


  • themes\Chic\layout\_page\archive.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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
<div class="post-wrap archive">

 <!-- 添加了页面的头部与空一行 -->

 <h2 class="post-title">-&nbsp;📖文章&nbsp;-</h2>

 <br>

 <!-- 上面是添加的内容 -->

  

 <% var last_year = ''; %>

 <% page.posts.each(function (post) { %>

 <% var cur_year = post.date.year(); %>

  

 <% if(last_year !== cur_year){ %>

 <h3><%- cur_year %></h3>

 <% last_year = cur_year; } %>

  

 <article class="archive-item">

 <a class="archive-item-link" href="<%- url_for(post.path) %>">

 <!-- <ul> -->

 <li>

 <%= post.title %>

 </li>

 <!-- </ul> -->

 </a>

 <span class="archive-item-date"><%- date(post.date, theme.date_format) %></span>

 </article>

 <% }) %>

 <%- partial('_partial/paginator') %>

  

</div>

  
  

<style>

 li{

 width: 650px;

 height: 29.5px;

 /*不换行*/

 white-space: nowrap;

 /*溢出的话，隐藏*/

 overflow: hidden;

 /*文本溢出时，是否....*/

 text-overflow: ellipsis;

 }

</style>


定义和用法

  • <li>标签定义列表项目。

  • <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。

    • ol 有序列表。
      • 表现为：123的序号
    • ul 无序列表
      • 表现为li前面是大圆点而不是123
定义 全称
ul unordered lists
ol ordered lists
li Lists

效果

  • 部署前，箭头所指是页面布局出现错误的地方
  • 部署后

Ref