我的旧主题是基于初学前端时写的 Fuji 主题构建的大改版，而在历经多次小修小补之后终于进入了维护不动的的状态。无论是 Hugo 模板本身，还是相配的 JS 和 CSS 都进入了完全的混乱状态。趁着近期有一点时间，是时候来一次重构了。
小闫同学将开发工程师常用的官方文档进行了汇总，地址为「https://www.pythonnote.cn/OfficialDocuments/」文档会不定期补充更新，请收藏或转发给好友。
在 v5 中，官方改造了所有的 Token，使其基于 Seed + Algorithm 可以派生出所有的 Design Token。全新的 Design Token 模型支持多算法 Pipeline，从而大大降低开发者拓展成本。
本文主要探讨了 Webpack Tree Shaking 的基本概念，而非深入其底层代码实现。相关的代码示例可以在 这里[1] 查看。
打包压缩js与css 由于webpack本身集成了UglifyJS插件（webpack.optimize.UglifyJsPlugin）来完成对JS与CSS的压缩混淆，无需引用额外的插件, 其命令webpack -p即表示调用UglifyJS来压缩代码，还有不少webpack插件如html-webpack-plugin也会默认使用UglifyJS。 uglify-js的发行版本只支持ES5，如果你要压缩ES6+代码请使用兼容开发分支。 UglifyJS可用的选项有： parse 解释 compr
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 包括以下工具：
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：
在plugins节点下的htmlWebpackPlugin插件中，添加minify子节点：
在我们开发WordPress主题时，细心的小伙伴或发现网站头部如果加载head页面就会出现很多系统自带的加载项目，例如自带的css、js、feed、style等多余信息。
AngularJS 使用动画需要引入 angular-animate.min.js 库。
本教程操作环境：windows7系统、jquery3.6.1版本、Dell G3电脑。
“关注 前端开发社区 ，回复“ 1” 即可加入 前端技术交流群，回复 “ 2” 即可免费领取500G前端干货！
最近优化了一个vue cli3.0项目，项目从打包体积2.5M，优化到272k, 速度提高了约2/3。下面将优化方法写下：
摘要总结：本文介绍了两个动画示例，第一个示例通过vue.js实现了一个简单的弹出层效果，第二个示例使用vue.js实现了标签页切换的效果。通过这些示例展示了vue.js在动画方面的强大能力，同时也提供了两种实现方式供读者参考。
需要设置动画的元素或组件要在外边包裹一个<transition>标签，设置自定义的name，vue会根据元素的切换（进入/离开）过程添加相应的css类名，你可以自由地使用css类名来设置css过渡&动画。
关于 Vue.js 的 v-for ， key 的取值，影响过渡动画表现 这个问题是在写 Message 组件出现的，先看代码部分
和 CSS 框架一样，Laravel 不强制你使用什么 JavaScript 客户端框架，但是开箱对 Vue.js 提供了良好的支持，如果你更熟悉 React 的话，也可以将默认的脚手架代码替换成 React，实现细节参考官方文档。
我们经常要使用Javascript来改变页面元素的样式。当中一种办法是改变页面元素的CSS类(Class)，这在传统的Javascript里，我们一般是通过处理HTML Dom的classname特性来实现的；而jQuery里提供三种方法来实现这个功能，尽管它们和传统方法的思想相通，可是却节省了很多代码。还是那句话 – “jQuery让JavaScript代码变得简洁！” 1. addClass() – 加入�CSS类 $(“#target”).addClass(“newClass”); //#target 指的是须要加入�样式的元素的ID //newClass 指的是CSS类的名称 2. removeClass() – 移除CSS类 $(“#target”).removeClass(“oldClass”); //#target 指的是须要移除CSS类的元素的ID //oldClass 指的是CSS类的名称 3. toggleClass() – 加入�或者移除CSS类：假设CSS类已经存在，它将被移除；相反，假设CSS类不存在，它将被加上。 $(“#target”).toggleClass(“newClass”) //假设ID为“target”的元素已经定义了CSS样式，它将被移除； //反之，CSS类”newClass“将被赋给该ID。
Tailwind CSS 是一个实用工具优先的 CSS 框架，它提供了一系列低级别的 CSS 类，这些类可以直接应用于 HTML 元素上。与传统的 CSS 框架（如 Bootstrap、Foundation）不同，Tailwind CSS 不提供预定义的组件，而是通过组合这些基础类来构建用户界面。其核心理念是通过小而单一职责的工具类来实现高度的可定制性和灵活性。
-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
4.9.根据轮播图个数修改小圆点数量 src/js/index.js function Banner() { this.bannerWidth = 798; } Banner.prototype.initBanner = function () { var self = this; this.bannerUL.css({ "width":self.bannerWidth*self.bannerCount }) }; Banner.prototype.ini
作为一个前端小白，入门跟着这四个来源学习，感谢作者的分享，在其基础上，通过自己的理解，梳理出的知识点，或许有遗漏，或许有些理解是错误的，如有发现，欢迎指点下。
浏览器渲染的步骤 （1）浏览器解析HTML标记去构造DOM树（DOM = Document Object Model 文档对象模型） （2）解析CSS去构造CSSOM树( CSSOM = CSS Object Model CSS对象模型) （3）将DOM和CSSOM树结合成渲染树之前，JS文件被解析和执行 阻塞了渲染树的部分 （1）阻塞渲染的CSS 在构造CSSOM时，所有的CSS都会被下载，无论它们是否在当前页面中被使用。 为了解决这个渲染阻塞，将关键CSS内嵌入页面中，即将最重要的（首
Vue.js中最常用的条件渲染方式是使用v-if指令。这个指令用于在DOM中插入或删除元素，基于一个表达式的结果来决定元素是否应该显示。如果表达式的结果为真，则元素会被渲染；如果结果为假，则元素会被从DOM中移除。
做自动化过程中，会发现有的按钮点击不了，或者点击没有反应，也没有报错，或者不能处理滚动条等场景，我们可以通过JavaScript定位来解决这些问题。
作者： 神Q超人 译者：前端小智 来源：medium 前阵子在和朋友聊 Webpack 的时候，突然提到 Tree Shaking，但很惭愧的是我没有办法好好说明 Webpack 是如何做到 Tree Shaking 的，因此就趁这个年假的第一天抽空读 Webpack 的文件，然后把理解到的心得写下来，如果你也有兴趣，就一起看下去吧 🙌。 Tree Shaking 是什麽 Tree Shaking 是个优化的方式，在 JavaScript 中用来表示移除没用的代码的一个常见术语，之所以叫做 Tree Sha
基于Vuecli搭建的vue项目简单快捷，易于开发。在node.js的加持下你可以更快的引入万千JavaScript开发库，仅仅依靠前端就可以实现以前使用后端才能实现的功能，如通过axios便可以快捷的与后端进行数据交互等。
jQuery 一.jQuery入门 1.javascript类库 JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。 核心理念是w
但是以上两个思路均有问题。如果设置border，如何使其边框动画？如果周边设置4个div，那么不仅是需要js操控，并且无形之中增加了许多复杂度，与编程思想背道而驰。 那么我们还有别的办法来处理使边框动起来吗？首先，动画是一定要有的。其次，如果不能用border，那么用background怎么样呢？ justdoit.
在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应式系统，Vue能智能计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少。
原文链接：https://www.jb51.net/article/165996.htm
以下内容都在主题的functions.php文件写入 1.移除WordPress版本信息 remove_action( 'wp_head', 'wp_generator' ); 2.移除离线编辑器开放接口 remove_action( 'wp_head', 'rsd_link' ); remove_action( 'wp_head', 'wlwmanifest_link' ); 3.移除WordPress头部加载DNS预获取 <link rel='dns-prefetch' href='//s.w.org'
前言: 好久没有更新博客了, 最近想复习下 之前学过的JS的相关内容, 也算是自己的一种总结. 知识长时间不用就会忘记, 多学多记多用!! 下面的程序都可以在下面的网站进行在线调试: http://
写入口函数防止页面上的标签还没有被渲染出来，js代码就执行了 不同于js，JQuery可以有多个入口函数
CSS Module 在打包的时候会将类名转换成带有hash值的新类名，根据命名规矩，从而杜绝css类名冲突的问题。
jQuery UI CSS Framework是jQuery UI中的一个样式框架，可以利用jQuery Theme roller 来生成自己想要的css样式效果。我们可以利用jQuery UI的一些框架来开发出基于jQuery UI CSS Framework效果的插件来。 jQuery UI中两大核心的css文件是ui.core.css和ui.theme.css.这两个css样式贯穿整个基于jQuery ui的界面上，并且可以通过jQuery ui ThemeRoller来生成自己的样式。 .ui-he
TodoMVC 是一个非常经典的案例，功能非常丰富，并且针对多种不同技术分别都开发了此项目，比如React、AngularJS、JQuery等等。
一、jQuery是什么？ jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ 二、为什么要用jQuery？ 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DO
日常工作中经常需要进行抓包对请求进行分析，fiddler是经常用到的一款工具，本文介绍一些常用的方法，汉化版下载地址见文章末尾介绍 一、启动fiddler 二、设置过滤器 过滤器可以起到筛选作用
在某些场景下，我们希望能监视 DOM 树的变动，然后做一些相关的操作。比如监听元素被插入 DOM 或从 DOM 树中移除，然后添加相应的动画效果。或者在富文本编辑器中输入特殊的符号，如 # 或 @ 符号时自动高亮后面的内容等。要实现这些功能，我们就可以考虑使用 MutationObserver API，接下来阿宝哥将带大家一起来探索 MutationObserver API 所提供的强大能力。
放在body和head其实差不多的，只不过是文档解析的时间不同。浏览器解析html是从上到下的。 如果把javascript放在head里的话，则先被解析,但这时候body还没有解析，所以$(#btn)会返回空值。如果把javascript放在head里的话，一般都会绑定一个监听，当全部的html文档解析完之后，再执行代码：
AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap ,Twitter Bootstrap 是目前最受欢迎的前端框架 Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 <head>元素中添加如下代码: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/boo
注意：把css文件放在head中，js文件放在body的最下面，jquery在BP上面。
昨天学习了jQuery中的选择器，有一些还没有学完全，只能说等到以后遇到了再查文档了。
AngularJs是不直接操作DOM的，但是在平时的开发当中，我们有的时候还是需要操作一些DOM的，如果使用原生的JS的话操作过于麻烦，所以大家一般都是使用jQuery，jQuery虽然好用，但是AngularJs是不建议和JQuery同时使用的，所以AngularJs给我们也提供了一些操作DOM的方法———Jqlite
我一想，对吼，我咋个就没想到呢，传统的hexo博客大多采用在文末放置评论区的方式，这样如果是在阅读长文的时候，突然有个问题了，然后想在评论区提问或者在评论区找答案，那就要拉倒最底下评论完再回来继续看。或者就是全文看完了才方便提问。不管是哪一种，都会造成阅读的割裂感，这种时候，如果可以保留当前的阅读进度，同时还能打开评论区同步阅读评论，岂不美哉？
选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。
网站性能优化是一个永恒的话题，前面我已经介绍了 WordPress 后端性能优化的一系列方法，下面讲解下 Web 前端的性能优化，其中最重要是减少 HTTP 请求和压缩文件的大小，今天来介绍下使用 Minify 来合并和压缩 CSS 和 JavaScript 文件，
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css"> </head> <body> 03webpack学习（三）html-webpack-plugin插件一、html-webpack-plugin插件 简单创建 HTML 文件，用于服务器访问 例如：我们要为输出文件添加哈希值标记，避免老的不变的文件重新加载，避免新修改的文件受缓存影响。 在前后两次在终端输入webpack打包时，即使component中的所有文件都没有变化，资源是要重新加载一遍的。 同理，在生产中，每次需要在代码中更新内容时，服务器都必须重新部署，然后再由所有客户端重新下载。 而通过网络获取资源可能会很慢，那么我们怎么才能避免这个问题呢———给output中的bundle文件提供hash值标07扫码添加站长 进交流群领取专属 10元无门槛券手把手带您无忧上云相关资讯杂谈 CSS IN JSVue 的小奇技：用 PurgeCSS 移除不需要的 CSSHTML＋CSS＋JS教程；前端快速统计 HTML/JS/CSS 大小原生js操作css样式方法总结热门标签更多标签云服务器ICP备案对象存储腾讯会议实时音视频活动推荐运营活动广告关闭领券
一、html-webpack-plugin插件 简单创建 HTML 文件，用于服务器访问 例如：我们要为输出文件添加哈希值标记，避免老的不变的文件重新加载，避免新修改的文件受缓存影响。 在前后两次在终端输入webpack打包时，即使component中的所有文件都没有变化，资源是要重新加载一遍的。 同理，在生产中，每次需要在代码中更新内容时，服务器都必须重新部署，然后再由所有客户端重新下载。 而通过网络获取资源可能会很慢，那么我们怎么才能避免这个问题呢———给output中的bundle文件提供hash值标
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
