网站更换更新方法记录

5月1日

            
写文章时，我是自己纯手工编写的HTML，这样不仅费时费力，而且难以维护。于是我就想到了用md去写文章，还顺便查了一下Hexo能不能自定义主题。结果是Hexo能自定义主题，于是倒腾了半天，又是迁移目录，又是转换文档格式，又是更换样式改配置文件，最后还是以失败告终。
然后我又想到了，既然用pandoc可以把MarkDown文件转换成HTML文件，那就可以写一个模板文件，把文章内容写到一个md文件里，再用pd转换格式。
说做就做，我问了一下豆包，还了解到占位符$title$用于标题，$body$用于文章主体。
接下来就是转换格式。先转换到网站根目录:cd chenwumm.github.io，输入pandoc md/文章序号.md -o posts/文章序号.html --template plain.html，确实省力了不少。


5月3日


每次改动页面顶部的导航栏，都要到每个页面去改，非常的麻烦。好在智慧(?)的我想到了一个好主意:就是把页面导航栏的源代码写入一个js文件，然后在每页面加载的时候加载js文件，每次改动导航栏的时候，改js文件就可以了。说干就干，我先是用豆包写了一个js代码:


// 获取页面上用于放置导航栏的元素
const navContainer = document.getElementById('nav-container');
if (navContainer) {
    // 定义包含各个链接的 HTML 字符串
    const navHTML = `
        <a href="/">首页</a>
        <a href="#">联系我</a>
        <a href="#">关于我</a>
        <a href="#">公告历史</a>
        <a href="#">友链</a>
        <a href="#">添加友链</a>
        <a href="#">论坛</a>
    `;
    // 使用 innerHTML 将 HTML 字符串插入到指定元素中
    navContainer.innerHTML = navHTML;
} else {
    console.error('找不到用于放置导航栏的元素（id="nav-container"）');
}


然后稍加改动:


const navContainer = document.getElementById('nav');
if (navContainer) {
    const navHTML = `
     <nav>
            <ul>
                <li><a href="/index.html">主页</a></li>
                <li><a href="/contact.html">联系我</a></li>
                <li><a href="/about.html">关于我</a></li>
                <li><a href="/ann-his.html">公告历史</a></li>
                <li><a href="/fl.html">友链</a></li>
                <li><a href="/addfl.html">添加友链</a></li>
                <li><a href="http://chenwu.miniban.cn/">论坛</a></li>
            </ul>
        </nav>
    `;
    navContainer.innerHTML = navHTML;
} else {
    console.error('找不到用于放置导航栏的元素（id="nav"）');
}


再改动页面中以前的导航栏代码:


<div id="nav"><script src="/navbar.js"></script></div>


这样就好了，下次再改动顶部导航栏的时候直接改navbar.js就可以了。


我还写了一段bash代码(代码名
wz.sh)，方便更新网站:


#!/bin/bash
if [[ $1 == "mkpage" ]]; then
pandoc md/$2.md -o posts/$2.html --template plain.html
fi
if [[ $1 == "upload" ]]; then
echo "转换成网站主目录..."
cd chenwumm.github.io
echo "配置用户名和邮箱..."
git config --global user.name "chenwumm"
git config --global user.email "496163862@qq.com"
echo "添加文件到暂存区..."
git add .
read -p "请输入提交信息:" cmt
git commit -m "$cmt"
echo "提交信息:$cmt 提交这次改动..."
echo "推送到远端..."
git push origin main
fi


然后在termux根目录里的.bashrc文件里加入一行alias wz=". ~/wz.sh"，每次更新网站时先写好md页面，然后再
cd chenwumm.github.io切换到网站主目录，最后执行wz mkpage 刚更新的网站序号;wz upload就可以了。

评论