首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

这些优化技巧可以避免我们 JS 过多的使用 IF 语句

作者:Damian Ciplat 译者:前端小智 来源:dev 最近在重构代码时,我发现早期的代码使用太多的 if 语句,其程度是我从未见过的。...这就是为什么我认为分享这些简单的技巧是非常重要的,这些技巧可以帮助我们避免过多的使用 if 语句。...接下来会介绍6种方式来代替 if 的使用,这样做不是坚决不使用 if 偏执狂,而是换个方式思考我们的编码思路。 1....", })[breed]||'Im the default'; dogSwitch("border xxx") 5.作为数据的函数 我们知道JS函数是第一个类,所以使用我们可以代码分割成一个函数对象...OOP多态性最常见的用法是使用父类引用来引用子类对象。

3.3K10
您找到你想要的搜索结果了吗?
是的
没有找到

从Hexo迁移到Hugo-送漂亮的Hugo Theme主题

Hugo的安装和使用Hugo比Hexo速度更快,而且不用依赖一大堆东西,一个二进制文件可以搞定。...使用新的Hugo maupassant主题 最新版本的Hugo maupassant主题我已经Github上开源,大家可以clone使用使用很简单,只需要以下两步即可。...content/archives/index.md表示content/archives/目录下的index.md文件 这样Hugo就会自动生成/archives/index.html归档页面,通过类似...其他静态文件 有些不需要我们转化的静态文件,比如robots.txt、我们上传的附件等,这些不需要Hugo进行处理,可以直接放在static目录下,Hugo会原封不动的拷贝。...新的Hugo系统,我也想这么做,但是Hugo的permalink是不能配置html后缀的,即可你配置了,也只会生成如下的URL/year/month/day/title.html/还是一个目录,无法以

2.1K10

Hugo 跨版本升级

可以预期的是,随着使用时间越来越长,这两个站点的差异会越来越大,为了可维护性,必须将这两个站点使用Hugo 版本统一。..." ,"MD", "FEED" ] +page = [ "HTML" ,"MD" ] 分类和标签扁平化以及其他兼容处理 Hugo 升级之前,我使用的是这样的分类结构: topics: [ "知识点滴...举个例子,我原本有一个标签叫做 : Linux/Mac ,旧版本的 Hugo 的输出结果是这样: /public/tags/linux/mac/index.html 但是新版本变成了这样: /public...$tag) "/" "-") " " "-"}}.html" 至此,升级过程的主要问题就都讲完了,我们接下来聊聊性能提升和其他的话题。...很可惜 v0.50.3 版本之后,官方废弃了 hugo benchmark 这个命令,所以我们不能够和以往一样输出性能报告,不过直接使用站点生成时间来进行对比,也是一样的(站点实际构建时间)。

92310

Hugo 建站经验之谈

,就像我们 Linux 输入的命令一样。...非技术的同学,也可以找到符合自己需求的主题,不用写一行 HTML 代码,也能让自己生成自己的站点。...纯静态站点 Hugo 打包构建后输出的是一个纯静态的资源包,这样地好处就是你可以将你的站点部署在任何地方,比如使用 GitHub 免费的 Pages,又或者是随便放在 oss 源,没有维护服务器,数据库的烦恼...纯静态资源部署很便捷,以 Hugo 为例,他的路由适合文件目录相关的,我们的站点有中英文两个语言版本,开发时都放在一个项目中进行维护共享模板,构建部署时,会根据语言打成不同的资源包,分别发到不同的国内外...最后 以上便是笔者使用 Hugo 框架搭建公司 Nebula Graph 官网 的一些实践心得,希望给有快速建站需求的朋友提供一些思路和参考,我们的站点是基于已有主题二次开发,更多细节感兴趣的朋友也可以看看我们放在

98150

简单使用 Hugo 博客

Hugo支持Markdown、HTML、CSS、JavaScript等标准文件格式,并提供了多种主题、插件、模板等功能,使用户能够轻松地创建独特而具有吸引力的网站。...的环境,可以自己的任意目录下,创建自己的站点 hugo new site abing_blog 下载并应用主题 找到具体主题对应的 github 仓库,例如我下载的是 bootstrap4 下载仓库代码到.../"' 此时我们需要提交 public 目录下的内容到我们的 https://qingconglaixueit.github.io/ 仓库 初始化仓库 , 需要换成自己的 xxx.github.io...# 执行如下命令后,会在 博客 根目录下的 content/post 下生成具体的 md 文件,记得吧 md 的 draft 设置为 false hugo new post/xxx.md # 编辑这个.../"' # 此时 到 public 目录下提交代码即可 可以查看地址:https://qingconglaixueit.github.io/ 看看效果 再细节一点的以及 hugo 详细命令等内容可以查看

