Loading...
宝藏指南 宝藏指南
热门
立即入驻

即刻短文页面教程

日常推荐2个月前更新 Jone
82 0 0

今天来一手网站即刻短文页面教程，部分样式借鉴于其他博主。

站点使用hexo静态页面网站生成器生成，主题使用的是butterfly，主题完善度很高建议小伙伴们可以使用本主题进行魔改。

教程

首先在hexo目录下新建essay目录，里面建立文档index.md。

把下面代码写到index.md里面。

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
 
---
title: 即刻短文
date: 2023-02-05 17:44:31
aside: false
---

<style>
/* 页面初始化 */
div#page {
    background: none;
    border: 0;
    padding: 0;
}
[data-theme=dark] #twikoo .tk-content,
#twikoo .tk-content {
    padding: 0;
    background: transparent;
}

.talk_item,
.tk-expand,
.tk-comments-container>.tk-comment,
.tk-submit:nth-child(1){
    background: var(--card-bg);
    border: 1px solid #e0e3ed;
    box-shadow: 0 5px 10px rgb(189 189 189 / 10%);
    transition: all .3s ease-in-out;
    border-radius: 12px;
}
.talk_item:hover,
.tk-comments-container>.tk-comment:hover,
.tk-submit:nth-child(1):hover {
    border-color: #49b1f5;
}

.tk-submit {
    padding: 20px 10px 0;
}

.tk-comments-container>.tk-comment {
    padding: 15px;
}

/* 页面初始化结束 */

#talk{
    margin-top: 1rem;
    column-count: 3;
    column-gap: 10px;
}

#talk .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#talk .loading img {
    width: 200px;
}

.talk_item {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px; 
    margin-bottom: 10px;
    break-inside: avoid;
}
.talk_item .img-box{
    column-gap: 1rem;
    margin-top: 1rem;
}
.talk_item .img-box img{
    mrgin-bottom: 1rem;
}
@media screen and (max-width: 768px){
    #talk{
        column-count: 1;
    }
}
@media screen and (max-width: 992px) and (min-width: 768px){
    #talk{
        column-count: 2;
    }
}
@media screen and (min-width: 992px){
    #talk{
        column-count: 3;
    }
}

.avatar {
    margin: 0 !important;
    width: 60px;
    height: 60px;
    border-radius: 10px;
}


.talk_bottom,
.talk_meta {
    display: flex;
    align-items: center;
    width: 100%;
    line-height: 1.5;
}
.talk_bottom{
    justify-content: space-between;
}
.info {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}
span.talk_nick {
    color: #6dbdc3;
    font-size: 1.2rem;
}
svg.is-badge.icon {
    width: 15px;
    margin-left: 5px;
    padding-top: 3px;
}
span.talk_date {
    opacity: .6;
}

.talk_content {
    line-height: 1.5;
    margin-top: 10px;
}
.zone_imgbox {
    display: flex;
    flex-wrap: wrap;
    --w: calc(25% - 8px);
    gap: 10px;
    margin-top: 5px;
}
.zone_imgbox a {
    display: block;
    border-radius: 12px;
    width: var(--w);
    aspect-ratio: 1/1;
    position: relative;
}

.zone_imgbox img {
    width: 100%;
    height: 100%;
    margin: 0 !important;
    object-fit: cover;
}
/* 底部 */

.talk_bottom {
    opacity: .9;
}
.talk_bottom .icon {
    color: var(--font-color);
    float: right;
    transition: all .3s;
}

.talk_bottom .icon:hover {
    color: #49b1f5;
}

span.talk_tag{
    font-size: 14px;
}
.talk_content>a {
    margin: 0 3px;
    color: #ff7d73 !important;
}
.talk_content>a:hover{
    text-decoration: none !important;
    color: #ff5143 !important
}

/* 提醒 */

.limit {
    transition: all .3s ease-in-out;
    color: rgba(76, 73, 72, 0.6);
}

[data-theme=dark] .limit {
    color: rgba(255, 255, 255, 0.5);
}

.limit {
    display: none;
    text-align: center;
    margin-top: 20px;
    color: var(--font-color);
}
@media screen and (max-width: 900px) {
    .zone_imgbox {
        --w: calc(33% - 5px);
    }
    #talk{
        margin: 10px 3px 0
    }
    #post-comment{
        margin: 0 3px
    }
}

@media screen and (max-width: 768px) {
    .zone_imgbox {
        gap: 6px;
    }
    .zone_imgbox {
        --w: calc(50% - 3px);
    }
    span.talk_date {
        font-size: 14px;
    }
}
</style>

<div class="page-top-card" style="background-image: url(https://cdn.xiaoliu.life/essay/essay.webp);">
    <div class="content-item-tips">动态</div>
    <span class="content-item-title">空间说说</span>
    <div class="content-bottom">
        <div class="tips">我的生活、吐槽、闲话...</div>
        <a class="banner-button" onclick="pjax.loadUrl('/photos/')" data-pjax-state="">
            <i class="fa-solid fa-image"></i><span>生活相册</span>
        </a>
    </div>
