建站记录

【ing…】标识表明该功能不够完善，还将继续修改

1 简化sidebar目录

将archive、categories、tags变为标签添加到home页面，并在sidebar目录处隐藏这三个标签

• 在_layouts\home.html中，添加title、permalink和pagination，并将archive、categories、tags的URL放入页面中

<div class="mb-4 d-flex gap-3">
  <a href="/categories/" class="text-decoration-none">
    <i class="fas fa-folder-open me-1"></i> Categories
  </a>
  <a href="/archives/" class="text-decoration-none">
    <i class="fas fa-archive me-1"></i> Archives
  </a>
  <a href="/tags/" class="text-decoration-none">
    <i class="fas fa-tags me-1"></i> Tags
  </a>
</div>

• 在_tabs目录下，依次在archive、categories、tags文件的front matter中添加hidden:true

• 在_includes\sidebar.html中，重写部分语句为语句，使得在生成网站导航目录时，排除隐藏使能为true的页面（即被列入隐藏的tab不进行列入目录的操作）

• 修改home页面三个图标间隔，只需要将 <a href="/archives/" class="text-decoration-none"> 修改为 <a href="/archives/" class="text-decoration-none me-3">，表示图标之间间隔3像素

2 更改鼠标样式

更改网页鼠标样式为自定义样式

• 在\assets\img中添加鼠标样式.cur文件或目录
• 在\assets\css\jekyll-theme-chripy.scss文件中添加相关代码

/* 设置全局和图片鼠标样式 */
body {
  cursor: url('/assets/img/MarioCursor/NormalSelect.cur'), auto;
}

/* 链接、按钮、图片鼠标样式 */
a, button, .link, .btn, [type="button"], img {
  cursor: url('/assets/img/MarioCursor/LinkSelect.cur'), pointer;
}

/* 忙碌状态鼠标样式 */
.wait, .loading {
  cursor: url('/assets/img/MarioCursor/HelpSelect.cur'), wait;
}

/* 禁止操作光标 */
.not-allowed {
  cursor: url('/assets/img/MarioCursor/Unavailable.cur'), not-allowed;
}

/* 文本框操作光标 */
input, textarea, select {
  cursor: url('/assets/img/MarioCursor/Handwriting.cur'), text;
}

3 配置与应用图床【ing…】

使用 **PicGo + GitHub + CDN **方式，加速图片访问

• 图床配置参考教程：一劳永逸，使用 PicGo + GitHub 搭建个人图床
• PicGo下载链接：PicGo：一个用于快速上传图片并获取图片URL链接的工具
• CDN加速，只需要修改Picgo中Github图床的自定义的域名为https://cdn.jsdelivr.net/gh/用户名/仓库名@分支名

使用CDN后，图片加载还是很慢，使用 PageSpeed 进行测试，发现原来是图片太大了，后续打算使用 squoosh 将 .jpg 格式转换为 .webp 格式上传网站

4 增加运行天数统计

克隆 _includes\footer.html 文件添加代码，使用 JavaScript + HTML 计算并显示内容

！！由于Jekyll搭建的是静态网站，所以需要使用JavaScript实时记录运行时间

！！由于GitHub Pages默认启用了严格的安全策略，会阻止内联JavaScript的执行，所以需要单独建立 .js 文件

• 在 assets\js\data 中新建文件 runtime.js，添加计算网站运行时间的代码

// 使用JavaScript代码，计算网站运行时间
function calculateRuntime() {
  const startDate = new Date('2025-07-15T00:00:00+08:00'); // 修改为网站上线时间
  const now = new Date();
  
  const diff = now - startDate;	// 计算时间差(毫秒)
  
  // 毫秒 转换为 时、分、秒
  const hours = Math.floor((diff / (1000 * 60 * 60)) + (diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);
  
  // 计算结果显示在网页上
  document.getElementById('site-runtime').innerHTML = 
    `<strong>${hours}</strong>h <strong>${minutes}</strong>m <strong>${seconds}</strong>s`;
}

// 页面加载时计算并每秒更新一次
document.addEventListener('DOMContentLoaded', function() {
  calculateRuntime();
  setInterval(calculateRuntime, 1000); // 每秒更新一次
});

• 将时间显示在网页底部

<!-- 添加网站运行时间统计 -->
  <div class="site-runtime" style="text-align: center; margin-top: 0; font-size: 1em;">
    <p>🚀 Site-Runtime <span id="site-runtime">⏳Loading...</span></p>
  </div>
  
  <!-- 引用外部计算时间的js文件 -->
  <script src="/assets/js/data/runtime.js"></script>

5 网页嵌入智能体EndlessQ【ing…】

嵌入了基于 dify + deepseek 创建的一个简单的文献提问助手Agent

• 在dify中进行配置与创建Agent

  1. 配置deepseek api key
  2. 创建chatflow并搭建简易工作流程
  3. 进行该应用的测试
  4. 复制该应用嵌入网页使用的<iframe>…</iframe>

• 在网页中嵌入Agent

  1. _tab目录下新建_EndlessQ.md文件，并填写yml
  2. _layout目录下新建_EndlessQ.html文件，补充内容并作调整

尽管嵌入了智能体，也能够正常使用，但加载的速度实在太慢！切换页面后就需要重新加载！问题待解决