区分移动端和 PC 端
使用 Nginx 区分移动端和 PC 端 。
需求
- 移动端用户访问www.echoxu.cn或者echoxu.cn就跳转到针对移动端定制的网站,即：
m.echoxu.cn. - PC端用户访问www.echoxu.cn或者echoxu.cn就跳转到针对PC端定制的网站,即：
www.echoxu.cn. - 在主页的footer里添加
PC|移动端,这样在误判的情况下用户还可以访问和设备类型匹配的网站.
定制移动端和PC端
移动端和PC端有如下区别:
- 内容区宽度,PC端1024px，移动端740px
- sidebar宽度
- sidebar和content间距
要实现如上需求很简单,只需在/docs/.vuepress/styles/index.styl里添加如下内容:
/*修改sidebar宽度*/
.sidebar{
width: 16rem
}
/*修改内容区最大宽度*/
.content:not(.custom){
max-width: 1040px
}
/*修改内容区和sidebar之间的间距*/
.page{
padding-left: 15rem
}
PC端应用如上的css，而移动端则使用默认的样式.
部署移动端和PC端的脚本如下:
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 全局设置
curDateTime=`date +%Y-%m-%d,%H:%m:%s`
# 发布到移动端部署节点(只包含静态内容)
echo -e " \033[35m \t------------------------------------------------- \033[0m"
echo -e " \033[35m \t\t开始部署到移动端节点 \033[0m"
echo ""
echo ""
mv docs/.vuepress/styles stylebak/
yarn run docs:build
# 每次执行yarn run docs:build后会删除dist下的.git及remote仓库名
cd docs/.vuepress/dist
git init
git add -A
git commit -m "commit AT $curDateTime"
checkmdocV1remote=`git remote -v|grep mdocV1 |wc -l`
if [ "$checkmdocV1remote" == 2 ];then
echo -e " \033[35m \t------------------------------------------------- \033[0m"
echo -e " \033[35m \tstatus:-->mdocV1 REMOTE ALREADY EXISTS! \033[0m"
echo -e " \033[35m \t------------------------------------------------- \033[0m"
else
git remote add mdocV1 git@blog.echoxu.cn:/home/git/mdocV1/mdocV1.git
if [ $? -eq 0 ];then
echo -e " \033[35m \tmdocV1 REMOTE CREATED! \033[0m"
fi
fi
git push mdocV1 master -u -f
cd -
echo ""
echo ""
echo -e " \033[35m \t------------------------------------------------- \033[0m"
echo -e " \033[35m \t\t成功发布到移动端部署节点 \033[0m"
echo ""
echo ""
echo ""
echo ""
echo ""
echo ""
# 发布到protect部署节点(包含整站内容)
echo -e " \033[31m \t------------------------------------------------- \033[0m"
echo -e " \033[31m \t开始部署到protect节点 \033[0m"
echo ""
echo ""
mv stylebak/styles docs/.vuepress/
yarn run docs:build
if [ -d '.git' ];then
echo -e " \033[31m \t.git already exists!\033[0m"
else
git init
echo -e " \033[31m \tgit init\033[0m"
fi
git add -A
git commit -m "commit at $curDateTime"
checkProtectremote=`git remote -v|grep docV1Protect |wc -l`
if [ "$checkProtectremote" == 2 ];then
echo -e " \033[31m \t------------------------------------------------- \033[0m"
echo -e " \033[31m \tstatus:-->docV1Protect REMOTE ALREADY EXISTS! \033[0m"
echo -e " \033[31m \t------------------------------------------------- \033[0m"
else
git remote add docV1Protect git@blog.echoxu.cn:/home/git/docV1Protect/docV1Protect.git
if [ $? -eq 0 ];then
echo -e " \033[31m \tdocV1Protect REMOTE CREATED! \033[0m"
fi
fi
git push docV1Protect master -u -f
echo ""
echo ""
echo -e " \033[31m \t------------------------------------------------- \033[0m"
echo -e " \033[31m \t成功发布到Protect部署节点 \033[0m"
echo ""
echo ""
echo ""
echo ""
echo ""
echo ""
# 发布到pc部署节点(只包含静态内容)
echo -e " \033[36m \t------------------------------------------------- \033[0m"
echo -e " \033[36m \t开始部署到PC节点 \033[0m"
echo ""
echo ""
yarn run docs:build
cd docs/.vuepress/dist
git init
git add -A
git commit -m "commit at $curDateTime"
checkdocV1remote=`git remote -v|grep docV1 |wc -l`
if [ "$checkdocV1remote" == 2 ];then
echo -e " \033[36m \t------------------------------------------------- \033[0m"
echo -e " \033[36m \tstatus:-->docV1 REMOTE ALREADY EXISTS! \033[0m"
echo -e " \033[36m \t------------------------------------------------- \033[0m"
else
git remote add docV1 git@blog.echoxu.cn:/home/git/docV1/docV1.git
if [ $? -eq 0 ];then
echo -e " \033[36m \tdocV1 REMOTE CREATED! \033[0m"
fi
fi
git push docV1 master -u -f
echo ""
echo ""
echo -e " \033[36m \t------------------------------------------------- \033[0m"
echo -e " \033[36m \t成功发布到PC部署节点 \033[0m"
- 定义发布别名
cat ~/.bashrc
添加
alias vd='cd /home/echoxu/software/vuepress && sh /home/echoxu/software/vuepress/deploy.sh'
使配置生效
source ~/.bashrc
至此在终端中输入vd即可执行发布流程.
定制vuepress的footer
需求: 在footer区添加PC|移动端链接。
- 新建GlobalLayout.vue
vim docs/.vuepress/theme/layouts/GlobalLayout.vue
内容如下:
<template>
<div id="global-layout">
<component :is="layout"/>
<footer>
<center>
<a href="https://www.echoxu.cn">PC|</a>
<a href="https://m.echoxu.cn">移动端</a>
</center>
<center><p>Copyright © 2019 www.echoxu.cn</p></center>
</footer>
</div>
</template>
<script>
export default {
computed: {
layout () {
if (this.$page.path) {
if (this.$frontmatter.layout) {
// 你也可以像默认的 globalLayout 一样首先检测 layout 是否存在
return this.$frontmatter.layout
}
return 'Layout'
}
return 'NotFound'
}
}
}
</script>
- 新建index.js
vim docs/.vuepress/theme/index.js
内容如下：
module.exports = {
extend: '@vuepress/theme-default',
globalLayout: 'layouts/GlobalLayout.vue'
}
nginx区分移动端和PC
分别新建docV1.conf及mdocV1.conf
docV1.conf内容如下:
[echoxu@izuf63ewkwzrm8b1mgxl7uz vhost]$ cat docV1.conf
server{
listen 80;
server_name www.echoxu.cn echoxu.cn;
#return 301 https://$server_name$request_uri;
rewrite ^/(.*)$ https://www.echoxu.cn/$1 permanent;
}
server{
listen 443 ssl;
server_name www.echoxu.cn echoxu.cn;
ssl_certificate /opt/nginx/ssl/www.echoxu.cn.crt;
ssl_certificate_key /opt/nginx/ssl/www.echoxu.cn.key;
access_log /opt/nginx/logs/docV1Access.log;
error_log /opt/nginx/logs/docV1Error.log;
location / {
root /opt/nginx/html/docV1;
index index.html index.htm;
if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
set $mobile_request '1';
}
if ($mobile_request = '1') {
rewrite ^.+ https://m.echoxu.cn$uri;
}
}
location ~* \.(sh|docx|txt|doc|php|php5|pl|py|zip|gz|bx|)$ {
deny all;
}
}
mdocV1.conf内容如下：
[echoxu@izuf63ewkwzrm8b1mgxl7uz vhost]$ cat mdocV1.conf
server{
listen 80;
server_name m.echoxu.cn;
#return 301 https://$server_name$request_uri;
rewrite ^/(.*)$ https://m.echoxu.cn/$1 permanent;
}
server{
listen 443 ssl;
server_name m.echoxu.cn;
ssl_certificate /opt/nginx/ssl/m.echoxu.cn.crt;
ssl_certificate_key /opt/nginx/ssl/m.echoxu.cn.key;
access_log /opt/nginx/logs/mdocV1Access.log;
error_log /opt/nginx/logs/mdocV1Error.log;
location / {
root /opt/nginx/html/mdocV1;
index index.html index.htm;
if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
set $mobile_request '1';
}
if ($mobile_request != '1') {
rewrite ^.+ https://www.echoxu.cn$uri;
}
}
location ~* \.(sh|docx|txt|doc|php|php5|pl|py|zip|gz|bx|)$ {
deny all;
}
}
至此通过不同设备访问网站将得到不同的呈现效果.
注意
使用Nginx+Cookie结合效果会更好.