22320

Hugo 与 Hexo 的异同

我们知道, Hexo 中有两种分类方式——分类和标签,它们都是文章的 Front Matter 设置的,其中:categories 是具有顺序性和层次性的,即你可以通过它来实现树状结构的分类;tags... Hexo 可以通过站点配置文件 _config.yml 的 tag_map 来实现,但在 Hugo 没有这样的功能,那 Hugo 应该怎么办呢?...对于分区,我推荐直接使用小写英文命名,然后通过新建相应的 _index.md 并添加 title 以修正标题。当然,如果你要用中文也可以,但建议用简单的中文名。...还有一个是 index.md 的问题, Hugo 你必须在它的前面添加一个下划线,即 _index.md。...public 文件夹;与 hexo clean 类似的命令是 hugo --gc --cleanDestinationDir; Hugo 可以直接使用 hugo --minify 压缩 HTML

4.1K10

Hugo系列(4) - 从Hexo迁移至Hugo以及使用LoveIt主题的踩坑记录

但是对于v0.2.10版本的LoveIt主题,只是加入启动参数依然无法使用Valine评论功能,原因是评论功能的模板文件有问题,需要我们自己修改才能正常使用,如下: 把\themes\LoveIt\layouts...valine,然后填上从LeanCloud的应用得到的appId和appKey就可以用了。...做法也很简单: 站点根目录下创建的/layouts/_default/_markup/render-image.html 新创建的这个render-image.html文件里黏贴下面的代码即可: 1...这个做法属于一刀切,后面考虑到依然需要输出md文件,于是想到了另一个解决方法,那就是把某些GitHub Pages解析有问题的md文件给干掉,让这些引入了“问题”代码块的md文件不生成即可。....nojekyll文件会告知GitHub Pages不使用jekyll来渲染静态站点,这样就不会和md文件里的某些代码冲突而build失败。

1.5K20

如何在Ubuntu上安装和使用Hugo

/content/.gitkeep 我们还希望确保我们渲染的网站内容不会添加到源代码管理。实际的HTML,JavaScript和CSS资产应该在每次部署时新生成,而不是保存在源代码控制本身。...Hugo的内容使用易于使用的标记语言编写。页面元数据每个页面的特殊部分中提供,称为“前端内容”,使用与主配置文件相同的配置语法。...为了让Hugo能够从我们的Markdown页面正确生成HTML我们需要创建以.md扩展名结尾的文件。 创建关于页面 将从主页链接到的页面以及页面所需的相对路径很大程度上取决于您的主题。...由于我们配置文件设置了newContentEditor选项,因此应该使用首选编辑器自动打开该文件。...Hugo将在生成页面时自动创建所需的任何主要目录: hugo new post/My-First-Post.md 如果我们Markdown文件名中使用破折号,它们将被转换为自动填充标题的空格: +++

6.4K10

Hugowindows安装教程

我们content下创建一个posts文件夹,专门放发布文章,然后新建一个second.md文件。...hugo new xxx.md 写入内容 2.3 启动服务 站点目录下,hugo serve启动内置服务预览博客。...哈哈哈,我图片是展示访问posts/second.md这个文件啦 2.4 生成静态网站 前面都是hugo预览,接下来我们要对这些主题和文章生成静态网站啦!...直接使用hugo指令 public文件夹里面就是一个静态网站代码 如果你有服务器,直接把public里面的内容复制到服务器站点根目录就可以啦。 结语 好了。...hugowindows的安装,并在本地使用就介绍到这里。实际上这只是起步,大家建博客是希望可以放到互联网上,给大家看。所以下一篇我们来讲述下,怎么创建一个“真正”的博客。

39820

Hugo + GitHub Pages 搭建自己的网站

