Javascript

前言 记得hugo是有官方的文章分页的，但是我这个主题没有，我也不想去研究怎么使用，直接自己造一个，折腾一下！改! 之前我改过很多次了，直接找到目录，MyBlog\themes\bearblog\layouts。 目录下的文件就是网页的框架（模板。 hugo是go开发的所以是go模板(go html template)。 我对go不太熟悉，然后问了好多次GPT，也学到了不少关于go的东西。 下面直接说我的思路吧。 问题思考 本来的主题是直接一个ul列表，我需要按指定数量给分页。 本来是想要在hugo生成静态文件的时候，10个一页，然后给每一页生成一个html文件， 比如/blog/1.html和/blog/2.html 分别代表第一页目录和第二页目录，然后点下一页的时候跳转，但是这样有些丑陋。还有就是我不会… 看了看别人的博客案例，大概都是hugo在生成静态文件的时候，为每一页专门分一个目录，比如 /page/1/文章xxx /page/2/文章xxx 大概率和主题有关，我的网站目录结构默认不是这样的( 如果是这样可能就有分页功能了， 我的博客文章的链接直接就是/blog/xxx。 在简の单的思考了之后，✨一个想法在我脑中浮现， 生成出所有目录页，都放在一个页面，然后根据css display:none 来隐藏和显示某一个目录页。 比如我有10个文章，3个分一页 我能分4页。 本来网站上只有一个ul来显示目录，现在我3个文章生成一个目录。 ---- <ul>目录</ul> ---- --- <ul>目录1</ul> 显示 <ul>目录2</ul> 隐藏 <ul>目录3</ul> 隐藏 <ul>目录4</ul> 隐藏 --- 然后轮流隐藏显示。 代码 用VSCode读代码找到了\themes\bearblog\layouts\_default\list.html这个文件是目录模板文件， 原来的目录生成代码如下 <ul class="blog-posts"> {{ range .Pages }} <li> <span> <i> <time datetime='{{ .Date.Format "2006-01-02" }}' pubdate> {{ .Date.Format (default "02 Jan, 2006" .Site.Params.dateFormat) }} </time> </i> </span> <a href="{{ .Permalink }}">{{ .Title }}</a> </li> {{ else }} <li> No posts yet </li> {{ end }} </ul> 原来是直接遍历Pages来生成一个列表。我就需要在这里进行魔改。 ...

创建对象 使用对象字面量 这是最常用的方法。 let person={ name: "John", age: 20, greet: function() { console.log("Hello，my name is "+this.name); } } person.greet(); //输出Hello,my name is John 使用构造函数 定义一个构造函数，然后使用new关键字来创建对象。 function Person(name, age) { this.name = name; this.age = age; this.greet = function() { console.log("Hello, my name is " + this.name); }; } // 创建对象 let john = new Person("John", 30); john.greet(); // 输出: Hello, my name is John 使用 Object.create() 方法 代码来自: Object.create() - JavaScript | MDN (mozilla.org) const person = { isHuman: false, printIntroduction: function () { console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`); }, }; const me = Object.create(person); me.name = 'Matthew'; // “name”是在“me”上设置的属性，不是在“person”上。 me.isHuman = true; // 覆盖继承的属性 me.printIntroduction();//输出> "My name is Matthew. Am I human? true" 使用 ES6 类 ES6 引入了类语法，使得定义和创建对象更加直观。 ...