这期视频呢,陶老师介绍的是怎么来使用服务器端包含这样一种方式,将我们相同的网页内容进行加载进去。 比如说我们这样一个 list, 这样一个页面,我们也需要将顶部的这些导航把它加载到我们的这个页面上。 那么这个时候就不需要再去重复的设置记录级啊,导航条啊等等。 那么要怎样来实现这样的效果呢?接下来呢,点击文件, 我们把 index 点 p, h p 把它另存为,另存为 top 保存。之后呢,我们删除掉不要的这些文件啊。比如说第一行代码我们不需要, 然后轮不脱这个记录集我们也是不需要的, 这些函数的代码我们也是不需要的。然后我们将 h、 t、 m、 l 这些代码把它删掉。 接下来呢,我们将轮不出这个记录级的这个代码要把它删除掉,然后删掉这一些。 好。那么现在呢,我们就保留了基本的导航条的这个动态的记录集和这些代码,保存这个页面。然后呢,切换到 list, 点 php, 我们到 continer 下边敲一下回车,然后插入服务器端,包括 继续来找到 top。 好,这样呢,我们就将 top 点 p h p 这个网页把它调用到了历史。 好,我们点击文件保存,然后我们到页面里面刷新。哎,这个时候我们看顶部的 这一块东西和我们导航栏的这些东西都已经调用到了 list 这个页面里面来。 好,今天的分享就到这里,欢迎到陶老师主页上去观看更多的 dreamword 可视化编程设计动态网站的视频。
粉丝3785获赞1.4万

上两期视频分享的 tts 语音类生成软件受到了很多朋友的关注,不少粉丝留言和发私信询问此类软件如何安装使用。今天就给大家一个傻瓜式教程,告诉你如何分两步在本地电脑部署另一款热门的语音模型 index tts。 在安装的第一步,也是最重要的一步,请参考我之前的视频。先下载并安装 pinocou 工具,这是可以帮你自动安装部署 github 软件的 ai 神器,安装时候一定注意选择路径为 d 盘或是其他盘符, 避免在安装多个程序后 c 盘空间不足。现在开始第二步,一键自动化安装 index t t s 方法也很简单,进入 pinocou 程序主页, 在首页你已经可以看到很多的 github 热门程序展示。请先选择搜索栏下方的 community scripts, 输入关键词 index tts, 在 搜索结果中选择带 pinocchio 的 脚本, 点击连接后,再次点击黑色的一键安装按钮,软件会弹出一个 get 脚本的下载确认框,点击下载,剩下的工作 pinocchio 会帮你全自动完成。 在设置好虚拟环境的同时,它也会下载程序所需模型文件,无需人工干预,省时省力。如果你的显存小于八 gb, 那 么你也可以选择之前视频介绍的优秀 tts 工具 voxcm, 它的模型体积仅为零点五。 b 程序安装完成后, index tts 会自动启动,可以通过软件的网页客户端进入使用界面。 使用方法也很简单,先在左面选择你需要克隆的语音文件,中间输入要生成的文字脚本,点击生成按钮,程序就会帮你生成对应的语音文件。本次视频的音频文件也是使用了 index t t s r 生成的, 感兴趣的朋友可以对比下前面两期我用 voxcm 配音的视频,告诉我你觉得哪款软件的效果更好。音频生成后,我们来听下效果。风浪越大鱼越贵,这 ai 的 水可比金海的浑水还深几分。 你以为它只是悄悄代码吐点文字的玩意儿?错了!现在多少人挤破头想往里面钻, 有人靠它赚得盆满钵满,有人栽进去连底裤都不剩。怎么样,你对这个生成效果是否满意?欢迎在评论区发表你的意见。 此外,该语音的原始音频来自于谷歌最新发布的 tts 语音模型,下期将为大家介绍如何在没有 gemini pro 版本 license 的 情况下,免费使用谷歌最新发布的 tts 语音模型。欢迎点赞并关注我的后续更新。

