在 Github 上面搜索 “lottery”，发现类似的项目挺多的，有 Electron 实现的，可以打包成 exe，也有原生 js 实现的，浏览器打开。

这次是用 Vue 做了一个编号抽奖，一个转盘抽奖，放在一起，练手。

预览：http://lottery.imaegoo.com/

在 Visual Studio 中可以使用 Alt + Shift + F10 来自动导包，在 VS Code 中怎么操作呢？

快捷键是 Ctrl + .（句点）。

坑：必须在英文状态下按快捷键才能起作用。

Hexo 部署依赖 node 环境就让很多专注写作的人放弃这个框架，劝退萌新，并且难以随时随地写作。好在其 CLI 比较简单，前面我也介绍过如何利用免费的微软 Azure 持续部署博客。

不过今天看 Ant Design Pro 官网的 footer 的时候发现了 Netlify 这个东西，试了以后，强烈安利！！！

来到它的首页，里面有这么几段话——

大字：

在几秒钟内部署您的网站*

小字：

*不，这里没有陷阱。
真的只需点击几下。

嗯……嗯？哼哼……有免费套餐，试试吧！

1. 首先用 GitHub 授权登录
2. 选择 New site from Git
3. 选择项目托管的位置：GitHub
4. 授权 GitHub 访问私有项目
5. 输入构建命令……等等，你怎么给我自动输入了啊喂？
   
6. 点 Deploy site

然后构建就启动了，1分钟后我的站点就到了 Netlify 上。

当时我的表情是 (⊙o⊙)？

我连部署命令都没打；
我连环境都没提供；
我甚至全程没有摸一下键盘……（你要问我注册登录不摸键盘？真就没摸，GitHub 是已登录的状态，点一下授权按钮就登录了。）
敢情 hexo 的部署配置，Azure 的 CICD 都白写了呗？

……

😓，流批……

这个网站还支持绑定域名，自动申请 HTTPS，配 Web Hook（就不用手动点部署了），还有很多很多真 · 自动化的功能，大家一起发掘吧！

Preview

Live Preview

https://www.imaegoo.com/

Attention

This extension is NOT FULLY TESTED, so it may not fully cover the theme styles, if you find something wrong (such as bright things in night mode), please report it in this issue, do not open new issue.

Usage

1. Merge night branch from imaegoo/hexo-theme-icarus into your icarus theme folder, or dowmload zip.
2. If you configured an image logo, you should prepare a logo for night mode, then apply them in themes/icarus/_config.yml.

   1 2 3

   logo: light: /images/logo.png dark: /images/logo-dark.png

Modify

If you want to customize your theme, you can modify night mode part in themes/icarus/source/css/style.styl.

Thanks

Universe background from https://github.com/fan-lv/Fan

移动端分页一般都是向下滑动加载更多，Vant 组件库提供了 van-list 来实现这一功能。

List 组件通过loading和finished两个变量控制加载状态，当组件滚动到底部时，会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据，数据更新完毕后，将loading设置成false即可。若数据已全部加载完毕，则直接将finished设置成true即可。

实际应用中发现，即使内部元素已经填满一整屏，仍然会触发加载，直到我模拟的20多页全部加载完才停下来。

我没有给这个问题写专门的 CodePen demo，比较麻烦，碰到的人也不一定多。

结论

van-list 会在内容之后增加一个 placeholder，通过 placeholder 的位置判断内容是否已填充满屏。
van-list 本身为 flex 布局时，flex-direction 必须是 column（或 column-reverse）。

过程

首先我的用法是这样的：

1
2
3
4
5
6
7

<van-list> <!-- flex -->
  <van-grid>
    <van-grid-item />
    <van-grid-item />
    <van-grid-item />
  </van-grid>
</van-list>

首先看文档，英文文档没有提到，但中文文档有以下一段话：

使用 float 布局后一直触发加载？
若 List 的内容使用了 float 布局，可以在容器上添加van-clearfix类名来清除浮动，使得 List 能正确判断元素位置

检查了一下，我没有在使用 float 布局呀。

更新了 Icarus 主题代码，右上角增加了夜间模式切换按钮，是实验中的功能，欢迎体验。

通过向 body 添加名为 night 的 class 实现，状态记在浏览器 localstorage 中。

已知问题：

1. 样式可能没有全面覆盖。
2. 夜间模式在低性能浏览器上导致页面响应缓慢，需要优化性能。

目前还没有做成插件，仅在自己的博客使用，后期如果有时间的话，会考虑做成 extension。

经常在查资料时访问各种 CSDN 博客会发现，当 屏幕高度 < 左边栏的高度 < 内容的高度 时，滚动屏幕，左边栏会随着内容一同滚动，当滚动到左边栏底部时，左边栏会停止滚动，而内容会继续滚动。

这种设计的优势在于，用户既能够滚动左边栏，又不会在左边栏不够长时，造成页面左侧大片空白的尴尬，这种布局模式，叫做 粘性布局（sticky）。

