Fix navigation anchors, custom CSS inclusion, and badge positioning

[Copilot]

Navigation links weren't jumping to sections, custom CSS from _config.yml wasn't being applied, and badges were overlapping paper titles in text-only publication sections.

Changes

• Custom CSS inclusion - Added liquid template in _includes/head/custom.html:

  {% if site.custom_css %}<style>{{ site.custom_css }}</style>{% endif %}

• Navigation anchor mismatch - Fixed _data/navigation.yml URLs to match actual section IDs:

  # Before: /#-publications, /#-educations, /#-internships
  # After:  /#publications, /#education, /#internships

  Also normalized "Educations" → "Education"

• Missing section anchors - Added anchor spans in _pages/about.md before each major section:

  <span class='anchor' id='publications'></span>
  <span class='anchor' id='education'></span>
  <span class='anchor' id='internships'></span>

• Badge overlap fix - Added relative positioning for badges in _config.yml custom CSS:

  .paper-box-text-only .badge {
    position: relative !important;
    display: inline-block;
    margin: 0 0 8px 0 !important;
  }

Original prompt

The user is experiencing several issues with their academic homepage (cqu-student/cqu-student.github.io):

1. Navigation Bar Not Updating: The user wants the navigation bar to display ONLY: "Homepage" (hardcoded), "About Me", "Publications", "Education", and "Internships".
2. "横渠四句" (Motto Banner) Styling: The custom CSS defined in _config.yml for the motto banner is not being applied to the site.
3. Text-only Publication Overlap: In the text-only publication sections (.paper-box-text-only), the conference/journal badge (.badge) is overlapping the paper title because it is absolutely positioned.
4. Anchor Links: Navigation links are not correctly jumping to the sections on the page.

Proposed Fixes:

1. Fix CSS Inclusion

The custom_css defined in _config.yml is never included in the HTML head.

• File: _includes/head/custom.html
• Change: Add {% if site.custom_css %}<style>{{ site.custom_css }}</style>{% endif %} to the end of the file.

2. Fix Overlapping Badges

• File: _config.yml (inside the custom_css block)
• Change: Add a style rule to make .badge relative when inside .paper-box-text-only:

  .paper-box-text-only .badge {
    position: relative !important;
    display: inline-block;
    margin: 0 0 8px 0 !important;
    top: 0;
    left: 0;
  }

3. Fix Navigation Links

• File: _data/navigation.yml
• Change: Clean up the items to match the user's request and use clean anchor IDs (without extra dashes):

  main:
    - title: "About Me"
      url: "/#about-me"
    - title: "Publications"
      url: "/#publications"
    - title: "Education"
      url: "/#education"
    - title: "Internships"
      url: "/#internships"

4. Add Section Anchors

• File: _pages/about.md
• Change: Insert HTML anchors before the major sections to ensure the navigation links jump correctly.
  • Before Publications: <span class='anchor' id='publications'></span>
  • Before Education: <span class='anchor' id='education'></span>
  • Before Internships: <span class='anchor' id='internships'></span>
  • Ensure the "About Me" anchor is consistent.

5. Verify "Homepage"

The "Homepage" link is already hardcoded in _includes/masthead.html. No change needed there as the user wants to keep it.

Please implement these changes to resolve all the reported issues.

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.