portfolio starter下载 - portfolio starter入门源代码下载

portfolio starter

网站数据

1.0.0

下载

？正在进行中

这是一个具有高度的轻量级投资组合启动可商。它针对设计师，插画家，建筑师以及有兴趣分享其工作和活动的任何其他人。

预期的用户可能不知道如何编码，而是对他们网站后面的技术感兴趣，愿意在Markdown中写作，并乐于跟进本文档。

请访问Portfolio-starter.sb-ph.com进行检查。此存储库中的内容和代码驱动演示站点。

特征
无代码设置
- 1。获取一个GitHub帐户
- 2。与静态托管提供商获取帐户
- 3。部署您的网站
- 4。在github中编辑内容
命令行设置
- 1。在本地和github上设置回购
- 2。建立或服务您的网站
- 3。部署您的网站
- 4。在本地编辑内容
使用自定义域
更新和备份
内容参考
- 全局数据
- 降价文件和YAML FrontMatter
- 基本属性
- 页面
- 帖子
- 项目
- 首页
- 博客页面
- 错误页面
- RSS提要
- 媒体
更改和扩展您的网站

特征

低调的设计，着眼于可访问性[todo]
有意的基本代码库，即使对于不熟悉代码的人，也鼓励修补和定制
生成一个静态站点；静态站点的加载速度比数据库驱动的网站快得多，并且可以免费托管
支持帖子，项目，页面，一级菜单和RSS开箱即用
不需要命令行；您无需使用代码编辑器或命令行即可编辑甚至部署此网站

无代码设置

“无代码”有点不当。您的内容文件在技术上是用代码编写的，但它是一种非常可读的语法，称为Markdown（稍后再详细介绍）。我们所说的“无代码”是您不必在计算机上触摸命令行，git或打开代码编辑器。

1。获取一个GitHub帐户

GitHub是一个存储代码的平台。您的网站代码和内容将在GitHub上生活。如果您已经有一个帐户，请继续登录。如果没有，请注册一个帐户。免费的个人帐户就足够了。

2。与静态托管提供商获取帐户

Netlify和Zeit是托管提供商，这些提供商为拥有静态网站的人提供慷慨的免费层。对于以下步骤，Netlify可能更加简单，并且似乎被高高的用户使用，但它们都是可靠的平台。如果您已经有一个帐户，请登录。如果不登录，请注册一个。

3。部署您的网站

通过单击下面的一个按钮，您将克隆此存储库（即创建一个居住在您自己的GitHub帐户中的重复版本），然后将此新网站部署到静态托管。

在进行之前，请确定存储库的名称。它应该与网站的名称相似，但仅包括小写字母，数字和破折号。例如，此存储库的名称是portfolio-starter 。

如果您有一个Netlify帐户，请单击此按钮，然后按照Netlify的简单说明进行连接NetLify和GitHub：

如果您有一个Zeit帐户，请单击下面的按钮，然后按照Zeit的说明：

Zeit的说明将为您介绍如何为GitHub安装Zeit，以便为您创建一个存储库并可以部署更改。立即安装ZEIT时，请允许所有存储库。 Zeit应该自动检测您正在使用高度的设置，如下所示（您无需担心开发命令）：

构建命令： npx @11ty/eleventy输出目录： _site

按照上述说明进行Netlify或Zeit的说明，您将被重定向到网站仪表板。这会显示您的默认子域和有关您网站的其他重要信息。您还会收到一些电子邮件，让您知道服务已连接。

ZEIT允许您在设置存储库的可见性。另一方面，Netlify会自动创建一个公共存储库。如果要调整存储库的可见性，请参见GitHub文档。

4。在github中编辑内容

要编辑或添加没有命令行的内容，您需要使用GitHub的接口在存储库中的/content文件夹中浏览您的文件。请参阅内容参考，以了解有关/content文件夹的结构以及其中的每个文件的更多信息，尤其是包括您的网站标题和URL的全局数据文件。

要编辑或删除现有文件，您必须在github中打开相关文件，然后单击“编辑”按钮（带有铅笔图标的按钮）或页面内容上方右上角的删除按钮（带垃圾箱的按钮）。

