写在前面
动态博客程序提高内链数量必备功能之随机文章。随机文章这个功能旨在增加一定数量的文章内链，往往对增加访客黏性有着很大的帮助。
当然，静态博客也能实现（只不过在生成之后就固定了）。效果：
关键函数
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
| //打乱顺序
function shuffle(a) {
for (let i = a.length; i; i--) {
let j = Math.floor(Math.random() * i);
[a[i - 1], a[j]] = [a[j], a[i - 1]];
}
return a;
}
//随机文章函数，根据标签实现相关性
function recommended_posts(page, site, limit = 5) {
page.tags = page.tags || []
if (page.tags.length == 0) return [];
let pageTags = page.tags.map(x => x.name);
let sitePosts = site.posts.toArray().map(x => {
return { tags: x.tags.toArray().map(y => y.name), title: x.title, permalink: x.permalink, date: x.date, img: x.headimg }
});
let relatedPosts = pageTags.map(x => sitePosts.filter(y => y.title != page.title && (y.tags.indexOf(x) != -1 || y.date.format('MM/DD') == page.date.format('MM/DD') || y.headimg == page.headimg))).reduce((prev, next) => {
return prev.concat(next);
}, []);
return shuffle(Array.from(new Set(relatedPosts))).slice(0, limit);
}
//随机头图，根据标题link.title生成固定的随机头图
var hashCode = function (str) {
if (!str && str.length === 0) {
return 0;
}
var hash = 0;
for (var i = 0, len = str.length; i < len; i++) {
hash = ((hash << 5) - hash) + str.charCodeAt(i);
hash |= 0;
}
return hash;
};
var featureimg = 'https://picup.heson10.com/img/upyun/home_top_bg.webp';
var featureImages = theme.featureImages;
featureimg = featureImages[Math.abs(hashCode(link.title) % featureImages.length)];
//把绝对链接改为相对链接，下面的30代表从30个字符开始截取
//取值要自己去试试，改为相对链接的好处就是可用pjax
var lianjie = function (e){
return e.substr(30)
}
|
加上随机头图的调用，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
| <% var post_list = recommended_posts(page, site, theme.recommended_posts.limit) %>
<% if(post_list.length > 0 && theme.recommended_posts.enable) { %>
//此处放侧边栏外框
<% post_list.forEach(function(link) { %>
//以下开始文章循环
<%
var hashCode = function (str) {
if (!str && str.length === 0) {
return 0;
}
var hash = 0;
for (var i = 0, len = str.length; i < len; i++) {
hash = ((hash << 5) - hash) + str.charCodeAt(i);
hash |= 0;
}
return hash;
};
var featureimg = 'https://picup.heson10.com/img/upyun/home_top_bg.webp';
var featureImages = theme.featureImages;
featureimg = featureImages[Math.abs(hashCode(link.title) % featureImages.length)];
var lianjie = function (e){
return e.substr(30)
}
%>
//以下参数调用
<%= link.permalink %>//文章绝对链接
<%= lianjie(link.permalink) %> //文章相对链接
<%- link.img %>//文章头图
<%- url_for(featureimg) %>//随机头图地址
<%= date(link.date, config.date_format) %>//日期
<%= link.title %>//文章标题
<% }) %>
//此处放侧边栏外框（对应）
<% } %>
|
配置文件如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
|
recommended_posts:
enable: true
title: '随便看看'
limit: 3
featureImages:
- https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/001.jpg
- https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/002.jpg
- https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/003.jpg
- https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/004.jpg
- 自己加图片。。。。
|
鸣谢
感谢Ruri Shimotsuki（Shoka主题作者）随机文章提供的shuffle思路。
感谢xaoxuu（Volantis主题作者）在调用文章头图时提供的查错思路。
