SoulReader

正常我们创建一个新的 hexo 博客时 直接访问 categories 默认页面时是无法访问到的，如果我们想要访问到可以通过以下操作创建一个默认的 categories 默认页面，在生成页面时，categories 相关内容会自动写进去 1hexo new page categories categories 默认 md 文档中添加 type: "categories" 12345---title: categoriesdate: 2022-07-20 09:13:01type: "categories"--- 创建 tags 默认页面类似，只需要把 type: "categories" 改为 type: "tags"

filter(过滤器) 12<p>{{ message | capitalize }}</p><div v-bind:id="rawId | formatId"></div> 12345filter: { capitalize: function(val) { return val }} 过滤器可以串联，值从左向右传递

在日常工作中遇到了需要打包成多页面的需求，由于每个页面的标题，描述以及一些seo和推广上的不一样，采用了 html-webpack-plugin 这个插件，在这里记录一下踩过的坑，以便后续查看和翻阅 简单的使用安装插件1yarn add html-webpack-plugin -D 使用123456789101112// package.jsonconst HtmlWebpackPlugin = require("html-webpack-plugin")module.exports = { plugins: [ new HtmlWebpackPlugin({ template: "/public/index.html", // 模板 filename: "template.html", // 输出文件名称 chunks["template"] // 打包文件，与 entry 入口名相同 }) ]} 进阶操作自定义 met ...

Lottie 文档 都2022年了，一个还不知道Lottie动画的前端已经OUT啦！ svga SVGA在前端方面的使用

生成 SSH key打开 git bash 命令行工具 输入一下命令，自动生成 ssh key 地址 1ssh-keygen -t ed25519 -C "your_email@example.com" 可以通过命令行直接复制 ssh key 的内容 1clip < ~/.ssh/id_ed25519.pub 复制成功之后，可以将 ssh key 复制到 github 的ssh key 上 和 github 链接执行以下命令 1234ssh-add ~/.ssh/id_ed25519// 或者echo $SSH_AGENT_SOCK 如果执行不成功，可能是 ssh-add 未开启，可以通过命令行查看是否开启ssh-add 服务1ps -ef | grep ssh 开启 ssh-add 服务12cd ~/.ssheval $(ssh-agent) 执行完上述命令后就可以进行ssh 链接

computed 属性默认是只有 getter 属性的，也就是说我们只能获取到computed 属性的值，但是无法修改它，但是我们可以手动的设置 setter 属性，这样就可以手动赋值了 1234567891011121314export default { computed() { fullName: { set: function (val) { let name = val.split(" ") this.firstName = name[0] this.secondName = name[1] }, get: function () { return this.firstName + " " + this.secondName } } }} v-for 和 v-if 为什么不推介一起使用 这个是因为 v-for 和 v-i ...

pagespeed地址： https://pagespeed.web.dev/ gtmetrix地址： https://gtmetrix.com/ web.dev地址： https://web.dev/measure/

为什么要进行性能优化我们会在什么时候对页面性能进行优化呢，在我的观点里大致有以下几个方面 页面加载时间较长，导致部分用户在页面还未加载完成之后便离开了页面，增加了用户的跳出率 因为 google 的搜索算法，对页面性能这一块有一定要求，如果页面性能较差，那么当用户搜索工具关键词时，页面的顺序就越靠下，这样针对用户自然搜索流量这一块会有很大影响 用户在使用工具时，可能会由于部分操作及代码实现的影响，导致用户使用时会比较卡顿，用户体验较差，降低用户留存 如果想要提高用户的留存率这一块的数据，那么增加用户流量及降低用户跳出率就比较重要了 怎么进行性能优化我认为可以从以下几个方面来进行性能优化 html 解析阶段 javascript 加载阶段 页面渲染阶段 用户操作过程中 下面来分别介绍一下在各个阶段要具体要怎么做 html 解析阶段当浏览器请求到页面 html 的时候，会对html 进行解析，如果中间遇到 link 标签 或者 script 标签时，会去请求对应资源，并进行解析，在解析 css 文件的过程中，并不会阻止浏览器解析 html 文件，但是要注意，javascri ...

由于单页面应用只生成了一个HTML 文件，如果想要做 SEO 的话， H 标签，img 标签的 alt 这些并不会被爬虫抓取到，所以需要我们做预渲染，使得生成的html文件中包含需要 爬虫抓取的内容， react-snap 插件可以帮助实现这个操作 使用安装1yarn add --dev react-snap package.json123"scripts": {"postbuild": "react-snap"} 入口 (src/index.js)12345678import { hydrate, render } from "react-dom";const rootElement = document.getElementById("root");if (rootElement.hasChildNodes()) {hydrate(<App />, rootElement);} else {render ...

最近读了一本关于如果写出性能更优的JavaScript的书，提取了一些相关的知识点 JavaScript 文件加载及执行我们都知道一个完整前端页面想要展示出来，需要包含 html， css，和JavaScript 文件，其中 html 是框架，css是样式，JavaScript负责交互。但是多数浏览器采用单一进程来处理用户界面ui和JavaScript脚本执行，同一时刻只能做一件事，所以JavaScript执行的时间越久浏览器等待的时间就会越久 浏览器页面在获取到页面时首先会先解析html元素，在解析的过程中，如果遇到css文件或者js文件的时候会去下载文件，下载完成之后然后再去解析文件，但是针对JavaScript文件来说，其实浏览器并不知道js有没有执行改变页面元素的操作，因此浏览器在下载和解析文件的时候，其实是一个暂停的操作，所以当 js 文件执行时间越久，页面空白的时间就越长 解决方式： 将script 脚本尽量放在页面的最下方，保证页面解析完成之后才回去解析JavaScript脚本 针对script 脚本的数量做限制，每遇到一个script标签，浏览器都会停止其他操作去解析 ...