README

工作进行中

变更日志

版本 1.1

删除 silex

安装

需要 PHP 7

git clone https://github.com/Modius22/portfolio.git MyPortfolio

或

composer create-project modius22/portfolio MyPortfolio

基本用法

cd MyPortfolio
composer install
php -S localhost:8090

现在在您的首选 IDE 中打开 MyPortfolio 并在 resources 目录中创建一个 meta.json 文件。此文件包含您投资组合的所有信息。

meta.json

“sections” 属性包含您的投资组合中的每个部分。键是部分标题，值是部分内容（=对象）。例如，“关于我”和“技能”部分看起来像

{
  "sections": {
    "About me": {
      "description": "Hello my name is ..."
    },
    "Skills": {
      "description": "<ul><li>Coding</li><li>CSS</li></ul>"
    }    
  }
}

打开您的浏览器，转到 localhost:8090，您应该看到一个文本为“关于我”的标题，一个包含“Hello my name is”的段落，以及一个标题为“Skills”的列表，其中包含“Coding”和“CSS”

注意：默认模板使用 Bootstrap 框架、jQuery 和 chart.js 从 CDN。description-property 由 Twig 解析

部分模板

JSON 文件中的 HTML 有点混乱，因此您应使用模板。
首先，将 template 属性添加到您的 About me 部分并将它设置为模板的路径

{
  "sections": {
    "About me": {
      "template": "sections/about_me.html.twig"
    }
  }
}

接下来，在 resources 目录中创建一个名为 sections 的目录，并在其中创建 about_me.html.twig 并包含以下内容

<h1>{{ heading }}</h1>
Hello my name is ...

注意：标题是部分数组的键。它可以由 heading 属性覆盖

变量

您还可以在 meta.json 部分中添加变量，您可以在模板中使用这些变量。
例如，将 name 属性（您的名字）添加到 About me 部分中，并在模板中将 “...” 替换为 {{ section.name }}

注意： section 变量包含所有部分属性

资源（图片、CSS...）

对于附加资源，您可以在 meta.json 中添加 resources 属性并调用 resource-twig-function

{
    "resources": {
        "octocat": "https://assets-cdn.github.com/favicon.ico",
        "internal": "@hello.png"
    }
}

在您的模板中

<img src="{{ resource('octocat') }}">

资源函数接受 3 个参数

资源名称（资源中的键）
嵌入资源（加载文件并写入 html 代码）
将嵌入的源编码为 base64（用于嵌入图片很有用）

如果资源路径以 @ 开头，则从资源目录加载文件

自定义模板

要覆盖基本模板，在资源目录中创建一个 template.custom.html.twig

德语教程

第 1 部分：http://www.modius-techblog.de/programmierung/eigene-online-visitenkarte-richtig-erstellen/ 第 2 部分：http://www.modius-techblog.de/programmierung/online-visitenkarte-die-erste-sektion-mit-twig/ 第 3 部分：http://www.modius-techblog.de/programmierung/online-visitenkarte-aktueller-job-mit-progress-bar-darstellen/

示例网站

来自 Christian Piazzi（Modius22）的投资组合：http://www.christian.piazzi.org

贡献

请随意分支此存储库并创建拉取请求

modius22 / portfolio

维护者

详细信息