使用 github 搭建个人博客

使用 github 搭建个人博客

1. 新建文件夹 /hexo, cd /hexo,

  • 安装 hexo 插件

    1
    npm i hexo -g
    1
    hexo init
    1
    npm install
    1
    2
    hexo g
    hexo s

  • 成功以后访问 http://localhost:4000

2. 创建 github repositories, 建立连接

  • repositories 名以 用户名.github.io 格式

  • 生成密钥

    1
    ssh-keygen -t rsa -C "248173490@qq.com"

  • 找到 _config.yml 下的 deploy, 进行以下配置

    1
    2
    3
    4
    deploy:
      type: git
      repository: https://github.com/llj4737/llj4737.github.io
      branch: master

3. 写文章

  • 新建文章

    1
    hexo new post "article"

  • 可以看到在 /source/post 下面生成一个名为 article.md 的文件, 可以编写, 再执行命令

    1
    2
    hexo g // 生成
    hexo d // 部署

然后就可以在你的 github 站点 https://llj4737.github.io/看到你的文章了

参考 https://yq.aliyun.com/articles/117271, https://www.jb51.net/article/125152.htm

gulp

gulp 的简单使用

最近有学到 gulp, 所以打算所学的总结一下

1. 安装 gulp

  • 先全局安装

    1
    npm i gulp -g

  • 安装插件

    1
    npm i gulp gulp-babel gulp-concat gulp-uglify -D

