Build up pages without being polished

首先有一个简单的方法,在某个页面的front-matter加上layout: false即可

Steps

  1. 新建页面或文章
  2. 跳过渲染
  3. 添加并修改html文件

新建页面或文章

1
2
3
4
//Post
$ hexo new post "Post Name"
//Page
$ hexo new page Page Name

跳过渲染

在博客根目录的配置文件_config.yml文件里,跳过渲染

找到 skip_render:

1
2
3
4
5
6
7
8
9
# 跳过文件夹下所有文件
skip_render:
- "filename/*"
# 跳过文件夹下的子文件夹
skip_render:
- "filename/subfilename/*"
# 跳过文件夹下所有文件夹和文件
skip_render:
- "filename/**"

添加并修改html文件

最后,处理css、js文件

  • 我们都知道,hexo部署的是静态文件,所有文章的md文件会被渲染成html文件(hexo g生成),hexo会帮我们把所有的css、js文件都加到文章里,我们之前跳过了渲染(第二步),所以就需要手动把css、js整合到html文件里,一般我们的代码是这种结构

    文件结构1

    文件结构2

  • 下面分为两部分

  • css

    找到index.html文件里的语句,例如

    1
    2
    <link rel="stylesheet" href="css/xxx.css">
    <!-- css目录下的xxx.css文件 -->

    直接在css文件夹里面找到对应的文件xxx.css,复制文件内容,把上面的代码改写为

    1
    <style> css代码内容 </style>
  • js

    找到index.html文件里的语句,例如

    1
    <script src="js/xxx.js"></script>

    直接在js文件夹里面找到对应的xxx.js,复制文件内容,把上面的代码改为

    1
    <script> js代码内容 </script>
  • 重新部署即可

From:

https://blog.csdn.net/qq_40922859/article/details/100877777

示例

Proof That Tony Stark Has A Heart

  1. hexo new page IronMan

  2. 跳过渲染

    1
    2
    skip_render:
    - "IronMan/**"
  3. 添加并修改html文件

    源码来自Here

    Author:阿阳热爱前端

    并按上述方法整合css或js文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML+CSS 钢铁侠心脏反应堆</title>
    <style>
    * {
    /* 初始化 清除页面元素的内外边距 */
    padding: 0;
    margin: 0;
    }
    body {
    /* 弹性布局 让页面元素垂直+水平居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 让页面始终占浏览器可视区域高度 */
    height: 100vh;
    /* 背景颜色 径向渐变 */
    background: radial-gradient(#353c44, #222931);
    }
    /* 定义一下几个盒子相同的部分 */
    .circle {
    /* 圆形 */
    border-radius: 50%;
    }
    .center {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 元素走自身高度/宽度 的一半 */
    transform: translate(-50%, -50%);
    }
    .container {
    /* 相对定位 */
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid rgb(18, 20, 20);
    background-color: #384c50;
    /* 盒子阴影 默认是外部阴影 写了inset 就是内部阴影 */
    box-shadow: 0 0 32px 8px rgb(18, 20, 20), 0 0 4px 1px rgb(18, 20, 20) inset;
    }
    .container .box1 {
    width: 238px;
    height: 238px;
    background-color: rgb(22, 26, 27);
    box-shadow: 0 0 4px 1px #52fefe;
    }
    .container .box2 {
    width: 220px;
    height: 220px;
    background-color: #fff;
    box-shadow: 0 0 5px 1px #52fefe, 0 0 5px 4px #52fefe inset;
    }
    .container .box3 {
    width: 180px;
    height: 180px;
    background-color: #073c4b;
    box-shadow: 0 0 5px 4px #52fefe, 0 0 6px 2px #52fefe inset;
    }
    .container .box4 {
    width: 120px;
    height: 120px;
    border: 1px solid #52fefe;
    background-color: #fff;
    box-shadow: 0 0 2px 1px #52fefe, 0 0 10px 5px #52fefe inset;
    }
    .container .box5 {
    width: 70px;
    height: 70px;
    border: 5px solid #1b4e5f;
    box-shadow: 0 0 7px 5px #52fefe, 0 0 10px 10px #52fefe inset;
    }
    .container .box6 {
    position: relative;
    width: 100%;
    height: 100%;
    /* 动画 名称 时长 linear 是匀速运动 infinite是无限次播放 */
    animation: rotate 3s linear infinite;
    }
    .container .box6 .coil {
    position: absolute;
    width: 30px;
    height: 20px;
    /* calc方法自动计算位移距离 */
    top: calc(50% - 110px);
    left: calc(50% - 15px);
    background-color: #073c4b;
    box-shadow: 0 0 5px #52fefe inset;
    /* calc方法自动计算数值 var函数调用了我们刚刚给元素定义的--i属性值 然后分别乘以45度 算出各自的度数 */
    transform: rotate(calc(var(--i) * 45deg));
    /* 这个是旋转的中心 */
    transform-origin: center 110px;
    }
    /* 定义一下旋转动画 */
    @keyframes rotate {
    0% {
    transform: rotate(0);
    }
    100% {
    transform: rotate(360deg);
    }
    }
    </style>
    </head>
    <body>
    <div class="container circle">
    <div class="box1 circle center"></div>
    <div class="box2 circle center"></div>
    <div class="box3 circle center"></div>
    <div class="box4 circle center"></div>
    <div class="box5 circle center"></div>
    <div class="box6 circle">
    <div class="coil" style="--i: 0"></div>
    <div class="coil" style="--i: 1"></div>
    <div class="coil" style="--i: 2"></div>
    <div class="coil" style="--i: 3"></div>
    <div class="coil" style="--i: 4"></div>
    <div class="coil" style="--i: 5"></div>
    <div class="coil" style="--i: 6"></div>
    <div class="coil" style="--i: 7"></div>
    </div>
    </div>
    </body>
    </html>
  4. 重新部署即可