粘性布局在元素满足显示条件时，表现与普通布局没什么不同，但当元素随着页面滚动而无法显示时，会转为 fixed 布局效果，主流浏览器已经全部支持粘性布局（IE不支持）。

通俗一点讲，类似于 Excel 中的“冻结窗格”。

绝大多数网上的教程材料都用 position: sticky; top: 0; 这样的组合来举例，但为了实现 CSDN 左边栏效果，position: sticky; bottom: 0; 似乎不能和想象一样的起作用。

先说结论吧

1. sticky 的确是无法直接粘底的……
2. CSDN 使用 JS 动态计算实现，当计算到左边栏底部即将滚上屏幕时，立即对左边栏添加 position: fixed; bottom: 0; 样式，把左边栏定死，延时较为明显，快速上下滚动时能看到闪烁。
3. 我使用 position: sticky; 实现，通过 JS 计算 屏幕高度 - 左边栏高度 得到 top 的值，快速滚动时没有闪烁。

效果

由于谷歌最近对 Chrome 地址栏改来改去，不同的版本需要对应不同的方法。

Chrome 版本＜78

在浏览器输入 chrome://flags/ 回车，找到 Omnibox UI Hide Steady-State URL Scheme and Trivial Subdomains，设置为 Disabled，然后重启浏览器。

Chrome 版本＝78

谷歌从 flag 页面砍掉了这个设置，但 flag 还是存在的。

打开 chrome://flags/，78版本已经找不到 omnibox-ui-hide-steady-state-url-scheme 和 omnibox-ui-hide-steady-state-url-trivial-subdomains 了。
按 F12 打开 Console，执行以下命令，然后重启 Chrome。

1
2
3
4
5
6
7

[
  'omnibox-ui-hide-steady-state-url-path-query-and-ref',
  'omnibox-ui-hide-steady-state-url-scheme',
  'omnibox-ui-hide-steady-state-url-trivial-subdomains'
].forEach((f) => {
  chrome.send('enableExperimentalFeature', [`${f}@2`, 'true']);
})

代码中 @2 对应的是 Disabled。@0 和 @1 分别对应 Default 和 Enabled。

测试有效的版本：78.0.3904.97
方法来源：ysc3839（https://www.v2ex.com/t/613776）

Chrome 版本＞78

谷歌彻底砍掉了这两个 flag……

现在安装插件是唯一方法，如果你能够访问 Chrome 网上应用店的话，安装这个插件，无需配置即可显示完整地址：
https://chrome.google.com/webstore/detail/suspicious-site-reporter/jknemblkbdhdcpllfgbfekkdciegfboi
方法来源：MaiKuraki（https://www.v2ex.com/t/588136）

如果是 Windows 系统，也可以换用 Chromium 内核的 Edge 浏览器，我已经完全爱上 Edge 啦！

Chromium

据IT之家报导，谷歌决定“使URL更易于阅读和理解，并消除对可注册域的干扰”，在Chromium Gerrit中新提交了一个flag标志，未来可在 chrome://flags#context-menu-show-full-urls 中设置开启，届时Chrome浏览器地址栏便可显示完整URL。

嗯，砍了再加回来，绝世好活！

我并没有下载 Chromium 测试这个 flag，未来推出有这个 flag 的正式版后，我可能会会更新这篇博文。

自动部署的 Magento 附带的 MariaDB 镜像第一次启动能够成功，但 stop 之后就无法再次启动。启动命令 docker-compose up -d，重启命令 docker-compose restart，

关键 log：

1
2
3

InnoDB: Assertion failure in file /bitnami/blacksmith-sandox/mariadb-10.2.28/storage/innobase/dict/dict0dict.cc line 1467
InnoDB: Failing assertion: table->can_be_evicted
[ERROR] mysqld got signal 6 ;

详细的 stdout 如下——

准备软件

1. VirtualBox 5.2.8
2. Vagrant 2.0.1

官网下载安装，比我的新即可，安装路径自选。

创建 Vagrantfile

新建文件夹并创建 Vagrantfile 放在里面，我配置的环境是 Ubuntu 16.04，内存8G，可以换成自己熟悉的环境。
映射端口80，443（Web），3306（数据库），9200，9300（搜索引擎）。

1
2
3
4
5
6
7
8
9
10
11

Vagrant.configure("2") do |config|
  config.vm.box = "ubuntu/xenial64"
  config.vm.network "forwarded_port", guest: 80, host: 80
  config.vm.network "forwarded_port", guest: 443, host: 443
  config.vm.network "forwarded_port", guest: 3306, host: 3306
  config.vm.network "forwarded_port", guest: 9200, host: 9200
  config.vm.network "forwarded_port", guest: 9300, host: 9300
  config.vm.provider "virtualbox" do |vb|
    vb.memory = "8192"
  end
end