Hexo新手咨询：如何为当前页面导航项添加a:active状态？

Absolutely! Adding an a:active state (the style that triggers when a link is being clicked) to your Hexo site's navigation is straightforward with basic HTML and CSS. Here's how to do it:

Step 1: Locate Your Navigation's HTML Structure #

First, find where your theme renders the navigation menu. Most Hexo themes store this in a partial template file—common paths are:

• layout/_partial/header.ejs (for EJS-based themes)
• layout/partials/nav.njk (for Nunjucks-based themes)

Open that file, and you'll see code similar to this (your exact class names might vary):

<nav class="site-navigation">
  <ul class="nav-list">
    <li class="nav-item"><a href="/" class="nav-link">Home</a></li>
    <li class="nav-item"><a href="/about/" class="nav-link">About</a></li>
    <li class="nav-item"><a href="/blog/" class="nav-link">Blog</a></li>
  </ul>
</nav>

Note down the class names associated with the navigation links (like nav-link in this example) — you'll need them for your CSS.

Step 2: Add the a:active Style to Your CSS #

Next, open your theme's main CSS file. Typical locations are:

• source/css/style.css
• assets/css/main.css

Add a rule targeting the :active pseudo-class for your navigation links. Customize the styles to match your site's design:

/* Style for active (clicked) navigation links */
.nav-link:active {
  color: #ff4757; /* Change text color on click */
  background-color: #f1f2f6; /* Add a background highlight */
  border-radius: 3px; /* Optional: rounded corners */
  padding: 4px 8px; /* Adjust padding if needed */
}

/* If your links don't have a specific class, target them via the nav container */
.site-navigation a:active {
  /* Alternative styles here */
  font-weight: bold;
  border-bottom: 2px solid #2ed573;
}

A Quick Note on Confusion Points #

Keep in mind that a:active is only for the moment a link is being clicked. If you want the navigation item for the current page to stay highlighted (e.g., the Home link stays active when you're on the homepage), that's a different feature—usually handled by adding a .current or .active class to the link via your theme's template logic. But that's separate from the :active pseudo-class you asked about!

Save your changes, then run hexo clean && hexo server to preview the effect. Click any navigation link, and you'll see your custom active state kick in.

内容的提问来源于stack exchange，提问作者Aims