vuepress 踩坑记录

记录使用 vuepress 以来所遇到的坑及解决办法

  1. 修改 build 的输出目录

vuepress 的默认输出目录在 .vuepress/dist 不是很方便,可以通过下面方法改写输出目录

// .vuepress/config.js
module.exports = {
  // ...
  dest: 'dist/'
}
  1. 使用 vuepress-plugin-sitemap@vuepress/last-updated 报错

主要是由于 @vuepress/last-updated 插件将 lastUpdated 编译为 lang 所在时间格式。转换后的中文时间格式没有办法被 vuepress-plugin-sitemap 识别引起的

// .vuepress/config.js
module.exports = {
  // ...
  plugins: [
    ['@vuepress/last-updated', {
      transformer: timestamp => {
        return new Date(timestamp).toISOString()
      }
    }]
  ]
}
  1. 为你的主题增加自定义容器

使用 vuepress-plugin-container 来增加自定义容器

TIP

默认主题是自带的,其他需要自己手动增加

// .vuepress/config.js
module.exports = {
  // ...
  plugins: [
    ['container', {
      type: 'tip',
      before: info => `<div class="tip"><p class="title">${info}</p>`,
      after: '</div>'
    }]
  ]
}

参考

/* .vuepress/styles/index.styl */
.tip
  padding 1rem 1.5rem
  border-left-width .5rem
  border-left-style solid
  margin 1rem 0
  background-color #f3f5f7
  border-color #42b983
  .title
    font-weight bold

参考

  1. GitHub Pages and Travis CI 自动化部署
  • 在项目的根目录创建 .travis.yml
  • 查考 配置文件,或者复制下面的配置
language: node_js
node_js:
  - lts/*
install:
  - yarn
cache:
  directories:
    - node_modules
script:
  - yarn build
deploy:
  committer_from_gh: true
  provider: pages
  skip-cleanup: true
  local_dir: dist
  github-token: $GITHUB_TOKEN
  keep-history: true
  on:
    branch: master
  • 进入 github 获取 token
    • settings -> Developer settings -> Personal access tokens -> Generate new token
    • 输入 Note 同时勾选所有 -> Generate token
    • 复制 token
  • 进入 travis ci 创建 GITHUB_TOKEN
    • 进入你对应仓库的 settings
    • 在 Environment Variables 下面的 NAME 中输入 GITHUB_TOKEN,在 VALUE 中粘贴从 github 中复制的值
    • 点击 add 增加环境变量
  1. 修改网站的默认语言
// .vuepress/config.js
module.exports = {
  // ...
  locales: { '/': { lang: 'zh-CN' }}
}
  1. 注册第三方的全局组建
// .vuepress/enhanceApp.js
import XXX from 'XXX'

export default ({ Vue }) => {
  Vue.use(XXX)
}

  1. 设置别名
// .vuepress/config.js
const path = require('path')

module.exports = {
  // ...
  chainWebpack: config => {
    config.resolve.alias.set('@', path.resolve(__dirname, '../src'))
  }
}
使用媒体查询判断屏幕的方向

使用媒体查询判断屏幕的方向

通过媒体查询 orientation 判断屏幕的方向,显示不同的样式

cssnext 中我最期待的属性

cssnext 中我最期待的属性

列举一些在下一代 css 技术中我最期待的属性