写在前面

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

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

黑石博客随机文章功能

关键函数

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
- 自己加图片。。。。
阅读全文 »

🎈写在前面

首先祝大家国庆节中秋节双节快乐!

好久没更新了,今天蹭着国庆节休息,更新一篇。 水一篇。

🎏教程

之前我记得好伙伴问了下怎么加谷歌的思源宋体,网上方法很多,有自己上传字体直接引用、或者用有字库里面的js简单快速,但我认为最好用的那就是引用谷歌字体的API了。

谷歌中文字体api地址:https://fonts.google.com/?subset=chinese-simplified

进入Noto Serif SC思源宋体的界面:

谷歌字体api思源宋体

在这里就像超市挑选商品一样,选择一款自己喜欢的字体样式。

点击后面的select this style 浏览器地址栏就是接下来需要引用的api链接了。

阅读全文 »

文字样式

下划线
着重号
波浪线
删除线
command
阅读全文 »

最近正在研究Hexo主题文档,关于标签函数有两条:

  • <%- list_tags([options]) %>
    
    1
    2
    3

    - ```ejs
    <%- tagcloud([tags], [options]) %>

因为现在用的主题采用的是list_tag标签,着重讲一下这个标签。

官网参数

其中list_tag有以下参数:

选项 描述 预设值
orderby 标签排列方式 name
order 标签排列顺序。1, asc 升序;-1, desc 降序。 1
show_count 显示每个标签的文章总数 true
style 标签列表的显示方式。使用 list 以无序列表(unordered list)方式显示。 list
separator 标签间的分隔符号。只有在 style 不是 list 时有用。 ,
class Class name of tag list (string) or customize each tag’s class (object, see below). tag
transform 改变标签名称显示方法的函数。
amount 要显示的标签数量(0 = 无限制) 0
suffix 为链接添加前缀 None

list_tags用法详解

函数写法示例如下:

1
list_tags(site.tags,{orderby: 'name', order: 'desc', amount: 0,class: {ul: 'ululul', li: 'lilili', a: 'aaa', count: 'ccc'}, style: list, separator: ' | '})
  • 其中第一个参数site.tags还可以写post.tags,意思是分别调用全站标签和当前文章标签

  • orderby这里默认值是name,如果想按照标签下的文章数量来进行排序的话,很明显name已经满足不了我们的需求,于是我们可以这样调用,使用length参数(之前一直想要找到这样的写法,最后还是在hexo官方github的issue上看到的,还是个外国朋友提供的),这样也称之为热门标签,并通过amount参数控制显示数量,这样的标签群放在侧边栏效果更佳:

    1
    <%- list_tags(site.tags,{orderby: 'length', order: 'desc',amount: 8}) %>

    效果如下图:

    黑石博客热门标签

  • order是升序和降序的参数

  • amount标签数量的控制

  • class这里是个参数集,区分ullispan分别给其加上css类,用于css美化,示例如图:

    黑石博客标签class

  • styleseparator配合使用,给标签与标签之间加上分隔符:

    1
    style: false, separator: ' | '

    效果:

    黑石标签分隔符

  • show_count为是否显示每个标签的文章数,这个就很好理解了,填truefalse即可。

  • transform可为标签字符串进行转化,最常见的就是大小写转化,这也是一个常见的方法,比如我喜欢给每个标签用小写,如hexo,但显示出来不好看,于是我们可以利用transform转为大写,写法如下:

    1
    <%- list_tags(site.tags,{orderby: 'length', order: 'desc', amount: 0,transform(str) {return str.toUpperCase();}}) %>

    原本小写的hexo,转变为大写,效果如下:

    黑石标签大小写转化

阅读全文 »

简介

简单快速粗暴地直接推荐16PF人格测试站点:

https://www.16personalities.com/ch

黑石推荐理由:

  • 扁平化卡通人物画风,异常清新可爱。
  • 人物特点分明,职业化参考。
  • 问卷调查简单明了,不拖沓。
  • 中文支持!

网站缩略图:

16pf测试网站

16PF简介

16种人格因素问卷是美国伊利诺州立大学人格及能力测验研究所卡特尔教授编制的用于人格检测的一种问卷,简称16PF。

调查问卷功能

阅读全文 »

先上地址:https://yf.heson10.com

前方高能音乐来袭。。。。注意保护耳朵,可预先试听:

为什么搭建?

因为穷

效果图

前台效果图

黑石要饭系统前台界面

前三个没付款的家伙,你们有本事倒是付啊!😂

后台

阅读全文 »

嗯,首先声明:这是一篇水文。

今天主要介绍一下这款字体管理软件,iFonts字体管理助手,老规矩,先上在Photoshop里更换字体的效果图:

iFonts字体管理助手效果图

怎么样?被这个一键更换字体惊呆了吧?无需下载安装字体文件,只需在iFonts中点击你想要的字体即可应用到任何软件中,省去传统的找寻字体→预览字体→下载字体→安装字体→再在软件找寻字体的繁琐步骤。竟然还有这么好用的东西,爱了。

功能介绍

  • 轻松应用管理字体

    • 1、无需下载字体文件,点击即用
      点击字体一键使用,快速查看字体效果,无需下载安装。

    • 2、右键管理字体分类
      收藏您喜欢的字体,给喜欢的字体打分类标签。

    • 3、本地字体 自动读取
      自动读取本地字体,无需额外操作。

  • 一键缺失字体补齐

    • 1、系统自动补齐
      打开应用软件,再打开iFonts客户端,系统自动补齐字体。
    • 2、点击智能补齐
      系统自动没有补齐的情况下,点击补齐按钮,可智能后台补齐。
    • 3、上传文件补齐
      在系统智能都没有补齐都情况下,可上传源文件补齐。
  • 炫酷特效 拖拽即用

    • 1、在线预览 拖拽即用
      在线输入文案,及时生成拖拽到任何应用软件。

下载地址

Mac和Windows都支持,点我下载: https://51ifonts.com/client?inviter_uid=2619993&from=&pic=1
ifonts字体管理软件邀请图

写在后面

阅读全文 »

简介

标签云个人认为最重要的作用,是方便用户根据标签分类,进行文章查找,对于提升博客浏览深度很有帮助。同样,归档和分类页面同样有着相同的作用。

至于SEO方面,一是可以丰富博客内链,二是用于提升关键词密度。

鉴于此,通过修改模板可以把标签云和归档放在同一页面下,同时给标签云加上彩色的背景和文字,使它更加的好(zhuang)看(bi)。于是有了下面这个页面:

黑石博客彩色标签云

闲话不多说,下面是教程

教程

同样是以volantis主题为例(我是4.0版本):

合并标签云和归档页面

合并之前,需要搞清楚这两个页面是通过哪个文件生成的。

阅读全文 »

给博客加上最新评论栏目。以Volantis主题为例,给侧边栏加上最新评论功能,实现整站调用。

阅读全文 »

,前期域名从heson.xyz更换到heson10.com,好多图片链接需要重新更换,这里记录了由Python优雅地帮助我们快速更换markdown文件字符的一次过程。

阅读全文 »