VuePress默认主题改造过程的前端学习与记录

最新推荐文章于 2024-03-31 09:46:51 发布

Nihuanirre

最新推荐文章于 2024-03-31 09:46:51 发布

阅读量598

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/nihuanirre/article/details/124196822

版权

文章内容中奇怪的margin、padding设置是为了锚点跳转时标题正好能够显示出来：
```
{$contentClass}:not(.custom) > &
	
	margin-top: -3.65rem;
 	padding-top: 4.75rem;
```

同时第一个标题的负高度设置为0，使高度正常：margin-top 0

隐含的字体大小会导致元素占用多余的空间（在高度上）

render中style的写法：

h('span', {style: 'margin-left: 0.4rem'}, text)
h('span', {style: {margin: '0.4rem'}}, text) // 无法写margin-left

三角箭头的代码写法

.arrow
 display inline-block
 width 0
 height 0
 &.up
   border-left 4px solid transparent
   border-right 4px solid transparent
   border-bottom 6px solid $arrowBgColor
 &.down
   border-left 4px solid transparent
   border-right 4px solid transparent
   border-top 6px solid $arrowBgColor
 &.right
   border-top 4px solid transparent
   border-bottom 4px solid transparent
   border-left 6px solid $arrowBgColor
 &.left
   border-top 4px solid transparent
   border-bottom 4px solid transparent
   border-right 6px solid $arrowBgColor

解决刷新后地址含锚点却不跳转问题
```
// mounted
if (window.location.hash) {
      window.location=window.location.href
}
```
在有锚点页面（即地址包含#）不会出现重复刷新问题，否则会有此问题
（所以使用window.location.hash获取地址#及之后的内容进行判断）（VuePress中更换锚点不会执行mounted，应该是因为页面的变换方式不是刷新）
【原因：每次进页面都会触发一次刷新，刷新之后的页面继续触发这个刷新】
【window.location = window.location.pathname + '#api'可更改地址，但需再刷新一次后才会跳转，需结合其他代码（window.location.reload()）】
render的简单使用
超出区域进行省略：（不能直接和flex合用）
```
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
```
给标签设置:title的属性来控制hover时显示的文本
黄色的为边框
display设置为flex可以消除一些奇怪的间隔
页面内锚点跳转，即href="#xxxx"，href="#"会返回顶部，href=""会重新加载页面
./表示当前目录下（直接写文件名依旧可以成功找到当前目录下的文件）；
../ 表示父级目录下；
@/ 是webpack设置的路径别名（有待学习）
css覆盖规则：
多class应用同一个元素时，后声明的class规则将覆盖先声明的（浏览器解析样式时是按规则在样式表中的声明顺序，而非添加到元素上的顺序）
CSS3特有选择器：
E > F：只选择一代后代元素
E F：选择所有后代元素
E+F：HTML中紧随E的F元素，中间有非F的元素就会断开

element>element div>p 选择父元素为 <div> 元素的所有 <p> 元素。

&：指在前面的选择器上继续添加内容
```
		.nav-item
		    &:first-child
```
*:first-child
:after（css2） & ::after（css3）

nth-child() 选择器（伪类）（可结合v-for使用）：
1）first-child——第一个标签
2）last-child——最后一个标签
3）nth-child(3)——第3个标签
4）nth-child(2n)——偶数标签
5）nth-child(2n-1)——奇数标签
6）nth-child(n+3)——从第3个开始到最后
7）nth-child(-n+3)——从0到3，即小于3的标签
8）nth-last-child(3)——倒数第3个标签

群组选择器 A , B
后代选择器 A B（选择A所有的后代B元素）
子元素选择器 A > B（选择A的一代B元素，css3特有）
相邻兄弟选择器 A + B（设置的是紧跟在A元素后的B元素，指定元素的下一个元素；设置列表中的第二个及后面的li，但第一个列表项不受影响、相同父元素、紧跟在其后）
兄弟选择器 A ~ B（A之后的所有B元素，不一定要紧跟在A后面，相同父元素）
```
<p>快乐生活</p>
<ul>
　　<li>生活</li>
　　<li>生活</li>
　　<li>生活</li>
</ul>
```
E~F：所有的兄弟？
属性名可用引号括起来
重写某个属性同时会影响:hover中的样式设置
config.js中sidebar配置更新后需要重新dev，md内容修改无需
config.js设置base，图片资源withbase，背景图片相对路径，…会处理成base64，有利
watch中函数名直接用数据名即可，无需this.
created可取出data
用methods修改data，传出的props也会改变