在博客中利用 Chartjs 插入动态图表
该文基本 (全部) 来自于 chatjs 中文文档 由于使用 pjax，导致页面需要二次刷新才会显示图表，故引入了自动刷新的 JS，但这样会导致回退上一个标签页面失败以及该页面 pjax 失效已关闭此页面的 pjax 背景今天在谷歌上逛博客时，突然发现 shen-yu 大佬根据 chatjs 写了一个 Hexo 插件，出于兴趣，打算使用并记录该插件的效果。shen-yu 大佬 shen-yuchatjs 中文文档 chatjs由于插件的安装和图表的使用上面两个链接已介绍得足够详细，本人只做一些图表的演示，并充当一个函数，实现代码的复用 (手动狗头)。 图表折线图效果 var ctx = document.getElementById('chart6677').getContext('2d'); var options = { type: 'line', data: { labels: ['8.4', '8.5', '8.6', '8.7', '8.8', '8.9', '8.10'], datasets: [{ ...
Vercel 托管博客
前言 2021-07-27 时间飞逝，一年就这么过去了，Vercel 官网也更新了好几轮，但是大致操作流程并没有变化。该更新这篇文章了。 2020-08-09 本站已托管至 Vercel，但作为一名前端小白，昨天帮朋友托管博客到 Vercel 的过程中到处碰壁，就想写一篇博客记录一下。 注册登录点击 Vercel 官网 Vercel，并使用 GitHub 账户进行登录。 这里需要注意 GitHub 账户绑定的主邮箱📪，实测 QQ 邮箱会出现无法使用 GitHub 账户登陆 Vercel 的情况。 导入仓库登陆成功后进行静态界面的导入。 新建一个工程。 选择站点仓库。 配置团体或个人，直接跳过。 设置项目名称和框架，FRAMEWORK PRESET 选择 Other 并 Deploy。 等待导入成功，导入完成后会收到一封含有若干域名的邮件。 绑定并解析域名点击 Settings👉Domains👉输入自己的域名，并在域名提供商控制台进行域名解析（CNAME），值为 Vercel 提供的任一域名，并在 Vercel 中添加自己的域名。解析完成后即可通过自己 ...
Butterfly 魔改 (涉及修改源码)
此教程涉及修改源码 Butterfly 侧边栏引入一言背景在修改每页显示 7 篇文章后，出现了这种情况。这是完美主义（强迫症）的我所不能忍受的，有什么可以占据这里的呢？一言 开搞创建 card_hitokoto在主题配置文件 Butterfly/_config.yml 中的侧边栏设置中添加 card_hitokoto: enable: true 1234567891011121314151617181920212223242526272829303132333435aside: enable: true mobile: true # display on mobile position: right # left or right card_author: enable: true description: button: icon: fab fa-github text: Follow Me link: https://github.com/flipped-1121 card_announcement: enable ...
前端学习（六）
记录前端学习 学习之路・CSS-01好久不见本着 “博客想写就写” 的原则（其实就是懒），终于点开了_posts 文件夹。 因本人习惯，笔记在 WebStorm 上呈现 1234567891011121314151617181920212223<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>CSS</title> <style> p2 { color: cadetblue; } p3 { font-size: 26px; } </style></head><body><p1>CSS</p1><br><p2>CSS改变字体颜色</p2><br><p3>CSS改变字体大小 ...
前端学习（五）
记录前端学习 学习之路・HTML-05因本人习惯，笔记在 WebStorm 上呈现 Form1.htmlForm2.html123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>表单</title>& ...
前端学习（四）
记录前端学习 学习之路・HTML-04因本人习惯，笔记在 WebStorm 上呈现 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>列表</title></head><body><!--无序列表--><!--无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于<ul>标签。每个列表项始于<li>--><h2>学习</h2><ul> <li>准备阶段</li> <li>理论学习</li> <li>实际操作& ...
前端学习（三）
记录前端学习 学习之路・HTML-03因本人习惯，笔记在 WebStorm 上呈现 Table1.htmlTable2.html123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>表格</title>&l ...
