构建Spress Svbtle主题-响应式静态博客！

最新推荐文章于 2024-10-14 20:53:59 发布

culi3118

最新推荐文章于 2024-10-14 20:53:59 发布

阅读量279

点赞数

文章标签： java html python web javascript ViewUI

原文链接：https://www.sitepoint.com/building-an-spress-svbtle-theme-responsive-static-blogs/

版权

You may have heard of Sculpin – a static site generator for PHP. Static blogs are, as you may know, blogs which you dynamically write in your app or on your local machine, and then export as a pure HTML version for hosting on static-only servers, for speed, reliability, and offline-first friendliness.

您可能听说过Sculpin – PHP的静态站点生成器。如您所知，静态博客是您在应用程序或本地计算机上动态编写的博客，然后将其导出为纯HTML版本，以便在纯静态服务器上托管，以提高速度，可靠性和脱机优先性。

While easy to use and fast to set up, Sculpin’s development has stagnated a bit and the documentation leaves much to be desired. Spress is, in a way, its spritual successor. Much better documentation, much more flexible configuration, much easier to extend, and just as easy to use with almost the same API and commands.

尽管Sculpin易于使用且设置Swift，但其发展却停滞不前，并且文档尚待改进。从某种意义上说， Spress是它的精神继任者。更好的文档，更灵活的配置，更容易扩展，以及几乎相同的API和命令都易于使用。

In this tutorial, we’ll be building an Spress setup for generating a static blog with a custom theme.

在本教程中，我们将构建一个Spress设置来生成带有自定义主题的静态博客。

自举 (Bootstrapping)

This tutorial will assume you have a working PHP environment like Homestead Improved. For convenience, the following few lines will get you started immediately:

本教程将假定您具有像Homestead Improvement这样PHP环境。为了方便起见，以下几行内容将立即帮助您入门：

git clone https://github.com/swader/homestead_improved hi_spress
cd hi_spress
bin/folderfix.sh
vagrant up; vagrant ssh

After we’re in the VM, we can install Spress with:

进入虚拟机后，可以使用以下命令安装Spress：

wget https://github.com/spress/Spress/releases/download/v2.0.0/spress.phar
sudo mv spress.phar /usr/local/bin/spress
sudo chmod +x /usr/local/bin/spress

Spress is now available system-wide (or VM-wide if you’re using a VM), which can be verified by running spress:

现在，Spress在系统范围(或使用VM的情况下在VM范围)可用，可以通过运行spress进行验证：

To create a sample site, we can use the instructions from the docs:

要创建示例网站，我们可以使用文档中的说明：

cd ~/Code
spress site:new myblog spresso
cd myblog
spress site:build --server

The site should now be accessible via http://localhost:4000 or if you’re in a VM like Homestead Improved, you should first forward port 4000 in Homestead.yaml, run vagrant provision outside of the VM, and then access the site via http://homestead.app:4000:

现在应该可以通过http://localhost:4000来访问该站点，或者如果您使用的是Homestead Improvement这样的VM，则应首先在Homestead.yaml转发端口4000，在VM外部运行vagrant provision ，然后访问该站点通过http://homestead.app:4000 ：

If you’re familiar with Sculpin, this setup will be almost muscle memory. Just like Sculpin, Spress also supports a --server option to start PHP’s built-in server, and the --watch option which watches files for changes and rebuilds the site as needed.

如果您熟悉Sculpin，则此设置几乎是肌肉记忆。与Sculpin一样，Spress还支持--server选项来启动PHP的内置服务器，以及--watch选项，该文件--watch文件的更改并根据需要重建站点。

自订主题 (Custom Theme)

We’ll rebuild the Svbtle theme to work with Spress.

我们将重建Svbtle主题以与Spress合作。

For more general information about themes in Spress, see here.

有关Spress中主题的更多一般信息，请参见此处。

压榨中的主题如何工作 (How Themes in Spress Work)

Every post or page you publish with Spress has “metadata frontmatter” – in other words, a bit of specifically formatted text before the content of the post or page. This frontmatter defines variables, settings, and, you guessed it, the layout (theme) to use. This is identical to how Sculpin works. For example, see the sample post “Welcome to Spress”:

您在Spress上发布的每个帖子或页面都有“元数据前沿”，换言之，在该帖子或页面的内容之前有一些特殊格式的文本。该前题定义了变量，设置以及您猜到的要使用的布局(主题)。这与Sculpin的工作方式相同。例如，请参见示例文章“ Welcome to Spress”：

