关于给hexo博客增加todolist任务清单页面（使用vue和localstorage）

技术

发布日期: 2020-11-06

文章字数: 1.9k

阅读时长: 9 分

前言：一直想给博客站点添加一个todolist页面，这不，它来了！本文基于matery主题，使用vue和localstorage，其他主题亦可参考。这里可作为各位访客的一个心愿单模块，可以在下方写下自己今年或者近期的愿望或者flag，例如留下一个flag到下一年或者下一周再次来打卡，欢迎大家来留下自己的todolist哦 ~ ，

效果展示

先上效果图：

效果链接：
itsNeko计划列表todolist

设置hexo不渲染该文件

背景：因为这是一个单独html文件，不使用hexo来渲染，所以要设置属性。

在站点_config配置文件下，找到skip_render属性，添加内容：
```
skip_render: 
- "todolist/**"
```
此处todolist文件就是我接下来要新建的存储html的文件。
代码意思是，不渲染todolist文件下的任何内容，达到了我们的目的。
例如，如果你不想渲染一个md文章，就可以设置:
```
skip_render: "_post/demo.md"
```

新建todolist页面

首先，在主题的 _configy.yml文件中设置 menu ：
```
todolist:
  url: /todolist
  icon: fas
```
然后，新建页面
```
hexo new page "todolist"
```
然后就会发现source中新建好了一个todolist文件夹

打开该文件夹，删除index.md文件
然后，新建一个index.html文件

设置index.html页面内容

