为什么要用SSR

在主题示例这一节中，简要描述了客户端渲染(Client-Side-Rendering)的配置例子。对于页面内容的显示，这种模式已经足够了。但如果需要让搜索引擎抓取内容，则需要采用服务器端渲染(Server-Side-Rendering)

服务器端渲染

在 function.js 中使用渲染助手进行配置：

nv_render_assistant({
    // 客户端渲染：“CSR”；服务器端渲染：“SSR”
    rendering_mode: "SSR",

    root_folder: get_theme_path("./dist"), // 你可以将样式脚本放到这个目录，就可以公开到前台的根目录下进行访问了

    /* 通用模板参数，默认值如下，一般不用自己改 */
    /*
    template: {
        head: (req,route_name) => `<!DOCTYPE html><html lang="zh-cn"><head>${ nv_head(req,route_name) }</head><body>`,
        foot: (req,route_name) => `</body></html>`,
    },
    */

    /*
    routes：
    type默认：text/html
    genaral_html默认：true
    status默认：200
    注：只有当 type 是 text/html 【同时】 genaral_html 为true，才使用上面的通用html模板
    */

    routes: [
        {name: 'home',					path: '/'},
        {name: 'sitemap',			path: '/sitemap.xml', type: 'text/xml', genaral_html: false},
        {name: 'articles',			path: '/articles'},
        {name: 'articles_paged',path: '/articles/page/:current_page'},
        {name: 'post',					path: '/:post_slug'},
        {name: 'term',					path: '/:taxonomy/:term_slug'},
        {name: 'term_paged',		path: '/:taxonomy/:term_slug/page/:current_page'},
        {name: '404',					path: '*',	status: 404},
    ],
})

添加上述配置后，即可使用异步动作钩子添加对route的渲染：

add_action('async:nv_render:home',(next,{echo,req,route})=>{
    echo(`<h1>欢迎访问首页</h1>`);
    // 异步钩子，执行完后必须使用流程控制方法来执行下一个。
    next();
})
// ...其他route的渲染

示例

详情请在 后台-套件中心-获取套件 下载安装 服务器端渲染主题示例，即可查看主题示例源代码

默认Block样式

文章渲染结果仅保证基本html，要实现编辑器的配置，还需要增加样式。可参考示例代码，或使用类似以下的css：

p.drop-cap:first-letter {
    float: left;
    font-size: 6em;
    margin: .1em .1em 0 0;
}
.image-align-left {
    text-align: left;
}
.image-align-center {
    text-align: center;
}
.image-align-right {
    text-align: right;
}
.image-align-full img {
    width: 100%;
}
img.rounded {
    border-radius: .5em;
}
img.shadow {
    box-shadow: 0 10px 10px rgba(0,0,0,.1);
}
table.width-footings > tbody > tr:last-child {
    font-weight: bold;
}
table.layout-fixed {
    table-layout: fixed;
}
hr {
    height: 60px;
    align-items: center;
    justify-content: center;
    display: flex;
    border: none;
}
hr:not(.hide-symbol):before{
    display: inline-block;
    content: "***";
    font-size: 30px;
    height: 30px;
    line-height: 42px;
    letter-spacing: .25em;
    color: #000;
    opacity: .75;
}