katheroine/layin

通用网页布局。

维护者

详细信息

github.com/katheroine/layin

源代码

问题

安装: 14

依赖项: 0

建议者: 0

安全性: 0

星星: 0

关注者: 2

分支: 0

开放性问题: 1

语言:HTML

类型:布局

0.4.0 2023-03-21 12:58 UTC

Requires

Requires (Dev)

MIT ae56f2c1ce27d490a3a1201b7c2491570eacf110

  • Katarzyna Krasińska <katheroine.woop@gmail.com>

layoutkatheroinelayin

This package is not auto-updated.

Last update: 2024-09-21 19:55:29 UTC

README

通用网页布局。

查看演示 [https://katheroine.github.io/layin]

先决条件

  1. PHP: 至少 PHP 7.2.5
  2. Composer - PHP 的依赖管理器。
  3. 一个网络服务器（以下示例中使用了 Apache）。

项目设置

  1. 创建项目目录并将 composer.json - Composer 的项目配置文件放置其中，内容适当，例如。
{
    "name": "awesomeauthor/awesomesite",
    "description": "Some awesome site.",
    "type": "project",
    "require": {
        "katheroine/layin": "*"
    },
    "require-dev": {
        "phpunit/phpunit": "*",
        "squizlabs/php_codesniffer": "*"
    },
    "autoload": {
        "psr-4": {
            "AwesomeAuthor\\AwesomeSite\\": [
                "src/"
            ],
            "AwesomeAuthor\\AwesomeSite\\Preconfiguration\\": [
                "site/preconfigurations/",
                "site/preconfigurations/page_renderers/"
            ]
        }
    },
    "autoload-dev": {
        "psr-4": {
            "AwesomeAuthor\\AwesomeSite\\": [
                "tests/"
            ]
        }
    }
}
  1. 在控制台运行
$ composer install

将创建 vendor 目录并将依赖项放置其中。

  1. 如果你使用 Git，创建包含 vendor 目录和可选的 composer.lock 的 .gitignore 文件
vendor
composer.lock

它将从 Git 跟踪过程中删除这些文件/目录，因此它们不会被放置在存储库中。

  1. 在主项目目录内准备项目目录结构
- site
    - config
    - preconfigurations
    - public
        - assets
            - images
            - scripts
            - stylesheets
        - pages
    - templates

你可以使用预定义的 Layin 命令

$ vendor/bin/layin site:prepare
  1. 选择具体主题，例如 紫罗兰 - 目前唯一可用的，并生成其文件的链接，这些链接将放置在 site 目录中。你可以使用预定义的 Layin 命令
$ vendor/bin/layin theme:load violet
  1. 将 vendor/katheroine/layin/site/config 中的配置文件复制并编辑到 site/config 目录，并用适合你网站的相应内容替换其内容
  • site.config.yaml
html_doc_title: Some awesome site
html_doc_description: My awesome site based on the Layin layout system
html_doc_keywords: awesome site, layin example
html_doc_author:
  name: Lucy Diamond
  email: lucy.diamond@someemailbox.com
html_doc_charset: utf-8
html_doc_language: english
html_doc_language_code: en-EN
header_title: The awesome site
header_subtitle: good place on the web
footer_copyright_range: 2023
footer_site_name: The awesome site
  • navigation_links.yaml
- css_id: home-link
  title: News
  url_part: [[base_url]]
  • contact_info_links.yaml
- css_id: email-action
  title: e-mail
  value: lucy.diamond@someemailbox.com
  url: mailto:lucy.diamond@someemailbox.com
  1. 将 vendor/katheroine/layin/site/preconfigurations/page_renderers 中的 AbstractBasePreconfiguredPageRenderer.php 文件复制并编辑到 site/preconfigurations/page_renderers
<?php

namespace AwesomeAuthor\AwesomeSite\Preconfiguration;

use Katheroine\Layin\Renderer\AbstractPageRenderer;
use Katheroine\Layin\Renderer\AbstractVioletPreconfiguredPageRenderer;
use Katheroine\Layin\Renderer\TwigPageRenderer;

abstract class AbstractBasePreconfiguredPageRenderer extends AbstractVioletPreconfiguredPageRenderer
{
    protected function providePageRenderer(): AbstractPageRenderer
    {
        return new TwigPageRenderer();
    }

    abstract protected function providePreconfiguration(): array;
}

将 vendor/katheroine/layin/site/preconfigurations/page_renderers 中的 IndexPreconfiguredPageRenderer.php 文件复制并编辑到 site/preconfigurations/page_renderers 目录

<?php

namespace AwesomeAuthor\AwesomeSite\Preconfiguration;

class IndexPreconfiguredPageRenderer extends AbstractBasePreconfiguredPageRenderer
{
    protected function providePreconfiguration(): array
    {
        return [
            'templates_dir_path' => __DIR__ . '/../../templates',
            'template_subdir_path' => '',
            'template_file_extension' => 'twig.html',
            'page_file_extension' => 'php',
            'site_config_path' => '../../config/site_config.yaml',
            'navigation_links_config_path' => '../../config/navigation_links.yaml',
            'contact_info_links_config_path' => '../../config/contact_info_links.yaml',
            'base_url' => '../',
            'subpages_url' => 'pages',
            'assets_dir_path' => '../assets',
            'is_debug_mode' => false,
        ];
    }
}
  1. 创建自定义 Twig 基础模板（添加自定义 CSS 样式表时需要） base.awesomesite.twig.html
{% extends 'base.violet.twig.html' %}
{% block stylesheets_custom %}
{% endblock stylesheets_custom %}
  1. 基于 base.awesomesite.twig.html 创建索引页的 Twig 模板 index.awesomesite.twig.html
{% extends 'base.awesomesite.twig.html' %}
{% block board %}
{% endblock %}
  1. 将 vendor/katheroine/layin/site/public/pages 中的 index.php 文件复制并编辑到 site/public/pages 目录
<?php
require_once __DIR__ . '/../../../vendor/autoload.php';

use AwesomeAuthor\AwesomeSite\Preconfiguration\IndexPreconfiguredPageRenderer;

$pageRenderer = new IndexPreconfiguredPageRenderer();
$pageRenderer->setTemplateName('index.awesomesite');

echo $pageRenderer->render();
  1. 生成 Composer 自动加载文件
$ composer dump-autoload

  1. 根据 示例 设置新的 Apache 虚拟主机，将 ServerName 设置为 awesomesite.local。

  2. 在 /etc/hosts 文件中添加适当的条目。

  3. 在网页浏览器中运行 http://awesomesite.local/。你应该看到正确显示的页面，包含之前配置的标题和副标题，但没有图形和样式。

  4. 如果你需要使用外部字体，在 site/public/assets/stylesheets 目录中创建字体定义样式表，并以 awesomesite 为短语命名，例如 fonts.awesomesite.css

@font-face
{
  font-family: liberation-sans-regular;
  src: url('../font/liberation-sans/LiberationSans-Regular.ttf');
}

选择并下载适当的字体文件（如上面的 LiberationSans-Regular.ttf）。将它们放置在适当的公共目录中，例如 site/public/assets/font/liberation-sans/。

  1. 在 site/public/assets/stylesheets 目录中创建颜色定义样式表，并用选定的颜色填充（使用下面的示例）
  • colors.awesomesite.css
:root
{
  --white: #ffffff;
  --dark-violet: #2d004c;
  --middle-violet: #3e1d54;
  --light-violet: #62357e;
  --dark-orange: #ce6122;
  --deep-orange: #de6c2a;
  --dim-orange: #f17c39;
  --middle-orange: #ff8d4c;
  --light-orange: #fc9d67;
  --dark-blue: #0b1a2e;
}
  • colors-site.awesomesite.css
:root
{
  --body-background-color: var(--dark-violet);
  --banner-background-color: var(--dark-violet);
  --banner-text-color: var(--white);
  --controls-background-color: var(--middle-orange);
  --controls-text-color: var(--white);
  --controls-backlight-color: var(--light-orange);
  --guideboard-background-color: var(--middle-orange);
  --guideboard-text-color: var(--white);
  --guideboard-backlight-color: var(--dim-orange);
  --guideboard-button-separator-color: var(--dim-orange);
  --guideboard-submenu-background-color: var(--deep-orange);
  --guideboard-submenu-text-color: var(--white);
  --guideboard-submenu-backlight-color: var(--dark-orange);
  --guideboard-submenu-button-separator-color: var(--dark-orange);
  --board-background-color: var(--white);
  --board-text-color: var(--dark-blue);
  --info-background-color: var(--dark-violet);
  --info-text-color: var(--white);
  --info-backlight-color: var(--middle-violet);
  --info-button-separator-color: var(--middle-violet);
  --copyright-background-color: var(--light-violet);
  --copyright-font-color: var(--white);
}
  • colors-site-accessibility.awesomesite.css
:root
{
  /* contrast */
  --contrast-header-background-color: #182652;
  --contrast-header-text-color: white;
  --contrast-controls-background-color: #6e005f;
  --contrast-controls-text-color: white;
  --contrast-controls-backlight-color: #2668bf;
  --contrast-guideboard-background-color: #6e005f;
  --contrast-guideboard-text-color: white;
  --contrast-guideboard-backlight-color: #2668bf;
  --contrast-guideboard-submenu-background-color: #9764c8;
  --contrast-guideboard-button-separator-color: white;
  --contrast-board-background-color: black;
  --contrast-board-text-color: white;
  --contrast-footer-background-color: #6e005f;
  --contrast-footer-backlight-color: #2668bf;
  --contrast-footer-button-separator-color: white;
  --contrast-copyright-background-color: navy;
}
  1. 在 site/templates/base.awesomesite.twig.html 模板文件中添加之前创建的 CSS 样式表
{% extends 'base.violet.twig.html' %}
{% block stylesheets_custom %}
<link type="text/css" rel="stylesheet" href="{{assets_dir}}/stylesheets/fonts.awesomesite.css">
<link type="text/css" rel="stylesheet" href="{{assets_dir}}/stylesheets/colors.awesomesite.css">
<link type="text/css" rel="stylesheet" href="{{assets_dir}}/stylesheets/colors-site.awesomesite.css">
<link type="text/css" rel="stylesheet" href="{{assets_dir}}/stylesheets/colors-site-accessibility.awesomesite.css">
{% endblock stylesheets_custom %}

在网页浏览器中刷新站点后，你应该会看到颜色的变化。

  1. 请以格式准备标志并保存为site/public/assets/images/logo.png。在网页浏览器中刷新网站后，您应该在页面上看到标志。

  2. 请以格式准备背景封面并保存为site/public/assets/images/cover.jpeg。在网页浏览器中刷新网站后，您应该在页面上看到封面。

  3. 创建图标设置样式表site/public/assets/stylesheets/link-icons.awesomesite.css

#dial .menu-button#increase-font-trigger:before
{
  background-image: url('../images/icons.violet/a_plus.svg');
}

#dial .menu-button#decrease-font-trigger:before
{
  background-image: url('../images/icons.violet/a_minus.svg');
}

#dial .menu-button#toggle-contrast-trigger:before
{
  background-image: url('../images/icons.violet/contrast.svg');
}

#dial .menu-button#reset-accessibility-trigger:before
{
  background-image: url('../images/icons.violet/reset.svg');
}

#dial .menu-button#go-up-link:before
{
  background-image: url('../images/icons.violet/arrow_up.svg');
}

#dial .menu-button#guideboard-trigger:before
{
  background-image: url('../images/icons.violet/hamburger.svg');
}

nav .menu-button#home-link:before
{
  background-image: url('../images/icons.violet/house.svg');
}

#contact-info .menu-button#address-link:before
{
  background-image: url('../images/icons.violet/map.svg');
}

#contact-info .menu-button#email-action:before
{
  background-image: url('../images/icons.violet/monkey_envelope.svg');
}

#contact-info .menu-button#phone-action:before
{
  background-image: url('../images/icons.violet/phone.svg');
}

#contact-info .menu-button#fax-action:before
{
  background-image: url('../images/icons.violet/fax.svg');
}

在网页浏览器中刷新网站后，您应该在页面上看到图标。

  1. 您可以使用内容主题，例如Swamp Violet（目前唯一可用的），并生成其文件的链接，这些文件将放置在site目录中。这将为您提供位于主要标签中的文章的标题、段落、列表、表格、图像等CSS样式。您可以使用预定义的Layin命令
$ vendor/bin/layin theme:load swamp_violet
  1. 您还需要提供定义内容所用颜色的CSS文件，例如colors-content.awesomesite.css
:root
{
    --content-normal-background-color: var(--white);
    --content-normal-text-color: var(--dark-blue);
    --content-normal-border-color: var(--middle-blue);
    --content-special-background-color: var(--middle-blue);
    --content-special-text-color: var(--white);
    --content-special-border-color: var(--white);

    --content-table-normal-border-color: var(--dark-blue);
    --content-table-special-background-header-color: var(--dark-blue);
    --content-table-special-background-odd-row-color: var(--middle-blue);
    --content-table-special-background-even-row-color: var(--light-blue);

    --content-definition-background-color: var(--white);
    --content-definition-text-color: var(--dark-blue);
    --content-definition-border-color: var(--light-blue);

    --content-terminal-background-color: var(--black);
    --content-terminal-text-color: var(--white);
    --content-terminal-prompt-text-color: var(--cybergreen);

    --content-code-background-color: var(--dark-blue);
    --content-code-text-color: var(--white);
    --content-code-border-color: var(--white);

    --content-alert-background-color: var(--orangered);
    --content-alert-text-color: var(--white);
    --content-warning-background-color: var(--orangeyellow);
    --content-warning-text-color: var(--white);
    --content-info-background-color: var(--skyblue);
    --content-info-text-color: var(--white);

    --content-keyboard-background-color: var(--skyblue);
    --content-kayboard-text-color: var(--white);

    --content-mark-color: var(--cyberblue);
    --content-strikethrough-color: var(--cyberred);
    --content-underline-color: var(--cybergreen);
    --content-pointed-color: var(--ultralight-gray);
}
  1. 要处理可访问性功能，您还需要提供colors-content-accessibility.awesomesite.css文件
:root
{
  /* contrast */

  --contrast-content-normal-background-color: var(--contrast-black);
  --contrast-content-normal-text-color: var(--contrast-white);
  --contrast-content-normal-border-color: var(--contrast-middle-violet);
  --contrast-content-special-background-color: var(--contrast-middle-blue);
  --contrast-content-special-text-color: var(--contrast-white);
  --contrast-content-special-border-color: var(--contrast-white);

  --contrast-content-table-normal-border-color: var(--contrast-white);
  --contrast-content-table-special-background-header-color: var(--contrast-dark-blue);
  --contrast-content-table-special-background-odd-row-color: var(--contrast-middle-blue);
  --contrast-content-table-special-background-even-row-color: var(--contrast-middle-blue);

  --contrast-content-definition-background-color: var(--contrast-black);
  --contrast-content-definition-text-color: var(--contrast-white);
  --contrast-content-definition-border-color: var(--contrast-white);

  --contrast-content-terminal-background-color: var(--contrast-dark-green);
  --contrast-content-terminal-text-color: var(--contrast-white);
  --contrast-content-terminal-prompt-text-color: var(--cybergreen);

  --contrast-content-code-background-color: var(--contrast-dark-blue);
  --contrast-content-code-text-color: var(--contrast-white);
  --contrast-content-code-border-color: var(--contrast-white);

  --contrast-content-preformatted-background-color: var(--contrast-dark-grey);
  --contrast-content-preformatted-text-color: var(--contrast-white);
  --contrast-content-preformatted-border-color: var(--contrast-white);

  --contrast-content-alert-background-color: var(--contrast-light-orange);
  --contrast-content-alert-text-color: var(--contrast-white);
  --contrast-content-warning-background-color: var(--contrast-light-yellow);
  --contrast-content-warning-text-color: var(--contrast-white);
  --contrast-content-info-background-color: var(--contrast-light-blue);
  --contrast-content-info-text-color: var(--contrast-white);

  --contrast-content-keyboard-background-color: var(--skyblue);
  --contrast-content-kayboard-text-color: var(--contrast-white);

  --contrast-content-image-normal-border-color: var(--contrast-white);

  --contrast-content-mark-color: var(--cyberblue);
  --contrast-content-strikethrough-color: var(--cyberred);
  --contrast-content-underline-color: var(--cybergreen);
  --contrast-content-pointed-color: var(--ultralight-gray);
}
  1. 对于上述示例，您需要使用新颜色扩展现有的colors.awesomesite.css文件
:root
{
  --white: #ffffff;
  --black: #000000;
  --dark-blue: #0b1527;
  --middle-blue: #1c2c4a;
  --light-blue: #253757;
  --dark-violet: #2d004c;
  --middle-violet: #562f71;
  --light-violet: #624079;
  --amaranthine: #6e005f;
  --cybergreen: #17ffa9;
  --cyberblue: #38f9ff;
  --cyberred: #fd3f1e;
  --skyblue: #0081c7;
  --orangeyellow: #f17e00;
  --orangered: #e24600;
  --ultralight-gray: #aaaaaa;
  --ultralight-blue: #e4e7f0;

  --contrast-white: #ffffff;
  --contrast-black: #000000;
  --contrast-dark-blue: #09286b;
  --contrast-middle-blue: #1050a3;
  --contrast-light-blue: #1e64be;
  --contrast-middle-violet: #6e005f;
  --contrast-light-violet: #9764c8;
  --contrast-dark-green: #023d2e;
  --contrast-dark-grey: #292a2e;
  --contrast-light-yellow: #e28800;
  --contrast-light-orange: #d15400;
}
  1. 最后，您需要将新的CSS文件放入模板文件base.awesomesite.twig.html
{% extends 'base.violet.twig.html' %}
{% block stylesheets_custom %}
<link type="text/css" rel="stylesheet" href="{{assets_dir}}/stylesheets/fonts.awesomesite.css">
<link type="text/css" rel="stylesheet" href="{{assets_dir}}/stylesheets/colors.awesomesite.css">
<link type="text/css" rel="stylesheet" href="{{assets_dir}}/stylesheets/colors-site.awesomesite.css">
<link type="text/css" rel="stylesheet" href="{{assets_dir}}/stylesheets/colors-site-accessibility.awesomesite.css">
<link type="text/css" rel="stylesheet" href="{{assets_dir}}/stylesheets/colors-content.awesomesite.css">
<link type="text/css" rel="stylesheet" href="{{assets_dir}}/stylesheets/link-icons.awesomesite.css">
<link type="text/css" rel="stylesheet" href="{{assets_dir}}/stylesheets/content.swamp_violet.css">
<link type="text/css" rel="stylesheet" href="{{assets_dir}}/stylesheets/content-accessibility.swamp_violet.css">
<link type="text/css" rel="stylesheet" href="{{assets_dir}}/stylesheets/colors-content-accessibility.awesomesite.css">
<link type="text/css" rel="stylesheet" media="screen and (min-width: 0px)" href="{{assets_dir}}/stylesheets/content-s.swamp_violet.css">
<link type="text/css" rel="stylesheet" media="screen and (min-width: 640px)" href="{{assets_dir}}/stylesheets/content-m.swamp_violet.css">
<link type="text/css" rel="stylesheet" media="screen and (min-width: 1024px)" href="{{assets_dir}}/stylesheets/content-l.swamp_violet.css">
{% endblock stylesheets_custom %}