在本文中，我们将学习如何为WordPress网站创建JavaScript路由，允许平稳的客户端导航，并实现流CSS进度栏以增强用户体验。我们将使用本机JavaScript没有任何框架或库。在本教程结束时，您将对如何构建JavaScript路线并在WordPress网站上实现流CSS Progress Bar。
先决条件
要遵循本文，您应该对HTML，CSS和JavaScript有基本的了解。此外，熟悉WordPress及其模板系统将是有益的。
入门
在我们深入了解代码之前，请确保您启动并运行WordPress网站。在主题目录中创建一个新的目录，并将其命名 js 。在 js 目录中，创建一个名为 main.js 的新文件。这将是我们的主要JavaScript文件，我们将在其中实现JavaScript路由并流css进度栏。
打开wordpress主题的 functions.php 文件，并在 main.js.js 文件中加入。将以下代码添加到您的 functions.php 文件：
function enqueue_custom_scripts() {
wp_enqueue_script( 'custom-scripts', get_template_directory_uri() . '/js/main.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts' );
此代码可确保 main.js 文件已加载在WordPress网站的前端。
实现JavaScript路由
现在，让我们开始为WordPress网站实现JavaScript路由。打开 main.js 文件并添加以下代码：
document.addEventListener("DOMContentLoaded", function () {
const progressBar = document.getElementById("progress-bar");
// Update the progress bar width based on the loading percentage
function updateProgressBar(percentage) {
progressBar.style.width = `${percentage}%`;
progressBar.classList.add("filled");
// hide progress bar when content is loaded
if (percentage == 100) {
setTimeout(() => {
progressBar.classList.remove("filled");
progressBar.style.width = 0;
}, 300);
}
}
// Fetch content based on the URL and update the page
function fetchContent(url) {
updateProgressBar(0); // Reset progress bar
console.log(url);
fetch(url, {
headers: {
"Content-Type": "text/html; charset=utf-8",
},
mode: "cors",
})
.then((response) => {
const reader = response.body.getReader();
const decoder = new TextDecoder("utf-8");
const total = +response.headers.get("Content-Length");
let loaded = 0;
let html = "";
function read() {
reader.read().then(({ done, value }) => {
if (done) {
const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");
// Extract the specific HTML element and their child's from the parsed document
const primary = doc.querySelector("#primary");
// take content element from current page
const appContainer = document.getElementById("content");
// Then, Remove all child elements
while (appContainer.firstChild) {
appContainer.removeChild(appContainer.firstChild);
}
// Append a new element
appContainer.appendChild(primary);
updateProgressBar(100); // Set progress bar to 100% when content is loaded
return;
}
loaded += value.length;
updateProgressBar((loaded / total) * 100);
const chunk = decoder.decode(value, { stream: true });
html += chunk;
// Process the content here if needed
// somthing like pelase wait or spinner..
read(); // Continue reading the stream
});
}
read();
})
.catch((error) => {
console.error(error);
updateProgressBar(0); // Reset progress bar in case of errors
});
}
// Handle link clicks
function handleLinkClick(event) {
const target = event.target;
// Check if the clicked element or its parent is an anchor element
const anchor = target.closest("a");
if (anchor) {
event.preventDefault();
// Get the href attribute of the anchor element
const targetUrl = anchor.getAttribute("href");
// Update the URL and push a new history state
history.pushState(null, "", targetUrl);
// Fetch and load the content for the clicked link
fetchContent(targetUrl);
}
}
// Attach click event listeners to all links
const allLinks = document.querySelectorAll("a");
allLinks.forEach((link) => {
link.addEventListener("click", handleLinkClick);
});
// Handle the popstate event to update the page when the user navigates back/forward
window.addEventListener("popstate", () => {
fetchContent(window.location.href);
});
});
在上面的代码中，我们首先将事件侦听器附加到 domcontentloaded 事件，以确保我们的JavaScript代码在页面完成后运行。
handlelinkClick 功能负责拦截链接点击，防止默认行为，启动进度栏动画并使用 fetchContent 函数获取单击链接的内容。
fetchContent 函数将get请求发送到目标URL，将响应作为文本检索，停止进度栏动画，并使用获取的html更新内容容器。
确保将CSS文件链接到您的HTML，您可以在其中定义Progress Bar Animation的样式。这是进度栏的基本CSS示例：
.progress-bar-container {
width: 100%;
height: 2px;
background-color: transparent;
position: absolute;
top: 0;
display: block;
}
.progress-bar {
width: 0;
height: 100%;
background-color: #f00;
position: relative;
transition: width 0.3s ease-in-out;
opacity: 0;
}
.progress-bar.filled {
opacity: 1;
}
/* Optional: Add animation to the progress bar */
@keyframes progress-animation {
0% {
width: 0;
}
100% {
width: 100%;
}
}
使用此设置，每当您在WordPress网站上单击链接时，JavaScript代码都会截获点击事件，启动Progress Bar Animation，获取单击链接的内容，然后无缝更新内容容器。
随时自定义CSS样式以匹配您的网站的设计。
就是这样！您已经成功实现了WordPress网站的流CSS进度栏的JavaScript路线。现在，用户将体验到不同页面之间的平稳且视觉上吸引人的导航。