在vue.js中使用videojs播放rtmp视频流

Tue, 05 Mar 2019 00:00:00 +0000

由于项目需要,需要在对接海康或者大华等摄像头,并实时展示在网页上.采用的传输协议为`rtmp`,在框架选择上选择`Video.js@7.4.2`.下面记录一下`Video.js`的使用:  

介绍
Video.js是一款web视频播放器，支持html5和flash两种播放方式. 更有自定义皮肤，插件，组件，语言还有丰富的选项配置.
本次使用videojs 播放rtmp直播视频流媒体.

安装

     npm install video.js videojs-flash

使用

 <template>
     <video id="video" class="video-js vjs-default-skin   
     vjs-big-play-centered flex-grid"   
     style="width:100%;height:100%;object-fit: fill"  
     muted controls autoplay poster= './video.jpg' loop>
       抱歉, 你的浏览器不支持
     </video>
 </template>
 <script>
     import videojs from 'video.js'
     import 'video.js/dist/video-js.css'
     import 'videojs-flash'

     ...
     // 实例化  
     let options = {
             autoplay: true,
             preload: true,
             techOrder: ['flash', 'html5'],
             notSupportMessage: '此视频暂无法播放',
             fluid: true
         }

     this.player = videojs('#video', options, function(){

     })
 </script>

videojs(el, options, cb): 接受三个参数: video标签id, 要实例化的videojs配置, 回调函数;
常用的videojs配置选项:

preload: 是否预加载
muted : 实现静音播放, 有一些浏览器需要静音才能实现加载之后自动播放
controls: 将显示视频控件, 如果不需要则去掉controls即可
autoplay: 视频在加载完成之后自动播放
poster: 视频封面图片
loop: true/false, 是否循环播放
notSupportMessage: 浏览器无法播放时的提示信息
techOrder: 播放控件,默认是html5,这里需要播放rtmp所以首选项要是flash
fluid: 流式布局,自适应父元素大小
更多的配置可以看videojs-options

常用方法和事件

autoplay()获取或者设置自动播放属性
currentTime()设置或者获取当前播放进度
duration()获取视屏的总长度，一般要等到视屏对象完全加载后才能获取到，一般我们会使用定时轮询的方式来获取总时长
ended()获取当前视屏对象是否已经处于结束状态
enterFullWindow() 当全屏不支持我们可以视频容器延伸到浏览器将让我们一样宽。经过试验改api完全无法使视屏进入全屏。分析源码后发现真正进入全屏的api应该是requestFullscreen()，但可惜该api只能又手势触发函数执行，连模拟点击都没法触发他。
exitFullscreen() 退出全屏，有效的
exitFullWindow() 退出全屏，试了没什么用
height() 设置/获取播放器的高度
width() 设置/获取播放器的宽度
isFullscreen() 检查是否处于全屏模式
load() 开始加载视屏
loop() 在视频中获取或设置循环属性元素
muted() 获取当前的静音状态
pause() 暂停视频
paused() 检查视屏是否暂停
play() 播放视屏
played() 检查视屏播放状态
preload() 获取或设置预加载属性
ready() 视屏对象加载完成后调用ready中的回调函数
poster() 获取或设置海报图像源url
reset() 重载视屏
src() 更换视频源
dispose() 销毁视频实例

更多事件以及apivideojs-api

事件监听采用on('listener', cb),off('list')移除事件监听

	this.on('firstplay', e => {});  
	this.on('progress', e => {});  
	this.on('timeupdate', e => {}); 

视频开始加载时会触发firstplay
实例化之后会触发progress,有时候实例化之后无法与后台建立连接,可以在回调设置一个定时器,监听3s后的currentTime()判断是否建立连接
视频播放时会不断触发timeupdate事件,结合currentTime()可以检测是否播放中断

遇到的问题

