双线部署博客,解决 github 访问速度问题
项目部署 Github 并且仓库名为 "userName".github.io
项目设置绑定域名,建议开启 https在 项目/设置/githubPage 下绑定域名
域名绑定页面,选 cname(github 给的二级域名),线路:境外项目部署到 coding 上
https://coding.net
项目/构建与部署 点立即部署(后续可自动化部署)同页面上半部分找到二级域名为 cname,线路选择默认。并在当前页面的设置里绑定你的域名(申请证书失败的话需要把域名境外线路调回默认)hexo 快速部署项目插件以下为 ssh 连接,可自行百度(双账号邮箱建议保持一致,方便注册 ssh)npm i hexo-deployer-git -Syarn add hexo-deployer-git
hexo 配置文件deploy: type: git# 触发分支 branch: master repo: github: git@github.com:<userName>/<projectName>.git codi ...
滚动歌词
滚动歌词
把获取到的歌词 用换行符 split 分割
使用正则判断并分割出时间和歌词
把正则匹配出的 分、秒、毫秒 转换成秒 做 key 传入 temp 对象,或者 push 数组也可以,没有 key 的排序问题
通过 temp 遍历出 html 元素放入 content
监听 audio 的 [on]timeupdate 事件,关键字 e.target.currentTime 为当前播放时间
根据 时间 找到 匹配的歌词元素,计算元素的 top 与 父元素 top 的差,即为上滚的距离
滚动时给当前 歌词元素 加上 active class 使其突出
获取到的歌词可在 log 里查看
audio {
width: 300px;
height: 100px;
}
.lrc-box {
margin: 100px auto;
}
.lrc-wrap {
margin: auto;
width: 80%;
heigh ...
css 底部菜单栏动画
从中间展开 after 需要设置 position:absolute;left:0;right:0;bottom:0;margin:auto
css 背景渐变 实现优惠券
关键词线性渐变 径向渐变
使用径向渐变实现缺口效果
Mac + docker 容器搭建本地 gitlab ci runner + ssh | ftp 自动部署
安装 docker
https://www.docker.com/products/docker-toolbox
加速器
https://dashboard.daocloud.io/mirror
点击立即开始-接入自有主机-我已有一台主机-选择MAC-直接点击
根据步骤 直至控制台显示有你的主机
去镜像仓库搜索 gitlab-ce
部署镜像可在命令行部署,或者刚刚下载的 Gui 工具内
部署好镜像,打开映射的主机端口,会显示重置密码(密码应为 八位+英文字符限制)默认用户名 root
安装 runner 镜像,可在 Daocloud 中部署到主机
注册runner
在刚刚安装的 gitlab 中创建项目,在项目内的setting选项选中 Ci/CD在 Runners 选项中会看到对应的 链接 和 token
注册 runner
启动 runner 容器,并进入容器docker exec -it runner bash退出命令 exit进入容器输入gitlab-runner register -n \ --url http://172.17.0.3/ \ --r ...
使用 Hexo + Next + Algolia 搜索 搭建博客
title: blog-theme-fluiddate: 2020-03-09 20:33:18categories: - 其他教程tags: - blog安装 Hexo全局安装$ npm install hexo-cli -g #282a2e
创建项目$ hexo init [folder]# folder 项目名称
启动预览$ hexo server 预览# 如你是 webstrom 可在 package 内的 scripts 中添加"start": "hexo server"# 方便以后启动预览
新建页面$ hexo new [layout] <title>
安装 Next 主题
官网 http://theme-next.iissnan.com/
# 官网提供的是 旧版 链接,注意本文的发布日期再去官网对照$ cd hexo$ git clone https://github.com/theme-next/hexo-theme-next themes/next
安装完成之后去站点配置文件,根目录 ...
图片懒加载的两种方法-节流 IntersectionObserver
第一种:
以下代码皆在 React 中测试使用
使用 window 上的 onscroll 事件,配合封装好的 throttle 节流函数实现图片的懒加载。
render 函数内:
render() {
const data = [
{
url: 'https://dwz.cn/Jwg1UQEj',
text: '图片1-1',
},
{
url: 'https://dwz.cn/w8t4A0WD',
text: '图片1-2',
},
{
url: 'https://dwz.cn/l1nYpL4U',
text: '图片1-3',
},
{
url: 'https://dwz.cn/2XrYhRBX ...
算法面试题-查找指定的字符串
实现一个算法,寻找字符串中出现次数最少的、并且首次出现位置最前的字符如“cbaacfdeaebb“,符合要求的是”f”,因为他只出现了一次(次数最少)。并且比其他只出现一次的字符(如”d”)首次出现的位置最靠前。
const findMinStr = (str) => {
const hash = {};
for (let i = 0; i < str.length; i += 1) {
hash[str[i]] = hash[str[i]] || { index: i, count: 0 };
hash[str[i]].count += 1;
}
return Object.keys(hash).map(item => {
return Object.assign({ char: item }, hash[item]);
})
.sort((a, b) => a. ...
在react中使用antd+less+css modules
配置less首先安装less和less-loader
cnpm i --save-dev less less-loader
然后在webpack.config中配置
{
test: /\.less$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader')
},
{
loader: require.resolve('less-loader'), // compiles Less to CSS
},
],
},
开启css modules功能但是如果我想开启css modules功能,使less和css可以模块化,就需要再配置,但是不能全局配置,这样的话会导致antd没有使用css modules模块的框架的样式无法作用。
开启less的css modules功能 ...
编译修饰符 Bable配置
xiu npm install –save-dev babel-plugin-transform-decorators-legacy
在根目录.babelrc文件里
"plugins": ["transform-decorators-legacy"]
如果没有babel.lrc文件请搜索对应框架的文件配置