1、页头
每一篇文章文件命名采用的是2017-02-04-Hello-2017.md时间+标题的形式,空格用-替换连接。
文件的格式是 .md 的 MarkDown 文件。
我们的博客文章格式采用是 MarkDown+ YAML 的方式。
YAML 就是我们配置 _config文件用的语言。
MarkDown 是一种轻量级的「标记语言」,很简单。花半个小时看一下就能熟练使用了
大概就是这么一个结构。
---
layout: post # 使用的布局(不需要改)
title: 这是文章正标题 # 标题
subtitle: 这是副标题 #副标题
date: 2019-10-01 # 时间
author: Duter2016 # 作者
header-img: img/post-bg-dutbs.jpg #这篇文章标题背景图片
header-mask: "0.1" # 博文页面上端的背景图片的亮度,数值越大越黑暗
catalog: true # 开启catalog,将在博文侧边展示博文的结构
istop: false # 设为true可把文章设置为置顶文章
music-id: 1359xxxxxx # 网易云音乐单曲嵌入
music-idfull: 293xxxxxxx # 网易云音乐歌单嵌入
apserver: netease # 音乐平台netease/tencent/kugou/xiami/baidu
aptype: playlist # 音乐类型song/playlist/album/search/artist
apsongid: # 音乐song/playlist/album id
tags: #标签
- Python
---
## Hey
这是博客内容。
进入你的博客主页,新的文章将会出现在你的主页上.
2、页头图片
页头可使用的自制图片,DUT类:
1.header-img: img/post-bg-dutbc.jpg
2. header-img: img/post-bg-dutbs.jpg
3.header-img: img/post-bg-dutbsyj.jpg
4.header-img: img/post-bg-dutljl.jpg
5.header-img: img/post-bg-dutlx.jpg
6.header-img: img/post-bg-dutme.jpg
7.header-img: img/post-bg-dutnm.jpg
8.header-img: img/post-bg-dutyjl.jpg
9.header-img: img/post-bg-dutzl.jpg
10.header-img: img/home-bg-coffee.jpg
11.header-img: img/home-bg-desk.jpg
12.header-img: img/post-bg-dutchq.jpg
13.header-img: img/post-bg-dutdhl.jpg
14.header-img: img/post-bg-dutkjy.jpg
15.header-img: img/post-bg-dutlx2.jpg
16.header-img: img/post-bg-dutlx3.jpg
17.header-img: img/post-bg-dutlx4.jpg
18.header-img: img/post-bg-dutlx5.jpg
19.header-img: img/post-bg-duttk.jpg
20.header-img: img/post-bg-dutyjl2.jpg
21.header-img: img/post-bg-dutyjl3.jpg
其他可用页头图片
页头可使用的图片,混合类:
header-img: img/home-bg.jpg #杂志墙
header-img: img/home-bg-art.jpg #艺术墙
header-img: img/home-bg-geek.jpg #手机和鼠标
header-img: img/home-bg-o.jpg #MAC笔记本
header-img: img/post-bg-2015.jpg #高速铁道
header-img: img/post-bg-alibaba.jpg #阿里巴巴咖啡
header-img: img/post-bg-android.jpg #安卓手机
header-img: img/post-bg-BJJ.jpg #柔术
header-img: img/post-bg-coffee.jpeg #书桌和咖啡
header-img: img/post-bg-cook.jpg #库克
header-img: img/post-bg-debug.png #代码Debug
header-img: img/post-bg-desk.jpg #古老打字机
header-img: img/post-bg-digital-native.jpg #小孩拿手机
header-img: img/post-bg-e2e-ux.jpg #多媒体教育
header-img: img/post-bg-github-cup.jpg #Github茶杯
header-img: img/post-bg-hacker.jpg #黑客加密病毒
header-img: img/post-bg-ios9-web.jpg #ios9系统手机
header-img: img/post-bg-ios10.jpg #ios10系统手机
header-img: img/post-bg-ioses.jpg #Apple家族大集合
header-img: img/post-bg-iWatch.jpg #iwatch手表
header-img: img/post-bg-js-version.jpg #JS图标
header-img: img/post-bg-keybord.jpg #键盘
header-img: img/post-bg-kuaidi.jpg #快递
header-img: img/post-bg-map.jpg #建筑工程图纸
header-img: img/post-bg-miui6.jpg #MIUI6桌面壁纸
header-img: img/post-bg-miui-ux.jpg #MIUI系统
header-img: img/post-bg-mma-0.png #拳击
header-img: img/post-bg-mma-1.jpg #拳击
header-img: img/post-bg-mma-2.jpg #拳击
header-img: img/post-bg-mma-3.jpg #拳击
header-img: img/post-bg-mma-4.jpg #拳击
header-img: img/post-bg-mma-5.jpg #拳击
header-img: img/post-bg-mma-6.jpg #拳击
header-img: img/post-bg-os-metro.jpg #地球网络连接图
header-img: img/post-bg-re-vs-ng2.jpg #冰与火之歌
header-img: img/post-bg-rwd.jpg #ipad和MAC
header-img: img/post-bg-swift.jpg #美女
header-img: img/post-bg-swift2.jpg #美女
header-img: img/post-bg-universe.jpg #宇宙黑洞
header-img: img/post-bg-unix-linux.jpg #Linux
header-img: img/post-bg-YesOrNo.jpg #支持和反对
header-img: img/post-sample-image.jpg #宇航员For Sale
header-img: img/tag-bg.jpg #模块化手机
header-img: img/tag-bg-o.jpg #模块背景
3、插入代码和高亮
普通代码高亮
如果你想要 Jekyll 提供更好的高亮效果,使用连续3个重音符并指明语言的环境来完成高亮。下面用尖号代替重音符作示意:
^^^python
a = 2 ** 3
print(a)
^^^
效果如下:
a = 2 ** 3
print(a)
带 Jekyll 语法的 HTML 代码
本来 Markdown 用来插入 HTML 代码是没有问题的,但是 Jekyll 语法内容直接在文中的任何地方都会被转换,所以也只能借助 Jekyll 语法来解决这一问题。比如,原本的变量:
{{ post.date }}
实质上在其左侧插入了{ % raw % },在其右侧插入了{ % endraw % }。注意,使用时花括号与百分号之间无空格,该段中为不使其转换,添加了空格。如果你有大段代码需要应用,只需要把它们分别加到整个块的两端即可。
4、插入视频
注:不要用<embed>
,因其需flash支持!
插入优酷视频
<iframe width="650" height="400" src="//player.youku.com/embed/XNDM4MDQ4Nzc0OA==" frameborder="0" allowfullscreen></iframe>
在优酷视频页面,点击“分享”—>“复制通用代码”(复制得到的代码直接使用无效),把上面的src=""
替换一下即可,其他不变。
插入爱奇异视频
<iframe src="//open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=61bf0954c478bf5c9bb227f2d5570f66&tvId=7793487800&accessToken=2.f22860a2479ad60d8da7697274de9346&appKey=3955c3425820435e86d0f4cdfe56f5e7&appId=1368&height=100%&width=100%" frameborder="0" allowfullscreen="true" width="650" height="400"></iframe>
在爱奇异视频页面,点击“分享”—>复制“通用代码”,把最后的width="100%" height="100%"
修改为“width="650" height="400"
,其他不变。
版权声明:本文由 Duter2016 在 2019年09月15日发表。本文采用CC BY-NC-SA 4.0许可协议,非商业转载请注明出处,不得用于商业目的。
文章题目及链接:《Github博文格式》