五一假期,进行第二次博客优化,新增博客分年月存放
、博客按年份归档
、统计站点文章数目
、网站访问数量统计
、留言板
、接入豆瓣书影音功能
一、博客分年月存放
在根目录_config.xml
中修改new_post_name
的值
:year/:month/:title.md
这样在使用hexo new xxx
时候就会自动按照年月创建文件夹
如下所示
二、博客按年份归档
yilia模板中有自带的归档功能,我们只需要开启就行了
找到yilia的_config.xml
文件,在menu
下添加
归档: /archives/index.html
即可,如果你想看到实际效果,可以来我的博客归档进行查看
### 三、统计站点文章数目
在yilia\layout_partial\left-col.ejs
中加入以下代码
<nav class="header-menu">
<ul>
<% for (var i in theme.menu){ %>
<li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
<%}%>
</ul>
</nav>
<nav>
总文章数 <%=site.posts.length%>
</nav>
加入的位置可以参考
四、网站访问数量统计
在yilia/layout/_partial/footer/.ejs
添加以下代码:
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
<span id="busuanzi_container_site_pv">
本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
<span id="busuanzi_container_site_uv">
本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>
至此,我们的访问数量统计就做好,在最下方
就可以看到不蒜子的显示效果了
五、留言板
-
网站根目录\scaffolds
修改文章模板post.md文件,打开在灰色区域添加comments: false
此表示文章默认关闭评论区,我们在此处讲留言板功能,所以
就不需要每篇文章都拥有评论区
-
新建留言板页
hexo new page messages
新建好后,打开
source/messages/index.md
文件,将comments: false
修改为true
将
index.md文件
地址添加到模板_config.xml
文件的菜单(menu
)中路径按照source目录下的相对路径来配置,比如说我的就是/messages/index
文件目录如下
配置文件如下
-
注册gitalk Application
此处需要注意的地方就是Homepage URL
和Authorization callback URL
,此处我两个都填的是留言板的地址,也就是域名
加上我们在菜单中配置的相对地址
前者使用是优先于后者的,只有当网页重定向地址和前者不符合的时候才会使用后者
如果在配置中遇到了问题,可以参考以下博文:
-
在yilia
模板_configt.xml(配置)
文件中(非根目录配置文件),新增gitalk
相关的配置gitalk: enable: true #是否开启 githubID: #你的Github用户名 repo: #Github仓库名称 不需要填地址 ClientID: #创建的Application ClientID ClientSecret: #创建的Application ClientSecret adminUser: # 评论初始化账户(GitHub ID) distractionFreeMode: true # 是否开启分心自由模式 也就是免打扰
-
在
yilia/layou/_partial/post
目录下新建gitalk.ejs
文件,将以下代码放在里面<div id="gitalk-container" style="padding: 0px 30px 0px 30px;"></div> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css"> <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script> <script type="text/javascript"> if(<%=theme.gitalk.enable%>){ var gitalk = new Gitalk({ clientID: '<%=theme.gitalk.ClientID%>', clientSecret: '<%=theme.gitalk.ClientSecret%>', repo: '<%=theme.gitalk.repo%>', owner: '<%=theme.gitalk.githubID%>', admin: ['<%=theme.gitalk.adminUser%>'], id: '<%= page.date %>', distractionFreeMode: '<%=theme.gitalk.distractionFreeMode%>' }) gitalk.render('gitalk-container') } </script>
-
修改
yilia/source-src/css/comment.scss
文件,在#gitment-ctn,
后加入#gitalk-container
-
在
yilia/layout/_partial/article.ejs
中新增gitalk触发代码<% if(theme.gitalk.enable){ %> <%- partial('post/gitalk', { key: post.slug, title: post.title, url: config.url+url_for(post.path) }) %> <% } %>
-
hexo g
、hexo d
之后就可以在网站上看到效果了!可以来我的留言板查看效果
六、接入豆瓣书影音功能
-
在网页根目录下调出
git bash
执行npm install hexo-douban --save
-
找到并打开yilia下的
_config.xml
文件,在menu上添加一个新的路径,可参考我的
tip:注意,不管自己增加什么菜单,路径都必须配置为
/books
- 打开根目录下的_config.yml配置文件,将以下配置写入:
douban:
user: mythsman
builtin: false
book:
title: 'This is my book title'
quote: 'This is my book quote'
movie:
title: 'This is my movie title'
quote: 'This is my movie quote'
game:
title: 'This is my game title'
quote: 'This is my game quote'
timeout: 10000
tip:
- user: 你的豆瓣ID.打开豆瓣,登入账户,然后在右上角点击 “个人主页” ,这时候地址栏的URL大概是这样:“https://www.douban.com/people/xxxxxx/” ,其中的"xxxxxx"就是你的个人ID了。
- builtin: 是否将生成页面的功能嵌入
hexo s
和hexo g
中,默认是false
,另一可选项为true
- title: 该页面的标题.
- quote: 写在页面开头的一段话,支持html语法.
- timeout: 爬取数据的超时时间,默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。
如果只想显示某一个页面(比如movie),那就把其他的配置项
注释
掉即可。
笔者是这样配置的(只打开了书籍功能)
4. 配置完毕后,我们就要开始使用了
我们先清理生成的public文件:hexo clean
执行hexo douban -b
,爬取我们页面上的图书信息(如果你在配置文件中选择了所有信息,此处应该执行hexo douban -bgm
(-b:书籍
、-g:游戏
、-m:电影
))
编译、生成public文件:hexo g
发布、部署上云端:hexo deploy
(注意:安装了hexo douban后就不要使用hexo d了,因为hexo douban的前缀也是hexo d)
- 在浏览器中输入
域名
+/books
就可以查看了,可以去我的书架子查看细节。
tip:如果出现了页面
都是英文
的情况,请修改根目录下
配置文件_config.xml
的语言,如下
关于hexo博客优化,你还可以看:
基于yilia theme的Hexo博客功能优化(一):博客url自定义、目录、博客插入本地图片、首页折叠文章
在hexo博客系统中接入docsify文档管理系统
参考/摘录/阅读更多:
1.Hexo主题yilia增加gitalk评论插件
文章中有错误的地方欢迎指出,大家共同进步~
字 数:3715/ 完成时间:2020年05月01日 下午