只是用 PHP 预处理了 meta 标签
但是依然没有内容填充, 所以对于内容抓取依然有些乏力, 只是解决了从无到有的问题
那接下来可以更进一步的预填充内容了
预填充内容
这里依然使用 PHP 来实现
首先在 PHP 中拉取需要填充的数据, 列表或是具体内容
修改拉取数据部分
- $urlExp = explode('/',$_SERVER['REQUEST_URI']);
- if(count($urlExp)>2 && $urlExp[1] == 'article'){
- // 文章页拉取内容
- $ret = @json_decode(http_Req('http://127.0.0.1/api/Blog/getsinglelist',['tuid'=>$urlExp[2]],'POST'),true);
- if($ret){
- $valKeywords = $ret['info'][0]['tt'].','.$valKeywords;
- $valDescription = $ret['info'][0]['txt'].'-'.$valTitle.','.$valDescription;
- $valTitle = $ret['info'][0]['tt'].'-'.$valTitle;
- $info = $ret['info'][0]['info'];
- $textData = @file_get_contents("你的文章路径") ?? $valDescription;
- }else{
- $textData='none';
- }
- }
- if(!$textData){
- // 列表页拉取列表
- $ret = @json_decode(http_Req('http://127.0.0.1/api/Blog/getlist',['page'=>1,'type'=>0],'POST'),true);
- if($ret){
- $textData = '';
- foreach ($ret['info'] as $key=>$val) {
- $textData.='标题:'.$val['tt'].'.';
- $textData.='描述:'.$val['txt'].'.';
- $textData.='创建时间:'.$val['ctime'].'.';
- $textData.='浏览次数:'.$val['fl'].'.';
- }
- }
- }
然后在 html 部分输出相关内容
在 body 下放一个 div, 并且隐藏掉他
- <div class="pre-view" style="position:absolute;z-index: -99999;opacity: 0;top: -9999px;left: -9999px">
- <?PHP echo $textData; ?>
- </div>
这样爬虫就可以抓取到我们的内容并且不影响前端渲染
优化 vue 构建
之前的构建是在构建完成后修改 HTML 为 PHP, 有点蠢
这里改下 webpack 的配置就好了
修改 build/webpack.prod.conf
- new HtmlWebpackPlugin({
- filename: config.build.index,
- // 这里改为 index.PHP
- template: 'index.php',
- inject: true,
- minify: {
- removeComments: true,
- collapseWhitespace: true,
- removeAttributeQuotes: true
- // more options:
- // https://github.com/kangax/html-minifier#options-quick-reference
- },
- // necessary to consistently work with multiple chunks via CommonsChunkPlugin
- chunksSortMode: 'dependency'
- }),
修改 config/index.JS
- build: {
- // Template for index.HTML
- // 这里改为 index.PHP
- index: path.resolve(__dirname, '../dist/index.php'),
- // Paths
- assetsRoot: path.resolve(__dirname, '../dist'),
- assetsSubDirectory: 'static',
- assetsPublicPath: 'http://cdn.linkvall.cn/',
- productionSourceMap: true,
- devtool: '#source-map',
- productionGzip: false,
- productionGzipExtensions: ['js', 'CSS'],
- bundleAnalyzerReport: true
- }
这样构建时候的入口文件就变成 index.PHP, 构建完成的页面入口也为 index.PHP
最终效果
等爬虫更新后就搜到我们的文章了
写在最后
目前还是用 PHP 来实现主要是实现起来比较简单, 对于像我一样后端是 PHP 的比较友好
如果再使用 node 去监听个端口的话需要额外开销和额外的精力去维护
如果后端是纯 node 的当然用 node 或者直接配置个 SSR 更好
关于首页渲染问题推荐是用骨架屏
来源: https://www.jb51.net/article/150418.htm