<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试页面</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>加载成功！</h1>
    <p>当你看到这行字时，表示页面文件加载成功。并且应该显示为红色。</p>
</body>
</html>

在主题 example-theme/dist 中创建 style.css 文件，并编写以下内容：

p {color: red;}

此时，刷新前台页面，可以看到内容成功加载了！至此，我们可以愉快的使用 vue、react、angular等现代的前端开发框架来开发前后端分离的主题了：只需要将它们打包好的html页面存放到此目录即可使用。

一些提示

主题基本结构

一个主题通常有以下结构：

首页
文章列表页（分类列表页、Tag列表页）
文章内容页（评论）

其中，首页可以根据实际需要来自定义 REST API。其它的文章列表、文章内容、评论接口API均可在这里找到现成的使用。

地址和路由

请充分使用路由path参数的功能来实现固定链接中包含文章slug。例如可以这样设置来从地址栏直接识别出页面类型：

// 文章或页面
{
    path: "/:post_slug",
    name: "post",
    component: Post,
    meta: {is_post: true},
},
// 文章或页面，评论分页
{
    path: "/:post_slug/comment-page-:comment_page(\\d+)",
    name: "post-comment-paged",
    component: Post,
    meta: {is_post: true},
},
// 全部文章页面
{
    path: "/articles",
    name: "articles",
    component: Term,
    meta: {is_term: true},
},
// 全部文章分页
{
    path: "/articles/page/:current_page(\\d+)",
    name: "articles-paged",
    component: Term,
    meta: {is_term: true},
},
// 文章分类
{
    path: "/:taxonomy/:term_slug",
    name: "term",
    component: Term,
    meta: {is_term: true},
},
// 文章分类分页
{
    path: "/:taxonomy/:term_slug/page/:current_page(\\d+)",
    name: "term-paged",
    component: Term,
    meta: {is_term: true},
}