地址栏里只有一个 ip, 浏览器很冷静,冷冷地丢给你一句,不安全。你没说话,只是顺手打开了宝塔面板,然后打开了左侧导航栏。 s s l 证书管理 leds equipped。 你只是想看看,真的只是看看。结果 ip 已经被自动填好了。你犹豫了零点二秒验证方式选默认的,什么都没改,脑子还在想,结果手已经点下申请证书,几十秒后,状态跳成了签发成功,并自动帮你部署。到了站点,你切回浏览器, 刷新网站,不安全消失了。地址栏左边那把小锁安静的亮了起来。你靠在椅背上,心里只剩下一句话,一不小心把 ip 网站给加密了。

好,这个 tailwind 呢,我不需要用任何的库,因为有同学是 react 的, 有同学是 view 的, 所以我就用一个原声的。在这呢,直接 npm 一 列杠 y, 就 初识画了一下。哦,不好意思,初识画错地方了, 我要 cd 到 tailwind 进去之后 npm 一 列杠 y, 这个时候就初识画好了。初识画好之后,其他东西我全部都不需要,我只需要拿一个 tailwind 版本,根据它提示的三点四点十六,还有我建议大家,以后啊,就如果说这里有箭头,有这些,为了保险起见,所有的这个库的版本呢,你最好都写死啊,让版本的约束 由你自己来控制,因为有时候有些库啊,它升个小版本确实可能会带来问题啊,以防万一。好,我们 n p m i 安装一下,安装好之后我们就可以使用了。 版本提示的插件是 version 啊, version, 这个大家可以安装一下,安装一下之后点击这个右上角就有了,这个是比较方便, 我看安装好了没有,可能网络出了点问题,我把网络稍稍微调一下, ok 了。啊,好,然后呢,我就抽象,抽象呢,命令很简单, n p x 呃, tailwind c s, 然后呢? edit 回车,哎,它就会抽象化一个 tailwind config 点 g s 会抽象化这样一个东西啊,有了它,我们就接下来其实就可以去定义了。呃,这里呢,定义一下你要扫描的内容,就是你的这个样式在哪些里面,它翻译器需要去找到它们,然后去做翻译。 好,那在哪个里面呢?假设我现在 s r c 吧,啊,或者说我,我不搞 s r c, 我 就直接在当前目录下面, 心心下盘心,然后下面呢来一个所有的 html 或者是 gs 都可以,我们在这里面呢,把 html gs 都放进去,这里别掉了,都掉啊,好,这样呢,我当前这个目录下面的什么 index html 或者是 style 点 css 都可以,这样都可以用了啊。好,那这两步完成之后,接下来你就要去告诉 tailwind 啊,你引引入的这个 style css 引入的时候,那你怎么去使用, 怎么用呢?在这里把它定义好 style css 呢,这个里面要把它的一些基础内容给它引进来。有哪些基础内容呢?比如说 tailwind 的 给它抽象出来的内容啊,比如说那个 base, 我 把它额外给给出来几个,把它引进来。 tailwind css 我直接拷过来了,刚才那个课间上面好像给它漏掉了,把这三个给它拷过来,在这里呢,我也给大家粘贴一下,放在这里配置它,然后呢在这里要加入 cs 样式,就入口吧,入口 cs 样式要边写,放它啊,这个时候呢,我们把它放进去,放在这保存一下就 ok 了。好,这全部定义好之后,你现在就可以用了,现在就可以用了,怎么用呢?我们建议啊,就是如果说你是变异的话,在这里呢你写一个变异的 dvcs, 然后 就是 tailwind css, 然后呢杠 i style 点 css, 然后呢杠 o output, 再杠杠 watch, 这样就能够监听翻译,监听翻译。 好,我们现在呢直接在这儿 p n p m d v c s s 回车,大家可以看到吧,现在就在 rebuilding 输出了,这里输出什么呢?输出了这么多,我们发现现在其实什么都代码都没有写,我这个里面什么代码都没写,但是它翻译完之后 就输出了这么多内容,已经生成好了啊,那如果说你现在在 html 这里写一个 html 五,然后呢引入的资源当然就是你输出的资源。呃, link? link? 谁呢?就是你当前目录下面的 output sets, 它把它引进来啊,其他的就 ok 了,全部都不用写了,我们来视视力看一下啊。呃,这个里面呢,写一个 h 一, 然后呢 class name, 当然在这个里面我们就直接 class class 写一个 text 杠,呃, think think 五百吧。好,然后呢,里面就是妙码 保存,我们来看一下啊,打开这个 html 看一下效果,打开 html 看一下效果。好,现在稍等一下, 首先要打开稍等,我再 tailwind。 好。 然后呢从在这边来打开,拖到这里来查看一下妙码学院是不是有了,对吧?现在呢,你可能看不到效果,对吧?我们这个呢,其实已经 实现了,就是我现在没有写一行的样式代码,样式代码我一行没写,但是它已经直接可用了,比如说我把字体呢给它给大一点。 text 杠叉叉叉叉,嗯, font x 杠叉。呃,随便几个叉吧,看这是四十八像素。那五个叉过来之后刷新看一下来,这个只要通过类名来去控制它的样式就有了啊。那比如说我这里的颜色呢?想给它更改一下,我觉得 zinc 不好看,我可以指给它指定一个 purple, 对 吧? purple 刷新就变成了紫色,全部都用类名来去解决问题了。那如果说让你来去写一些,呃,相对比较复杂的这个页面内容 怎么做呢?其实用这种方式就非常快了,我给大家对比着啊,两边左边右边代码,把它拿过来之后,大家一起来看一下。 这个方式去编写代码的时候非常快啊,比如说我先把它折起来啊,在以前你要写一个这个 flex 布局,然后左右什么这种关系的时候呢?我们一般在外面写个 div, 如果你要横向,那就 flex 杠 row, 这是横向,横向之后这个里面来个一二,这个里面来个三四。好,保存过来看一下。现在就有了。是不是变成了一二三四横向布局了?如果你想把它变成竖向布局,加一个 call, 这里就变成了 call, 一 二三四,我放大一点啊,放大一点。 好,那如果你现在想让它的这个呃颜色或者背景内容呢?有一个具体的数值,比如说我们给个 size 十,保存过来看一下,现在看不出来效果是因为我们没给背景颜色,给个背景颜色吧,比如说 呃,黑色, bg black, 过来,来到这边刷新一看,就有了黑色,那当然,你如果给个黑色背景,你前景色颜色看不到了,颜色给个什么呢?给个 think 五十,保存过来看一下, 颜色也就有了。好,那现在变成了左右,那如果说我这里想给他再放大一点 size, 一 百呢?就变成一百,嗯,效果比较清晰啊。 好,如果说我想给他指定一个特定的,比如说两百像素,就这样来写两百像素,这就是一个两百像素宽高的盒子啊,之所以这么大,是因为我放大了百分之三百才这么大啊,我为了大家好看。 好,那这个时候你就有了两个元素,你可以横向,也可以纵向,这是其中一种,如果你在这个基础上要给它加阴影,要背景阴影,对吧?我们现在比如说先先把这个 color, color 什么这些去掉,或者我们重新再创一个新的,它没有背景色, 没有这个颜色好,把这些全部去掉保存,我们再刷新刷新一下,下面又来了一个,我们现在想,现在想让它给它来一个 box shadow, 那 我们就直接 shadow, md, 这里就有了一个 box shadow, 并且这个 box shadow 看起来还比较好看,对吧?这个样子啊,如果说我现在给他要加一个 gap, 比如他们俩相隔要有一定的距离,那么就直接 gap 二好,他们俩之间就隔开了二,这个二到底是多少呢?它是零点五而言,所以最后换算过来是八 p x, 八 p x 就 非常快了。那在这个里面,比如说你想给它把宽高给它指定一下,你直接给 size, 就是 size 十, 然后这个里面呢,也可以给 size, size 呢?杠,给给定的啊,比如说给定的这个两百像素 啊,或者一百像素吧,保存过来刷新看一下,这样就能看到效果啊,看不到呢,我们给他一个 bg 杠 zink 杠两百,保存过来刷新看一下。灰色的盒子也出来了,就用这种方式写啊,非常非常快 啊,非常快。就比如说像我们的呃飞书文档的项目实战,还有那个监控平台的,还有那个无代码低代码平台的,其实我们大部分呢,都是用这种方案来写,写起来非常快。我们随便可以给大家看几个例子啊,就比如说像 呃当时 ai 这部分的,那就直接全部 d i v e, 然后内幕直接去编写,这是用 cs ing, 用 terwin 的 这种方式来实现的啊,那当然呢, style in 那 个 cs ing 的 方案呢?更多, csinj 的 那种方案更多,其实用的比较更多啊,我们也有项目实战,有对应的这个方案来去实现的这几种方案呢,就是看情况,大家自己在特定的这个场合下,或者推特定的这个业务下选哪一个, 反正从这里大家可以看得出来,我实现这个效果这样写,那绝对是比写 cs, 写央视写那些要快很多的好吧, 好,就是这个内容的这部分的讲解啊, cs 这个 tailwind, 如果在目前基础的这些 tailwind 满足不了的这个情况下呢,你就可以去借助 post cs 或者是 tailwind 的 插件来实现 啊,这是不同的这个方案,当然了,也有同学提到这个 inosys, 这个同学们也可以去了解一下啊,这个大家也可以去了解,它们的思路呢,是相近的思路比较相近啊,它这个写法还有它的使用, 大家可以自己去了解去看一下啊。这个呢,大家反正大的几个方向自己呢都要去看,就是这样这样三个方向啊,一个 cs n g s 的 方向,一个是 tailwind cs 的 方向,还有一个是 module cs 的 方向,这三个呢是一定要看的 好,我们现在把它看完之后呢,来总结一下,就是我我提问大家来回答啊,就是假设我现在有一个这个 ssr, 或者说服务端渲染的这个产品,你来选央视方案选什么?选哪个? 一二三啊,一是模块 cs, 二是那个 cs ings, 三是 tailwind cs, 大家来选择,看大家怎么选?如果现在是样式的,这个就是服务端渲染的产品,大家选哪一个? 其实一和三都可以,一和三都可以,二,唯独二这个点呢,就比较难受啊。 cs 服务端渲染的这个产品,如果说你用二 cs ings 的 方案的话,就比较难受了。 呃,正是因为这个问题呢,在那个 maintain ui, 它在新的版本做了一个大的重构,大家可以其实看到啊,像以前的这个版本呢,像 vnu 版本啊, vnu 版本是它很早期的版本,早期版本里面呢,它还是用的 这个,给它点开,先点开再跟它说它是用的 emotion, emotion 这个里面有没有?这个里面没有,我们从最顶层的那个 package 里面看,它最开始用的是 emotion, 大家可以看到吧, emotion react, emotion server 和 emotion styled。 但是呢,后来在不断的尝试的过程中发现,其实 c s, n g s 的 方案,这种方案在 比如说服务端渲染技术啊,还有就是那种样式体系内容比较多的这种场景下,它的渲染时间、性能损耗确实非常大, 确实非常大,所以就干掉了这种方案。在第七版本开始,当然现在是现在,我看现在是多少版本啊? tax 现在是七啊,就是从七点 x 版本,它全部重构了。重构成什么了呢?所有的样式相关的,它自己写了一个函数, 单独去生成内名和内名处理这一部分呢,在样式这一部分里面,库包里面,针对于样式 api 的 处理,这里大家可以看到啊, create vars variable, 就是 专门它自己写了一个关于变量生成解析器的东西, 这个里面呢,就可以去自动的啊,生成它的类名,生成样式的那些规则用它来做。它全部被重构成 mojo cs 的 方案了啊,全部被重构成 mojo cs, 可想而知 cs 硬件的方案确实,这个 你要如果说有一些呃服务端渲染的这些需求的话,先把它 pass 掉,这个肯定不好,这个是一个定论, 其他场景的话无所谓啊。如果是要服务端渲染要这个的话,先把 cs 引入这种方方案排除。但如果没有这个服务端渲染的这个方案的话,我其实比较推荐大家选择 cs 引入 react。 同学啊, cs 引入的方案, 它的整个团队在编辑过程中它的呃,这个整个控制啊,质量把控啊,包括它本身。其实 type strip 的 类型支持更友好,所以 cs 硬 gs 基本上呃,在做前纯前端的 s p a 应用的时候选择它没有没有错误啊,没错。 好,那所以最后的结论呢,就是选一和选三都可以啊,同学们如果倾向于选三,那选三 ok 啊,我认为其实这个 tailwinds 如果说项目比较小,追求比较快,速度上线的话,很值得去用。

