首页 🎉 极客,🧐 文章

本文最后更新于 2021 年 02 月 11 日,已超过 123 天没更新!内容可能已失效,请自行测试 ~

全文摘自

halo 博客深度定制与美化教程

美化有序标签

示例及效果如下:

  1. 这里是第一个标签
  2. 这里是第二个标签
  3. 这里是第三个标签

这个样式在我之前的 Hexo 博客中就已经使用了,我们在 md 中书写的有序标签,会在渲染成 html 时自动转换为 <ol><li></li></ol> 标签,所以只需要在上述 _core/style.less 中增加如下样式,或者直接在 main.css 中增加如下代码:

ol{
  list-style: none;  /* 隐藏原来的 1. 2. 等序号样式 */
  counter-reset: ol-li;
}

ol li:before {
    display: block;
    float: left;
    width: 19px;   /* 宽度和高度需要根据自己的字体大小进行修正 */
    height: 19px;
    line-height: 19px;
    margin: 4px 12px 0 0;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    background-color: #49b1f5;
    border-radius: 50%;
    text-align: center;
    content: counter(ol-li);
    counter-increment: ol-li;
    transition: all .5s;
}

请注意,上面的修改作用于博客所有页面的有序标签,而一些其它有序标签的使用会受到该样式的影响,因此正常情况下,需要对该样式限定范围,比如限制在文章页面中生效。以 HanShan 主题为例,文章的 HTML 内容渲染都是在一个 class 或者 id 为 post-content 的 DOM 元素中的,如以下所示:

<div class="post-content" id="post-content">
    <!-- 文章的内容 -->
    ${post.content}
</div>

因此你需要根据你的主题找到这个父 DOM 元素,然后增加该 class 作用域限制,以下修改内容均同理,不再赘述。

.post-ctx ol{
  ...
}

.post-ctx ol li:before {
    display: block;
    ...
}

然后通过编译 less 并压缩 main.css 得到 main.min.css 后在页面中查看样式效果。更进一步的,还可以设置鼠标放置在有序标签文本上旋转,继续增加如下样式:

ol li:hover::before{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
}

美化分隔符 hr 样式

效果可以在本站点任意分割线处看到,鼠标放置后会滑动。
_core/style.less 或者 main.css 中增加样式如下,注意需要引入 FontAwesome v4.7.0 版本的 CSS 文件。HanShan 主题已经默认引入了,可以直接使用。引入链接如下:

