Hexo中Next主题的简单个性化

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014253173/article/details/80044872

差不多有一年多没有折腾博客了,最近想着还是要重拾写博客的这一习惯,所以就动手将hexo重新折腾了一番。

1.评论系统

本来Next主题中是默认支持多说和Disqus的,但是多说已经关闭了,而且Disqus也被墙了,其他的一些评论系统用户量又不是很大,碰巧在github上看到了两个基于issue的评论系统gitmentcomment,就想着在Next中也给配置一下,开始还在两个系统中纠结了一番,最后还是选择了gitment。配置过程其实还算挺简单的,直接按照官方文档的步骤来就可以了。中文文档

1. 在github中注册 OAuth App

这里调用了github中的API,所以需要注册一个 OAuth application注册
将相关信息填写完整,Authorization callback URL 填要应用的站点地址。 (如:https://whjkm.github.io/
完成注册后,会得到两个值:client idclient_secret,这两个值后面在页面中需要用到。

2.获取 Gitment代码

开始对Next的结构不熟悉,不知道应该将这段代码插到哪个文件中去,将范围缩小到themes/next/layout/这个文件夹,最先尝试是将代码插入到了themes/next/layout/page.swig文件,发现在每个页面中都有评论框了。我这里只想实现在post页面能够显示评论框,所以最终是将代码插入themes/next/layout/post.swig图示代码之后。本来还想about页面也实现这个功能,但是Next没有默认的about页面,这个功能就留到以后自己折腾吧。获取gitment

<div id="container"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
var gitment = new Gitment({
  id: '页面 ID', // 可选。默认为 location.href
  owner: '你的 GitHub ID',
  repo: '存储评论的 repo',
  oauth: {
    client_id: '你的 client ID',
    client_secret: '你的 client secret',
  },
})
gitment.render('container')
</script>

3. 初始化

将页面发布之后,第一次使用需要使用Github账号登陆,确保和第二步所填 repo 的 owner保持一致,然后点击初始化就可以尽情使用啦。

2.添加 README.md

之前提交到github上就发现了这个问题,提交之后就发现没有README.md文件了,一时也没有想到解决办法,恰巧看到一篇博客介绍了这个问题;使用hexo配置文件config.yml中的skip_render参数,skip_render参数是用来跳过那些不用hexo渲染的文件。将参数设置为README.md,更新重新发布就可以了。

skip_render: README.md

skip_render

3.添加小图标

Next主题支持自定义social link,默认的选项有Github,weibo,twitter,这里在侧边栏自定义添加了douban和csdn,也可以自定义添加其他链接。Next中使用的是fontawesome图标库,在其中选择喜欢的图标,将图标的名字复制到Next的配置文件config.yml中的social_icons部分。
social_icons

4.添加访问量

Next中默认使用了不蒜子统计访问量,只需要在配置文件中修改就行了,有总访问量、总访问人数还有每篇文章的访问量。
busuanzi
直接修改Next的配置文件config.yml,将enable参数修改为true,后面的site_uv_header表示的是CSS图标,这个也可以进行自定义。

参考的文章

https://blog.csdn.net/qq_33699981/article/details/72716951
http://www.hahack.com/codes/comment-js/
https://imsun.net/posts/gitment-introduction/

DIY个性化iGoogle主题

08-19

摘自《Google API大全——编程·开发·实例》第10章“iGoogle主题设计”10.2节rnrnrn10.2 创建主题的步骤rn为iGoogle制作主题,除需要有艺术天赋外,还需要有Web设计、编写代码、调试等计算机相关知识。rnrn简单地说,创建一个主题有以下3个步骤:rnrn视觉设计。包括页眉和页脚的横幅设计,各个模块的配色等。对Web设计不熟悉而有艺术天赋的设计者对横幅设计的一些要求可能不那么容易理解,本章将重点讲解。 rn代码实现。把视觉设计转换成iGoogle能读懂的XML文件。 rn测试并提交。rnrn下面以iGoogle全球版的最新版本为基础进行讲解。此版本在原有版本上有大幅改进,API也有较大变动。涉及新老API不同时,文中会加以说明。iGoogle中国版(www.google.cn/ig)目前还是适用于旧版API。rnrn10.2.1 视觉设计rn打开iGoogle,可以看到,界面由4部分组成:页眉、页脚、内容区域和左侧导航(新版),这些都可以在主题中进行定制。rnrn可以根据iGoogle关于主题内容的指引(http://code.google.com/apis/themes/programpolicy. html)来选择是放照片还是绘画作品。笔者认为最容易被开发者们忽视的有以下相关规定:rnrn不要把品牌元素放在指定区域之外。也就是说,不能在页眉的横幅图片里面做广告。创意需要的文字可以放在页眉的横幅图片中,但制作者的名字、logo和广告语等都不允许放在其中,因为页脚有专门署名的位置。 rn不要在设计中自行添加iGoogle和Google的logo。 rn背景图像的设计不能干扰页面上的iGoogle logo——iGoogle 7个字母,也就是说iGoogle徽标附近不能有复杂的图案,背景图像不能看上去像是与iGoogle徽标进行互动,徽标也不能和背景颜色过于接近等。 rn设计必须不影响iGoogle本身的可用性,主要是指文字、链接等必须仍然清晰可辨,不会给用户的使用带来困难。 rn详细规定可以浏览http://code.google.com/apis/themes/programpolicy.html。rnrn页眉的设计rn页眉区域是一个iGoogle主题最引人注意、最容易被识别的部分。在UI的实现上,页眉由四个层次构成,从下到上依次是:rnrn背景颜色。如果没有图片或图片因网络等原因无法载入时,背景颜色会显示出来。 rn一张从中心开始向两边重复平铺的背景图片。 rn一张居中显示的前景图片。 rniGoogle徽标、搜索框和链接文字等。 rn图10-1以“江南”为主题,说明这个关系:rnrn下面,重点讲讲平铺图片和中心图片的关系。对于仔细设计的iGoogle主题而言,页眉的图像看上去像是一张图片,而事实上由两张图片组成的:一张在后面平铺,一张居中显示。为什么要这么做?因为iGoogle的设计是自适应浏览器宽度的,也就是说,用户的显示器有多宽,这张图片所占的位置就可能有多宽。如果不想两边留白,最容易的解决方案就是设计一张超大的图片。然而,大图片就意味着用户需要等待更长的时间,尤其对屏幕分辨率不大的用户来说,更浪费时间。rnrn[img=http://p.blog.csdn.net/images/p_blog_csdn_net/bvbook/505170/o_10-1_thumb.jpg][/img]rn图10-1 以“江南”为主题的示例rnrn在iGoogle实际应用中,背景的平铺图片先载入,这张图片从页面的中心开始,向两边无限地重复平铺,而且整个平铺的效果使这张图片的左边界和右边界完美衔接,见图10-2所示。rnrn[img=http://p.blog.csdn.net/images/p_blog_csdn_net/bvbook/505170/o_10-2_thumb_1.jpg][/img]rn图10-2 载入背景平铺图片rnrn背景图片铺完以后,再在其正中心载入一张前景图片。前景图片不平铺,但其左右边界也必须和它下面的背景图片完美衔接,见图10-3所示。rnrn[img=http://p.blog.csdn.net/images/p_blog_csdn_net/bvbook/505170/o_10-3_thumb.jpg][/img]rn图10-3 载入前景图片rnrn无论用户的分辨率有多大,背景图片看起来都应该是一张大图片,不能有明显的接缝。设计者可以用比较灵活的方式来达到这个要求,举例如下:rnrn只用一张背景图片,不用前景图片。保证背景图片平铺时能衔接即可。下面这个Simplicity is complex主题的截图宽度约为3000像素(下同),见图10-4所示。 rn rn[img=http://p.blog.csdn.net/images/p_blog_csdn_net/bvbook/505170/o_10-4_thumb.jpg][/img]rn图10-4 背景图片rnrn只用一张前景图片,不用背景图片。保证前景图片在边缘处已经渐变到了背景的纯色即可。例如,Earth hour主题,见图10-5所示。 rn rn[img=http://p.blog.csdn.net/images/p_blog_csdn_net/bvbook/505170/o_10-5_thumb.jpg][/img]rn图10-5 前景图片rnrn前景图片使用透明背景的GIF或PNG图像,背景部分使用背景图片和背景颜色都可。前景图片的透明部分会直接显示出背景部分,只需要完美融合即可。一般来说,这要比保证接缝处的融合容易。Bus stop的主题使用的是这个方法,可以参阅http://code.google.com/apis/themes/docs/dev_guide.html#Header中的介绍。 rn可以在应用这些主题后,使用Firebug等工具查看这些图层到底是如何拼合的。rnrn页眉图像高度规定为175像素,可以使用JPG、PNG或GIF图片。使用PNG图片时请注意,一些旧的浏览器如IE6对带有透明通道的PNG图片支持有限。rnrn下面该谈谈徽标的选择了。rnrn可以为自己的主题选择一个相匹配的iGoogle徽标。Google备有24个不同颜色的徽标供设计者选择,详情可到http://code.google.com/apis/themes/docs/reference.html#Ref_Logos中浏览。rnrn关于徽标的选择规定,请参阅前面的介绍。rnrn页脚的设计rn页脚部分的结构和页眉相似,同样要使用两张图片来实现无限延展的效果,在此不加赘述,但图片高度的要求变为140像素。rnrn在页脚,还可以放置一个100像素宽、50像素高的署名图像。署名会出现在页脚区域的右上方,内容可以是设计者的名字、签名或徽标。具体规定,请仔细阅读政策页(http://code.google.com/apis/themes/programpolicy.html),以免在提交主题时被拒绝。rnrn配色方案rniGoogle允许指定页面中许多元素的颜色。颜色的数值可以是6位的十六进制数值(#XXXXXX),也可以是CSS中的通用色彩名字,共有28个颜色值可以供用户指定,列举如下:rnrn(1) 页眉部分:背景颜色,链接文字颜色,非链接文字颜色。rn(2) 左侧导航(新版):背景颜色,边框颜色,图标颜色,选中标签中的链接文字颜色,未选中标签中的链接文字颜色,未选中标签的边框颜色等。rn(3) 顶部导航标签栏(旧版):标签边框颜色,选中标签的背景颜色和文字颜色,未选中标签的背景色和文字颜色等。rn(4) 聊天工具:联系人名字颜色,联系人状态颜色,鼠标滑过联系人时的背景颜色,浮动联系人卡片的边框颜色,新联系人邀请的背景颜色、边框颜色、链接文字颜色和非链接文字颜色,聊天窗口的背景颜色,高亮状态下聊天窗口的背景颜色等。rn(5) 内容部分:内容区域的边框颜色,每个小工具的边框颜色、标题栏背景颜色、标题栏文字颜色、标题栏图标颜色和内容中的链接颜色仅对内联的小工具有效。rn(6) 页脚部分:背景颜色,链接文字颜色,非链接文字颜色。rnrn关于小工具标题栏的图标颜色,新旧版API的指定方式略有不同。在旧版的API中,对于每个小工具右上角的3个操作按钮,要分别指定在不同状态下调用的图片地址;4个按钮中,每个按钮有两个状态,一共就是要指定8个图片地址。而在新版API中,只要指定一个标题栏图标颜色。不是所有的颜色都可以用于标题栏——可供选择的颜色请参阅参考资料(http://code.google.com/apis/themes/docs/reference.html#Ref_Icons)。rnrn动态主题rn每个主题下面可以包括多个皮肤。在设计主题时,可以指定不同的皮肤在不同的时段显示。通过这个功能,可以设计出许多有趣的Theme。例如:假如设计能反映每天不同时段的心情,或者通过不同的时段讲述完整的故事,一定会让用户更感亲切。rnrn但由于深夜iGoogle的用户不会有其他时间那么多,这段时间的主题变化可以减缓,以减少工作量。有关数据表明,午休时段和黄昏时段,iGoogle的用户最多。rnrn10.2.2 编写XML文档rn完成上述工作后,可以开始编写代码。每个iGoogle的Theme都由一个XML文档表示,该XML文档中的键值对,就表示设计的各种属性,如页眉背景图片、联系人名字颜色等。一个Theme文件的基本结构如下:rn rn rn rn Simple Theme rn Simple theme example. rn Rowan rn Rowan@gmail.com rn http://gmodules.com/ig/images/skins/ig_thumb_beach. jpg rn rn rn teal rn white rn blue rn black rn teal rn rnrnrn每个Theme文件都至少包括两个Config Map,其中一个是Theme的属性,另外一个是具体的设计。如果一个Theme内包括多个皮肤,也就是所谓的动态主题,那么可以包括多个皮肤设计,并通过标签和TimeOf Day属性来指定不同皮肤适用的时间段,指令如下:rn rn 12am-1am rn ...attributes... rn rn rn 1am-2am rn ...attributes... rn rnrn每个皮肤使用的时间段可以有多个,但互相之间不能有重叠。iGoogle还规定时间段不能跨过午夜12点(12am)。如果确实须要跨夜,可以把它拆成两个来写。如要表示晚上10点到第二天6点,可以这样写:rn10pm-12am rn12am-6amrnrn也可以使用多个Config Map来表示不同语言、不同国家地区版本的Theme基本信息,通过标签和TimeOf Day属性来指定不同配置适用的语言和国家地区。如下指令:rn rn rn ...meta attributes... rn rn rn zh-CN rn ...meta attributes... rn rnrnrn前一个Config Map表示了默认的 Theme信息,后一个Config Map则特意指定了简体中文版中的信息。rnrn具体的设计元素及对应的XML属性,请参阅API文档(http://code.google.com/apis/ themes/docs/reference.html)。但有两点注意事项:rnrn1. 颜色代码不能使用3位数的简写。也就是说,不能写成#123,而必须写成#112233。rn2. 里面所有的URL都必须是绝对URL。rnrn10.2.3 开发、测试和提交rnXML完成后,就可以在iGoogle的实际环境中进行调试。rnrn首先,需要把XML文件连同图片上传到一个公共的Web服务器。必须核实XML中指定的图片URL地址是否和上传后的地址一致。如果没有合适的服务器,Google Code的Project Hosting服务是个不错的选择。rnrn然后,打开iGoogle,在地址后面加上一个?skin=参数。表示要测试的XML文件的绝对URL。如果顺利,应该可以看见Theme的效果;如果看到的是iGoogle的默认蓝色风格,说明Theme存在问题,请仔细检查语法,以及有没有违反上述格式的规定。rnrn仔细检查Theme的效果,特别是一些第一眼看不见、容易被忽视的功能。如删除一个小工具后页眉中会出现一个小提示,询问用户是否撤销刚刚的操作,这时候文字就不一定容易辨认了。细节非常重要,用户往往会因为一个细节而弃用某个主题,不管这个主题的其他部分是多么好。rnrn测试没有问题后,可以到http://www.google.com/ig/skin_submit提交。提交时程序会检查XML有没有语法错误、图片是否可访问等,如果没有问题,就会提交到后台等待审核。如果没有任何非技术的问题,在1~2个工作日内,设计者设计的Theme就会出现在iGoogle的主题目录里。rnrniGoogle的主题通过后,所有图片会被iGoogle抓取过去缓存,所以不用担心自己服务器流量问题。另一方面,如果要更新主题的设计,即使只是更新图片,都要重新提交主题。

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试