大家好,今天我们来学习 indx 函数。 indx 是一个按指定位置返回值会引用的函数。例如我们要根据姓名创造学号 enx, 第一个参数是要返回值得区间, 第二个参数呢,是位置,那么李松的这个学号在第几位呢?第四位, 李松的学号十三号,但是这个四如果用手工输入就失去了函数的意义。我们可以用昨天学过的麦奇函数 查找李松在姓名中的相对位置 线下填充。请注意呢,你用的锁定学会了,给泉水点个赞,关注一下吧!

接着来看 e s m 的 一个例子,对吧?上节课呢,我们讲一个它的内容哈,同样的,比如说我们还是有一个 index 点 g s, 那 我这儿呢,同样呢,有一个 intos 点 g s, 那 这个呢,是两个 ecma script 模块文件哈,那我不同的呢,我是在 intos 中呢,我去 export 一个 function at, 然后嘞它里边也是 x y, 然后我还是 return 回去的,是 x 加 y, 好 吧, 然后呢,对于我们的 index js 呢,我要引入你 until 这个模块文,呃,文件中的内容,那怎么使用呢?我就直接使用 in import, 然后呢 add, 对 吧?那接着呢,是 from 我 们的这个文件, 那我这呢,就可以直接 control total 呢,就等于的我们的这个 add, 一 的话二,那这样呢,你看它就是没有问题的,对吧?这呢,你看它会给你标明你这个 add 呢,是 import 引入进来的,那我们这呢,你看它是导出的,当然这现在是 any 哈,那你也可以加一些,呃, 类型,比如说我们加上 number, 好 吧。然后呢,这样呢,它就是 number 类型的话,呃,不能这样直接去写哈。这个呢,你先不用管类型的问题, 先来看这个模,呃, esm 的 这种模块系统,它的最简单的呢,就是大概的使用就是这样。那我们下节课呢,来给大家再接着往下去讲。

