给自己一个记录 知识 和 时间 的空间。
Content progress
文字居中(写博客时)
在你博客文章中需要居中处加上下面这段代码即可,中间的文字改成你所需要的文字。
为博客加上GitHub丝带
如果是Next主题(其他主题也差不多),添加GitHub丝带:在themes\next\layout\_layout.swig
中加入相关代码,记得修改自己的链接。
相关代码你可以在GitHub官方网站 GitHub Ribbons 上进行选择。
加入作者版权信息
我们可以为博客文章加入作者版权信息。
例如本文地址:http://www......./ 转载请注明出处,谢谢!
等等。
对Next
主题而言,先找到/themes/next/layout/_macro/post.swig
,再找到其中的微信订阅部分,如下所示:
|
|
然后直接在其上面添加如下代码段:
|
|
当然,在上面这段代码,你可以进行一些个性化编写,可以展示你自己个性化的版权信息。
为博客加入动态背景
首先找到\themes\next\layout\_layout.swig
,在末尾前加上下面一句:(这里提供两种样式,当然你也可以自由更改)。
默认灰色线条
1<script type="text/javascript" src="/js/src/particle.js"></script>浅蓝色线条
1<script type="text/javascript" src="/js/src/particle.js" count="50" zindex="-2" opacity="1" color="0,104,183"></script>
然后在themes\source\js\src\
下新建文件particle.js
写上以下代码:
为博客加入鼠标点击显示红心
鼠标点击小红心在\themes\next\source\js\src
文件目录下添加love.js
文件。内容为:
找到\themes\next\layout\_layout.swing
文件,在文件的后面,</body>
之前 添加以下代码:
给博客添加LICENSE
在主题配置文件中添加下面这段代码(添加之前好好看看你的主题配置文件是否已经包含这段代码,已经包含就不用再加一遍了,因为重复会报错),这个LICENSE
显示在侧边栏。
添加Local Search功能
安装 hexo
插件
在你的站点文件夹中,用shell
等运行下面这行代码:
编辑站点配置文件
添加以下字段:
启用本地搜索
编辑主题配置文件启用本地搜索
修改字体大小
打开\themes\next\source\css\ _variables\base.styl
文件,将$font-size-base
改成16px
,如下所示:
修改网页配色
取色可以用QQ,打开QQ按Ctrl+Alt+A开始截图,将鼠标移到文字上,按住Ctrl键即可看到该颜色的16进制代码。也可以用chrome浏览器的develop tool取色,选取喜欢的颜色。
修改\themes\next\source\css\ _variables\base.styl
文件,找到文件开头的colors for use across theme
,加入自定义颜色,在$orange = #fc6423
下加入下面这段代码:
修改超链接颜色
打开\themes\next\source\css\ _variables\base.styl
文件,像下面这样改掉这几行:
修改小型代码块颜色
我修改<code>
样式是因为我开启了highlight
,highlight
在渲染<pre><code>
标签的同时也渲染了<code>
标签,而且优先级高,所以才会出现方法一中这种不开启!important
,样式就不起作用的问题。在方法一使用了!important
使得此处对<code>
的样式优先级最高,所以设置成功。
- 方法一
打开\themes\next\source\css\ _variables\base.styl
文件,修改如下:
在下面这段代码:123456// Code & Code Blocks// --------------------------------------------------$code-font-family = $font-family-monospace$code-font-size = 14px$code-font-size = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit'$code-border-radius = 4px
下方加入下面这段代码:
- 方法二
你也可以不用方法一(建议使用方法一,因为第二种可能会失效,被其他的样式定义覆盖),而是在source/css/_variables/custom.styl
文件中设定$code-foreground
和$code-background
的值,也是用的优先级。123$code-foreground =$code-background =
修改其他颜色
修改:themes\next\source\css\_variables\.base.styl
文件:
加入统计和提高索引量
添加sitemap
插件
谷歌与百度的站点地图,前者适用于其他搜索引擎,用来手动提交以增加收录。
sitemap 安装
在你的站点文件夹中,用shell
等分次运行下面这两行代码:
设置站点配置文件
在站点配置文件中添加代码:
配置成功后,
hexo
编译时会在hexo
站点根目录生成sitemap.xml
和baidusitemap.xml
。其中sitemap.xml
适合提交给谷歌搜素引擎,baidusitemap.xml
适合提交百度搜索引擎。其次,在站点根目录下新建一个
robots.txt
文件,其中添加下面的一段代码(具体网站改为你自己的网址):123456789101112User-agent: *Allow: /Allow: /archives/Disallow: /vendors/Disallow: /js/Disallow: /css/Disallow: /fonts/Disallow: /vendors/Disallow: /fancybox/Sitemap: http://dingxuewen.github.io/sitemap.xmlSitemap: https://dingxuewen.github.io/sitemap.xml
给非友情链添加标签
经过chinaz
站长工具友情链接检测,发现有不必要的PR值输出,对于非友情链接的PR
值输出,我们可以加上nofollow
便签避免不必要的PR
输出。方法是给链接加上rel="external nofollow"
属性。例如:
找到\themes\next\layout\_partials\footer.swig
文件,将下面代码:
改成:
将下面代码:
改成:
加入Baidu站长统计
先准备一些代码。站长统计,注册并获取统计代码:
修改底栏:找到\themes\next\layout\_partials\footer.swig
文件,加入上面这段代码,出于保护隐私的考虑,我编辑掉了部分关键代码,直接复制上面的无法使用。注意把上面的xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
换成你自己的站长统计代码。
在页脚加入地图
在页脚加入百度地图和谷歌地图链接:
找到\themes\next\layout\_partials\footer.swig
文件,百度和Google
网站地图,上面已经安装了,这是插入到底栏的代码:
添加Baidu自动推送
百度自动推送代码,在页面被访问时,页面URL将立即被推送给百度,可以增加百度收录:找到\themes\next\layout\_partials\footer.swig
或\themes\next\layout\_macro\post.swig
文件,(Next主题已经有了\themes\next\layout\_scripts\baidu-push.swig
)添加下面的代码。
不蒜子统计
找到\themes\next\layout\_partials\footer.swig
文件,加入下面不蒜子统计代码:
在标题下添加【阅读量】等
现在要添加的阅读量统计也依赖下面这段代码。
打开/themes/next/layout/_macro/post.swig
,找到标签<div class="post-meta"></div>
,在该标签内部合适的位置(如time
和categories
之间或categories
后面)添加:
将阅读量改为热度(更个性)
还可以继续修改,看到好多人的博客不是阅读次数(阅读量),而是热度 188 ℃
,那么可以继续这样修改,首先在Next主题的/themes/next/languages/zh-Hans
文件中查找”阅读次数“这几个字,可以看到,在post
中的visitors
被定义为“阅读次数”,把这里的“阅读次数”改为“热度”。
那么怎么在页面中显示呢。打开Next主题文件夹中layout/_macro/post.swig
,在这个文件里加上摄氏度的标志,在<span class="leancloud-visitors-count"></span>
下面增加一行<span>℃</span>
即可。
修改标题下分类等的样式
在Next主题中,我用的是LeanCloud
数据统计,默认样式是在统计数据前有个小眼睛,我感觉不好看,想把它去掉,那么打开/themes/next/layout/_macro/post.swig
,找到标签<i class="fa fa-eye"></i>
,去掉下面这段代码即可:
SEO优化
更改首页标题格式为「关键词-网站名称-网站描述」。打开\themes\next\layout\index.swig
文件,找到这行代码:
把它改成:
博客部署的message设置
在\hexo\node_modules\hexo-deployer-git\lib\deployer.js
文件末尾找到这一句:
改得个性化一点:
为项目主页添加README
在 Github 上的博客仓库主页空荡荡的,没有README
。如果把README.md
放入source
文件夹,hexo g
生成时会被解析成html
文件,放到public
文件夹,生成时又会自动删除。
解决方法很简单,在站点配置文件中,搜索skip_render:
,在其冒号后加一个空格然后加上README.md即可。
优化主题 sidebar 头像
就是为主题 sidebar
头像添加圆形化旋转的效果。修改 /themes/next/source/css/_common/components/sidebar/sidebar-author.styl
文件,我的整个 sidebar-author.styl
文件的代码如下,你可以直接复制这段代码去替换你这个文件中的所有代码。
有一个注意事项,就是你要保证你的头像,也就是 avatar.jpg
这个图片是正方形,不是的话你要将其修改成正方形,这样才能通过样式将其展现为很好看的正圆,否则会是一个椭圆形。
小红心优化
为博客加入鼠标点击显示小红心,但是如果我们只想在博客的某个页面添加这个功能呢?
那么就可以在 \themes\next\source\js\src
文件目录下添加 love.js
文件。内容为:
之后呢,不在\themes\next\layout\_layout.swing
文件中添加代码,而是在你想要显示红心的页面的 Markdown
文件中加入下面这段代码,例如我就在我的留言板页面的 Markdown
文件中加入了下面这段代码。
文章内文本样式
Markdown
毕竟是为了方便写作,在样式上过于单调。我们可以自己来给文章加一些样式。NexT 作者提供了一个供用户自己定义样式的文件:\themes\next\source\css\_custom\custom.stly
。可以按照自己的需要写。下参考:
设置动态title
在 \themes\next\source\js\src
目录下新建 dytitle.js
。添加以下内容:
|
|
更改 \themes\next\layout\_layout.swig
。在 </body
之前添加:
添加听音乐
代码设置
在 \themes\next\layout\_macro
目录下新建 high.swig
文件,添加以下内容:
在侧边栏引用该文件:修改 \themes\next\layout\_macro\sidebar.swig
,添加以下代码:
样式修改:使 听音乐 和 RSS 并排展示。
修改 \themes\next\source\css\_schemes\Pisces\_sidebar.styl
文件:
添加自己喜欢的音乐:修改其中的歌曲链接即可.
首页听音乐摇晃:需要加载 css
样式。在 themes\next\layout\_layout.swig
文件的 </body>
标签前 添加以下代码:
注意:有时候使用 Firefox
、Chrome
时会提示非法插件并禁止使用,遇到这种情况我们把样式代码引入到 \themes\next\source\css\_custom\custom.stly
文件即可解决。
音乐链接获取
先获取歌曲id,直接打开 网易云音乐网页版 http://music.163.com 搜索自己喜欢的音乐,点击外链生成器获取歌曲的 ID 。举个例子:(id显而易见吧)
1http://music.163.com/#/song?id=443205403将下面网址中的两处id替换成的歌曲 id ,你将会获得一大串代码:外链就隐藏其中(如下图,自己找)。
http://music.163.com/api/song/detail/?id=425137664&ids=[425137664]&csrf_token=
- 将上一步中获取到的网址放到地址栏中,若能正常播放音乐说明获取到的网址是正确的。然后你就可以把这些歌曲添加到自己的网页中了!用这种方法有些歌曲并不能获得,不过时效很长(只要网易云能听)。
博文压缩
目前知道的有两个插件可以压缩博文,hexo-all-minifier
插件和 gulp
插件。hexo-all-minifier
虽然使用比较简单,而且也可以压缩图片,但是对文章缩进(输入法全拼模式下按 Tab
)不支持,所以暂时使用 gulp
压缩手段。
hexo-all-minifier
使用方法
安装 hexo-all-minifier
,在站点的根目录下执行以下命令:
hexo g 编译的时候就会自动压缩 HTML、JS、图片。详情参考插件介绍 hexo-all-minifier
glup 使用方法
hexo 依赖 gulp 插件安装,在站点的根目录下执行以下命令:
在 package.json
同级目录下,新建 gulpfile.js
并填入以下内容:
生成博文是执行 hexo g &&
; gulp
就会根据 gulpfile.js
中的配置,对 public
目录中的静态资源文件进行压缩。
博文置顶
修改 hero-generator-index
插件
替换文件:node_modules/hexo-generator-index/lib/generator.js
内的代码为:
设置文章置顶
在文章 Front-matter
中添加 top
值,数值越大文章越靠前,如:
embed.js本地化
embed.js
是多说使用的远程脚本,你可以访问 http://static.duoshuo.com/embed.js 这个网址。右键另存为 \theme\next\source\js\src\
这个文件夹。
然后打开 \themes\next\layout\_scripts\third-party\comments\duoshuo.swig
这个文件,在文件里搜索 //static.duoshuo.com/embed.js
,把它改成 /js/src/embed.js
。搞定啦!
Hexo更改默认Google字体库
因为一些国内的客观原因,google
字体库 的访问速度一直很慢,所以生成页面后,访问系统总是会耗费一大部分的时间在加载google
字体库上,而且经常加载不成功。
解决的办法是可以用国内的CDN库来替代主题中的google
字体库,更改方法如下:shell
中运行如下命令:
找到对应的google字体库地方,用国内的CDN字体库替换,如360字体库:360前端公共库CDN。
首页分割线
在 \themes\next\source\css\_custom\custom.styl
文件中添加以下代码,可以修改博客首页中每篇文章的分割线长度,我设置为了100%
长度。
字体、颜色等设置
在\themes\next\source\css\_variables\custom.styl
文件中添加以下代码。具体功能我已经做了注释。
语言配置
_config.yml
中的language
要配置为选定的主题cilia
文件夹下的language
目录下的文件,如:
这里修改 zh-Hans为标准的zh-cn,并添加一些汉化内容
语言配置用法:
不蒜子统计显示
添加站点统计配置为不蒜子统计,并且可开关
配置自己的分享
国内的jiathis
将themes/yilia/_partial/share_jia.ejs
中的内容替换为:
其中uid
为自己在jiathis
注册的uid
国外的add this
将themes/yilia/_partial/share_jia.ejs
中的内容替换为:
Rss
添加Rss,需要先安装rss生成模块:
然后在themes/yilia/_config.yml
开启rss
站点配置文件
添加站点地图插件
会在每次hexo generator
后自动生成到网站根目录
设置网站logo
通过网站favicon在线制作 制作favicon图片,logo最好设置32*32。
next主题:将图片放在next主题source/images
目录下
Hexo文章简单加密访问
找到themes->next->layout->_partials->head.swig
文件。
按道理是添加在任何地方都行,但是推荐加在所有的<meta>
标签之后。
|
|
Hexo high一下
是直接把这段代码当成一个菜单项加在博客主题配置的_config.yml
文件中
|
|
high 一下自定义页面歌曲
首先是在需要自定义曲子的文章中加上:
|
|
然后最终版high.js代码是这样:
修改文章链接
HEXO 默认的文章链接形式为domain/year/month/day/postname
,默认就是一个四级url
,并且可能造成url过长,对搜索引擎是十分不友好的,我们可以改成domain/postname
的形式。编辑站点_config.yml
文件,修改其中的permalink
字段改为permalink: :title.html
即可。
夜间模式
Hexo-Next-Mist主题头部顶栏背景图片
图片存放位置:选择一张心仪的图片,命名为 background.jpg,放到 source 文件夹下的 image 文件夹内。
背景图片设置:找到如下位置:
保存,重新生成网页即可。
打赏字体不闪动
修改文件next/source/css/_common/components/post/post-reward.styl,然后注释其中的函数wechat:hover和alipay:hover,如下:
|
|
博客文章链接无中文乱码
未完待续 ! 未完待续 ! 未完待续 !
参考原著:摘录
1、【Levi.Blog】 http://www.dingxuewen.com
2、【lancelot_lewis】 https://lancelot_lewis.coding.me
3、【http://www.jianshu.com/p/f054333ac9e6】
4、【】