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

最新推荐文章于 2021-07-14 19:23:45 发布

itsnekodeng学习技术博客

最新推荐文章于 2021-07-14 19:23:45 发布

阅读量1.1k

点赞数 3

分类专栏：关于hexo博客魔改美化教程系列文章标签： hexo vue javascript css html

本文链接：https://blog.csdn.net/weixin_42529972/article/details/109412131

版权

本文介绍了如何在Hexo博客上创建一个不受渲染的TodoList页面，通过新建HTML文件并利用Vue.js进行交互，同时利用localStorage保存数据。详细步骤包括设置Hexo配置以忽略该文件，创建TodoList页面，编写HTML内容，并展示了最终的效果。

摘要由CSDN通过智能技术生成

前言：一直想给博客站点添加一个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;