GitHub热力图样式实现

ln1sdt0a.png

第一步:创建新的 Hexo 页面

  1. 打开您的 Hexo 项目,可以使用代码编辑器或终端。
  2. 运行以下命令创建一个新页面。将 your-page-name 替换为您想要的页面名称(例如 heatmap):

    bashCopy code
    hexo new page your-page-name
  3. 这将在 source 目录下创建一个名为heatmap的文件夹。

第二步:添加 HTML 和 JavaScript 代码

将index.html文件复制到heatmap文件夹。

第三步:配置 Front Matter

  1. 在heatmap文件夹创建一个名为 heatmap.md 的 Markdown 配置文件,用于配置自定义页面的标题、布局等信息:

    shellCopy code$ cd source/heatmap
    $ touch heatmap.md
  2. 编辑自定义页面配置文件: 使用文本编辑器(如 VSCode、Sublime Text 等)打开 heatmap.md 文件,然后将以下内容粘贴到文件中并进行适当的编辑:

    ---
    title: 热力图
    layout: default
    ---
    
    
    <!-- 网页内容将由 index.html 文件嵌入 -->
    <iframe src="index.html" width="100%" height="800px" style="border: none;"></iframe>
    
  3. 根据需要自定义页面内容。您可以根据需要修改标题、布局等文本。
  4. 生成并部署博客: 在完成上述步骤后,使用以下命令生成并部署博客:

    rubyCopy code$ hexo generate
    $ hexo deploy

    这将生成包含您的自定义页面的静态网页文件,并将其部署到您配置的远程仓库。

  5. 查看自定义页面: 在完成部署后,您可以在浏览器中访问您的博客,然后导航到 http://your-domain/heatmap 来查看您添加的自定义页面。

GitHub源码:https://github.com/zkmhy2023/heatmap

本文链接:

https://ai1223.com/archives/68/
1 + 1 =
2 评论
    windChrome 117Windows 10
    2023年09月30日 回复

    haha~