接下来就可以在index.html文件里加入网页源码了。
这里我直接贴我的源码，样式请自行修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <style>
        body{
            margin:0;background-color:#fafafa;font:14px 'Helvetica Neue',Helvetica,Arial,sans-serif}
        h2{margin:0;font-size:12px}
        a{color:#000;text-decoration:none}
        input{outline:0}
        button{margin:0;padding:0;border:0;background:0;font-size:100%;vertical-align:baseline;font-family:inherit;font-weight:inherit;color:inherit;outline:0}
        ul{padding:0;margin:0;list-style:none}
        .page-top{width:100%;height:40px;background-color:#db4c3f}
        .page-content{width:50%;margin:0 auto}
        .page-content h2{line-height:40px;font-size:18px;color:#fff}
        .main{width:50%;margin:0 auto;box-sizing:border-box}
        .task-input{width:99%;height:30px;outline:0;border:1px solid #ccc}
        .task-count{display:flex;margin:10px 0}
        .task-count li{padding-left:10px;flex:1;color:#dd4b39}
        .task-count li:nth-child(1){padding:5px 0 0 10px}
        .action{text-align:center;display:flex}
        .action a{margin:0 10px;flex:1;padding:5px 0;color:#777}
        .action a:nth-child(3){margin-right:0}
        .active{border-bottom: 2px solid #629A9C}
        .tasks{background-color:#fff}.no-task-tip{padding:10px 0 10px 10px;display:block;border-bottom:1px solid #ededed;color:#777}.big-title{color:#222}.todo-list{margin:0;padding:0;list-style:none}
        .todo-list li{
            position:relative;
            font-size:16px;
            border-left: 5px solid #629A9C;
            box-shadow: 0 1px 2px rgba(0,0,0,0.07);
            margin-bottom: 16px;
        }
        .todo-list li:hover{background-color:#fafafa}
        .todo-list li.editing{border-bottom:0;padding:0;}
        .todo-list li.editing .edit{display:block;padding:13px 17px 12px 17px;margin:0 0 0 43px}
        .todo-list li.editing .view{display:none}
        .toggle{
            text-align:center;
            width:16px;
            height:16px;
            position:absolute;
            top:2px;
            left: 15px;
            bottom:0;
            margin:auto 0;
            cursor: pointer;
        }
        .todo-list li label{
            white-space:pre-line;
            word-break:break-all;
            padding:15px 60px 15px 15px;
            margin-left:45px;
            display:block;
            line-height:1.2;
            transition:color .4s
        }
        .todo-list li.completed label{
            color:#d9d9d9;
            text-decoration:line-through
        }
        .todo-list li .destroy{
            display:none;
            text-align:center;
            width:16px;
            height:16px;
            position:absolute;
            top:0;
            right:15px;
            bottom:10px;
            margin:auto 0;
            cursor: pointer;
            font-size:28px;
            color:#cc9a9a;
            transition:color .2s ease-out
        }
        .todo-list li .destroy:hover{color:#af5b5e}
        .todo-list li .destroy:after{content:'×'}
        .todo-list li:hover .destroy{display:block}
        .todo-list li .edit{display:none}
        .todo-list li.editing:last-child{margin-bottom:-1px}
    </style>
</head>
<body>
<div class="page-top">
    <div class="page-content">
        <h2>任务计划列表</h2>
    </div>
</div>
<div class="main">
    <h3 class="big-title">添加任务：</h3>
    <input
            placeholder="例如：吃饭睡觉打豆豆；  提示：+回车即可添加任务，双击列表标题即可编辑"
            class="task-input"
            type="text"
          v-on:keyup.enter="enterFn"
            v-model="todo"
    />
    <ul class="task-count">
        <li>{{unComplete}}个任务未完成</li>
        <li class="action">
            <a :class="{active:visibility!=='unCompleted'&&visibility!=='completed'}" href="#all">所有任务</a>
            <a :class="{active:visibility==='unCompleted'}" href="#unCompleted">未完成的任务</a>
            <a :class="{active:visibility==='completed'}" href="#completed">完成的任务</a>
        </li>
    </ul>
    <h3 class="big-title">任务列表：</h3>
    <div class="tasks">

        <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
        <ul class="todo-list" v-show="list.length">
            <li class="todo"
                v-for="item in filterData"
                v-bind:class="{completed:item.isComplete,editing:item===edtorTodos}"
            >
                <div class="view">
                    <input class="toggle"
                          type="checkbox"
                          v-model="item.isComplete"
                    />
                    <label @dblclick="edtorTodo(item)">{{item.title}}</label>
                    <button
                            class="destroy"
                            @click="delFn(item)"
                    ></button>
                </div>
                <input
                        class="edit"
                        type="text"
                        v-focus="edtorTodos===item"
                        v-model="item.title"
                        @blur="edtoEnd(item)"
                        @keyup.enter="edtoEnd(item)"
                        @keyup.esc="cancelEdit(item)"
                />
            </li>
        </ul>
    </div>
</div>
<script>
    //存取localStorage中的数据
var store = {
    save(key,value){
        window.localStorage.setItem(key,JSON.stringify(value));
    },
    fetch(key){
    return JSON.parse(window.localStorage.getItem(key))||[];
    }
}
//list取出所有的值
var list = store.fetch("storeData");

var vm = new Vue({
    el:".main",
    data:{
        list,
        todo:'',
        edtorTodos:'',//记录正在编辑的数据,
        beforeTitle:"",//记录正在编辑的数据的title
        visibility:"all"//通过这个属性值的变化对数据进行筛选
    },
    watch:{
        //下面的这种方法是浅监控
      /*list:function(){//监控list这个属性，当这个属性对应的值发生变化就会执行函数
          store.save("storeData",this.list);
      }*/
      //下面的是深度监控
        list:{
            handler:function(){
                store.save("storeData",this.list);
            },
            deep:true
        }

    },
    methods:{
        enterFn(ev){//添加任务
            //向list中添加一项任务
            //事件处理函数中的this指向的是当前这个根实例
            if(this.todo==""){return;}
                this.list.push({
                    title:this.todo,
                    isComplete:false
                });
                this.todo = "";
        },
        delFn(item){//删除任务
            var index = this.list.indexOf(item);
            this.list.splice(index,1)
        },
        edtorTodo(item){//编辑任务
            //编辑任务的时候记录编辑之前的值
            this.beforeTitle = item.title;
            this.edtorTodos = item;
        },
        edtoEnd(item){//编辑完成
            this.edtorTodos="";
            // this.cancelEdit = this.edtorTodos;
        },
        cancelEdit(item){//取消编辑
            item.title = this.beforeTitle;
            this.beforeTitle = '';
            this.edtorTodos='';
        }
    },
    directives:{
        "focus":{
            update(el,binding){
                if(binding.value){
                    el.focus();
                }
            }
        }
    },
    computed:{
        unComplete(){
        return  this.list.filter(item=>{
                return !item.isComplete
            }).length
        },
        filterData(){
            //过滤的时候有三种情况 all completed unCompleted
            var filter = {
                all:function(list){
                    return list;
                },
                completed:function(list){
                    return list.filter(item=>{
                        return item.isComplete;
                    })
                },
                unCompleted:function(list){
                    return list.filter(item=>{
                        return !item.isComplete;
                    })
                }
            }
            //如果找到了过滤函数，就返回过滤后的数据，如果没有找到就返回所有的数据
            return filter[this.visibility]?filter[this.visibility](list):list;
        }

    }
});
function hashFn(){
    var hash = window.location.hash.slice(1);
    vm.visibility = hash;
}
hashFn();
window.addEventListener('hashchange',hashFn);
</script>
</body>
</html>

最后，hexo一键三连即可得到效果啦。

参考：
ToDoList

NekoDeng

https://dyfa.top/posts/todolist-page.html