前言

不知不觉使用handsome博客已经两年了，一直没有更新，感觉要做的事还有很多，想做的事源源不断。那就趁现在记录一下吧~

效果预览

待办录

那些关于我的清单

创建数据

  • 创建 todolist.php 文件
  • 将文件存放在/www/wwwroot/你的服务器/usr/themes/handsome使页面匹配
<?php
/**
 * 待办清单
 * 
 *
 * @package custom
 * 
 * @blogdx
 * 本独立界面代码基于handsome原生友链
 * 仅仅做了样式上的修改，感谢原作者
 */
?>
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php $this->need('component/header.php'); ?>

<!-- aside -->
<?php $this->need('component/aside.php'); ?>
<!-- / aside -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<main class="app-content-body <?php echo Content::returnPageAnimateClass($this); ?>">
    <div class="hbox hbox-auto-xs hbox-auto-sm">
        <!-- 文章 -->
        <div class="col center-part gpu-speed" id="post-panel">
            <!-- 标题下的一排功能信息图标：作者/时间/浏览次数/评论数/分类 -->
            <?php echo Content::exportPostPageHeader($this, $this->user->hasLogin(), true); ?>
            <div class="wrapper-md">
                <?php Content::BreadcrumbNavigation($this, $this->options->rootUrl); ?>
                <div id="postpage" class="blog-post">
                    <article class="single-post panel">
                        <!-- 文章页面的头图 -->
                        <?php echo Content::exportHeaderImg($this); ?>
                        <!-- 文章内容下面添加待办清单 -->
                        <div class="wrapper-lg" id="post-content">
                            <!-- 这里是待办清单容器 -->
                            <div id="todolist" class="masonry-grid"></div> <!-- 瀑布流容器 -->
                          <?php Content::postContentHtml($this,
                              $this->user->hasLogin()); ?>
                              
                        </div>
                    </article>
                </div>
                <!-- 评论 -->
                <?php $this->need('component/comments.php') ?>
            </div>
            <?php echo WidgetContent::returnRightTriggerHtml() ?>
        </div>
        <!-- 文章右侧边栏开始 -->
        <?php $this->need('component/sidebar.php'); ?>
        <!-- 文章右侧边栏结束 -->
    </div>
</main>

<!-- footer -->
<?php $this->need('component/footer.php'); ?>
<!-- / footer -->

自定义CSS

在handsome主题设置-开发者设置-自定义CSS填写下面内容

/* 使用 column-count 来实现列布局 */
#todolist {
    column-count: 2; /* 设置为 2 列布局 */
    column-gap: 15px; /* 列之间的间隔 */
    padding: 0;
    width: 100%;  /* 确保容器宽度充满父容器 */
}

.list_item {
    break-inside: avoid-column;  /* 防止元素分割到不同的列 */
    background: #ffe3dd;
    border-radius: 12px;
    border: 2px dashed #f7a796;
    padding: 10px;
    margin-bottom: 15px;
    box-sizing: border-box;
    display: block;  /* 防止 inline-block 带来的高度影响 */
    width: 100%;  /* 保证每个 .list_item 占满父容器的宽度 */
}

/* 任务标题样式 */
.list_item h3 {
    margin: 0 0 10px 0;
    color: #333;
    border-bottom: 1px solid #f7a796;
}

/* 确保列表内容和任务项左对齐 */
.list_item ul {
    font-size: 17px;
    padding: 0;
    list-style-type: none;  /* 去除默认的圆点 */
    margin: 0;
    text-align: left;  /* 确保列表文本左对齐 */
    list-style-position: inside; /* 去除外部的标记位置，内对齐 */
}

/* 列表项样式 */
.list_item li {
    color: #333;
    border-bottom: 1px solid #f7a796;
    padding: 5px 0;
    text-align: left;  /* 确保任务项文本左对齐 */
}

/* 已完成任务样式 */
.list_item li.completed {
    text-decoration: line-through;
    color: #999;
}

/* 评论文本样式 */
.comment {
    margin-top: 5px;
    font-size: 12px;
    color: #555;
}

/* 响应式设计：当屏幕小于 600px 时，改为单列布局 */
@media (max-width: 600px) {
    #todolist {
        column-count: 1;
    }
}



/* 文章一级二级三级标题美化*/

