在vue-cli中独立构建主题

前言

一般主题功能都会归类到一系列css中,通过文件名区分。这篇文章将手把手教你如何做一个属于你的主题功能,并且可以支持一定程度的热重载。理论上不需要和vue-cli或者webpack绑定。

动态加载主题

这一步很简单,当我切换主题的时候,移除旧的主题样式标签,然后添加新的主题样式标签即可。
首先,data中定义:

data(){
  return {
    theme:'theme1',
    linkId:'theme'  
  }
}

methods中加入以下方法:

    applyTheme() {
      this.removeStyle()
      this.addStyle()
    },
    removeStyle() {
      const style = document.getElementById(this.linkId)
      if (style) {
        style.remove()
      }
    },
    addStyle() {
      const link = document.createElement('link')
      link.href = `你的静态资源目录/${this.theme}.css`
      link.setAttribute('rel', 'stylesheet')
      link.setAttribute('media', 'all')
      link.setAttribute('type', 'text/css')
      link.id = this.linkId
      const head = document.getElementsByTagName('head')[0]
      head.appendChild(link)
    }

监听到theme变化之后调用applyTheme方法。

主题开发

主题采用less进行开发,当然你使用sass或者stylus都可以,但是不会直接使用css,这样效率会高一些。

开发构建脚本

理论上应该编写一个webpack插件来进行这项工作,但是由于我们的主题源码并未在项目中通过import或者require引入,所以修改主题不会触发重新编译。我没有在webpack上找到有效的解决办法,如果有,麻烦分享给我。

新建build.js放入主题源码目录下,脚本代码:

var fs = require('fs')
const _ = require('lodash')
const less = require('less')

var pathName = '主题源码目录'
var writePath = '编译后的主题css资源目录'
fs.readdir(pathName, async function(err, files) {
  if (err) {
    console.log(err)
    return
  }
  _.remove(files, function(o) {
    return o === 'build.js'
  })
  console.log(files)
  const csses = []
  for (var name of files) {
    var filePath = pathName + '/' + name
    var data = fs.readFileSync(filePath, 'utf-8')
    try {
      const r = await less.render(data, {})
      csses.push({
        name: name.split('.')[0],
        css: r.css
      })
    } catch (e) {
      console.log(e)
    }
  }
  for (var css of csses) {
    write(css)
  }
  console.log('写入CSS成功!')
})

function write(css) {
  const f = fs.writeFileSync(writePath + '/' + css.name + '.css', css.css)
  console.log(f)
}

package-jsonscripts中加入一行"build:theme":"node 主题源码路径/build.js"。接着运行npm run build:theme,就可以将源码编译为css

自动构建

直到上一步,主题功能就算是完成了,但是有一个问题,每次修改主题后需要主动运行npm run build:theme将主题编译成css,开发效率很受影响。所以考虑写一个监听文件改变的脚本和vue-cli结合起来。最先想到的是gulp,gulp可以方便地监听单个文件的改变,但是不是很想为这个功能引入gulp,于是使用fs.watch自己写,在vue.config.js顶部合适位置加入以下代码:

var fs = require('fs')
function resolve(dir) {
  return path.join(__dirname, dir)
}

const { exec } = require('child_process')

// 监听主题文件的修改
fs.watch(resolve('主题源码目录'),(event,trigger)=>{
  // 修改后重新执行构建主题
  exec('npm run build:theme', (error, stdout, stderr) => {
    if (error) {
      console.error(`exec error: ${error}`)
      return
    }
  })
})

接着重新把项目跑起来,修改主题文件,可以看到浏览器会重新加载页面,已经应用的主题会相应地被修改。

ESlint保存格式化在VSCode失效的问题

首先有一个前提:你的配置之前是能够正确格式化的。

问题描述:vscode或者eslint插件更新导致保存格式化失效。

排查:找了别人可用的配置均无法恢复该功能,在网上苦苦搜索,查到是ESLint服务没有启动。

解决方案:增加一个系统变量,名称:NO_UPDATE_NOTIFIER ,值:1。重启电脑,解决!

IE9踩坑之旅

近期做的一个项目需要兼容IE9,以前没有兼容IE9的经历,想着也不难,结果遇坑无数,现整理如下:

  1. 不支持flex布局。这倒没什么可说的,因为本来就不支持,但是因为疏忽还是用了一个使用flex的布局。但也只需要稍微变动一下,将侧边栏设置成fixed,基本上布局就稳了。
  2. 不支持跨域携带请求头。如要在header里面设置验证信息,在跨域的情况下是不行的。
  3. 不支持 html5 ,所以上传文件使用的是 html4 ,而 html4 不能获取文件大小,所以在使用 plupload 这个插件上传文件是总是报错:-600 file size error,解决办法就是在调用 init 方法后,将 plupload.settings.filters 设置为空数组。
  4. 上传文件后,若服务器返回 Content-type 为 application/json ,IE9会开启一个下载提示,问你是否下载该文件。解决办法就是修改 Content-type 为 text/html 或其他。
  5. 不支持 placeholder ,不过这个可以模拟。
  6. 不支持 Blob , 这个影响直接使用接口下载文件数据,然后在浏览器保存成文件这一流程。

解谜英语语法

解谜英语语法