2. 使用 gulp

  • 在当前目录新建 gulpfile.js 文件

  • 引入插件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var gulp = require('gulp');
    var babel = require("gulp-babel"); // 默认不支持 es6 , 需要配置
    var concat = require('gulp-concat'); 
    var uglify = require('gulp-uglify');
    var rename = require('gulp-rename');
    var less = require('gulp-less');
    var stylus = require('gulp-stylus');
    var cssClean = require('gulp-clean-css');
    var htmlMin = require('gulp-htmlmin');
    var livereload = require('gulp-livereload')
    var connect = require('gulp-connect');

  • 注册任务

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    /**
     * 合并压缩 js 的任务
     */
    gulp.task('js', function () {
      return gulp.src('src/js/**/*.js')
        .pipe(babel())
        .pipe(concat('build.js'))
        .pipe(gulp.dest('dist/js/')) //输出
        .pipe(uglify())  //压缩
        .pipe(rename({ suffix: '.min' })) //重命名
        .pipe(gulp.dest('dist/js/'))
        .pipe(livereload())
        .pipe(connect.reload())
    })

  • 配置babel, 支持更高语法

    1
    2
    3
    4
    5
    6
    7
    npm i gulp-babel @babel/core @babel/plugin-transform-runtime @babel/preset-env -D
    // 引入以及使用
    var babel = require("gulp-babel");
    gulp.task('js', function () {
      return gulp.src('src/js/**/*.js')
        .pipe(babel()) 
     ....

    在当前目录新建 .babelrc 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    {
      "presets": [
        [
          "@babel/preset-env",
          {
            "modules":false,
            "targets": {
              "browsers":["ie >= 7"]
            },
            "debug":false,
            "loose":true
          }
        ]
      ],
      "plugins":[
        "@babel/plugin-transform-runtime",
      ]
    }

  • 运行 gulp , 会默认执行下面的任务

    1
    gulp.task('default', gulp.parallel('js', 'stylus', 'css', 'html', 'watch', 'ant_connect'))

3. 常用功能

  1. 合并压缩 css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /** 合并压缩 css */
    gulp.task('css', function () {
      return gulp.src('src/css/index.css')
        .pipe(concat('build.css'))  // 合并以后已 build.css命名
        .pipe(rename({suffix: '.min'}))  // 压缩文件 加上 .min 后缀
        .pipe(cssClean({compatibility: 'ie8'}))
        .pipe(gulp.dest('dist/css/')) // 输出目录
        .pipe(livereload()) 
        .pipe(connect.reload())
    })

  2. 压缩 html

    1
    2
    3
    4
    5
    6
    7
    8
    /** 压缩 html */
    gulp.task('html', function () {
      return gulp.src('index.html')
        .pipe(htmlMin({collapseWhitespace: true}))
        .pipe(gulp.dest('dist/'))
        .pipe(livereload())
        .pipe(connect.reload())
    })

  3. 转换 stylus 

    1
    2
    3
    4
    5
    6
    7
    8
    /** 转换 stylus */
    gulp.task('stylus', function () {
      return gulp.src('src/stylus/*.stylus')
        .pipe(stylus())
        .pipe(gulp.dest('src/css/'))
        .pipe(livereload())
        .pipe(connect.reload())
    })

  4. 监听文件以及开启服务

    • 安装插件

      1
      npm i gulp-livereload gulp-connect -D

    • 使用

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      /**
       * 开启监听
       */
      gulp.task('watch', function () {
        livereload.listen();
        gulp.watch('*.html', gulp.series('html'));
        gulp.watch('src/js/*.js', gulp.series('js'));
        gulp.watch(['src/css/*.css', 'src/stylus/*.stylus'], gulp.series('css'))
      })

      /**
       * 开启服务
       */
      gulp.task('ant_connect', function() {
        connect.server({
            root: 'dist',   // 静态目录
            livereload: true,
            port: 8888
        })
      })

      /**
       * 默认任务
       */
      gulp.task('default', gulp.parallel('js', 'stylus', 'css', 'html', 'watch', 'ant_connect'))

参考文档

js 实现周末倒计时

js 实现周末倒计时

思路: 要计算距离周末时间, 需要知道距离周末剩余多少毫秒, 可以获取周末到该天的整天毫秒数, 减去今天过去的毫秒数, 就是剩余的毫秒

  1. 获取 dom

    1
    let $ = selector => document.getElementsByClassName(selector)[0]; // class选择器

  2. 获取距离周末还剩多少毫秒

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    function getLastTimes() {
        let now = +new Date;  // 获取当前时间戳
        let date = new Date();
        let nowDay = date.getDay(); // 获取当前是一周的第几天
        if (nowDay >= 6 || nowDay === 0) {   // 周末
            return render(["00", "00", "00", "00"]);
        }
        let lastTimes = (6 - nowDay) * 24 *3600 * 1000; // 剩余的 整天 毫秒数
        date.setHours(0);
        date.setMinutes(0);
        date.setSeconds(0);
        date.setMilliseconds(0); // 设置当天 0 点, 获取毫秒值
        let oneDaySpendTimes = now - date.getTime(); // 当天的过去了多少毫秒值
        let last = lastTimes - oneDaySpendTimes;  // 这周距离周末还剩多少毫秒值
        return last;
    }

  1. 根据剩余毫秒数转换时间

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function startComputed() {
        let last = getLastTimes();
        if (!last) return;
        let day = Math.floor(last / (1000 * 3600 * 24)); // 获取天数
        let lastDay = last - day * 1000 * 3600 * 24;
        let hours = Math.floor(lastDay / (1000 * 3600));  // 获取小时
        let lastHours = lastDay - hours * 1000 * 3600;
        let minutes = Math.floor(lastHours / (1000 * 60)); // 获取分钟
        let lastMinutes = lastHours - minutes * 1000 * 60;
        let seconds = Math.floor(lastMinutes / 1000);  // 获取秒
        render([fix(day), fix(hours), fix(minutes), fix(seconds)]);
    }

  1. 按需渲染 dom, 优化

    1
    2
    3
    4
    5
    6
    7
    8
    function render(timeArr) {
        const keys = Object.keys(timeChange);
        keys.forEach((v, i) => {
            // timeChange 赋值 timeArr 当变化后修改 timeChange 原先的值为当前时间并进行 innerHTMl
            (timeChange[v] !== timeArr[i]) && (timeChange[v] = timeArr[i]) && ($date[i].innerHTML = timeArr[i]);
        })
        return false;   // 返回 false 终结函数执行
    }