codefolio
1.0.0
现场演示 |部署|关于 |特点|贡献
一个可部署的 Web 应用程序，用于展示您的编码组合。
Codefolio 是一款面向程序员的 Jamstack 组合 Web 应用程序。它是使用 Nuxt.js 构建的，并利用 @nuxt/content 模块来使用放置在/content目录中的用户数据并生成生产就绪的静态资产。
整个代码的编写都考虑到了模块和可重用性。
该应用程序的主要特点是支持静态部署。编码组合不需要太多更改，因此静态站点是比普通 SPA 或全栈应用程序更好的选择。
Codefolio 的用户界面在设计时考虑到了用户友好性。它是完全响应式的，并使用移动优先的方法。
该设计基于 7-1 Sass 模式，并利用部分加载的 Bootstrap 5 进行布局和实用程序。
asset/aprite/svg目录包含单独的 svg 图标文件。您可以使用这些图标（或将您自己的 svg 图标放置在此目录中）来引用<icon> vue 组件中的图标名称。
Codefolio 支持自定义用户数据。除了个人详细信息之外，用户还可以自定义其他很酷的内容，例如外部链接和顶部导航栏中的恢复按钮 URL。
静态站点生成器采用原始用户数据（通常为 Markdown 或 JSON 格式）来生成可用于生产的 HTML，因此在将内容添加到 Codefolio 时，您需要本指南作为参考。
内容文件夹的结构如下所示。
content
| navbar.json
| about.md
| social-icons.json
| user.json
|
└───projects
project1.json
project2.json
project3.json
/* so on... */
让我们看看每个文件或文件夹的用途。
该文件用于与顶部导航栏相关的可选数据。
| 财产 | 类型 | 描述 |
|---|---|---|
| 简历网址 | string | 导航栏恢复按钮的恢复文件 URL。 |
| 外部链接 | array | 包含用于在顶部导航栏中生成外部链接的对象的数组。每个外部链接对象都需要具有text和url字符串属性才能正常运行。 |
该 Markdown 文件用于关于页面。
该文件用于在关于页面中生成社交图标。
| 财产 | 类型 | 描述 |
|---|---|---|
| 图标 | array | 包含用于在联系页面中生成社交图标的对象的数组。每个对象都需要有name和url属性（字符串）。 name属性应该在/assets/sprite/svg/目录中有一个匹配的 svg 文件。大多数社交图标已经可用，但请随意添加您的自定义 svg 图标。在开发模式下，您可以访问/_icons路径来列出所有可用的图标。 |
该文件用于主页所需的用户详细信息。
| 财产 | 类型 | 描述 |
|---|---|---|
| 全名 | string | 用户名。 |
| 关于 | string | 关于用户的一些信息。 |
| 图像 | string | 以http开头的有效图像URL或放置在assets/images目录中的图像的名称（包括扩展名）。请将图像裁剪为500x500以获得更好的效果。 |
| 标题 | string | 用户位置或角色。 |
该文件用于生成联系页面。
| 财产 | 类型 | 描述 |
|---|---|---|
| 表单动作 | string | 联系表单的自定义表单操作。检查 formspree.io。 |
| 地点 | string | 用户位置字符串。 |
| 电子邮件 | string | 用户电子邮件地址。 |
| 电话 | string | 用户电话号码。 |
此文件夹包含所有项目作为json格式的单独文件。该文件夹中的每个文件都代表一个不同的项目。
下表包含项目文件夹中每个文件的格式。
| 财产 | 类型 | 描述 |
|---|---|---|
| ID | integer | 订单的唯一标识符。 |
| 标题 | string | 项目名称。 |
| 描述 | string | 有关该项目的详细信息。 |
| 图像 | string | 以http开头的有效图像URL或放置在assets/images目录中的图像的名称（包括扩展名）。 |
| 链接 | object | 包含项目外部链接的对象。它可以具有可选的liveDemo 、 videoDemo和 URL 的sourceCode属性。 |
| 技术 | array | 包含项目中使用的所有技术（字符串）的数组。 |
注意：创建新文件以添加更多项目并将其命名为项目名称。
请参阅内容文件夹中现有的虚拟文件以供参考。
Nuxt.js 提供了针对搜索引擎优化网站的有效方法。请参阅 Nuxt.js SEO 指南了解更多详细信息。
该项目使用@nuxtjs/sitemap自动生成sitemap.xml文件。如果您需要更多信息，请参阅他们的配置指南。
根据您的需求自定义内容后，您需要将应用程序部署到生产环境。
让我们看看如何生成构建文件。
首先使用 git 将存储库克隆到本地计算机上（或手动下载）
git clone https://github.com/0xaliraza/codefolio
然后，导航到存储库的根目录并安装依赖项
npm install
生成构建文件
npm run generate
此时，您将拥有一个./build文件夹，其中包含所有可供部署的生产就绪文件。您可以将这些文件部署到某些托管服务器或 CDN。
如果您想查看本地运行的应用程序
npm run dev
您需要具备 github/编码经验才能使用 github actions 或其他 CI/CD 平台进行部署。
这是一个模板存储库，因此您只需单击右上角的“使用此模板”按钮即可克隆此存储库。根据您的需要自定义内容文件，然后前往操作选项卡添加所需的工作流程。您可以重复使用现有的 ci.yml 和 cd.yml 文件。
请参阅 github 操作以了解更多信息。
如果您需要更改或修复任何内容，请随意创建拉请求或问题。或者您可以使用以下链接直接与我联系。
如需任何帮助或信息，请随时与我联系。让我们联系吧！ :)
网站
吉图布
叽叽喳喳
中等的
领英
有关许可权利和限制 (MIT)，请参阅 LICENSE 文件。
