shoka主题页面显示相关设置 - shoka - 主题设置 | yangxs = (人 •͈ᴗ•͈) ♡♡ = 不用担心，这次肯定不会有问题

shoka 主题的顶部导航栏分别有：首页、关于、文章、friends、links，这几个导航入口

在 shoka 主题的配置文件中已经对这几个导航栏进行了相关配置：

言归正传，首页和文章已经有了，关于、friends、links 这三个页面怎么实现呢？

很简单，只需要在博客文件根目录同级路径下分别创建 about、friends、links 文件，并在这三个文件下创建一个 index.md 文件即可，index.md 中写的内容就是我们点击对应顶部导航栏后会显示的内容。

具体创建文件结构如下：

最后，文件创建好后，上传博客即可。

shoka 主题的底部内容都是是写在 themes/shoka/layout/_partial/footer.njk 文件中的，如果想要实现某些功能，在此文件中进行修改即可。此处，以添加显示博客运行时间为例，说明操作方法。

* 注：所有内容均是在 themes/shoka/layout/_partial/footer.njk 文件中实现的。

相关说明

在 shoka 主题的默认状态下，底部显示了三行信息：

这三行信息分别是放在单独的 div 中，然后这三个 div 由另外一个大 div 包裹， themes/shoka/layout/_partial/footer.njk 文件中就是放的这个大的 div 以及其包裹三个子 div 的相关内容。

因此，若果是想要修改或是添加什么功能或信息，只需要对这几个 div 进行相关处理即可。

博客运行时间实现

我这里是将第二行对应的 div 直接删除，然后在该 div 的原位置，添加上了我自己写的 div 标签，添加的 div 内容如下：

并在文件最后加上了，实现了博客运行时长，以及时间实时刷新的功能的 script

	<script>
	function updateRunningTime() {
	const startDate = new Date("2024-03-01T16:04:42"); // 博客开始日期
	const now = new Date();
	const duration = now - startDate;
	const seconds = Math.floor(duration / 1000 % 60);
	const minutes = Math.floor(duration / 1000 / 60 % 60);
	const hours = Math.floor(duration / 1000 / 60 / 60 % 24);
	const days = Math.floor(duration / 1000 / 60 / 60 / 24 % 365);
	const years = Math.floor(duration / 1000 / 60 / 60 / 24 / 365);
	document.getElementById("years").textContent = years;
	document.getElementById("days").textContent = days;
	document.getElementById("hours").textContent = hours;
	document.getElementById("minutes").textContent = minutes;
	document.getElementById("seconds").textContent = seconds;
	}
	updateRunningTime();
	setInterval(updateRunningTime, 1000); // 每秒更新一次时间
	</script>

然后，在博客文件根目录运行以下命令，推送博客到 github，并在 github 的 pages 服务中更新页面内容即可

本文持续更新中。。。