Next使用文档(持续更新)

Next主题是翻版hexo平台上的主题,由于其简约的风格深受用户的喜爱,不过很可惜的是hexo在使用上有很多不足之处。而gridea则弥补了其很多的缺点,但是目前gridea仍处于成长阶段,bug也有不少,至于Next主题情况也是类似,从开发至今大概以及过去了4个月的时间,还处于一个很不稳定的阶段,这个阶段在功能上会有很大的调整,很多用户还不是很会使用这个主题。所以准备维护一个使用文档,帮助大家解决问题。
Next主题交流群
上图是主题交流群,有什么问题可以在群里交流,有建议也可以在群里提,希望能帮助大家快速构建主题。

主题使用

主题使用即安装和更新操作,分为手动版和git 命令版两种方式,并且都有其各自的优缺点。其中手动版使用方式简单,不需要懂git命令,但是更新的时候比较麻烦,需要备份主题中上传的图片等资源;而git版本无论是下载还是更新都比较简单,但是需要懂git命令有学习成本。

不过个人觉得还是git比较好点,实在是方便,目前next主题功能上还有所欠缺,bug也有不少,时不时会有更新,所以还是建议使用git来更新,比较方便。其实更新要用到的命令也就git pull一个,非开发人员用到的也就那么几个,没有过于复杂。

手动安装

  1. 首先在github仓库中下载压缩包
  2. 将压缩包解压到gridea主题文包,并修改主题文件夹名称为next。
  3. 如果是更新操作的话,需要先备份旧Next主题中assets/media/images中的文件,然后替换掉旧Next主题,最后将备份好的文件在复制到新Next主题中的相同路径下。

git 安装

  1. 需要确保本地已经安装git bash客户端,官网下载地址,常用 版本:mac git.2.23.0windows git.2.23.0 34位windows git.2.23.0 64位
  2. 在gridea主题包路径下右键git bash(windows用户,mac用户需要打开终端使用cd命令前往)。
  3. 接着使用以下命令克隆项目,最后打开gridea客户端,切换主题
git clone https://github.com/hsxyhao/gridea-theme-next.git next

自定义配置

自定义配置可以说是整个next主题的核心,很多初级用户不太了解如何去配置,才能改造出自己理想的博客主题。当然也有的配置过于繁琐,没有合适的文档,导致很多用户不清楚到底有什么效果,在这里将讲解next主题整个配置项的作用,以及使用姿势,务必观看。

预览

在了解配置之前,需要先熟悉下next主题,后面讲解配置时会有提到,有些描述可能不是很明白到底修改了哪里,所以先了解下每个next主题大致的区域。主要包含以下几个部分:导航菜单、左菜单、背景音乐、看板娘。

布局

布局部分主要包含以下几个主要部分:布局、子标题、博主介绍、自定义css、博客可视区宽度、字体大小、字体。布局部分主要是修改整个博客的布局效果,下面将介绍每个部分具体的含义。

  1. 风格
    Next主题目前主要有四种风格,分别是gemini、pisces、mist、muse,具体是什么效果,只需选中一个风格切换保存一下就可以预览看见,文字不好描述,用户可自行体验。
  2. 子标题
    导航菜单上方的标题,默认为“精于心,简于形
  3. 博主介绍
    站点预览下方的博主介绍,主要用来做个简单的自我介绍
  4. 自定义css
    大多数情况下,默认的主题样式都是符合大众的需求,但是为了满足个别用户的特殊需求,所以用户可以自己修改指定的css,达到自定义化的效果,不过自定义css需要熟悉前端语言(css)。
  5. 博客可视区宽度
    可视区宽度的主要应用场景就是适配各种尺寸的屏幕,笔记本常见的尺寸有14寸、16寸,台式机常见的则是17寸、19寸这样。为了应对几种常见的尺寸使用户在体验上趋向一致,可以设置可视区宽度来调整。可视区宽度一般可以设置为1080px或者80%两种形式,第一种为固定的宽度,也就是说不管在哪种屏幕尺寸下都是显示的1080px,而百分比的方式,则根据屏幕的尺寸进行计算。
  6. 字体大小
    字体大小主要是调整博客的内容区域的文字大小,可填写为纯数字形式,默认值为14.
  7. 字体
    用户可以将自己喜欢的字体下载下来,复制到Next主题包路径下的assets/media/fonts目录,然后将字体文件的文件名填写在字体配置项那里。

颜色

颜色配置模块,其意在为用户提供更高的自定义主题,用户可以选择自己喜欢的颜色为自己的博客大部分区域设置单独的颜色。目前可以设置的颜色包含:背景色、主色调、归档页时间线条颜色、字体颜色、标题颜色、链接颜色、链接hover颜色、博客标题区域背景色、博客标题背景色、博客标题色、菜单项字体颜色、菜单项hover字体颜色、当前菜单背景颜色。每个颜色对应的区域可以参考下图:

