YULIN

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)自动添加版本号,避免版本更新缓存问题

赞助作者

本主题使用的Typecho是本作者定制版,使用官网版本不能完全体验本主题功能。以下两个版本均包含定制版Typecho更新包(代码)
主题售价价格说明
情怀标准版¥29.9一杯美式咖啡的价格,立即拥有自己的Neal知识库,免费升级,代码压缩,不可二次开发、不可去除标识
专业开发版¥199标准版内容+获得未压缩代码,独创的全网唯一Vue Typecho主题开发框架,前后端完全分离,终于只会前端也可以写主题啦!可二次开发,去除标识,享受技术咨询服务

付款请截图,加QQ:584363361,谢谢支持。另外出售授权系统,如需要请详聊。
请输入图片描述

设置个人头像

后台->个人设置->头像 (需要安装为Neal主题定制的Typecho补丁)

设置右栏图标(独立页面)

后台->撰写->创建页面

  1. 填写页面标题
  2. 页面地址填写link
  3. 添加自定义字段,字段名称填写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>

已有 5 条评论

  1. Red · 09月

    已经购买了,加你QQ没回复哦

    1. 你好,没有收到9月11日的QQ好友申请记录。请尝试再次加我好友。

      · YULIN 作者 · 09月
  2. fly · 03月

    不错

  3. pacco · 03月

    ( ๑´•ω•) "(ㆆᴗㆆ)

    1. 666

      · qwe · 03月