hugo-creative-theme, 创造性的Startbootstrap主题移植到 Hugo

分享于 

5分钟阅读

GitHub

  繁體 雙語
Port of Startbootstrap's Creative theme to Hugo
  • 源代码名称:hugo-creative-theme
  • 源代码网址:http://www.github.com/digitalcraftsman/hugo-creative-theme
  • hugo-creative-theme源代码文档
  • hugo-creative-theme源代码下载
  • Git URL:
    git://www.github.com/digitalcraftsman/hugo-creative-theme.git
    Git Clone代码到本地:
    git clone http://www.github.com/digitalcraftsman/hugo-creative-theme
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/digitalcraftsman/hugo-creative-theme
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    创作主题

    Creative主题是基于最初的Bootstrap 主题 creatives的一个页面组合,由大卫 Miller。 这个Hugo主题的显著特点是几个内容部分和一个带有悬停效果和完整页面组合项目模式的响应组合网格。

    Hugo Creative Theme Screenshot

    安装

    在Hugo站点的文件夹内运行:

    
    $ cd themes
    
    
    $ git clone https://github.com/digitalcraftsman/hugo-creative-theme
    
    
    
    

    有关更多信息,请阅读官方设置指南

    正在启动

    成功安装创建主题后,需要一些步骤才能运行你的站点。

    配置文件

    看一下这个主题的 exampleSite 文件夹。 你将找到一个文件调用 config.toml

    使用它,在Hugo站点的根目录 中复制 config.toml。 你可以随意改变字符串来定制你的网站。

    更改英雄背景

    英雄是你网站的catcher。 所以考虑给他一个好的background。 你只需要在 static/img 上替换 header.jpg,就可以。 但是,使用相同的文件名很重要。

    添加你的服务

    本部分应展示你的能力和技能。 你可以在 config.toml 中更改 [params.services.list] 下的服务。

    所有使用fontawesome字体 icon的图标。 查看 Fontawesome 网站的更多图标。 图标由它们对应的CSS类表示。 技能的定义如下:

    [[params.services.list]]
     icon = "fa-diamond"title = "Sturdy Templates"description = "Our templates are updated regularly so they don't break."

    创建你的投资组合

    除了配置文件,还有另外一个名为 projects的子文件夹,它承载将作为你的项目在组合部分显示的文件。 这样的项目文件可能看起来像 ,这是用YAML写的:

    modalID: 1title: Project 1date: 2014-07-05img: 1.jpgclient: Start BootstrapclientLink: "#"category: Web Developmentdescription: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit.

    复制文件夹 projects inside 你站点的root 目录中的data 文件夹。 让我们做一些修改来展示你的工作。

    注意 modalID。 它必须是唯一的整数,并且随着你想要添加到组合中的每个新项目增加。 否则,无法呈现相应的模式。

    此外,你可以在描述中使用 Markdown 语法,比如这里的[text](//url.to/source)

    要给项目提供图像,请将它的保存在 static/img/portfolio 尺寸应为 650 x 350像素。 请不要忘记在项目中设置的 filename。

    几乎完成了

    要查看你的站点实际运行情况,请运行hugo本地服务器。

     
    $ hugo server
    
    
    
     

    现在在浏览器的地址栏中输入 localhost:1313

    你有没有找到 Bug 或者有一个新特性的想法? 请随意使用问题追踪器,让我知道。 或者直接发出一个请求请求。

    请为你的请求请求创建一个单独的分支。

    许可证

    这个主题是在Apache许可 2.0下发布的,获得更多信息阅读许可协议。

    确认

    感谢

    • 在项目周围创建Hugo和awesome社区的Francia
    • David 创建原始主题

    STA  theme  hugo  
    相关文章