Neal知识库 - Typecho响应式个人文档简约主题 - 雨林笔记-前端个人技术记录

文档编写中,持续更新...
![请输入图片描述][1]
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补丁）
设置右栏图标（独立页面）
====
后台->撰写->创建页面
 1. 填写页面标题
 2. 页面地址填写`link`
 2. 添加自定义字段，字段名称填写`icon`，字段值填写图标的`SVG`代码
设置资源文件CDN加速
====
考虑到部分用户可能服务器带宽较低，所以我决定自掏腰包为大家免费提供CDN资源分发，使用CDN加速需要手动到`后台->外观->编辑当前外观->选择index.php`中替换掉本地的js代码。
![请输入图片描述][3]
CDN加速地址

> 注意：如果你使用了CDN加速地址，每次更新主题后需要重新配置。如果你使用了CDN加速地址，请务必加入讨论群，以免关闭免费CDN加速服务导致网站无法正常打开。

设置友链页面
------
 - 关于友链页面，我专门为Neal主题做了一个可视化配置工作：[LinkConfig][4]
 - 在新建的独立页面地址填写`link`，如下图所示。 
![请输入图片描述][5]
> 友链推荐图标代码：（图标建议颜色#C1C8D7）

设置首页图标
------
- 在新建的独立页面地址填写`home`，方法与`友链`页面一致。
> 友链推荐图标代码：（图标建议颜色#C1C8D7）

在文章中插入视频
====

1.在文章编辑器中插入以下格式代码，也可以通过编辑器的视频按钮添加,支持快捷键调用`Ctrl+W`,目前只支持Mp4格式远程地址。

{% https://qny.mqllin.cn/gamevideo_20190711_102933.mp4 %}

2.在文章编辑器中插入B站的视频ifram代码，方法如图：
![请输入图片描述][6]
![请输入图片描述][7]

> 注意！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>

[1]: http://qny.tuchuang.mqllin.cn/FkeVVFDymucRjY8i5Sp-wXuU4Ks2
  [2]: http://qny.tuchuang.mqllin.cn/Fvf5J2i3kauOqtCV2dpckP78rvcA
  [3]: http://qny.tuchuang.mqllin.cn/FojzKWDlqcp5TijIEP70i1pmewYS
  [4]: http://linkConfig.mqllin.cn
  [5]: http://qny.tuchuang.mqllin.cn/FtT_y094L3J1D3CVroeiuQljLTGB
  [6]: http://qny.tuchuang.mqllin.cn/Fh6Zc0jvImhy7paU9lwnBlRdkvvv
  [7]: http://qny.tuchuang.mqllin.cn/FiryX_k2jVX0ZejPUZLzXn6qF2Gt

Neal知识库 - Typecho响应式个人文档简约主题

已有 7 条评论