videojs播放窗口小于400300时无法自动播放,因为video-js.swf文件跨域.播放rtmp视频时videojs会在cdn上加载一个video-js.swf文件,该文件必须同源才能支持播放窗口小于400300时自动播放
使用dispose()销毁实例时会将页面上的dom节点一并移除,如果需要二次复用,则可以在初始实例化时先将节点保存起来
videojs提示 (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this video.可能是没有开始浏览器flash支持,chrome默认是询问,需要改成允许

Vue2.x回顾

Fri, 22 Feb 2019 00:00:00 +0000

Vue2.X回顾

写在前面

子曰: “温故而知新”;所以我经常在自己的学习生涯中进行阶段性回顾,方便以后复习.2019年准备入手学习React,在这之前对自己已经掌握的Vue进行一下回顾.

开始之前

工欲善其事必先利其器,最好先掌握Webpack,Babel,ES6,npm;
我几乎没用过vue-cli提供的脚手架,除了快速开发否则我都是自己撘脚手架,这只是为了我可以接触更多的技术,学习到新的知识.下面附上我常用的配置:

// webpack.config.js  
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const Autoprefixer = require('autoprefixer');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const LessFunc = require('less-plugin-functions');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const isProduction = process.env.NODE_ENV === 'production';

const DevServer = require('./webpack.server.js');

module.exports = {
	entry: {
		main: path.resolve(__dirname + '/src/index.ts'),
		lib: ['vue', 'vue-class-component']
	},
	output: {
		path: path.resolve(__dirname + '/build/'),
		filename: isProduction ? 'js/[name].min.js' : 'js/[name].js'
	},
	module: {
		rules: [
			{
                test: /\.tsx?$/,
                exclude: /node_modules/,
                loader: 'ts-loader',
                options: {
                    appendTsSuffixTo: [/\.vue$/]
                }
            },
			{
                test: /\.js$/,
                exclude: path.resolve(__dirname, '/node_modules'),
                loader: 'babel-loader',
                options: {
                    "presets": ["@babel/preset-env"]
                }
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer')({
                                    browsers: ['last 5 versions']
                                })
                            ]
                        }
                    }, {
                        loader: 'less-loader',
                        options: {
                            plugins: [ new LessFunc() ]
                        }
                    }, {
                        loader: 'style-resources-loader',
                        options: {
                            patterns: path.resolve(__dirname, './src/style/common.less')
                        }
                    }]
                })
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader']
                })
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.jpg|\.png|\.jpeg|\.svg|\.ttf|\.woff$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputpath: './img',
                        publicpath: './img'
                    }
                }]
            }
		]
	},
	plugins: [
        new HtmlWebpackPlugin({
            title: '主页',
            filename: 'index.html',
            template: './index.html',
            inject: 'body',
            hash: true,
            chunks: ['main', 'lib'],
            minify: {
                removeComments: true, //移除HTML中的注释
                collapseWhitespace: true, //移除空白字符
                minifyJS: true, 
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true
            }
        }),
        Autoprefixer,
        new ExtractTextPlugin('[name].css'),
        new VueLoaderPlugin(),
        new CopyWebpackPlugin([{
            from: path.resolve(__dirname, './src/config.js'),
            toType: 'file'
        }])
    ],
    devServer: isProduction ? '' : DevServer,
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        },
        extensions: ['.js', '.ts', '.json', '.less', '.css']
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: 'lib',
                    chunks: 'all',
                    minChunks: 2
                }   
            }
        }
    }
}

Webpack常用配置说明:

entry: 文件入口,可以有多个入口但是只能有一个出口;
output: 出口配置;
module: 配置不同文件处理的rules;
plugins: 插件设置;
resolve: 设置别名(alias)和省略引用后缀(extensions)等;
DevServer: webpack-dev-server设置;

插件说明:
html-webpack-plugin: 用于处理html模板可以自动引入打包后的文件;
extract-text-webpack-plugin: 将css文件从js中分离;
style-resources-loader: 引入全局less文件;
less-plugin-functions: 自定义less函数;
autoprefixer: 配合postcss-loader实现自动添加css前缀; babel-loader: 处理ES6语法;
ts-loader: 处理TypeScript;
vue-loader: 处理.vue文件(webpack4.0之后处理vue需要引入插件vue-loader/lib/plugin);
copy-webpack-plugin: 用于拷贝文件;

