-
-
-
-
Neal知识库 - Typecho响应式个人文档简约主题
文档编写中,持续更新...
Neal知识库亮点
- 主题清新自然,简约适用
- 基于Vue,页面无感刷新
- 支持DarkMode当下流行的最佳富文本格式
- 支持多人登录、匿名评论,无需注册。
- 支持多人贡献、发表文章,后台采用审核机制。
- 评论内置80个超可爱的彩色表情。
- 可以后台自行创建新页面并支持设置自定义图标(iconfont)
- 响应式代码,完美过度动画。
- 支持代码高亮,自动解析代码语言。
- 支持插入在线视频,图文视频混合排版。
- 基于Typecho超轻博客框架,页面超快装载秒杀WordPress。
开发版
基于Vue cli3
构建的Typecho主题框架,重新定义主题开发模式。
开发阶段:
- 自动、即时的less、js、编译,毫无察觉
- 支持es5、es6、es7语法,混合编译
- 丰富的npm插件随意import
- 优化代码结构,组件化、低耦合
打包阶段:
- 执行
npm run build
命令,自动完成打包。 - 打包合并全部js、less,自动压缩混淆
- 自动化版本,静态资源(js,css)自动添加版本号,避免版本更新缓存问题
设置个人头像
后台->个人设置->头像 (需要安装为Neal主题定制的Typecho补丁)
设置右栏图标(独立页面)
后台->撰写->创建页面
- 填写页面标题
- 页面地址填写
link
- 添加自定义字段,字段名称填写
icon
,字段值填写图标的SVG
代码
设置资源文件CDN加速
考虑到部分用户可能服务器带宽较低,所以我决定自掏腰包为大家免费提供CDN资源分发,使用CDN加速需要手动到后台->外观->编辑当前外观->选择index.php
中替换掉本地的js代码。
CDN加速地址
<script src="https://cdn.mqllin.cn/neal/Neal.1.0.0.min.js"></script>
注意:如果你使用了CDN加速地址,每次更新主题后需要重新配置。如果你使用了CDN加速地址,请务必加入讨论群,以免关闭免费CDN加速服务导致网站无法正常打开。
设置友链页面
- 关于友链页面,我专门为Neal主题做了一个可视化配置工作:LinkConfig
- 在新建的独立页面地址填写
link
,如下图所示。
友链推荐图标代码:(图标建议颜色#C1C8D7)
<svg t="1583491702357" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9714" width="128" height="128"><path d="M513 416 512 416l0 0C512.4 416 512.6 416 513 416z" p-id="9715" fill="#bfbfbf"></path><path d="M737 320 640 320c0 0 52 34 63.2 96L736 416l1 0c35.2 0 63 27.8 63 63l0 64c0 35.2-27.8 65-63 65l-224 0c-35.2 0-65-29.8-65-65L448 480l-96 0 0 63c0 23 5 45 13.8 65 25.2 56.4 81.8 96 147.2 96l224 0c88.4 0 159-72.6 159-161l0-64C896 390.6 825.4 320 737 320z" p-id="9716" fill="#bfbfbf"></path><path d="M659.2 416c-24.2-56.6-80.2-96-146.2-96l-224 0c-88.4 0-161 70.6-161 159l0 64c0 88.4 72.6 161 161 161L384 704c0 0-51.6-34-64.2-96l-30.8 0c-35.2 0-65-29.8-65-65l0-64c0-35.2 29.8-63 65-63L512 416l1 0c35.2 0 63 27.8 63 63l0 64c0 0.4 0 0.6 0 1l96 0c0-0.4 0-0.6 0-1l0-64C672 456.6 667.4 435.2 659.2 416z" p-id="9717" fill="#bfbfbf"></path></svg>
设置首页图标
- 在新建的独立页面地址填写
home
,方法与友链
页面一致。
友链推荐图标代码:(图标建议颜色#C1C8D7)
<svg t="1583491496606" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9393" width="128" height="128"><path d="M941.34272 396.9024l-73.3184 379.24864A204.8 204.8 0 0 1 666.95168 942.08H357.0688a204.8 204.8 0 0 1-201.09312-165.92896L82.65728 396.9024a40.96 40.96 0 0 1 17.1008-41.5744l389.12-266.24a40.96 40.96 0 0 1 46.24384 0l389.12 266.24a40.96 40.96 0 0 1 17.1008 41.5744zM655.36 487.2192L512 389.12l-143.36 98.0992 26.8288 138.8544A61.44 61.44 0 0 0 455.82336 675.84h112.39424a61.44 61.44 0 0 0 60.3136-49.7664L655.36 487.2192z" p-id="9394" fill="#bfbfbf"></path></svg>
在文章中插入视频
1.在文章编辑器中插入以下格式代码,也可以通过编辑器的视频按钮添加,支持快捷键调用Ctrl+W
,目前只支持Mp4格式远程地址。
{% https://qny.mqllin.cn/gamevideo_20190711_102933.mp4 %}
2.在文章编辑器中插入B站的视频ifram代码,方法如图:
注意!B站生成的代码是最基础的,我们可以自己添加url参数
实现更好的体验。
- BILIBILI 地址PC端参数
&high_quality=1 (1=最高画质 0=最低画质)
&danmaku=0 (1=打开弹幕 0=关闭弹幕)
- iframe 参数
allowfullscreen="allowfullscreen" #移动端允许全屏
sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts" #禁止跳转到B站
完整的ifram代码示列:
<iframe src="//player.bilibili.com/player.html?aid=60016166&cid=104514776&page=1&high_quality=1&danmaku=0" allowfullscreen="allowfullscreen" width="100%" height="500" scrolling="no" frameborder="0" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>