>

Jekyll搭建个人博客

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

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

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

.
├── _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中,添加代码

    <span >本文总字数:1585字 | </span>
    <span >阅读完需要约5分钟</span>
    

    在文章的发布之后即可显示文章字数统计和阅读时间统计:

    添加网易云音乐播放插件

    在_includes目录下,添加html文件 cloud-music.html 内容为:

<!-- 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=1297750680&auto=1&height=66">
</iframe>

在post.html,文章正文的开头,添加代码:

<div align="center"> 
    <!-- 在正文开头添加网易云音乐插件 -->
  
    <!-- 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=1297750680&auto=1&height=66">
</iframe>

<!-- <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="//music.163.com/outchain/player?type=0&id=2362006321&auto=1&height=430"></iframe> -->
   
    </div>

在正文的markdown文本中,开头加上:

music-id: 496869422

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




待更新

打赏一个呗

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