目录结构

下面是我经常用的项目结构:

├── build 打包后目录
├── src
│   ├── assets/  静态文件目录
│   ├── components/  公共组件目录
│   ├── route/  `vue-router`路由
│   ├── store/ `vuex`目录
│   ├── style/  样式所在目录
│   ├── utils/ 工具函数目录
│   ├── views/  页面文件目录
│   ├── index.js 入口文件
│   ├── app.vue  
│   ├── config.js  全局配置文件
├── index.html
├── package.json
├── webpack.config.js
├── webpack.server.js
├── README.md

可以根据个人习惯进行更改;

开始使用

在index.js即入口文件中引入vue,vue-router,vuex或者其他使用的框架,插件.
实例化一个vue实例,并挂载到页面之上.

import Vue from 'vue';
import App from './app'; // 主页面

const vm = new Vue({
	render: h => h(App) // 使用`render`函数渲染
}).$mount('#app') // 挂载到`html`页面上`id`为`app`的元素上;

流程: 入口文件(index.js) -> 页面文件(app.vue) -> 渲染并挂载($mount(el));

其他页面的展示都是在app.vue上,可以把app.vue当成是画板,我们实现的其他组件都是在此画板上作画;

路由

vue-router让我们可以在不同的路由地址显示不同的组件,使用也很简单;

// index.js
import Vue from 'vue';
import route from './route/index'; // 引入路由配置文件
import App from './app';

new Vue({
	el: '#app', // 与调用`$mount`一样  
	route,
	render: h => h(App);
})  

路由配置

// ./route/index.js  

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

export default new VueRouter({
	mode: hash / history (默认hash),
	route: [
		{
		path: '/', // 路由
		name: 'test', // 名称  
		component:  // 模板
	}
	]
})

// app.vue  

<template>
	<div>
		<router-view>/*路由模板显示的窗口*/</router-view>
	</div>
</template>

更多的配置翻阅vue-router官方文档;

Css Grid网格布局学习整理

Wed, 28 Nov 2018 00:00:00 +0000

网格布局

CSS网格布局引入了二维网格布局系统，可用于布局页面主要的区域布局或小型组件.

网格容器

通过在元素上声明display: grid或display: inline-grid来创建一个网格容器;
这个元素的所有直系子元素都会成为网格元素.

网格单元网格轨道网格线

网格单元: 每一个格都是一个一个网格单元
网格轨道: 行轨道和列轨道
网格线: 默认从左到右,从上到下开始为1,结尾为-1

轨道大小

grid-template-columns: 定义网格的列轨道属性

用法: 列宽度列宽度(有多少列就写多少个)
grid-template-rows: 定义网格的行轨道属性

用法: 与grid-template-rows一样
grid-template: grid-template-rows和grid-template-columns的缩写

用法: rows / cols
fr单位: 代表网格容器中可用空间的一等份
repeat(): 定义重复的行或者列

用法: repeat(数量, 大小)
minmax(): 定义了一个长宽范围的闭区间

用法: minmax(最小值, 最大值)

下面我们声明一个网格容器.

<div class="wrapper">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
</div>

将列数设置为5列:前两列大小为100px,后三列大小为可用空间的等份
将函数设置为3行:高度最小为100px, 当内容超过100px自适应高度

.wrapper{  
    display: grid;  
    grid-template-columns: repeat(2, 100px) repeat(3, 1fr);  
    grid-template-rows: repeat(3, minmax(100px, auto));  
} 
或用grid-template
.wrapper{  
    display: grid;  
    grid-template:repeat(3,minmax(100px,auto)) / repeat(2,100px) repeat(3,1fr);  
} 

我们使用Firefox打开,在控制台可以看到定义为网格容器的元素旁边有个gird标识
我们打开它就可以在页面看到我们定义的网格.

