Sculpin Extended：自定义静态站点博客

今天药忘吃喽~ 2022-12-03 01:46 160阅读 0赞

If you’re a PHP developer and currently running a blog with a static site generator such as Octopress or Jekyll, wouldn’t it be great if you could use your primary language for it? Yes, it’s healthy for us developers to use more than one language, but let’s be honest – we often want to add some functionality to our blogs, but it’s difficult to accomplish in unfamiliar syntax. In this article, we’ll set up Sculpin, a static site generator for PHP. Just like any other static site generator, it uses markdown files and HTML templates to generate your blog, so the transition should be easy.

如果您是PHP开发人员，并且当前正在使用静态网站生成器(例如Octopress或Jekyll)运行博客，那么如果可以使用主要语言，那不是很好吗？ 是的，对于我们开发人员来说，使用多种语言是一种健康的做法，但是老实说-我们经常想在博客中添加一些功能，但是用不熟悉的语法很难做到。 在本文中，我们将设置Sculpin，这是PHP的静态站点生成器。 与其他静态网站生成器一样，它使用markdown文件和HTML模板来生成您的博客，因此过渡应该很容易。

![Sculpin logo][]

## 安装Sculpin **(**Installing Sculpin**)** ##

Installing requires use of the command line and an installed modern version of PHP (5.6 onwards preferably).

安装需要使用命令行和已安装的现代PHP版本(最好是5.6或更高版本)。

wget https://download.sculpin.io/sculpin.phar

Once it’s done downloading, we make it executable:

下载完成后，我们使其可执行：

chmod +x sculpin.phar

Then we move it to the executable directory of our operating system:

然后，将其移至操作系统的可执行目录：

sudo mv sculpin.phar /usr/local/bin/sculpin

Alternatively, you can just copy it to any directory where you want to use it.

另外，您可以将其复制到要使用它的任何目录中。

Executing `sculpin` will list the commands that you can use:

执行`sculpin`将列出您可以使用的命令：

![sculpin commmands][]

## 建立网志 **(**Creating a Blog**)** ##

Now that you have Sculpin installed, we can create a new blog. We’ll be using the [Sculpin Blog Skeleton provided by the Sculpin team][]. Clone the repository and download it into `myblog`.

现在您已经安装了Sculpin，我们可以创建一个新博客。 我们将使用[Sculpin团队提供][Sculpin Blog Skeleton provided by the Sculpin team]的[Sculpin Blog Skeleton][Sculpin Blog Skeleton provided by the Sculpin team] 。 克隆存储库并将其下载到`myblog` 。

git clone https://github.com/sculpin/sculpin-blog-skeleton.git myblog

Once it’s done cloning, navigate inside `myblog` and execute `sculpin install`. This will install all the dependencies needed by Sculpin to run.

克隆完成后，在`myblog`导航并执行`myblog` `sculpin install` 。 这将安装Sculpin运行所需的所有依赖项。

cd myblog
    sculpin install

This command uses [Composer][] behind the scenes (you can open the `sculpin.json` file to see the similarity). Sculpin actually bundles an alternative version of Composer, so Composer isn’t needed outside it. If you need third-party packages to be installed just add them inside the `require` object then execute `sculpin install` to install them. By default, the packages are installed inside the `source/components` directory.

此命令在后台使用[Composer][] (您可以打开`sculpin.json`文件以查看相似性)。 Sculpin实际上捆绑了Composer的替代版本，因此在其外部不需要Composer。 如果需要安装第三方软件包，只需将它们添加到`require`对象内，然后执行`sculpin install`进行安装。 默认情况下，软件包安装在`source/components`目录中。

Once Sculpin is done installing the packages, execute the following command to generate the site. The `watch` option means that the site will be automatically re-generated once you change any of the configuration files or the files inside the `source` directory. The `server` option runs a server which will serve the generated site. By default, this can be accessed at `http://localhost:8000`, but if you’re using a good VM environment, the setup will vary depending on your open ports. See [this post about Spress, a Sculpin alternative][this post about Spress_ a Sculpin alternative] to learn how to set it up in a VM.

