PrimeEdge 主题教程

自定义代码

注入自定义 CSS 和 JavaScript

自定义代码

PrimeEdge 支持在不修改主题文件的情况下注入自定义 CSS 和 JavaScript，方便你进行个性化调整。

自定义 CSS

创建自定义样式文件

在站点根目录创建 assets/css/custom.css：

/* 自定义样式 */
.custom-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

主题会自动加载此文件，无需额外配置。

常用自定义场景

修改文章宽度

.article-content {
  max-width: 800px;
}

隐藏特定元素

/* 隐藏文章页脚的作者信息 */
.article-footer .author-info {
  display: none;
}

添加自定义动画

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.custom-animate {
  animation: fadeIn 0.5s ease-out;
}

自定义 JavaScript

创建自定义脚本文件

在站点根目录创建 assets/js/custom.js：

// 自定义脚本
console.log('PrimeEdge Custom Script Loaded');

// 示例：页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 你的代码
});

常用自定义场景

添加统计代码

// 百度统计
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?your-id";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();

添加交互效果

// 点击复制代码
document.querySelectorAll('pre code').forEach(block => {
  block.addEventListener('click', function() {
    navigator.clipboard.writeText(this.textContent);
    // 显示提示
  });
});

自定义头部模板

如需在 <head> 中注入自定义内容，创建 layouts/partials/custom/head.html：

<!-- 自定义头部内容 -->
<meta name="custom-meta" content="value">
<link rel="stylesheet" href="/custom-style.css">

自定义页脚模板

如需在页脚注入自定义内容，创建 layouts/partials/custom/footer.html：

<!-- 自定义页脚内容 -->
<div class="custom-footer">
  <p>自定义页脚信息</p>
</div>

注意事项

  1. 避免覆盖主题样式 — 尽量使用更具体的选择器，避免影响主题默认样式
  2. 性能考虑 — 自定义代码不宜过多，避免影响页面加载速度
  3. 兼容性 — 测试自定义代码在不同浏览器中的表现
  4. 升级安全 — 自定义代码放在站点目录下，主题升级时不会丢失

调试技巧

  1. 使用浏览器开发者工具（F12）检查元素
  2. 在 custom.css 中添加 !important 测试样式优先级
  3. 使用 console.log() 调试自定义 JavaScript

下一步

评论

0%