#post-content h1,#post-content h2,#post-content h3,#post-content 
h4,#post-content h5,#post-content h6 
{color:#666;line-height:1.4;font-weight:700;margin:15px 0 10px 0}


/* 适配代办清单*/
.wrapper-lg {
    padding: 15px;
}

自定义JS

在handsome主题设置-开发者设置-自定义JavaScript填写下面内容就完成啦~

// 模拟的待办清单数据
const todos = [
            {
      "title": "去过的地方",
      "items": [
        {"task": "北京", "completed": true},
        {"task": "邯郸", "completed": true},
        {"task": "石家庄", "completed": true},
        {"task": "江苏", "completed": true},
        {"task": "上海", "completed": true},
        {"task": "哈尔滨", "completed": true},
        {"task": "杭州", "completed": true}
        
      ]
    },
    {
      "title": "想要买的东西",
      "items": [
        {"task": "入门公路车", "completed": true,"comment": "美利达斯特拉95ltd，售价4298"},
        {"task": "i5 13600kf", "completed": true,"comment": "CPU"},
        {"task": "华硕重炮手TUFB760m-PLUS-ddr5 二代", "completed": true,"comment": "主板：售价3004"},
        {"task": "西数SN770黑盘1T、三星990EVOPLUS1T", "completed": true,"comment": "固态硬盘：售价965.8"},
        {"task": "金百达A代-C32-6400-海力士32Gx2", "completed": true,"comment": "内存条：售价1460"},
        {"task": "玄武850K黑色 带AC线", "completed": true,"comment": "电源：售价304.8"},
        {"task": "利民散热水冷360", "completed": true,"comment": "散热：售价253.8"},
        {"task": "棱镜4pro 正3 反3 总6个", "completed": true,"comment": "风扇：售价59.3"},
        {"task": "航嘉S960", "completed": true,"comment": "机箱:售价179.85"}
        
      ]
    },

    {
      "title": "自我提升",
      "items": [
        {"task": "健康饮食", "completed": true},
        {"task": "定期护肤", "completed": true},
        {"task": "坚持锻炼", "completed": false},
        {"task": "不熬夜早起来", "completed": false}
        
        
      ]
    },
    {
      "title": "想学的东西",
      "items": [
        {"task": "织围巾", "completed": true},
        {"task": "Uni-app", "completed": false},
        {"task": "Vue", "completed": false}
        
      ]
    },
    {
      "title": "研究过的项目",
      "items": [
        {"task": "天天酷跑全自动托管", "completed": true},
        {"task": "网络验证", "completed": true},
        {"task": "Python自动化处理表格", "completed": true, "comment": "和朋友一起完成"},
        {"task": "Python企业微信推送", "completed": true},
        {"task": "安卓java实现云布局", "completed": true,"comment": "主要是原理和思路理解了就很简单"}
        
      ]
    },
        {
      "title": "情侣待办录",
      "items": [
        {"task": "一起听音乐", "completed": false},
        {"task": "手牵手过马路", "completed": false},
        {"task": "一起听歌", "completed": false},
        {"task": "一起看电影", "completed": false},
        {"task": "一起做饭", "completed": false},
        {"task": "一起去买菜", "completed": false},
        {"task": "一起打扫卫生", "completed": false},
        {"task": "一起穿着情侣装", "completed": false},
        {"task": "一起跨年", "completed": false},
        {"task": "一起合照", "completed": false},
        {"task": "一起坐飞机", "completed": false},
        {"task": "一起坐火车", "completed": false},
        {"task": "一起过生日", "completed": false},
        {"task": "一起锻炼身体", "completed": false},
        {"task": "一起去旅游", "completed": false},
        {"task": "一起拍视频记录生活", "completed": false},
        {"task": "一起画画", "completed": false},
        {"task": "一起泡脚", "completed": false},
        {"task": "一起堆雪人", "completed": false},
        {"task": "一起淋雨", "completed": false},
        {"task": "一起喝咖啡", "completed": false},
        {"task": "一起爬山", "completed": false},
        {"task": "一起放风筝", "completed": false},
        {"task": "一起赏月", "completed": false},
        {"task": "一起包饺子", "completed": false},
        {"task": "一起去见父母", "completed": false},
        {"task": "一起用情侣手机壳", "completed": false},
        {"task": "一起为对方刷牙", "completed": false}
      ]
    }
    
  ];

// 渲染待办清单的函数
function renderTodos() {
    const todosContainer = document.getElementById('todolist');
    todosContainer.innerHTML = ''; // 清空现有的待办清单

    todos.forEach(todo => {
        const listContainer = document.createElement('div');
        listContainer.className = 'list_item'; // 每个卡片

        const title = document.createElement('h3');
        title.textContent = todo.title;
        listContainer.appendChild(title); // 每个卡片的标题

        const ul = document.createElement('ul');
        ul.style.margin = '0'; // 清除默认 margin
        ul.style.padding = '0'; // 清除默认 padding
        ul.style.textAlign = 'left'; // 确保列表内容左对齐

        todo.items.forEach(item => {
            const li = document.createElement('li');
            li.style.textAlign = 'left'; // 确保每个列表项左对齐

            const icon = document.createElement('i');
            icon.className = item.completed ? 'fas fa-check-circle' : 'far fa-circle';
            icon.style.marginRight = '5px';
            li.appendChild(icon); // 显示任务图标

            const textNode = document.createTextNode(item.task);
            li.appendChild(textNode); // 显示任务内容

            if (item.completed) {
                li.classList.add('completed');
            }

            if (item.comment) {
                const commentDiv = document.createElement('div');
                commentDiv.textContent = `Ps: ${item.comment}`;
                commentDiv.className = 'comment';
                li.appendChild(commentDiv); // 显示任务的附加评论
            }

            ul.appendChild(li); // 添加任务到列表
        });

        listContainer.appendChild(ul); // 添加任务列表到卡片
        todosContainer.appendChild(listContainer); // 将卡片添加到待办清单容器
    });
}

// 初次加载页面时就渲染待办清单
$(document).ready(function() {
    renderTodos();
});

添加页面

在Typecho后台新建一个独立页面模板选择待办清单就完成啦！

Last modification：February 17, 2025
© Reprint prohibited
如果觉得我的文章对你有用，请随意赞赏