---
layout: "post"
title: "Welcome to Spress"
categories: []
tags: ["sample post", "posts"]
---
To create a new post, simply runs `spress new:post` command or adds a file
in the `./src/content/posts` folder that follows the convention `YYYY-MM-DD-name-of-post.md`

....

The part between the separators (---) at the top is the frontmatter. In it, you can see (among other things) the value layout: "post". This literally means “find the content block in the layout file post.twig and put the content below inside it after you turn it into HTML”. If we now look at post.twig in /src/layouts, we’ll see the following:

分隔符之间的部分( --- )位于顶部。在其中，您可以看到(以及其他)值layout: "post" 。从字面上看，这意味着“在将其转换为HTML之后，在布局文件post.twig查找内容块并将内容放在其下面”。如果现在查看/src/layouts中的post.twig ，我们将看到以下内容：

---
layout: default
---
{% set isPostLayout = true %}

{% block content %}
    {% include 'post.html' with { 'post': page } %}
{% endblock %}

...

The content block is right there, ready to receive the converted MD content. Apart from the basic Twig syntax, we can see that this layout itself has some frontmatter as well. These are nested layouts in action: while our “Welcome to Spress” post extends post.twig, post.twig itself extends default.twig – the default layout which defines the CSS, JS, and other elements common to all pages / posts. Thus, we can see that the layout system of Spress is practically identical to regular Twig usage, with the sole difference that Spress uses frontmatter for defining inheritance.

内容块就在那里，准备接收转换后的MD内容。除了基本的Twig语法外，我们还可以看到此布局本身也有一些先例。这些是实际使用的嵌套布局：尽管我们的“欢迎使用”帖子扩展了 post.twig ，但post.twig本身扩展了default.twig －默认布局，定义了CSS，JS和所有页面/帖子共有的其他元素。因此，我们可以看到Spress的布局系统实际上与常规Twig用法相同，唯一的区别在于Spress使用frontmatter定义继承。

建立主题 (Building a Theme)

What building a theme comes down to, then, is just putting the right CSS / JS into the right locations and altering the Twig templates slightly.

然后，构建主题的方法就是将正确CSS / JS放置在正确的位置，并稍微更改Twig模板。

First, let’s put some new CSS into the mix. Download this file into /src/assets/css. Then, grab a profile image or logo (if you don’t have one, use Adorable Avatars) and save it as src/assets/img/profile.png.

首先，让我们添加一些新CSS。将此文件下载到/src/assets/css 。然后，获取个人资料图片或徽标(如果您没有，请使用可爱的头像 )并将其保存为src/assets/img/profile.png 。

Anything you place in src/assets gets copied over into /assets at build time.

您在src/assets放置的所有内容都会在构建时复制到/assets中。

Next, let’s add this CSS to our <head> section. In /src/includes/head.html, comment out or remove the lines that add bootstrap.min.css and style.css to the document, and add the svbtle.css sheet, so the section looks something like this:

接下来，让我们将此CSS添加到<head>部分。在/src/includes/head.html ，注释掉或删除将bootstrap.min.css和style.css添加到文档中的行，并添加svbtle.css表，因此该部分如下所示：

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="{{ site.url }}/assets/css/svbtle.css" rel="stylesheet" type="text/css" />

Let’s now change the content of layout/default.html to:

现在让我们将layout/default.html的内容更改为：

<!DOCTYPE HTML>
<html lang="en">
<head>
    {% include 'head.html' %}