</div>

<div id="talk">
<div class='loading'><img src="/img/loading.svg" alt="加载中..."></div>
</div>

<div class="limit">- 只展示最近30条说说 -</div>
<script>
pageTalk();
// 页面说说
function pageTalk() {
    fetch('https://xx.xx.xx/',{mode:'cors'}).then(res => res.json()).then(data => { // 注意修改域名
        let items = [],
            html = '',
            icon = '<svg viewBox="0 0 512 512"xmlns="http://www.w3.org/2000/svg"class="is-badge icon"><path d="m512 268c0 17.9-4.3 34.5-12.9 49.7s-20.1 27.1-34.6 35.4c.4 2.7.6 6.9.6 12.6 0 27.1-9.1 50.1-27.1 69.1-18.1 19.1-39.9 28.6-65.4 28.6-11.4 0-22.3-2.1-32.6-6.3-8 16.4-19.5 29.6-34.6 39.7-15 10.2-31.5 15.2-49.4 15.2-18.3 0-34.9-4.9-49.7-14.9-14.9-9.9-26.3-23.2-34.3-40-10.3 4.2-21.1 6.3-32.6 6.3-25.5 0-47.4-9.5-65.7-28.6-18.3-19-27.4-42.1-27.4-69.1 0-3 .4-7.2 1.1-12.6-14.5-8.4-26-20.2-34.6-35.4-8.5-15.2-12.8-31.8-12.8-49.7 0-19 4.8-36.5 14.3-52.3s22.3-27.5 38.3-35.1c-4.2-11.4-6.3-22.9-6.3-34.3 0-27 9.1-50.1 27.4-69.1s40.2-28.6 65.7-28.6c11.4 0 22.3 2.1 32.6 6.3 8-16.4 19.5-29.6 34.6-39.7 15-10.1 31.5-15.2 49.4-15.2s34.4 5.1 49.4 15.1c15 10.1 26.6 23.3 34.6 39.7 10.3-4.2 21.1-6.3 32.6-6.3 25.5 0 47.3 9.5 65.4 28.6s27.1 42.1 27.1 69.1c0 12.6-1.9 24-5.7 34.3 16 7.6 28.8 19.3 38.3 35.1 9.5 15.9 14.3 33.4 14.3 52.4zm-266.9 77.1 105.7-158.3c2.7-4.2 3.5-8.8 2.6-13.7-1-4.9-3.5-8.8-7.7-11.4-4.2-2.7-8.8-3.6-13.7-2.9-5 .8-9 3.2-12 7.4l-93.1 140-42.9-42.8c-3.8-3.8-8.2-5.6-13.1-5.4-5 .2-9.3 2-13.1 5.4-3.4 3.4-5.1 7.7-5.1 12.9 0 5.1 1.7 9.4 5.1 12.9l58.9 58.9 2.9 2.3c3.4 2.3 6.9 3.4 10.3 3.4 6.7-.1 11.8-2.9 15.2-8.7z"fill="#1da1f2"></path></svg>';
        data.data.forEach(item => {
            imgHtml = '';
            count = 1;
            if(item.imgList){
                item.imgList.forEach((item,index)=>{
                    console.log(item),
                    imgHtml += '<img src='+item+'>',
                    count = index + 1;
                })
            };
            if(count > 3)count = 3;
            style = "column-count: "+count+";"
            html += `<div class="talk_item">
                        <div class="talk_meta">
                            <img class="no-lightbox avatar" src="https://cdn.xiaoliu.life/about/head.jpg">
                            <div class="info">
                                <span class="talk_nick">xiaoliu${icon}</span>
                                <span class="talk_date">${item.createTime}</span>
                            </div>
                        </div>
                        <div class="talk_content">${item.content}</div><div class="img-box" style = "${style}">`
                        +imgHtml
                        +`</div></div>` // 注意修改头像链接和名称
        })
        document.getElementById('talk').innerHTML = html
    })
}
// 页面评论
function goComment(e) {
    var n = document.querySelector(".el-textarea__inner")
    n.value = `> ${e}\n\n`;
    n.focus();
    btf.snackbarShow("无需删除空行，直接输入评论即可", !1, 2e3);
}
// 页面时间格式化
function getTime(time) {
    let d = new Date(time),
        ls = [d.getFullYear(), d.getMonth() + 1, d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()];
    for (let i = 0; i < ls.length; i++) {
        ls[i] = ls[i] <= 9 ? '0' + ls[i] : ls[i] + ''
    }
    if (new Date().getFullYear() == ls[0]) return ls[1] + '月' + ls[2] + '日 ' + ls[3] + ':' + ls[4]
    else return ls[0] + '年' + ls[1] + '月' + ls[2] + '日 ' + ls[3] + ':' + ls[4]
}
</script>

