上一篇说了vue单页面解决解决SEO的问题

只是用php预处理了 标签

但是依然没有内容填充,所以对于内容抓取依然有些乏力,只是解决了从无到有的问题

那接下来可以更进一步的预填充内容了

预填充内容

这里依然使用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;
    $valDe ion = $ret[\'info\'][0][\'txt\'].\' - \'.$val .\',\'.$valDe ion;
    $val  = $ret[\'info\'][0][\'tt\'].\' - \'.$val ;
    $info = $ret[\'info\'][0][\'info\'];
    $textData = @file_get_contents(\"你的文章路径\") ?? $valDe ion;
  }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. vall.cn/\',

 productionSourceMap: true,

 devtool: \'#source-map\',

 productionGzip: false,
 productionGzipExtensions: [\'js\', \'css\'],

 bundleAnalyzerReport: true
}

这样构建时候的入口文件就变成index.php,构建完成的页面入口也为index.php

最终效果

等爬虫更新后就搜到我们的文章了

\"\"

写在最后

  • 目前还是用php来实现主要是实现起来比较简单,对于像我一样后端是php的比较友好
  • 如果再使用node去监听个端口的话需要额外开销和额外的精力去维护
  • 如果后端是纯node的当然用node或者直接配置个SSR更好
  • 关于首页渲染问题推荐是用骨架屏

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

收藏 打印