兄弟们,国内大厂或者你的对手网站采用了哪些前端技术?挖 part laser 一 键搞定。 打开谷歌浏览器,选择插件,点击管理插件,点击应用商店,输入,挖 part laser, 点击这里添加到浏览器,我们随意打开一个网站, web 服务器采用的是 n g x, 它的 java script 的 框架主要用了 react 和 next g s 版本十五点五,对于我们安全人员来说,只要看到了版本号,我们就可以 习惯性的找一下 c v e, 我 们在这里搜索一下 c v e, 大家可以看到 c v e 五五幺八二,远程代码执行 bug 已经 存在了。点击这里,在这里大家可以看到已经有四十一万两千个网站使用了 max g s 技术,那么使用 max g s 流量最高的网站有以下这十个,点击这里可以看到排 名前五千的,大家可以看到使用了 max 的 框架的五千个网站已经全部找不到。如果大家无法在线的安装这个插件,那么离线版插件安装包在这里,如果喜欢点个关注。


进来之后,它的组建在 components 里面,对吧?所有的组建在这个里面,所有的文档在 docs 里面,所有打包构建相关的一些脚本在 scripts 里面, 所有相关的测试部分的内容呢?在 test 里面好,类型相关的在 typeins 里面好,大家可以看到吧?这个我们做一个分离,然后我们再到 components 里面去看。针对于 button, 因为我们觉得 button 是 一个相对比较呃, 使用场景比较多,并且呢他的遍体比较多的这样一个组建,那这个里面就会有英文的文档和中文的文档。然后呢再进到这个 index, 一 般 index 只是用了去外部,给外部去暴露一些方法来用的,对吧?你看暴露这些东西,那真正核心的还是在 button 八层组间。进来之后,朋友们可以看到他的整个内容编辑的内,这个基础架子其实跟我们刚才给大家讲的是类似的,他同样会有一部分关于样式的计算,样式的计算在哪里呢? 在这一部分他会把 class names 所有的前缀加上你当前的遍体给他放进去,以此来组成你这个新的类名。有了这个新的类名之后,我接下来所有的样式都按照你这个类名的呃,这个最终类名来去匹配它的样式 啊,按最终那一名去匹配它的样式,它样式呢?额外放到 styles 里面的,我们可以看一下它的 index, 进来之后大家可以看到它用的是谁呢? under design 里面的 css, 大家可以看到这个酷吧,它自己洗了一套啊,自己洗了一套, 然后呢还有对于色值的处理,对于 token 的 处理,还有这个 compact cmp 啊,就比如说对于单位的处理啊,对于其他的一些模块还有样式的处理,全部呢定义到了这些 styles 里面, 把这些 styles 拿出来之后,放到我们对应的组建位置啊,来实现样式的整个体系实现。好吧,整个样式体系实现 不够干,哈哈,我我挺干的啊,公开课呢,主要是引导啊,如果同学们这个 呃本来基础比较好呢,可能公开课相对把自己的思路捋一捋,然后呢看能不能对自己接下来去求职有更大的帮助啊。如果想更系统深入的去学习,我们全站还有多端方面的内容呢,可以了解一下我们的 vip 课内容啊。 那个公开课的话讲太多了,朋友们不理解这个,其实大部分同学如果说都理解不了的话,再干我觉得意义不大啊,主要还是一个权衡。

