SeoFix

SeoFix是一个路由，可以对单页面应用的SEO进行优化，无需使用SSR等服务器渲染技术。

安装

npm install seofix

使用

import Seofix from "seofix";
import * as path from "path";

const sf = new Seofix({
    source_type: 'file',
    source_dir: '${YOUR_SOURCE_DIR}',
    source_app_mode: 'history',
    app_port: 8000,
    app_routes: [
        {
            path: '/articles/:id',
            module: 'articles'
        }
    ]
});

sf.register('articles', (setHtml, setJs, next)=>{
    setHtml(`<h1>Welcome to my website</h1>`);
    setJs("title", "Welcome to my website");
    next();
})

sf.app();

sf.listen(function(){
    console.log("Server started on port 8000");
});

原理

1. 首先，SeoFix在收到请求时，会先按照所给的配置去请求服务器；
2. SeoFix根据请求的路径，判断是否匹配到了需要的模块；
3. SeoFix运行模块，将模块给出的setHtml、setJs拼接之后覆盖在html文件的seofix:content注释中；

框架内使用

框架内使用（React）：

import React from "react";

export default function App() {
    return <h1>{window['title']}</h1>
}

框架内使用（Vue）：

<template>
    <h1>{{ window['title'] }}</h1>
</template>

进步性 & 局限性

详见：https://blog.csdn.net/Kysou/article/details/142715628

提示

代码极其简单，且封装非常浅层（是本人第一次做npm包），请见谅。