1 准备工作

本节内容基于上一节建立的website project，详见build website
打开R project，加载blogdown包

library(blogdown)
serve_site()

项目中各个文件的内容可参见wowchemy

2 修改config

在项目根目录里找到config-_default_config.yaml,双击打开
title修改网站名title: Your website name

3 修改主页内容

在项目根目录里找到content-_index.md,双击打开

3.1 添加section

在_index.md文件的---内部添加任意多的block,例如，下面是两个纯文本section的例子

---
# Page title
title: My page
# Page type - we want a landing page (such as a homepage)
type: landing

# Your landing page sections - add as many different content blocks as you like
sections:
  - block: markdown
    id: section-1
    content:
      title: Section 1
      subtitle: A subtitle
      text: Add any **markdown** formatted content here - text, images, videos, galleries - and even HTML code!
  - block: markdown
    id: section-2
    content:
      title: Section 2
      subtitle: A subtitle
      text: Add your Section 2 content here...
---

3.2 链接section

可以通过编辑config/_default/menus从导航栏中链接主页部分。并添加节的id。例如，如果节的id为section-1，则在menu的URL中将其引用为"/#section-1"。

#_index.md中的内容
  - block: contact
  content:
    address:
      city: Stanford
      country: United States
      country_code: US
      postcode: "94305"
      region: CA
      street: 450 Serra Mall
    email: test@example.org
    title: Contact
  design:
    columns: "2"
  id: contact #id
#menu中的内容
  - name: 联络方式
    url: '#contact' #对应id
    weight: 30

3.3 删除section

例如首页的Hugo Academic Theme，对应index.md中的block：hero

- block: hero
  content:
    cta:
      label: '**Get Started**'
      url: https://wowchemy.com/templates/
    cta_alt:
      label: Ask a question
      url: https://discord.gg/z8wNYzb
    cta_note:
      label: '<div style="text-shadow: none;"><a class="github-button" href="https://github.com/wowchemy/wowchemy-hugo-themes"
        data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star">Star
        Wowchemy Website Builder</a></div><div style="text-shadow: none;"><a class="github-button"
        href="https://github.com/wowchemy/starter-hugo-academic" data-icon="octicon-star"
        data-size="large" data-show-count="true" aria-label="Star">Star the Academic
        template</a></div>'
    image:
      filename: hero-academic.png
    text: |-
      **Generated by Wowchemy - the FREE, Hugo-based open source website builder trusted by 500,000+ sites.**

      **Easily build anything with blocks - no-code required!**

      From landing pages, second brains, and courses to academic resumés, conferences, and tech blogs.

      <!--Custom spacing-->
      <div class="mb-3"></div>
      <!--GitHub Button JS-->
      <script async defer src="https://buttons.github.io/buttons.js"></script>
    title: Hugo Academic Theme
  design:
    background:
      gradient_end: '#1976d2'
      gradient_start: '#004ba0'
      text_color_light: true

注意，对block内容进行修改时，可能会影响到导航栏的超链接，需要同步修改config-_default_menus.yaml中的内容。例如，如果Contact部分的id从contact更改为contact-me，则可以更新menu.yaml中的/#contacturl为/#contact-me。

3.4 调整section顺序

在_index.md中复制粘贴调整section的顺序

3.5 自定义section内容

3.5.1 wowchemy布局

wowchemy提供了许多布局样式

Figure 3.1: wowchemy 提供的布局
点进去usage有对应的代码，复制加入_index.md即可

Figure 3.2: 使用wowchemy 提供的布局

3.5.2 标题和文字排版

标题title，subtitle
文本text中可以添加任何markdown格式的文本和图像内容。
columns设置可以为内容块配置节中的列数。有效的选项有:
- 1:一个全宽的列，section内容出现在section标题的正下方(如果设置了的话)
- 2:两列，左侧显示章节标题，右侧显示章节内容

---
# Page title
title: My page
# Page type - we want a landing page (such as a homepage)
type: landing

# Your landing page sections - add as many different content blocks as you like
sections:
  - block: markdown
    id: section-1
    content:
      title: Section 1
      subtitle: A subtitle
      text: Add any **markdown** formatted content here - text, images, videos, galleries - and even HTML code!
    design:
      # Choose how many columns the section has. Valid values: '1' or '2'.
      columns: '1'
---

3.5.3 布局样式

设置显示样式view，可选的包括
- List (1)
- Compact (2)
- Card (3)
- Citation (4)
- Showcase (5)

- block: collection
  content:
    filters:
      exclude_featured: true
      folders:
      - publication
    text: |-
      {{% callout note %}}
      Quickly discover relevant content by [filtering publications](./publication/).
      {{% /callout %}}
    title: Recent Publications
  design:
    columns: "2"
    view: citation#设置展示样式

Figure 3.3: list view

Figure 3.4: citation view

- block: collection
  content:
    count: 5
    filters:
      author: ""
      category: ""
      exclude_featured: false
      exclude_future: false
      exclude_past: false
      folders:
      - post
      publication_type: ""
      tag: ""
    offset: 0
    order: desc
    subtitle: ""
    text: ""
    title: Recent Posts
  design:
    columns: "2"
    view: compact #设置展示样式
  id: posts

Figure 3.5: compact view

Figure 3.6: showcase view

Figure 3.7: card view

3.5.4 图标

可以使用来自font awesome和academicons的图标
在config-default-params.yaml中设置允许图标

extensions:
  academicons:
    enable: true

使用fab pack图标，查看所有图标

