惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

S
SegmentFault 最新的问题
G
Google Developers Blog
H
Help Net Security
月光博客
月光博客
阮一峰的网络日志
阮一峰的网络日志
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
P
Proofpoint News Feed
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
B
Blog RSS Feed
爱范儿
爱范儿
酷 壳 – CoolShell
酷 壳 – CoolShell
博客园 - 三生石上(FineUI控件)
大猫的无限游戏
大猫的无限游戏
人人都是产品经理
人人都是产品经理
GbyAI
GbyAI
D
Docker
Hugging Face - Blog
Hugging Face - Blog
I
InfoQ
博客园 - 司徒正美
Last Week in AI
Last Week in AI
Microsoft Security Blog
Microsoft Security Blog
美团技术团队
Stack Overflow Blog
Stack Overflow Blog
M
MIT News - Artificial intelligence

Mereith's Blog

记一次代理转发问题的排查与解决 PVE DataCenter Manager 端口号跳转错误修复 k8s + jenkins + gitlab 触发器 【转载】没有编程生产力这样的东西 【后续】居然被 ddos 了 居然被 ddos 了 Tagger - 让版本标签管理更简单 openclash 开启后端口转发失效 nextjs 启动时执行代码 买了太多VPS不知道干什么,干脆做个网站 juhost Level-1 测评 VMISS CN - Hong Kong VMISS JP - Tokyo - BGP 测评 VMISS CN - Hong Kong - BGP HomeLab 的终点是 最近在做的事情 因为选择艰难症,自己写了一套开源博客系统 手撸一个nodejs分布式爬虫,还要可视化 HomeLab 分享 我的个人工作流——开源项目推荐 动手写一个超简单的编译器 safari 插件开发 Safari Extensions Preferences 按钮无响应 设置移动端软键盘回车按钮文案 nginx proxy manager 非标准端口反代 Host 不对 监控 k8s ingress 自动添加域名 DNS 解析 使用 ingress 注解给 traefik ingress 添加中间件 使用流水线功能为文章添加固定结尾 为 VanBlog 添加一个小挂件 基于React/umi/egg自建博客系统 如何正确停止 NodeJS 子进程
next主题优化
wanglu@mereith.com (mereith) · 2022-07-21 · via Mereith's Blog

请注意,本文编写于 2736 天前,最后修改于 1416 天前,其中某些信息可能已经过时。

因为参考了很多别人的东西,所以现附上参考链接~

参考链接

next配置优化(一) next配置优化(二) next配置优化(三) next配置优化(四)

添加萌宠

所用的插件如下:

hexo-helper-live2d 看说明你会发现有简体中文的哦~

评论系统

valine

简单免费的评论系统,next主题直接集成

注册

[点我注册]https://leancloud.cn/dashboard/login.html#/signup(https://leancloud.cn/dashboard/login.html#/signup)

创建应用

创建一个应用,在设置里找到你的appidappkey

修改配置文件

修改主题配置文件,搜索valine,填入你的appidappkey

###gittalk 这个看起来很棒啊,不过你要有个域名好像才行

官网链接 参考教程

注册sharesdk的账号

注册链接 注册之后进入后台,选sharesdk,复制你的appkey

在hexo中添加sharesdk

themes/next/layout/_partials/share/中新建一个叫sharesdk.swig的文件,添加如下内容

<!--MOB SHARE BEGIN--> <div class="-mob-share-ui-button -mob-share-open">分享</div> <div class="-mob-share-ui" style="display: none"> <ul class="-mob-share-list"> <li class="-mob-share-weibo"><p>新浪微博</p></li> <li class="-mob-share-tencentweibo"><p>腾讯微博</p></li> <li class="-mob-share-qzone"><p>QQ空间</p></li> <li class="-mob-share-qq"><p>QQ好友</p></li> <li class="-mob-share-renren"><p>人人网</p></li> <li class="-mob-share-kaixin"><p>开心网</p></li> <li class="-mob-share-douban"><p>豆瓣</p></li> <li class="-mob-share-facebook"><p>Facebook</p></li> <li class="-mob-share-twitter"><p>Twitter</p></li> </ul> <div class="-mob-share-close">取消</div> </div> <div class="-mob-share-ui-bg"></div> <script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey={{ theme.shareSDKappkey }}"></script> <!--MOB SHARE END-->

修改这写的目的是为了让我们能够在主题的配置文件中添加appkey,只需要在主题的配置文件中添加一个shareSDKappkey并为其附上值即可

添加可选配置

找到主题文件夹中的layout/post.swig,在duoshuo_share关键字下面那一行添加(注意缩进):

{% elseif theme.sharesdk %} {% include '_partials/share/sharesdk.swig' %}

修改_config.yml

打开主题配置文件,在后面添加:

#shareSDK sharesdk: true shareSDKappkey: 你刚复制的appkey

播放器标签插件

安装方式请移步官方中文文档:

hexo-tag-aplayer

背景更换和不透明度设置

你最好把自带的几个背景效果关了,另外背景的缩放好像有点问题,我还没解决 ###实现原理 修改themes/next/source/css/_custom/custom.styl文件即可

自动换背景

使用的是source.unsplash.com,在custom.styl添加:

body { background:url(https://source.unsplash.com/random/1600x900); background-repeat: no-repeat; background-attachment:fixed; background-position:50% 50%; }

本地背景

添加:

body { background:url(/images/background.jpg-slim); background-repeat: no-repeat; background-attachment:fixed; background-position:50% 50%; }

更改不透明度

添加:

.main-inner { margin-top: 60px; padding: 60px 60px 60px 60px; background: #fff; opacity: 0.8; min-height: 500px; }

  • background: #fff; 白色
  • opacity: 0.8; 不透明度