点击查看参考站点 参考方向教程原贴张洪 Heo张洪 Heo 实际效果 引用站外地址 butterfly关于页面魔改实际效果 butterfly关于页面魔改实际效果 魔改有风险，魔改前注意备份。 添加 about 页面新建 source/about/index.md 123456789---title: 关于date: 2021-03-30 15:57:51aside: falsetop_img: falsebackground: "#f8f9fe"comments: falsetype: "about"--- 添加 html 结构新建 themes/butterfly/layout/includes/page/about.pug 12345678910111213141 ...

问题： 解决 元素隐式具有 “any” 类型，因为类型为 “string” 的表达式不能用于索引类型 “Object”。 在类型 “Object”上找不到具有类型为 “string” 的参数的索引签名 描述： 在写代码的时候，对一个对象做了一个 forEach 循环，然后取到了其每一个 key 对应的 value 值，但是写完之后发现Typescript 报错了，错误内容就是如题，有点奇怪，特此去了解一下 123456789Object.keys(obejct).forEach((key) => { obejct[key]});// 或者for (const key in obejct) { // 处理... obejct[key] ....} 解决过程原谅我报错都没有看明白，查了一下之后才知道，原来 key 值的类型不是 string，在 javascript 中是默认给你转好的，而在 Typescript 中则不是，因此要么转，要么声明，要么忽略… 方案一：忽略在 tsconfig.json 中 compilerOptions 里面 ...

butterfly 即刻短文（瀑布流）部署方案。希望能给各位看客提供魔改思路。 todolist 支持度 图片灯箱 ✅ 多图片多行显示 ✅ 外部链接 ✅ 瀑布流 ✅ 首页滚动 ✅ 快速评论 ✅ 本地修改 yml 发布 ✅ aplayer 单曲音乐 ✅ 插件版本 ❌ 点击查看参考教程 参考洪哥的即刻短文修改而来。参考方向教程原贴heoHexo 的 Butterfly 魔改：即刻短文静态部署版 注意 ⚠️ 该教程仅为博主目前使用的方法, 如需移植还需自行修改 css 变量, 以下为博主自用 css 变量, 可自行修改为自己喜欢的颜色。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 ...

最近在做关于界面的数据统计模块过程中要使用到正则表达式匹配 span 元素开头 和 p 标签结尾的字符 于是开心的下了如下正则表达式匹配这串数据 数据内容1<p>网站数据概况</p><p><span>0</span><span>4</span></p><p><span>1</span><span>33</span></p><p><span>2</span><span>95</span></p><p><span>3</span><span>103</span></p><p><span>4</span><span>269</span></p><p><span>5</span> ...

什么是响应式? 我们先来看一下响应式意味着什么?我们来看一段代码: 123let m = 20;console.log(m);console.log(m * 2); m 有一个初始化的值，有一段代码使用了这个值;那么在 m 有一个新的值时，这段代码可以自动重新执行; 上面的这样一种可以自动响应数据变量的代码机制，我们就称之为是响应式的。 那么我们再来看一下对象的响应式: 响应式函数设计 首先，执行的代码中可能不止一行代码，所以我们可以将这些代码放到一个函数中: 那么我们的问题就变成了，当数据发生变化时，自动去执行某一个函数; 但是有一个问题:在开发中我们是有很多的函数的，我们如何区分一个函数需要响应式，还是不需要响应式呢? 很明显，下面的函数中 foo 需要在 obj 的 name 发生变化时，重新执行，做出相应; bar 函数是一个完全独立于 obj 的函数，它不需要执行任何响应式的操作; 响应式函数的实现 watchFn 但是我们怎么区分呢? 这个时候我们封装一个新的函数 watchFn;凡是传入到 watchFn 的函数，就是需要响应式的;其他默认定义的函数都是 ...

v-model 的基本使用表单提交是开发中非常常见的功能，也是和用户交互的重要手段: 比如用户在登录、注册时需要提交账号密码; 比如用户在检索、创建、更新信息时，需要提交一些数据; 这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用 v-model 指令来完成: v-model 指令可以在表单 input、textarea 以及 select 元素上创建双向数据绑定; 它会根据控件类型自动选取正确的方法来更新元素; 尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特 殊处理; v-model 的原理 官方有说到，v-model 的原理其实是背后有两个操作: v-bind 绑定 value 属性的值;v-on 绑定 input 事件监听到函数中，函数会获取最新的值赋值到绑定的属性中; 事实上 v-model 更加复杂 v-model 绑定 表单元素 v-model 绑定 textarea我们来看一下绑定 textarea: 12345<div id="app"> ...

