在Hexo博客中集成FullCalendar日历功能
在现代博客中，日历功能可以为读者提供更好的内容浏览体验，特别是对于有时间线要求的内容（如活动记录、学习笔记等）。本文将详细介绍如何在Hexo博客中集成FullCalendar日历插件，为您的博客添加一个美观且功能强大的日历页面。
什么是FullCalendar？
FullCalendar 是一个强大的JavaScript日历插件，具有以下特点：
- 支持月视图、周视图、日视图等多种展示方式
- 响应式设计，适配各种设备
- 丰富的交互功能，支持拖拽、编辑等操作
- 多语言支持
- 高度可定制化
实现步骤
1. 创建日历页面目录和文件
首先，在Hexo博客的source目录下创建一个新的目录用于存放日历页面：
然后创建source/calendar/index.md文件，内容如下：
1
2
3
4
5
| ---
title: 日历
layout: calendar
date: 2025-01-20 12:00:00
---
|
这里我们指定了使用calendar布局，稍后会创建这个布局文件。
2. 创建日历布局文件
在主题的layout目录下创建calendar.pug文件（以Pug模板为例）：
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
| extends includes/layout.pug
block content
#calendar-container
#calendar-header
h1= __('calendar')
#calendar
link(rel='stylesheet', href='/css/fullcalendar.min.css')
script(src='/js/fullcalendar.min.js')
style.
#calendar-container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
}
#calendar-header h1 {
text-align: center;
margin-bottom: 20px;
color: var(--font-color);
}
#calendar {
background: var(--card-bg);
border-radius: 10px;
padding: 20px;
box-shadow: var(--card-box-shadow);
}
/* 响应式设计 */
@media (max-width: 768px) {
#calendar-container {
padding: 10px;
}
#calendar {
padding: 10px;
}
}
script.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
locale: 'zh-cn',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
buttonText: {
today: '今天',
month: '月',
week: '周',
day: '日'
},
navLinks: true,
editable: true,
dayMaxEvents: true,
events: [
// 示例事件
{
title: '示例事件',
start: new Date(),
className: 'example-event'
}
]
});
calendar.render();
});
|
3. 下载FullCalendar文件
下载FullCalendar的CSS和JS文件到本地：
1
2
3
4
5
6
7
8
9
|
mkdir -p themes/anzhiyu/source/css
mkdir -p themes/anzhiyu/source/js
curl -o themes/anzhiyu/source/css/fullcalendar.min.css https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css
curl -o themes/anzhiyu/source/js/fullcalendar.min.js https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js
|
4. 美化样式
在上面的布局文件中，我们已经添加了一些自定义CSS样式，使日历能够与博客主题保持一致。您可以根据需要进一步调整样式。
5. 启动博客
完成以上步骤后，清理并重新生成博客：
1
2
3
| hexo clean
hexo generate
hexo server
|
访问 http://localhost:4000/calendar/ 即可查看日历页面。
功能展示
集成后的日历具有以下功能：
- 多种视图切换：支持月、周、日视图切换
- 日期导航：可以前后切换日期，快速跳转到今天
- 事件展示：可以展示各种事件，并支持点击查看详情
- 响应式设计：在手机和平板上也能良好显示
- 多语言支持：支持中文显示
进阶用法
添加博客文章事件
您可以修改calendar.pug文件中的events数组，动态添加博客文章作为事件：
1
2
3
4
5
6
7
| events: [
{
title: '文章标题',
start: '2025-01-20',
url: '/文章链接'
}
]
|
自定义事件样式
通过添加className，可以为不同类型的事件设置不同的样式：
1
2
3
4
5
| .example-event {
background-color: #ff6b6b;
border-color: #ff6b6b;
color: white;
}
|
总结
通过以上步骤，我们成功在Hexo博客中集成了FullCalendar日历功能。这不仅为博客增加了实用的功能，也提升了用户体验。FullCalendar的强大功能和灵活性使其成为博客日历功能的理想选择。
如果您有任何问题或建议，欢迎在评论区留言讨论！
