记录一下自己博客美化的过程

1、首先博客皮肤选择 SimpleMemory

2、修改基础样式

看了很多博客，都是放成品，想修改一下也无从下手，F12看了看代码，干脆在原来样式基础上修改一下吧。

（ps：令人震惊，网站的方法、样式完全暴露出来了，给自定义留足了空间

这个 禁用模版默认CSS不能勾选上哈，我们是在原有基础上改动，不是直接自己重写一套（那太费劲了。
样式放在这个 页面定制CSS代码中

2.1、这个很重要哈，不然样式要变形

*{
    box-sizing: border-box;
    font-family:'Monaco', Microsoft Yahei, 宋体, sans-serif;
}

2.2、粉色链接：

/* 所有链接hover上去会变成粉色 */
a:hover {
    color: #ffadbb !important;
    /* color: #e83e8c !important; */
}

2.3、这里是效果图：

/* 基础样式 */
#home {
    margin: 0;
    width: 100%;
    padding: 0;
    #header {
        margin-top: 0;
        padding-top: 43px;
        #blogTitle {
            text-align: center;
        }
        #navigator {
            padding: 0 70px;
        }
    }
    #main {
        padding: 0 70px;
 
        #blog-calendar {
            width: 223px;
        }
    }
    #footer {
        padding: 0 70px;
        padding-bottom: 43px;
    }
}

2.4、隐藏顶部导航栏，就是这个：

/* 隐藏顶部nav导航栏 */
#top_nav {
    display: none;
}

2.5、【代码可折叠】的样式

点击这里查看代码

/* 代码可折叠样式 */
details {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 3px 5px;
}
summary {
    padding: 6px;
}
 .highlighter-hljs.hljs.language-css.hljs-line-numbers {
    border: 0;
}

2.6、内容区，图片上下加一点外间距，我不喜欢文字和图片离的太近

/* 内容区，图片上下加一点外间距，我不喜欢文字和图片离的太近 */
div#topics img {
    margin: 10px 0;
}

2.7、后续补一点标题样式吧

现在没什么好设计（找不到好看的可以抄的-->懒得找

3、自定义导航栏

3.1、需要请求js权限

园子里搜一下就好
参考文章：博客美化 之 申请博客园JS权限步骤

礼貌一点：

尊敬的博客园管理员：
您好，我希望用JS美化下我的博客页面，麻烦通过下我的JS权限申请。
谢谢您的帮助。

3.2、js代码调整

需要卸载页脚（maybe为了防止阻塞网站原本的代码

参考文章：博客园（自定义导航栏）

博客园本身的链接挺好的，自己处理的话大概思路就是隐藏掉原本的 ul，重新用js插入新内容来替代。
简单一点获取到里面的a标签，处理a标签以及 innerHtml也可以。
有时间再处理吧～

在页脚html代码中，把下面代码放进去，其中链接、中文可以自定义（改成自己想要的

<script>
var myNav = document.querySelector("#navList");
myNav.innerHTML = `
<ul id="navList">
    <li><a id="blog_nav_sitehome" class="menu" href="https://www.cnblogs.com/">博客园</a></li>
    <li><a id="blog_nav_myhome" class="menu" href="https://www.cnblogs.com/zhzhxuan/">首页</a></li>
    <li><a id="blog_nav_newpost" class="menu" href="https://i.cnblogs.com/EditPosts.aspx?opt=1">新随笔</a></li>
    <li><a id="blog_nav_contact" class="menu" href="https://msg.cnblogs.com/send/ZhZhXuan">联系</a></li>
</ul>
`
</script>