简介

Q: 什么是叨叨·改?
A: 叨叨·改是用 Flask 重写了原叨叨 (Rock-Candy-Tea/daodao (github.com))的后端, 并增添了前端的一个初步可用的应用, 前端说说展示页面直接搬运自小冰博客 - 做个有梦想的人！ (zfe.space) , 其余前端来源于网络. 后端 api 可见 README

A: 叨叨·改已经插件化, 项目地址: ayasa520/hexo-daodao-plus: 适用于 hexo 的”叨叨·改”插件 (github.com). 后端项目地址: ayasa520/daodao-kai: 叨叨改，用 flask 重写叨叨的后端 (github.com)

使用

  • 登录

点击下方”登录”按钮, 在表单中输入用户名和密码

  • 删除

登录后直接点击右侧的 x

  • 发送

登录后点击下方”新建”按钮, 在文本框中输入内容. 支持 Markdown.

后端部署

Vercel 部署

配置 MongoDB (若使用自己的 MongoDB 数据库可跳过)

  1. 在 MongoDB Atlas | MongoDB 申请 MongoDB 帐号

    选免费的, 其他全默认选项image

  2. 点击 connectimage

  3. 选择 Allow Access From Anywhere 并确认

    image

    image

  4. 输入数据库的用户名和密码, 不要带有特殊字符, 因为我的后端没有做转义

    image

  5. 选择 Connect your applicationimage

  6. 复制数据库的连接字符串, 注意手动将 <password> 换成刚刚输入的密码image

配置 Vercel

  1. 点击下面的按钮创建 Vercel 项目

    点击部署

    image

    image

  2. 部署好后, 添加三个环境变量 MONGODB : 刚才复制的数据库连接字符串; USERNAME: 自定义叨叨·改登录名; PASSWORD: 自定义叨叨·改登陆密码. 由于刚才部署的时候还没有配置环境变量, 此时配置好后需要 重新部署

    image

前端部署

不使用插件 (不适用于当前最新版本)

以这种方式添加没有首页的滚动组件

在 _posts 下新建一个 md 文件, 内容如下, 注意把 https://daodao-omega.vercel.app/api/query/20 换成自己的. 不要忘记写后面的 api/query/20

代码 
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
---
title: 闲话板砖
date: 2021-05-27 18:24:04
---

  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ayasa520/daodao-kai@main/static/css/index.css" />

   <div id="bber">
        <section class="timeline page-1">
                <div class="list" id="bbitems">
                </div>
        </section>
    </div>
    
{% raw %}
    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
    <script id="template" type="text/html">
        {{each list item index}}
        <div class="item" id={{item["_id"]}}>
            <p class="datatime">{{item["date"]}}</p>
            <p class="datacont">
                {{@item["content"]}}
            </p>
            <p class="datafrom">
                <small><i class="fas fa-tools"></i>{{item["from"]}}</small>
            </p>
        </div>
        {{/each}}
    </script>
{% endraw %}

  <script>
    var xmlHttp = new XMLHttpRequest();
    // 注意下面的链接换成自己的
    xmlHttp.open("get","https://daodao-kai.vercel.app/api/query/20");
    xmlHttp.send(null);
    xmlHttp.onreadystatechange=function()
    {
        if (xmlHttp.readyState==4 && xmlHttp.status==200)
        {
            console.log(xmlHttp.responseText);
            var result = JSON.parse(xmlHttp.responseText);
            var html = template('template', { list: result })
            document.getElementById("bbitems").innerHTML = html;
        }
    }</script>

然后就能看到了:

image

npm 插件 (推荐)

安装

在 hexo 博客根目录运行 npm 命令

1
npm install hexo-daodao-plus --save

配置

在主题文件夹下 (或者根目录) 的 _config.yml 中添加下面的配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
daodao_plus:
  priority: 0 
  enable: 
    page: true 
    card: true 
  filter: 
  url: https://daodao.jaoushingan.com 
  path: daodaoplus
  front_matter: 
    title: 闲话板砖
    comments: true
  CDN: 
    dd_js: https://npm.elemecdn.com/daodaoplus@1.1.7/static/js/index.js 
    dd_css: https://npm.elemecdn.com/daodaoplus@1.1.7/static/css/index.css
    js: https://npm.elemecdn.com/hexo-daodao-plus@2.2.4/dist/js/main.js 
    css: https://npm.elemecdn.com/hexo-daodao-plus@2.2.4/dist/css/main.css

配置项说明

配置项 默认 说明
enable.page 必填 单独叨叨页面的开关
enable.card 必填 首页叨叨 swiper 的开关
url 必填 叨叨后端的 api
CDN 必填 引入的 CSS 和 JavaScript 文件的链接
priority 0 过滤器优先级, priority 值越低, 过滤器会越早执行
filter [‘iframe’,’img’,’script’] 设置叨叨不在首页显示的标签类型
path daodaoplus 路径名称, 生成的页面为 [path]/index.html
front_matter 非必填 页面自定义 front_matter

截图

image

image