木灵鱼儿

木灵鱼儿 1年前 vue 项目实战

vite使用了postcss导致index.html的样式也被转换了

前言今天才发现，vite使用了postcss做px转换的时候，导致index.html写的style标签里面的样式也被转换了。超级尴尬，导致静态loading的样式会大小变化一下，很难受。解决的思路还是很简单的，有两种方式：添加class黑名单，这样对应的class就不会转换了；排除指定文件，该文件不会被转换；我项目使用的是rem转换，vw的转换其实配置也差不多。解决办法rem插件postcss-pxtorem配置postcss.config.js中postcss-pxtorem的配置：module.exports = { plugins: { "pos...

1921 0 0

rem postcss vw

进阶中级TypeScript需要掌握的一些类型定义用法

木灵鱼儿 1年前 TypeScript

进阶中级TypeScript需要掌握的一些类型定义用法

前言使用ts也有一段时间了，但是一直在入门阶段不得要领，看着那些热门仓库的类型定义花里胡哨的，想着自己啥时候也能这么强啊，但是日常项目开发，顶多就是定义下type、interface，用一用泛型封装一下，对于一些特殊需求，不知道该如何下手。比如：一些第三方插件它虽然提供了类型声明，但是可能个别声明没有导出，如果你想使用这个类型，该怎么办呢？我们在定义类型的时候，如果存在多个类型嵌套组合成一个大类型声明，一定要先声明小的类型，然后组合成大的类型吗？这种方式会导致大的类型在预览定义时会十分痛苦，因为只能看到小类型声明的名称，看不到具体定义的内容。这几天逛b站发现了一个宝藏视频，介绍了常用的1...

2375 1 0

exclude required TypeScript

全局声明遇到的一些问题

木灵鱼儿 1年前 TypeScript

全局声明遇到的一些问题

前提本来是想给全局window挂载一个属性，但是vite这个不知道怎么，采用之前的全局类型写法一直类型推断不出来，头疼了好久，也没想到啥原因，先把问题解决方案记一下。解决方案创建了一个global.d.ts文件，内容如下： /** 安卓套壳包提供的api */ interface AndroidEMInterface { /** 清理缓存方法 */ cleanCache(): void; } declare global { interface Window { AndroidEM?: AndroidEMInterface; } } declare const...

1745 0 0

TypeScript declare 全局声明

vue3+ts+vite4的一些踩坑实录

木灵鱼儿 1年前 vue 项目实战

vue3+ts+vite4的一些踩坑实录

全局方法挂载和类型声明全局挂载还是很简单的，照着官方的例子写就可以了，我的做法是创建了一个单独ts文件，通过app.use()的方式来进行批量挂载，代码如下：import type { App } from "vue"; /** * @description: 获取assets文件 * @param {string} path * @Date: 2023-05-05 10:05:18 * @Author: mulingyuer */ export function getAssetsFile(path: string): string { retu...

3707 127 0

自动引入环境变量 eslint

数值转百分比的方法

木灵鱼儿 1年前 TypeScript

数值转百分比的方法

要求传入一个数字，转成10%这种百分比的形式，如果存在小数则四舍五入保留2位小数，如果小数位是0则不保留。代码function toPercent(num: number): string { if (num % 1 !== 0) { let percentageNum = (num * 100).toFixed(2); percentageNum = percentageNum.endsWith('.00') ? percentageNum.slice(0, -3) : perc...

2805 31 0

数值百分比转换

nest.js 管道（类型转换和数据校验）

木灵鱼儿 1年前 Nest.js

nest.js 管道（类型转换和数据校验）

前言使用管道功能的前提是拥有@Injectable()装饰器的类，管道可以用于数据类型的转换和校验，也可以自定义实现一个管道，但是需要符合接口PipeTransform。nest官方提供了9个内置管道：ValidationPipe 一般用于全局的校验管道，后面会说ParseIntPipe 转换为整数类型，其实就是number去浮点数了ParseFloatPipe 转为浮点数ParseBoolPipe 转布尔值ParseArrayPipe 转数组ParseUUIDPipe 转uuidParseEnumPipe 转为枚举DefaultValuePipe 默认值，适用于一些参数可以不传，然后使...

3333 100 0

类型转换 nest.js 管道

nest.js 环境变量配置

木灵鱼儿 1年前 Nest.js

nest.js 环境变量配置

前言本地开发与正式环境有些配置是不一样的，比如：数据库的链接配置、环境标识NODE_ENV等、以及一些静态的全局变量之类的数据；nest主张的是模块化的形式，所以将这些东西全部包成一个模块注册使用是一个不错的办法，那么有什么便捷的处理方式呢？nest官方提供了一个插件：@nestjs/config用于处理这些东西，以及提供便捷的类型推断方式。插件文档地址：使用文档首先我们需要安装这个插件：pnpm i @nestjs/config环境变量区分我们在项目中创建一个.env的环境变量文件，这个文件只会在各自的本地存在，如果我们使用了git仓库来进行管理的话，这个文件是需要在.gitignor...

4717 70 13

环境变量 nest.js @nestjs/config

prisma 首次使用

木灵鱼儿 1年前 Nest.js

prisma 首次使用

简介prisma是一款ORM库，用于处理数据库相关内容，它通过一份Prisma Schema文件来描述数据库的结构，除了我们日常能看到的字段之外，还能看到一些链表，外键这些平时可视化看不到的内容。prisma还提供了vscode的插件用于语法提示，以及cli相关的一些便捷功能，比如将每次字段改动记录成一个sql操作，使用reset操作都会运行之前记录的sql操作。而且cli操作是入侵很小的操作，他会在当前项目创建一个单独的prisma目录用于处理相关事宜，并不会影响已写的代码。所以在使用之前我们先处理下一些依赖：vscode安装插件：Prisma格式化.prisma文件使用该插件项目安装...

3160 34 0

MySQL prisma ORM

Typecho CommentNotifier邮件回复提醒美化模板

木灵鱼儿 1年前 Typecho 主题

Typecho CommentNotifier邮件回复提醒美化模板

前言这是一个 Typecho 博客邮件回复提醒插件 CommentNotifier 的一个模板主题，由于 Typecho 更新到 1.2 版本了，之前很多插件都失效了，包括之前我制作的美化版插件也是一样的。于是找泽泽要了一份它最近用的邮件回复提醒插件，经过我的搬运，把之前的那个仿猎聘网的邮件搬运过来了。预览下载Github：Typecho_CommentNotifier_Theme_LP喜欢就点个 Star 吧使用下载 Releases 最新版即可。解压到 CommentNotifier 插件的template目录下，解压的时候要注意不要嵌套目录了，正确的结构是解压完点开文件夹就能看到具...

5268 4 10

CommentNotifier 邮件回复美化

数组Array的reduce方法有意思的使用场景

木灵鱼儿 2年前 JavaScript

数组Array的reduce方法有意思的使用场景

前言对于数组的reduce方法一直用的比较少，大多数情况下forEach\filter\map就可以满足需求，但是对于reduce一直没找到合适的使用场景，就很可惜，想用但是没用上。最近在nest的教程中看到这么一种有趣的用法，特此分享！代码在一些使用场景中，可能会使用扁平化的对象key来获取对象中的值，比如在后端中可以看到一些这样的用法：this.config.get("database.host")意思是我需要从config配置对象中获取数据库的host字段，但是config本身是存在很多配置项的，他可能会是这样的结构：{ app: { p...

1794 0 0

Array reduce

装饰器 Decorators

木灵鱼儿 2年前 TypeScript

装饰器 Decorators

前言之前了解过一些，但是因为没有做专门的笔记，最近学习nest.js的时候，到处都是装饰器，不得已重温了一下ts的装饰器，并弄个笔记记录一下。typescript提供了几种装饰器：类装饰器方法装饰器属性装饰器访问器装饰器参数装饰器在使用装饰器之前，我们还需要配置一下tsconfig.json，开启两个配置：{ "compilerOptions": { "target": "ESNext", "emitDecoratorMetadata": true, "experimen...

1793 2 0

装饰器 Decorators 类装饰器

vscode 整理import引入

木灵鱼儿 2年前教程

vscode 整理import引入

最近发现的一个小功能，有时候我们import引入的插件可能后期用不着了，然后有啥办法可以快速删除呢？vscode提供了整理import的功能，有一个快捷键：shift + alt + o，mac可能不一样，可以自己去快捷键里面查询，搜索import就能看到。效果非常可以，节省手动删除的时间。想更加方便可以自己自定义下快捷键

6153 76 4

vscode import 整理

开源主题-高仿掘金《JJ》V2.0

木灵鱼儿 2年前 Typecho 主题

开源主题-高仿掘金《JJ》V2.0

前言经过半个月的努力，主题更新到2.0版本了，增加了Typecho 1.2的支持，以及众多改动，基本上是重构了一遍，采用了热门的Typescript来做类型约束，模块化的设计使得维护更加轻松了。更新日志2023-03-18webpack5 + typescript 重构主题支持 Typecho 1.2模块化结构兼容到 320px 分辨率修复 1.0 版本备案信息无法展示 bug新增表情文章与独立页支持切换主题支持更多的代码类型高亮文章内容支持 iframe 了优化了灯箱逻辑更加准确的分类菜单高亮更好的定位跳转更新了 UI有彩蛋哦还有很多变化需细细品味主题预览Github地址《Typech...

7.3w 572 140

typecho 开源博客主题

利用原生css实现hash哈希定位跳转偏移量处理

木灵鱼儿 2年前 CSS

利用原生css实现hash哈希定位跳转偏移量处理

前言最近在写目录树跳转功能的时候，还是遇到之前的那个老大难的问题，就是因为header顶部是fixed浮动的，导致hash跳转的时候会被挡住。因为hash定位会将元素的顶部与视图顶部对齐，但是也因为如此，导致被浮动元素挡住了内容。以前我是拦截默认的click事件，然后使用新的定位方法scrollIntoView来实现，通过配置它为居中展示，从而避免这个问题。最近重构主题的时候，发现这种方式并不优雅，而且很麻烦，有没有办法不依赖js实现呢？于是我想起以前看过的一篇文章，有一个css属性可以做的，于是找了很久，终于找到了，它就是scroll-padding！官方定义为：滚动端口的最佳查看区域...

3485 5 2

css hash 定位跳转

ts实战：给没有类型声明的第三方库编写一个类型声明文件

木灵鱼儿 2年前 TypeScript

ts实战：给没有类型声明的第三方库编写一个类型声明文件

前情提要在github找了一个原生代码写的Toast库，安装后发现没有ts类型声明，通过安装@types/库名也没有现成的对应的类型声明库，于是想着自己写一份声明文件用，也是第一次，所以找了好些教程，这里做个笔记。npm仓库： Toastify说实话这个库不太行，不支持多个toast，权当练手了。类型声明文件在项目中，比如我是在src目录下创建一个types目录，专门存放这些类型声明文件，创建一个名为Toastify.d.ts的文件。内容如下：declare module "toastify" { /** toast定位 */ export type Toa...

2547 57 0

TypeScript keyof 类型声明

利用发布订阅模式封装一个IntersectionObserver

木灵鱼儿 2年前 TypeScript

利用发布订阅模式封装一个IntersectionObserver

前言用于判断当前元素是否出现在视口区域，以此来实现懒加载已经是日常业务必须的东西了，但是如何去判断这个元素是否出现在视口中，是一个非常头疼的地方。很久以前，我们通过dom.offsetTop的方式，不断的累加自身和父级元素的offsetTop值，得到元素具体文档顶部的距离，然后判断这个距离是否小于等于当前视窗的高度+滚动条scrollTop，如果是的话，说明用户已经滚动到了，或者滚过去了，这个时候就得触发图片懒加载。但是这种方式十分痛苦，需要递归计算offsetTop的值，而且性能不是很好。后来浏览器又提供了getBoundClientRect的方法，这个方法会返回当前元素距离视窗的四个...

2292 3 0

TypeScript IntersectionObserver 发布订阅模式

typecho 自定义分类和分类高亮处理

木灵鱼儿 2年前 Typecho博客教程

typecho 自定义分类和分类高亮处理

前言目前个人认为最合适的一个判定了，但是我的做法只支持二级分类，如果你有多级分类，就需要自行调整了。先上个实际html渲染图：可以看到，我进入的是HTML子分类，那么对应的子分类class上已经有active类名了，而它的父级分类前端，在类名上也存在了active。教程不多说，直接上源码[hide]<div class="nav-list"> <?php $this->widget('Widget_Metas_Category_List')->to($category);?> <?php while...

8436 0 26

主题 typecho 分类

ts封装一个localStorage和sessionStorage的类

木灵鱼儿 2年前 TypeScript

ts封装一个localStorage和sessionStorage的类

前言希望存储一个对象的时候能自动JSON转成字符串，存储一个string类型的值时，不需要再JSON化了，不然又多两引号，和原生存储使用会有出入，我的宗旨就是能和原生效果保持一致的情况下增加一些方便的处理。拿取的时候就会有一些顾虑了，因为拿到的值就是字符串类型，所以我加了一个额外的参数来判断是否需要JSON解析，默认是需要的，这个配置用于这个值我可能自己手动转成字符串存的，它的源值是一个对象，我不希望取值的时候被解析出来，我就要它原样给我，应对这种情况加了一个配置判定。在拿取的时候返回的值类型是any，显然这不是我想要的，我希望能准确判定这个类型，于是通过泛型的方式进行约束。另一个考量是...

2762 0 0

TypeScript localStorage sessionStorage

利用typescript实现原生css变量的主题切换功能类

木灵鱼儿 2年前 TypeScript

利用typescript实现原生css变量的主题切换功能类

前言主题的切换研究过好久了，个人认为目前最好的两种实现：原生css变量实现，性能好，但是不太兼容旧设备利用预处理scss这种做一个主题类名，通过最上层类名变化从而改变嵌套的子类名的颜色，兼容性好，但是需要把所有的类都抽出来单独设置。本着简单+性能的目标，我采用了第一种方案，这种方案也是大佬张鑫旭提供了，文章是：《link rel=alternate网站换肤功能最佳实现》有兴趣弄的话可以先看看大佬的文章了解原理。封装主题的链接引入采用如下格式： <link href="<?php $this->options->th...

2284 0 0

typecho TypeScript 主题切换

typecho主题开发：基于webpack5的多页面打包项目

木灵鱼儿 2年前 Typecho博客教程

typecho主题开发：基于webpack5的多页面打包项目

前言一直想把基于webpack5的多页面打包整理一下，做成一个通用的typecho主题开发架子，之前在JJ主题上虽然以及由部分实现了，但是不是很理想，因为是第一次弄，所以还是有些粗糙。现在离职后得了空闲，于是把这个架子给搭起来了，基于这个架子做前端开发还是很方便的，起码各种框架都能通过按照包的方式使用，能用上先进的打包机还是很棒的！仓库地址github地址：webpack-multiple-entry觉得有用的话麻烦点个Star吧。如果有什么问题可以提交Issues或者在该文章下面留言

5042 19 6

typecho 主题开发 webpack5

MVC、MVP、MVVM

木灵鱼儿 2年前设计模式

MVC、MVP、MVVM

MVCmvc其实是从后端mvc架构模式中演变而来的，在2005年之前，也就是ajax还没有出现在前端世界中的时候，页面的处理其实都是由后端一人完成，全栈大师，那会前端技术还是很简单的，后端一个人就能实现从数据库拿数据然后渲染成一个完整html页面返回给浏览器。但是就是这个过程耦合度很高，以至于不太好维护代码，于是采用了一种分层模式，将不同的代码分为不同的部分，也就是解耦处理，总共分为三层：模型层（Model）、视图层（View）、控制器层（Controller）。模型层就是数据库的模型，如果使用过面向对象的数据库框架，比如sequelize，他们将每一个数据库的表转换成一个对象，通过操作...

1974 0 0

mvc mvp mvvm

windows+alist搭建一个web版局域网共享站点

木灵鱼儿 2年前教程

windows+alist搭建一个web版局域网共享站点

前言最近发现一个有意思的项目 alist，官方定义是一个支持多种存储的文件列表程序，而且它使用的新的框架 SolidJS；没有虚拟dom，直接操作原生dom，性能和 Vanilla 相同，于是拿来用了一下，发现解决了我的一个痛点。当我电脑下载完视频后，这些视频文件往往会很多或者文件很大，但是这些文件属于待确认文件，我可能简单略了一遍后就会将它们删除，所以，我不想移动到手机上去查看，但是电脑上看又不是很便捷，特别上晚上想躺床上的时候，操作电脑就不是很方便了。之前我是利用windows自带的文件共享功能Samba来远程查看的，通过手机的文件管理器SMB连接到电脑，然后查看文件，但是这种方式非...

6810 1 0

samba 局域网共享 alist

Event Loop事件队列和宏任务微任务

木灵鱼儿 2年前你不知道的JavaScript

Event Loop事件队列和宏任务微任务

Event Loop我们知道JavaScript是一门单线程的语言，他只能一行一行的执行代码，于是我们的代码应该都是同步的，这里我们暂时忘掉所有的异步，看一下这么做会有什么问题。用户进入了我们的网页，点击了一个按钮，触发加载更多功能，此时浏览器发起ajax请求，如果我们的代码都是同步的，那么页面会在这个请求完成之前是卡主状态的，因为需要等待该代码的完成，此时用户什么都做不了，既不能滚动页面，也无法点击其他内容，如果这个请求需要60s的时间，用户肯定会觉得，这是什么狗屎页面。这显然是不行的，因为代码阻塞导致体验特别的差，解决这个问题的办法就是加入异步功能，我们将请求的回调作为异步处理，不需...

1768 0 0

定时器 promise Event Loop

封装一个dialog弹窗组件

木灵鱼儿 2年前 UNI-APP

封装一个dialog弹窗组件

需求看了半天uniapp官方提供的插件，发现就是没有dialog弹窗的封装，有点难受，这个弹窗其实用的地方还挺多的，但是uni-popup组件的用法实在是有点粗暴啊，需要通过ref获取popup组件实例，操作组件实例的open和close方法实现开关，和我们日常的v-model绑定差了好多，于是自己想着造一个。在网页端我们watch监听props的变量，然后在nextTick会调中使用popup组件实例是没有问题的，但是在微信小程序中发现这个方法有一个问题？如果我这个弹窗默认就是true打开的状态，那么在watch中即便使用了nextTick我们也无法获取到组件的实例，这个不知道是不是...

2758 0 2

dialog 弹窗组件

类型守卫：判断某个key是某个对象的合法key值

木灵鱼儿 2年前 TypeScript

类型守卫：判断某个key是某个对象的合法key值

/** 类型守卫：key是否是指定对象的属性 */ function isLanguageKey(key: string, object: Object): key is keyof typeof object { return Object.prototype.hasOwnProperty.call(object, key); }这个一般用于对象object是其他人提供的，但是我们知道它一定会有某个key值，但是由于这个object它被类型推断为已知key的类型，比如：{ title: "xxx", age: "xxx" }当我们使用...

2132 0 0

is 类型守卫 keyof

木灵鱼儿

vite使用了postcss导致index.html的样式也被转换了

进阶中级TypeScript需要掌握的一些类型定义用法

全局声明遇到的一些问题

vue3+ts+vite4的一些踩坑实录

数值转百分比的方法

nest.js 管道（类型转换和数据校验）

nest.js 环境变量配置

prisma 首次使用

Typecho CommentNotifier邮件回复提醒美化模板

数组Array的reduce方法有意思的使用场景

装饰器 Decorators

vscode 整理import引入

开源主题-高仿掘金《JJ》V2.0

利用原生css实现hash哈希定位跳转偏移量处理

ts实战：给没有类型声明的第三方库编写一个类型声明文件

利用发布订阅模式封装一个IntersectionObserver

typecho 自定义分类和分类高亮处理

ts封装一个localStorage和sessionStorage的类

利用typescript实现原生css变量的主题切换功能类

typecho主题开发：基于webpack5的多页面打包项目

MVC、MVP、MVVM

windows+alist搭建一个web版局域网共享站点

Event Loop事件队列和宏任务微任务

封装一个dialog弹窗组件

类型守卫：判断某个key是某个对象的合法key值

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

vite使用了postcss导致index.html的样式也被转换了

进阶中级TypeScript需要掌握的一些类型定义用法

全局声明遇到的一些问题

vue3+ts+vite4的一些踩坑实录

数值转百分比的方法

nest.js 管道（类型转换和数据校验）

nest.js 环境变量配置

prisma 首次使用

Typecho CommentNotifier邮件回复提醒美化模板

数组Array的reduce方法有意思的使用场景

装饰器 Decorators

vscode 整理import引入

开源主题-高仿掘金《JJ》V2.0

利用原生css实现hash哈希定位跳转偏移量处理

ts实战：给没有类型声明的第三方库编写一个类型声明文件

利用发布订阅模式封装一个IntersectionObserver

typecho 自定义分类和分类高亮处理

ts封装一个localStorage和sessionStorage的类

利用typescript实现原生css变量的主题切换功能类

typecho主题开发：基于webpack5的多页面打包项目

MVC、MVP、MVVM

windows+alist搭建一个web版局域网共享站点

Event Loop事件队列和宏任务微任务

封装一个dialog弹窗组件

类型守卫：判断某个key是某个对象的合法key值

最近评论

博客文章RSS订阅

博客评论RSS订阅