简述即刻短文及前言

可做功能 是否支持
发布文字 ✅
发布标题 ✅
嵌入图片 ✅
横向瀑布流 ✅
本地使用yml存储数据 ✅
显示IP属地 ✅
云端部署 ❌

博客–即为分享个人的平台，部分分享内容太短，为避免造成文章过短质量过低，所以即刻短文诞生，本次的即刻短文是我自己和Deepseek手搓出来的，我自己的方案。

实力页面: https://zuanshijia.top/jike

1. 创建yml数据文件

新建/blogroot/source/_data/jike.yml
示范:

1
2
3
4
5
6
7
8
9
- title: "下周出教程"
  content: "下周对于即刻短文界面出一个教程"
  ip: "湖北武汉经开沌口"
  time: "2025-5-11 16:50"
- title: ""
  content: ""
  ip: ""
  image: ""
  time: ""

1.1 数据解释

参数 示意
title 标题
content 内容
ip IP地址
time 发布时间
image 图像

2. 创建HTML结构

新建/blogroot/themes/butterfly/layout/includes/page/jike.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
doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title 即刻短文
    link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css')
    style.
      /* 基础样式 */
      body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        transition: background-color 0.3s, color 0.3s;
      }
      
      /* 关键修改：横向瀑布流 */
      .timeline {
        column-count: 3; /* 3列布局 */
        column-gap: 20px; /* 列间距 */
        padding: 20px;
      }
      
      /* 每个卡片样式（宽度固定，高度自适应） */
      .item {
        display: inline-block; /* 必须用 inline-block */
        width: 100%; /* 占满列宽 */
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 15px;
        margin-bottom: 20px; /* 行间距 */
        break-inside: avoid; /* 防止断裂 */
      }
      
      /* 其他样式保持不变 */
      .bber-content {
        margin-bottom: 15px;
      }
      .bber-content-img img {
        width: 100%;
        border-radius: 8px;
        margin-bottom: 10px;
      }
      .bber-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      


  body(class='light-mode')
    section.timeline.page-1
      ul#waterfall.list.show
        each item in site.data.jike
          li.item
            .bber-content
              if item.image
                .bber-content-img
                  a.fancybox(target='_blank', rel='noopener', href=item.image, data-fancybox='gallery', data-caption)
                    img.bber-content-image-self(src=item.image)
              h3= item.title
              p.datacont= item.content
            .bber-bottom
              .bber-info
                .bber-info-time
                  i.fa-solid.fa-calendar-days
                  time(datatime=item.time)= new Date(item.time).toLocaleString('zh-CN', {timeZone: 'Asia/Shanghai'})
                .bber-info-address
                  i.fas.fa-map-marker-alt
                  span= item.ip

CSS嵌入pug中

3.创建MD页面

在CMD页面输入

1
hexo new page jike

4.添加页面判断

修改themes/butterfly/layout/page.pug 来使识别页面所对应的pug页面结构

1
2
3
4
5
6
7
8
+     when 'jike'
+       include includes/page/jike.pug
      when 'tags'
        include includes/page/tags.pug
      when 'link'
        include includes/page/flink.pug
      when 'categories'
        include includes/page/categories.pug

结束

弄完后，你就可以看到页面了