时间戳

首页 > 解决方案 > 使用 Node.js 添加/编辑单独 HTML 文档的 dom 元素

javascript - 使用 Node.js 添加/编辑单独 HTML 文档的 dom 元素

问题描述

所以基本上，我有这个博客风格的网站。我不想通过编辑 HTML 代码手动添加“帖子”，而是希望有一个单独的脚本，它比文件树中的 HTML 文件高一级，我可以用它来加载、解析然后添加新的 HTML 元素，我可以通过函数变量定义的内容。

例如（不是实际代码）：

const fs = require('fs');
const path = require('path');

const file = path.join(__dirname, '/index.html');
fs.open(file, 'w+', (err, data) => {
const html = htmlParse(data);
});

从那时起，我就可以搜索 HTML 代码的特定部分（注释或其他元素）并添加新的 dom 元素。

不确定是否相关，但这里是 HTML 和 CSS 代码。

<!DOCTYPE html>
<html lang>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="main.js" defer></script>

    <title>Why hello</title>
</head>
<body>
    <div class="navbar-container" id="navbar-container">
        <img src="menu-icon.png" alt="menu" id="menu-btn" class="navbar-icon">
        <a class="title" href="index.html" title="Go back home :)">Why hello there</a>
        <img src="peace.png" alt="peace" id="peace-btn" class="navbar-icon">
    </div>
    <div class="main-container">
        <div class="sidebar-container" id="sidebar-container">
            <span class="sidebar-item" id="abt-site"><a class="sidebar-link" href="abt-site.html" title="About this site">About this site</a></span>
            <span class="sidebar-item" id="abt-me"><a class="sidebar-link" href="abt-me.html" title="About me">About me</a></span>
            <span class="sidebar-item" id="contact"><a class="sidebar-link" href="contact.html" title="Contact me">Contact</a></span>
        </div>
        <div class="main-content"></div>
    </div>
</body>
</html>

CSS：

:root {
    font-family: 'Trebuchet MS';
    --bg-color: #323;
    --bg-color2: #212;
    --bg-color-accent: #ff00ff;
    --bg-color-accent2: #aa00aa;
    --txt-color: bisque;
    font-size: clamp(24px, 4vw, 60px);
}

body {
    background-color: var(--bg-color);
    color: var(--txt-color);
}

::-webkit-scrollbar {
    width: 10px;
    background-color: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--bg-color-accent2);
    border-radius: 10px;
}

.navbar-container {
    background-color: var(--bg-color-accent);
    color: var(--txt-color);
    height: clamp(30px, 5vw, 75px);
    width: clamp(300px, 900px, 90vw);
    box-sizing: border-box;
    border: 3px;
    border-radius: 15px;
    font-size: 1rem;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
}

.navbar-icon {
    height: 95%;
    margin-left: 10px;
}

.title {
    color: var(--txt-color);
    text-decoration: none;
}


@media (pointer: fine) {
    .title {
        transition: color 1s;
    }
    
    .title:hover {
        color: blue;
    }   

    .navbar-icon {
        transition: height 1s, blur 1s;
    }

    .navbar-icon:hover {    
        filter: blur(0.5px);
        height: 97.5%;
    }

    .navbar-container {
        transition: background-color 1s ease-out, color 0.5s ease-in-out;
    }
    
    .navbar-container:hover {
        background-color: var(--txt-color);
    }
    
    .navbar-container:hover .title {
        color: var(--bg-color-accent);
    }
}

.sidebar-container {
    visibility: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: center;
    height: auto;
    width: 0;
    font-size: 0.6rem;
    background-color: var(--bg-color2);
    border-radius: 10px;
    margin-top: 10px;
    overflow: hidden;
    transition: width 1s, visibility 0.8s;
}

.sidebar-container.open {
    visibility: visible;
    width: clamp(150px, 400px, 20vw);
}

.sidebar-item {
    box-sizing: border-box;
    background-color: var(--bg-color-accent);
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
    padding: 10px;
    transition: background-color 0.25s;
    align-content: center;
}

.sidebar-item:hover {
    background-color: var(--bg-color-accent2);
}

.sidebar-link {
    visibility: visible;
    text-decoration: none;
    color: var(--txt-color);
    margin-left: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
}

.main-content {
    position: absolute;
    top: 30px;
    z-index: -10;
}

标签： javascripthtmlnode.jsediting

解决方案

推荐阅读