本主页diy心得

Published in Peking Univercity, 2024

谈谈我对这个项目的理解

academicpages没有系统性的官方文档,这让我这么一个门外汉在diy的时候遇到了很多困难,因此撰写了这个文档用以参考

项目源码: https://github.com/academicpages/academicpages.github.io
我的DIY版本: https://github.com/ICUlizhi/ICUlizhi.github.io
一. academicpages的文件系统
本章可以跳过
系统
_sass
_site : 本地运行生成的网站文件,网络部署无需此文件夹
assets : 核心代码
talkmap
设置
_data
- _commets
- _authors.yml
- _navigation.yml
- _ui-text.yml
_includes
config.dev.yml
config.yml : 核心的设置文件
网站内容
images : 放图片
files : 放文件
_draft,_talks,_teaching,_publications,_portfolio,_posts : 每个导航栏单独一个文件夹,存放markdown
_pages : 页面内容,放markdown和html
_layouts
其他
markdown_generatot : md生成器

二. 配置

云端部署

使用github代理部署即可，想换域名也可以，网上都有教程,推荐一个校友的教程,和本项目是配套的戳这里

本地运行

必须用linux,在windows上配置是极为困难的
academicpagesd的readme提供的环境配置很不仔细,遇到诸多版本问题,我使用了RVM调整ruby的版本,并手动加了一些包

1. 更新系统包列表并安装 GnuPG 2

sudo apt update
sudo apt install gnupg2

2. 导入 RVM 的 GPG 密钥并安装 RVM

command curl -sSL https://rvm.io/mpapis.asc | gpg --import -
command curl -sSL https://rvm.io/pkuczynski.asc | gpg --import -
\curl -sSL https://get.rvm.io | bash -s stable
source ~/.rvm/scripts/rvm

3. 装ruby

rvm install ruby
rvm docs generate-ri
rvm use ruby --default

装成功了belike:

4. 安装项目依赖

bundle install
bundle add webrick faraday-retry

5. 运行代码

bundle exec jekyll liveserve

然后就可以在http://localhost:4000/看到我们的网站了,这个进程你不关闭它是不会停的,且会在运行中输出一些报错

三. diy方法

基本信息设置

看教程

如何在导航栏中增加 repositories

1. config.yml

Collections模块

  Repositories:
    output: true
    permalink: /:collection/:path/

Defaults模块

  - scope:
      path: ""
      type: Repositories
    values:
      layout: single
      author_profile: true
      share: true
      comments: true

2. _data/navigation.yml

  - title: "Repositories"
    url: /Repositories/

3. _pages/Repositories.md

这个文件需要自行添加,参考代码如下:

---
layout: archive
title: "Repositories"
permalink: /Repositories/
author_profile: true
---

<div class="list__item">
  <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
    
    <h2 class="archive__item-title" itemprop="headline">
      
        <a href="https://iculizhi.github.io/Repositories/AI-live-face-changing" rel="permalink">AI live face changing
</a>
      
    </h2>
    
         <p class="page__date"><strong><i class="fa fa-fw fa-calendar" aria-hidden="true"></i> Published:</strong> <time datetime="2024-10-28T00:00:00-07:00">October 28, 2024</time></p>
        
    <p class="archive__item-excerpt" itemprop="description"><p>ai换脸直播代码</p>
<ul>
  <li>状态 : 完结,开源</li>
  <li>描述 : 北大信科2024ai换脸挑战赛亚军代码</li>
  <li>链接 : <a href="https://github.com/ICUlizhi/AI-live-face-changing-linux-">AI live face changing</a></li>
</ul>
</p>
    
  </article>
</div>

<div class="list__item">
  <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
    
    <h2 class="archive__item-title" itemprop="headline">
      
        <a href="https://iculizhi.github.io/Repositories/pdf2note" rel="permalink">pdf2note
</a>
      
    </h2>
    
         <p class="page__date"><strong><i class="fa fa-fw fa-calendar" aria-hidden="true"></i> Published:</strong> <time datetime="2024-09-10T00:00:00-07:00">September 10, 2024</time></p>
        
    <p class="archive__item-excerpt" itemprop="description"><p>pdf转笔记小工具</p>
<ul>
  <li>状态 : 未完结,开源</li>
  <li>链接 : <a href="https://github.com/ICUlizhi/pdf2note">pdf2note</a></li>
</ul>
</p>
    
  </article>
</div>

<div class="list__item">
  <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
    
    <h2 class="archive__item-title" itemprop="headline">
      
        <a href="https://iculizhi.github.io/Repositories/pku.github.io" rel="permalink">pku.github.io
