Jekyll搭建个人博客

忆星辰

博客

发布于：2017年9月5日

字数：814字

时长：3分钟

次阅读
0  

这篇文章主要讲的是如何使用和修改我的博客主题，文章内容含以下几点：

  • 修改博客基础信息
  • 发布文章
  • 修改博客样式
  • 添加文章字数统计和阅读时间估算
  • 添加网易云音乐播放插件

博客模板根目录下的基本结构为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.
├── _config.yml 
├── _includes    
├── _layouts
├── _posts
├── _site
├── 404.html
├── about.md
├── archive.html
├── CNAME
├── css
├── feed.xml
├── Gemfile
├── Gemfile.lock
├── images
├── index.html
├── js
├── Rakefile
├── README.md
└── tags.html

  1. _config.yml 是博客的配置文件，内容如图所示
    blogcreenshot
    title：网站名称

    subtitle：网站副标题

    desciption：网站描述

    avatarTitle：头像标题

    avatarDesc：头像描述

    url：网站链接

    comment：评论系统，这里我是用的是国外的Disqus和livere，由于“众所周知”的原因，Disqus评论系统在国内并不可用，需要梯子才可以访问，虽然Disqus很好用==，所以我目前是使用的livere(来必力，韩国开发的)，相关配置和使用教程会在以后放出来。国内也有（大概？）好用的评论系统，例如：畅言、Valine等，可以自行测试使用。

    social：社交账号

    baidu：网站统计

    ga：Google Analytics谷歌网站分析
  2. _includes/ 是网站模板包含的样式目录
  3. _layout/ 是网站模板的样式模板目录
  4. _post/ 是博客的文章目录，写好的markdown文件放在此目录，推送到github上，文章即可在博客上展示
  5. _site/ 是网站的发布目录
  6. 404.html 404页面
  7. about.md 关于我 页面
  8. archive.html 文章发布页面
  9. CNAME cname域名转发，可以在Github上直接设置
  10. css,feed.html RSS订阅页面
  11. images 图片存储目录，可以存储文章引用的图片
  12. index.html 主页入口
  13. js/ js文件目录
  14. README.md Github readme页面
  15. tags.html 博客tags

    添加文章字数统计和阅读时间

    在_layouts目录下的post.html中，添加代码
    1
    2
    <span >本文总字数:{{ page.content | strip_html | strip_newlines | remove: " " | size }}字 | </span>
    <span >阅读完需要约{{ page.content | strip_html | strip_newlines | remove: " " | size | divided_by: 350 | plus: 1 }}分钟</span>
    在文章的发布之后即可显示文章字数统计和阅读时间统计：

    添加网易云音乐播放插件

    在_includes目录下，添加html文件 cloud-music.html
    内容为：
1
2
3
4
5
<!-- cloud music -->
<!-- auto=1 可以控制自动播放与否，当值为 1 即打开网页就自动播放，值为 0 时需要访客手动点击播放 -->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86
        src="//music.163.com/outchain/player?type=2&id={{ page.music-id }}&auto=1&height=66">
</iframe>

在post.html，文章正文的开头，添加代码：

1
2
3
4
5
6
<div align="center"> 
    <!-- 在正文开头添加网易云音乐插件 -->
  {% if page.music-id %}
    {% include cloud-music.html %}
  {% endif %} 
    </div>

在正文的markdown文本中，开头加上：

music-id: 496869422

就可以在文章的开头显示网易云音乐播放器，music-id是音乐id，可以在网易云音乐播放器中查找









待更新

相关文章
使用MWeb进行Markdown博客编辑MWeb 是专业的 Markdown 写作、记笔记、静态博客生成软件，目前已支持 Mac，iPad 和 iPhone。MW...

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

转载请注明本文链接

本文永久链接是：https://www.extingstudio.com/2017/09/05/2018-08-25-jekyll_tutorials/

更新于：2020年8月25日

博客

评论