隐式和显式网格: 上面我们用`grid-template-columns`和`grid-template-rows`显式创建了一个3行5列的网格.但如果我们的内容超出了显式定义的网格大小,需要更多的网格的时候,网格将会在隐式网格中创建行和列

我们可以用grid-auto-columns和grid-auto-rows属性定义隐式网格中创建的轨道大小

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}

网格间距

grid-row-gap: 网格横向间距
grid-column-gap: 网格纵向间距
grid-gap: grid-row-gap和grid-column-gap的缩写

用法 grid-gap: 横向间距 / 纵向间距

我们创建一个横向间距为50px, 纵向间距为100px的网格

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

.wrapper{
    display: grid;
    grid-template-column: repeat(3, 1fr);
    grid-gap: 50px / 100px; 
}

跨轨道放置网格元素

在放置元素时,我们使用网格线定位.下面认识几个定义在网格单元上的属性.

grid-column-start: 开始的列线
grid-column-end: 结束的列线
grid-column: grid-column-start和grid-column-end的缩写
grid-row-start: 开始的行线
grid-row-end: 结束的行线
grid-row: grid-row-start和grid-row-end的缩写
grid-area: grid-row-start grid-column-start grid-row-end grid-column-end的缩写

用法: grid-area: 行开始 / 列开始 / 行结束 / 列结束

下面我们把前两个元素放到了我们的三列网格中。从左至右，第一个元素从列线1开始，延伸至列线4，也就是我们这个例子中最右边的列线。并从行线1延伸到行线3，占据了两个行轨道。
第二个元素从列线1开始，延伸了一个轨道。因为这是默认行为，所以不用指定结束线并且它从行线3到行线5，跨越了两个行轨道。剩下的元素会自动放到网格剩余的空间中。

<div class="wrapper">
   <div class="box1">One</div>
   <div class="box2">Two</div>
   <div class="box3">Three</div>
   <div class="box4">Four</div>
   <div class="box5">Five</div>
</div>

.wrapper { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-auto-rows: 100px; 
} 
.box1 { 
    grid-area: 1 / 1 / 3 / 4;
} 
.box2 { 
    grid-column-start: 1; 
    grid-row: 3 / 5; 
}

使用span关键字,定义跨越的轨道数.

.box2从行线3到行线5跨越2个轨道

.box2 { 
    grid-column-start: 1; 
    grid-row: 3 / 5; 
}

也可以写为

.box2 { 
    grid-column-start: 1; 
    grid-row: 3 / span 2; 
}

命名网格区域

grid-area把网格线4个属性合为1个值,用于定位网格区域.在用网格线定义网格区域时,我们通常指定网格区域的四条线来定义.

我们也可以先给一个区域命名,然后在网格容器grid-template-areas属性值中指定这个区域的位置.
可以随意给区域命名,比如要创建下面的布局,我们可以先划分出4个主要区域:

头部(header)
尾部(footer)
侧边栏(sidebar)
主要内容(content)

通过子元素grid-area属性为这些区域分配一个名字.

.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}

有了区域名字之后,我们就可以在网格容器上创建布局

.wrapper {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas: 
      "hd hd hd hd   hd   hd   hd   hd   hd"
      "sd sd sd main main main main main main"
      "ft ft ft ft   ft   ft   ft   ft   ft";
}

<div class="wrapper">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>

留出空白的网格单元

在上面的例子中，已经实现了用区域填充网格，不留空余空间，不过你也可以用这种布局方法留出空的网格单元。留出空单元的方法是使用句点符，“.”。假如想把尾部区域仅显示在主要内容的下方，就应该让侧边栏下面的三个单元格为空。

.wrapper {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas: 
      "hd hd hd hd   hd   hd   hd   hd   hd"
      "sd sd sd main main main main main main"
      ".  .  .  ft   ft   ft   ft   ft   ft";
}

网格定义的简写

grid-template 属性可以同时设置以下属性

grid-template-rows
grid-template-columns
grid-template-areas

使用grid-template实现前面创建的布局

.wrapper {
    display: grid;
    grid-template: 
      "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
      "sd sd sd main main main main main main" minmax(100px, auto)
      "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
      / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;           
}