</head>
<body>
<div class="sidebar">
    <!-- Logo -->
    <div class="logo">
        <a href="/" title="{{ site.title }}">
            <span class="img"></span>
        </a>
        <a href="/" title="{{ site.title }}">
            <h1>{{ site.title }}</h1>
        </a>
    </div>
    <!-- Description -->
    <div class="description">
        Some blog posts by <a
            href="/about">me</a>.
    </div>
    <!-- Navigation -->
    <div class="navigation">
        <a href="{{ site.url }}/blog">Archive</a>
        {#<a href="{{ site.url }}/blog/categories">#}
            {#<nobr>Categories & tags</nobr>#}
        {#</a>#}
        <a href="{{ site.url }}/about">About</a>
    </div>
</div>

<div id="main" class="container spresso-wrap">
    {% block content %}
    {{ page.content }}
    {% endblock %}
</div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

    {% if site.code_highlight %}
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    {% endif %}

    {% block javascript %}{% endblock %}

</body>
</html>

The content of layout/post.html should become:

layout/post.html的内容layout/post.html为：

---
layout: default
---
{% set isPostLayout = true %}

{% block content %}
    <article class="post">
        <header>
            <div class="title"><a
                        href="{{ site.url }}{{ page.url }}">{{ page.title }}</a></div>
        </header>
        <div class="text">
            {{ page.content | raw }}
        </div>
        
    </article>
{% endblock %}

{% block javascript %}
    {% if (page.comments is defined and page.comments) or (page.comments is not defined and site.comments.enabled) %}
        <script type="text/javascript">
            var disqus_shortname = '{{ site.comments.disqus_shortname }}';
            
            (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>
    {% endif %}
{% endblock %}

And the content of src/content/index.html should now be:

src/content/index.html现在应该是：

---
layout: "page"
title: "Welcome Svbtle theme"

generator: "pagination"
provider: "site.posts"
max_page: 5
sort_by: "date"
---

{% for post in page.pagination.items %}

    <div class="date">
        <a href="{{ post.url }}">
            {{ post.date|date("d. F, Y") }}
        </a>

    </div>

    <article class="post">
        <header>
            <div class="title"><a
                        href="{{ site.url }}{{ post.url }}">{{ post.title }}</a></div>
        </header>
        <div class="text">

            {% if '<!--more-->' in post.content %}
                {{ post.content | split('<!--more-->') | first | raw }}
                <footer><a href='{{ site.url }}{{ post.url }}' class='continue'> Read more </a>
                </footer>
            {% else %}
                {{ post.content | raw }}
            {% endif %}

        </div>
    </article>

{% endfor %}


{% if page.pagination.previous_page or page.pagination.next_page %}
    <nav id="pagination">
        <div class="next">
            {% if page.pagination.previous_page %}<a
                href="{{ site.url }}{{ page.pagination.previous_page.url }}">Newer Posts</a>{% endif %}
        </div>
        <div class="prev">{% if page.pagination.next_page %}<a
                href="{{ site.url }}{{ page.pagination.next_page.url }}">Older Posts</a>{% endif %}
        </div>
    </nav>
{% endif %}

In addition to a theme change, we added nice little hack into the mix as well – while rendering content, Spress will look for the  HTML comment in posts. If it encounters it, it will only render the content before it on the main page, and will summon a “Read more” button underneath. Clicking it, the reader is taken to the post’s full page and continues reading. Many thanks to @coderabbi for this hack.

除了主题更改之外，我们还向组合添加了一些不错的技巧–在渲染内容时，Spress会在帖子中寻找 more-  HTML注释。如果遇到这种情况，它将仅在主页上呈现该内容之前的内容，并在其下方召唤一个“阅读更多”按钮。单击它，读者将被带到帖子的整页并继续阅读。非常感谢@coderabbi的这次入侵。

Rebuild the site now with CTRL+C to stop the server and spress site:build --server to serve it, and we should see our newly made theme applied – it’s as simple as that!

现在使用CTRL+C重建站点以停止服务器，然后spress site:build --server为其提供服务，我们应该看到应用了我们新创建的主题，就这么简单！

Note: while building themes is relatively easy, installing them is a bit counterintuitive. To install a theme, one must effectively clone a new Spress site, and then paste the MD sources into it. This tends to be awkward due to different file structure used across themes but as you can see above, it usually doesn’t involve much work.

注意：虽然构建主题相对容易，但是安装主题有点违反直觉。 要安装主题，必须有效地克隆一个新的Spress网站，然后将MD源粘贴到其中。 由于跨主题使用了不同的文件结构，因此这往往很尴尬，但是正如您在上面看到的那样，它通常不需要太多工作。

If we look at our site now and render it for different screen sizes, we should see it work just fine:

如果我们现在查看我们的网站并以不同的屏幕尺寸渲染它，我们应该会看到它正常工作：

结论 (Conclusion)

In this tutorial, we looked at Spress, a static site generator written in PHP with Symfony components, and generated a custom themed blog. In a followup post, we’ll look at more of its features – including taxonomies (categories and tags), custom pages, and deployment, and we’ll write a plugin or two.

在本教程中，我们研究了Spress，这是一个用PHP编写的带有Symfony组件的静态网站生成器，并生成了一个自定义主题博客。在后续文章中，我们将介绍其更多功能-包括分类法(类别和标签)，自定义页面和部署，并编写一个或两个插件。

Do you use a static or a dynamic blog? Why? Have you tried Spress or are you still on Jekyll, Sculpin, or a similar tool? Let us know!

您使用静态博客还是动态博客？为什么？您是否尝试过Spress，还是仍在使用Jekyll，Sculpin或类似工具？让我们知道！