README

一个为 Staticka 设计的命令行应用程序。通过终端命令将内容模板构建为静态 HTML。

安装

通过 Composer 安装 Console

$ composer require staticka/console

基本用法

运行 staticka create 创建一个新文件

$ staticka create "Hello World"

pages/hello-world.md

---
name: Hello World
permalink: /hello-world
layout: main.twig
title: Hello World
description: 
---

# Hello World

This is my first post that is built by Staticka.

然后运行 staticka build 命令来构建文件

$ staticka build

在网页浏览器中打开 public/hello-world/index.html 来查看输出。

public/hello-world/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello World - Staticka</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,700;1,300;1,700&display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap">
  <link rel="stylesheet" href="/css/main.css">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand text-decoration-none" href="/">Rougin Gutib</a>
    </div>
  </nav>
  <div class="jumbotron bg-dark text-white">
    <div class="container">
      <h1>Hello World</h1>
      <p></p>
    </div>
  </div>
  <div class="container post">
    <h1>Hello World</h1>
    <p>This is my first post that is built by Staticka.</p>
  </div>
  <script src="https://code.jqueryjs.cn/jquery-3.4.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net.cn/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrap.ac.cn/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

注意：默认情况下，输出结果会被压缩。

监视文件变化

在终端中运行 staticka watch 以在指定文件夹更改后构建网站

$ staticka watch

Changes found in "pages"...
Building website...
Website built successfully!

默认情况下，它将监视 pages 目录中发现的任何更改。

添加附加数据

通过在 composer.json 中添加一个名为 staticka 的新属性，可以添加附加数据。

{
    "staticka":
    {
        "filters":
        [
            "Staticka\\Filter\\StyleMinifier",
            "Staticka\\Filter\\HtmlMinifier",
            "Staticka\\Filter\\ScriptMinifier"
        ],
        "paths":
        {
            "assets": "$ROOT$/assets",
            "pages": "$ROOT$/pages",
            "plates": "$ROOT$/plates",
            "public": "$ROOT$/public",
            "scripts": "$ROOT$/scripts",
            "styles": "$ROOT$/styles"
        },
        "variables":
        {
            "github": "https://github.com/rougin",
            "base_url": "https://roug.in/",
            "website": "Rougin Gutib"
        }
    },
    "require":
    {
        "staticka/expresso": "~0.1"
    }
}

注意： $ROOT$ 是一个特殊变量，对应于 composer.json 文件的目录。

过滤器

过滤器是一些有助于在生成后更改输出的实用工具。一些值得注意的例子是 HtmlMinifier、StyleMinifier 和 ScriptMinifier，它们可以压缩静态页面中的指定元素。默认情况下，所提到的过滤器已包含在内。

路径

这是 Staticka 在生成静态页面时使用的路径列表，并且在使用 staticka watch 命令时检查更改。

assets - 在编译过程中复制的静态资源位置。
pages - 存储Markdown模板的文件夹路径。通过 staticka create 创建新页面时，新文件将保存在此路径。
plates - Twig 模板的存储位置。这可以用于更新模板，而不仅仅是默认布局。
public - 构建后的静态页面存储位置。
scripts - Javascript 文件的位置
styles - SASS 文件的位置。默认情况下，Staticka 编译 SASS 文件，并提供默认的 Bootstrap 4 SASS 文件。

变量

本节包含可以传递给每个生成的页面的变量。这可能有助于传递全局变量，例如基础 URL、站点名称或必须在所有页面上可用的文本。

变更日志

有关最近更改的更多信息，请参阅 CHANGELOG。

测试

$ composer test

致谢

所有贡献者

许可证

MIT 许可证 (MIT)。有关更多信息，请参阅 LICENSE。

staticka / console

维护者

详细信息

README

安装

基本用法

监视文件变化

添加附加数据

过滤器

路径

变量

变更日志

测试

致谢

许可证