Sculpin安装完软件包后，执行以下命令生成站点。 `watch`选项意味着一旦您更改任何配置文件或`source`目录中的文件，该站点将自动重新生成。 `server`选项运行将为生成的站点提供服务的服务器。 默认情况下，可以通过`http://localhost:8000`进行访问，但是如果您使用的是良好的VM环境，则设置会因打开的端口而异。 请参阅[有关Spress(Sculpin替代产品)的这篇文章，][this post about Spress_ a Sculpin alternative]以了解如何在VM中进行设置。

sculpin generate --watch --server

The generated site will be stored in the `output_dev` folder. This is only used for development purposes. If you’re already going to deploy your blog over to something like [Github pages][], you have to specify the `env` option:

生成的站点将存储在`output_dev`文件夹中。 这仅用于开发目的。 如果您已经打算将博客部署到[Github pages之][Github pages]类的东西，则必须指定`env`选项：

sculpin generate --env prod

This will create an `output_prod` directory which you can then push to Github pages. We’ll go through this in a later section.

这将创建一个`output_prod`目录，然后您可以将其推送到Github页面。 我们将在后面的部分中进行介绍。

## 配置Sculpin **(**Configuring Sculpin**)** ##

We can configure Sculpin by snooping around the two files inside the `app/config` directory:

我们可以通过监听`app/config`目录中的两个文件来配置Sculpin：

*  `sculpin_site.yml` allows us to edit global options such as the title of the blog, and our disqus username.
    
    `sculpin_site.yml`允许我们编辑全局选项，例如博客标题和我们的disqus用户名。
 *  `sculpin_kernel.yml` allows us to specify the theme to be used by Sculpin, and the permalinks format.
    
    `sculpin_kernel.yml`允许我们指定`sculpin_kernel.yml`要使用的主题以及永久链接格式。

Other configuration files, such as the one for Amazon S3 bucket deployment, are in the root of the directory. We won’t really be using Amazon S3 in this tutorial, so we can just leave it as it is.

其他配置文件(例如用于Amazon S3存储桶部署的配置文件)位于目录的根目录中。 在本教程中，我们实际上不会使用Amazon S3，因此我们可以直接使用它。

You can find more information about how to configure Sculpin by looking at the [configuration documentation][].

您可以通过查看[配置文档][configuration documentation]找到有关如何配置Sculpin的更多信息。

## 博客基础 **(**Blogging Basics**)** ##

If you’re coming from Octopress or Jekyll, you’ll feel right at home with Sculpin because it uses markdown files for blog posts, only instead of `.markdown` you’ll have to use the more standard `.md` as the file extension. Another thing to note is that the Sculpin CLI doesn’t have a command for generating a new markdown file for housing a blog post. This means that you’ll have to use the `touch` command to create a new file:

如果您来自Octopress或Jekyll，那么Sculpin会让您感到宾至如归，因为它使用Markdown文件来`.markdown`博客文章，而`.markdown`您必须使用更标准的`.md`作为文件扩展名。 要注意的另一件事是Sculpin CLI没有用于生成用于存储博客帖子的新markdown文件的命令。 这意味着您必须使用`touch`命令来创建一个新文件：

touch 2016-05-17-getting-started-with-sculpin.md

Typing this out is really a pain though, so here’s a `touch.php` file which you can put in the root of your blog’s directory:

但是，输入这种方式确实很`touch.php` ，因此，这里有一个`touch.php`文件，您可以将其放在博客目录的根目录中：

<?php
    $date = date('Y-m-d');
    if(!empty($argv[2])){
        $date = $argv[2];
    }
    $file = 'source/_posts/' . $date . '-' . str_replace('_', '-', $argv[1]) . '.md';
    
    $title = ucwords(str_replace('_', ' ', $argv[1]));
    $handle = fopen($file, 'w');
    $data = "---
    title: {$title}
    tags: []
    categories: []
    
    ---
    
    ";
    fwrite($handle, $data);

With this. you can execute the following command to create a new blog post:

有了这个。 您可以执行以下命令来创建新的博客文章：

php touch.php getting_started_with_sculpin

And it will create a `source/_posts/2016-05-17-getting-started-with-sculpin.md` file.

它将创建一个`source/_posts/2016-05-17-getting-started-with-sculpin.md`文件。

If you want a postdated blog post, you can specify a date as the second argument:

如果您想要张贴过时的博客文章，则可以将日期指定为第二个参数：

