手把手教你用React实现一个简单的个人博客

作者: admin 分类: 娱乐 发布时间: 2019-11-25 10:01

  今朝一个页面滚动到必然区域后,点击跳转后,页面固然跳转了,然则会停顿正在滚动的区域,不会自愿回到页面顶部。

  项目中多次需求用到从Github Issues哀求来的数据,由于之前就明晰Redux这个东西的存正在,固然有点牛鼎烹鸡,为了练习如故将它用于项目标形态管束,只需求哀求一次数据即可。

  大略的来说,每一次的修正形态都需求触发action,然而原来项目中我现正在还没用到修正数据2333。。。

  React是基于组件修筑的,以是正在搭筑页面的入手下手,咱们要先思考一下咱们需求少许什么样的组件,这些组件之间有什么联系,哪些组件是能够复用的等等等。

  也便是后端会返回分好页的数据,含有暗示总数据量的total、今朝页数的page,以及属于该页的数据data。

  然而,我这个页面只是个静态页面,数据是放正在Github Issues上的通过API获取的。(Github Issues的分页貌似不行自界说数目...),以是没法直接返回分好的数据,以是只可正在前端强行分页~

  前端陪衬的逻辑(有点蠢):将数据存放到一个数组中,遵照今朝页数和每页显示条数来计较该显示的索引值,取出相应的数据即可。

  正在Github Issues中,可认为一个issue增加许多个label,我将这些关于博客实质有效的label分为三类,永别用分歧色彩来暗示。

  这里表明一下,label创筑后会随机天生一个id,固然说id是不反复的,然则作品的种别、标签会无间正在增长,当新加一个label时,顺序中不妨也要实行对应的修正,看成区别label的模范不妨就不太相宜,以是我采用色彩来区别它们。

  正在这里的思绪要紧便是:遍历悉数issues,然后再遍历每个issue的labels,寻得属于种别的label,然后计数。

  原来这里是念通过字体巨细来再现每个标签的权重,厥后感触不妨关于我来说,片刻唯有那几个标签会很频仍,其它标签不妨会很少,用字体巨细来区别就没有什么意旨,如故改成排序的办法。

  作品实质是通过markdown陪衬后插入dom中的,因为React不提议通过document.getElementById的花样获取dom元素,以是只可念法子通过字符串成婚的办法获取作品的各个章节题目。

  云云能够获取到悉数的#的字符串,也便是markdown中的题目,result[1].length暗示有几个#,原来便是几级题目的道理,title便是题目实质了。

  这里又有一个题目,原来通过a target= /的办法能够达成点击跳转,然则现正在陪衬出来的html中关于每一个题目没有绝无仅有的标识。。秒速快3玩法

  首页陪衬。现正在打包完的js文献如故太大了,导致首页陪衬太慢,这个是接下来使命的重心,也知道过合于这方面的优化:

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!