摘要:前置知识 在这里了解实现网页主题切换的相关知识。 CSS 变量 要实现主题切换需要了解 css 自定义属性。当然,本文还提供了其他实现方式,为了不给您接下来的阅读带来阻碍,先了解它。 变量的声明 声明变量时,变量名前要加上 --,例如 --example: 20px 即是一个 css 声明语句。意思 阅读全文
posted @ 2020-08-19 12:24 GZ^ 阅读(741) 评论(3) 推荐(10) 编辑
摘要:🎨 Awescnb, awesome cnblog. 简介 可能许多初来乍到的新手会被博客园经典的风格劝退,或者您是一个老园友,需要为您的博客定制一些功能而不想浪费太多时间。发布这个项目的目的就是希望园友能够通过前端工程化的方式轻易地构建一个博客园皮肤。简单来说,awescnb 不仅仅是一套博客园 阅读全文
posted @ 2020-05-31 19:54 GZ^ 阅读(1277) 评论(50) 推荐(21) 编辑
摘要:前置 希望通过这篇文章帮助你很好的适配移动端项目,如有不足,恳请指点一二! 单位 分辨率: 单位面积显示像素的数量,和 css 无关 DPI:图像每英寸长度内的像素点数(1 英尺=30.48 厘米) css 的 px: 96 DPI 的单像素的物理大小 物理像素:在由一个数字序列表示的图像中的一个最 阅读全文
posted @ 2020-05-24 08:38 GZ^ 阅读(642) 评论(4) 推荐(6) 编辑
摘要:写在最前 没有接触过 AntV 的同学可通过这篇不成文的文章稍作了解。数据可视化方面的使用的是 AntV F2,前端框架使用 Vue 快速成型,使用与 Vue 配合较好的 Vant 最为UI框架以节约时间。本文只探索使用 antv 实现一个简单的图标横向滚动。 思路 通过 Interaction 实 阅读全文
posted @ 2020-02-06 12:21 GZ^ 阅读(1416) 评论(9) 推荐(2) 编辑
摘要:为什么需要 Teleport? 以 Dialog 组件为例,通常需要在一个组件中引入 Dialog 组件。然而,有时一部分逻辑属于 Dialog 所在的组件中,从技术角度来看,最好将这一部分移动到根节点之外的位置。 另外一个问题, 当 Dialog 组件使用 position: absolute 相 阅读全文
posted @ 2020-11-26 10:56 GZ^ 阅读(12) 评论(0) 推荐(0) 编辑
摘要:🤷‍♂️ 这是一个实验性技术,正如你所见,它兼容性目前糟糕!但是 Chrome 的发展是在不断支持它的,接下来了解一下它。 介绍 @ property CSS at-rule 是 CSS Houdini api 的一部分,它允许开发人员显式定义 CSS 自定义属性,允许属性类型检查,设置默认值,并 阅读全文
posted @ 2020-11-22 21:49 GZ^ 阅读(83) 评论(0) 推荐(0) 编辑
摘要:编辑排版 仅仅了解 Markdown 语法还不够,知道这些 排版技巧 增色您的文章内容。 空格和空行 留白,从艺术角度上说,留白就是以“空白”为载体进而渲染出美的意境的艺术。从应用角度上说,留白更多指一种简单、安闲的理念。在 Markdown 中善于使用空格和空行使文章阅读起来更加自然。 善用空格即 阅读全文
posted @ 2020-11-06 19:19 GZ^ 阅读(135) 评论(6) 推荐(4) 编辑
摘要:JS代码 导出按钮 导出详情表 阅读全文
posted @ 2020-10-29 20:20 GZ^ 阅读(24) 评论(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^ 阅读(14) 评论(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^ 阅读(13) 评论(0) 推荐(0) 编辑
摘要:前置知识 在这里了解实现网页主题切换的相关知识。 CSS 变量 要实现主题切换需要了解 css 自定义属性。当然,本文还提供了其他实现方式,为了不给您接下来的阅读带来阻碍,先了解它。 变量的声明 声明变量时,变量名前要加上 --,例如 --example: 20px 即是一个 css 声明语句。意思 阅读全文
posted @ 2020-08-19 12:24 GZ^ 阅读(741) 评论(3) 推荐(10) 编辑
摘要:定义一个 map: $postMeaage: ( categoriesBackground: #ff6b6b, tagsBackground: #ff6b6b #fbc531 #22a6b3 #10ac84 #0097e6, ) !default; 加上 !default 代表这个 map 是默认的 阅读全文
posted @ 2020-08-13 21:06 GZ^ 阅读(69) 评论(0) 推荐(0) 编辑
摘要:前置 在 react 中解决组件样式冲突的方案中,如果您喜欢将 css 与 js 分离,可能更习惯于 CSS-Modules;如果习惯了 Vue.js 那样的单文件组件,可能习惯于使用 styled-components 来解决这个问题。使用 CSS-Modules 从老项目迁移过来可能更容易。 安 阅读全文
posted @ 2020-08-06 19:18 GZ^ 阅读(248) 评论(0) 推荐(0) 编辑
摘要:前置 rough-notation 用于在网页上创建注释并设置注释动画的小型 JavaScript 库。它还可以应用在一些常见前端框架中,比如 Vue、React、 Svelte、Angular 甚至 Web Component。我把它应用在我创建的博客园皮肤中,比如你可以看见头部导航条中的博客昵称 阅读全文
posted @ 2020-07-25 17:47 GZ^ 阅读(518) 评论(1) 推荐(10) 编辑
摘要:什么是 DOM? 如果我们把这个 HTML 加载到浏览器中,浏览器创建这些节点,用来显示网页。所以这个HTML映射到一系列DOM节点,然后我们可以使用JavaScript进行操作。例如: let item = document.getElementByTagName(&#39;h1&#39;)[0] item.te 阅读全文
posted @ 2020-07-23 20:08 GZ^ 阅读(526) 评论(0) 推荐(3) 编辑
摘要:GraphQL 简介 一种用于 API 的查询语言。 GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户端能够准确地获得它需要的数据,而且没有任何冗余,也让 API 更容易地随着时间推移而演 阅读全文
posted @ 2020-07-20 17:23 GZ^ 阅读(356) 评论(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^ 阅读(83) 评论(0) 推荐(1) 编辑
摘要:前置 react-dom 提供了可在应用顶层使用的 DOM(DOM-specific)方法。 render() hydrate() unmountComponentAtNode() findDOMNode() createPortal() 你可以使用以下命令在本地启动一个 node 服务器,运行本文 阅读全文
posted @ 2020-07-05 15:06 GZ^ 阅读(106) 评论(0) 推荐(0) 编辑
摘要:前置 本篇随笔包含 _.compact 和 _.concat 及其依赖的工具函数。 你可能需要一些 JavaScript 基础知识才能看懂一些没有注释的细节。 compact _.compact(array) 创建一个新数组,包含原数组中所有的非假值元素。例如 false, null, 0, &quot;&quot;, 阅读全文
posted @ 2020-07-04 13:49 GZ^ 阅读(104) 评论(0) 推荐(0) 编辑
摘要:前置 chunk 函数内部借助其他函数实现,所以从其他函数开始,chunk 在最后。 你可能需要一些 JavaScript 基础知识才能看懂一些没有注释的细节。 isObject 判断是否为 Object 类型 /** * Checks if `value` is the * [language t 阅读全文
posted @ 2020-07-03 23:06 GZ^ 阅读(177) 评论(2) 推荐(0) 编辑
摘要:稀疏数组和密集数组 稀疏数组 Sparse arrays 一般来说,JavaScript 中的数组都是稀疏数组-它们可以拥有空槽,所谓空槽,指的就是数组的某个位置没有任何值,既不是 undefined,也不是 null,因为数组只是索引到值的简单映射。 let a = new Array(3); c 阅读全文
posted @ 2020-07-02 21:04 GZ^ 阅读(132) 评论(0) 推荐(0) 编辑
摘要:前置 从创建一个简单浏览器导航首页项目展开,该篇随笔包含以下内容的简单上手: vite vue3 vuex4 vue-router next 预览效果有助于理清这些内容,限于篇幅,不容易展开叙述。由于项目逻辑简单,只使用了少量 API,我只是写这个小项目过把手瘾,所以对应标题 上手。如果您只是想学习 阅读全文
posted @ 2020-06-26 12:39 GZ^ 阅读(1571) 评论(3) 推荐(1) 编辑
摘要:前置 点击按钮切换搜索引擎 搜索框跟随切换改变样式 使用 vue 最快了 template 为了方便扩展,使用 v-for 循环渲染出按钮,绑定切换搜索引擎的 method , 传入不同名称以区别搜索引擎。按钮的样式也动态绑定。 输入框动态绑定样式,在点击按钮切换搜索引擎时,搜索框绑定的样式对应的 阅读全文
posted @ 2020-06-12 18:29 GZ^ 阅读(358) 评论(0) 推荐(2) 编辑
摘要:&#127912; Awescnb, awesome cnblog. 简介 可能许多初来乍到的新手会被博客园经典的风格劝退,或者您是一个老园友,需要为您的博客定制一些功能而不想浪费太多时间。发布这个项目的目的就是希望园友能够通过前端工程化的方式轻易地构建一个博客园皮肤。简单来说,awescnb 不仅仅是一套博客园 阅读全文
posted @ 2020-05-31 19:54 GZ^ 阅读(1277) 评论(50) 推荐(21) 编辑