正好最近有点时间，稍微把网站升级一下，支持一下基础功能评论（没有互动，写作确实很难坚持下去）以及服务端渲染动态标题（SEO)，顺便将升级下协议，升级http2.0（多路复用，后续支持sw、pwa…），升级https（安全，小绿锁）……借此分享下~
支持disqus评论
之前一直纠结自己写评论系统还是使用第三方的，后续想了一下，评论的初衷是为了让用户更易于和我互动，让用户在我的网站再注册登录反而违背了这个初衷，所以放弃了写评论系统，开始选用三方评论，看了畅言、来比力等，虽然比较好地支持国内评论，但是尝试用起来不如人意，有可能也会成为下一个多说，所以最后还是选用了disqus评论，虽然需要翻墙，但是各方面支持都很好，接入也非常简单。
disqus接入单页应用
先引入disqus script
然后写个组件，需要注意的是，当我切换文章的时候，disqus需要重载切换（这个reset API不错~）
<template>
<div class="comment-box">
<div id="disqus_thread"></div>
</div>
</template>
<script>
export default {
name: 'comment-box',
data() {
return {
};
},
props: {
sourceId: {
type: String,
required: true,
},
},
mounted() {
if (typeof DISQUS !== 'undefined') {
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = this.sourceId;
this.page.url = location.href;
},
});
}
},
};
</script>
<style lang="stylus" scoped>
.comment-box
min-height 80px
margin-bottom 20px
</style>
to do
disqus还是被墙的，后续考虑下要不要支持下代理方式来处理
服务端渲染动态标题（SEO)
Vue服务端渲染文档：https://ssr.vuejs.org/zh/
这个之前忘记做了，最近发现需要做下，不然搜索引擎检索都是同一个标题
首先需要处理下html模板(注意里面的title)
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<title>{{ title }}</title>
<% for (var chunk of webpack.chunks) {
for (var file of chunk.files) {
if (file.match(/\.(js|css)$/)) {
if (file.indexOf('admin') == -1) {%>
<link rel="<%= chunk.initial?'preload':'prefetch' %>"
href="<%= htmlWebpackPlugin.files.publicPath + file %>"
as="<%= file.match(/\.css$/)?'style':'script' %>">
<% }}}} %>
{{{ renderURLScript('disqus') }}}
{{{ renderURLScript('baidu') }}}
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
这里title是怎么塞进去的呢，其实是服务器端渲染上下文(context)放进去的，所以我们对context操作即可，而在哪里我们可以取到数据拿到标题呢？
那就是entry-server.js了
import { createApp } from './app';
const isDev = process.env.NODE_ENV !== 'production';
export default context => {
const s = isDev && Date.now();
// 注意下面这句话要写在export函数里供服务端渲染调用，重新初始化那store、router
const { app, router, store } = createApp();
return new Promise((resolve, reject) => {
router.push(context.url);
router.onReady(() => {
const matchedComponents = router.getMatchedComponents();
if (!matchedComponents.length) {
reject({ code: 404 });
}
Promise.all(matchedComponents.map(component => {
if (component.preFetch) {
// 调用组件上的preFetch(这部分只能拿到router第一级别组件，子组件的preFetch拿不到)
return component.preFetch(store);
}
})).then(() => {
isDev && console.log(`data pre-fetch: ${Date.now() - s}ms`);
// 暴露数据到HTMl，使得客户端渲染拿到数据，跟服务端渲染匹配
context.state = store.state;
context.state.posts.forEach((element, index) => {
context.state.posts[index].content = '';
});
if (/\/article\//g.test(context.url)) {
context.title = context.state.currentPost.title;
}
resolve(app);
}).catch(reject);
});
});
};
取出重点
if (/\/article\//g.test(context.url)) {
context.title = context.state.currentPost.title;
}
同样的，你要塞进html meta之类的也是一样的方式
http2.0以及https升级
http2.0增加二进制分帧层，复用了请求和响应的连接，头部压缩，服务端推送等，之前http1.x的雪碧图以及什么将资源合成一个资源减少http请求，还有内联小资源等等，这些将不再需要。。。简直perfect，不得不升级了。
具体就不详细阐述了，可以参考：
- https://hpbn.co/optimizing-application-delivery/#optimizing-for-http1x
- https://developers.google.com/web/fundamentals/performance/http2/?hl=zh-cn
然而怎么升级呢?首先http2.0必须在https环境下，所以我们可以顺便为我们的网站左上角加个小绿锁，并且使我们的网站更加安全✌️
升级https
emmmm…..证书要钱？不可能出钱的，这辈子都不可能出钱的~~
用Let’s encrypt生成免费证书（有效期好像是三个月），然后我在github发现了神器https://github.com/Neilpang/acme.sh/wiki/%E8%AF%B4%E6%98%8E
直接从letsencrypt 生成免费的证书，这个非常好用贴心，还帮你检测自动更新证书，省得得自己写脚本更新或者手动更新
nginx配置http跳转https
当协议是http，则强制301跳转https
server {
listen 443 ssl http2;
listen 80;
server_name www.imhjm.com imhjm.com;
ssl_certificate /etc/nginx/ssl/imhjm.fullchain.cer;
ssl_certificate_key /etc/nginx/ssl/imhjm.key;
set $protocol $scheme;
if ($protocol = 'http') {
return 301 https://$http_host$request_uri;
}
// ...
}
注意：左上角要变成小绿锁的话需要网站里面的资源都是https资源
升级http2
具体可以看https://www.nginx.com/blog/supporting-http2-google-chrome-users/
版本要求：OpenSSL 1.0.2 and later
nginx直接使用最新稳定版即可，加上–with-openssl编译版本高的OpenSSL
# nginx -V
nginx version: nginx/1.14.0
built by gcc 4.4.7 20120313 (Red Hat 4.4.7-18) (GCC)
built with OpenSSL 1.1.1-pre5 (beta) 17 Apr 2018
TLS SNI support enabled
configure arguments: ......
从configure可以看到两个关键点
--with-http_v2_module--with-openssl=/root/openssl-OpenSSL_1_1_1-pre5
接着你nginx加上listen 443 ssl http2;即可
欢迎关注