雅荷心语博客上一篇讲了如果设置 history 模式,
这次来讲价怎么设置SEO信息,
首先,我们在php控制器里获取一下当前的url,
每次都可以获取到当前url,
然后我们根据URl不同,匹配不一样的配置文件即可!
php:
|
1 2 3 4 5 6 7 8 9 |
public function index(){ if(isMobile2()){ return view('./start/index.html'); }else{ $seo = makeSEO($_SERVER['REQUEST_URI']); $this->assign('seo',current($seo)); return view('./index/index.html'); } } |
在载入模板之前,先分配seo信息过去,SEO信息来自一个配置文件
|
1 2 3 4 5 6 7 8 |
function makeSEO($path='/'){ $data = require_once './config/seoConfig.php'; return isset($data[$path])?$data[$path]:[ 'title'=>'移动云全景 - 带上全景去旅行', 'keywords'=>'720全景制作', 'description'=>'720全景制作', ]; } |
这样我们每次都可以根据url的不同,获取不一样的seo数组,然后分配给index.html,
因为index.html是vue的文件,
vue的变量是 {{ xx }} ,当然与thinkphp繁荣模板引擎 {} 不冲突, 也就是我们可以向怎么使用php数据就可以使用哈~~
所以, 我的vue的index.html 就变成这样~~~
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>{$seo.title} - 360度全景拍摄,VR制作,全景旅游,全景新闻,全景图片,虚拟漫游,VR视频,VR全景旅游</title> <meta name="Generator" content="PHPSTORM®"> <meta name="Author" content="@天明"> <meta name="Keywords" content="{$seo.keywords}, 移动云全景, 移动全景拍摄,游戏全景,全景虚拟现实,720全景摄影,全景视频,全景相机,360度全景拍摄,VR制作,全景旅游,街景地图,全景新闻,全景图片,虚拟漫游,VR视频,VR航拍"> <meta name="Description" content="{$seo.description},移动云全景平台，是一站式解决360度全景摄影、VR全景视频拍摄、VR空中全景航拍、3D虚拟现实制作，全景上传、分享、展示、漫游，以及创作者互动交流、VR供需交易的综合性移动端及PC共享互通的全景制作平台"> <meta name="description" itemprop="description" content="{$seo.description}"> <meta itemprop="name" content="{$seo.title} - 移动云全景 - 带上全景去旅行"> <meta itemprop="image" content="http://vr.he29.com/static/logo.png"><!-- 图片 --> </head> |
如果启动vue项目
|
1 2 3 4 5 6 |
λ npm run dev > test@1.0.0 dev C:\www\Aweb\vr29\public_html\index\app > node build/dev-server.js > Starting dev server... |
你将在本地看到{$seo.title} 这样的标题, 当然这个无所谓啦~~
编译完成,上传服务器!
{$seo.title} 就会被php 模板引擎给编译 成 <?php echo $seo[‘title’]; >
用户看到的一切都是正常的,
当然你切换页面,如果你在配置文件定义了数据,则页面标题,关键词,描述什么的都会改变哈哈~`
成品效果,欢迎 百度 : 移动云全景 查看效果哈~