</a>
      
    </h2>
    
         <p class="page__date"><strong><i class="fa fa-fw fa-calendar" aria-hidden="true"></i> Published:</strong> <time datetime="2024-08-22T00:00:00-07:00">August 22, 2024</time></p>
        
    <p class="archive__item-excerpt" itemprop="description"><p>我的第一个html:暂时不能给你明确的答复.com</p>
<ul>
  <li>状态 : 完结,开源</li>
  <li>描述 : 随机跳转北大和信科官网,纯整活</li>
  <li>链接 : <a href="https://github.com/ICUlizhi/ICUlizhi.github.io">ICUlizhi.github.io</a></li>
</ul>
</p>
    
  </article>
</div>

<div class="list__item">
  <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
    
    <h2 class="archive__item-title" itemprop="headline">
      
        <a href="https://iculizhi.github.io/Repositories/jswebpro-lottery" rel="permalink">jswebpro-lottery
</a>
      
    </h2>
    
         <p class="page__date"><strong><i class="fa fa-fw fa-calendar" aria-hidden="true"></i> Published:</strong> <time datetime="2024-08-22T00:00:00-07:00">August 22, 2024</time></p>
        
    <p class="archive__item-excerpt" itemprop="description"><p>jsweb课程大作业,一个简单的抽奖程序的DIY,学工办晚会很好用</p>
<ul>
  <li>状态 : 完结,开源</li>
  <li>链接 : <a href="https://github.com/ICUlizhi/jswebpro-lottery">jswebpro-lottery</a></li>
</ul>
</p>
    
  </article>
</div>

<div class="list__item">
  <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
    
    <h2 class="archive__item-title" itemprop="headline">
      
        <a href="https://iculizhi.github.io/Repositories/pku.github.io" rel="permalink">PKU-2024-IBAL-cracked-version
</a>
      
    </h2>
    
         <p class="page__date"><strong><i class="fa fa-fw fa-calendar" aria-hidden="true"></i> Published:</strong> <time datetime="2024-08-22T00:00:00-07:00">August 22, 2024</time></p>
        
    <p class="archive__item-excerpt" itemprop="description"><p>英美文学概况的资料以及课程攻略,包含大模型写作业,给英文原著作摘要等功能</p>
<ul>
  <li>状态 : 完结,免费</li>
  <li>链接 : <a href="https://github.com/ICUlizhi/PKU-2024-IBAL-cracked-version">PKU-2024-IBAL-cracked-version</a></li>
</ul>
</p>
    
  </article>
</div>

<div class="list__item">
  <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
    
    <h2 class="archive__item-title" itemprop="headline">
      
        <a href="https://iculizhi.github.io/Repositories/ICUlizhi.github.io" rel="permalink">ICUlizhi.github.io
</a>
      
    </h2>
    
         <p class="page__date"><strong><i class="fa fa-fw fa-calendar" aria-hidden="true"></i> Published:</strong> <time datetime="2024-08-20T00:00:00-07:00">August 20, 2024</time></p>
        
    <p class="archive__item-excerpt" itemprop="description"><p>本主页的源码,forked from <a href="https://github.com/academicpages/academicpages.github.io">academicpages/academicpages.github.io</a>,并且将readme.md换成了我diy这个主页的方法,供参考</p>
<ul>
  <li>状态 : 完结,开源</li>
  <li>链接 : <a href="https://github.com/ICUlizhi/ICUlizhi.github.io">ICUlizhi.github.io</a></li>
</ul>
</p>
    
  </article>
</div>

4. _Repositories

为每个项目准备一个md,例如PKU-2024-IBAL-cracked-version.md

---
title: "PKU-2024-IBAL-cracked-version"
collection: Repositories
type: "Repositories"
permalink: /Repositories/PKU-2024-IBAL-cracked-version
venue: "Peking Univercity"
date: 2024-07-28
location: "Beijing, China"
---
英美文学概况的资料以及课程攻略,包含大模型写作业,给英文原著作摘要等功能
- 状态 : 完结,开源
- 链接 : [https://github.com/ICUlizhi/PKU-2024-IBAL-cracked-version](https://github.com/ICUlizhi/PKU-2024-IBAL-cracked-version)

参考效果

在主页加一个记录访问情况的世界地图

点这里

在这个网站整一个,输出一个html对象,复制到about.md,1分钟搞定

导航页代码参考

以Notes页为例: markdown的标题等等可以自由发挥

Front Matter

定义页面的元数据和布局信息

---
layout: archive
title: "Notes"
permalink: /Notes/
author_profile: true
---

展示指定的md文件

这些md文件需要出现在根目录下_Notes文件夹中,不推荐使用直接遍历的写法

md文件的内容

其实就是Front Matter+自由发挥的markdown,可参考模版

效果展示:

Share on

Twitter Facebook LinkedIn

Jing Xu(徐靖)