关于 solo 的 Next 皮肤，做了一点微小的工作

关于 solo 的 Next 皮肤，做了一点微小的工作...

1. 引子

今天点进了 V 神的 blog，顿时感觉美呆了

这皮肤！简直！美 cry 啊！

--

后来我发现其实是我 Low…这皮肤本来就很火啊，蛮多大神在用的…我一直没发现而已…sad

--

于是我赶紧去找皮肤 Download 啦！

2. 顺利的导入皮肤

其实并不顺利，导入皮肤的时候一不小心把整个 solo 项目文件给删了，还好之前有过备份…但是我改了很多 yilia 的细节，全部丢失了…yilia 是我之前很喜欢的一款皮肤，名字我也很喜欢，十分类似伊莉雅

3. 有点不对劲的地方…

1. 砍掉站内搜索

激动的打开主页…

诶？怎么有的地方和说好的不一样…

为什么我的 title 变成两行了…

是因为我的 blog 名太长了么…可是不能改啊，这是我女票送我的博客名！

正巧，我的站内搜索是没有用的，嘿嘿，不好意思啦！砍掉！

还是感觉不对劲…

突然发现，导航栏靠右似乎更好看啊！

so! 靠右！一种居中的感觉油然而生！

2. 进入文章页面

激动的点了一篇文章，想看看页面内长啥样！

我靠！这大白边是啥？？？

等到加载出来之后发现…原来是文章导航…

但是这个加载的过程有点不舒服啊！干脆，这个东西别自动弹出来好了。

在 next.js 里的 initArticle

initArticle 的内容改成

$(".sidebar").html($(".b3-solo-list"))

这样一句话。

大白框就没有啦！

3. 进入后台

读文章读着读着发现，诶！有个错别字啊，我得改了！

可是在看文章的地方怎么进后台…以前 yilia 的皮肤可以直接进啊！

于是我参考了一下别人的 blog，发现他们在侧栏是有按钮，可以切换文章导航和个人信息的。

Like this

那我也动手做一个呗，看上去不难啊！

首先，在 initArticle 的时候，把 .sidebar 内的内容先保存一份，把 .b3-solo-list 里的内容也保存一份

var old = $(".sidebar").html();
var list = $(".b3-solo-list");

之后，清空 .sidebar 的内容

$(".sidebar").empty()

然后，给 .sidebar 加上两个"导航"，以及一个放置内容的容器

$(".sidebar")
          .append(
          	'<a href="#" id="table-of-content" class="sidebar-guide selected" style="margin-right:20px">Table Of Content</a>'+
          	'<a href="#" class="sidebar-guide" id="overview">Overview</a>'
          )
          .append(
            '<section id="article-side-section"></section>'
          );

之后在容器内，加上文章导航

$(".sidebar #article-side-section").html(list);

然后去 css 文件内，给刚才加的“导航”设置一点样式，比方说像我这样

.sidebar .sidebar-guide {
    font-size:16px;color:white;border:0px
}
.sidebar-guide.selected {
    border-bottom:1px solid #87daff;color:#87daff
}
.sidebar-guide.selected:hover{
    color:#87daff
}

现在在看，看上去不错啊！

之后给两个导航增加点击事件

$("#overview").click(function() {
    $("#table-of-content").removeClass("selected");
    $(this).addClass("selected")
    $(".sidebar #article-side-section").html(old);
}) 
$("#table-of-content").click(function() {
    $("#overview").removeClass("selected");
    $(this).addClass("selected")
    $(".sidebar #article-side-section").html(list);
}) 

OK，大功告成！

4. 分辨率问题

我尝试缩小浏览器窗口。

哎哟！怎么凸出去了！这可不行！

查看一下属性，发现是 class=wrapper 的元素导致的。

于是把写死的 width=700px 改成 max-width=700px

这回是真正的大功告成啦！

4. 这款皮肤真的好棒

这款皮肤真的好棒，好喜欢这款皮肤，感谢 V 神！！

之后我大概会给文章页的 sidebar 切换 table of content 和 overview 时加一些动画吧，学习一下沈神的 sidebar…

5. 请尽情使用吧