不怎么懂码的生物也能看懂的nexT主题魔改方式

前言

我个人代码基础几乎为0, 一些跟着别人的博客做的操作应该还算稳,不过自己鼓捣的部分真的十分野生,对一些代码作用的解释也可能并不准确。 写这篇po文主要是想给自己留一个存档+帮助像我一样对代码陌生的人找个思路,请大家尽量只看别动手。 如果真的要模仿我的野操作,请一定要备份好原生代码。当然,如果有懂行的人愿意指导,那就再好不过了


小tips & 资源

可能是全篇文最靠谱的部分。 这里都是我自己参考的资源,至这篇博文发布时都亲测有用.

自定义CSS过程基本都是跟着 Yiwei Zhang 这位博主走的;一些基本的改色,改字体大小,改背景图片等都可以参考。 这位也给出了自己的CSS码,有必要的话可以复制学习。

小tip: 通过F12扒元素改CSS的时候,不管三七二十一先把背景颜色改为红色() 这样可以最快最直观地看见你的元素有没有选对,减少木大的时间

我的一些其他修改:

底部添加网络运营时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--添加网站的运行时间-->
<span id="timeDate">载入天数...</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("05/08/2021 00:38:00");//在此处修改你的建站时间
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "已保持冷藏 "+dnum+" 天 " +hnum+ " 小时 ";

}
setInterval("createtime()",250);
</script>

我不想显示分秒,于是删掉了几行。 我之前删的不够,导致了某些虚空代码和应该没什么大碍的报错,又删掉了一些后才停止报错。和我一样看不懂的人也许可以抄一下我的删法。


阅读全文 vs文章头图&文章摘要

默认为文章全文都显示在主页上。 想要用“阅读全文”按钮折叠文章,只要在想要开始折叠的部分插入<!-- more --> 指令就可以了。

不过这么做,点到博文里之后会默认定位到 <!-- more --> 之后的地方, 我个人觉得一些博文不太适合这样的折叠方式。

利用头图和摘要功能的博文会在首页上折叠起来,而且点击”阅读全文后“会普通地从定位到标题。 文章的头图也会显示在标签/分类的搜索页,很适合我这种发图为主的人。这篇博文就使用了这里两个功能。

front-matter可以轻松地生成封面图/头图和摘要。

Front-matter 就是每篇post开头的这一块信息。

1
2
3
4
5
6
7
8
---
title:
date:
descriptions: <!--在这里写着的东西会变成变成文章摘要,首页上只会显示这里的文字。-->
photos: <!--这里是文章封面图。我只过图片链接,按理来说本地图片也可以。 -->
categories:
tags:
---

注: 搜索过程中我见过有用featured pictures 和 thumbnail 来生成头图的,但我个人尝试后都没有效果,只有photos有效

输入的时候要注意一下标点和空格,规则和其他项目一样,不确定的话可以复制粘贴一下。

因为我博客图片浓度比较浓,没必要也要图好看整个封面图, 我直接把这两项加入了scaffolds/post.md ,这样以后新建文档都会默认有这两项啦。

更改文章头图显示方式

接下来我遇到了一个问题:

这个功能会自动把图片按照宽度对齐放大。原本250x250的图设成头图以后硬生生变成了800x800。 竖图可想而知,结果会更加悲惨。

我的解决方法是给封面图设宽度限定。

1
2
3
4
5
6
.post-gallery {
max-height: 300px;
+tablet-mobile() { //在使用平板或者手机访问网站时
max-height: 250px; //最大宽度为250px
}
}

想进一步设定的话,可以到 source/css/_common/components/post/post-gallery.styl 里, 更改 object-fit 这项。 我目前的设置是 cover , 另外还有 fill , contain , none , scale-down, 在这里有详细的解说和例子 。 个人觉得cover和scale-down效果都不错,但目前博客空荡荡,还是先选了看起来比较满的cover。

按理来说这个在 style.styl里也能改,但我一直无法成功,只能对原文件下手、


题改图片/banner

NEXT主题自带的banner(在我的定义里,点击回到主页的那个就是)是利用网站标题生成的, 虽然可以在config里面添加 Custom Logo , 可这个图片无法点击,文字生成的banner也没什么花样,只能改改字体 (我还没找到改字体的教程……) 虽然logo下面一个黑条也挺酷,但我还是想要一个内容可以自由设计 的图片banner。

首先在 style.style

1
2
3
4
5
6
7
8
9
10
11
12
.brand{
background-color: white;
height: 200px
width: 200px
background-image: url("/images/logoV.png") //这是我现在网站的头图
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
+tablet-mobile() { //在用平板/手机访问时, 高/宽变为50x50
height: 50px; //同理,也可以设定成一张别的图片
width: 50px;
}}

现在默认的小黑条应该会变成一张200x200的图,但博客标题依旧会以文字的方式显示在上面。

接下来去 layout/_partials/header/brand.njk 里,

1
2
3
4
5
<a href="{{ config.root }}" class="brand" rel="start">
<i class="logo-line"></i>
<!-- <h1 class="site-title">{{ title }}</h1> --> //把这一句周围打上 <!-- -->
<i class="logo-line"></i>
</a>

打上<!-- --> 之后电脑就会无视里面的代码, 网站标题的文字就不会再出现了! 之后想要把标题要回来的话,只要删掉<!-- --> 就行了。


我是如何把muse主题换上Pisces-Gemini风格的目录边栏的

↑ 当时尝试的另一种方法

记录:半失败的尝试:利用markdown在博客正文页内制作目录

我一开始鼓捣HTML和CSS不成,打算用markdown在微博正文业内制作目录。

设想是想维基百科那样占据一脚的小目录

利用hexo-toc插件生成目录(toc)

hexo-toc

使用指令npm install hexo-toc --save 安装插件, 然后再md文件中输入 <!-- toc --> 即可生成目录。

遗憾的是这个插件与nexT主题本身的代码冲突,安装后nexT侧边栏自带的目录栏会出错。

CSS渲染

在md文档内,是可以,写HTML的!大概!

1
2
3
<div> class= "mytoc" 
<!-- toc -->
</div>

然后在style.styl 文件中输入mytoc 的风格样式

1
2
3
4
.mytoc {
background color=red;
//反正就这个东西我也举不出什么好例子
}

就可以在博文业内渲染这个目录啦!

个人思考 (可以不要看)

我以前是真的不知道dm里面能写HTML,更不知道这样还能用CSS渲染。我一直以为markdown就是输入方式不太一样的word文档((((

知道这个操作以后突然多了好多可能性! 目前的关于页面中,我就利用复制粘贴过来的HTML+CSS码设置了自己的小资料卡。 我可以像装扮网页一样装扮博文正文页,可以在将来的OC资料页里搞不少骚操作!真是想想就有点小兴奋呢!!


结束