- 博客(284)
- 收藏
- 关注
RSS订阅原创 React18自定义css modules生成类名规则
安装eject以便webpack自定义npm run eject修改webpack.config.js找到搜索cssModuleRegex找到modules中的mode为local，这里就是css modules的处理。 { test: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction ? shoul
2022-04-09 12:52:54
1068
原创 研究下开源主题Argon的古腾堡实现
前言昨天我在《WordPress古腾堡块开发初探的踩坑》一文所讲的是纯原生js实现，今天因为工作不是很忙，所以又继续研究一下这方面。先决条件阅读本文需要您至少要掌握 React 、WordPress、JavaScript、PHP的相关知识，同时您如果进行实践需要您有Node相关环境。研究对象相信大家看过这款精美的 WordPress 主题，出自大佬：“solstice23”之手。这款主题是开源的，目前有1.6k的 Start 。作者是在今年7月份对古腾堡进行适配。Arg.
2021-10-14 15:09:15
887
原创 React+TypeScript中使用Emotion
什么是Emotion？一个css in js框架Emotion 是一个专为使用 JavaScript 编写 css样式而设计的库。除了通过源映射、标签和测试实用程序等功能提供出色的开发人员体验之外，它还提供强大且可预测的样式组合。支持字符串和对象样式。个人理解除了所谓的js写css代码个人认为生成随机样式类名和vue局部样式scoped一样,都是独立作用域，然后sass有的它也可以做啥的…安装yarn add @emotion/reactyarn add @emotion/react
2021-08-14 13:29:17
2027
原创 网易云接口参数加密分析
1.查看接口通过xhr记录排查找到该数据由此接口返回2.查看调用第一个记录点进去可知最终由此方法发送请求直接打上断点刷新页面查看调用参数发现并不是热评接口，直接放行本次调用。经过几次放行，发现热评接口。查看请求参数发现参数被加密3.何时加密查看调用栈，寻找未被加密前是什么参数。当点击此调用栈发现加密前参数向上点击查看，当进入此调用栈时参数被加密可以确定参数在此方法处理后被加密，将i7b这个参数打上断点刷新页面第一次查看接口并不是热评接口放行直到热评接口出现
2021-07-07 16:50:20
1039
原创 React TypeScript中使用husky6x版本 + prettier + lint-staged + commitlint
需求概述在代码commit时检测规范，如果通过则格式化代码。工具概述长话短说，具体请去官网。huskyGit hooks 工具，可在git操作的某个阶段触发相应插件处理。prettier 可用于格式化代码。lint-staged 提交代码前的处理。commitlint 提交规范制定。安装流程1.安装react ts项目npx create-react-app test-app typesctipt好啦，安装完成。2.安装prettieryarn add --dev --ex
2021-06-02 16:57:11
712
原创 动态路由报Cannot find module。
原由：前端使用的是vue-element-admin框架，路由动态返回，但是我如果在后台配置了路由可能出现前台报错，我已经退出重新登陆了，并反复核对正确性，依据报Cannot find module。解决方案：1.如果配置没有任何问题并且和前端路由文件也能对应上，可以尝试重新运行项目。2.查看路由的component是否注册正确，可以尝试以下方法注册。route.component = (resolve) => require([`@/views/${component}.vue`], re
2021-05-10 09:49:28
3601
原创 Tailwindcss安装
我真是服了，安装了一天各种问题报错，安装官网文档完全不行，我搜网上的教程扯一大堆无用代码。摸索到它的套路后在此记录吧。1.安装tailwindcssnpm i tailwindcss2.安装postcssnpm i postcss3.安装postcss-loader (注意不要安装过高版本容易出兼容问题)npm i [email protected].在postcss.config.js加入tailwindcss没有新建即可module.exports = { plug
2021-02-18 00:00:47
1353
3
原创 解决element ui无法使用多个排序,点击一个其他排序消失问题。
3.0作者好像要加这个，现在是没有的。至于网上通过类名那些方法完全完全没必要，简单封装一下即可。效果组件代码<template> <span class="sort" @click="toggleSort" :class="`active-${state?'asc':'desc'}`"> <slot/> <span class="caret-wrapper"> <i class="sort-caret ascendin
2021-01-26 11:47:29
319
原创 Vue路由使用过渡动画后切换时出现抖动
问题描述为了让项目在页面切换时不那么死板，我是用了transition组件并加入淡出淡出效果，然而切换页面我发现居然每次跳一下。问题原因其实就是上个路由的占位导致，百度后说隐藏消失的页面让其不占位。解决方案fade-leave-to路由添加 display:none;来源资料https://www.jb51.net/article/177825.htm...
2020-11-07 21:02:49
1797
原创 vue使用element实现横向滚动
用element也很简单，滚动条没有默认的那么丑… <div class="img-list"> <el-scrollbar :vertical="true"> <ul> <li v-for="item in 6"> <img src="" alt=""&g
2020-09-27 14:56:24
3225
原创 wordpress存储外观菜单的数据表
本文我对wordpress如何存储菜单进行梳理首先我们要清楚，外观下菜单本身也是wordpress中分类法,既然是分类法这就意味着我们可以直接在wp_terms表中找到我们要的菜单与分类。打开wp_terms表，你就能看到所有的分类与菜单名称而菜单项目是自定义帖子类型，所以存储在wp_posts文章表中。找到post_type字段可以看到使用了分类法进行区分菜单与菜单项关系存储在wp_term_relationships，找到特定菜单下所有项目，就可以从这里入手。...
2020-09-08 16:21:20
671
原创 wordpress将options framework框架后台菜单放到一级下
Options Framework的安装我就不说了，安装后在外观下显示。而我们为了方便自己或用户操作，可能要改到一级菜单，这时候就需要add_menu_page函数来实现。打开：class-options-framework.php！路径位于此框架includes目录下找到：add_custom_options_page函数可以看到原函数使用了add_theme_page所以默认在外观下 /** * Add a subpage called "Theme Options" to the
2020-09-07 10:23:32
457
转载 结束时间与开始时间对比
网上搜到的，不过改了时间斜杠转横线var beginTime = "2009-09-21 00:00:00";var endTime = "2009-09-21 00:00:01";var beginTimes = beginTime.replace(/\//g,"-");var endTimes = endTime.replace(/\//g,"-");beginTime = beginTimes[1] + '-' + beginTimes[2] + '-' + beginTimes[0] +
2020-07-30 09:43:48
957
原创 vue使用Print.js跨域打印pdf
注意事项：本教程演示的pdf是存储在远程服务器的直链请不要使用自己创建iframe然后放地址那种打印方式。1.按照
2020-07-22 09:45:20
2607
3
转载 js获取Iframe里面指定元素集合
let iframeDom = document.getElementById("easyPrintIframe").contentWindow;let images = iframeDom.document.getElementsByTagName('img');console.log('所有图片：',images);
2020-07-10 10:02:47
554
原创 不同字数对齐
效果：HTML:<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title><
2020-06-19 15:01:57
350
原创 更小的字号
一般来说最小到12px（浏览器未进行主动的设置）,在不用css缩放属性情况下，可以使用svg制作更小的字号兼容性较好。svg浏览器渲染解析时不会像普通css那样绘制。而是有着自己的解析机制,所以我们可以通过代码来控制。html: <svg width="25" height="20" viewBox="0 0 17 20" > <text x="0" y="1.3em">测试</text> </svg>
2020-06-12 13:47:10
188
原创 重写element多选框全选效果
模拟数据data(){ return { checkAll: false,// 全选状态 // 每次存储选中的 checkedCitiesActive:[ ], // 模拟数据列表 checkedCities: [ { id:0, name:'第一' }, { id:1, name:'第二' } ], isIndetermin
2020-06-09 19:01:08
224
原创 图片查看插件v-viewer
安装npm install v-viewer --save引入全局注册import 'viewerjs/dist/viewer.css';import Viewer from 'v-viewer';Vue.use(Viewer,{ defaultOptions: { zIndex: 9999 }});使用1.单查看图片,添加参数:v-viewer<img :src="item.file_image_url" :alt="item.file_name" v-vie
2020-06-09 15:29:54
374
原创 神奇的object-fit属性
干嘛的?对图片进行剪切，保留原始比例。完美解决Img自适应问题哪些参数?fill | contain | cover | none | scale-downcontain被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。cover被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。fill被替换的内容正好填充元素的内容框。整
2020-06-07 23:20:30
257
转载 router-link 绑定事件不生效
在vue中绑定事件是一下这种方法：v-on:click=‘函数名称’;@click = ‘函数名称’;这两种写法都是正常。但是我们使用了 vue-router 路由时会使用 标签来代替 a 标签跳转。我们在 vue-router 标签绑定 @click 事件 。<router-link to="/date" @click="nav_click">最新</router-link> methods: { nav_click: function() { co
2020-05-28 14:12:34
1087
原创 The computed property xxx is already defined as a prop.
重复定义属性导致，请检查是否重复。
2020-05-24 21:44:35
8640
转载 使用Element报错parsing error: x-invalid-end-tag
原因vue将标签渲染为原生html标签时，由于这些标签是自闭合的，所以有end标签会报错。解决修改配置文件，忽略该项检查：根目录下 - .eslintrc.js - rules添加:'vue/no-parsing-error': [2, { "x-invalid-end-tag": false }]然后重新运行...
2020-05-24 15:13:32
1084
原创 .env环境变量和模式
环境文件说明：.env.在所有的环境中被载入,当你指定了环境，它也会合并,并且优先级大于.env，没有指定环境时先找它。.env.development指定开发环境配置.env.production指定生产环境配置，当你build运行时就触发这个创建变量键值对形式创建，命名必须VUE_APP_开头列如：VUE_APP_BASE_API = '/api'获取console.log('当前:',process.env.VUE_APP_BASE_API);模式模式是 Vue CL
2020-05-23 23:46:25
870
原创 报错，To install it, you can run: npm install --save core-js/modules/es.array.slice
网上说版本问题，我安装了最新解决的。npm install core-js
2020-05-21 14:12:41
3772
3
原创 动态组件component与批量注册
看官方手册比谁说的都明白:https://cn.vuejs.org/v2/guide/components-dynamic-async.html单用 { path:"/three", name:"Three", component:()=>import("../views/Three.vue").then(()=>{ console.log('访问three成功!'); },()=>{ console.log('访问three失败!'); })
2020-05-21 10:16:20
388
原创 vue-cli4取消eslint 校验代码
直接修改.eslintrc.js,注释此处贴出的代码即可 extends: [ "plugin:vue/essential", // "eslint:recommended", "@vue/prettier", ],
2020-05-20 16:00:24
834
原创 vue-cli3 取消eslint 校验代码
eslintrc.js文件module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/essential', // '@vue/standard',//这行注释就可以 '@vue/typescript' ], rules: { 'no-co...
2020-05-08 16:07:54
625
1
原创 字段缓存的应用
作用简述:1.模型的数据字段和表字段是对应关系，默认会自动获取，包括字段的类型；2. 自动获取会导致增加一次查询，如果在模型中配置字段信息，会减少内存开销；3. 可以在模型设置$schema 字段，明确定义字段信息，字段需要对应表写完整；//设置字段信息，需要写完整的数据表字段protected $schema = ['id' => 'int','username' =>...
2020-04-20 23:18:49
216
原创 Declaration of Nc_Store_Skin::feedback($stream) should be compatible with WP_Upgrader_Skin::feedbac
public function feedback( $string, ...$args ){}第二个参数加上即可。
2020-04-18 09:11:16
390
原创 下载的主题报错Declaration of description_walker
这个问题通常出在自定义菜单函数处，并且高版本中wordpresss重新定义了start_el()函数参数，所以报错。重写即可原:function start_el(&$output, $item, $depth, $args)改为:function start_el(&$output, $item, $depth = 0, $args = array(), $id =...
2020-04-14 14:08:56
299
原创 详解WordPress模板标签Template_Tags
本文说明一些你渲染文章时会用到的函数玲曦在官方基础上整理，言简意赅如有不理解看官方具体详细解释就行啦！官方定义模板标签（Template tags）在博客的 模板文件中使用，用来动态的显示内容或自定义网站。下面介绍的是一些在WordPress中常用的标签，根据功能排序。包含模板文件的标签（Include tags）get_header 页头get_sidebar 侧栏get...
2020-04-11 23:48:47
2510
原创 WordPress常见模板文件列表
模板文件列表在官方基础上进行补充。style.css主样式表，这个文件 必须 位于你的主题里面，而且必须在头部注释处写清楚你的主题的信息rtl.cssrtl 样式表。如果网站的阅读方向是自右向左的，他会自动被包含进来。你可以使用 the RTLer 插件来生成这个文件.index.php主模板.如果你的主题使用自己的模板index.php 是必须要有的header.php用...
2020-04-11 23:47:12
1711
原创 WordPress模板文件和对应函数概要
主页显示默认情况下，WordPress会设置您网站的主页以显示您的最新博客文章。此页面称为博客文章索引。您还可以将博客文章设置为显示在单独的静态页面上。home.php无论是用作首页还是单独的静态页面，模板文件均用于呈现博客文章索引。如果 home.php不存在，WordPress将使用 index.php。home.phpindex.php❗️如果front-page.php 存...
2020-04-11 23:45:12
595
原创 wp获取友情链接按分类整理，并且追加链接。
我已经封装好函数，直接调用就行。// 返回站点友情链接(俗称)按照分类归类，并且分类下追加链接项function getCatLink(){ global $wpdb; $linkcats = $wpdb->get_results("SELECT T1.name ,T1.term_id AS id FROM $wpdb->terms T1, $wpdb->term_ta...
2020-04-11 23:43:33
369
原创 from表单搜索特定的分类文章
form表单只需要加入<select name="cat"> <option value="11" selected="selected">插件</option> <option value="22">模板</option> </select>form提交时，会代入选中的分类id...
2020-04-05 13:21:27
296
原创 基础，空，多级控制器
基础控制器创建一个Test.php控制器，并继承基础控制器调其方法<?phpnamespace app\controller;use app\BaseController;class Test extends BaseController{ public function index() { return 'test'; } ...
2020-04-01 23:06:11
127
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人