新功能！mdnice 制作包含小姐姐的獨立樣式塊

1 問題

使用 mdnice 排版時發(fā)現(xiàn)需要獨立的樣式塊怎么辦？

比如：

再比如：

mdnice 雖然排版很整齊，但是這種特定的塊設計也做不到呀~~

今天就給大家分享解決方案

2 多級引用解決樣式塊設計

引用的格式是在符號 > 后面書寫文字，文字的內容可以包含鏈接、圖片、粗體和斜體等。

當使用多個 > 符號時，就會變成多級引用，因此可以利用多級引用來做樣式塊設計

2.1 一級引用

一級引用是最常用的，目前所有主題都有默認實現(xiàn)

一級引用文本如下：

> ### 一級引用
>
> 讀一本好書，就是在和高尚的人談話。**——歌德**
>
> [Markdown Nice最全功能介紹](https://mp.weixin.qq.com/s/lM808MxUu6tp8zU8SBu3sg)
>
> ![這里寫圖片描述](https://my-wechat.mdnice.com/wechat.jpg)

效果如下：

一級引用

讀一本好書，就是在和高尚的人談話。——歌德

Markdown Nice 最全功能介紹

2.2 二級引用

二級引用文本如下：

>> 掃碼即可進入小姐姐個人主頁
>>
>> **免費申請認識小姐姐**
>>
>>![](https://gitee.com/guanpengchn/picture/raw/master/2020-9-24/1600956162799-image.png =80%x)
>>
>> 也可以直接聯(lián)系我咨詢詳情

二級引用自定義樣式：

#nice?.multiquote-2?{
??box-shadow:?none;
??border-left:?none;
}

#nice?.multiquote-2?blockquote?{
??padding:?20px?30px;
??background-color:rgb(223,?241,?238);
??transform:?rotateZ(4deg);
??border:?1px?dashed?rgba(0,0,0,0.5);
}

#nice?.multiquote-2?blockquote?p?{
??color:?rgb(7,?107,?115);
??font-size:14px;
??text-align:?center;
??font-weight:?bold;
??padding:?5px;
}

#nice?.multiquote-2?blockquote?strong?{
??color:?rgb(255,?79,?121);
}

效果如下：

掃碼即可進入小姐姐個人主頁

免費申請認識小姐姐

也可以直接聯(lián)系我咨詢詳情

2.3 三級引用

三級引用與二級引用同理，只要愿意，無限增加 > 可以制造 n 級引用

三級引用文本如下：

>>> ### Ta的秘密
>>>
>>> ![](https://gitee.com/guanpengchn/picture/raw/master/2020-9-24/1600956295010-image.png)
>>>
>>> **興趣愛好**
>>>
>>> 喜歡閱讀、旅行、健身

三級引用自定義樣式：

#nice?.multiquote-3?{
??border-left:?none;
??padding:?0;
}

#nice?.multiquote-3?blockquote?{
??border-left:?none;
??padding:?0;
}

#nice?.multiquote-3?blockquote?blockquote?{
??border:?1px?dashed?rgba(0,0,0,0.5);
??padding:?0?20px;
}

#nice?.multiquote-3?blockquote?blockquote?h3?{
??background:?pink;
??color:white;
}

#nice?.multiquote-3?blockquote?blockquote?strong?{
??color:?rgb(255,?79,?121)
}

效果如下：

Ta 的秘密

興趣愛好

喜歡閱讀、旅行、健身

3 小結

利用多級引用可以非常好的解決樣式塊設計問題，multiquote-1、multiquote-2、multiquote-3分別代表一級引用、二級引用、三級引用 css 類選擇器，設計時可以充分利用它們

該能力已經發(fā)布到線上，可能根據(jù)實際情況會調整類選擇器的位置，未來會發(fā)布更多優(yōu)質主題供大家選擇