Xuanmo Blog

使用canvas压缩图片大小

目前的项目都有需要用到前端上传图片做压缩处理，结合canvas的toDataURL可以即可做简单的处理，输出格式为base64，下边做了一个简单的封装 /** * [imageCompress 图片压缩] * @param {[Array]} imgSrc [传入图片地址] * @param {Number} [width=1024] [图片需要压缩的宽度,单位：px] * @param {Number} [quality=1] [图片需要压缩的质量，0~1之间] * @return {[type]} [返回base64 jpeg格式图片] */ export function imageCo

计算浏览器滚动条在各浏览器的宽度

博客有段时间没有更新了，也比较忙，今天遇见一个需要计算浏览器滚动条的功能，之前在element-ui见过一种写法，这里做一下笔记。 原理是通过两个父子关系的div的宽度相减得到一个差值，这个值就是浏览器滚动条的宽度，outerWidth - innerWidth = scrollBarWidth。 const scrollContainer = document.createElement('div'); const scrollContent = document.createElement('div'); scrollContainer.style = 'position:fixed;z-

wordpress给管理员发送邮件的那点事

在主题切换到前后端分离之后，wordpress的所有新评论都不给管理员发送邮件通知了，记得之前好像是有的，看了下文档，终于给弄好了，前提需要安装一下Easy WP SMTP插件，插件的设置使用可查看我的另一篇文章https://www.xuanmo.xin/details/1911，结合add_action钩子即可实现，将以下代码插入到functions.php即可，样式或者需要显示其他内容可自行更改： // 有人评论时通知管理员 function xm_new_comment($comment_id) { $to = get_bloginfo('admin_email'); $comment

2018总结

先扯淡 2018给我的感觉过的比之前快，转眼就到年底了，今年也算入行前端比较重要的一年，主要在技术上有了一个好的提升，这是我最大的收获，前端这几年技术变化很快，自己还有好多东西没学，今年一直过得很压抑，也算比较坎坷的一年。 今年终于拿下了我看了两年的MacBook Pro，从16年发布新款就喜欢，今年不想在等，连吃饭的家伙都不给力怎么干好活呢，果断抛弃我的Air。 技术的提升 2017年到年底之前一直没有学vuejs，都是jQuery一把梭，终于在年底学习了一下vue，并用vue做了我的第一版前后端分离的博客（结合Wordpress Rest Api），也是我对ajax有了一个新的认识，也是我

Vue项目中遇见的一些问题

前言 最近在用vue做微信公众号开发，记录一下在vue项目中所遇见的一些问题，算是遇见的一些小坑。 vue history模式在nginx部署遇见的白屏问题 项目开发完成，部署到线上后页面无法访问，一直处于白屏状态，文件显示不能正常加载，在官网有提到需要改一些配置，我这里是用的nginx，具体配置如下： server { listen 80; server_name xuanmo.xin; root /usr/share/nginx/html; location / { index index.php index.html index.htm; try_files $uri $uri/ /in

魔都-外滩

【主题】nuxtjs+wordpress主题使用说明

简介 我的博客一直是用的wordpress做的后台，主题已经换了好几版了，学到vue的时候，用vue做了一个主题，但是不能SEO，所有采用vue的服务端渲染来做了一版，也是对服务端渲染做一下学习，也就是目前的页面，源码已经放在我的Github上了，相对于之前的主题配置，这次有点不一样，稍微麻烦一点，这次是属于前后端完全分离，也就是前端需要单独部署。 建议直接clone一份源码在本地，修改之后再推到服务器，这样可以在本地先改好，能正常运行跑一下流程 源码地址：https://github.com/xuanmos/xm-nuxtjs-wordpress 所有图标：https://www.xuanm

Grid布局

介绍 CSS Grid可轻松构建复杂的Web设计。它的工作原理是将HTML元素转换为具有行和列的网格容器，以便将子元素放置在网格中所需的位置。 通过将元素的父级设置display: grid;转化为网格布局。 <div class="grid-wrap"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</d