Github博文格式

博客书写格式参考本文

作者: Duter2016 | 2019-09-15 | 阅读
「编辑」 「本文源码」

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博文格式》




  相关文章:

「游客及非Github用户留言」:

「Github登录用户留言」:

TOP