注意修改代码里面的域名请求地址。

下面是后端接口格式

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 
{
    "code": 200,
    "message": "请求成功",
    "data": [
        {
            "id": 19,
            "createTime": "2023-07-10 14:07:07",
            "imgList": null,
            "content": "今天重写了即刻短文样式，能够根据图片个数自动分成几列，最多一行会有三张图片。哈哈哈哈哈哈哈哈哈，我真强！"
        },
        {
            "id": 18,
            "createTime": "2023-07-09 22:10:34",
            "imgList": [
                "https://cdn.xiaoliu.life/essay/20230709a.webp",
                "https://cdn.xiaoliu.life/essay/20230709b.webp",
                "https://cdn.xiaoliu.life/essay/20230709c.webp"
            ],
            "content": "我以为抓住了蝉，就抓住了整个盛夏"
        },
        {
            "id": 17,
            "createTime": "2023-07-08 10:50:43",
            "imgList": null,
            "content": "太热了，实在提不起勇气走出我的空调屋"
        },
        {
            "id": 16,
            "createTime": "2023-07-06 22:23:26",
            "imgList": null,
            "content": "休息一天，打球打累了ヘ(￣ω￣ヘ)"
        },
        {
            "id": 15,
            "createTime": "2023-07-05 20:08:22",
            "imgList": null,
            "content": "sb马克丁，老子就不删，大不了域名备案都不要了，全都迁国外去"
        },
        {
            "id": 14,
            "createTime": "2023-06-30 16:18:29",
            "imgList": [
                "https://cdn.xiaoliu.life/essay/20230630a.webp"
            ],
            "content": "之前下暴雨遇见的彩虹"
        },
        {
            "id": 13,
            "createTime": "2023-06-27 15:38:27",
            "imgList": null,
            "content": "等了半辈子网站总算是备案成功了"
        },
        {
            "id": 12,
            "createTime": "2023-05-23 13:39:43",
            "imgList": null,
            "content": "祝愿今天秀恩爱的情侣终成兄妹，不谢"
        },
        {
            "id": 9,
            "createTime": "2023-05-14 10:06:24",
            "imgList": null,
            "content": "20多岁的年纪感觉好迷茫啊"
        },
        {
            "id": 8,
            "createTime": "2023-05-02 21:55:35",
            "imgList": null,
            "content": "火车上遇到个心动女孩，可惜已经有男朋友了 Σ( ￣д￣；) ！！！，有种失恋的感觉"
        },
        {
            "id": 7,
            "createTime": "2023-04-18 20:43:43",
            "imgList": [
                "https://cdn.xiaoliu.life/essay/20230418a.webp"
            ],
            "content": "春光无限好，花开了"
        },
        {
            "id": 6,
            "createTime": "2023-03-07 17:40:34",
            "imgList": null,
            "content": "38节竟然还有假期，为什么没有男神节？？？"
        },
        {
            "id": 5,
            "createTime": "2023-03-03 14:17:59",
            "imgList": null,
            "content": "整合了一下redis缓存，不过感觉没啥用啊，每天浏览量好少"
        },
        {
            "id": 4,
            "createTime": "2023-03-03 14:17:45",
            "imgList": null,
            "content": "开始学习vue了,争取有一天能实现网站前后端分离"
        },
        {
            "id": 3,
            "createTime": "2023-03-03 14:17:17",
            "imgList": null,
            "content": "每天进步一点点(*•̀ㅂ•́)و"
        },
        {
            "id": 2,
            "createTime": "2023-03-03 14:16:55",
            "imgList": null,
            "content": "sb公司，今天又得加班(/= _ =)/~┴┴"
        },
        {
            "id": 1,
            "createTime": "2023-03-03 14:16:34",
            "imgList": null,
            "content": "今天重新写了即刻短文的api，以后不用memos了"
        }
    ]
}

这里注意里面的imgList是数组类型，不知道mysql支不支持存储数组，我后端是postgres，亲测可行。

© 版权声明
文章版权归作者所有，未经允许请勿转载。

相关文章

Open the F**king URL Right Now
Jone
82
一个免费看剧的网站——网飞猫
Jone
330
谈谈最近挺火的超市——胖东来
Jone
124
B站网页版美化插件——BewlyBewly
Jone
108
讯飞星火 + 微信 = 微信AI机器人
Jone
110
新生代效率工具——Loom，值得期待一下
Jone
139
扫码关注不迷路！
宝藏指南 - 一个集合大量优质在线工具的导航网站，包括实用工具、影音工具、图片工具、编程工具、网络资源等几十种分类，覆盖全网在线工具，只收录最优质的的精品网站，做一个真正有用好用的工具导航网站。

友链申请免责声明广告合作关于我们

扫码加微信宝藏指南

扫码加微信
Copyright © 2024 宝藏指南 豫ICP备2023014319号