Catalog
Hexo-Theme-Academia 说明文档

Github: PhosphorW/hexo-theme-academia (Release: 1.1.0)

Demo: phosphorw.github.io

这段时间除了整理这个荒废的 blog,另一件事情就是写了一个 Academic 的介绍页。本来想着写个单页直接扔到服务器上,但是发现好像功能太简单了就干脆包装成一个 Hexo 的主题发布了,也方便大家修改。(Github 上 theme 的 PR 已经通过,很快就能出现在主题清单里了)

「 为什么需要 Academic Page 」

之前申请 PHD 的时候发现国外的很多组、教授、学生都喜欢做个人的展示页来展示自己或者实验室的成果,按国内许多老师的想法这是在炫耀成果或是觉得泄露了核心机密。其实不然,当你能大大方方的挂出自己的成果接受大众的审查、批判时,才是对自己成果的肯定,这才是一个研究人员应有的态度。

How to prove yourself. Show me your papers.

mockup

Theme 配置

我一直觉得 Academia 是一个很优美的词语,所以这个主题就使用了这个名字。我参考了很多学术展示页,最基本的特征就是简单,它不需要 blog 各种配置,最主要的作用就是展示你最 highlight 的成果。

Academia 的样式是我从 Jeykll 上的 academicpages 参考来的,因为它最符合我的审美(感谢原作者),然后我在 Hexo 上做了一些小的调整,只保留了 postpage 两个功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
│ _config.yml

├─layout
│ │ index.pug
│ │ page.pug
│ └─includes
│ footer.pug
│ header.pug
│ layout.pug
│ mobile-nav.pug
│ side-card.pug
└─source
├─attaches
│ CV.pdf
├─css
│ index.styl
│ user.styl
├─img
│ favicon.png
│ profile.png
└─js
main.js

准备工作及安装

对于不熟悉 Hexo 相关操作的朋友,下面这些基础知识还是需要掌握一下的:

  • 发布 Hexo 博客: Easy-Hexo
  • Git
  • Markdown 语法: Learn more
  • 配置服务器 (可选)
  • 二次开发: Yaml, Jade/Pug, Stylus (可选)
  • Balabala…

安装

1
git clone https://github.com/PhosphorW/hexo-theme-academia.git themes/Academia

必要的 renderers:

1
npm install hexo-renderer-pug hexo-renderer-stylus

最后在 _config.yml 中设置 theme: Academia

使用方法

支持 post and page 两种页面

1
2
hexo n post "your title"
hexo n page "your title"

academia: true

只有 post 的 front-matter 中写有 academia: true 才会展示在首页,可以将要展示的信息写在一篇或多篇 post 中。这个标记对于 page 页是无效的。

说明

所有主题相关的样式配置都在 academia/__config.yml 中,主要有三部分内容:

  1. Top Menu 区域:可以自行配置页内跳转、链接到其他 post 或 page、外部链接等
  2. Sidebar 区域:个人头像、包括但不限于 Demo 中已经展示出的图标、外部链接展示、详细的 CV 链接
  3. Content 区域:首页仅仅展示 front-matter 带 academia: true 标记的 post 内容,其余 post 或 page 页可通过顶部菜单的链接展示,page 页与主页的样式一致

(所有图标支持 font-awesome-4)

theme-layout

Author: Phower
Link: https://phower.me/2020/03/Hexo-theme-academia-说明文档/
Copyright: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
Donate
  • WeChat
    WeChat
  • AliPay
    AliPay
Comment