CNBLOG 个性化笔记（3）——侧边栏和主内容结构

昨天给老家的电脑装了一个华硕的750ti，显示丝滑了不少，把博客建设工作鸽了，嘿嘿嘿^^今天的预备工作是把侧边栏弄好，有时间再做一下下内容区的排版~

初始效果

之前做好的侧边栏初始效果如下：



由此看出存在字体的大小问题，还有排版需要留白。

侧边栏结构

侧边栏的内容如下：

|--#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    ----推荐排行（暂未显示）

侧边栏总容器嵌套了一个主题容器，主题容器里从上到下排列着侧边信息、日历和其他内容容器。

排版布局

1. 首先是要让侧边栏容器内左右上下都留一定的空白。
   
   侧边栏的主体容器#sideBarMain设置左右的margin为40px,再设上下的padding为20px。同时设定box-sizing:border-box让计算容器长宽时把内边距也算进去。
   
2. 然后给日历和其他信息容器加入一个20px的margin-top。

搜索框调整

1. 搜索框存在框内字体显示不全的问题。搜索盒容器为#sidebar_search_box，整体宽度为218px，高度为21px。
   
   宽度是不能改的了，可以设置一下高度为35px。
2. 站内搜索和站外搜索的按键大小不一致。其中较大的站外搜索宽度为86px，应该让上下两个等宽；每行两个input之间有一个3.5px大小的空格。所以理想的输入框宽度为218-86-4=128px再小一点的127px。

其他

侧边栏其他部分其实也没有什么修改的必要了，给其他内容的每个部分加一个margin-top:10px;就差不多了。
得到的效果如下：

额外工作：博客详细界面结构

今天的主要工作有点简单，那就再加一点工作量好了：给主内容区做一个初步的布局设计。主内容区有两个状态，一个是博客主界面，博客列表里多个博客概览的；另一个是博客的详细界面。后者比较简单，就先认识下这个详细界面吧。

内容结构

|-- .forFlow      ----内容主容器
  |-- #post_detail  ----详细内容外容器
    |--#topics      ----详细内容中容器
      |--.post      ----详细内容内容器
        |--.postTitle   ----标题
        |--.clear       ----隔层
        |--.postBody    ----内容主体
          |--#cnblogs_post_body     ----纯内容
          |--#MySignature           ----签名(未显示)
          |--.clear                 ----隔层
          |--#blog_post_info_block  ----张贴信息
            |--#blog_post_info      ----张贴信息
              |--.green_channel     ----绿色通道
              |--.author_profile    ----作者信息
              |--.div_digg          ----点踩区
          |--#post_next_prev        ----上一篇/下一篇
        |--.postDesc    ----博文描述

今天就先做到这里吧。毕设第一轮查重没过有点不开心，这几天都会比较忙了……

---

2020年4月15日更新

今天打开博客看了一下，越看越觉得缺了点什么，啊原来是看不到自己醒目而帅气的头像(^^)博客自带的作者信息在博文的最下面，那怎么行！当然是直接丢到侧边栏最上面啊！可是侧边栏的各个元素已经是固定的了，那就只能用js脚本动态添加上去啦。

首先是要得到头像的地址。在博客园的账户页面就能找到头像，右键复制链接地址即可：



在页首html中，创建一个头像的div，我命名为myprofile。然后检查一下侧边栏的结构，我们的头像应当插入在#sidebar_news的子元素里，而且是第二个子元素#blog-news兄弟元素的前面。

$(document).ready(function(){
  //给div插入头像
  var box = $('#myprofile');
  // var par = $('#sidebar_news');
  var news = $('#blog-news');
  //插入到相应位置
  //par.prepend(box);
  news.before(box);
  //生成图像img元素并添加到div中
  var myphoto = $('<img />').attr({
    src:"https://pic.cnblogs.com/avatar/1994166/20200413210838.png",
    id:"myphoto",
    style:"width:90%;" 
  });
  myphoto.appendTo(box);
});

得到的效果如图：