时间：   |   分类：     |   原创   |   阅读： 970 字 ~2分钟
  • markdown样式

修改主题的markdown的样式，可以通过修改 config.toml文件中的配置

  [markup.highlight]
    style = 'tango'

在这个网站上面可以测试各种代码code block的样式，默认的模板的代码块是黑色背景，看着很费劲

https://swapoff.org/chroma/playground/

修改代码块字体通过修改 main.css 配置文件中的以下属性进行，下面的样式是我参考csdn和其他一个网站获得的。

  pre,
  code {
    font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace,system-ui,-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei UI','Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  }
  • 文件目录问题

因为我写markdown文件的文件名都是中文。这有个问题，在使用hugo生成网站静态页面文件时，生成的目录也会是中文名，而且访问的链接也会是中文名，把文件名改成英文名就很不方便找文件，参考以下文档，使用slug可以解决问题。

https://zhuanlan.zhihu.com/p/126112777

  ---
  title: "lvs+keepalive配置Jenkins2高可用"
  ……
  slug: "lvs_keepalive_jenkins2_ha"
  ---

slug后的名称会被用于做访问链接以及静态文件目录。

  • 标题及描述

在markdown内容顶部增加以下内容

  ---
  weight: 1  #权重排序
  title: "文章标题"  #标题
  date: 2021-09-11T21:57:40+08:00  #日期
  lastmod: 2021-09-14T16:45:40+08:00 #更新日期
  draft: false #表示是否是草稿，编辑完成后请将其改为 false
  author: "不与天斗" #作者
  authorLink: "http://www.shutdown.cn" #作者链接
  description: "内容描述" #内容描述
  resources:
  - name: "featured-image"
    src: "featured-image.png"
  tags: ["Markdown","blog","hugo","GitHub Pages","Github Actions"] #标签
  categories: ["编程"] #分类
  keywords: #关键词
  - 关键词
  showless: true  #设置部分内容可访问
  mermaid: true #为true时通过脑图渲染节点
  lightgallery: true #支持触屏滑动的响应式相册
  toc: #目录导航，可以在页面生成文章的目录导航
    auto: true
  ---

https://www.gohugo.org/doc/content/front-matter/

https://ccjee.github.io/hugomarkdown/

  • 文章列表的简介内容展示

我使用的主题，在列表展示的时候，会自动从文章内容上截取一部分作为简介展示在文章列表中，可能会格式乱掉或者内容过长等等。这个可以通过修改markdown内容顶部的 头信息内容的 description字段，然后在列表模板中，使用这个字段作为列表文章简介的展示内容。

blogpages/augest/themes/next/layouts/partials/post_list.html

      <div class="post-body" itemprop="articleBody">
      <!-- {{ .Summary }} -->
      {{ if .Description }}{{ .Description }}{{ else if .Summary }}{{ .Summary }}{{ end }}"
      </div>
0%