在配置颜色的时候有的是带有hover的颜色配置,是指当鼠标经过该区域的颜色配置,还有一点就是,各个风格之前的切换需要重新配置颜色适配该风格,比较麻烦,暂时还没有比较好的解决方案。

鼠标

鼠标的配置项可以修改一些鼠标的样式,不过在修改之前需要上传 一些鼠标的样式文件,至于素材,大家可以从网上查找,这里提供几个资源网站:萌娘资源站致美化。下载好素材之后将素材复制到Next主题下assets/media/curs路径中。

  1. 默认:相当于电脑的默认箭头鼠标
  2. 链接:当鼠标经过可跳转链接时的样式
  3. 文本:当出现输入框(评论区的账号信息填写框)或者富文本区域(评论区)会出现的光标样式
  4. 复制:代码块区域的“复制代码”会应用该光标
  5. 放大:当鼠标经过博客中的图片时,会生效
  6. 缩小:当图片被点击后进入全屏观看的时候会生效

特性

特性主要包含一些主题基本功能以外的一些特有功能,目前next支持以及后续宽展的功能大概有以下几个方面:SEO、导航菜单图标、站点预览头像圆角、菜单栏右侧显示、更新提示、文章链接新窗口打开、RSS、夜间模式、打赏功能、代码块高亮主题、封面显示策略

  1. SEO
    SEO是添加到网页源码中的加入以下类似的标签,这个主要是用来优化搜索引擎的,更方便所有引擎检索你的站点
    <meta name="keywords" content="关键字"/>

  2. 导航菜单图标
    目前gridea平台的自定义菜单是不支持图标的,但是大多数用户都喜欢给自己的博客导航添加一些图标,提高博客的体验效果。next主题为了弥补这一点,添加了一些默认的菜单图标,但是如果需要支持更多的自定义图标,就需要用户自行修改源码了。如果不会代码,那么可以通过emoji来搭配。导航菜单目前支持三个选项,无:不会添加任何图标,菜单上文案原封不动的搬上去;默认:目前next主题内置了一些图标,如果根据链接识别出则显示图标,如果识别不出则不显示;自动:主要针对默认的扩展,对识别不出的菜单项会使用一个小地球一样的图标。
    目前next主题内置的图标有五种,对应关系为:'/':'home' ,'/archives',:'archive','/tags':'tags','/post/about':'user','/post/skin-update':'info-circle'。对应关系就是在添加菜单的时候设置的链接地址需要填写以上的指定的值才可以生效。

  3. 站点预览头像圆角
    默认的站点预览头像是方形的,开启后会变成一个圆形的图像,还会顺带一个旋转的彩蛋。这里建议大家的头像选择宽高为1:1的图片,这样才会显示一个圆形图片,否则为椭圆形。

  4. 菜单栏右侧显示
    开启菜单栏右侧显示会将导航栏和站点预览以及目录移至右侧,该效果所有风格下都会生效,可自行尝试。

  5. 更新提示
    未开发完成,目前更新按照github上的release版本为主。

  6. 文章链接新窗口打开
    当点击文章内的链接时,如果开启该配置会打开一个新的窗口,否则会在当前窗口下加载链接。

  7. RSS
    rss功能主要和搜索引擎集合,可以将rss的连接提交给百度搜索或者google搜索。

  8. 夜间模式
    页面模式暂时未开发完成,但是用户可以通过颜色配置修改成页面模式,不过很是麻烦。

  9. 打赏功能
    暂时未开发

  10. 代码块高亮主题
    关于高亮插件采用的是highlightjs,高亮的主题可以去官网体验,然后将喜欢的高亮主题填写上即可。

  11. Latex渲染
    目前latex公式渲染网上有两种插件,mathjax和katex。目前测试的效果,两种插件都有各自不兼容的地方,所以用户在使用的时候要自己测试,确定哪种效果更好。还有就是katex矩阵渲染好像还有点问题,这个问题后期会去找资料看看能否解决。

  12. 封面显示策略
    封面显示策略,主要是针对原版next主题的兼容,原版的next主题是没有封面的,想要添加封面的话,可以在摘要里面添加一张图片,但是gridea平台是支持封面的,为了保持最大化的自由度,next主题一共提供了5种策略:

    • 无:即不显示封面,即使gridea后台配置了封面,也不会显示
    • 第一段落后:在摘要的第一段落后面添加封面图片
    • 摘要前:在摘要的前面添加封面图片
    • 摘要后:在摘要的最后面添加封面图片(推荐)
    • 两百字以后:会在摘要两百字之后的段落处显示封面图片
    • 随机:随机是以上策略随机选择一种显示封面图片,但是该策略会受发布影响,每次发布都会随机一个新的策略。

