前言
不知不觉使用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后台新建一个独立页面模板选择待办清单就完成啦!
One comment
新盘新项目,不再等待,现在就是最佳上车机会!coinsrore.com