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

本贴最后更新于 2760 天前,其中的信息可能已经沧海桑田

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

1. 引子

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

V 神 blog 截图

这皮肤!简直!美 cry 啊!

--

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

--

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

2. 顺利的导入皮肤

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

3. 有点不对劲的地方…

1. 砍掉站内搜索

激动的打开主页…

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

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

两行 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
}

现在在看,看上去不错啊!

初次 OK

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

$("#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. 请尽情使用吧

  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 88250

    收到收到~

  • 其他回帖
  • someone

    有的地方是小聪明…但是我觉得侧栏那边能切换文章导航和个人信息是有必要要的…[em01]

    1 回复
  • someone

    刚才又发现了一个地方…max-width:700px下的pre标签有奇怪的属性,会影响代码块的可读性。不知道这个Bug有没有修复啊~毕竟我好久没更新了…

  • 88250

    谢谢分享和改进 ❤️

    @Vanessa

  • 查看全部回帖