CNBLOG 个性化笔记（1）——认识结构、live2d

最近疫情在家闲得无聊，开个博客也算是锻炼一下自己做网页设计的能力吧。开通好博客，第一反应就是被这落后的界面给丑到了（sorry）。那么正好趁着自己有时间，就来自己做一个好看的网页吧！

初始概览

首先要给刚拿到手还空荡荡的博客加点内容，方便后续布局优化。点击导航栏里的管理进入博客后台管理界面，点击随笔（文章不是文章而是随笔就离谱），先贴上我在GitHub上写好的一篇文章，勾选发布（一定要选，不然不会在首页中显示）并确定。

同样点击管理进入后台界面，可以找到自定义博客界面的区域，包括界面定制css、侧边栏公告、页首和页尾部分。emmm为什么不直接让我们上传自己做好的网页文件啊？算了，如何能适应上司的无理要求也是成为一名优秀码农的必经之路。在设置中随便选一个主题（我选的是simplememory），在定制css样式框下勾上禁用模板css，这样没有样式，模拟器默认一行一个元素排列下来。得到的博客初始效果如下：

元素布局结构

在自己的博客界面（不是后台）打开浏览器的控制台（比如chrome按F12），可以查到整个网页body的主要元素布局：

|--#home                                  ----自定义的最大容器
  |--#header                              ----页头
    |--#blogTilte                         ----标题
      |--h1                               ----主标题
      |--h2                               ----副标题
    |--#navigator                         ----导航栏
      |--#navList                         ----导航列表
        |--li                             ----按键
      |--.blogStats                        ----博文内容计数
  |--#main                                ----内容
    |--#mainContent                       ----主题内容容器
      |--.forFlow                         ----内容流
        |--.day                           ----一整天的内容容器
          |--.dayTitle                    ----日期
          |--.postTitle                   ----文章标题
          |--.postCon                     ----内容摘要
          |--.clear                       ----博客内隔层
          |--.postDesc                    ----博客描述
          |--.postSeparator               ----博客间的隔层
          |--.topicListFooter             ----博客页脚容器
    |--#sideBar                           ----侧边栏容器
      |--#sideBarMain                     ----侧边栏主题容器
        |--#sidebar_news                  ----侧边信息
          |--.catListTitle                ----公告标题
          |--#blog-news                   ----信息容器
            |--#profile_block             ----个人信息
        |--#blog-calendar                 ----日历容器
          |--#blogCalendar                ----日历本体表格
        |--#leftcontentcontainer          ----其他内容容器
          |--#blog-sidecolumn             ----内容列表容器
            |--#sidebar_search            ----搜索栏容器（有两个同名的嵌套）
              |--#sidebar_search_box      ----搜索盒
                |--#widget_my_zzk         ----站内搜索
                |--#widget_my_google      ----谷歌搜索
            |--#sidebar_shortcut          ----常用链接外容器
              |--.catListLine             ----常用链接内容器
                |--.catListLine>ul        ----常用链接列表
                  |--.catListLine>ul>li   ----单个常用连接
            |--#sidebar_toptags           ----我的标签（暂未显示）
            |--#sidebar_categories        ----随笔档案
            |--#sidebar_recentcomments    ----最近评论（暂未显示）
            |--#sidebar_topviewedposts    ----阅读排行（暂未显示）
            |--#sidebar_topcommentedposts ----评论排行
            |--#sidebar_topdiggedposts    ----推荐排行（暂未显示）
  |--.clear                               ----分隔
  |--#footer                              ----页尾
|
|
|

脚本尝试——加入live2d

在正式开时重做布局之前，先尝试给网页添加脚本script。我第一个想到的就是各大博客上面生动可爱的live2d形象，他们会追随你鼠标的运动轨迹，甚至还有点击触发事件。

上网查询得知需要在侧边栏脚本中插入以下代码。其中，jsonPath填入的是形象所在的地址，我选的是一只黑猫。(插个题外话，unpkg是一个快速提供包、文件的前端常用cdn,内容分发网络）

在display中可以调整live2d的位置、宽高和详细的坐标偏移值（hoffset是水平，voffset是垂直）。

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

<script>
    L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json",
            "scale": 1
        },
        "display": {
            "position": "left",
            "width": 150,
            "height": 300,
            "hOffset": 0,
            "vOffset": -160
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });
</script>

调整参数后得到如下效果。猫猫歪头笑真的好可爱啊！！！！！

其他可选的模型：
黑猫：https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json
萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
白猫：https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json
狗狗：https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
小可爱：https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json
小可爱：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json

这次博客就先写到这里。一个一个查元素很辛苦，但也是必须的！预计下一篇会做一下页头~未完待续……