Vue 实现 Open Graph 分享预览
生活随笔
收集整理的這篇文章主要介紹了
Vue 实现 Open Graph 分享预览
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
什么是 Open Graph Protocol？，可以去看這篇文章
Open Graph Protocol
像vue的插件，例如vue-head，vue-meta這些可以動態的添加meta標簽到head頭中，但是我在嘗試之后，并沒有什么作用，原因是我們在拷貝鏈接到國外的一些社交軟件時，例如Facebook，Twitter等，這時候是沒法執行js的。
解決方案：我們的想法是通過服務端渲染，但是我們想的呢是通過配置nginx來訪問php文件，通過php來獲取動態的信息，例如標題，圖片等信息，然后讀取我們打包的單頁面的html文件，通過拼接字符串，來生成OG標簽，然后再輸出html文件的內容出去。
網站根目錄結構如下：
演示代碼如下：
//nginx的主要配置 location / {root /home/www/suyuanAPI/public/suyaunWeb;index index.php index.html index.htm;try_files $uri $uri/ /index.php?$args;}location ~ \.php$ {root html;fastcgi_pass 127.0.0.1:9000;fastcgi_read_timeout 500;fastcgi_index index.php;fastcgi_param SCRIPT_FILENAME /home/www/suyuanAPI/public/suyaunWeb$fastcgi_script_name;include fastcgi_params;} <?php $file_path = "./index.html";$head = '<head>';if(file_exists($file_path)){$fp = fopen($file_path,"r");$str = fread($fp,filesize($file_path));//指定讀取大小，這里把整個文件內容讀取出來if($_SERVER['QUERY_STRING'] == 'name=home'){$new_head = $head . '<meta property=og:title content="這是首頁">';$str = str_replace($head, $new_head, $str);} else {$new_head = $head . '<meta property=og:title content="這是個人">';$str = str_replace($head, $new_head, $str);}echo $str;fclose($fp);} ?>代碼解析，代碼寫的比較簡陋，主要就是讀取文件，然后獲取到鏈接上的參數，替換字符，再拼接字符和對應的OG標簽，根據參數的不同生成不同的OG標簽，最后輸出html
總結
以上是生活随笔為你收集整理的Vue 实现 Open Graph 分享预览的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue3 --- 安装和使用echart
- 下一篇： vue点击切换css样式