WordPress主题Doubt重构-END主题开发前奏
码农备忘录当前使用的主题是Doubt，是我做的第八款主题，这款主题是在Way主题的基础上修改而来的。Doubt参考了很多国内优秀的极简主题，在主题介绍中将会感谢它们。主题设计时候已是作者进入社会打拼的第七年（2022.2）。当时也处在人生转折期。之所以取名为Doubt，是因为这些年来走了很多弯路，又到了岔路口，我第一次...
WordPress主题END开发技术选型思路
在尝试Lit和Svelte框架之后，我更倾向于Svelte，其语法更友好。可使用Vite 进行初始化Svelte脚手架。 但测试之后，Svelte并不兼容IE11，但使用@vitejs/plugin-legacy 之后尝试可以兼容（暂时）。 由于此主题页面中，为突出文字内容及不改变原有SEO收录路径，所有有效内容（包括文章列表、文章内容、菜单、部分锚文本）还...
WordPress主题筹备,是结束也是开始(END主题)
醉风云博客十一周年了。 FengYun主题也即将完成它的使命。 深思熟虑之后，我决定，花费很长一段时间，为醉风云博客创作一款新的主题。 她将变得更加简单。她将更加突出文字。 终有一天，大象将重归原野。 ... 原先是考虑使用Vue+Pjax架构打造一款极致主题的（很多博主这样搭配），但考虑到在这里只能用到Vue的模板引擎功...
vue3 通过 ref 获取标签（DOM 元素或组件）的ts类型是什么
在 Vue3 中使用 TypeScript 时，通过 ref 获取标签（包括 DOM 元素或组件实例）的 TypeScript 类型定义需根据场景区分： 1. 获取 DOM 元素的类型 若 ref 绑定的是原生 DOM 元素（如 <div>、<input>），需使用 HTML 元素的内置类型： import { ref } from 'vue'; // 示例：获取 div 元素 const divRef =...
优化 Vue3 异步加载模块并避免 Vite 打包生成过大 JS 文件
以下是优化 Vue3 异步加载模块并避免 Vite 打包生成过大 JS 文件的关键方法： 使用 defineAsyncComponent 定义异步组件 Vue3 提供 defineAsyncComponent 方法，允许组件在渲染时动态加载，减少初始包体积。例如： const AsyncComponent = defineAsyncComponent(() => import('./Component.vue')); 这会将组件...
JS字符串补全最新方法padStart()和padEnd()简介
一、padStart()简介 JavaScript的字符串padStart()方法用于在当前字符串的开头添加指定数量的字符，以达到指定的字符串长度。如果当前字符串的长度大于或等于指定的字符串长度，则不会添加任何字符。 二、语法 string.padStart(targetLength [, padString]) 三、参数解释 targetLength：要达到的字符串长度，必须为一个...
地图开发在OpenLayers中，根据多个经纬度坐标绘制多边形
在OpenLayers中，根据多个经纬度坐标绘制多边形是一个常见的任务。你可以使用这些坐标来创建一个ol.geom.Polygon几何对象，然后将其添加到一个矢量图层中并在地图上显示。 以下是一个基本的步骤指南，教你如何在OpenLayers中根据多个经纬度坐标绘制多边形： 引入OpenLayers库： 确保你的HTML文件中已经引入了OpenLayer...
地图开发 OpenLayers 手动绘制多边形
在OpenLayers中绘制多边形是一个常见的功能，它通常通过OpenLayers提供的绘制（Draw）交互来实现。以下是一个基本的步骤指南，教你如何在OpenLayers中绘制多边形： 1. 引入OpenLayers库 首先，你需要在HTML文件中引入OpenLayers库的JavaScript文件。你可以从OpenLayers的官方网站获取最新版本的链接。 <script src="h...
Vue （vue-router）路由传参
在 Vue.js 应用中，使用 Vue Router 进行路由管理时，常常需要在不同的路由之间传递参数。Vue Router 提供了几种方式来实现路由传参，包括通过 URL 路径参数、查询参数和命名视图。以下是一些常见的方法和示例： 1. 路径参数（Route Parameters） 路径参数通常用于传递具有唯一标识意义的参数，如用户 ID、文章 ID 等。 ...
原子类CSS：不就是最原始的CSS设计模式嘛？
前段时间在面试的时候，被问到原子类CSS，鉴于自己这个老前端已经几年没有关注前端最新的技术了，对于“原子类”这一名词有些困扰。 事后一查，这不就是“bootstrap”的样式类的新名词嘛？老旧的东西又拿出来说。其实这都是最原始的CSS设计模式了了。 原子类CSS（Atomic CSS）是一种CSS设计模式，它将样式属性拆分为独立的、...
本站主题切换功能：CSS变量，让JS与CSS互通有无
CSS变量简介 CSS变量的定义及使用如下，可定义的类型非常广泛。 /* 声明 */ --VAR_NAME: <声明值>; /* 使用 */ var(--VAR_NAME) /* 根元素选择器（全局作用域），例如 <html> */ :root { /* CSS 变量声明 */ --main-color: #ff00ff; --main-bg: rgb(200, 255, 255); --logo-border-color...
git更改.gitignore 后怎么刷新
更改.gitignore后，需要通知Git重新读取.gitignore文件。可以使用以下命令来刷新Git的索引，以应用新的忽略规则： git rm -r --cached . git add . git commit -m "Refresh .gitignore" 这些命令的作用是： git rm -r --cached .从索引中移除所有文件和目录，但保留在本地磁盘上。--cached选项指定只移除索引中的跟...
前端单元测试和持续集成
前端的单元测试包括但不限于：单元功能测试、UI 测试、兼容性测试等等。一个测试体系大体包括四部分： 测试运行器（e.g. Karma） 测试框架（e.g. Mocha, Jest, Jasmine, Qunit） 断言库（e.g. Should, Chai） 测试覆盖率（e.g. Istanbul） 本文会通过一个例子，来一步步了解如何进行前端单元测试。 本文举的例子中，没...