第一个值是grid-template-areas的值,并且在每一行末尾声明了行大小,minmax(100px, auto)的作用.

在grid-template-areas之后用一个左斜杠分隔,再之后是一个详细的列轨道清单.

使用命名线布局　　

在用grid-template-columns和grid-template-rows属性定义网络时,可以为网络中的部分或全部网格线命名.

在定义网格时,把网格线的名字写在方括号内,名字随意.
不一定要把全部网格线都命名，只需要为布局时用到的关键线命名即可。

.wrapper {
 display: grid;
 grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}

一旦这些网格线有了名字，我们就可以用比线序号更易用的线名字来定位项目了。

.box1 {
  grid-column-start: main-start;
  grid-row-start: main-start;
  grid-row-end: main-end;
}
.box2 {
  grid-column-start: content-end;
  grid-row-start: main-start;
  grid-row-end: content-end;
}
.box3 {
  grid-column-start: content-start;
  grid-row-start: main-start;
}
.box4 {
  grid-column-start: content-start;
  grid-column-end: main-end;
  grid-row-start: content-end;
}

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

为网格线定义多个名字

你可能想要给一条线命名多个名字，比如在上例中的 sidebar-end 和 main-start 其实是同一条线。为了实现这个效果，只要把多个名字都写到方括号里，然后用空格分隔就行了：[sidebar-end main-start]。在引用时可以使用其中的任何一个名字。

自动定位的默认规则

创建网格之后,所有子项目都会把自己摆放在网格中,每个单元格一个.默认方向是按行排列,网格会首先尝试在第1行的每个单元格中摆放项目。如果已经通过 grid-template-rows 属性创建了其他行，网格就会继续把项目摆放到这些行中。如果在显式的网格中没有足够的行用来摆放所有的项目，隐式的新行就会被创建出来。

在默认情况下，网格中被自动创建的隐式行的尺寸是自适应大小的，也就是说它们会包含所有属于它们的内容，而不会让内容溢出。

不过可以通过 grid-auto-rows 属性来控制它们的大小

按列自动定位

网格也可以按列来自动定位项目，只要设置grid-auto-flow的属性值为column即可

在下面的例子中，创建了一个行高为200像素的三个行轨道的网格，按列优先自动排列，先创建一个 300 像素宽的列，接着是一个 100像素宽的列，直至创建出足够多的列来容纳全部项目。

.wrapper {
    display: grid;
    grid-template-rows: repeat(3, 200px);
    grid-gap: 10px;
    grid-auto-flow: column;
    grid-auto-columns: 300px 100px;
}

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
</div>

填充缺口

至此，除了我们明确定位过的项目，其他项目一般都会被网格自动处理并且保持它们在 DOM 中的顺序，有时候就会产生缺口.

当我们希望创建一种没有缺口的布局时,只需要在网格容器的grid-auto-flow属性值中加入dense关键字.

经过以上设置，网格就会回填缺口，以前网格会遗留下缺口，而现在它会为此前的缺口找到适合它的项目，然后把项目从 DOM 中拿出来再放到缺口中去。

###　网格布局中的盒模型对齐　　

网格容器上的属性

对齐方式与在flex容器中对flex项目对齐差不多

align-items 行轨道方向对齐
justify-items 列轨道方向对齐

子项目的属性

-align-self -justify-self

以上四个属性可选值都为

auto
normal
start
end
center
stretch
baseline
first baseline
last baseline

使项目水平垂直居中

通过组合使用 align 和 justify 属性，让项目居于网格区域的正中就变得非常容易了。

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

使用github打造属于自己的个人博客

Fri, 16 Nov 2018 00:00:00 +0000

toReady

首先你需要一个 github 账号. 什么? 没有! => www.github.com

toDo

新建一个仓库.

在本地初始化一个仓库

新建一个文件夹,在该文件夹下打开控制台

git  init // 初始化为一个空仓库

在该目录下新建一个index.html,随便写点东西.并提交

 git add .  
 git commit -m "初始化"  