证书的权威机构莱斯 en crypt 发布公告,当前莱斯 en crypt 颁发的证书有效期为九十天,到二零二八年有效期将缩短一半,调整为四十五天。简单来说,未来用户使用该机构的证书需要更频繁地进行证书续期操作,这意味着后续手动管理证书将产生大量重 复工作,因此证书自动续期机制必不可少。 one pin no 的 证书管理功能完全可以实现自动申请证书自动续期。只需要配置一下 d n s 账户, 可以用腾讯云来演示一下 secret id 和 secret key, 去腾讯云上创建一下,点击右上角用户头像,选择访问管理,选择访问密钥 api 密钥管理 新建密钥,然后复制 secret id 和 secret key, 粘贴到 dns 账户位置确认即可。现在就可以申请证书了,输入域名, 这里是关键,默认勾选了自动续期,如果证书到期会自动续期,等一会证书就申请完成了。现在创建一个网站,看看证书如何部署使用。选择静态网站,填写域名,起用 http, 选择 icm 账户。 刚才申请的证书自动列出,点击确认网站发布完成。这个域名需要在域名解析平台提前配置好解析,现在点击域名就可以打开网站的默认页面, 可以看到证书配置正常。这个时候你就会问了,如果没有域名怎么申请证书?那你就直接用 ip 申请证书,勾选 ip 证书域名就填写 ip, 同样勾选自动续签。刚才的网站是用 ngx 部署在这台服务器上的,那就可以直接将证书推送到 ngx 的 ssl 证书目录中, 点击确认申请完成并推送到目录中,重启一下 ngx 服务,现在就可以通过 http 加 ip 的 方式访问网站,并且可以看出 http 证书也是有效的。刚好你的 one panel 也是通过 ip 访问的。也可以配置 http 证书, 在面板设置切换到安全设置起用面板 s s l, 选择刚才申请的 ip 证书,重新用 http 访问,可以看到证书配置正常。 喜欢我的作品,记得三连呦。