Skip to content

Respect baseurl for fork repos; Simplify page header #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
zjp-CN wants to merge 3 commits into from
Closed

Respect baseurl for fork repos; Simplify page header #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e24e1d5
Inline tab links and remove click event on tabs.
zjp-CN Aug 24, 2026
b3d67e2
Simplify header via reusable template and plain layout
zjp-CN Aug 12, 2026
4648a5b
Apply `baseurl` to css via jekyll's liquid filter `relative_url`
zjp-CN Aug 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions 404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
---
---
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Asterinas - Not Found</title>

<link rel="stylesheet" href="/css/contributors.css" media="screen and (min-width: 769px)">
<link rel="stylesheet" href="/css/contributors-mobile.css" media="screen and (max-width: 768px)">
<link rel="stylesheet" href="{{ '/css/contributors.css' | relative_url }}" media="screen and (min-width: 769px)">
<link rel="stylesheet" href="{{ '/css/contributors-mobile.css' | relative_url }}" media="screen and (max-width: 768px)">
<style type="text/css" media="screen">
body {
margin: 10px auto;
Expand All @@ -20,8 +22,8 @@
<!-- 头部 -->
<div class="header">
<div class="hdImgBox">
<a href="/">
<img src="/assets/images/homeIcon.png" alt="img">
<a href="{{ '/' | relative_url }}">
<img src="{{ '/assets/images/homeIcon.png' | relative_url }}" alt="img">
</a>
</div>
<div class="hdLink">
Expand All @@ -33,7 +35,7 @@
</div>
<div class="hdLinks">
<div>
<img src="/assets/images/navigation.jpg" alt="img">
<img src="{{ '/assets/images/navigation.jpg' | relative_url }}" alt="img">
</div>
<div class="tabItem" flot="false">
<div data-tab="1" class="tab">Home</div>
Expand Down Expand Up @@ -73,11 +75,11 @@
tab.addEventListener('click', function () {
var tabId = this.getAttribute('data-tab');
if (tabId === '1') {
window.location.href = '/index.html';
window.location.href = "{{ '/index.html' | relative_url }}";
} else if (tabId === '2') {
window.location.href = '/blog.html';
window.location.href = "{{ '/blog.html' | relative_url }}";
} else if (tabId === '3') {
window.location.href = 'https://asterinas.github.io/book';
window.location.href = "{{ '/book' | relative_url }}";
}
});

Expand Down Expand Up @@ -154,4 +156,4 @@
</script>
</body>

</html>
</html>
4 changes: 3 additions & 1 deletion _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ title: Asterinas
email: tate.thl@gmail.com
description: >- # this means to ignore newlines until "baseurl:"
Asterinas is an open-source community to advance Rust-based OSes
baseurl: "" # the subpath of your site, e.g. /blog
# For forks (e.g., `username/asterinas.github.io` hosted on GitHub Pages),
# set `baseurl` to `/asterinas.github.io` to ensure all local links and assets resolve correctly.
baseurl: "" # "/asterinas.github.io"
url: asterinas.github.io
github_username: asterinas

Expand Down
22 changes: 22 additions & 0 deletions _includes/site-nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{% assign nav_active = include.active | default: '' %}
<div class="site-nav">
<div class="hdImgBox">
<a href="{{ site.baseurl }}/">
<img src="{{ site.baseurl }}/assets/images/homeIcon.png" alt="img">
</a>
</div>
<button class="site-nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav-menu" aria-label="Toggle navigation menu">
<img src="{{ site.baseurl }}/assets/images/navigation.jpg" alt="img">
</button>
<div class="site-nav-menu" id="site-nav-menu">
<a class="tab{% if nav_active == 'home' %} is-active{% endif %}" href="{{ site.baseurl }}/index.html">
Home
{% if nav_active == 'home' %}<span class="dot"></span>{% endif %}
</a>
<a class="tab{% if nav_active == 'blog' %} is-active{% endif %}" href="{{ site.baseurl }}/blog.html">
Blog
{% if nav_active == 'blog' %}<span class="dot"></span>{% endif %}
</a>
<a class="tab" href="https://asterinas.github.io/book">Docs</a>
</div>
</div>
114 changes: 15 additions & 99 deletions _layouts/blog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,16 @@
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>{{ page.title }}</title>
<link rel="shortcut icon" type="image/x-icon" href="/assets/images/Asterinas icon (in blue).svg">
<link rel="stylesheet" href="/css/blog.css" media="screen and (min-width: 769px)">
<link rel="stylesheet" href="/css/blog-mobile.css" media="screen and (max-width: 768px)">
<link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/assets/images/Asterinas icon (in blue).svg">
<link rel="stylesheet" href="{{ site.baseurl }}/css/blog.css" media="screen and (min-width: 769px)">
<link rel="stylesheet" href="{{ site.baseurl }}/css/blog-mobile.css" media="screen and (max-width: 768px)">
<link rel="stylesheet" href="{{ site.baseurl }}/css/site-nav.css">

</head>

<body>
<div class="header">
<div class="hdImgBox">
<a href="/">
<img src="/assets/images/homeIcon.png" alt="img">
</a>
</div>
<div class="hdLink">
<div data-tab="1" class="tab">Home</div>
<div data-tab="2" class="tab" style="color:#fff">Blog
<div class="dot"></div>
</div>
<div data-tab="3" class="tab">Docs</div>
</div>
<div class="hdLinks">
<div style="cursor: pointer;">
<img src="/assets/images/navigation.jpg" alt="img">
</div>
<div class="tabItem" flot="false">
<div data-tab="1" class="tab">Home</div>
<div class="line"></div>
<div data-tab="2" class="tab" style="color:#fff;font-weight: 500;"><div class="dot"></div>Blog
</div>
<div class="line"></div>
<div data-tab="3" class="tab">Docs</div>
</div>
</div>
{% include site-nav.html active="blog" %}
</div>
<div class="tops">
<div class="banner">
Expand Down Expand Up @@ -72,17 +49,17 @@ <h2>{{ year.name }}</h2>
<div class="footer">
<!-- <div class="footer-content">
<div class="footer-img">
<a href="/">
<img class="footer-imgOne" src="/assets/images/twitter.png" alt="img">
<a href="{{ site.baseurl }}/">
<img class="footer-imgOne" src="{{ site.baseurl }}/assets/images/twitter.png" alt="img">
</a>
<a href="/">
<img class="footer-imgTwo" src="/assets/images/flow.png" alt="img">
<a href="{{ site.baseurl }}/">
<img class="footer-imgTwo" src="{{ site.baseurl }}/assets/images/flow.png" alt="img">
</a>
<a href="/">
<img class="footer-imgTwo" src="/assets/images/photo.png" alt="img">
<a href="{{ site.baseurl }}/">
<img class="footer-imgTwo" src="{{ site.baseurl }}/assets/images/photo.png" alt="img">
</a>
<a href="/">
<img class="footer-imgThree" src="/assets/images/email.png" alt="img">
<a href="{{ site.baseurl }}/">
<img class="footer-imgThree" src="{{ site.baseurl }}/assets/images/email.png" alt="img">
</a>
</div>
<div class="footer-title">
Expand All @@ -94,67 +71,6 @@ <h2>{{ year.name }}</h2>
</div>
</body>

<script>
var tabs = document.querySelectorAll('.tab');
tabs.forEach(function (tab) {
tab.addEventListener('click', function () {
var tabId = this.getAttribute('data-tab');
if (tabId === '1') {
window.location.href = '/index.html';
} else if (tabId === '2') {
window.location.href = '/blog.html';
} else if (tabId === '3') {
window.location.href = 'https://asterinas.github.io/book';
}
});
})

window.addEventListener('DOMContentLoaded', function () {
const screenWidth = window.innerWidth;
const hdLink = document.querySelectorAll('.hdLink');
const hdLinks = document.querySelectorAll('.hdLinks');
console.log(screenWidth)
if (screenWidth > 768) {
console.log(111)
hdLink[0].style.display = 'flex';
hdLinks[0].style.display = 'none';
} else {
console.log(222)
hdLink[0].style.display = 'none';
hdLinks[0].style.display = 'block';
}

// 监听窗口大小变化事件
window.addEventListener('resize', function () {
const currentScreenWidth = window.innerWidth;
if (currentScreenWidth > 768) {
hdLink[0].style.display = 'flex';
hdLinks[0].style.display = 'none';
} else {
hdLink[0].style.display = 'none';
hdLinks[0].style.display = 'block';
}
})
});

const hdLinks = document.querySelectorAll('.hdLinks');
const tabItem = document.querySelectorAll('.tabItem');
hdLinks[0].addEventListener('click', function () {
if (tabItem[0].getAttribute('flot') === 'false') {
tabItem[0].style.display = 'block';
tabItem[0].setAttribute('flot', true);
} else {
tabItem[0].style.display = 'none';
tabItem[0].setAttribute('flot', 'false');
}
});

window.onclick = (event) => {
if (event.target !== tabItem[0] && event.target !== hdLinks[0].children[0].children[0]) {
tabItem[0].style.display = 'none';
tabItem[0].setAttribute('flot', 'false');
}
}
</script>
<script src="{{ site.baseurl }}/js/site-nav.js"></script>

</html>
</html>
115 changes: 15 additions & 100 deletions _layouts/contributors.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,17 @@
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>{{ page.title }}</title>
<link rel="shortcut icon" type="image/x-icon" href="/assets/images/Asterinas icon (in blue).svg">
<link rel="stylesheet" href="/css/contributors.css" media="screen and (min-width: 769px)">
<link rel="stylesheet" href="/css/contributors-mobile.css" media="screen and (max-width: 768px)">
<link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/assets/images/Asterinas icon (in blue).svg">
<link rel="stylesheet" href="{{ site.baseurl }}/css/contributors.css" media="screen and (min-width: 769px)">
<link rel="stylesheet" href="{{ site.baseurl }}/css/contributors-mobile.css" media="screen and (max-width: 768px)">
<link rel="stylesheet" href="{{ site.baseurl }}/css/site-nav.css">

</head>

<body>
<!-- 头部 -->
<div class="header">
<div class="hdImgBox">
<a href="/">
<img src="/assets/images/homeIcon.png" alt="img">
</a>
</div>
<div class="hdLink">
<div data-tab="1" class="tab">Home</div>
<div data-tab="2" class="tab" style="color:#fff">Blog<div class="dot"> </div>
</div>
<div data-tab="3" class="tab">Docs</div>
</div>
<div class="hdLinks">
<div style="cursor: pointer;">
<img src="/assets/images/navigation.jpg" alt="img">
</div>
<div class="tabItem" flot="false">
<div data-tab="1" class="tab">Home</div>
<div class="line"></div>
<div data-tab="2" class="tab">Blog
</div>
<div class="line"></div>
<div data-tab="3" class="tab">Docs</div>
</div>
</div>
{% include site-nav.html active="blog" %}

@zjp-CN zjp-CN Aug 13, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Asterinas homepage doesn't have a contributors tab, but the url path https://asterinas.github.io/contributors.html is accessible with Blog tag highlighted.

Image

So active="blog" just follows the behavior.

</div>
<!-- 中心具体内容框 -->
<div class="banner">
Expand Down Expand Up @@ -141,17 +119,17 @@
<div class="footer">
<!-- <div class="footer-content">
<div class="footer-img">
<a href="/">
<img class="footer-imgOne" src="/assets/images/twitter.png" alt="img">
<a href="{{ site.baseurl }}/">
<img class="footer-imgOne" src="{{ site.baseurl }}/assets/images/twitter.png" alt="img">
</a>
<a href="/">
<img class="footer-imgTwo" src="/assets/images/flow.png" alt="img">
<a href="{{ site.baseurl }}/">
<img class="footer-imgTwo" src="{{ site.baseurl }}/assets/images/flow.png" alt="img">
</a>
<a href="/">
<img class="footer-imgTwo" src="/assets/images/photo.png" alt="img">
<a href="{{ site.baseurl }}/">
<img class="footer-imgTwo" src="{{ site.baseurl }}/assets/images/photo.png" alt="img">
</a>
<a href="/">
<img class="footer-imgThree" src="/assets/images/email.png" alt="img">
<a href="{{ site.baseurl }}/">
<img class="footer-imgThree" src="{{ site.baseurl }}/assets/images/email.png" alt="img">
</a>
</div>
<div class="footer-title">
Expand All @@ -164,22 +142,6 @@

<script>

var tabs = document.querySelectorAll('.tab');
tabs.forEach(function (tab) {
tab.addEventListener('click', function () {
var tabId = this.getAttribute('data-tab');
if (tabId === '1') {
window.location.href = '/index.html';
} else if (tabId === '2') {
window.location.href = '/blog.html';
} else if (tabId === '3') {
window.location.href = 'https://asterinas.github.io/book';
}
});

})


// 获取所有的选项卡头部和内容区域
const headers = document.querySelectorAll('.data-select');
const bodies = document.querySelectorAll('.rankingTable');
Expand Down Expand Up @@ -352,55 +314,8 @@
linkPastMonth()


window.addEventListener('DOMContentLoaded', function () {
const screenWidth = window.innerWidth;
const hdLink = document.querySelectorAll('.hdLink');
const hdLinks = document.querySelectorAll('.hdLinks');
console.log(screenWidth)
if (screenWidth > 768) {
console.log(111)
hdLink[0].style.display = 'flex';
hdLinks[0].style.display = 'none';
} else {
console.log(222)
hdLink[0].style.display = 'none';
hdLinks[0].style.display = 'block';
}

// 监听窗口大小变化事件
window.addEventListener('resize', function () {
const currentScreenWidth = window.innerWidth;
if (currentScreenWidth > 768) {
hdLink[0].style.display = 'flex';
hdLinks[0].style.display = 'none';
} else {
hdLink[0].style.display = 'none';
hdLinks[0].style.display = 'block';
}
})
});

const hdLinks = document.querySelectorAll('.hdLinks');
const tabItem = document.querySelectorAll('.tabItem');
hdLinks[0].addEventListener('click', function () {
if (tabItem[0].getAttribute('flot') === 'false') {
tabItem[0].style.display = 'block';
tabItem[0].setAttribute('flot', true);
} else {
tabItem[0].style.display = 'none';
tabItem[0].setAttribute('flot', 'false');
}
});

window.onclick = (event) => {
if (event.target !== tabItem[0] && event.target !== hdLinks[0].children[0].children[0]) {
tabItem[0].style.display = 'none';
tabItem[0].setAttribute('flot', 'false');
}
}


</script>
<script src="{{ site.baseurl }}/js/site-nav.js"></script>
</body>

</html>
</html>
Loading