Hexo博客实现随机文章功能


写在前面

动态博客程序提高内链数量必备功能之随机文章。随机文章这个功能旨在增加一定数量的文章内链,往往对增加访客黏性有着很大的帮助。

当然,静态博客也能实现(只不过在生成之后就固定了)。效果:

黑石博客随机文章功能

关键函数

//打乱顺序
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模板可写成以下形式(根据主题需要,自行修改以下模板):

<% 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 %>//文章标题
 <% }) %>
//此处放侧边栏外框(对应)     
<% } %>

配置文件如下:

# 随机文章模块
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
  - 自己加图片。。。。

模板html和CSS样式根据博客需要自行修改

鸣谢

感谢Ruri Shimotsuki(Shoka主题作者)随机文章提供的shuffle思路。

感谢xaoxuu(Volantis主题作者)在调用文章头图时提供的查错思路。


版权属于:Heson

本文链接:https://www.heson10.com/posts/31514.html


—— 评论区 ——