php touch.php getting_started_with_sculpin 2017-01-01

This will also add in the boilerplate front-matter contents for you:

这还将为您添加样板内容：

---
    title: Getting Started With Sculpin
    tags: []
    categories: []
    
    ---

## 自定义网站 **(**Customizing the Site**)** ##

Now it’s time to customize the site so it looks exactly how we want it. Here’s what the final output will look like:

现在是时候自定义该站点，以便它看起来确实像我们想要的那样。 最终输出如下所示：

![Sculpin blog sample output][]

We’ll be primarily working inside the `source` directory, so go ahead and enter it. Once there, open the `index.html` file. This is the file that Sculpin serves for the homepage of the site. In the first few lines, you’ll see the meta block which is used for specifying the layout, the title of the page, the generator used in the page, and how many posts to show per page.

我们将主要在`source`目录中工作，所以继续输入它。 在那里，打开`index.html`文件。 这是Sculpin为网站主页提供的文件。 在前几行中，您将看到用于指定布局，页面标题，页面中使用的生成器以及每页显示多少帖子的meta块。

---
    layout: default
    title: Home
    generator: pagination
    pagination:
        max_per_page: 3
    ---

If you’ve ever used Twig, Blade or any other templating engine before, layouts should be pretty familiar. `index.html` inherits from the `default` layout. Layouts are stored in the `_layouts` folder. Templates use html files, so the actual file would be `_layouts/default.html`. Open that file up, clear its contents and paste the following:

如果您曾经使用过Twig，Blade或任何其他模板引擎，则布局应该非常熟悉。 `index.html`继承自`default`布局。 布局存储在`_layouts`文件夹中。 模板使用html文件，因此实际文件为`_layouts/default.html` 。 打开该文件，清除其内容并粘贴以下内容：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <title>{% block title %}{
        { page.title }}{% endblock %} — {
        { site.title }} — {
        { site.subtitle }}</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/picnic/4.1.2/picnic.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/picnic/4.1.2/plugins.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/solarized-dark.min.css">
        <link href="{
        { site.url }}/css/style.css" rel="stylesheet" type="text/css" />
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    </head>
    <body>
        <header>
            <nav>
              <a href="/" class="brand">
                <img class="logo" src="{
        { site.url }}/images/jackson/76x76.png" />
                <span>{
        { site.title }}</span>
              </a>
    
              <input id="bmenub" type="checkbox" class="show">
              <label for="bmenub" class="burger pseudo button">menu</label>
    
              <div class="menu">
                <a href="{
        { site.url }}/blog">Archives</a>
                <a href="{
        { site.url }}/about">About</a>
              </div>
            </nav>
        </header>
    
        <div id="wrapper">    
            <main>
            {% block content_wrapper %}
                {% block content %}{% endblock %}
            {% endblock %}       
            </main>
    
            <footer class="container">
                © {
        { "now"|date("Y") }} {
        { site.title }}
            </footer>
        </div>
    </body>
    </html>

This is the main layout we’ll be using. Just concentrate on the code inside the `<main>` tag for now. We’ll demistify the rest later.

这是我们将要使用的主要布局。 现在只需要关注`<main>`标记内的代码。 稍后我们将对其余部分进行消毒。

Only the contents inside the `<main>` tag change. What it means is: render the block named `content_wrapper`, and inside it render the block named `content`. This is where Twig really shines because we can override the contents of an inner block (`content`) if we define an outer block (`content_wrapper`). We’ll see this in action when we look at the `_views/post.html` file later on. For now, just keep in mind that either the `content_wrapper` or the `content` block should be defined in the templates that will inherit from this template.

仅`<main>`标记内的内容会更改。 这意味着：渲染名为`content_wrapper`的块，并在其内部渲染名为`content`的块。 这是Twig真正发挥作用的地方，因为如果我们定义一个外部块( `content_wrapper` )，则可以覆盖内部块( `content` )的`content` 。 稍后查看`_views/post.html`文件时，我们将看到它的作用。 现在，请记住，应该在将从该模板继承的模板中定义`content_wrapper`或`content`块。

<main>
    {% block content_wrapper %}
        {% block content %}{% endblock %}
    {% endblock %}     
    </main>

