效果：

源码：

1
2
3
4

<div class="chip">
  <span class="name">Hover me!</span>
  <span class="close-bth">X</span>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.chip {
  display: flex;
  width: fit-content;
  font-size: 20px;
  text-align: center;
  background-color: #ccc;
}

.chip .name { width: 120px; }
.chip .close-bth { width: 30px; }

.chip .name:hover,
.chip .name:hover + .close-bth,
.chip .close-bth:hover {
  color: white;
  background-color: #888;
}

CodePen link:
https://codepen.io/iMaeGoo/pen/jRqYRJ

hmmmm…这种实现也没什么难的，其实是想试试在博文中插入HTML啦。

点击一个按钮后需要弹出一个对话气泡，气泡内有各种设置项，点击外侧可以退出。

现在的效果：

在线测试：https://codepen.io/iMaeGoo/pen/KYVRGL

由于公司不能安装梯子，所以不能访问谷歌商店，平时频繁地要访问国外的AngularJS网站，比如AgGrid，AngularJS Material，AngularJS官网等，很多用了Google的CDN源，页面就无法正常加载。

一开始的思路是改host文件，但是我们没有Google CDN的证书，会造成证书错误。

参考并优化了：https://github.com/justjavac/ReplaceGoogleCDN ，动手写了一个Chrome插件，对所有特定请求重定向，解决痛点！

I’m using AngularJS Material v1.1.1.
I’m finding a way to use simple <md-chip> without <md-chips>.

Here is an easy way in Vue Material: https://codesandbox.io/s/lyoqv4l0z?module=App.vue

1

<md-chip class="md-primary" md-deletable>Deletable</md-chip>

But I can not find the similiar way in AngularJS Material document.
https://material.angularjs.org/latest/api/directive/mdChip

Angular version: 1.6.6
在HTML中想使用$rootScope中的变量时发现取不到，加上$root之后解决。

今天发现腾讯云上有免费的CDN流量，就尝试给自己的Github Page用上，配置好后却一直301重定向，毕竟Github服务器不是自己的，配置和log都看不了，那为什么一直301呢？

给腾讯云CDN提交工单，客服查了一下（不到10分钟），发现是HTTPS的问题。

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.