关联本地仓库与远程仓库
复制在github上创建好仓库之后显示的…or push an existing repository from the command line标题下的那两行代码,在本地仓库控制台输入.接着输入你的github账户名以及密码,如果出现下面的提示则成功.

引入jekyll模板

现在我们在github上刷新我们刚创建的仓库,已经能看到我们刚刚提交的文件了.

在setting在看 GitHub Pages, 点击下面给的连接就可以看到我们在index.html写的东西.

现在我们就已经完成了我们的博客首页了,但是我们不能总是写html静态文件,我们要打造的是博客网站,这就需要用到jekyll这个工具.如果不想花时间学Jekyll语法的话,我们可以直接下载别人的模板.

jekyll中文网—目录结构

在 jekyllthemes在下载一个自己喜欢的模板
按照之间的步骤把下载好的模板上床到自己的Github远程仓库
在_post文件夹中放入自己写好的博客, 文件名必须是年份-月份-日-标题
上传博客到Github中就可以访问.

我们还需要给我们的博客添加评论功能,这要用到gitment.

申请一个Github OAuth Application

Github头像下拉菜单 > Settings > 左边Developer settings下的OAuth Application > Register a new application，填写相关信息：
Application name, Homepage URL, Application description 都可以随意填写.
Authorization callback URL 一定要写自己Github Pages的URL.
填写完上述信息后按Register application按钮，得到Client ID和Client Secret.

在jekyll博客调用gitment　　

在你需要添加评论系统的地方，一般是_layout/目录下的 post.html, 添加一下代码:　

<div id="gitmentContainer"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
    var gitment = new Gitment({
        id: '<%= page.date %>',
        owner: '你的github名',
        repo: '你的仓库名',
        oauth: {
            client_id: '上面得到的 Client ID',
            client_secret: '上面得到的 Client Secret',
        },
    });
    gitment.render('gitmentContainer')
</script>

初始化评论系统　　

将上面代码添加成功并上传之后，就可以在博客页下看到一个评论框，还有看到以下错误Error: Comments Not Initialized.说明该篇博文的评论系统还没初始化.
点击 Login with github后,使用github账号登陆,就可以看到上面错误信息处出现一个 Initialize Comments的按钮.
点击Initialize Comments按钮后，就可以开始对该篇博文开始评论了，同时也可以在对应的github仓库看到相应的issue。

gitment汉化

将上面模板里引入的CSS和js改成

<link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
<script src="https://billts.site/js/gitment.js"></script> 

遇到坑可以参考这个 Gitment评论功能接入踩坑教程

在vue.js中使用videojs播放rtmp视频流

遇到的问题

Vue2.x回顾

Vue2.X回顾

写在前面

开始之前

目录结构

开始使用

路由

Css Grid网格布局学习整理

网格布局

网格容器

网格单元 网格轨道 网格线

轨道大小

隐式和显式网格: 上面我们用grid-template-columns和grid-template-rows显式创建了一个3行5列的网格.但如果我们的内容超出了显式定义的网格大小,需要更多的网格的时候,网格将会在隐式网格中创建行和列

网格间距

跨轨道放置网格元素

使用span关键字,定义跨越的轨道数.

命名网格区域

留出空白的网格单元

网格定义的简写

使用命名线布局

为网格线定义多个名字

自动定位的默认规则

按列自动定位

填充缺口

网格容器上的属性

子项目的属性

使项目水平垂直居中

使用github打造属于自己的个人博客

toReady

toDo

引入jekyll模板

我们还需要给我们的博客添加评论功能,这要用到gitment.

申请一个Github OAuth Application

在jekyll博客调用gitment

初始化评论系统

gitment汉化

网格单元网格轨道网格线

隐式和显式网格: 上面我们用`grid-template-columns`和`grid-template-rows`显式创建了一个3行5列的网格.但如果我们的内容超出了显式定义的网格大小,需要更多的网格的时候,网格将会在隐式网格中创建行和列

使用命名线布局　　

在jekyll博客调用gitment　　

初始化评论系统　　