Hexo 主题开发制作

前置

Hexo 的安装就不讲了，直接开始我在制作 Hexo 主题遇到的一些问题。

首先
在使用 Hexo cli 脚手架创建完 Hexo 项目后会有一个默认官方主题 landscape 在 themes 目录中复制一份出来重命名成自己的名称，例如我的就是改成了 yogwang，并且在根目录中的 _config.yml 中修改主题为自己的主题

阅读全文

纯CSS实现瀑布流布局

原理：

  1. column-count: n 将元素中的文本分为 n 列
  2. break-inside: avoid 避免元素内部断行并产生新列
    • 可以不加，但可能会影响布局效果

Demo:

👉 在 CodePen 中打开

阅读全文

Hello Hexo

Hello Hexo,Hello Github Pages

2019.7.9 11:59:16

Chrome下垂直居中容器内区块改变高度使外层容器被移动

问题

在 Chrome 中，使用 transform 或者 flex 垂直居中内容块，当视窗滚动到容器一半时再经过第一个内容块（之后的都正常），整个容器块都会被移动

  • 内容块高度已经大于文本块高度
  • 内容块垂直居中
  • 视窗滚动到容器一半时
  • 改变文本块高度
  • Firefox 同样遇到该问题
  • Edge 正常
  • IE11 正常

问题Gif

阅读全文

Electron_03 - Electron-builder

安装 Electron-builder

$ git clone https://github.com/electron/electron-quick-start

$ cd electron-quick-start

$ yarn add electron-builder --dev // 官方推荐

or

$ npm install elctron-builder --save-dev
阅读全文

Electron_02 - Electron-packager

安装 Electron-packager

需要 Node.js 6.0 或更高版本

npm install electron-packager --save-dev

electron-packager API

使用命令行打包

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

必需参数

  • sourcedir - 应用程序源

阅读全文

Electron_01 - 快速启动

自己创建 Electron 应用

1. 使用 npm 初始化一个项目

$ mkdir my-app

$ cd my-app

$ npm init --y
Wrote to E:\my-app\package.json:
{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

修改入口文件为 main.js 并且添加 start 脚本引导 Node 来执行 Electron

阅读全文