与盖茨比如何创建一个可搜索的日志

你所有的开发人员做笔记的需求

记笔记是记忆最关键的事情在我们的生活中。有多少次你从事一个项目,然后三个月后需要在代码中回来,和你花了时间来备份速度?如果你用了几分钟写下一些文档,你可以开门见山。

到处就我个人而言,我把我的笔记,笔记本,多数情况下,还在这里在这个博客上。很多次当我完成一个大型的、困难的特点,我喜欢博客关键元素的所以我可以回来后,找出我做我所做的。另外,它可能会帮助别人。然而,有很多事情我每天都学习,悄悄溜走。我不断学习和重新学习他们的效率低下。

我最近想办法快速记下我每天学习,或者我想记住教训。但这是不够的,我还需要搜索这些日志,所以我可以找到我在找什么。这正是我今天要向您展示如何构建。这个项目中,前后,也许花了我一个半小时。

盖茨比

这个项目是使用盖茨比,广受欢迎的前端框架创建静态网站。我要跳过所有推销东西就跳进的代码,但是如果你想后退一步,我写了一个长博文为何我如此爱盖茨比。简而言之:棒如果你知道反应,可能值得学习无论如何如果你需要一个静态网站。

步骤1:创建一个新的盖茨比网站使用美丽的“茱莉亚”模板

假设你有盖茨比CLI工作,这将简化但漂亮的安排茱莉亚模板:

盖茨比新<站点名> https://github.com/niklasmtj/gatsby-starter-julia

打开gatsby-config.js和交换你的细节”茱莉亚Doe”siteMeta。你的一半。

步骤2:添加日志记录

现在我们想添加一些功能。在内容目录,添加一个文件或二十减价。但是你喜欢巢。你会按照这个格式:

推荐- - - - - -
标题:“任何你想要的标题”
日期:“2019-05-010”
草案:假
路径:“/ logs / some-slug-for-the-file”
标签:测试、文档
推荐- - - - - -

#星期一,2019年5月6日
*添加文档....

请注意,路径对于每个文件,需要独特的。我叫按日期(每星期得到一个文件),但显然你可以做任何你喜欢的。

步骤2:遵循减价的盖茨比文档创建页面

我可以重申,但盖茨比文档本身非常简单和容易理解。你会安装所需的插件,配置它们gatsby-config.js,你的帖子应该如何创建一个模板,并设置gatsby-node.js从你的减价文件构建页面。

从别的地方在互联网上偷小费:如果你的头到localhost页面不需要你任何地方(我更喜欢localhost: 8000 /垃圾),您可以看到所有可用的链接页面。这是一个快速的方法来检查盖茨比创造了所有适当的减价页面。

保持它的清洁

我学会了工作在这个项目中,您可以指定多个文件夹被盖茨比的扫描文件系统插件:

{
解决:“gatsby-source-filesystem”,
选择:{
名称:“图像”,
路径:“$ {__dirname} / src /图像”,
},
},
{
解决:“gatsby-source-filesystem”,
选择:{
名称:“markdown-pages”,
路径:“$ {__dirname} / src /内容”,
},
},

如果您已经在使用没有问题gatsby-source-filesystem例如,读你的图像文件。我还测试了嵌套,盖茨比将抓住任何东西在你的内容文件夹递归,所以你可以继续并组织任何一种你喜欢的方式。

好时光!如果你把转移到盖茨比文档,你现在应该有一个完整的日志系统。

步骤3:添加搜索

现在有趣的部分。我们将添加搜索我们的日志使用的能力盖茨比lunr弹性搜索插件。

配置

首先,纱添加@gatsby-contrib / gatsby-plugin-elasticlunr-search,然后我们会增加gatsby-config.js:

{
解决:“@gatsby-contrib / gatsby-plugin-elasticlunr-search ',
选择:{
/ /字段索引
字段:[“标题”,“标签”,“html”),
解析器:{
MarkdownRemark: {
标题:节点= > node.frontmatter.title,
标签:节点= > node.frontmatter.tags,
= > node.frontmatter.path路径:节点,
html:节点= > node.internal.content,
},
},
},
},

请注意,我增加了一个字段不包含lunr文档:html。我们需要的全文搜索日志,而不是通过标签搜索。

添加一个搜索栏

显然你可以去任何地方。我把我在指数下我的名字。

搜索栏组件:

进口的反应从“反应”
从“盖茨比”进口{graphql, StaticQuery}
从“。/进口搜索搜索”

出口违约()= > {
回报(
< StaticQuery
查询= {graphql '
查询SearchIndexQuery {
siteSearchIndex {
指数
}
}
'}
渲染= = >{数据(
<搜索searchIndex = {data.siteSearchIndex.index} / >
)}
/ >
)
}

这里没什么,我们只是抓住弹性的搜索索引搜索数据。

搜索组件,直接从lunr基本上复制文档:

进口的反应,{组件}从“反应”
从“elasticlunr”进口{指数}
从“盖茨比”进口{链接}
从“@emotion /进口样式风格”出口的默认类搜索扩展组件{
状态= {
查询:' ',
结果:[]
}

呈现(){
回报(
< div >
< input type = " text " value = {this.state。查询}onChange = {。搜索}/ >
< ul >
{this.state.results。地图(页面= > (
<李关键= {page.id} >
<链接= {" + page.path} > {page.title} < /链接>
{':' + page.tags}
李< / >
)}
< / ul >
< / div >
)
}

getOrCreateIndex = () = > {
返回this.index
吗?this.index
:/ /创建一个弹性lunr指数和水合物graphql查询结果
Index.load (this.props.searchIndex)
}

搜索= evt = > {
const查询= evt.target.value
this.index= this.getOrCreateIndex()
this.setState ({
查询,
/ /查询的索引与搜索字符串id的[]
结果:this.index
.search(查询,{扩大:真})
/ /地图/每个ID和返回完整的文档
. map (({ref}) = > {
返回this.index.documentStore.getDoc (ref)
}),
})
}
}

构建搜索索引时,根据部分字符串,获取结果水合物这些结果基于该指数的回报,然后地图显示。

这是认真的。当盖茨比减价页面将建构建运行和搜索索引你第一次尝试搜索。

步骤4:添加安全

我不会给任何国家秘密或env变量在这些日志,但是我宁愿没有潜在的雇主偶然发现,主要是因为我想要自由谈论斗争或非常清楚我不知道什么。如果我有审查自己,它会影响我的质量记录。

同时,我不能被打扰一个登录或者太花哨。所以我选择了最愚蠢、最宽松、简单的安全我可以想出:一个基本的localStorage令牌。如果你有它,你看到日志,如果没有,太糟糕了。这是这是如何工作的。

在landing-bio.js和其他任何地方我想保护:

const isBrowser = () = > typeof窗口! = =“定义”
const isAuthenticated = isBrowser () & & window.localStorage.getItem(“身份验证”);[…]{isAuthenticated ?< SearchBar / >: < div >你不是琥珀色,所以你不要看她的日志。< / div >}

我不会使用这个真的敏感信息,但它对一点点的平和的心态很好,我的同事不会偷偷摸摸我的个人日志。