We’ve established earlier that `index.html` inherits from `layouts/default.html`. But if you open the `index.html` file, you’ll see that we haven’t actually defined a `content` block. This is because Sculpin considers anything you add after the meta block to be the content. There is default content in there, added by the skeleton site, but we’ll use the content below. Let’s replace the default with the following:

我们之前已经确定`index.html`从`layouts/default.html`继承的。 但是，如果打开`index.html`文件，则会看到我们实际上尚未定义`content`块。 这是因为Sculpin将在meta块之后添加的任何内容都视为内容。 那里有默认内容，是由骨架网站添加的，但是我们将使用以下内容。 让我们用以下内容替换默认值：

{% for post in page.pagination.items %}
        <article>
            <header>
                <h2><a href="{
        { site.url }}{
        { post.url }}">{
        { post.title }}</a></h2>
                <span class="date">{
        { post.date|date('M dS, Y') }}</span>
            </header>
            <div>
    
            {% set break_array = post.blocks.content|split('', 2) %}
    
            {
        { break_array[0]|raw }}
    
            {% if break_array|length > 1 %}
            <p>
                <a href="{
        { site.url }}{
        { post.url }}">
                    Read more
                </a>
            </p>
            {% endif %}
    
            </div>
        </article>
    {% endfor %}
    
    {% if page.pagination.previous_page or page.pagination.next_page %}
        <div class="nav-container"> 
            {% if page.pagination.previous_page %}
            <a href="{
        { site.url }}{
        { page.pagination.previous_page.url }}" class="right">Newer Posts</a>
            {% endif %}
            {% if page.pagination.next_page %}
            <a href="{
        { site.url }}{
        { page.pagination.next_page.url }}" class="left">Older Posts</a>
            {% endif %}
        </div>
    {% endif %}

This brings us to the next topic: [generators][]. Out of the box, Sculpin has a generator called pagination, which allows us to easily paginate through a collection. In this case, the collection consists of the posts that we currently have in the `source/_posts` directory. The code below loops through the posts based on the current page number. On the index page, this will only return the last three posts (posts are ordered from newest to oldest).

这将我们带入下一个主题： [generators][] 。 开箱即用，Sculpin具有称为分页的生成器，它使我们可以轻松地对集合进行分页。 在这种情况下，集合由我们当前在`source/_posts`目录中的帖子组成。 下面的代码根据当前页码循环浏览帖子。 在索引页面上，这将仅返回最后三个帖子(帖子从最新到最旧排序)。

{% for post in page.pagination.items %}
    <article>
        
    </article>
    {% endfor %}

To show the pagination links:

显示分页链接：

{% if page.pagination.previous_page or page.pagination.next_page %}
        <div class="nav-container"> 
            
        </div>
    {% endif %}

The number of posts that are displayed per page can be specified by updating the value for the `max_per_page` field in the template that’s currently being used.

可以通过更新当前使用的模板中`max_per_page`字段的值来指定每页显示的帖子数。

pagination:
        max_per_page: 3

Going back to the code that we we’re displaying for every iteration of the pagination loop, we have the following:

回到我们为分页循环的每次迭代显示的代码，我们有以下内容：

<header>
        <h2><a href="{
        { site.url }}{
        { post.url }}">{
        { post.title }}</a></h2>
        <span class="date">{
        { post.date|date('M dS, Y') }}</span>
    </header>
    <div>
    
    {% set break_array = post.blocks.content|split('', 2) %}
    
    {
        { break_array[0]|raw }}
    
    {% if break_array|length > 1 %}
    <p>
        <a href="{
        { site.url }}{
        { post.url }}">
            Read more
        </a>
    </p>
    {% endif %}
    
    </div>

This displays the title of the post, its contents, and a *read more* link. The *read more* link is implemented by creating a variable called `break_array` which stores the first half and second half of the article as two separate array items. This looks for the `` comment as the delimiter. HTML comments aren’t visible in the page, so it’s the perfect delimiter.

这将显示帖子的标题，其内容以及*更多阅读*链接。 *阅读更多*链接是通过创建一个称为`break_array`的变量来实现的，该变量将`break_array`的前半部分和后半部分存储为两个单独的数组项。 这会寻找``注释作为分隔符。 HTML注释在页面中不可见，因此是完美的分隔符。

