基于 Vercel 和 MongoDB 的叨叨·改

2022-01-20 10:15:13 浏览数 (1)

简介

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 数据库可跳过)

在 MongoDB Atlas | MongoDB 申请 MongoDB 帐号 选免费的, 其他全默认选项

点击 connect

选择 Allow Access From Anywhere 并确认

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

选择 Connect your application

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

配置 Vercel

点击下面的创建 Vercel 项目 https://vercel.com/import/project?template=https://github.com/ayasa520/daodao-kai

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

前端部署

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

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

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

代码

代码语言：javascript复制
---
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>

然后就能看到了:

npm 插件 (推荐)

安装

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

代码语言：javascript复制
npm install hexo-daodao-plus --save
配置

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

代码语言：javascript复制
daodao_plus:
  priority: 0 
  enable: 
    page: true 
    card: true 
  filter: 
  url: https://daodao.bilibilianime.com 
  path: daodaoplus
  front_matter: 
    title: 闲话板砖
    comments: true
  CDN: 
    dd_js: https://cdn.jsdelivr.net/npm/daodaoplus@1.1.7/static/js/index.min.js 
    dd_css: https://cdn.jsdelivr.net/npm/daodaoplus@1.1.7/static/css/index.min.css
    js: https://cdn.jsdelivr.net/npm/hexo-daodao-plus@2.2.4/dist/js/main.min.js 
    css: https://cdn.jsdelivr.net/npm/hexo-daodao-plus@2.2.4/dist/css/main.min.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

截图
云数据库MongoDB mongodb api github git

0 人点赞