- block: features
  content:
    items:
    - description: 90%
      icon: r-project #链接中的图标名
      icon_pack: fab #选择图标pack
      name: R #显示的图标名称

使用fas pack图标，查看所有图标

- block: features
  content:
    items:
    - description: 100%
      icon: chart-line #链接中的图标名
      icon_pack: fas #选择图标pack
      name: Statistics #显示的图标名称

使用自定义的图标(可以用这个网站自定义),将SVG格式的图标保存至assets/media/icons/，直接按名字调用（不需要后缀.svg）即可

3.5.5 背景颜色

在design:background里设置block背景
纯色背景，可选颜色包括html color name和html color code

design:
  background:
    # Choose a color such as from https://html-color-codes.info
    color: 'navy'
    # Text color (true=light, false=dark, or remove for the dynamic theme color). 
    text_color_light: true

渐变背景

design:
  background:
    # Choose colors such as from https://html-color-codes.info
    gradient_start: '#4bb4e3'
    gradient_end: '#2b94c3'
    # The gradient angle from 0-360 degrees
    gradient_angle: 180
    # Text color (true=light, false=dark, or remove for the dynamic theme color).
    text_color_light: true

图片背景

design:
  background:
    image:
      # Name of image in `assets/media/`.
      filename: background.jpg
      # Apply image filters?
      filters:
        # Darken the image? Range 0-1 where 1 is transparent and 0 is opaque.
        brightness: 0.6
      #  Image fit. Options are `cover` (default), `contain`, or `actual` size.
      size: cover
      # Image focal point. Options include `left`, `center` (default), or `right`.
      position: center
      # Use a fun parallax-like fixed background effect on desktop? true/false
      parallax: true
      # Text color (true=light, false=dark, or remove for the dynamic theme color).
      text_color_light: true

视频背景

design:
  background:
    video:
      # Name of video in `assets/media/`.
      filename: background-video.mp4
      # Post-processing: flip the video horizontally?
      flip: false

3.5.6 间隔

可以通过指定部分的顶部、右侧、底部和左侧的填充来控制block之间的间距

design:
  spacing:
    # Customize the section spacing. Order is top, right, bottom, left.
    padding: ["20px", "0", "20px", "0"]

3.5.7 css样式

可以使用CSS自定义小部件的特定实例的样式。例如，可以更改部分的字体大小。
要将新样式应用到小部件上，请在小部件的前面设置css_class。例如css_class: “MY_CSS_CLASS”，其中MY_CSS_CLASS是您在上一步中定义的CSS类的名称。可以添加多个类，用空格分隔。

design:
  css_style: ''
  css_class: ''

4 修改样式

在项目根目录里找到config-_default_params.yaml,双击打开

4.1 修改外观

appearance设置外观

appearance:
  theme_day: Earth
  theme_night: Coffee
  font: minimal
  font_size: L

theme样式可参见color themes,可设置明亮和黑暗两种模型，具体包括：
font字体样式可参见fonts,可以设置大小，包括：
也可以自定义主题格式,参见Custom theme

4.2 修改导航栏

site header设置导航栏样式

# Site header

header:
  navbar:
#设置是否展示navbar
    enable: true
#navbar 位置 l左 c中 r右
    align: l
#在导航栏中显示您的网站标题或“content/media/logo*”图像?
    show_logo: true
#显示语言选择器(如果您已经翻译了您的网站内容)?
    show_language: false
#让用户选择默认亮/暗模式?
    show_day_night: true
#让用户从导航栏搜索?
    show_search: true
#尝试自动突出显示活动菜单链接?对于复杂的站点可以禁用。
    highlight_active_link: true

在项目根目录里找到config-_default_menus.yaml,双击打开修改导航栏内容
可以更改导航栏上的名称name，链接URL和顺序weight，例如把导航栏全换成中文

main:
  - name: 主页
    url: '#about'
    weight: 10
  - name: 帖子
    url: '#posts'
    weight: 20
  - name: 项目
    url: '#projects'
    weight: 30
  - name: 报告
    url: '#talks'
    weight: 40
  - name: 文献
    url: '#featured'
    weight: 50
  - name: 联络方式
    url: '#contact'
    weight: 60

url对应的是根目录-content-index.md中id的内容，当修改id时也要在menu.yaml中修改超链接的对应
weight大小指示排列顺序
用identifier和parent:设置子目录

  - name: 科学研究
    identifier: research #母目录设置identifier标识
    weight: 20
  - name: 论文
    parent: research #在子目录里设置parent设置对应母目录
    url: '#featured'
    weight: 1
  - name: 报告
    parent: research
    url: '#talks'
    weight: 2
    
  - name: 数据分析
    identifier: data
    weight: 30
  - name: 项目
    parent: data
    url: '#projects'
    weight: 1
  - name: 教程
    parent: data
    url: '#posts'
    weight: 2

更多关于hugo menu设置请参见hugo menu

4.3 设置时间日期格式

locale修改格式，可选的格式参见Date/time options

# Localization

locale:
  date_format: 'Jan-2-2006'
  time_format: '3:04 PM'
  address_format: en-us

Basic-configuration

Basic-configuration

1 准备工作

2 修改config

3 修改主页内容

3.1 添加section

3.2 链接section

3.3 删除section

3.4 调整section顺序

3.5 自定义section内容

3.5.1 wowchemy布局

3.5.2 标题和文字排版

3.5.3 布局样式

3.5.4 图标

3.5.5 背景颜色

3.5.6 间隔

3.5.7 css样式

4 修改样式

4.1 修改外观

4.2 修改导航栏

4.3 设置时间日期格式