Featured image of post 合并两个Hugo主题：在hugo-theme-stack中使用almeida-cv主题的简历模板
网站

合并两个Hugo主题：在hugo-theme-stack中使用almeida-cv主题的简历模板

在同一个网站中使用两个Hugo主题：在hugo-theme-stack中使用almeida-cv主题的简历模板

缘起

在搭建本网站时，我使用了Hugo主题hugo-theme-stack，可以在关于页面添加个人简历。但是，这个页面的样式并不是传统简历的样式，而是类似于博客文章的样式，不太符合我的要求。 我对简历模板的要求是：

  1. 传统简历的样式，不要花里胡哨
  2. 可以导出为PDF格式
  3. 尺寸为A4纸的大小或letter纸的大小，以便与传统简历的打印尺寸相同

于是我在网上找到了一个大致符合要求的简历模板Almeida CV，但是这个模板是一个完整的Hugo主题，我不想把整个主题都用上，只想用它的简历模板。 在网上查了一些资料后发现，确实是有办法在同一个网站中使用两个Hugo主题的。

实现

下载主题

我们需要下载两个主题，一个是hugo-theme-stack，另一个是Almeida CV。由于我之前已经对hugo-theme-stack进行了一些修改，所以我fork了Jimmy Cai在GitHub上的仓库，我自己修改后的仓库是hugo-theme-stack。

进入网站的根目录，下载这两个主题，并放在themes文件夹中：

1
2

git clone https://github.com/jin-li/hugo-theme-stack themes/hugo-theme-stack
git clone https://github.com/ineesalmeida/almeida-cv themes/almeida-cv

一些修改

  1. 修改配置文件。首先，我们需要在config/_default/config.yaml中指定两个主题：

    1
2
3

    theme: 
    - hugo-theme-stack
    - almeida-cv

    然后将almeida-cv主题配置文件中的设置也合并到config/_default/config.yaml中：

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

    enableRobotsTXT: true
enableEmoji: true

params:
    enableMetaTags: true
    colorLight: '#fff'
    colorDark: '#666'
    colorPageBackground: '#ddd'
    colorPrimary: '#e3bfb8'
    colorSecondary: '#aaa'
    colorIconPrimary: '#fff'
    colorIconBackground: '#e3bfb8'
    colorRightColumnBackground: '#f5f5f5'
    colorRightColumnHeadingText: '#666'
    colorRightColumnBodyText: '#666'
    colorRightColumnIconPrimary: '#fff'
    colorRightColumnIconBackground: '#e3bfb8'
    pages: 1
    swapColumns: false

  2. 新建简历样式。在almeida-cv主题中，简历的样式是在layouts/index.html中定义的，我们把index.html文件复制到layouts/_default文件夹中，并重命名为cv.html。

    1

    cp themes/almeida-cv/layouts/index.html themes/almeida-cv/layouts/_default/cv.html

    然后我们删除掉almeida-cv主题中的assests/scss/_custom.scss文件。这个文件本来就是个空文件，但留着它会覆盖掉hugo-theme-stack主题中的assests/scss/custom.scss文件，导致我们hugo-theme-stack中的配置无效， 因此需要删除掉它。

  3. 复制静态文件。我们需要将almeida-cv主题中exampleSite中提供的模板静态文件复制到网站根目录下，需要关注的文件有两个：

    • exampleSite/data文件夹中的content.yaml文件，这个文件定义了简历的内容，我们需要将它复制到网站根目录下的data文件夹中。之后我们可以修改这个文件中的内容，以便生成我们自己的简历。
    • exampleSite/static/img文件夹中的avatar.jpg文件，这个文件是简历中的头像。由于我们在hugo-theme-stack中其实已经有了一个头像，所以我们可以不用这个文件，只需要重新指定头像的路径即可。例如我在hugo-theme-stack中用的头像存放在网站根目录下的static/favicon.png，所以只需要在data/content.yaml中将头像的路径改为/favicon.png即可。

  4. 修改网站的关于页面。我想把简历放在网站的关于页面，因此需要修改掉依靠hugo-theme-stack主题定义的“关于”页面。网站的“关于”页面由网站根目录下的content/page/about/index.zh-cn.md文件所定义，我们需要指定它使用在第二步中定义的cv.html模板，因此需要在index.zh-cn.md文件中的内容为：

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

    ---
title: "关于"
date: 2023-08-22
layout: "cv"
slug: "about"
menu:
    main:
        weight: -70
        params: 
            icon: archives
---

    在markdown文件中只需要这样一个文件头告诉Hugo依据cv的样式生成页面就行了，因为简历的内容已经在data/content.yaml中定义了。

额外修改

其实有了上面的那些修改，网站的“关于”页面已经变成了almeida-cv主题的简历，但我又做了一些额外的修改，是的简历的样式更符合我的要求。主要的修改包括：

  1. 修改config/_default/config.yaml中的params: swapColumns为true，这样简历中的左右两栏就会交换位置。
  2. 修改简历中education中的样式。
  3. 修改简历中页脚的半透明水印。
  4. 修改网站页面底部的版权信息，添加了almeida-cv主题的版权信息。

这里不再赘述代码上的修改，感兴趣的可以查看我的GitHub仓库https://github.com/jin-li/almeida-cv。

最终效果

最终效果可参见本网站的“关于”页面https://jinli.cyou/about/。

comments powered by Disqus