摘要:工具链 从学习曲线角度来讲,结合我个人体会,React 学习路线是比 Vue 陡峭的,这个和 JSX、Template 有关吗?当然有。在 React 中使用 JSX,众所周知, JSX 需要经过 Transform 才能在浏览器中运行。马上就有小伙伴反驳了,Vue 有官方的 Vue-cli, Re 阅读全文
posted @ 2021-01-03 16:07 GZ^ 阅读(371) 评论(0) 推荐(4) 编辑
摘要:前置知识 在这里了解实现网页主题切换的相关知识。 CSS 变量 要实现主题切换需要了解 css 自定义属性。当然,本文还提供了其他实现方式,为了不给您接下来的阅读带来阻碍,先了解它。 变量的声明 声明变量时,变量名前要加上 --,例如 --example: 20px 即是一个 css 声明语句。意思 阅读全文
posted @ 2020-08-19 12:24 GZ^ 阅读(1152) 评论(6) 推荐(13) 编辑
摘要:🎨 Awescnb, awesome cnblog. 简介 可能许多初来乍到的新手会被博客园经典的风格劝退,或者您是一个老园友,需要为您的博客定制一些功能而不想浪费太多时间。发布这个项目的目的就是希望园友能够通过前端工程化的方式轻易地构建一个博客园皮肤。简单来说,awescnb 不仅仅是一套博客园 阅读全文
posted @ 2020-05-31 19:54 GZ^ 阅读(1731) 评论(56) 推荐(27) 编辑
摘要:前置 希望通过这篇文章帮助你很好的适配移动端项目,如有不足,恳请指点一二! 单位 分辨率: 单位面积显示像素的数量,和 css 无关 DPI:图像每英寸长度内的像素点数(1 英尺=30.48 厘米) css 的 px: 96 DPI 的单像素的物理大小 物理像素:在由一个数字序列表示的图像中的一个最 阅读全文
posted @ 2020-05-24 08:38 GZ^ 阅读(783) 评论(4) 推荐(6) 编辑
摘要:工具链 从学习曲线角度来讲,结合我个人体会,React 学习路线是比 Vue 陡峭的,这个和 JSX、Template 有关吗?当然有。在 React 中使用 JSX,众所周知, JSX 需要经过 Transform 才能在浏览器中运行。马上就有小伙伴反驳了,Vue 有官方的 Vue-cli, Re 阅读全文
posted @ 2021-01-03 16:07 GZ^ 阅读(371) 评论(0) 推荐(4) 编辑
摘要:效果 使用方法 如果您使用博客园的 Markdown 编辑器,借助 HTML5 的 detail 标签就可以轻松实现。 在 summary 标签之间填写标题 在 summary 之后加入要折叠的内容 请注意:在要折叠的内容前后各插入一行空格。 vscode 生成片段 如果您使用 vscode 编辑 阅读全文
posted @ 2020-12-20 23:49 GZ^ 阅读(204) 评论(0) 推荐(2) 编辑
摘要:win+R 输入 “gpedit.msc”,打开本地组策略编辑器; 依次打开 计算机配置 > 管理模板 > 控制面板 > 个性化 > 不显示锁屏; 勾选已启用,点击应用,点击确定。 阅读全文
posted @ 2020-12-14 20:03 GZ^ 阅读(92) 评论(0) 推荐(1) 编辑
摘要:前置 本文将探究 vscode prettier 插件 和 eslint 插件在 vscode 中的配置以及这两者对应的在项目中的配置文件的关系,最后提及 vscode eslint 插件配置与 eslint-loader 的相互配合。中间还提及了 .vscode/settings.json 的作用 阅读全文
posted @ 2020-11-29 20:55 GZ^ 阅读(440) 评论(2) 推荐(3) 编辑
摘要:为什么需要 Teleport? 以 Dialog 组件为例,通常需要在一个组件中引入 Dialog 组件。然而,有时一部分逻辑属于 Dialog 所在的组件中,从技术角度来看,最好将这一部分移动到根节点之外的位置。 另外一个问题, 当 Dialog 组件使用 position: absolute 相 阅读全文
posted @ 2020-11-26 10:56 GZ^ 阅读(166) 评论(0) 推荐(0) 编辑
摘要:🤷‍♂️ 这是一个实验性技术,正如你所见,它兼容性目前糟糕!但是 Chrome 的发展是在不断支持它的,接下来了解一下它。 介绍 @ property CSS at-rule 是 CSS Houdini api 的一部分,它允许开发人员显式定义 CSS 自定义属性,允许属性类型检查,设置默认值,并 阅读全文
posted @ 2020-11-22 21:49 GZ^ 阅读(268) 评论(2) 推荐(2) 编辑
摘要:编辑排版 仅仅了解 Markdown 语法还不够,知道这些 排版技巧 增色您的文章内容。 空格和空行 留白,从艺术角度上说,留白就是以“空白”为载体进而渲染出美的意境的艺术。从应用角度上说,留白更多指一种简单、安闲的理念。在 Markdown 中善于使用空格和空行使文章阅读起来更加自然。 善用空格即 阅读全文
posted @ 2020-11-06 19:19 GZ^ 阅读(259) 评论(6) 推荐(5) 编辑
摘要:JS代码 导出按钮 导出详情表 阅读全文
posted @ 2020-10-29 20:20 GZ^ 阅读(76) 评论(0) 推荐(0) 编辑
摘要:<?php require_once 'db.php'; $pageNow = 1;//当前页 $pageSize = 5;//一页多少行 $lineCount = 0;//总记录书 $pageCount = 0;//总页数 if(isset($_GET['pageNow'])){ $pageNow 阅读全文
posted @ 2020-10-29 16:46 GZ^ 阅读(48) 评论(0) 推荐(0) 编辑
摘要:export default () =&gt; { const home = isHomePage() const category = isCategoryPage() if (!home &amp;&amp; !category) return pageElementInit() let options = {} i 阅读全文
posted @ 2020-10-29 16:42 GZ^ 阅读(44) 评论(0) 推荐(0) 编辑
摘要:前置知识 在这里了解实现网页主题切换的相关知识。 CSS 变量 要实现主题切换需要了解 css 自定义属性。当然,本文还提供了其他实现方式,为了不给您接下来的阅读带来阻碍,先了解它。 变量的声明 声明变量时,变量名前要加上 --,例如 --example: 20px 即是一个 css 声明语句。意思 阅读全文
posted @ 2020-08-19 12:24 GZ^ 阅读(1152) 评论(6) 推荐(13) 编辑
摘要:定义一个 map: $postMeaage: ( categoriesBackground: #ff6b6b, tagsBackground: #ff6b6b #fbc531 #22a6b3 #10ac84 #0097e6, ) !default; 加上 !default 代表这个 map 是默认的 阅读全文
posted @ 2020-08-13 21:06 GZ^ 阅读(156) 评论(0) 推荐(0) 编辑
摘要:前置 在 react 中解决组件样式冲突的方案中,如果您喜欢将 css 与 js 分离,可能更习惯于 CSS-Modules;如果习惯了 Vue.js 那样的单文件组件,可能习惯于使用 styled-components 来解决这个问题。使用 CSS-Modules 从老项目迁移过来可能更容易。 安 阅读全文
posted @ 2020-08-06 19:18 GZ^ 阅读(563) 评论(0) 推荐(0) 编辑
摘要:前置 rough-notation 用于在网页上创建注释并设置注释动画的小型 JavaScript 库。它还可以应用在一些常见前端框架中,比如 Vue、React、 Svelte、Angular 甚至 Web Component。我把它应用在我创建的博客园皮肤中,比如你可以看见头部导航条中的博客昵称 阅读全文
posted @ 2020-07-25 17:47 GZ^ 阅读(614) 评论(1) 推荐(10) 编辑
摘要:什么是 DOM? 如果我们把这个 HTML 加载到浏览器中,浏览器创建这些节点,用来显示网页。所以这个HTML映射到一系列DOM节点,然后我们可以使用JavaScript进行操作。例如: let item = document.getElementByTagName(&#39;h1&#39;)[0] item.te 阅读全文
posted @ 2020-07-23 20:08 GZ^ 阅读(778) 评论(0) 推荐(3) 编辑
摘要:GraphQL 简介 一种用于 API 的查询语言。 GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户端能够准确地获得它需要的数据,而且没有任何冗余,也让 API 更容易地随着时间推移而演 阅读全文
posted @ 2020-07-20 17:23 GZ^ 阅读(410) 评论(0) 推荐(3) 编辑
摘要:泛型 基本 function add&lt;t&gt;(arg1: T, arg2: T): T { return arg1 + arg2 } // add&lt;number&gt;(1,&#39;0&#39;) X 泛型接口 function add&lt;T&gt;(arg1:T,arg2:T):T { return arg1 + arg2 } 阅读全文
posted @ 2020-07-09 18:30 GZ^ 阅读(113) 评论(0) 推荐(1) 编辑
摘要:前置 react-dom 提供了可在应用顶层使用的 DOM(DOM-specific)方法。 render() hydrate() unmountComponentAtNode() findDOMNode() createPortal() 你可以使用以下命令在本地启动一个 node 服务器,运行本文 阅读全文
posted @ 2020-07-05 15:06 GZ^ 阅读(187) 评论(0) 推荐(0) 编辑
摘要:前置 本篇随笔包含 _.compact 和 _.concat 及其依赖的工具函数。 你可能需要一些 JavaScript 基础知识才能看懂一些没有注释的细节。 compact _.compact(array) 创建一个新数组,包含原数组中所有的非假值元素。例如 false, null, 0, &quot;&quot;, 阅读全文
posted @ 2020-07-04 13:49 GZ^ 阅读(195) 评论(0) 推荐(0) 编辑
摘要:前置 chunk 函数内部借助其他函数实现,所以从其他函数开始,chunk 在最后。 你可能需要一些 JavaScript 基础知识才能看懂一些没有注释的细节。 isObject 判断是否为 Object 类型 /** * Checks if `value` is the * [language t 阅读全文
posted @ 2020-07-03 23:06 GZ^ 阅读(261) 评论(2) 推荐(0) 编辑