第十七天 - 一个 Yancy 网站

img

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#!/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,以便于检索我们的页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 来编辑我的内容。该网站特别需要一个索引页面,所以我创建了一个。

img

img

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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>

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

img

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