小竹's blog

永远不要停止思考

0%

最近一直忙工作上的事,对提高自身能力的事有点落下了,趁着今天把之前思考的一些问题都给解决了,也顺手给自己的VueBlog把vue和webpack都升级到最新的beta版本,然后遇到了很多坑,今天就把坑都记录一下,免的以后忘了。

VueBlog目前使用的是webpack5 + vue3 + vue-router-next + typescript构建,目的在于替换当前的hexo站点,同样也是一个静态博客生成器,不过和hexo的定位不同,我使用的是单页面设计,而不是给每个页面生成对应的html文件,所以对SEO不友好,以后再想办法吧。

Read more »

建造者模式就是指将类的构造和其表示分离开来,调用者可以通过不同的构建过程创造出不同表示的对象。主要解决在软件系统中,有时候面临着”一个复杂对象”的创建工作,由于需求的变化,这个复杂对象的某些部分经常面临着剧烈的变化,一些基本部件不会变。所以需要将变与不变分离。与抽象工厂的区别:在建造者模式里,有个指导者(Director),由指导者来管理建造者,用户是与指导者联系的,指导者联系建造者最后得到产品。即建造者模式可以强制实行一种分步骤进行的建造过程。

Read more »

上一次写年终总结还是18年回家的动车上,可惜写了一半没发表,觉得一年了没有什么能够回想起来的,就又删除了。今年不同了,今年有好多想说的。

Read more »

我最早接触到CSS中的伪元素是在一次写背景模糊的时候,CSS中的blur会模糊下面所有的元素,但是可以通过伪元素在before中先模糊,这样下层是没有任何元素的,自然也不会有元素被模糊。

伪元素就如同它的名字一样,是假的元素,只是CSS引擎在排版的时候创建出来的,在DOM树中是不存在的,所以javascript是没办法操作伪元素的。伪元素分为before和after,可以在元素的前面或者后面创建一个假的元素,伪元素选择器的标志符号是::

  1. div::before 在div元素的前面创建一个元素,配合content属性一起使用。
  2. div::after 在div元素的后面创建一个元素,配合content属性一起使用。

1657

使用伪元素选择器需要注意一点的是,必须使用content属性,否则将不起任何作用。

伪元素选择器生效以后,可以在DOM中看到::before或者::after,这里提供一个例子。

html部分:

<body>
<div>
Text
</div>
</body>

css部分:

div::before {
content: "This is before Text, ";
}

div::after {
content: ", This is after Text.";
}

此时页面上会看到输出这么一句话,This is before Text, Text , This is after Text.,并且使用鼠标只能选择到最中间的Text文本。

1657

代码可以点击这里查看。

今天写这篇文章呢,是因为今天我在实现hexo的Next主题,看到它在列表中使用after创建了一个小圆点,并且我遇到了一个问题,所以写这篇文章记录一下。

Next用的是浮动布局来实现的,而我决定flex一把梭,整体布局是垂直的flex,首页、分类等列表内部是用水平的inline-flex实现的,最左边是图标,来自fortawesome,中间的文本使用span包裹一下,实现左对齐,然后通过伪元素在最右边创建一个小圆点,设置a元素的宽度为100%,就可以实现圆点在最右边。

坑就是在这里遇到的,如果a元素的宽度设置为100%,伪元素创建的小圆点就不能完全显示,少1像素或者多1像素就可以完全显示。最终的解决办法是给小圆点的周围增加了1像素的padding解决了,但是原因位置,谁看到这篇文章并且恰好知道原因的,还请帮忙评论回复一下。

<div id="site-nav">
<ul>
<li v-for="item in items" v-bind:key="item.title">
<a v-bind:href="item.link">
<span id="menu-left" v-bind:class="item.class"></span>
<span id="menu-text">
{{ item.title }}
</span>
</a>
</li>
</ul>
</div>
#site-nav {
background: white;
padding: 20px 0;
}

ul {
margin: 0;
padding: 0 0;
}

#site-nav li {
list-style-type: none;
}

#site-nav li a {
padding: 5px 0px;
text-align: left;
line-height: inherit;
transition-property: background-color;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
display: flex;
justify-content: space-between;
align-items: center;
text-decoration: none;
font-size: 13px;
border-bottom: 1px solid transparent;
color: #555;
}

#site-nav li a:hover {
background: #f9f9f9;
}

#menu-left {
align-content: center;
margin-left: 10px;
}

#menu-text {
width: 100%;
margin-left: 10px;
}

#site-nav li a::after {
content: ' ';
background: #bbb;
width: 6px;
height: 6px;
border-radius: 50%;
margin: 0 10px 0 0;
min-width: 6px;
min-height: 6px;
max-height: 6px;
max-width: 6px;
display: block;
box-sizing: border-box;
}

但我提取了基本结构和css,demo是能够正常显示小圆点的,但是自己的Vue却不能正常显示,后来发现是display写成块级元素用的flex了,改成inline-flex就能正常显示了,但是在调整宽度的时候,就发现了上面的问题,它又不正常显示了,实在解决不了了,就用padding处理了。

参考资料: 千古壹号