增加列表页 content/posts 目录下新增一个文件:_index.md,内容如下: --- title: "文章列表" --- 这时(hugo serve 会自动编译)点击 Posts,页面如下...index.html 文件,测试是否正常。...小细节:避免 Jekyll 起作用,可以仓库根目录放一个空文件文件名:.nojekyll 部署我们的站点 这里有两种做法。...1)方法一 上面 Hugo 项目的代码直接推送到 GitHub Pages 这个仓库通过 Hugo 生成静态页面时,指定目标目录为 docs: $ hugo -d docs 这样 docs 下面的内容就是静态页面...因此每次 Hugo 站点项目写完文章后,需要生成静态内容,拷贝到 GitHub Pages 仓库,提交代码等。把这些步骤写成一个脚本,瞬间变简单了。 #!

1.3K30

如何使用 Hugo 搭建个人博客?

后续如果我的主题有更新,你都可以直接使用如下命令来更新 git submodule update --remote hugo-theme-den主题会提供了实例配置与初始页面,开始使用主题时可以将其...cp -rf themes/hugo-theme-den/exampleSite/* ./ 初始化主题基础配置后,我们可以 config.toml 文件中进行站点细节配置,具体配置项参考各主题说明文档...发布新文章 通过 hugo new 命令可以 content/zh 目录下新建文章 hugo new posts/first-post.md 模板的内容,可以自行修改 archetypes/default.md...,可以直接将关键配置以参数形式指定 pagefind --source public --bundle-dir pagefind 也可以将配置写入配置文件项目根目录创建 pagefind.yml...hugo 即可编译最终的 html 文件到 public (记得清空此前的 public 目录,以免有缓存残留) hugo 然后将 public 目录直接打包上传到服务器的某个目录下,这个目录自行定义即可

8110

利用基于Go Lang的Hugo配合nginx来打造属于自己的纯静态博客系统

借助Go语言我们 可以用同步的方式写出高并发的服务端软件,同时,Go语言也是云原生第一语言,Docker,Kubernetes等等著名的项目都是使用Go语言实现的。     ...而纯静态页面则没有这个烦恼,如果我们只需要一个简单的站点,一些简单的功能和页面,比如博客,我们只想以极简的方式用markdown语法写下文字或者代码,让服务器访问纯静态页面,这就是静态网站生成器可以提供给我们的好处...,解压之后配置一下环境变量也可以 装完以后,命令行内输入 hugo version 打印出版本号即表示hugo安装成功 命令行输入命令 hugo new site hugo_blog...我们来创建站点的第一篇文章 输入命令 hugo new one.md hugocontent下创建one.md文件我们编写一些文件内容: --- date: "2019-05-23"...title: "第一篇文章" --- ### 你好啊 123123123 ``` print('hello world') ``` 然后命令行输入 hugo server 来热启动项目

60420

Hugo搭建博客(一)— 基本设置

但此时我们的新站点无法启动,需要安装主题。 2.2 安装主题 可以从官方主题库 选择,里面有上百种主题。我使用的主题是LoveIt ,感觉风格简约,并且功能齐全。...2.6 构建网站 项目根目录下直接使用 hugo 命令,会生成 public 目录,该目录下都是关于我们的 markdown 编译完成的 html 静态页面。...或者使用站点根目录(/)引用图片可以正常加载显示,但是无法 Typora 编辑器显示图片。 有以下几种方法解决。...可以设置uglyURLs 来解决,但是这样url就会以.html结尾,可以参考博文 。个人不是很喜欢,因此使用了下面这种方法。...步骤: 1.新建了一个about.md文件post同级目录下。 1 hugo new about.md 2.config.toml增加配置。

2.9K31

玩转开源 |Hugo使用实践

并新建 index.md;并在 conten/menu/index.md 文件配置上菜单相关配置。...路径"hugo-book-9\layouts\partials\docs\inject"下,你会发现9个空的HTML文件。...这些文件提供了一个自由扩展文档主题的场地,让你通过HTML的方式进行自定义。 可以根据特定需求,特定页面的布局位置添加自定义的内容或功能。...将以下代码,复制到 menu-before.html可以轻松实现这个需求。示例涉及到 Hugo模板语法,受限于本文篇幅与重点暂且不详细说明了,后续有机会再另行解读。...它的实用性绝不仅限于示例添加简单功能,更是涉及到各种典型场景。 举例来说,可以 标签嵌入网站流量统计代码

54321
领券