前言
换了主题以后发现之前侧边栏都要改了，所以有了这一篇文章。效果请单击此处观看
恋爱墙
在 source/custom/ 下，新建 js 文件夹，在里面新建一个 laq.min.js 文件填入以下内容，月份是从 0 开始算的11月就是 10 以此类推。（文件名可自定义，在 source 里就可以了）
1
var laq_time=document.getElementById("laq_time"),laq_time_time=null;function setTime(){var create_time=Math.round(new Date(Date.UTC(2024,10,25,0,0,0)).getTime()/1e3),timestamp=Math.round(((new Date).getTime()+288e5)/1e3);currentTime=secondToDate(timestamp-create_time),currentTimeHtml=currentTime[0]+" 年 "+currentTime[1]+" 天 "+currentTime[2]+" 时 "+currentTime[3]+" 分 "+currentTime[4]+" 秒",laq_time.innerHTML=currentTimeHtml}function secondToDate(second){if(!second)return 0;var time=new Array(0,0,0,0,0);return second>=31536e3&&(time[0]=parseInt(second/31536e3),second%=31536e3),second>=86400&&(time[1]=parseInt(second/86400),second%=86400),second>=3600&&(time[2]=parseInt(second/3600),second%=3600),second>=60&&(time[3]=parseInt(second/60),second%=60),second>0&&(time[4]=second),time}laq_time?laq_time_time=setInterval(setTime,1e3):clearInterval(laq_time_time);
在 source/_data 目录下新建一个 aside.yml 文件。
在文件中写入以下内容，更改 图片地址 和 js地址 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22- name: love
title: 恋爱墙
class:
id: testLove
icon: fas fa-heart
content_class:
content_id:
content_css:
content_html: '<div style="text-align: center;">
<img src="图片地址"
style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-right: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;" />
<svg viewbox="0 0 1024 1024" style="margin-left: 5px;margin-right: 5px;" version="1.0" width="15" height="15"
class="my-face">
<path
d="M863.597631 513.574282l-271.33965-140.213484L729.783667 81.926656c3.583731-7.87141 7.167462-15.742819 7.167462-25.214109C736.887134 25.226908 708.345275 0.012799 672.635953 0.012799a63.611229 63.611229 0 0 0-39.293053 12.607055c-1.791866 1.59988-3.519736 3.19976-5.311602 3.19976L147.87531 418.925381a55.547834 55.547834 0 0 0-19.646527 47.356448c1.791866 17.278704 14.27093 33.021523 32.125591 42.492813l271.33965 141.749369L292.504463 945.221908c-12.479064 25.214109-1.791866 53.563983 23.166262 69.306802 10.751194 6.335525 23.230258 9.47129 35.709322 9.47129 16.062795 0 32.125591-4.735645 44.604655-15.742819l480.091993-403.297753a55.547834 55.547834 0 0 0 19.646526-47.228458 61.243407 61.243407 0 0 0-32.12559-44.156688z"
fill="#515151" />
</svg>
<img src="图片地址"
style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-left: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;" /><br />
<span id="laq_time"></span>
</div>
<script defer data-pjax src="js地址"></script>'在主题的配置文件 _config.solitude.yml ,在 home: 后插入 love 。（我是只在主页显示，若你想全部显示在 post 和 page 后面都可以加上）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17# Aside
# 侧边栏
aside:
# Values: about (info card), newestPost (latest article), allInfo (website information), flip (official account QR code), newest_comment (latest comment)
# 值: about(信息卡), newestPost(最新文章), allInfo(网站信息), flip(官方账号二维码), newest_comment(最新评论)
# Sticky: Fixed position / noSticky: Not fixed position
# Sticky: 固定位置 / noSticky: 不固定位置
home: # on the homepage
noSticky: "about,love" #在此处加入 love
Sticky: "allInfo,newest_comment"
post: # on the article page
noSticky: "about,flip"
Sticky: "newestPost,newest_comment"
page: # on the page
noSticky: "about,flip"
Sticky: ""
Do you like me
之前专门写过一篇文章，可以看看，都是大差不差的。
在 aside.yml 文件中加入以下内容。（记得修改 serverURL 为你的api地址，用我的就成给我数据了）
1
2
3
4
5
6
7
8
9
10
11- name: likeme
title:
class:
id: likeme
icon:
content_class:
content_id:
content_css:
content_html: '<link rel="stylesheet" href="https://unpkg.com/@5ime/[email protected]/static/css/likeme.css">
<script src="https://unpkg.com/@5ime/[email protected]/static/js/likeme.js"></script>
<script>new limeMe({ el: "#likeme", serverURL: "https://like.ymxapi.us.kg", color: "#ff4e6ae6" })</script>'打开主题的配置文件 _config.solitude.yml ,在 home: 后插入 likeme 。（我是只在主页显示，若你想全部显示在 post 和 page 后面都可以加上）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17# Aside
# 侧边栏
aside:
# Values: about (info card), newestPost (latest article), allInfo (website information), flip (official account QR code), newest_comment (latest comment)
# 值: about(信息卡), newestPost(最新文章), allInfo(网站信息), flip(官方账号二维码), newest_comment(最新评论)
# Sticky: Fixed position / noSticky: Not fixed position
# Sticky: 固定位置 / noSticky: 不固定位置
home: # on the homepage
noSticky: "about,love,likeme" #在此处加入 likeme
Sticky: "allInfo,newest_comment"
post: # on the article page
noSticky: "about,flip"
Sticky: "newestPost,newest_comment"
page: # on the page
noSticky: "about,flip"
Sticky: ""在 head: 后插入以下内容。（可不加）
1
2
3
4
5
6
7# Extend
# 扩展
extends:
# Insert in head
# 插入到 head
head:
- <link rel="stylesheet" href="https://unpkg.com/@5ime/[email protected]/static/css/likeme.css"> #插入这一行
来访者（需要的话请给我留言，就不写了，懒得写）
在 aside.yml 文件中加入以下内容。
1
2
3
4
5
6
7
8
9- name: welcome
title: 来访者
class:
id: welcome
icon: fas fa-map-marker-alt
content_class:
content_id: visitorInfo
content_css:
content_html: '<script src="../custom/js/welcome.js"></script>'…
…
弄完呢记得Hexo三连击
1 | $ hexo clean && hexo generate && hexo server |
结尾
至此，教程结束。希望对你有所帮助，有任何问题请在下方留言。可以关注我的 公众号以及订阅我的文章 ，感谢你的支持，是对我最大的动力，当然了，更多的是因为热爱。
