PPT 风格图片轮播展示这是一个类似 PPT 的图片轮播界面，你可以左右切换查看不同的图片。
测试按钮
轮播容器区域
如果能看到这个蓝色边框，说明轮播容器是可见的
轮播展示
美丽的山水日落
现代城市夜景
多彩的秋季森林
热带海滩风光
如何使用
点击左右箭头切换图片
点击底部的圆点直接跳转到对应图片
图片会自动播放（每5秒切换一次）
技术实现这个轮播使用了纯 HTML、CSS 和 JavaScript 实现，无需任何外部库。
特点
响应式设计，适配不同屏幕尺寸
平滑的过渡动画
自动播放功能
触摸支持（移动端可左右滑动）
支持键盘左右键控制
/* PPT 轮播样式 */
.ppt-carousel {
margin: 20px 0;
position: relative;
max-width: 100%;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
} ...
代码与公式展示这是一个用于展示代码片段和数学公式的页面，使用安知鱼主题自带的代码高亮样式。
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']],
processEscapes: true,
processEnvironments: true
},
options: {
skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
};
document.addEventListener('DOMContentLoaded', function() {
const formulaSection = document.querySelector('.math-formula-section');
...
COMSOL 仿真结果展示这是一个使用 Three.js 实现的 COMSOL 仿真结果展示页面，支持 STL 格式模型的加载和交互操作。
什么是 CDN？CDN (Content Delivery Network) 是内容分发网络的缩写，它是一种分布式服务器系统，用于将静态资源（如 JavaScript、CSS、图片等）缓存到全球各地的服务器节点上。当用户访问网站时，系统会从离用户最近的服务器节点加载资源，从而提高加载速度，减少服务器流量。
3D 模型展示
仿真数据
仿真结果图表
温度分布仿真结果
压力分布仿真结果
速度场仿真结果
模型控制
模型控制
自动旋转
重置视角
线框模式
加载模型
数据面板
仿真数据
最大温度:
120°C
最小压力:
0.5 MPa
...
视频推荐示例这是一个使用卡片式布局推荐bilibili视频的示例，展示了如何在Hexo博客中美观地嵌入视频。
// 自动生成带时间戳的视频 URL，防止缓存
function generateVideoUrl(baseUrl) {
const timestamp = new Date().getTime();
const separator = baseUrl.includes('?') ? '&' : '?';
return baseUrl + separator + 't=' + timestamp;
}
// 当页面加载时处理所有视频 iframe
document.addEventListener('DOMContentLoaded', function() {
const iframes = document.querySelectorAll('iframe.bilibili-video');
iframes.forEach(iframe => {
const src = iframe.g ...
知识图谱示例这是一个使用 D3.js 实现的知识图谱示例，展示了 Hexo 博客相关的技术栈关系。
知识图谱
// 从后端 API 获取知识图谱数据
let nodes = [];
let links = [];
// API 基础 URL
const API_BASE_URL = "http://localhost:8000";
// 加载数据
async function loadKnowledgeGraphData() {
try {
const response = await fetch(`${API_BASE_URL}/api/knowledge-graph/`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
// 转换数据格式，确保 links ...
Hello WorldThis is your first post with Hexo and anzhiyu theme!