{% set break_array = post.blocks.content|split('', 2) %}

Next, we render whatever it is that’s in the first index of the `break_array`. The `raw` filter is used so that HTML gets rendered instead of escaped.

接下来，我们渲染`break_array`的第一个索引中的`break_array` 。 使用`raw`过滤器，以便呈现HTML而不是对其进行转义。

{
        { break_array[0]|raw }}

We then check if there is more than one item stored in `break_array`, and in that case we render a link for viewing the whole post.

然后，我们检查`break_array`中`break_array`存储了多个项目，在这种情况下，我们提供了一个链接以查看整个文章。

{% if break_array|length > 1 %}
    <p>
        <a href="{
        { site.url }}{
        { post.url }}">
            Read more
        </a>
    </p>
    {% endif %}

Now that we’ve figured out how the index page is being rendered, let’s return to the `_layouts/default.html` file. For the main stylesheet we use [Picnic.css][]. We’re loading it from a CDN, but you can also download the files to your `source/css` directory and link to them.

现在我们已经弄清楚了索引页面的呈现方式，让我们回到`_layouts/default.html`文件。 对于主要样式表，我们使用[Picnic.css][] 。 我们正在从CDN加载它，但是您也可以将文件下载到`source/css`目录并链接到它们。

As developers, we mostly have code snippets in our blog posts so we’re linking the solarized dark theme for [highlight.js][] to add syntax highlighting.

作为开发人员，我们的博客文章中大多数都包含代码片段，因此我们将solarized的深色主题链接到[highlight.js][]以添加语法突出显示。

Finally, we have our custom stylesheet saved under `source/css`.

最后，我们将自定义样式表保存在`source/css` 。

Here are the contents of the `style.css` file:

这是`style.css`文件的内容：

#wrapper {
        width: 900px;
        margin: 0 auto;
    }
    
    nav .menu {
        float: left;
        margin-left: 20px;
    }
    
    nav .menu a {
        margin-left: 20px;
    }
    
    main {
        margin-top: 80px;
    }
    
    article {
        margin-top: 50px;
        border-bottom: 1px dashed #ccc;
        color: #1D1D1D;
    }
    
    footer {
        margin: 20px 0;
        text-align: center;
        color: #525252;
    }
    
    .right {
        float: right;
    }
    
    .left {
        float: left;
    }
    
    .nav-container {
        overflow: auto;
        padding: 30px 0;
    }
    
    article h2 {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .date {
        color: #565656;
        font-size: 15px;
    }
    
    pre {
        background: none;
    }
    
    @media screen and (max-width: 780px){
        #wrapper {
            width: 100%;
            padding: 10px;
        }
    }

Right below the link to the custom stylesheet (`css/style.css`) we have the `highlight.js` script and the initialization code which will apply the syntax highlighting.

在自定义样式表( `css/style.css` )链接的下面，我们有`highlight.js`脚本和初始化代码，这些代码将应用语法突出显示。

### 个人帖子页 **(**Individual Post Page**)** ###

Now that we’re done with the index page, it’s time to proceed with the template for individual post pages. The file in question is `_views/post.html`. Let’s put in the following:

现在我们已经完成了索引页面，是时候继续为各个帖子页面创建模板了。 有问题的文件是`_views/post.html` 。 让我们输入以下内容：

{% extends "default" %}
    
    {% block content_wrapper %}
        <article>
            <header>
                <h2>{
        { page.title }}</h2>
                <span class="date">{
        { post.date|date('M dS, Y') }}</span>
            </header>
            <div class="contents">
                {
        { page.blocks.content|raw }}
            </div>
            {% if page.tags %}
                <p class="tags">
                Tags:
                {% for tag in page.tags %}
                <a href="{
        { site.url }}/blog/tags/{
        { tag|url_encode(true) }}">{
        { tag }}</a>{% if not loop.last %}, {% endif %}
                {% endfor %}
                </p>
            {% endif %}
        </article>
    {% endblock %}

This is mostly based on the individual post template from the Sculpin Blog Skeleton, with added date, and removed categories and pagination links.

这主要是基于Sculpin Blog骨架中的单个帖子模板，添加了日期，并删除了类别和分页链接。