<link type='text/css' rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" media='all'/>
/* 美化 hr 样式 */
hr {
    position: relative;
    margin: 2rem auto;
    width: calc(100% - 4px);
    border: 2px dashed #a4d8fa;
    background: #fff;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

hr:before {
    position: absolute;
    top: -10px;
    left: 5%;
    z-index: 1;
    color: #49b1f5;
    content: '\f0c4';
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 20px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

hr:hover::before{
    left: 95%;
}

常用的 note 标签

这个是我从 Hexo 博客中带过来的,效果如下:

这里是 info 标签样式
这里是不带符号的 info 标签样式
这里是 primary 标签样式
这里是不带符号的 primary 标签样式
这里是 warning 标签样式
这里是不带符号的 warning 标签样式
这里是 danger 标签样式
这里是不带符号的 danger 标签样式

仍然在 _core/style.less 或者 main.css 中添加样式如下,注意需要引入 FontAwesome v4.7.0 版本的 CSS 文件才会使图标生效。HanShan 主题已经默认引入了,可以直接使用。引入链接如下:

<link type='text/css' rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" media='all'/>
/* note 公共样式 */
.note {
    position: relative;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    border: initial;
    border-left: 3px solid #eee;
    background-color: #f9f9f9;
    border-radius: 3px;
    font-size: var(--content-font-size);
}

.note:not(.no-icon):before {
    position: absolute;
    font-family: FontAwesome;
    font-size: larger;
    top: 11px;
    left: 15px;
}

.note:not(.no-icon) {
    padding-left: 45px;
}

.note.info {
    background-color: #eef7fa;
    border-left-color: #428bca;
}

.note.info:not(.no-icon):before {
    content: "\f05a";
    color: #428bca;
}

.note.warning {
    background-color: #fdf8ea;
    border-left-color: #f0ad4e;
}

.note.warning:not(.no-icon):before {
    content: "\f06a";
    color: #f0ad4e;
}

.note.primary {
    background-color: #f5f0fa;
    border-left-color: #6f42c1;
}

.note.primary:not(.no-icon):before {
    content: "\f055";
    color: #6f42c1;
}

.note.danger {
    background-color: #fcf1f2;
    border-left-color: #d9534f;
}

.note.danger:not(.no-icon):before {
    content: "\f056";
    color: #d9534f;
}

在写 md 时使用方式如下,以 html 标签方式引入:

<div class="note info">这里是 info 标签样式</div>

<div class="note info no-icon">这里是不带符号的 info 标签样式</div>

<div class="note primary">这里是 primary 标签样式</div>

<div class="note primary no-icon">这里是不带符号的 primary 标签样式</div>

<div class="note warning">这里是 warning 标签样式</div>

<div class="note warning no-icon">这里是不带符号的 warning 标签样式</div>

<div class="note danger">这里是 danger 标签样式</div>

<div class="note danger no-icon">这里是不带符号的 danger 标签样式</div>

渐变 note 标签样式

默认情况

success

error

warning

注意该样式需要引入 FontAwesome v5.0+ 以上的 CSS 文件,否则图标不会展示。
引入 CSS 链接如下:

<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet">

然后在 main.css 中添加如下样式:

.tip {
    position: relative;
    color: #fff;
    background: #20a0ff;
    background: -webkit-gradient(linear,left top,right top,from(#20a0ff),to(#20b8ff));
    background: -webkit-linear-gradient(left,#20a0ff,#20b8ff);
    background: linear-gradient(90deg,#20a0ff,#20b8ff);
    padding: 6px 20px;
    border-radius: 10px;
    -webkit-box-shadow: 0 3px 5px rgba(32,160,255,.5);
    box-shadow: 0 3px 5px rgba(32,160,255,.5);
    margin-bottom: 20px
}

.tip p {
    margin: 5px 0!important
}

.tip:before {
    background: #20a0ff;
    background: -webkit-gradient(linear,left bottom,left top,from(#0092ff),to(#20b8ff));
    background: -webkit-linear-gradient(bottom,#0092ff,#20b8ff);
    background: linear-gradient(0deg,#0092ff,#20b8ff);
    border-radius: 50%;
    color: #fff;
    content: "\f129";
    font-size: 12px;
    position: absolute;
    width: 24px;
    height: 24px;
    line-height: 24.5px;
    left: -12px;
    top: -12px;
    -webkit-box-shadow: 0 0 0 2.5px #fff;
    box-shadow: 0 0 0 2.5px #fff;
    font-weight: 600;
    font-family: "Font Awesome 5 Free";
    text-align: center
}

.btn,.getit a {
    position: relative
}

.well .tip:before {
    -webkit-box-shadow: 0 0 0 2.5px #f7f8f9;
    box-shadow: 0 0 0 2.5px #f7f8f9
}

.tip ol {
    margin: 0
}

.tip.success {
    background: #61be33;
    background: -webkit-gradient(linear,left top,right top,from(#61be33),to(#8fce44));
    background: -webkit-linear-gradient(left,#61be33,#8fce44);
    background: linear-gradient(90deg,#61be33,#8fce44);
    text-shadow: 0 -1px #61be33;
    -webkit-box-shadow: 0 3px 5px rgba(104,195,59,.5);
    box-shadow: 0 3px 5px rgba(104,195,59,.5)
}

.tip.success:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#52bb1d),to(#95d34b));
    background: -webkit-linear-gradient(bottom,#52bb1d,#95d34b);
    background: linear-gradient(0deg,#52bb1d,#95d34b);
    content: "\f00c";
    text-shadow: 0 -1px #61be33
}

.tip.warning {
    background: #ff953f;
    background: -webkit-gradient(linear,left top,right top,from(#ff953f),to(#ffb449));
    background: -webkit-linear-gradient(left,#ff953f,#ffb449);
    background: linear-gradient(90deg,#ff953f,#ffb449);
    text-shadow: 0 -1px #ff953f;
    -webkit-box-shadow: 0 3px 5px rgba(255,154,73,.5);
    box-shadow: 0 3px 5px rgba(255,154,73,.5)
}

.tip.warning:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#ff8f35),to(#ffc149));
    background: -webkit-linear-gradient(bottom,#ff8f35,#ffc149);
    background: linear-gradient(0deg,#ff8f35,#ffc149);
    content: "\f12a";
    text-shadow: 0 -1px #ff953f
}

.tip.error {
    background: #ff4949;
    background: -webkit-gradient(linear,left top,right top,from(#ff4949),to(#ff7849));
    background: -webkit-linear-gradient(left,#ff4949,#ff7849);
    background: linear-gradient(90deg,#ff4949,#ff7849);
    text-shadow: 0 -1px #ff4949;
    -webkit-box-shadow: 0 3px 5px rgba(255,73,73,.5);
    box-shadow: 0 3px 5px rgba(255,73,73,.5)
}

.tip.error:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#ff3838),to(#ff7849));
    background: -webkit-linear-gradient(bottom,#ff3838,#ff7849);
    background: linear-gradient(0deg,#ff3838,#ff7849);
    content: "\f00d";
    text-shadow: 0 -1px #ff4949
}

/*夜间适配*/
.night .tip {
    filter: brightness(0.7);
}

/* snote夜间模式 */
.night .tip{
  color: #4c4948;
}

同上面所有外挂样式一下,均使用 HTML 标签的方式在 md 中写入:

<div class='tip'><p>默认情况<p></div>
<div class='tip success'><p>success<p></div>
<div class='tip error'><p>error<p></div>
<div class='tip warning'><p>warning<p></div>



文章评论

    svg5 访客ChromeWindows
    5小时 前   回复

    免费试用快递单号 免费试用空包单号网试用www.uudanhaowang.com

    ae3 访客ChromeWindows
    4天 前   回复

    快递代发,礼品代发快递单号上88单号网www.88danhw.com

    zhongyan FAN 访客ChromeWindows
    2021-03-31 8:37   回复

    我有个问题 分页效果怎么实现的呢 page1 page2... 代替了原先的加载更多

      Sanerio 站长ChromeWindows
      2021-04-1 16:53   回复

      如果你跟我用的是同一个主题的话,在后台设置有个Ajax文章列表加载的选项,把它给关掉就可以实现了。

    j65y 访客ChromeWindows
    2021-03-28 12:20   回复

    98礼品网专业ab单代发礼品平台,提供24小时自助下单,真实不降权!http://www.98lp.cn

    hget 访客ChromeWindows
    2021-03-5 14:52   回复

    七号礼品网针对淘宝、拼多多、京东等平台商家打造爆款提供快递单号及礼品代发服务。http://www.7lp.cn

目录