如果要添加新页面，则必须根据要添加的内容导航到posts ， projects或pages文件夹，然后单击页面顶部附近的“创建新文件”按钮。这将打开一个新的编辑器页面，您可以在其中添加文件名和文件内容。由于所有文本内容均以Markdown编写，因此文件名必须以md结束（即my-post-name.md ）。

如果要添加媒体，则必须导航到media文件夹，然后单击页面顶部附近的“上传文件”按钮。这将为您提供一个上传一个或多个文件的区域。有关文件类型和大小的提示，请参见媒体指南。

为了保存在GitHub中进行的编辑或添加，您必须使用页面底部的GitHub界面进行更改。如果您在上一步中连接了NetLify或Zeit，则提交还会告诉GitHub自动部署更改。有关提交是什么的更多信息，请参阅Github词汇表。当您直接在GitHub中提交编辑或添加时，您可以使用已预填充的默认提交消息，并应直接提交给master分支（默认设置）。

命令行设置

命令行设置指令假定您熟悉命令行，您在计算机上安装了Node.js的版本8或更高版本，并且您有一个GitHub帐户。

1。设置您的存储库

克隆存储库本地通过运行git clone https://github.com/sb-ph/portfolio-starter.git my-website ，然后通过运行cd my-website更改为新的项目文件夹。运行npm install以安装依赖项，包括高度。

运行rm -rf .git以删除GIT历史记录以进行新的开始，然后运行git init以初始化新的Git Repo。提交所有文件以创建一个新的master分支，然后使用命令行添加您的项目。

2。建立或服务您的网站

要在Gitignored /_site目录中构建网站，请运行npx @11ty/eleventy 。要旋转服务器以进行本地开发或内容编辑，请运行npx @11ty/eleventy --serve 。这将使您的网站在http：// localhost：8080中提供，并且在进行任何更改时将自动重新加载。

3。部署您的网站

如果您想使用NetLify或Zeit，请按照其文档来将存储库连接到托管帐户进行连续部署。如果要使用另一个托管提供商，则可以在生成构建后在/_site目录中找到静态文件。

4。在本地编辑内容

要在本地编辑内容，请通过运行npx @11ty/eleventy --serve请调整/content目录中的Markdown和JSON文件。如果您的网站已连续部署已连接，请确保您将更改提交正确的分支（可能是master ），否则将不会部署它们。

使用自定义域

部署网站时，NetLify和Zeit会自动为您提供默认子域，因此这是一个可选的步骤。如果您想使用自己的域，则应按照他们的说明进行设置。在Zeit上阅读有关自定义域的更多信息，或在Netlify上阅读有关自定义域的更多信息。

这两种指南都会引导您完成如何设置域名系统（DNS）。请注意， DNS可能很细腻。 DNS记录您的域名记录浏览器在哪里可以找到您的网站，并告诉电子邮件服务器如何将电子邮件直接向您直接。在更改任何内容之前，请务必写下任何现有的DNS记录。

如果您将名称服务器作为自定义域设置过程的一部分重点，并且已经将您的域将其用于电子邮件，则必须在重新点命名者之前添加与电子邮件有关的MX记录和任何其他与电子邮件有关的记录。如果您不这样做，您的电子邮件可能会删除。

更新和备份

如果您正在使用较旧版本的投资组合启动器，并且想将其更新为较新版本，则建议您手动执行此操作，但除了/content文件夹外，请替换所有文件夹和文件。您应该在进行任何更新或重大更改之前备份网站。访问您的存储库主页，然后单击绿色的“克隆或下载”按钮以下载整个存储库的拉链文件，然后将其存储在安全的地方。

内容参考

所有内容都生活在/content文件夹中。默认情况下，投资组合启动器充满了演示网站上使用的内容。

内容包括全局数据，每个页面的降价文件以及媒体。重要的是要以特定的方式格式化和组织每个文件，以便您的网站在没有错误的情况下部署并看起来按预期进行。

全局数据

某些元数据（例如网站标题和URL）在整个网站中使用。所有这些全局数据都包含在/content/_data/global.json文件中。

首先设置网站时，应设置此文件中的详细信息，然后除非移动网站或域更改，否则可能不会再次触摸。这是global.json文件的一个示例：

