Fastpages Notebook 博客示例
fastai的项目fastpages,可以直接将 Jupyter notebooks以博客发布
简介
以下内容演示fastpages处理notebook的能力
在你的fastpages
代码仓库中,将jupyter notebook保存到_notebooks
文件夹并提交到master分支,就可以借助GitHub的actions自己生成Jekyll博客啦!
Front matter模板设置
Jupyter Notebook第一个单元格,或markdown文件的最前面需要配置metadata。示例如下:
# "My Title"
> "Awesome summary"
- toc:true- branch: master- badges: true- comments: true
- author: Hamel Husain & Jeremy Howard
- categories: [fastpages, jupyter]
-
toc: true
自动生成目录 -
badges: true
自动配置带徽章的GitHub、ninder和Google Colab链接 -
comments: true
支持github issue评论,借助utterances实现
如果标题中包含特殊字符(如冒号),可以用双引号括起来。关于Front matter的更多详情参考front matter section的README文件。
在单元格上方加#hide
,可以在博客中同时隐藏输入和输出
在单元格上方加#hide_input
在博客中仅隐藏输入
在单元格上方加#collapse-hide
可以实现默认隐藏内容的控件,点击按钮可以显示:
#collapse-hide
import pandas as pd
import altair as alt
在单元格上方加#collapse-show
可以实现默认显示内容的控件,点击按钮可以隐藏:
#collapse-show
cars = 'https://vega.github.io/vega-datasets/data/cars.json'
movies = 'https://vega.github.io/vega-datasets/data/movies.json'
sp500 = 'https://vega.github.io/vega-datasets/data/sp500.csv'
stocks = 'https://vega.github.io/vega-datasets/data/stocks.csv'
flights = 'https://vega.github.io/vega-datasets/data/flights-5k.json'
与Altair交互
Altair支持交互图形,下面示例取自项目,都在这个notebook里面。
# single-value selection over [Major_Genre, MPAA_Rating] pairs
# use specific hard-wired values as the initial selected values
selection = alt.selection_single(
name='Select',
fields=['Major_Genre', 'MPAA_Rating'],
init={'Major_Genre': 'Drama', 'MPAA_Rating': 'R'},
bind={'Major_Genre': alt.binding_select(options=genres), 'MPAA_Rating': alt.binding_radio(options=mpaa)}
)
# scatter plot, modify opacity based on selection
alt.Chart(movies).mark_circle().add_selection(
selection
).encode(
x='Rotten_Tomatoes_Rating:Q',
y='IMDB_Rating:Q',
tooltip='Title:N',
opacity=alt.condition(selection, alt.value(0.75), alt.value(0.05))
)
alt.Chart(movies).mark_circle().add_selection(
alt.selection_interval(bind='scales', encodings=['x'])
).encode(
x='Rotten_Tomatoes_Rating:Q',
y=alt.Y('IMDB_Rating:Q', axis=alt.Axis(minExtent=30)), # use min extent to stabilize axis title placement
tooltip=['Title:N', 'Release_Date:N', 'IMDB_Rating:Q', 'Rotten_Tomatoes_Rating:Q']
).properties(
width=600,
height=400
)
# select a point for which to provide details-on-demand
label = alt.selection_single(
encodings=['x'], # limit selection to x-axis value
on='mouseover', # select on mouseover events
nearest=True, # select data point nearest the cursor
empty='none' # empty selection includes no data points
)
# define our base line chart of stock prices
base = alt.Chart().mark_line().encode(
alt.X('date:T'),
alt.Y('price:Q', scale=alt.Scale(type='log')),
alt.Color('symbol:N')
)
alt.layer(
base, # base line chart
# add a rule mark to serve as a guide line
alt.Chart().mark_rule(color='#aaa').encode(
x='date:T'
).transform_filter(label),
# add circle marks for selected time points, hide unselected points
base.mark_circle().encode(
opacity=alt.condition(label, alt.value(1), alt.value(0))
).add_selection(label),
# add white stroked text to provide a legible background for labels
base.mark_text(align='left', dx=5, dy=-5, stroke='white', strokeWidth=2).encode(
text='price:Q'
).transform_filter(label),
# add text labels for stock prices
base.mark_text(align='left', dx=5, dy=-5).encode(
text='price:Q'
).transform_filter(label),
data=stocks
).properties(
width=700,
height=400
)
movies = 'https://vega.github.io/vega-datasets/data/movies.json'
df = pd.read_json(movies)
# display table with pandas
df[['Title', 'Worldwide_Gross',
'Production_Budget', 'Distributor', 'MPAA_Rating', 'IMDB_Rating', 'Rotten_Tomatoes_Rating']].head()
Tweet卡片
输入 > twitter: https://twitter.com/jakevdp/status/1204765621767901185?s=20
渲染推文:
Altair 4.0 is released! https://t.co/PCyrIOTcvv
— Jake VanderPlas (@jakevdp) December 11, 2019
Try it with:
pip install -U altair
The full list of changes is at https://t.co/roXmzcsT58 ...read on for some highlights. pic.twitter.com/vWJ0ZveKbZ
提示文字(Boxes / Callouts )
输入 > Warning: There will be no second warning!
效果:
输入 > Important: Pay attention! It's important.
效果:
输入 > Tip: This is my tip.
效果:
输入 > Note: Take note of this.
效果:
输入 > Note: A doc link to [an example website: fast.ai](https://www.fast.ai/) should also work fine.
效果:
尾注
可以在notebook里加尾注,但不是用markdown语法实现,具体语法请看说明。
For example, here is a footnote {% fn 1 %}.
And another {% fn 2 %}
{{ 'This is the footnote.' | fndetail: 1 }}
{{ 'This is the other footnote. You can even have a [link](www.github.com)!' | fndetail: 2 }}
For example, here is a footnote 1.
And another 2
1. This is the footnote.↩