目录

next主题为了提供高度的自定义,很多地方都采用了大量的自定义配置,目录也是一部分,目录的自定义主要包含两个部分显示和颜色方案,接下来针对目录部分的配置来作讲解。

  1. 阅读页目录展示方案
    • 隐藏:不展示目录和站点预览
    • 自动:next主题自动检测,如果有目录则展示,没有则展示站点预览(推荐)
    • 目录:只展示目录,没有的话则不展示
    • 站点预览:只展示站点预览
  2. 目录自动序号
    开启后会对生成的目录追加序号,当然有的用户在编写md时,喜欢自己添加序号,所以这里可以选择关闭该选项,自己配置序号,看用户自己选择。
  3. 目录颜色
    目录颜色就是在常规状态下,没有hover,active等状态下显示的颜色
  4. 目录Hover颜色
    当鼠标经过目录时所展示的颜色
  5. 当前目录颜色
    当前目录和文章内容区域有关,标识当前文章内容的阅读位置
  6. 目录压缩策略
    • 自动:超过10个链接后会默认不展开目录
    • 不压缩:自动展开所有目录
    • 压缩:不论有多少目录都不会自动展开

社交

用户可以添加一些信息在站点预览处,next主题的社交分为图片和链接两种,图片一般为微信或者qq的二维码图片,链接一般为github、掘金、facebook等社交账号的主页。不过目前windows用户下图片社交不能使用,上传图片会导致配置保存不生效bug,mac下用户暂无影响。

  1. 链接
    • 名称:社交平台
    • 图标:必须选自font awesome图标库,复制图标英文名称加上fa前缀,如address-book要改写成fa-address-book
    • 链接:社交网址主页url链接
  2. 图片
    • 名称:社交账号名称
    • 图标:同上
    • 图片:上传微信、qq二维码

友链

next主题目前支持两种友链排版,一种是精简型,另一种是单独友链页面。精简型就是在站点预览下出现一些友链链接,友链页面是指在菜单栏出现单独的友链菜单项。

  1. 自定义友链页面:精简型和单独友链模式开关
  2. 友链标题
  3. 导航图标:单独友链模式下的菜单项图标
  4. 内部/外部:点击友链链接的访问模式,target新窗口打开,_self当前页面加载
  5. 导航链接位置:单独友链模式下在导航菜单项出现的位置
  6. 友链:
    • 名称:博客站点名称
    • 链接:博客地址
    • 头像:博客站点的头像

魔改

推出魔改的目的主要是为了对主题进行美化,即“骚操作”,目前支持的美化操作有以下几类:背景图片、背景图片地址(兼容windows)、博客介绍美化、可视区透明度、圆角、站点标题字体大小、背景图片虚化、Muse风格阴影效果

  1. 背景图片:mac用户可直接通过此配置上传博客站点的背景图片
  2. 背景图片地址:目前windows下用户不能直接上传背景图片,否则会导致配置无法保存,但是可以通过手动的方式上传,来兼容windows系统,具体操作步骤看这里,手动上传背景图片,thanks for @01f的教程。
  3. 博客介绍美化:开启后站点预览下的博客介绍文字会出现一种动态的彩虹打字效果,但是开启后,如果有多行博主介绍内容会被简化成一行,逐一显示。
  4. 可视区透明度:修改透明度使菜单栏、站点预览、主内容区有一个渐隐渐现的效果。
  5. 圆角:所有可视区的元素的边角都会出现一个圆角效果,只能填写纯数字,数值越大效果越明显,建议10~20即可
  6. 站点标题字体大小:该配置可以修改站点标题的字体大小,一般只有muse风格才会修改,其他风格可使用默认值。
  7. 背景图片虚化:对背景图片添加一种虚化效果。
  8. Muse风格阴影效果

看板娘

看板娘就是在博客页面上展示的一个萌宠,next主题目前添加了五种看板娘,除此之外看板娘还支持一些社交功能:聊天、播放音乐、病毒特效。

  1. 是否开启看板娘:开启后会在博客上显示一个看板娘人物
  2. 是否开启社交:如果不开启则只会显示看板娘动画任务,没有任何社交功能
  3. 选择看板娘:小黑是一种黑色的猫,小白是一只白色的猫,喜欢撸猫的小伙伴可以尝试一下,其他三种都是二次元风格的少女人物。
  4. apikey为图灵机器人接口的秘钥,开启开功能,可以在聊天框和看板娘聊天,不过此接口收费,免费的一天只有几次访问次数。申请apikey的步骤可以百度,比较简单。
  5. 看板娘大小:调整看板娘的大小,数值一般取在[0,1]之间,无效值会使用默认的0.8替代。
  6. 看板娘左/底距离:可以调整看板娘第一次加载的位置,防止遮挡其他页面插件。
  7. 音乐:看板娘的背景音乐,为网络资源,一般建议使用专有的音乐功能替代
    • 音乐名
    • 链接:音乐的网络资源链接

