hugo-agency-theme, Startbootstrap主题代理代理港

分享于 

8分钟阅读

GitHub

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

    代理主题是公司和自由职业者基于原始主题主题的一个页面组合,由David Miller。 这个Hugo主题包含几个内容部分,一个具有悬停效果的响应组合网格。全页面组合项目模式。时间线和联系人表单。

    Hugo Agency Theme screenshot

    安装

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

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

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

    正在启动

    成功安装代理主题之后,只需几个步骤即可让你的站点运行。

    配置文件

    看一下这个主题的 exampleSite 文件夹。 你将找到一个文件调用 config.toml 使用它,在Hugo站点的根目录 中复制 config.toml。 请随意更改这里主题中的字符串。

    更改英雄背景

    英雄是你网站的catcher。 所以考虑给他一个好的background。 你只需要用你自己的background 图像替换 static/img 上的 header-bg.jpg 插件。 但重要的是要保持原始文件名。

    展示你的技巧

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

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

    [[params.services.list]]
     icon = "fa-shopping-cart"title = "E-Commerce"description = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit."

    创建你的投资组合

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

    modalID: 1title: Round Iconssubtitle: Lorem ipsum dolor sit amet consectetur.date: 2014-07-05img: roundicons.pngpreview: roundicons-preview.pngclient: Start BootstrapclientLink: "#"category: Graphic Designdescription: Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo! <br><br>**Want these icons in this portfolio item sample?** You can download 60 of them for free, courtesy of [RoundIcons.com](//getdpd.com/cart/hoplink/18076?referrer=bvbo4kax5k8ogc), or you can purchase the 1500 icon set [here](//getdpd.com/cart/hoplink/18076?referrer=bvbo4kax5k8ogc).

    复制 projects inside 你站点的root 目录中的data 文件夹。 让我们做一些改变。

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

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

    要给项目提供图像,请将它的保存在 static/img/portfolio 请不要忘记在项目的img 下设置适当的文件名

    显示发生了什么

    这个主题为你的公司或者职业的重要事件提供了时间表。 可以通过将以下代码Fragment复制到 config.toml 中的[params.about] 部分来添加新事件。

    [[params.about.events]]
     img = "1.jpg"date = "2009-2011"title = "Our Humble Beginnings"description = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!"

    img 下的图像集需要存储在 static/img/about。 这些事件将从顶部到底部列出。

    介绍你的团队

    让访问者或者潜在客户知道你是谁。 要添加一个团队成员,将代码 below 粘贴到 config.toml 中。img 字段引用所显示的图像。 将你或者你的colleages粘贴到 static/img/team 中。

    [[params.team.members]]
     img = "1.jpg"name = "Kay Garland"position = "Lead Designer"social = [
     ["fa-twitter", "#"],
     ["fa-facebook", "#"],
     ["fa-linkedin", "#"]
     ]

    就像你看到的,有一个可以链接各个社交网络的选项。 array的第一个索引代表 Fontawesome的icon ( 或者CSS类)。 最后一个索引仅仅是社交网络配置文件的链接。

    列出你的客户

    你还可以显示你的一些客户。 为此,请将客户端的标识粘贴到 static/img/logos,并将示例 below 添加到 config.toml

    [[params.clients]]
     logo = "designmodo.jpg"link = "#"

    徽标需要一个尺寸为 200像素的尺寸。

    使联系人表单工作

    由于该页面将是 static,你可以使用 formspree.io 作为发送实际电子邮件的代理。 每个月,访问者都可以给你发上一千封邮件,而不会带来额外的费用。 按照下面的步骤开始安装:

    • 请在'邮件'地址下输入你的电子邮件地址( 在 config.toml 中)。
    • 将生成的站点上载到服务器
    • 亲自发送电子邮件以确认你的帐户
    • 单击 formspree.io 电子邮件中的确认链接。
    • 你已经完成了快乐邮件 !

    几乎完成了

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

     
    $ hugo server
    
    
    
     

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

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

    许可证

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

    确认

    感谢

    • David 创建这里主题
    • 在项目周围创建Hugo和awesome社区的Francia
    • Grosser 提供了大量的改进

    STA  theme  hugo