复杂 data 的处理方式我们知道，在模板中可以直接通过插值语法显示一些data 中的数据。 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示; 比如我们需要对多个 data 数据进行运算、三元运算符来决定结果、数据进行某种转化后显示; 在模板中使用表达式，可以非常方便的实现，但是设计它们的初衷是用于简单的运算; 在模板中放入太多的逻辑会让模板过重和难以维护; 并且如果多个地方都使用到，那么会有大量重复的代码; 我们有没有什么方法可以将逻辑抽离出去呢? 可以，其中一种方式就是将逻辑抽取到一个method中，放到 methods 的 options 中; 但是，这种做法有一个直观的弊端，就是所有的 data 使用过程都会变成了一个方法的调用; 另外一种方式就是使用计算属性 computed; 认识计算属性 computed 什么是计算属性呢? 官方并没有给出直接的概念解释; 而是说:对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性; 计算属性将被混入到组件实例中 所有 getter 和 setter 的 this 上下文自动地绑定 ...

一个好的博客当然需要有自己的鱼塘（坏笑） 点击查看参考站点 参考方向参考站点洪哥鱼塘HEO 鱼塘也就是朋友圈使用的项目是 hexo-circle-of-friends 后端部署文档：后端部署文档 博主采用的是 server+mysql 的方式进行部署。可以自行选择部署方案，后端部署完成后你就拥有了一个 api 调用地址。 这篇文章主要讨论前端部署方案 安装插件在博客根目录[Blogroot]下打开终端，运行以下指令（与旧版前端方案不兼容，如有安装旧版请先卸载）： 123npm uninstall hexo-butterfly-fcircle --savenpm uninstall hexo-filter-fcircle --savenpm install hexo-filter-fcircle-anzhiyu --save 添加配置信息在站点配置文件_config.yml或者主题配置文件例如_config.butterfly.yml中添加 12345678910 ...

工欲善其事，必先利其器。 vscode算是前端的利器了, 也有很大一部分人在使用 WebStorm , 我始终觉得它太大了于是与便弃用了。我相信 vscode 才会是前端开发工具的潮流 😭 在这里推荐几款vscode扩展插件是因为最近问的同学很多，并且给自己做一个记录。 Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code 首先第一个推荐的是 Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code , 不得不说这名字是真长。这是一个汉化插件，可以中文化vscode, 不过总归是有汉化的不太好的地方, 比如我的编译器右键时就有一部分未翻译的，不过基本不影响日常使用已经很棒了啦。 Vue Volar extension Pack 开发 vue 的话可以安装这个扩展包，这个扩展包中包括大多数开发 vue3 中需要的扩展，其中包括格式化代码插件Prettier, 路径引入插件Path Intellisense, 自动引入包插件Au ...

原创HEO 点击查看参考教程 参考方向教程原贴洪哥HEO 昨天看到洪哥的加载动画很奇特，就只有一个头像，之前一直以为洪哥没有加载动画原来是加载太快看不到 效果预览本站 满屏与 pace 同时启用 butterfly 4.5 以上方案修改 themes/butterfly/layout/includes/loading/fullpage-loading.pug 1234567891011121314151617181920212223#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")') .loading-bg div.loading-img .loading-image-dotscript. const preloader = { endLoading: () ...

点击查看参考教程 参考洪哥的导航栏修改而来。参考方向教程原贴heoheoleonus返回顶部 显示网页阅读进度 注意 ⚠️ 该教程仅为博主目前使用的方法, 如需移植还需自行修改 js, 比如回到顶部需要调用的方法是在右键菜单中定义的方法,而没有这个方法的同学,可以自行修改nav.pug中的rmf.scrollToTop()方法为btf.scrollToDest(0, 500)方法或您自己的方法, 部分 css 颜色代码您可能需要自行修改。 预览预览效果 自定义 css添加自定义 css nav_menu.css, 注意其中的颜色代码需自行替换。这里提供一份我的颜色代码。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767 ...