Question

我正在尝试使用Hugo和这些指南（here和here）创建一个静态博客。

我已经安装了Hugo，并创建了一个用于测试的最小占位符博客文章。当我运行hugo server -D并在浏览器中转到localhost:1313时，页面将正确呈现。但是，当我仅使用浏览器打开public/index.html时，页面无法正确显示。

我正在使用所用主题附带的config file。在配置文件中，我已将theme属性更改为主题名称，baseURL更改为“ /”，以及其他较小的字段，如author，description和copyright。

为什么index.html在从本地Hugo服务器提供服务时呈现正确，但在我只是通过浏览器作为文件访问时却不能正确呈现？

Here is my blog being correctly rendered through Hugo server

Here is my blog post being rendered incorrectly rendered through direct file access

这是我的配置文件

theme = "soho"
baseURL = "/"
title = "Personal Blog" # "The World's Okayest Programmer"
languageCode = "en"
enableInlineShortcodes = true

summarylength = 10
enableEmoji = true

[params]
author = "My Name"
description = "My Blog"

## Set one of:
# gravatar = "soho@example.com"
profilePicture = "images/profile.png"

copyright = "My Name"
license = "CC BY-SA 4.0"
licenseURL = "https://creativecommons.org/licenses/by-sa/4.0"

## Set custom theme color.
# themeColor = "#fc2803"

## Set custom CSS and/or JS to override site defaults.
customCss = ["css/blog.css"]
customJs = ["js/blog.js"]

  ## Set as many as you want.
  [[params.socialIcons]]
  icon = "fa-linkedin"
  title = "Linkedin"
  url = "#"

  [[params.socialIcons]]
  icon = "fa-github"
  title = "GitHub"
  url = "#"

  [[params.socialIcons]]
  icon = "fa-twitter"
  title = "Twitter"
  url = "#"

[menu]

  [[menu.main]]
  name = "Posts"
  weight = 100
  identifier = "posts"
  url = "/posts/"

  [[menu.main]]
  name = "About"
  identifier = "about"
  weight = 300
  url = "/about/"

[taxonomies]
  category = "categories"
  series = "series"
  tag = "tags"

[markup]

  [markup.highlight]
  codeFences = true
  guessSyntax = false
  hl_Lines = ""
  lineNoStart = 1
  lineNos = false
  lineNumbersInTable = true
  noClasses = true # if false, you need to provide you own custom CSS
  style = "monokai"
  tabWidth = 4

这是雨果产生的public/index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="generator" content="Hugo 0.72.0" />
  <title>Personal Blog</title>
  <meta name="description" content="My Blog" />
  <meta itemprop="name" content="Personal Blog">
  <meta itemprop="description" content="My Blog">
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Personal Blog" />
  <meta name="twitter:description" content="My Blog" />
  <meta property="og:title" content="Personal Blog" />
  <meta property="og:description" content="My Blog" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="/" />
  <link type="text/css" rel="stylesheet" href="/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/css/hyde.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
    integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">
  <link href="/index.xml" rel="alternate" type="application/rss+xml" title="Personal Blog" />
</head>
<body>
  <aside class="sidebar">
    <div class="container">
      <div class="sidebar-about">
        <div class="author-image">
          <img src="/images/profile.png" class="img-circle img-headshot center" alt="Profile Picture">
        </div>
        <h1>Personal Blog</h1>
        <p class="lead">My Blog</p>
      </div>
      <nav>
        <ul class="sidebar-nav">
          <li>
            <a href="/">Home</a>
          </li>
          <li>
            <a href="/posts/">Posts</a>
          </li>
          <li>
            <a href="/about/">About</a>
          </li>
        </ul>
      </nav>
      <section class="social-icons">
        <a href="#" rel="me" title="Linkedin" target="_blank">
          <i class="fab fa-linkedin" aria-hidden="true"></i>
        </a>
        <a href="#" rel="me" title="GitHub" target="_blank">
          <i class="fab fa-github" aria-hidden="true"></i>
        </a>
        <a href="#" rel="me" title="Twitter" target="_blank">
          <i class="fab fa-twitter" aria-hidden="true"></i>
        </a>
      </section>
    </div>
  </aside>
  <main class="content container">
    <div class="posts">
    </div>
  </main>
  <footer>
    <div>
      &copy; My Name 2020
      &middot; <a href="https://creativecommons.org/licenses/by-sa/4.0" target="_blank">CC BY-SA 4.0</a>
    </div>
  </footer>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"
    integrity="sha256-MAgcygDRahs+F/Nk5Vz387whB4kSK9NXlDN3w58LLq0=" crossorigin="anonymous"></script>
</body>
</html>

Answer 1

您的页面似乎没有加载CSS文件。很有可能在HTML文件（即主题或布局）中未正确引用它们。

在您的config.toml中，我看到您已将baseURL设置为/，但是应该包含主机名，例如https://yoursite.com/。选中Hugo's config reference。

使用hugo server在本地运行时，可以用--baseURL flag覆盖该设置。

Answer 2

假设您的布局文件使用relURL，¹将以下内容放入config.toml。

relativeURLs = true

请确保...

此行在所有TOML表之上
字符串relativeURLs使用这些大小写字符

记录在https://gohugo.io/content-management/urls/#relative-urls：

默认情况下，Hugo保留所有相对URL不变，当您要使站点可从本地文件系统浏览时，这可能会出现问题。在您的网站配置中将relativeURLs设置为true会导致Hugo重写所有相对于当前内容的相对URL。例如，如果您的/ posts / first /页面包含指向/ about /的链接，则Hugo会将URL重写为../../ about /.

¹relURL记录在https://gohugo.io/functions/relurl/，您的主题（我认为是https://github.com/alexandrevicenzi/soho）使用了它。

雨果页面无法正确呈现

2 个答案: