第十七天 - 一个 Yancy 网站

Mon Dec 17, 2018

今年，我决定Yancy需要一个网站。而不是建立一个像Statocles这样的静态网站生成器的网站，这些天如此受欢迎，我决定做一些疯狂和不可预测的事情：一个动态网站！幸运的是，我有一个完美的项目，可以轻松建立一个动态的网站：Yancy！

任何动态网站的关键部分都是数据库。由于我只想编写 Markdown 并渲染 HTML，因此我的架构非常简单：存储页面路径的位置，存储页面 Markdown 以进行编辑的位置以及放置渲染 HTML 的位置。我建立了一个 SQLite 数据库并使用Mojo::SQLite::Migrations构建了pages 表。

#!/usr/bin/env perl
use Mojolicious::Lite;
use Mojo::SQLite;
helper db => sub {
    state $db = Mojo::SQLite->new( 'sqlite:' . app->home->child( 'docs.db' ) );
    return $db;
};
app->db->auto_migrate(1)->migrations->from_data();

# Start the app. Must be the code of the script
app->start;

__DATA__
@@ migrations
-- 1 up
CREATE TABLE pages (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    path VARCHAR UNIQUE NOT NULL,
    markdown TEXT,
    html TEXT
);

准备好我们的数据库表后，我需要一种编辑页面的方法。Yancy 的内置编辑器带有marked.js，用于将 Markdown 渲染为 HTML。我只需要告诉它哪个列是 Markdown 以及在哪里存储 HTML。我们将使用路径作为 ID，以便于检索我们的页面。

plugin 'Yancy', {
    backend => { Sqlite => app->db },
    read_schema => 1,
    collections => {
        pages => {
            'x-id-field' => 'path',
            'x-list-columns' => [qw( path )],
            'x-view-item-url' => '/{path}',
            properties => {
                id => {
                    readOnly => 1,
                },
                markdown => {
                    format => 'markdown',
                    'x-html-field' => 'html',
                },
            },
        },
    },
};

现在我们可以创建一些页面。我可以用 perl myapp.pl daemon 启动应用程序，然后通过访问 http://127.0.0.1:3000/yancy 来编辑我的内容。该网站特别需要一个索引页面，所以我创建了一个。

创建我们的内容后，我需要添加一个路由来显示它。使用 *通配符占位符，路由将匹配任何路径。然后，我可以使用Yancy控制器get 操作查找数据库中请求的页面。当用户访问 “/” 时，我设置了一个默认的 “index” 来拉取我们的索引页面。最后，路由需要一些模板才能显示页面的 HTML 和带有一些有用链接的布局，也许还有一些 Bootstrap可以让事情看起来更好一些。

get '/*id' => {
    id => 'index', # Default to index page
    controller => 'yancy',
    action => 'get',
    collection => 'pages',
    template => 'pages',
};
# Start the app. Must be the last code of the script
app->start;
__DATA__
@@ pages.html.ep
% layout 'default';
%== $item->{html}

@@ layouts/default.html.ep
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="/yancy/bootstrap.css">
        <title><%= title %></title>
    </head>
    <body>
        <header>
            <!-- Omitted for brevity -->
        </header>
        <main class="container">
            <%= content %>
        </main>
        %= javascript '/yancy/jquery.js'
        %= javascript '/yancy/popper.js'
        %= javascript '/yancy/bootstrap.js'
    </body>
</html>

现在我可以打开我的网站，看到我创建的索引页面！

现在我有一个基本的网站！这是迄今为止的代码。这是一个好的开始，但如果有用的话，我还需要更多…