{
  "title" : " Tortor Parturient Ridiculus " ,
  "lang" : " en " ,
  "footer" : " (c) Jane Doe, 2020 " ,
  "url" : " https://tpr.com " ,
  "author" : {
    "name" : " Jane Doe " ,
    "email" : " [email protected] "
  }
}

这是唯一必须用JSON编写的内容，JSON是用于构建数据的文本格式。 JSON语法非常严格。所有键（即title ）和所有字符串（即My website ）均以双引号封闭，所有属性（即"title": "My website" ）均由逗号隔开，除了最后一个属性。所有JSON对象都包含在卷曲括号{}中。此文件中的错误语法将导致错误，这意味着您的更改将不会部署。

这些是更详细的属性。

钥匙	格式	默认	描述
`author`	JSON对象	-	JSON对象，其中包括网站作者的名称和电子邮件地址
`footer`	降价	简短的信用	写在降价上的页脚文字
`lang` *	文本	`en`	声明您的网站语言的IANA语言标签
`title` *	文本	-	您网站的标题
`url` *	URL	-	您的网站URL

默认情况下，页脚包含一个简短的信用。随意用最适合您的文本替换它。这可能包括版权通知，Colophon，联系方式或其他显着信息。页脚不支持线路断裂。

降价文件和YAML FrontMatter

所有主要内容页面，包括帖子，项目，页面，主页，404错误页面，博客和RSS feed，均以Markdown写入。 Markdown允许您使用易于阅读的易于编写的纯文本格式编写，该格式可以转换为有效的HTML。访问Markdown-IT网站，以获取格式选项的完整列表，包括列表，链接，标题等。您还可以查看此读数文件的来源；它也写在Markdown中！

所有MARKDOWN文件以.md扩展为结束，此StarterKit使用文件名的其余部分来生成页面slug（页面URL的最后一部分）。

在下划线_之前的任何文件夹或文件都不会发布。因此，您可以使用下划线来创建草稿，例如/content/posts/_testing-a-draft.md 。但是，至关重要的是要记住，如果您的存储库是公开的，则在Github中，您的草稿将可见。

每个标记文件始于YAML FrontMatter。 YAML是一种纯文本语法，允许将人类可读的文本格式化为结构化数据。 FrontMatter是文件顶部的文本，两侧都在两边围起来，就像：

---
layout : page
title : Contact
description : Get in touch with me via email or phone.
image : cloud-01.jpeg
---

YAML前模包含一系列特性 - 键和值，由结肠隔开 - 定义了特定于页面的元数据。键必须始终如本文档所示。例如，编写Layout而不是layout将导致错误。

基本属性

这些是每个页面前磨牙中应使用的基本YAML属性。

钥匙	格式	默认	描述
`description`	文本	-	页面内容的简短描述
`eleventyNavigation`	yaml	-	yaml对象，下面描述
`image`	文本	-	图像的文件名应用于社交媒体卡
`layout` *	文本	-	页面布局
`permalink`	文本	各种各样的	页面永久链接
`title` *	文本	-	页面标题

每个标记文件都需要页面标题和布局。页面布局确定内容的显示方式。创建新页面时，应使用project ， post或page布局。

强烈建议所有页面都使用该description属性，因为它用于社交媒体卡并显示在搜索引擎结果中。它应该在50至160个字符之间，绝对不能在不同页面上重复。

如果使用社交媒体image ，请参阅社交媒体平台提供的文档，以了解适当的图像大小。根据经验，在大多数平台上，景观格式1200px宽的JPG应该是合适的。

permalink属性允许您设置一个页面的URL或将其完全关闭。永久链接总是自动生成的，因此您几乎不需要使用此属性。

eleventyNavigation属性稍微复杂一些。它告诉高高的导航插件在菜单中放置什么。这是在关于页面/content/pages/about.md上使用的属性的示例：

---
layout : default
title : About
eleventyNavigation :
  key : About
  order : 0
---

key子专业告诉Hipytions将此页面添加到导航中，上面有“关于”文本。该order子专业告诉《高度》，它应该在导航中首先出现。