(转载自:http://www.yinwang.org/blog-cn/2018/11/23/grammar?tdsourcetag=s_pcqq_aiomsg

回国之后,我发现很多人仍然在为语法的枯燥繁琐而头痛。市面上好像不存在一本深入本质的语法教材。所以我萌生了写这样一篇文章的念头,帮助那些正在为学习语法而痛苦挣扎的人们。

这篇文章里包含了一些我自己保留多年的关于英语学习的秘密。我曾经想过把这写成一本完整的语法书,可是后来发现似乎只需要提点一二就可以了。

继续阅读解谜英语语法

Android Studio获取开发版SHA1值和发布版SHA1值

转载:https://blog.csdn.net/qq_29269233/article/details/53725865

正常情况下:

一、获取开发版SHA1:

在此我直接用Android Studio提供的命令控制台了,毕竟做Android开发几乎都是用Android Studio了。

1、打开android studio 找到Terminal并打开,或者在最下面找到Terminal 如下图:

2、 输入命令  C:    进入c盘;

3、接着 输入命令   cd Users\Administrator   其中Administrator是自己的用户名  Administrator文件下有个.adnroid文件, 输入命令   cd  .android,最后就找到了.android,如图:

4、输入命令  keytool -list -v -keystore debug.keystore  其中debug.keystore是studio默认的keystore,按回车,然后输入秘钥:android(系统默认)    回车(秘钥库口令是看不到的)如下图:

这样就成功获取到开发版的SHA1值了,是不是很简单呀,那是当然!

二、获取发布版的SHA1:

获取发布版的SHA1,跟获取开发版的SHA1的1、2、3步骤一样,不一样的地方就是第4步稍微不同而已。

1、同上;

2、同上;

3、同上;

4、输入命令  keytool -list -v -keystore 文件目录\自己的签名文件 比如我的:keytool -list -v -keystore E:\签名文件\android.keystore ,接着按回车,然后输入秘钥:(我只知道我的,哈哈)    回车(秘钥库口令是看不到的)如下图:

这样就成功获取到发布版的SHA1值了,是不是很简单呀,那是当然!

上面是正常情况下执行的,我在获取SHA1时就被坑了,接下来就是说一下不正常的情况了:

1、首先是出现:

‘keytool’ 不是内部或外部命令,也不是可运行的程序或批处理文件。如图:

于是我参考了一篇文章:http://blog.csdn.net/csdnhejingzhou/article/details/50643246 ,确实可以是解决了这个问题;

2、前面的问题解决了,然后我就按照他的步骤直接运行deybug.keystore,即C:\Program Files\Java\jdk1.8.0_31\bin>cd keytool.exe
但又出现了一个问题:提示目录名称无效。如图:

最后我直接 把  C:\Users\Administrator\.Android 目录下的 debug.keystore  拷贝到  C:\Program Files\Java\jdk\bin 目录下了,就是和debug.keystore同一个目录下。这样就解决所有问题了,不知道你们会不会这样,也许是我运气不好,或者我儍敷敷地绕弯路了。

我还是有点饿

《九品芝麻官》里面有这样一个情节。

包龙星去找他爹当年的救命恩人告状,结果官官相护,救命恩人当场翻脸,并命包龙星和包有为当场吃下两筐饼。

强行塞饼,看着真是一个惨。

不过,喂完后,我以为他们都吃不下了,结果包有为来了一句“我还是有点饿”。

就这么一句话,我笑了出来,刚才的压抑情绪也释放了出来,可谓是神来之笔,一句话奠定了本剧喜剧的内核。

本网站的数学公式使用方式

LaTeX示例

开启文章对LaTeX的支持:在文章头部加入一个mathjax标记,像这样[p],把p换成mathjax即可,如果我直接写的话,网页会忽略这个标签,这样在文章中就看不到了,以下类似。

本博客支持行间公式和行内公式两种写法。

行间公式:$$\large\sum_{i=1}^n\vec{F}_{\text{ext, i}}=\sum_{i=1}^n$$,如果想把美元符号在编辑时写在单独的行,需要切换编辑器到“文本”模式 $$\large\sum_{i=1}^n\vec{F}_{\text{ext, i}}=\sum_{i=1}^n$$

行内公式:使用latex标记包裹,像这样[p][/p]不过把p换成latex即可\(x\)

行内公式简便写法:使用一个美元符号$,后跟latex,再跟空格,然后是你想要写的公式,再以美元符号结尾,像这样$p your formula&,记住将p换成latex如:\(\sqrt x\)

可实时预览的LaTeX编辑器

LaTeX部分符号

LaTeX详细文档

更多内容自行百度。

知乎书籍排行网站——建站始末

网站地址books.bigfacewo.com
最近工作去了,感觉人也变懒了,一直想写一些关于这个网站东西分享出来。慢慢写吧。
前情提要:对于大神来说,这个网站使用的技术都是小儿科啦。不过,我想还是有朋友有这个需求的。这篇文章的内容不一定都是准确的,用的方法也不是最好的,不过我始终相信一句话——兼听者明,偏听则暗。所以看这篇文章的朋友,希望你能带入自己的思考,同时更希望能够带给你一些东西。

继续阅读知乎书籍排行网站——建站始末