文章页面两栏布局
主题默认是三栏布局，并且显示了很多的 widget ，但在阅读文章时显得有些拥挤。因此在文章页面，修改为两栏布局，并显示特定的 widget。
1
2
3
4
5
6
7
8
9
10
11
| diff:includes/helpers/layout.js
const widgets = hexo.extend.helper.get('get_config').bind(this)('widgets');
- return widgets.filter(widget => widget.hasOwnProperty('position') && widget.position === position);
+ if (this.page.layout !== 'post') {
+ return widgets.filter(widget => widget.hasOwnProperty('position') && widget.position === position);
+ }
+ if (position === 'left') {
+ return widgets.filter(widget => widget.hasOwnProperty('position') && (widget.type === 'toc' || widget.type === 'profile'));
+ } else {
+ return []
+ }
|
可以参考上述代码，即可实现不同页面不同 widget。
但两栏整体宽度跟三栏不同。因此强制指定为三栏布局，并且修改相应的宽度，这样所有的页面侧边栏宽度保持一致。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| diff:layout/common/widget.ejs
<% function side_column_class() {
switch (column_count()) {
case 2:
- return 'is-4-tablet is-4-desktop is-4-widescreen';
+ return 'is-4-tablet is-4-desktop is-3-widescreen';
case 3:
diff:layout/layout.ejs-<body class="is-<%= column_count() %>-column">
+<body class="is-3-column">
<%- partial('common/navbar', { page }) %>
<% function main_column_class() {
switch (column_count()) {
case 1:
return 'is-12';
case 2:
- return 'is-8-tablet is-8-desktop is-8-widescreen';
+ return 'is-8-tablet is-8-desktop is-9-widescreen';
|
并修改在不同屏幕小大下的宽度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| diff:source/css/style.styl
.is-2-column .container
max-width: screen-desktop - 2 * gap
width: screen-desktop - 2 * gap
+ .is-3-column .container
+ max-width: screen-widescreen - gap
+ width: screen-widescreen - gap
@media screen and (min-width: screen-fullhd)
+ .is-3-column .container
+ max-width: screen-fullhd - 2 * gap
+ width: screen-fullhd - 2 * gap
.is-2-column .container
max-width: screen-widescreen - 2 * gap
width: screen-widescreen - 2 * gap
|
目录粘性布局显示滚动条
1
2
3
| diff:layout/widget/toc.ejs
-<div class="card widget" id="toc">
+<div class="card widget column-left is-sticky" id="toc" style="max-height: 680px; overflow: auto;">
|
文章标题优化
参考
https://www.alphalxy.com/2019/03/customize-icarus/#%E4%BC%98%E5%8C%96%E6%96%87%E7%AB%A0%E6%A0%87%E9%A2%98%E5%B8%83%E5%B1%80
代码
https://github.com/ppoffice/hexo-theme-icarus/commit/6b3112b69b23f95539242d7a3ad2e48e3cc21ab2
可以配置文章开头是否显示图片
Icarus 支持文章设置一个图片，在文章开头、最近的文章、时间线等地方显示。但有些图放大之后会显得很不协调，因此修改以支持自定义是否显示。修改 has_thumbnail 方法，增加参数 isArticle 参数，默认 false，并在文章页面修改调用参数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| diff:includes/helpers/page.js
- hexo.extend.helper.register('has_thumbnail', function (post) {
+ hexo.extend.helper.register('has_thumbnail', function (post, isArticle = false) {
const getConfig = hexo.extend.helper.get('get_config').bind(this);
const allowThumbnail = getConfig('article.thumbnail', true);
if (!allowThumbnail) {
return false;
}
+ if (isArticle && post['article-thumbnail'] === false){
+ return false;
+ }
return post.hasOwnProperty('thumbnail') && post.thumbnail;
diff:layout/common/article.ejs
<div class="card">
- <% if (has_thumbnail(post)) { %>
+ <% if (has_thumbnail(post, true)) { %>
<div class="card-image">
|
这样修改之后，如果文章 meta 信息中包含 article-thumbnail: false，就可以取消图片的显示。
