Страница Hu go отображается неправильно - PullRequest
0 голосов
/ 19 июня 2020

Я пытаюсь создать блог stati c, используя Hu go и эти руководства ( здесь и здесь ).

Я установил Hu go и создал небольшой пост в блоге для тестирования. Страница отображается правильно, когда я запускаю в браузере hugo server -D и go - localhost:1313. Однако страница отображается некорректно, когда я просто открываю public/index.html в браузере.

Я использую файл конфигурации , который поставляется с темой, которую я использую. В файле конфигурации я изменил атрибут темы на имя темы и baseURL на '/', а также другие поля меньшего размера, такие как автор, описание и авторские права.

Почему index.html правильно ли отображается, когда он обслуживается с локального сервера Hu go, но не когда я просто обращаюсь к нему как к файлу через браузер?

Вот мой блог правильно отображается через Hu go сервер

Вот мой блог некорректно отображается из-за прямого доступа к файлам

Это мой файл конфигурации

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, созданный Hu go

<!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>

Ответы [ 2 ]

0 голосов
/ 19 июня 2020

Предполагая, что ваши файлы макета используют relURL, ¹ поместите следующее в свой config.toml.

relativeURLs = true

Убедитесь, что ...

  • эта строка находится прежде всего Таблицы TOML
  • строка relativeURLs использует эти символы верхнего и нижнего регистра

Это задокументировано в https://gohugo.io/content-management/urls/#relative -urls :

По умолчанию все относительные URL-адреса не меняются с помощью Hu go, что может быть проблемой c, если вы хотите сделать свой сайт доступным для просмотра из локальной файловой системы. Установка параметра relativeURL в значение true в конфигурации вашего сайта приведет к тому, что Hu go перезапишет все относительные URL-адреса относительно текущего содержимого. Например, если ваша / posts / first / page содержит ссылку на / about /, Hu go перепишет URL-адрес на ../../about/.

¹ relURL задокументирован по адресу https://gohugo.io/functions/relurl/, и ваша тема, которая, как мне кажется, https://github.com/alexandrevicenzi/soho, использует его.

0 голосов
/ 19 июня 2020

Похоже, что файлы CSS не загружены на вашу страницу. Скорее всего, они неправильно указаны в файле HTML, то есть в теме или макетах.

В вашем config.toml Я вижу, что вы установили baseURL на /, но это должен включать имя хоста, например, https://yoursite.com/. Проверьте ссылку на конфигурацию Hu go .

При локальном запуске с hugo server, вы можете изменить эту настройку с помощью флага --baseURL .

...