您还可以将外部链接添加到导航的外部链接，例如指向GITHUB的链接。有关以下frontMatter的示例，请参见/content/pages/github.md页面：

如果要添加到导航的外部链接，则可以使用下面的前哑剧创建一个新的Markdown文件（例如， /content/external.md ）：

---
eleventyNavigation :
  key : GitHub &nearr;
  order : 3
  url : http://github.com/sb-ph/portfolio-starter
permalink : false
---

key子属性告诉Elestions用文本“ github”（ &nearr;是东北箭头的HTML代码）将此页面添加到导航中。 order子专制设置为3，以使其在菜单中最后放置，并且url属性设置为所需的URL。 permalink属性设置为false，以使其不会在我们的网站上发布相应的页面。

页面

页面在/content/pages文件夹中找到。

必须将页面的layout设置为前染色的page 。页面仅支持上面列出的基本属性。

帖子

帖子在/content/posts文件夹中找到。

必须设置帖子的layout以在前染料中post 。帖子支持基本属性以及date属性。这是帖子前磨牙的一个例子：

---
layout : post
title : Demo post
date : 2020-03-29 18:00:00
---

date属性确定帖子的发布日期，从而确定博客和RSS中的订单。

您可以在您的Markdown内容中使用HTML注释为您的帖子生成摘录：

Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

<!-- more -->

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

如果您使用more评论，则仅在博客上显示注释之前的文本，并且在摘录后将显示“更多读取”链接。

项目

项目在/content/projects文件夹中找到。

必须将项目的layout设置为在FrontMatter中project 。项目支持基本属性以及dateStart ， dateEnd和media属性。这是项目页面的前肌的一个示例。

---
layout : project
title : Your project title
dateStart : 1988-02-01
dateEnd : 2001-03-01
media :
  - type : image
    filename : cloud-01.jpeg
    size : md
    alt : A cloud
    caption : A collaboration with [Piper Haywood](https://piperhaywood.com)
  - type : video
    filename : ria-pacquee.mp4
    controls : false
    caption : A piece by [Ria Pacquée](http://riapacquee.com/)
---

这些是更详细的项目特定属性：

钥匙	格式	默认	描述
`dateEnd` *	`YYYY-MM-DD`	-	项目的结束日期，用于排序目的
`dateStart`	`YYYY-MM-DD`	-	项目的开始日期
`media`	yaml	-	媒体块的YAML列表，如下所述

媒体属性是一个严格的YAML列表，可以包含图像和视频块。下面概述了适用于图像和视频的属性。

钥匙	格式	默认	描述
`caption`	降价	-	描述您媒体的标题
`filename` *	文本	-	媒体的文件名
`height`	整数	-	您的媒体在像素中的高度
`width`	整数	-	您的媒体宽度在像素中
`size`	文本	`lg`	应显示媒体的大小； `sm` ， `md`或`lg`
`type` *	文本	-	`image`或`video`

图像块支持以下其他属性：

钥匙	格式	默认	描述
`alt` *	文本	-	图像的alt文字
`featured`	布尔	错误的	是否应使用图像来表示该项目

featured属性用于确定应使用哪个图像在主页上表示该项目。如果将多个图像标记为特征，则将使用第一个图像。

视频块允许以下其他属性。请注意，仅在某些浏览器和设备中支持视频自动播放。

钥匙	格式	默认	描述
`controls`	布尔	错误的	是否应显示视频控件
`loop`	布尔	错误的	视频是否应循环
`autoplay`	布尔	错误的	视频是否应自动播放
`muted`	布尔	错误的	视频是否应该静音

首页

主页是/content/index.md文件。

主页的layout必须设置在前磨损中的home中。主页支持大多数基本属性，但是不得使用permalink属性。

其他entries属性允许您确切指定要在主页上显示的项目。如果未填写entries属性，则首页将自动显示所有项目，并以最新的第一个项目显示。

这是所使用的entries属性的一个示例：

---
layout : home
entries :
  - portfolio-starter
  - sample-project-muybridge
  - sample-project-optics
  - sample-project-eames
  - sample-project-letters
  - sample-project-traffic-signs
---

显示了每个项目的第一个featured图像。如果没有featured ，则将显示第一个图像。