brief introduction

Q: What is nagging and changing? A: Daodao · change rewrites the original Daodao with Flask( Rock-Candy-Tea/daodao (github.com) )And adds a preliminary available application of the front-end. The front-end display page is directly transported from Xiaobing blog - be a dreamer! (zfe.space) , the other front ends come from the network The backend api is visible in README A: Daodao · change has been plug-in, project address: Ayasa520 / hexo Daodao plus: a plug-in for "Daodao · Gai" for hexo (github.com) . back end project address: Ayasaa520 / Daodao Kai: to change Daodao, rewrite the backend of Daodao with flash (github.com)

use

• Sign in

Click the "login" button below to enter the user name and password in the form

• delete

After logging in, directly click the x on the right

• send out

After logging in, click the "new" button below to enter the content in the text box Support Markdown

Back end deployment

Vercel deployment

Configure MongoDB (skip if you use your own MongoDB database)

stay MongoDB Atlas | MongoDB Apply for MongoDB account Choose free, other full default options

Click connect

Select Allow Access From Anywhere and confirm

Enter the user name and password of the database without special characters, because my back end does not escape

Select Connect your application

Copy the connection string of the database, and pay attention to manually replacing < password > with the password just entered

Configure Vercel

Click create Vercel project below https://vercel.com/import/project?template=https://github.com/ayasa520/daodao-kai

After deployment, add three environment variables MONGODB: the database connection string just copied; USERNAME: user defined login name; PASSWORD: customize the login PASSWORD Since the environment variable has not been configured during deployment, it needs to be redeployed after configuration

Front end deployment

Do not use plug-ins (not applicable to the latest version)

Add a scrolling component without a home page in this way

In_ Create a new md file under posts. The contents are as follows. Note that https://daodao-omega.vercel.app/api/query/20 Change to your own Don't forget to write the following API / query / 20

code

---
title: Gossip brick
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();
    // Note that the link below is changed to your own
    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>

Then you can see:

npm plug-in (recommended)

install

Run the npm command at the root of the hexo blog

npm install hexo-daodao-plus --save

to configure

In the theme folder (or root directory)_ config. Add the following configuration item to YML

daodao_plus:
  priority: 0 
  enable: 
    page: true 
    card: true 
  filter: 
  url: https://daodao.bilibilianime.com 
  path: daodaoplus
  front_matter: 
    title: Gossip brick
    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

Configuration item description

screenshot