vscode插件
自用 vscode 插件
1. EditorConfig for VS Codeeditorconfig 用来定义编辑器的编码格式规范,编辑器的行为会与 .editorconfig 文件中定义的一致,并且其优先级比编辑器自身的设置要高。简单说明:在项目根目录下创建 .editorconfi 文件,然后设置好内容,则其他人更新后同步到本地,你们的代码规范就会保持一致。我的 .editorconfi 文件内容:
root = true # 根目录的配置文件,编辑器会由当前目录向上查找,如果找到`roor = true` 的文件,则不再查找[*]indent_style = space # 空格缩进,可选"space"、"tab"indent_size = 4 # 缩进空格为4个end_of_line = lf # 结尾换行符,可选"lf"、"cr"、&q ...
让你的博客一起过年
马上就要过年了,看着我这毫无生气的博客,感觉有点亏待它。博客过年,马上安排!本博客基于 hexo 和主题 Butterfly 修改。
先上预览图
修改Butterfly配置文件修改文件 _config.butterfly.yml修改主页图片
index_img: /img/banner/lantern_banner.pngdefault_top_img: /img/banner/lantern_banner.png
修改背景色
background: "#fff6f6"
修改主题色
theme_color: enable: true main: "#ff0000" paginator: "#ff0000" button_hover: "#fb5050" text_selection: "#fb5050" toc_color: "#fb5050" blockquote_padding_color: "#ff0000" blockq ...
浏览器好用插件分享
个人一直在用的浏览器插件。好用的浏览器插件,总会提升你的工作效率
1. Tab Session Manager强烈推荐这是一款自动保存你的浏览器所有打开页面的插件,可以做到定期(周期支持自定义)保存。很多时候,当我们电脑没电了,或者误操作关闭了浏览器,当你想要找回之前打开的界面,你需要从历史记录里一个一个找,这款插件让你从此告别这种烦恼。打开此插件,选择记录,回到某一时间,打开那时所有打开的界面。
edge浏览器插件地址chrome浏览器插件地址
2. MONKNOW 新标签页 - 个性化面板新标签页插件,图标描述大小支持自定义,壁纸支持自定义或者官方库自动切换,超多自定义功能满足你的需求,同时支持云同步,可以跨浏览器同步你的标签页。
edge浏览器插件地址chrome浏览器插件地址
3. Adblock Plus - 免费的广告拦截器如题,这个大家都懂,支持白名单网站。
edge浏览器插件地址chrome浏览器插件地址
4. StylusStylus 是一个调整网页外观的用户样式管理器。如下图,我主要用来解除CSDN登录不能复制的限制,当然你也可以美化其他界面,甚至达 ...
开源字体整理
开源字体整理,主要是为了使用方便。一般来说,开源字体大多都是可以免费商用的,具体使用请查看对应的开源协议,禁止售卖
开源字体1. 得意黑得意黑是一款在人文观感和几何特征中寻找平衡的中文黑体。整体字身窄而斜,细节融入了取法手绘美术字的特殊造型。字体支持简体中文常用字(覆盖 GB 2312 编码字符集)、拉丁字母、日文假名、阿拉伯数字和各类标点符号。
下载:https://github.com/atelier-anchor/smiley-sans
2. 思源黑体思源黑体是一套 OpenType/CFF 泛中日韩字体。这个开源项目不仅提供了可用的 OpenType 字体,还提供了利用 AFDKO 工具创建这些 OpenType 字体时的所有源文件。
下载:https://github.com/adobe-fonts/source-han-sans
3. 思源宋体思源宋体是一套 OpenType/CFF 泛中日韩字体。这个开源项目不仅提供了可用的 OpenType 字体,还提供了利用 AFDKO 工具创建这些 OpenType 字体时的所有源文件。
下载:https://gith ...
pnpm配置
之前通过 nvm 来管理了 nodejs 版本,结果安装 pnpm 之后,安装全局依赖报错,如下: PS C:\Users\Administrator> pnpm i -g commitizen ERROR Unable to find the global bin directoryRun "pnpm setup" to create it automatically, or set the global-bin-dir setting, or the PNPM_HOME env variable. The global bin directory should be in the PATH.运行 pnpm setup 之后还是报这个错,看提示应该是配置问题,故做此纪录。
安装通过 npm 安装即可。
PS C:\Users\Administrator> npm i -g pnpmD:\node\nodejs\pnpm -> D:\node\nodejs\node_modules\pnpm\bin\pnpm.cjsD:\node\nodej ...
GitHub + Hexo 搭建个人博客网站
一、准备工作1. GitHub + Hexo 的优势Hexo 提供现成的模板和模块;github 的 pages 功能提供免费的服务器,零成本搭建属于自己的博客。
2. 需要了解的网站
github,开源代码托管网站,需要我们去注册一个账号。
hexo,一个快速、简洁且高效的博客框架,需要我们去提前了解一些搭建文档。
git,本地安装 git 工具,实现代码提交和推送。
nodejs,本地安装 nodejs,Hexo 基于 nodejs 编写的。
以上安装软件操作,请自行搜索
二、github 上创建仓库1. 新建仓库
2. 填写地址仓库名称为 <用户名>.github.io,勾上 Add a README file。
提示,用户名为你自己的 github 帐号,见下图。
3. 访问访问地址 https://<用户名>.github.io,如图则说明创建成功。
三、本地安装 Hexo,生成博客模板1. 安装 Hexo打开cmd,执行
npm install -g hexo-cli
查看 Hexo 版本
hexo -v
执行结果如下
PS C:\User ...
Git使用记录 - 持续更新
本地生成 sshkey
打开git命令工具 cd ~/.sshssh-keygen -t rsa -C "实际的eamil地址"···// 一路回车,出现以下则说明成功Your identification has been saved in C:\Users\Administrator/.ssh/id_rsaYour public key has been saved in C:\Users\Administrator/.ssh/id_rsa.pub···
复制 id_rsa.pub 内的内容,粘贴至远程 git 网站设置。
本地切换远程仓库地址
git remote -v 查看本地远程仓库地址
git remote rm origin 删除本地仓库地址
git remote -v 查看本地仓库地址是否删除
git remote add origin xxx 添加新的远程仓库地址,xxx为新的远程仓库地址
git remote -v 查看本地更新的仓库地址是否已经生效
将本地项目关联到远程仓库有两种办法:一. clone 项目到本地,然后将本地项目内的文件复制 ...
Clash Verge 使用记录
简介Clash Verge 是一个上网工具,详情可查看 github 地址。目前本人在用的 协议,可先试用。
npm 相关1. 修改 npm 代理使用 Clash Verge 时会自动开启系统代理服务器,此时使用 npm 会导致不能正常连接网络,需要为 npm 也配置此代理。打开 cmd 或 powershell,通过命令行为 npm 设置代理
npm config set proxy http://127.0.0.1:7890npm config set https-proxy http://127.0.0.1:7890
如果要取消代理
npm config delete proxynpm config delete https-proxy
git 相关1. 修改 git 代理同 npm,使用 Clash Verge 后,git 连接 github 时,也出现了连接网络的问题,需要给 git 设置代理。
git config --global http.proxy http://127.0.0.1:7890git config --global https.proxy http:// ...
vue多界面开发
1. 安装 vue-cli,已有的请跳过这一步npm install -g @vue/cli
若已安装旧版 vue-cli 则需要先卸载 vue-cli
npm uninstall -g vue-cli
2. 创建项目vue create project-name// 提示Vue CLI v5.0.8? Please pick a preset: (Use arrow keys)> Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select features// 选择vue2,稍等一会提示创建成功,如下🎉 Successfully created project demo.👉 Get started with the following commands: $ cd demo $ npm run serve
创建成功后,目录如下:
3. 修改多界面配置参考 官方文档。修改 vue.config.js 文件,在 pages 里增加界面
const { defin ...
Vue双向绑定原理梳理
简介vue数据双向绑定主要是指:数据变化更新视图,视图变化更新数据。实现方式:数据劫持 结合 发布者-订阅者 模式。数据劫持通过 Object.defineProperty()方法。
对对象的劫持
构造一个监听器 Observer ,用来劫持并监听所有属性,添加到收集器 Dep 中,当数据发生变化的时候发出一个 notice(通知)。
添加一个发布者 Dep , 用来收集订阅者 Watcher 和发布更新通知 。
视图中会用到 data 中的 key ,这称为依赖。同⼀个 key 可能出现多次,每次都需要收集出来用⼀个 Watcher 来维护它们,此过程称为依赖收集多个 Watcher 需要⼀个 Dep 来管理,需要更新时由 Dep 统⼀通知。
构造一个订阅者 Watcher ,一方面接收监听器 Observer 通过 Dep 传递过来的数据变化,一方面执行自身绑定的回调函数(update)进行界面更新。
实现一个解析器 Compile ,实现指令解析,初始化视图,并订阅数据变化,绑定好更新函数。
值得注意的是,解析器在解析DOM的时候,是用的 DocumentFragme ...