Jinwen Li

Jinwen Li

如何构建个人主页

2 minute read

Published:

这篇博客介绍了使用 academicpages 模板制作个人主页的基本步骤，以及个人的一些推荐设置。对于博客中任何表述不够明确的配置，都可以访问这个个人主页的 github 仓库 lix19937.github.io 阅读相应文件了解详细内容。

Fork 仓库

fork academicpages 创建自己的名称为 username.github.io 的 github 仓库，等待一段时间后， https://{username}.github.io 网页就可以访问，为 academicpages 的默认配置。

修改基本信息

自我介绍

修改 _pages/about.md，这修改的是 username.github.io 的主页内容，注意上传 about.md 中引用的相关文件。

注意头像图片用 png 格式

基本信息

  1. 修改 _config.yml，主要内容是一些基本信息，这些信息反映在左侧边栏。

  2. 修改 _data/authors.yml

修改顶栏

顶栏主要由 _data/navigation.yml 控制，可以根据自己的需求修改。我将 Talks, Teaching, Guide 部分全部注释掉以实现删除。修改后的 _data/navigation.yml 完整内容如下

# main links links
main:
    - title: "Publications"
      url: /publications/

    # - title: "Talks"
    #   url: /talks/

    # - title: "Teaching"
    #   url: /teaching/

    # - title: "Portfolio"
    #   url: /portfolio/

    - title: "Blog Posts"
      url: /year-archive/

    - title: "CV"
      url: /cv/

    # - title: "Guide"
    #   url: /markdown/

对 Blog Post 重命名

由于原先 blog 部分的名称叫 Blog Post，以及相应的 url 为 /year-archive/，这种取名很奇怪，所以我对其进行了修改。如果不需要对这部分进行修改，可以跳过这一节。

  1. 将 _data/navigation.yml 中 Blog Posts 改为 Blogs
  2. 将 _data/navigation.yml 中原 Blog Posts 对应的 url 从 /year-archive/ 改为 /blogs/。
  3. 将 _pages/year-archive.html 重命名为 _pages/blogs.html，并将其中的 permalink 由 /year-archive/ 修改为 /blogs/，title 由 Blogs posts 修改为 Blogs。

修改后的 _data/navigation.yml 完整内容如下

# main links links
main:
    - title: "Publications"
      url: /publications/

    # - title: "Talks"
    #   url: /talks/

    # - title: "Teaching"
    #   url: /teaching/

    # - title: "Portfolio"
    #   url: /portfolio/

    - title: "Blogs"
      url: /blogs/

    - title: "CV"
      url: /cv/

    # - title: "Guide"
    #   url: /markdown/

增加自己的内容

增加 Publication, Blogs 等部分的内容，只需在以下对应文件夹中创建新的 markdown 文件，即可生成相应的页面。

  • Publications - _publications
  • Talks - _talks
  • Teaching - _teaching
  • Portfolio - _portfolio
  • Blogs - _posts

特别需要注意，创建的 markdown 文件的文件名必须以 yyyy-mm-dd 开头，年、月、日的分隔符必须是 -。例如，2024-07-04-build personal homepage.md，这样才能正确生成网页。

创建新的 blog

主要需要注意的部分是 markdown 文档头部的 metadata 部分。比如这篇 blog 的 metadata 部分如下

---
title: "How to build a personal homepage by academic pages?"
date: 2024-07-04
permalink: /mynonskillposts/2024/07/build personal homepage/
tags:
    - learn
---

考虑到同一天内有可能写多篇博客，所以如果对于网页中显示的各篇博客的先后顺序有要求，那么建议将每篇博客的 markdown 文件命名为 yyyy-mm-dd-{id}-{name}，其中 id 是博客的编号，这样即使在同一天写了多篇博客，博客也可以按自己希望的顺序进行排序。

创建的新 publication

同样需要注意的是 metadata 部分，与 blog 的 metadata 部分类似。下面给出一个例子。

---
title: "Accelerating Data Generation for Neural Operators via Krylov Subspace Recycling"
collection: publications
permalink: /publication/2023-10-13-SKR
excerpt: "Learning neural operators for solving partial differential equations (PDEs) has attracted great attention due to its high inference efficiency..."
date: 2023-10-13
venue: "International Conference on Learning Representations (ICLR)"
paperurl: "https://openreview.net/pdf?id=UpgRVWexaD"
citation: "Hong Wang, Zhongkai Hao, Jie Wang, Zijie Geng, Zhen Wang, Bin Li, Feng Wu, Accelerating Data Generation for Neural Operators via Krylov Subspace Recycling, presented at the The Twelfth International Conference on Learning Representations, Oct. 2023."
---

然而发现 acadmicpages 的模板中存在美中不足的地方

  1. 列出会议的部分前面有 “Published in”
  2. 引用部分开头的 “Recommended citation:” 与具体引用内容在同一行

acadamicpages-origin

所以进行了以下修改

  1. 将 _include/archive-single.html:44 开头的 “Published in” 删除
  2. 在 _include/archive-single.html 的 56, 58, 60, 62 行 “Recommened citation:” 后将空格删除，并增加 <br />，如 62 行改为 <p>Recommended citation:<br />

修改后的页面样式如下

acadamicpages-new

generate-markdown中的问题

注意

blog 默认排序

在确定 blog 排序中，由于 _pages/blogs.html:12 为 for post in site.posts，而非 for post in site.posts reversed，所以以为需要增加 reversed 实现逆序。但实际上不需要加，默认就是逆序，即同一天的 blog 按 id 从大到小排序。

注入

不了解 academicpages 用的是什么技术，但是如果在 markdown 文件中使用了一些语句，那么不管这种语句处于什么样的环境下，都会被识别为 academicpages 的语法。如下

injection-code

injection-rended

第一张图是markdown源码，第二张图是渲染出的网页结果。可以看到 {{post.citation}} (此处的{{post.citation}} 源码其实为 \{\{post.citation\}\}，用斜杠避免了注入，但在代码环境中，增加斜杆会被打印出来) 丢失，即发生了注入。

此处由于是 blog，没有 citation 属性，所以只是没有渲染出来，空着的。而其他一些地方，比如使用了 {{ % for … % }} 的情况下，会导致网页生成失败，发生语法错误。

markdown_generator

这个文件夹下提供了从 tsv 文件生成 markdown 文件的代码，支持 Publications 和 Talks。尝试使用了 Publications，Talks 未使用，不了解是否有坑。

由于网页模板里已经根据 metadata 提供了 citation 和 download url，所以 markdown_generator/publications.py 的第 95-96, 101 行会产生冗余的结果，可以将其注释掉或者删除。如果使用 jupyter notebook，需要注意会有一样的问题。