Icarus的瀑布流相册
Icarus的主题已经默认支持瀑布流的相册布局，我们可以添加到文章的任意位置。
第一步：修改博客网站的主题配置文件_config.yml，开启相册功能
1
2
3
4
5
6
| plugins:
# Enable page animations
animejs: true
# Enable the lightGallery and Justified Gallery plugins
# https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/gallery-plugin/
gallery: true //修改为true
|
第二步：添加相册图片（我们可以放在文章任何位置，这里我单独作为相册页面，修改的是之前创建的photo页面的内容，即修改photo.md文件内容）。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <div class="justified-gallery">
 //照片路径为照片文件相对于source文件夹的路径
</div>
|
第三步：其实第二步完成后，已经完成了相册的设置，但是相册默认的样式高度和间隙看着有点难受，可以适当修改。打开Icarus主题文件夹，通过相应路径source/js/gallery.js，找到gallery.js文件修改如下，这里我将相册的每行高度修改为160px，间隔为4px。
1
2
3
4
5
6
7
8
9
10
| document.addEventListener('DOMContentLoaded', function () {
if (typeof ($.fn.lightGallery) === 'function') {
$('.article').lightGallery({ selector: '.gallery-item', loop: true, escKey: true, keyPress: true});//如果不想使用lightGallery，这里可不做修改
}
if (typeof ($.fn.justifiedGallery) === 'function') {
//修改部分
$('.justified-gallery').justifiedGallery({rowHeight:400, margins:4});
//修改部分
}
});
|
备注：Icarus主题中的gallery有两个样式，一个是 light Gallery 另一个是 justified Gallery ，这里我选择的是justified Gallery。如果想更换gallery样式，在第二步添加相册图片时，修改<div class="justified-gallery">里对应内容即可。
调整文章内容显示区域
之前我们将侧边栏所有的应用都放在了页面左边，导致右边出现了大片空白区域，浏览文章时我们也会发现文章内容显示的区域相对较窄，这里我们可以适当放宽文章显示的区域，以下修改方法将文章显示区域修改为12格布局。
第一步：打开Icarus主题文件夹，通过相应路径source/css/style.styl，找到style.styl文件修改如下。
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
| /* ---------------------------------
* Override CSS Framework
* --------------------------------- */
html
font-size: 14px
body
background-color: #f7f7f7
body, button, input, select, textarea
font-family: family-sans
//修改部分
@media screen and (min-width: screen-widescreen)
.is-1-column .container
.is-2-column .container
max-width: screen-widescreen - 2 * gap
width: screen-widescreen - 2 * gap
@media screen and (min-width: screen-fullhd)
.is-2-column .container
max-width: screen-fullhd - 2 * gap
width: screen-fullhd - 2 * gap
.is-1-column .container
max-width: screen-desktop - 2 * gap
width: screen-desktop - 2 * gap
//修改部分
|
第二步：打开Icarus主题文件夹，通过相应路径layout/layout.ejs，找到layout.ejs文件修改如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <body class="is-<%= column_count() %>-column">
<%- _partial('common/navbar') %>
//修改部分
<% function main_column_class() {
switch (column_count()) {
case 1:
return 'is-12';
case 2:
return 'is-8-tablet is-9-desktop is-9-widescreen';
case 3:
return 'is-8-tablet is-8-desktop is-6-widescreen'
}
return '';
} %>
//修改部分
|
第三步：打开Icarus主题文件夹，通过相应路径layout/common/widget.ejs，找到widget.ejs文件修改如下
1
2
3
4
5
6
7
8
9
10
11
12
| <% if (get_widgets(position).length) { %>
//修改部分
<% function side_column_class() {
switch (column_count()) {
case 2:
return 'is-4-tablet is-3-desktop is-3-widescreen';
case 3:
return 'is-4-tablet is-4-desktop is-3-widescreen';
}
return '';
} %>
//修改部分
|
添加最近文章的缩略图
打开博客网站，我们发现页面左侧的侧边栏中，所有的最新文章前面都有个缩略图，但却还没有设置，这里为了方便，我们可以直接通过设置随机图片来添加缩略图，省去了以后写一篇文章就要添加一张缩略图的烦恼。
第一步：新建一个文件夹suiji放置需要的图片，这里我的文件夹路径为/photo/index/suiji，此路径是相对于博客网站的根目录的source文件夹来说的，将修改好的图片放入其中。这里需要注意两点：（1）图片是作为缩略图来使用的，所以尽量将图片分辨率修改为普通头像图片分辨率的大小；（2）图片的命名规则：image0、image1、image2···名称+数字依次递增，下标从0开始，image可以换成其他名称。
第二步：打开Icarus主题文件夹，通过相应路径includes/helpers/page.js，找到page.js文件修改如下。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| module.exports = function (hexo) {
//修改部分
hexo.extend.helper.register('has_random_recent_thumbnail', function (post) {
const getConfig = hexo.extend.helper.get('get_config').bind(this);
return getConfig('article.random_recent_thubnail', true);
});
hexo.extend.helper.register('get_random_recent_thumbnail', function (post) {
const autothubnail = hexo.extend.helper.get('has_random_recent_thumbnail').bind(this)(post);
var url = "images/thumbnail.svg";
if(autothubnail){
url = "/photo/index/suiji/article" + Math.floor(Math.random()*7) + ".jpg";
//此路径是图片相对于博客网站的根目录的source文件夹来说的，记住去掉数字，例如这里我的图片名称是article0、···，后面Math.random()*7里的数字7是suiji文件夹中的图片总数量
}
return this.url_for(url);
});
//修改部分
|
第三步：修改博客网站的主题配置文件_config.yml。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| article:
# Code highlight settings
highlight:
# Code highlight themes
# https://github.com/highlightjs/highlight.js/tree/master/src/styles
theme: atom-one-light
# Show code copying button
clipboard: true
# Default folding status of the code blocks. Can be "", "folded", "unfolded"
fold: unfolded
# Whether to show article thumbnail images
thumbnail: true
# Whether to show estimate article reading time
readtime: true
//修改部分
random_recent_thubnail: true
//修改部分
|
第四步：打开Icarus主题文件夹，通过相应路径layout/widget/recent_posts.ejs，找到recent_posts.ejs修改如下。
1
2
3
4
5
6
7
8
9
10
11
12
| <article class="media">
//修改部分
<% if (!has_config('article.random_recent_thubnail') || get_config('article.random_recent_thubnail') !== false) { %>
//修改部分
<a href="<%- url_for(post.link ? post.link : post.path) %>" class="media-left">
<p class="image is-64x64">
//修改部分
<img class="thumbnail" src="<%= get_random_recent_thumbnail(post) %>" alt="<%= post.title %>">
//修改部分
</p>
</a>
<% } %>
|
文章图片居中
我们写文章的时候发现图片默认是左对齐的，为了美观，这里可以修改成置中。
打开Icarus主题文件夹，通过相应路径source/js/main.js，找到main.js修改如下。
1
2
3
4
5
6
7
8
9
10
11
12
| (function ($) {
$('.article img:not(".not-gallery-item")').each(function () {
// wrap images with link and add caption if possible
if ($(this).parent('a').length === 0) {
//修改部分
$(this).wrap('<a class="gallery-item" style="display:block;text-align:center;" href="' + $(this).attr('src') + '"></a>');
//修改部分
if (this.alt) {
$(this).after('<div class="has-text-centered is-size-6 has-text-grey caption">' + this.alt + '</div>');
}
}
});
|
转载源自：DP2PX的个人博文
