Xuanmo Blog | WEB前端笔记

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

简介我的博客一直是用的wordpress做的后台，主题已经换了好几版了，学到vue的时候，用vue做了一个主题，但是不能SEO，所有采用vue的服务端渲染来做了一版，也是对服务端渲染做一下学习，也就是目前的页面，源码已经放在我的Github上了，相对于之前的主题配置，这次有点不一样，稍微麻烦一点，这次是属于前后端完全分离，也就是前端需要单独部署。源码地址：https://github.com/xuanmos/xm-nuxtjs-wordpress 所有图标：https://assets.xuanmo.xin/iconfont.php 安装node环境，如果node环境已有可以忽略这一步 1

2018-10-28 18:49:0140245

阅读详情

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

2018-10-25 23:53:2820055

阅读详情

分享：使用Chrome自带命令实现网页截图

平时在使用中偶尔需要截取网页中的图片，一般需要安装插件什么的，偶然发现chrome自带一个非常好用的截图功能，不需要任何依赖插件，还带有很多其他命令，所以做一下分享。第一步打开chrome控制台，可以使用鼠标右键，点击检查菜单打开Elements界面或者使用快捷键，Mac平台command+option+i 第二步使用快捷键Maccommand+shift+p，windows平台ctrl+shift+p，调出命令行，输入screen，出现以下命令，选中即可生成图片并自动保存： Capture full size screenshot截取整个网页，body部分 Capture node scr

2018-10-25 21:22:3418745

阅读详情

分享：30秒或更短的时间内弄懂的有用CSS代码片段

简介：您可以在30秒或更短的时间内弄懂的有用CSS代码片段的精选。英文版：https://github.com/atomiks/30-seconds-of-css 中文版：http://caibaojian.com/30-seconds-of-css

2018-08-17 14:00:488541315

阅读详情

解决vue项目中的“Invalid Host header”

最近在做一个微信公众号项目，用微信开发工具调试本地项目，需要做一下内网穿透，代理都配置好了，页面出现这个Invalid Host header错误，内网穿透工具我是用的frps做的，最后通过google找到方法，在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: true即可转发成功 devServer: { disableHostCheck: true, } vue-cli版本3.0的情况下修改vue.config.js的配置 module.exports = { devServer: { disab

2018-08-15 12:45:3527407

阅读详情

一个简单的打字机效果

之前利用字符串截取方法实现简单的打字机效果 <!DOCTYPE html> <html lang="en"> <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>打字机特效</title> </head> <bod

2018-08-06 22:40:38525512

阅读详情

分享一组SVG loading动画

使用直接右键保存即可更多地址：https://loading.io

2018-08-04 14:24:36373213

阅读详情

我的scss常用方法

兼容IE透明度写法 @mixin opacity($number: 0.5) { opacity: $number; filter: alpha(opacity=#{$number * 100}); }   修改input placeholder颜色 @mixin placeholderColor($color: #fff) { &::-webkit-input-placeholder { color: $color; } &::-moz-placeholder { /* Mozilla Firefox 19+ */ color: $color; } &:-m

2018-06-29 13:19:132811120

阅读详情