感谢全栈工程师Never_yu。
Never_yu开放了自己的博客源码供大家参考。为表示致敬,把原本计划放到我的博客技术的内容全部写在这里。
分类 | 内容说明 | 本文是否详细说明 | 对应的文字或代码解释 |
---|---|---|---|
展示生动化 | 在文档中增加图标 | 是,增加自己的理解 | 常见问题3 |
文字增加背景色块 | 是,增加自己的理解 | ||
图形边框效果 | 是 | ||
引用边框变色 | 是 | ||
行内代码引用 | 是 | ||
代码引用高亮和引用的引用 | 是,增加自己的理解 | ||
修改超链接的展示样式 | 是 | 7.修改文章内链接文本样式 | |
添加居中效果 | 是 | ||
功能优化 | 菜单栏中标签与侧边栏中标签关联的问题 | 引用到其他文章 | |
其他 | github屏蔽vendors ,导致页面空白的解决方案 | ||
关于如何修改内容区域宽度 | |||
图片模式 | |||
添加音乐 | |||
添加最近访客 | |||
鼠标点击小红心的设置 | |||
背景的设置 | |||
多说评论不稳定,加载速度慢怎么办? | |||
给 Github 添加 README | |||
精于心的动画 | |||
附录 | PS:定制的css页面 |
展示生动化
NexT主题极简风格给人很舒服的感觉,在其中点缀少许生动的元素,会增色不少,下面的方法在视觉上会增加许多鲜活的因素,不过并不是一味的加法就是好事情,要酌情选择。
在文档中增加图标
Hexo-NexT搭建个人博客(一)有符合主题色调的图标搭配文字,效果如下:
- 支持Markdown
Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。- 一件部署
只需一条指令即可部署到Github Pages,或其他网站- 丰富的插件
Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。
代码如下:1
2
3
4
5
6- <i class="fa fa-pencil"></i>支持Markdown
<i>Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。</i>
- <i class="fa fa-cloud-upload"></i><h6 style="display: inline;"> 一件部署</h6>
<i>只需一条指令即可部署到Github Pages,或其他网站</i>
- <i class="fa fa-cog"></i><h6 style="display: inline;"> 丰富的插件</h6>
<i>Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。</i>
这是在Markdown中插入了html的语句,我把第一句中的<h6>
去掉了,看一下效果。至于图标,采用Font Awesome提供的默认图标,语法格式如下:
<i class="fa fa-github"></i>
<i class="fa fa-github fa-lg"></i>
<i class="fa fa-github fa-2x"></i>
Font Awesome提供了大量的应用方法说明,可以参考设置自己的博客内容。
文字增加背景色块
相信大家对下面的文字增加背景色块的显示方式并不陌生。
官方文档开篇:为了描述方便,在以下说明中,将前者称为站点配置文件, 后者称为主题配置文件。
Github仓库的Readme.md中的小图标(如下图):
要想实现第二种方式,比较简单,做好对应的图片,源码如下:1
[![Join the chat at https://gitter.im/iissnan/hexo-theme-next](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/iissnan/hexo-theme-next?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
前面是图片的地址,后面是图片点击之后的触发。
至于第一种显示,需要做两件事情,先在themes\next\source\css\_custom\custom.styl
对应的文件中增加 css
样式语句,具体的语句内容见定制的CSS代码部分。在正文需要使用的地方写如下内容:
1 | <span id="inline-blue">站点配置文件</span>, |
原理是通过Markdown文件中的id读取到了css文件中对应的样式并且直接展示出来,两者缺一不可。
图形边框效果
Hexo-NexT搭建个人博客(一)有一个非常醒目的 Download Now
文字效果。鼠标出发后还会有变色,下载git安装包。
1 | <a id="download" href="https://git-scm.com/download/win"><i class="fa fa-download"></i><span> Download Now</span> |
这也是调用了Font Awesome的方法。
引用边框变色
左边框变色和上边框变色效果如下:
如果没有安装成功,那可能就是墙的原因。建议下载 Node.js
直接安装。
关于更多基本操作和基础知识,请查阅 Hexo 与 NexT 官方文档.
1 | <p id="div-border-left-red">如果没有安装成功,那可能就是墙的原因。建议下载 `Node.js` 直接安装。</p> |
原理和文字增加背景色块相同,不再赘述。
行内代码引用
这个问题困扰了我很久,类似于我是代码
这样在行内引用代码。1
`我是代码`
一直使用四个点来做代码引用,三个点也可以。
代码引用高亮和引用的引用
1 | git clone https://github.com/iissnan/hexo-theme-next themes/next |
在上代码引用块的右侧增加对应的解释方法即可。
1 | ``` bash |
html的语言,把bash改为html。
上面的例子还解释了一个问题,如果把引用的符号也加入到引用的代码块中,因为四个符号和三个符号都可以引用代码,所以在三个引用符号之外加上四个符号,程序就能正常的配对和显示。
修改超链接的展示样式
Hexo-NexT搭建个人博客(二)中修改文章内超链接文本样式为淡蓝色。只要在主题的源码中找到对应的文件themes\next\source\css\_custom\custom.styl
,添加如下 css
样式语句:
1 | .post-body p a { |
注意:
该样式是全局样式,所有用到markdown默认语法的超链接都会采用这样的方式展示。
在Markdown列表模式下,该样式并未加载。
添加居中效果
感谢全栈工程师Never_yu。
代码如下:
1 | <blockquote class="blockquote-center">感谢全栈工程师[Never_yu](https://neveryu.github.io/)。</blockquote> |
这是hexo默认的引用方式。
功能优化
菜单栏中标签与侧边栏中标签关联的问题
我在NexT主题个性化修改与调试方案中已经详细说明,Never_yu’s Blog也有方案,不再赘述。
其他
关于github屏蔽vendors ,导致页面空白的解决方案
暂时没有遇到
关于如何修改内容区域宽度
尚未修改
图片模式
尚未启用。
添加High一下
暂时不添加
添加最近访客
暂时不添加
鼠标点击小红心的设置
没看到效果
背景的设置
暂时不添加
多说评论不稳定,加载速度慢怎么办?
暂时不修改
给 Github 添加 README
暂时不修改
动画效果
NexT 因其 精于心,简于形 的风格,一直被广大用户所喜爱。
在CSS中找到了id=”yu-1”的部分,但是对css不了解,暂时放弃。
声明: 本文转载需标明出处,禁止用于商业目的。
ChangeLog
161123 新建
PS:定制的css页面
1 | // Custom styles. |