在这篇文章中,我们将构建一个简单的CLI,允许用户生成HTML页面。我们首先要生成一个标准的空白页面,然后让用户输入参数,比如文件名和标题,先通过选项,然后通过提示问题让用户输入参数。 ?...将参数传递给代码 现在我们生产的文件名和HTML中的 title 标签内容是写死的,我们应该可以将文件名和标题作为参数传递给CLI。...传递的参数在数组的最后两项,我们只需要使用数组的 slice(2) 方法即可拿到。我们决定第一个输入参数是文件名(不带HTML扩展名),第二个参数将是HTML页面的标题。...与其一个接一个地写参数,我们可以构建我们的CLI,让用户输入类似于这样的文件名和/或标题。...为了生成我们的HTML页面,我们首先要询问文件名,然后询问标题。如果用户没有输入任何内容,我们将获得默认值。我们向用户显示默认值是什么,以便在默认值正确的情况下可以跳过该问题。 #!
而京东的商品评论列表为了用户体验,而且也不需要SEO优化,所以才用的是客户端渲染 简单的判断内容为服务端渲染还是客户端渲染 最简单的方法就是: 点击访问一个页面(我们这里以京东为例) 随便访问一个商品页...,然后复制商品标题 然后鼠标右击点击查看网页源代码 在源代码页按 Ctrl + f ,接着把复制的内容粘贴进去 能搜到就是 服务端渲染,否则的话,就是客户端渲染。...利用 art-template 模板引擎 安装: 在想要安装的目录下打开命令行工具 输入 npm install art-template, 然后它会自动生成 node_modules 目录(前提,系统已经安装了...wwwDir 目录列表中的文件名和目录名 // fs.readdir // 2.如何将得到的文件名和目录名替换到 template.html 中 // 2.1 在 template.html 中需要替换的位置预留一个特殊的标记...// 2.2 根据 files 生成需要的 HTML 内容 // 模板引擎 if (url !
庆幸的是,Next.js 允许我们使用 Markdown 作为文章的数据源,基于文件名生成动态路由,并且实现文件内容的 HTML 静态化。...要将 MD 文档格式化成网页的形式,我们还需要安装 remark 和 remark-html 这两个npm 插件,安装命令如下: npm i front-matter remark remark-html...${fileExt}`) .map((fn) => path.basename(fn, path.extname(fn))); } 获取到文件名数组后,我们需要解析 MD 的具体内容,比如文件的标题...,以更友好的形式展现,我们在 pages/articles/[id].js 里编写JSX的相关代码,将文章内容嵌套在上节组件模板内,示例代码如下: import Layout from '../.....: html }} /> ); } 最后我们需要重启 Next.js 服务,一切正常的话,你会发现所有的 MD 文档可以同过 /articles/文件名的路径在浏览器上查看
--图片-->,一开始的URL是图片的本地路径位置,然后注释的图片是ID,其中ID是随机生成,作用在上传图片完成代换。输入后台上传代码为(本地文件)和图片文件。...新建 用户在输入新建文件标题后新建文件。文件名为用户输入的标题,去掉不能做文件名的字符。如果存在相同的文件名,那么加随机数。 如果用户选择Jekyll,那么自动在输入文件名加上日期。...高亮 使用标题和代码、图片等,高亮。 用户可以设置不同的高亮。 自动修改标题字体大小。 代码可以根据代码高亮。...用户可以通过分享按钮,分享仓库,可以分享仓库文件,可以分享仓库做出Html、pdf。 用户后台分享,如果分享Html或pdf,后台生成。 折叠 用户可以折叠代码和标题对于的文本。...转换的Html可以使用用户模板,用户可以设置全局模板,可以设置仓库模板,设置放在layout文件夹。 用户可以设置转换规则。
庆幸的是,Next.js 允许我们使用 Markdown 作为文章的数据源,基于文件名生成动态路由,并且实现文件内容的 HTML 静态化。...要将 MD 文档格式化成网页的形式,我们还需要安装 remark 和 remark-html 这两个npm 插件,安装命令如下: npm i front-matter remark remark-html...${fileExt}`) .map((fn) => path.basename(fn, path.extname(fn))); } 获取到文件名数组后,我们需要解析 MD 的具体内容,比如文件的标题...,以更友好的形式展现,我们在 pages/articles/[id].js 里编写JSX的相关代码,将文章内容嵌套在上节组件模板内,示例代码如下: import Layout from '../.....方法中的参数对应),在页面构建时生成对应的页面路由,你可以参照第一部分基于MD文档生成动态路由这部分内容,具体的逻辑你可以考虑下怎么实现,这里就不再介绍了; 三、创建网站导航 为了让用户更方便浏览我们的博客网站
注:部署到Coding上需要先按照插件,在cmd中输入 npm install hexo-deployer-git --save 高级文章设置 Hexo new 的分类 Hexo对生成文章有三种分类...page:指生成一个页面,一般用来做标签和关于页 draft:指草稿,我个人很少用。...文档模板修改 当我们使用 hexo new [layout] 生成文章的生成的文件都是有默认模板的。...那么对每个文件都要加上相应的代码,那么不如修改一下模板文件,让new文章的时候就能加上相应的代码,岂不省事。...内置标签 标签插件和 Front-matter 中的标签不同,它们是用于在文章中快速插入特定内容的插件。
首先,我们需要写页面的模板,就是jsp页面,我们生成后的html是基于该模板的,说白了就是用查询好的数据去填充对应的地方,如下我写的一个简单模板jsp 这个jsp页面我命名为articleTemplate.jsp...编写对应的生成html的servlet或者controller,因为每个功能对应的模板和需要展示的数据都不一样,所以一般有多少个jsp页面就需要写多少个servlet 首先创建一个 JspStatic...,并放到request里面 请注意TODO描述 最后调用create方式生成页面,参数包括了封装了数据的request,需要生成的文件名和路径,以及需要使用的模板等 具体生成html的代码如下...id=100 不是直接输入html对应路径,控制台打出 直接跳转 证明没有再重新去生成,并且明显感觉速度要快很多, 如果生成页面时需要查找的数据更多,则效果更明显 并且上面的时间戳都一样,表示是同一个页面...直接读取生成的静态html列表文件来生成列表, 这个挺好的,不用去查询数据库, 文件的操作会更好 【推荐】 虽说静态化有很多好处,但是也要结合实际情况,一天没有几个人访问的网站我觉得就没必要了, 主要适用于高并发
所以,github Pages可以被认为是用户编写的、托管在github上的静态网页。 ? github提供模板,允许站内生成网页,但也允许用户自己编写网页,然后上传。...文章就是普通的文本文件,文件名假定为2012-08-25-hello-world.html。(注意,文件名必须为”年-月-日-文章标题.后缀名”的格式。...layout:default”,表示该文章的模板使用_layouts目录下的default.html文件;”title: 你好,世界”,表示该文章的标题是”你好,世界”,如果不设置这个值,默认使用嵌入文件名的标题...有了文章以后,还需要有一个首页。 回到根目录,创建一个index.html文件,填入以下内容。 ...文件头表示,首页使用default模板,标题为”我的Blog”。
您可能只需要生成静态文件,并知道这些静态文件在哪里,并将它们移动到您的托管位置。 如果您有make命令,请输入以下命令以生成您的网站: ? 如果你没有make但是有python3,输入这个命令: ?...例如,查看主页的内容文件。在其内容标题中,即具有键值对的顶部的HTML注释中,它定义了一个名为title的新参数并且覆盖了副标题参数。 稍后我们将讨论占位符和内容标题的语法。这很简单。...它包含HTML代码和占位符,用于显示博客文章的标题,发布日期和作者。 此模板必须与页面布局模板组合才能创建最终的独立模板。...为此,我们用页面布局模板中的HTML代码替换页面布局模板中的{{content}}占位符以获取最终的独立模板。 这是通过在代码中进一步调用render()来完成的。...每个内容文件可以以包含标题的一个或多个连续HTML注释开始。 每个头文件都有以下语法: ? 在标记之前,之后和周围的任何空白都将被忽略。 以下是一些示例标题: ? 它会在每个内容文件的顶部查找标题。
而我们为了编辑文章方便,为了通过文件名就知道这是哪篇文章,通常是把.md文件命名成中文的甚至是文章的标题,那么生成HTML文件时也就是中文的文件名了。...(1)修改生成HTML时的命名策略 我们从Hexo是基于Node.js的,Hexo生成HTML文件这句话的到启发,Hexo肯定会获取文件夹下的所有.md文件生成HTML文件,命名格式xxx.md-->xxx.html...存在的问题 这种方法解决了上面那个方法存在的问题,即每次执行`node rename.js`只要原文件名不变,生成的新文件名不变。但是需要限制文件名不能变,否则新文件名还是会变。...,推荐第二种 (4)修改文件生成规则 以上两种方式都需要我们来写代码,而且要手动执行 node rename.js 对于这么懒的我来说很不方便,有没有更好的办法?...存在的问题 需要手动写文件的名字,且要保证唯一,但是比较方便 总结 推荐使用第3和第4种,第3种主要就是解决每次执行hexo g后生成的HTML文件名不变(前提是.md文件名不变),但不要忘了执行 node
excel 文件夹名称 Y 轴的标题 图的标题 横轴的数据(第几列做横轴) 纵轴的数据(第几列做纵轴) 代码: https://github.com/AndersonHJB/AIYC_DATA/tree...从文本文件中生成词云 需要先安装 wordcloud,jieba pip install wordcloud jieba 词云是最近数据分析报告中非常常见的数据表现形式了,它会从一段文字中抽取出高频的词汇并且以图片的形式将它们展示出来...# @Last Modified time: 2021-09-15 23:12:34 from bs4 import BeautifulSoup # 输入参数为要分析的 html 文件名,返回值为对应的...,源代码文件我此片段最后会放出来。...如果是网页的话可以首先保存到本地,提取文本,之后就可以进行代码替换来生成了。(对于网页文件,需要自行提取文本咯,实在不会就把网页的文件的内容,复制出来。保存成 .txt 格式文件。
所以,github Pages可以被认为是用户编写的、托管在github上的静态网页。 ? github提供模板,允许站内生成网页,但也允许用户自己编写网页,然后上传。...文章就是普通的文本文件,文件名假定为2012-08-25-hello-world.html。(注意,文件名必须为"年-月-日-文章标题.后缀名"的格式。...layout:default",表示该文章的模板使用_layouts目录下的default.html文件;"title: 你好,世界",表示该文章的标题是"你好,世界",如果不设置这个值,默认使用嵌入文件名的标题...有了文章以后,还需要有一个首页。 回到根目录,创建一个index.html文件,填入以下内容。 ...文件头表示,首页使用default模板,标题为"我的Blog"。
易于维护和修改: Markdown 的语法相对简单,文本文件也容易备份和管理,可以在不同的编辑器和平台上进行修改。...是生成的Word文件名。...,并在命令行中使用pandoc转换Markdown文档时指定LUA脚本文件,就可以生成包含目录的HTML文件了。...总之,Markdown具有广泛的应用场景,特别是在网页制作方面。 Pandoc模板 简单的Pandoc模板如下,只需要导出一份标准模板而后自行修改即可,默认字段的格式自动生成为目标格式。...利用这一点,可以创建一个易于复用的标准模板,便于统一每一份文稿的格式。 图片 如果想获得叶子的Pandoc模板, 只需要在公众号输入 叶子的Pandoc模板 即可自动获得.
这个模型将允许我们在数据库中存储图片的标题和相应的图片文件,并且可以通过Django的ORM(对象关系映射)进行管理和操作。...在这里,我们希望显示图片的标题和对应的图片文件。...return render(request, "display.html", context): 最后一行代码调用了render函数,它接收了三个参数:request对象、要渲染的HTML模板文件名(在这里是...该函数将使用指定的模板和上下文数据渲染HTML页面,并将渲染后的页面作为HTTP响应返回给用户的浏览器。在display.html 里面渲染页面代码指定了表单对应的模型是 Image。这意味着表单将基于 Image 模型生成字段。
脚本内容如下:这里的js文件和json文件需要手动格式化一下,我这里全部写在了一行,没有做换行和空格处理。....vuepress/templates 存储 HTML 模板文件。 .vuepress/templates/dev.html 用于开发环境的 HTML 模板文件。....vuepress/templates/ssr.html 构建时基于 Vue SSR 的 HTML 模板文件。...注意:当你想要去自定义 templates/ssr.html 或 templates/dev.html 时,最好基于 默认的模板文件 来修改,否则可能会导致构建出错。...当用户通过滚动查看页面的不同部分时,嵌套的标题链接和 URL 中的 Hash 值会实时更新,这个行为可以通过以下的配置来禁用:(一般用默认的就可以,不做修改。)
因此如果需要对第三方仓库做相应的扩展则fork该第三方主题仓库(在自己账号下生成一个同名的仓库),随后git clone自己账号下的仓库url,从而可对主题进行自定义魔改 但基于这种场景则会出现...,随后正常commit、push(可通过对父仓库设定分支用于不同的代码范围版本管理)(基于这种操作,子仓库内容管理衍生为父仓库文件管理概念,与原有的子仓库无关) hexo自定义扩展仓库管理 fork...在创建者三种不同类型的文件时,它们将会被保存到不同的路径;而自定义的其他布局和 post 相同,都将储存到 source/_posts 文件夹。... Hexo 默认以标题做为文件名称,可编辑 new_post_name 参数来改变默认的文件名称,日期参数配置参考 变量 描述 :title 标题(小写,空格将会被替换为短杠) :year...、网站资源发布) hexo deploy指令指定的是将public文件夹下生成的资源文件发布到指定的分支,针对源项目可设定不同的分支用于保存源文件、主题同步等信息,以适配在不同的设备进行编辑操作
CSS 元素选择器 app-heroes 用来在父组件的模板中匹配 HTML 元素的名称,以识别出该组件。...所以,只要把 元素添加到 AppComponent 的模板文件(app.component.html)中就可以了,就放在标题下方。...显示 hero 对象 修改模板中的绑定,以显示英雄的名字,并在详情中显示 id 和 name,就像这样: heroes.component.html (HeroesComponent 的模板) ...编辑英雄 用户应该能在一个 文本输入框(textbox)中编辑英雄的名字。 当用户输入时,这个输入框应该能同时显示和修改英雄的 name 属性。...AppModule Angular 需要知道如何把应用程序的各个部分组合到一起,以及该应用需要哪些其它文件和库。 这些信息被称为元数据(metadata)。
以前的博客是使用Jekyll托管在github上,后来用着越来越不方便,比如没有自动生成post,不能一键部署,文件结构和配置也是比较繁琐,更重要的是有时候用markdown写一篇文章,生成的静态文件很乱...现在下决心换成了hexo Nodejs安装 因为hexo是基于nodejs的应用,所以要先安装nodejs才可以。我这里以ubuntu为例,因为我自己一直在使用ubuntu。...scaffolds ├── source └── themes 其中_config.yml是配置站点的文件,public是hexo生成的静态站点文件夹,scaffolds是模板文件夹,source是存在用户资源的文件夹...' 然后就会在sources/_posts生成一篇文件名为github-page-with-hexo.md的markdown文件。...编辑该文件就可以写博客了。这里有一些Front-matter需要介绍,可以配置文章使用的模板、所属的分类和tag等。
由于这段时间比较轻松,于是想到很多的企业网站,新闻网站需要将页面静态化,于是写了个封装类来实现静态文件的生成,思路比较简单,但未完善,网友可根据自己的思路将此类扩展,运用了简单工厂模式(本来刚开始看设计模式... 28 protected abstract bool WriteFile(); 29 /// 30 /// 不同模块的文件名称...,接下来看看其中一个子类的实现(该子类是用于所有单页,如数据库中有100条新闻记录,那相应的生成100个新闻html页面,格式用模板定义的格式确定) 首先模板文件时静态的html页面,其中所有的需要从数据库中替换的字段用一对包含...,如数据库中的新闻标题字段为titles,则模板页中相应的标题位置用titles 1 的枚举类型,为单独页面的生成方式,已经重命名的标识列,如此处为id,则生成的页面格式为 news_1.html,news_2.html以此类推,代码如下 1 protected void
领取专属 10元无门槛券
手把手带您无忧上云