You may have noticed that we’re using a different syntax for extending the default template:

您可能已经注意到，我们使用了不同的语法来扩展默认模板：

{% extends "default" %}

This is because `post` is considered to be a layout. In Sculpin, anything that you put inside these directories: `_views`, `_layouts`, `_partials`, `includes` is considered a layout. This means that any template can inherit from these files, or include the partials.

这是因为`post`被认为是一种布局。 在锯油，什么，你把这些目录里： `_views` ， `_layouts` ， `_partials` ， `includes`被认为是一个布局。 这意味着任何模板都可以从这些文件继承，也可以包括部分文件。

We mentioned `content_wrapper`; the block that we we’re trying to render in the `_layout/default.html` file. Inside it is the `content` block:

我们提到了`content_wrapper` ; 我们试图在`_layout/default.html`文件中呈现的块。 在其内部是`content`块：

<main>
    {% block content_wrapper %}
        {% block content %}{% endblock %}
    {% endblock %}     
    </main>

We already know that the `content` block doesn’t need to be explicitly defined because Twig assumes that anything below the meta block is the content. This means that we can actually have only the following code in `_views/post.html` and the post would still be rendered:

我们已经知道不需要明确定义`content`块，因为Twig假定meta块以下的任何内容都是内容。 这意味着我们实际上只能在`_views/post.html`使用以下代码，并且该帖子仍将呈现：

{% extends "default" %}

But this will only render the content of the post, so the title, the date and any other information about the post that we want included wouldn’t be.

但这只会呈现帖子的内容，因此不会包含我们想要包含的帖子的标题，日期和其他任何信息。

However, if we try to override the contents of the `content` block like so:

但是，如果我们尝试覆盖`content`块的内容，如下所示：

{% extends "default" %}
    
    {% block content %}
    <h1>I'm trying to override the content!</h1>
    {% endblock %}

… we would still see the content of the post.

…我们仍然会看到该帖子的内容。

This means that we can’t really override what’s inside the `content` block. This is where the `content_wrapper` block comes into play. By defining this block, we can override the `content` block. This is because the `content_wrapper` block is wrapping the `content` block. Now we can do things like output the title and the date of publication.

这意味着我们无法真正覆盖`content`块中的`content` 。 这是`content_wrapper`块起作用的地方。 通过定义此块，我们可以覆盖`content`块。 这是因为`content_wrapper`块包装了`content`块。 现在，我们可以执行输出标题和发布日期之类的操作。

{% block content_wrapper %}
        <article>
            <header>
                <h2>{
        { page.title }}</h2>
                <span class="date">{
        { post.date|date('M dS, Y') }}</span>
            </header>
            <div class="contents">
                {
        { page.blocks.content|raw }}
            </div>
            {% if page.tags %}
                <p class="tags">
                Tags:
                {% for tag in page.tags %}
                <a href="{
        { site.url }}/blog/tags/{
        { tag|url_encode(true) }}">{
        { tag }}</a>{% if not loop.last %}, {% endif %}
                {% endfor %}
                </p>
            {% endif %}
        </article>
    {% endblock %}

### 添加Disqus **(**Adding Disqus**)** ###

Adding [Disqus][] for handling comments is very easy, as it comes built into the skeleton:

添加[Disqus][]以处理评论非常容易，因为它内置在框架中：