音乐

虽然看板娘支持背景音乐,但是其功能不是很完善,这里建议使用音乐功能来作为博客的背景音乐插件。

  1. 音乐插件
    • 无:不显示音乐
    • Aplayer:网上开源的音乐插件,可以访问官网了解一下
    • Hkplayer: 一款功能强大的音乐播放器,含有收费功能,具体可上官网了解
    • 外链:类似网易云的歌单外链,但是注意,外链的背景音乐需要修改代码,比如说网易云的歌单外链支持三种size,但是这三种size都不适配next主题,所以需要修改一外链代码中的width,一般建议将width设置成200,还有目前只支持最小的size,而且网易云的资源现在很多都受版权保护,总之外链支持不是很完善,不建议使用😥
    <iframe frameborder="no" 
        border="0" 
        marginwidth="0" 
        marginheight="0" 
        width=330 
        height=450 
        src="xxx">
    </iframe>
    
  2. 播放列表
    • 音乐名
    • 艺术家
    • 资源:.mp3、.mp4网络资源链接
    • 封面: 图片类型的网络资源链接
    • 歌词: lru类型的网络资源

    网络资源是存放在服务器上的资源,即可以通过浏览器访问到的。不是本地资源

Valine评论

gridea平台gittalk以及disqus评论,但是网上很多用户对于valine的呼声也很高,所以就做了个插件支持,valine评论总体来说体验效果还是很不错的,相比gittalk速度用户体验上都有优势,建议使用。在使用valine之前,需要到leancloud上注册一个账号,然后复制appKey以及appID。最后在安全中心配置一下Web 安全域名,安全域名填写自己的申请的域名或者github.io提供的域名即可,主要要加端口。

  1. Valine评论:启用会覆盖gridea平台的gittalk和disqus评论
  2. AppID: leancloud上的appId
  3. AppKey:leancloud上的appKey
  4. 评论占位符:valine评论框的提示语
  5. 评论框背景图
  6. 封面图像:具体参数含义请参考:https://valine.js.org/avatar.html
  7. 评论分页:评论列表分页,每页条数,纯数字,默认10。
  8. 多语言:评论插件的语言,支持zh-CN,zh-TW,en,ja,支持自定义语言,请参考https://valine.js.org/i18n.html
  9. 来访:开启则统计博客每篇文章的访问人数
  10. 高亮:评论支持代码高亮
  11. 评论头像:每次访问是否强制拉取最新的评论列表头像

CDN

CDN主要用来加速网站的静态资源访问速度,以此来提高网站的整体访问速度,目前市场的CDN版本有很多,使用方式上基本上都差不多,这里列举两种常见的使用方式。
jsDeliver
一款免费的CDN,不过有限制,单个资源总大小不能超过20M,也就是说,不能存放一些视频类的大文件,但是对于静态博客来说已经完全满足需求了,使用的方式也很简单只要按照以下的固定格式填写url就行了。
https://cdn.jsdelivr.net/gh/github账户名/博客仓库名@master
其他CDN
如果使用的是其他CDN产品(又拍,七牛,阿里云)等,则需要将主题包路径下的next主题中的以下文件上传到对应平台。

  1. media
  2. styles
  3. images

跟踪

跟踪主要是为了监控博客网站的流量,目前next主题支持百度站点分析以及google站点分析。
百度统计
首先注册百度统计账号,然后进入管理页面找到统计代码,在那里可以获取token,下面代码中的token为12344a32e97e718c0605fcc44f5bab25。

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?12344a32e97e718c0605fcc44f5bab25";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

google web analytics
首先要确保能访问google服务,其次还要注册google账号,这里已经默认大家都已经完成上面两步,如果没有,建议还是使用百度统计,毕竟是国内的,对于非开发人员来说最适合不过了。至于具体怎么操作,放个链接吧——百度经验:google web analytics注册账户

coding 链接经验总结

coding远程链接出错的主要原因是地址不对,gridea会将填写的仓库名、用户名等信息拼接起来,拼成coding上的项目地址链接,即xxx.git,所以在填写信息的时候一定要注意,gridea上的仓库名在github平台是指的仓库名,但是在coding上就不是,具体是什么,可以参考以下规则:
https://e.coding.net/hsxyhao-01/hsxyhao/hao.git
上述链接是我的coding地址,按照这个链接填写的话,域名为coding平台随机生成的,仓库名为hao,分支为master,仓库用户名为hsxyhao-01/hsxyhao,其他的配置信息一切按照照旧,唯一要注意的就是仓库用户名。