howiefh.github.io - Hexo日历插件

Hexo日历插件 | 净土

Howiefh.github.io Spined HTML

Hexo日历插件 | 净土 净土 乐不在外而在心，心以为乐，则是境皆乐；心以为苦，则无境不苦。 Home Archives  2016-04-29 Hexo Hexo日历插件 Contents 1. 安装2. 配置 如果你在使用 Hexo 并且你在寻找一款 Hexo 下可用的日历插件，你还希望这款日历插件能像博客园或者WordPress的日历小工具一样，如果某天有文章，日期就会显示为文章链接，那么本文介绍的这个插件就是你所需要的。 实际上之前在 Landscape-F 主题中已经实现过一个日历插件（hexo-calendar）了，只不过当时这个插件很挫，打开一篇文章时，日历中才能显示文章链接，而且只能显示文章发表当月的文章的链接，你要查看其他月的日历时，就算有文章也不会在日历中显示，因为当时的做法是在生成页面直接在页面的日历中嵌入文章当月所有文章的链接，是完全静态的。现在我重新实现了日历插件（hexo-generator-calendar），很简单，就是在Hexo generator的时候，把所有文章的标题、链接、发布时间信息以json格式存入文件中，然后在前端用ajax方法请求日历数据，解析并生成日历表格。下面简单介绍下这个插件的安装和使用。 安装执行下面的命令 12cd <你的博客路径>npm install --save git://github.com/howiefh/hexo-generator-calendar.git 当然只安装 hexo-generator-calendar 是不够的，你还得使用主题 Landscape-F 12cd <你的博客路径>git clone https://github.com/howiefh/hexo-theme-landscape-f.git themes/landscape-f 在博客根目录的_config.yml中配置主题 1theme: landscape-f 如果你在其他 Hexo 主题中也想显示日历，你需要在相应目录中添加以下几个文件： calendar.ejs languages.js (多亏了https://github.com/xdan/datetimepicker/) calendar.js calendar.styl 此外，你还需要在 _variables.styl 中添加以下内容 123color-calendar-border = #d1d1d1color-calendar-post-bg = #007acccolor-calendar-hover-bg = #686868 在 after-footer.ejs 中添加以下内容 12345678910<% if (theme.widgets.indexOf('calendar') != -1){ %> <%- js('js/languages') %> <%- js('js/calendar') %> <script type="text/javascript"> $(function() { $('#calendar').aCalendar('<%= theme.calendar.language || config.language %>', $.extend(<%- JSON.stringify(theme.calendar.options ) %>, {single:<%= config.calendar.single %>, root:'<%= config.calendar.root %>'})); }); </script><% } %> 配置可以在博客根目录的_config.yml中配置这个插件 123calendar: single: true root: calendar/ single - 生成一个单独的json文件。 (默认: true) root - 当single的值是false时，这个值才会生效，用来指定按月份生成的多个json文件的根目录。 (默认: calendar/) 上面是 hexo-generator-calendar 插件的配置，接下来讲下 calendar.js 的配置。主要就是语言和其它选项的配置。 语言 如果主题根目录下_config.yml文件中有如下配置，将优先使用此处的配置；否则使用博客根目录的_config.yml中的language配置项的值，如果此项仍为空或者无效则使用 calendar.js 中的默认配置（英文）。 12calendar: language: zh-CN 选项 对于 months、dayOfWeekShort、dayOfWeek、postsMonthTip、titleFormat这五项配置优先选用主题根目录下_config.yml中的配置，其次是 languages.js 中的配置（语言配置参考上面），最后是 calendar.js 的默认配置。对于single、root这两项，优先选用博客根目录的_config.yml中的 hexo-generator-calendar 的配置，其次是主题根目录下_config.yml中的配置，最后是 calendar.js 的默认配置。其他项优先选择主题根目录下_config.yml中的配置，最后是 calendar.js 的默认配置。 主题根目录下_config.yml中的配置示例123456789101112131415calendar: language: zh-CN options: months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] dayOfWeekShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'] dayOfWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] postsMonthTip: 'Posts published in LMM yyyy' titleFormat: 'yyyy LMM' titleLinkFormat: '/archives/yyyy/MM/' headArrows: {previous: '<span class="cal-prev"></span>', next: '<span class="cal-next"></span>'} footArrows: {previous: ' ', next: ' '} weekOffset: 0 single: false root: '/calendar/' url: '/calendar.json' 当然，关于配置，你还可以直接修改 after-footer.ejs 或者 calendar.js。事实上不做任何配置也是可以使用的，最多你可能只需要设置一下语言。 到此，怎么安装使用这款日历插件应该就讲清楚了，希望大家喜欢这款日历插件O(∩_∩)O。 Hexo Updated:2017-08-01 Newer Git 内幕 Older AES加密时报java.security.InvalidKeyException Illegal key size Please enable JavaScript to view the comments powered by Disqus. Contents 1. 安装2. 配置 ABOUT ME Hi,I'm FengHao. I'll share something interesting and my learning wits with you at this blog. Categories Android3C2Database13MongoDB10MySQL2Eclipse1FTP2Git4Hexo4Java21FreeMarker3Shiro2JavaEE4Hibernate1JSP1Spring2JavaScript5jQuery1Linux2PHP5Suse1Ubuntu5Vim7编程2软件1 Tag Cloud Android C CAS Chrome Clean Code Database Eclipse FTP FreeMarker Gcc Git Github Pages Hexo Hibernate JSP JVM Java JavaMail JavaScript Linux Log Markdown MongoDB MySQL PHP Rhythmbox SSO Servlet Shiro Spring Suse Thinking in Java Ubuntu Vim VirtualBox Vsftpd jQuery pam_mysql 小米 软件 Archives May 20161April 20162September 20151August 20154July 20151May 20155April 20154March 20154February 20152December 20142November 20142October 20144September 20142August 20141July 20141June 20146May 20144April 20144March 20143February 201411January 20141December 20131November 20132August 20133July 20132June 20131May 20134April 20133March 20121TimetableRecent Posts Git 内幕 Hexo日历插件 AES加密时报java.security.InvalidKeyException Illegal key size JavaScript 总结 JavaScript 面向对象程序设计、函数表达式和异步编程 © 2017 howiefh Powered by Hexo and Theme by Landscape-F Total views. Home Archives