{% if site.disqus.shortname and site.disqus.shortname != '' %}
    <div id="disqus_thread"></div>
    <script type="text/javascript">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = '{
        {site.disqus.shortname}}'; // required: replace example with your forum shortname
    
    
        {% if page.disqus.identifier  %}var disqus_identifier = '{
        {page.disqus.identifier}}'; {% endif %}
    
        {% if page.disqus.title %}var disqus_title = '{
        {page.disqus.title}}';{% endif %}
    
        {% if page.disqus.url %}var disqus_url = '{
        {page.disqus.url}}';{% endif %}
    
        {% if page.disqus.category_id %}var disqus_category_id = '{
        {page.disqus.category_id}}';{% endif %}
    
        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function () {
            var dsq = document.createElement('script');
            dsq.type = 'text/javascript';
            dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the
        <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a>
    </noscript>
    {% endif %}

For this to work we’ll have to update the `app/config/sculpin_site.yml` file with the Disqus shortname:

为此，我们必须使用Disqus短名称更新`app/config/sculpin_site.yml`文件：

# Insert your disqus shortname
    disqus:
       shortname: YOUR_DISQUS_USERNAME

### 博客档案 **(**Blog Archives**)** ###

Just like every blog, ours also needs an archive page where readers can see all the previously published posts. In `blog.html`, add the following:

就像每个博客一样，我们的博客也需要一个存档页面，读者可以在其中看到所有以前发布的帖子。 在`blog.html` ，添加以下内容：

---
    layout: default
    title: Posts Archive
    generator: pagination
    use:
        - posts
    
    ---
    {% set year = '0' %}
    <h2>Posts Archive</h2>
    {% for post in page.pagination.items %}
    {% set this_year %}{
        { post.date | date("Y") }}{% endset %}
    {% if year != this_year %}
      {% set month = '0' %}
      {% set year = this_year %}
    {% endif %}
    {% set this_month %}{
        { post.date | date("F") }}{% endset %}
    {% if month != this_month %}
      {% set month = this_month %}
      <h3>{
        { month }} {
        { year }}</h3>
    {% endif %}
      <div>
        <a href="{
        { site.url }}{
        { post.url }}">{
        { post.title }}</a>
      </div>
    {% endfor %}
    
    <div>
    {% if page.pagination.previous_page or page.pagination.next_page %}
        <div class="nav-container"> 
        {% if page.pagination.previous_page %}
        <a class="previous" href="{
        { site.url }}{
        { page.pagination.previous_page.url }}" title="Previous Page"><span class="title">Previous Page</span></a>
        {% endif %}
        {% if page.pagination.next_page %}
        <a class="next" href="{
        { site.url }}{
        { page.pagination.next_page.url }}" title="Next Page"><span class="title">Next Page</span></a>
        {% endif %}
        </div>
    {% endif %}
    </div>

Again we’re using a familiar syntax. Only this time we haven’t specified how many items we want per page. Sculpin will use the default: 10 items.

同样，我们使用一种熟悉的语法。 仅这次，我们没有指定每页要多少个项目。 Sculpin将使用默认值：10个项目。

---
    layout: default
    title: Posts Archive
    generator: pagination
    use:
        - posts
    ---

Next, we break down the following code:

接下来，我们分解以下代码：

{% for post in page.pagination.items %}
    {% set this_year %}{
        { post.date | date("Y") }}{% endset %}
    {% if year != this_year %}
      {% set month = '0' %}
      {% set year = this_year %}
    {% endif %}
    {% set this_month %}{
        { post.date | date("F") }}{% endset %}
    {% if month != this_month %}
      {% set month = this_month %}
      <h3>{
        { month }} {
        { year }}</h3>
    {% endif %}
      <div>
        <a href="{
        { site.url }}{
        { post.url }}">{
        { post.title }}</a>
      </div>
    {% endfor %}

The code above does the same thing we did earlier in the `index.html` file. That is, it loops through all the items in the current page, only this time we’re grouping each post based on month and year.

上面的代码执行了与之前在`index.html`文件中相同的操作。 也就是说，它循环遍历当前页面中的所有项目，仅这次是根据月份和年份对每个帖子进行分组。

## 部署到Github Pages **(**Deploying to Github Pages**)** ##

To deploy to Github pages, you’re going to need a [Github account][] so go ahead and sign up of you haven’t already. Then, [set up Git][], [generate an SSH key][] and [add the SSH key to your Github account][]. If you’re new to all this, I recommend checking out Shaumik’s article on [Git for Beginners][].

要部署到Github页面，您将需要一个[Github帐户，][Github account]所以继续并注册您还没有。 然后， [设置Git][set up Git] ， [生成SSH密钥][generate an SSH key] ， [并将SSH密钥添加到您的Github帐户][add the SSH key to your Github account] 。 如果您不熟悉这一切，建议您阅读Shaumik的[Git for Beginners][]文章。

Once you’ve set up a Github account, [create a new repository][] by using the following format for the name:

设置Github帐户后，请使用以下格式为名称[创建一个新的存储库][create a new repository] ：

your_github_username.github.io

If your username is **captain** then the repository name should be **captain.github.io**. This is pretty much the standard for Github pages, which also means that you can only create one Github page per account.

