关闭Next主题菜单页面标题显示

关闭方法

Next主题的菜单页面会默认显示一个标题,就像下图显示的那样。在我看来这个标题存在的必要性不大,因为这个界面是用户点击了相应文字之后出现的,相信用户不需要标题提醒就知道自己刚刚点了什么,就算真的一时想不起,还有下面总结性的小标题可以提示。另外我认为标题的占空太大,这让页面看起来没那么紧凑了。
默认显示标题.png
所以我取消了菜单页面标题的显示,具体方法是找到themes/next/layout/路径下的page.swig文件,删除其中PAGE BODY上方的这一行内容:

1
{% include '_partials/page-header.swig' %}

这时再重新生成静态文件你就会发现,页面标题已经消失了,腾出了大块可以用来展示有效信息的空间。
关闭标题显示.png

修改当前菜单的网页标题

按这种方法取消页面标题只是改变了网页的展示样式,标题变量本身还好好地保存在网页文件中,只是没有显示出来而已。所以现在仍然可以通过改变根目录下的sourse\tags\index.md等文件中的title值来改变网页标题栏文字。如按下文将title的值由“Tags”改为“标签”,网页的标题显示同样也会自动改变。

1
2
3
4
title: 标签
date: 2020-06-01 22:45:28
type: "tags"
comments: false

修改网页标题栏.png

发现这个关闭方法的心路历程

作为一个对网页开发知之甚少的非专业人员,只能从文档名称和变量名称的含义来猜测它们之间的逻辑关系,并用“修改部分语句+本地预览”的形式验证自己的操作是不是能达到想要的效果。
通过网络搜索我知道了控制网页展示样式的文件夹是主题目录下的layout,还知道了这个文件夹里以下划线开头的文件在使用中都会被忽略。那么只需要再看一下非下划线开头的文件的名字,就可以很容易地猜到它们代表的是与其文件名称相对应的菜单项的展示样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
layout
├─_custom
├─_macro
├─_partials
├─_scripts
├─_third-party

│─archive.swig
├─category.swig
├─index.swig
├─page.swig
├─post.swig
├─tag.swig
├...

既然想修改tag菜单的样式,那我自然而然地先打开了tag.swig文件,浏览了一遍,试图通过变量的命名方式来弄清每一部分的含义——我当然失败了,这些代码的陌生程度太高,仅仅认识里面的几个英文单词对理解它们的实际功能没有太大作用。不过我确实发现了一点什么,那就是在这个文件的开头发现了import 某个名字以下划线开头的文件的语句,这马上让我联想起了C语言中包含头文件的include语句,或许这里的import有同样的包含某个其它文件的含义。

再去翻看了所有swig文件中import语句之后列出的文件,发现它们的名字全部都是以下划线开头的,再结合它们的命名方式,我猜测这些所谓会“被忽略”的文件的功能其实有点像积木。把多数网页都会用到的元素样式定义为一个独立的文件,在网页的整体样式文件中只需要各取所需,把现成的积木组合起来形成一个完整拼图就好了。

这时我想起tagaboutcategory页面样式彼此非常相似,它们的积木拼合方式是类似的,甚至可能用的是同一个积木拼图。再联想新建tagaboutcategory时使用的模板都是page类型,就可以进一步猜想这个为菜单项们所共用的积木拼图就是page.swig
于是又认真看了一遍page.swig的内容,最后在标识PAGE BODY的一大堆#号上方发现了一个include ... page-header.swig的语句。对比一下网页的位置,觉得它可能就是代表页面标题的语句,所以删除这条代码然后预览,果然成功了。