不怎么懂码的生物也能看懂的nexT主题魔改方式
前言
我个人代码基础几乎为0, 一些跟着别人的博客做的操作应该还算稳,不过自己鼓捣的部分真的十分野生,对一些代码作用的解释也可能并不准确。 写这篇po文主要是想给自己留一个存档+帮助像我一样对代码陌生的人找个思路,请大家尽量只看别动手。 如果真的要模仿我的野操作,请一定要备份好原生代码。当然,如果有懂行的人愿意指导,那就再好不过了
小tips & 资源
可能是全篇文最靠谱的部分。 这里都是我自己参考的资源,至这篇博文发布时都亲测有用.
自定义CSS过程基本都是跟着 Yiwei Zhang 这位博主走的;一些基本的改色,改字体大小,改背景图片等都可以参考。 这位也给出了自己的CSS码,有必要的话可以复制学习。
小tip: 通过F12扒元素改CSS的时候,不管三七二十一先把背景颜色改为红色() 这样可以最快最直观地看见你的元素有没有选对,减少木大的时间
我的一些其他修改:
1 | <!--添加网站的运行时间--> |
我不想显示分秒,于是删掉了几行。 我之前删的不够,导致了某些虚空代码和应该没什么大碍的报错,又删掉了一些后才停止报错。和我一样看不懂的人也许可以抄一下我的删法。
阅读全文 vs文章头图&文章摘要
默认为文章全文都显示在主页上。 想要用“阅读全文”按钮折叠文章,只要在想要开始折叠的部分插入<!-- more -->
指令就可以了。
不过这么做,点到博文里之后会默认定位到 <!-- more -->
之后的地方, 我个人觉得一些博文不太适合这样的折叠方式。
利用头图和摘要功能的博文会在首页上折叠起来,而且点击”阅读全文后“会普通地从定位到标题。 文章的头图也会显示在标签/分类的搜索页,很适合我这种发图为主的人。这篇博文就使用了这里两个功能。
front-matter可以轻松地生成封面图/头图和摘要。
Front-matter 就是每篇post开头的这一块信息。
1 | --- |
注: 搜索过程中我见过有用featured pictures 和 thumbnail 来生成头图的,但我个人尝试后都没有效果,只有photos有效
输入的时候要注意一下标点和空格,规则和其他项目一样,不确定的话可以复制粘贴一下。
因为我博客图片浓度比较浓,没必要也要图好看整个封面图, 我直接把这两项加入了scaffolds/post.md
,这样以后新建文档都会默认有这两项啦。
更改文章头图显示方式
接下来我遇到了一个问题:
这个功能会自动把图片按照宽度对齐放大。原本250x250的图设成头图以后硬生生变成了800x800。 竖图可想而知,结果会更加悲惨。
我的解决方法是给封面图设宽度限定。
1 | .post-gallery { |
想进一步设定的话,可以到 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 | .brand{ |
现在默认的小黑条应该会变成一张200x200的图,但博客标题依旧会以文字的方式显示在上面。
接下来去 layout/_partials/header/brand.njk
里,
1 | <a href="{{ config.root }}" class="brand" rel="start"> |
打上<!-- -->
之后电脑就会无视里面的代码, 网站标题的文字就不会再出现了! 之后想要把标题要回来的话,只要删掉<!-- -->
就行了。
我是如何把muse主题换上Pisces-Gemini风格的目录边栏的
↑ 当时尝试的另一种方法
记录:半失败的尝试:利用markdown在博客正文页内制作目录
我一开始鼓捣HTML和CSS不成,打算用markdown在微博正文业内制作目录。
设想是想维基百科那样占据一脚的小目录
利用hexo-toc插件生成目录(toc)
使用指令npm install hexo-toc --save
安装插件, 然后再md文件中输入 <!-- toc -->
即可生成目录。
遗憾的是这个插件与nexT主题本身的代码冲突,安装后nexT侧边栏自带的目录栏会出错。
CSS渲染
在md文档内,是可以,写HTML的!大概!
1 | <div> class= "mytoc" |
然后在style.styl
文件中输入mytoc
的风格样式
1 | .mytoc { |
就可以在博文业内渲染这个目录啦!
个人思考 (可以不要看)
我以前是真的不知道dm里面能写HTML,更不知道这样还能用CSS渲染。我一直以为markdown就是输入方式不太一样的word文档((((
知道这个操作以后突然多了好多可能性! 目前的关于页面中,我就利用复制粘贴过来的HTML+CSS码设置了自己的小资料卡。 我可以像装扮网页一样装扮博文正文页,可以在将来的OC资料页里搞不少骚操作!真是想想就有点小兴奋呢!!