如果您的用户名是**captain，**则存储库名称应为**captain.github.io** 。 这几乎是Github页面的标准，这也意味着每个帐户只能创建一个Github页面。

Next, go to the root directory of your blog and execute the following:

接下来，转到博客的根目录并执行以下操作：

sculpin generate --env prod

This will generate a site for production. The generated site will be stored in the `output_prod` directory. Once generated, you can go ahead and delete the `.git` directory. If you remember from earlier, we have cloned the Sculpin Blog Skeleton. We’re not really going to contribute code to the repository so we can delete its local repo.

这将产生一个生产场地。 生成的站点将存储在`output_prod`目录中。 生成后，您可以继续删除`.git`目录。 如果您还记得以前的话，我们已经克隆了Sculpin Blog Skeleton。 我们实际上不会为存储库贡献代码，因此我们可以删除其本地存储库。

We now need to initialize a new git repository inside the `output_prod` folder. Navigate inside the directory and execute `git init`. Then, execute the following to commit the changes:

现在，我们需要在`output_prod`文件夹中初始化一个新的git存储库。 浏览目录并执行`git init` 。 然后，执行以下操作以提交更改：

git add -A
    git commit -m "create new blog"

Add the Github repository that you created earlier as a remote:

将您之前创建的Github存储库添加为远程存储库：

git remote add origin git@github.com:your_github_username/your_github_username.github.io.git

Finally, push to the repository:

最后，推送到存储库：

git push origin master

Wait for a few minutes before your Sculpin blog becomes live at `http://your_github_username.github.io`. Congrats!

请等待几分钟，然后您的Sculpin博客就会在`http://your_github_username.github.io` 。 恭喜！

## 结论 **(**Conclusion**)** ##

In this tutorial, we looked at Sculpin, a PHP-based static site generator. As you have seen, Sculpin is a really good option for your static site generation needs. You can access the code used in this tutorial in this [Github repo][].

在本教程中，我们研究了Sculpin，这是一个基于PHP的静态网站生成器。 如您所见，Sculpin是满足您静态站点生成需求的绝佳选择。 您可以在此[Github存储库中][Github repo]访问本教程中使用的代码。

Did you do any extensive customization on your Sculpin blog? Is there any other static site generator solution you’d prefer instead? Let us know!

您是否在Sculpin博客上进行了广泛的自定义？ 您还有其他静态站点生成器解决方案吗？ 让我们知道！

> 翻译自: [https://www.sitepoint.com/sculpin-extended-customizing-your-static-site-blog/][https_www.sitepoint.com_sculpin-extended-customizing-your-static-site-blog]

[Sculpin logo]: /images/20221123/0b96ab76f2be48d8a9372b90d945718a.png
[sculpin commmands]: /images/20221123/f4bb7f59a9514f1383cb8e3c637ceca7.png
[Sculpin Blog Skeleton provided by the Sculpin team]: https://github.com/sculpin/sculpin-blog-skeleton
[Composer]: https://getcomposer.org/
[this post about Spress_ a Sculpin alternative]: https://www.sitepoint.com/building-an-spress-svbtle-theme-responsive-static-blogs/
[Github pages]: https://pages.github.com/
[configuration documentation]: https://sculpin.io/documentation/configuration/
[Sculpin blog sample output]: /images/20221123/160d94c9b1754710923b5ca22fadf00d.png
[generators]: https://sculpin.io/documentation/generators/
[Picnic.css]: http://picnicss.com
[highlight.js]: https://highlightjs.org
[Disqus]: https://disqus.com/
[Github account]: https://github.com/
[set up Git]: https://help.github.com/articles/set-up-git/
[generate an SSH key]: https://help.github.com/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent/
[add the SSH key to your Github account]: https://help.github.com/articles/adding-a-new-ssh-key-to-your-github-account/
[Git for Beginners]: https://www.sitepoint.com/git-for-beginners/
[create a new repository]: https://github.com/new
[Github repo]: https://github.com/sitepoint-editors/hello-sculpin
[https_www.sitepoint.com_sculpin-extended-customizing-your-static-site-blog]: https://www.sitepoint.com/sculpin-extended-customizing-your-static-site-blog/