-
Notifications
You must be signed in to change notification settings - Fork 1
/
local-search.xml
59 lines (27 loc) · 22.9 KB
/
local-search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>搭建毕业纪念网站（一）</title>
<link href="/2023/07/17/%E6%90%AD%E5%BB%BA%E6%AF%95%E4%B8%9A%E7%BA%AA%E5%BF%B5%E7%BD%91%E7%AB%99%EF%BC%88%E4%B8%80%EF%BC%89/"/>
<url>/2023/07/17/%E6%90%AD%E5%BB%BA%E6%AF%95%E4%B8%9A%E7%BA%AA%E5%BF%B5%E7%BD%91%E7%AB%99%EF%BC%88%E4%B8%80%EF%BC%89/</url>
<content type="html"><![CDATA[<h1 id="网站首页"><a href="#网站首页" class="headerlink" title="网站首页"></a>网站首页</h1><pre><code class="hljs"><!DOCTYPE html><html> <head> <link rel="icon" href="https://blog.sztiger.top/szxhz.github.io-source/img/cofee.png" type="image/x-icon"> <!--自定义title图标--> <link rel="shortcut icon" href="https://blog.sztiger.top/szxhz.github.io-source/img/cofee.png" type="image/x-icon"> <!--自定义收藏夹图标--> <meta charset="UTF-8"> <title>我的纪念册</title> <!--自定义网站title名--> <link href="index.css" type="text/css" rel="stylesheet" /> </head> <body> <img src="https://blog.sztiger.top/szxhz.github.io-source/img/20230713002.jpg" alt="背景图片" class="background"> <!--你可以把网站壁纸更改为自定义--> <div class="content"> <h1>岁月不居，时间如流。<br>时光信马由缰，转眼便是分别。</h1> <!--自定义主标题--> <br><br> <h2 class="subtitle typing"></h2><br><br><br> <!--此处别填写，打字效果副标题在index.js里更改--> <div class="buttons"> <a href="#" class="button">回忆相册</a> <a href="#" class="button">送别ppt</a> <a href="#" class="button">同学档案</a> </div> <!--按钮自定义--> </div> <script src="index.js"></script> </body></html></code></pre><blockquote><p><em><strong>以上的代码只是index.html</strong></em></p></blockquote><p>可以从上面的代码中不难发现，index.html中外部带入了 <strong>index.css</strong> 和 <strong>index.js</strong> 两个文件。<br>css文件用来定义一些基本属性:</p><pre><code class="hljs">* { margin: 0; padding: 0; box-sizing: border-box;}body { overflow: hidden; height: 100vh;}.background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}.content { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: white; text-align: center; font-family: Arial, sans-serif;}h1 { font-size: 48px; margin-bottom: 20px;}.subtitle { font-size: 24px; margin-bottom: 40px; overflow: hidden; white-space: nowrap; border-right: 2px solid white;}.subtitle.typing::after { content: " "; animation: blink-caret 0.75s step-end infinite;}@keyframes typing { from { width: 0; } to { width: 100%; }}@keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: white; }}.buttons { display: flex; justify-content: center; opacity: 0; transition: opacity 0.3s;}.button { margin: 0 10px; padding: 10px 20px; background: linear-gradient(to right, #FFD700, #FFA500); border-radius: 5px; color: white; text-decoration: none; transition: background 0.3s;}.button:hover { background: linear-gradient(to right, #FFA500, #FFD700);}</code></pre><blockquote><p>接着就是js来设置打字标题效果。</p></blockquote><pre><code class="hljs">const subtitle = document.querySelector(".subtitle");const buttons = document.querySelector(".buttons");const text = "“那个夏天的蝉鸣比哪一年都聒噪，教室窗边枝桠疯长，无奈挡不住烈阳......”";// 自定义副标题let index = 0;function typeWriter() { if (index < text.length) { subtitle.textContent += text.charAt(index); index++; setTimeout(typeWriter, 100); } else { buttons.style.opacity = 1; }}setTimeout(() => { subtitle.classList.add("typing"); typeWriter();}, 1000);</code></pre><p>可以看到效果:<br><img src="https://szxhz.github.io/szxhz.github.io-source/img/20230717001.png" alt="homepage" title="homepage"></p><h1 id="制作404页面"><a href="#制作404页面" class="headerlink" title="制作404页面"></a>制作404页面</h1><p>404页面编写起来很简单，但是还需要配置一下。</p><blockquote><p>404.html</p></blockquote><pre><code class="hljs"><!DOCTYPE html><html> <head> <link rel="icon" href="https://blog.sztiger.top/szxhz.github.io-source/img/cofee.png" type="image/x-icon"> <!--自定义title图标--> <link rel="shortcut icon" href="https://blog.sztiger.top/szxhz.github.io-source/img/cofee.png" type="image/x-icon"> <!--自定义收藏夹图标--> <title>Page not find!</title> <!--自定义title--> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: linear-gradient(to right, #87CEEB, #F0F8FF); } .navbar { position: sticky; top: 0; background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); padding: 20px; z-index: 999; display: flex; justify-content: space-between; align-items: center; animation: fade-in 0.5s; } .navbar .navbar-item { color: #333; font-weight: bold; margin-left: 10px; text-decoration: none; } .navbar ul { list-style: none; display: flex; } .navbar ul li:not(:first-child) { margin-left: 70px; /* 调整导航项之间的间距 */ } .navbar ul li a { text-decoration: none; color: #333; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } </style> </head> <body> <div class="navbar"> <a href="#" class="navbar-item">By SztigerW</a> <ul> <li><a href="index.html">首页看看~</a></li> <li><a href="#">回忆相册</a></li> <li><a href="#">送别的书</a></li> <li><a href="#">同学档案</a></li> </ul> <!--自定义导航栏--> </div><br><br><br><br><br><br><br><br><br><br> <div style="text-align: center;"><p><font size="50" color="white">不好！404了！<br>你很有品味，页面未被世界发现 。<a href="index.html"><font color="green">回到首页</font></a></font></p></div> <!--自定义404内容--> </body></html></code></pre><blockquote><p>接着就是配置，我们的目的不仅是要有404页面，还需要让找不到的页面自动显示404。</p><p>接着编辑web.config文件：</p></blockquote><pre><code class="hljs"><?xml version="1.0" encoding="utf-8" ?><configuration> <system.webServer> <httpErrors errorMode="Custom"> <remove statusCode="404" subStatusCode="-1"/> <error statusCode="404" prefixLanguageFilePath="" path="404.html" responseMode="File"/> </httpErrors> </system.webServer></configuration></code></pre><p>这样网站就可以自定向到404了，可以见效果:<br><img src="https://szxhz.github.io/szxhz.github.io-source/img/20230717002.png" alt="404"></p><p>这样的话，网站就初步完成了！</p>]]></content>
</entry>
<entry>
<title>hexo+GitHub page搭建个人博客全过程</title>
<link href="/2023/07/05/hexo-GitHub-page%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E5%85%A8%E8%BF%87%E7%A8%8B/"/>
<url>/2023/07/05/hexo-GitHub-page%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E5%85%A8%E8%BF%87%E7%A8%8B/</url>
<content type="html"><![CDATA[<h1 id="https-szxhz-github-io"><a href="#https-szxhz-github-io" class="headerlink" title="https://szxhz.github.io/"></a><a href="https://szxhz.github.io/">https://szxhz.github.io/</a></h1><p><strong>我使用了GitHub pages 和 hexo fluid 主题来进行网站布局和优化</strong><br>转载于：<em><strong><a href="https://blog.csdn.net/yaorongke/article/details/119089190">https://blog.csdn.net/yaorongke/article/details/119089190</a></strong></em><br>步骤如下：</p><blockquote><h1 id="1-准备工作-："><a href="#1-准备工作-：" class="headerlink" title="1,准备工作 ："></a><strong>1,准备工作</strong> ：</h1><ul><li><p>安装 <em>nodejs</em> 和 <em>git</em></p><ul><li>node.js 官网： <em><strong><a href="https://nodejs.org/">https://nodejs.org/</a></strong></em> 去下载相对稳定版：<br><img src="https://szxhz.github.io/szxhz.github.io-source/img/20230705002.png" alt="nodejs首页" title="node.js 网站首页"></li></ul></li></ul></blockquote><blockquote><ul><li>git 官网：<em><strong><a href="https://git-scm.com/download/win">https://git-scm.com/download/win</a></strong></em> 安装过程一直下一步就行<br><img src="https://szxhz.github.io/szxhz.github.io-source/img/20230705003.png" alt="git官网" title="git"></li></ul></blockquote><blockquote><ul><li>一切的一切就是你必须要有一个GitHub账号！<em><strong><a href="https://github.com/login">https://github.com/login</a></strong></em></li></ul><h1 id="2-创建仓库-："><a href="#2-创建仓库-：" class="headerlink" title="2,创建仓库 ："></a><strong>2,创建仓库</strong> ：</h1><ul><li><p>新建仓库：其他默认，但仓库名得是 <strong>用户名.github.io</strong><br><img src="https://szxhz.github.io/szxhz.github.io-source/img/20230705008.png" alt="新仓库" title="新仓库"></p></li><li><p>新建一个文件，文件名为index.html:</p></li></ul></blockquote><pre><code class="hljs"><!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <h1>test的个人主页</h1> <h1>Hello ~</h1> </body></html></code></pre><p>恭喜你，你已经拥有了一个GitHub page。</p><blockquote><h1 id="3-安装hexo-："><a href="#3-安装hexo-：" class="headerlink" title="3,安装hexo ："></a><strong>3,安装hexo</strong> ：</h1><ul><li><p>你可以根据hexo官网来进行安装：<a href="https://hexo.io/">https://hexo.io</a></p></li><li><p>你在电脑上新建一个存放博客的文件夹，在该文件夹打开git bash here。</p><ul><li>分别输入以下命令:</li></ul></li></ul></blockquote><pre><code class="hljs"> $ npm install -g hexo-cli $ hexo -v $ hexo init hexo-blog $ cd hexo-blog $ npm install</code></pre><blockquote><ul><li>如果都没有报错就输入如下命令：</li></ul></blockquote><pre><code class="hljs"> $ hexo g $ hexo s</code></pre><blockquote><ul><li><p>这个时候你就可以让电脑本地启动博客，使用浏览器打开：<em><strong><a href="http://localhost:4000/">http://localhost:4000/</a></strong></em><br> <img src="https://szxhz.github.io/szxhz.github.io-source/img/20230705009.png" alt="本地启动" title="本地启动"></p></li><li><p>但到最后一定要<strong>Ctrl+c</strong>关闭。</p></li></ul><h1 id="4，更换主题"><a href="#4，更换主题" class="headerlink" title="4，更换主题 :"></a><strong>4，更换主题</strong> :</h1><ul><li><p>这个界面虽说不上丑，但真的不好看，不如换个主题吧！可以去官网选一个：<em><strong><a href="https://hexo.io/themes">https://hexo.io/themes</a></strong></em> 这里我使用的是fluid。</p></li><li><p>打开这个链接：<em><strong><a href="https://github.com/fluid-dev/hexo-theme-fluid/releases">https://github.com/fluid-dev/hexo-theme-fluid/releases</a></strong></em> 下载最新版的 <em><strong>Source code (zip)</strong></em><br> <img src="https://szxhz.github.io/szxhz.github.io-source/img/20230705004.png" alt="d-f" title="d-f"></p></li><li><p>下载完成后解压到 <em><strong>/themes</strong></em> ，将文件重命名为 <em><strong>fluid</strong></em></p></li><li><p>然后更改 <em><strong>/_config.yml</strong></em> ,<br><img src="https://szxhz.github.io/szxhz.github.io-source/img/20230705010.png" alt="更改" title="更改"><br> 找到 <strong>theme</strong> ，更改为如下：</p></li></ul></blockquote><pre><code class="hljs">theme: fluid</code></pre><blockquote></blockquote><p>找到 <strong>language</strong> ，更改为如下：</p><pre><code class="hljs">language: zh-CN </code></pre><blockquote><ul><li><p>创建「关于页」:</p><ul><li>因为这个主题没有关于页，需要手动创建：</li></ul></li></ul></blockquote><pre><code class="hljs"> $ hexo new page about</code></pre><blockquote><ul><li>新建的页面就在 <em><strong>/source/about/index.md</strong></em> hexo的页面是用MarkDown语法的，具体操作手册可以看官方手册： <em><strong><a href="https://markdown.com.cn/basic-syntax/">https://markdown.com.cn/basic-syntax/</a></strong></em> 。</li></ul></blockquote><pre><code class="hljs">---title: aboutdate: 2020-02-23 19:20:33layout: about---这里写关于页的正文，支持 Markdown, HTML</code></pre><blockquote><h1 id="5，自定义主题-："><a href="#5，自定义主题-：" class="headerlink" title="5，自定义主题 ："></a><strong>5，自定义主题</strong> ：</h1><ul><li>首先在 <em><strong>/_config.yml</strong></em> 中修改：（建议自定义的我用了中文，能改的在文段最上面)</li></ul></blockquote><pre><code class="hljs"># Hexo Configuration## Docs: https://hexo.io/docs/configuration.html## Source: https://github.com/hexojs/hexo/# Sitetitle: 你想要的titlesubtitle: '另一个title'description: '另一个title'keywords:author: 文章作者名language: zh-CN timezone: ''# URL## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'url: 你的网站链接permalink: :year/:month/:day/:title/permalink_defaults:pretty_urls: trailing_index: true # Set to false to remove trailing 'index.html' from permalinks trailing_html: true # Set to false to remove trailing '.html' from permalinks</code></pre><blockquote><ul><li><p>接着在 <em><strong>/themes/fluid/_config,yml</strong></em> 中修改：</p></li><li><p>我们可以更改浏览器标签的图标。</p></li></ul></blockquote><pre><code class="hljs"># 用于浏览器标签的图标# Icon for browser tabfavicon: /img/图标名# 用于苹果设备的图标# Icon for Apple touchapple_touch_icon: /img/图标名</code></pre><blockquote><ul><li><p>上面 <em><strong>/img</strong></em> 实际上就在 <em><strong>/themes/fluid/source/img</strong></em> 里面。</p></li><li><p>其实背景图片也能改：在 <em><strong>/themes/fluid/source/img</strong></em> 里面有一个 <em><strong>default.png</strong></em> 文件，将他删掉，把你想要的背景放到这个文件夹中，改名为 <em><strong>default.png</strong></em> 。</p></li><li><p>我们可以更改导航栏左侧标题：</p></li></ul></blockquote><pre><code class="hljs">navbar: # 导航栏左侧的标题，为空则按 hexo config 中 `title` 显示 # The title on the left side of the navigation bar. If empty, it is based on `title` in hexo config blog_title: "自定义标题"</code></pre><blockquote><ul><li>主页标题也可以更改：</li></ul></blockquote><pre><code class="hljs">index: # 首页 Banner 头图，可以是相对路径或绝对路径，以下相同 # Path of Banner image, can be a relative path or an absolute path, the same on other pages banner_img: /img/default.png # 头图高度，屏幕百分比 # Height ratio of banner image # Available: 0 - 100 banner_img_height: 100 # 头图黑色蒙版的不透明度，available: 0 - 1.0， 1 是完全不透明 # Opacity of the banner mask, 1.0 is completely opaque # Available: 0 - 1.0 banner_mask_alpha: 0.3 # 首页副标题的独立设置 # Independent config of home page subtitle slogan: enable: true # 为空则按 hexo config.subtitle 显示 # If empty, text based on `subtitle` in hexo config text: "自定义标题"</code></pre><blockquote><ul><li>现在我们构建再启动：</li></ul></blockquote><pre><code class="hljs">$ hexo g -d$ hexo s</code></pre><blockquote><ul><li>可以看见成果：<br> <img src="https://szxhz.github.io/szxhz.github.io-source/img/20230705005.png" alt="2" title="2"></li></ul><h1 id="6，创建文章-："><a href="#6，创建文章-：" class="headerlink" title="6，创建文章 ："></a><strong>6，创建文章</strong> ：</h1></blockquote><pre><code class="hljs">$ hexo new "文章名"</code></pre><blockquote><ul><li>常见的文章在 <em><strong>/source/_posts/你的文章名.md</strong></em> ，没错，你的文章也要用MD语法。</li></ul><h1 id="7-上传GitHub-page"><a href="#7-上传GitHub-page" class="headerlink" title="7,上传GitHub page :"></a><strong>7,上传GitHub page</strong> :</h1><ul><li>方式1：<ul><li>获取 <em>hexo-deployer-git</em></li></ul></li></ul></blockquote><pre><code class="hljs">$ npm install hexo-deployer-git --save</code></pre><blockquote><ul><li><p>获取克隆链接：<br><img src="https://szxhz.github.io/szxhz.github.io-source/img/20230705006.png" alt="3" title="3"></p></li><li><p>获取tokens： <em><strong><a href="https://github.com/settings/tokens">https://github.com/settings/tokens</a></strong></em></p></li><li><p>打开 <em><strong>/_config.yml</strong></em> 最后一行进行编辑：</p></li></ul></blockquote><pre><code class="hljs">deploy: type: git repo: 克隆链接 branch: main token: 你的token</code></pre><blockquote><ul><li>然后构建：</li></ul></blockquote><pre><code class="hljs">hexo g -d</code></pre><blockquote><ul><li><p>接着会提示你按格式输入邮箱和用户名，用GitHub验证登录。验证完成后再次输入构建命令。<br><img src="https://szxhz.github.io/szxhz.github.io-source/img/20230705007.png" alt="4" title="4"></p></li><li><p>方式2：</p><ul><li><p>这个方法简单粗暴，直接将 <em><strong>/public</strong></em> 里面的所有文件上传即可。<br> <img src="https://szxhz.github.io/szxhz.github.io-source/img/20230705011.png" alt="5" title="5"></p></li><li><p>这个方法简单，但以后一但更新，就得重新上传。</p></li></ul></li><li><p>我个人认为 <strong>方式1</strong> 更方便，且可以长期使用。</p></li></ul></blockquote><p>那么，这个博客就搭建完成了，放心食用。如果像上传服务器，可以参考之前提到的原文。</p>]]></content>
</entry>
<entry>
<title>深圳小黑子</title>
<link href="/2023/07/04/%E6%B7%B1%E5%9C%B3%E5%B0%8F%E9%BB%91%E5%AD%90/"/>
<url>/2023/07/04/%E6%B7%B1%E5%9C%B3%E5%B0%8F%E9%BB%91%E5%AD%90/</url>
<content type="html"><![CDATA[<p>我的另一个blog，使用WP轻松搭建的深圳小黑子。<br>6月，临近期末，闲来无事，搭建了一个blog。<br>我给其取名深圳小黑子…不对，叫做<em><strong>TIGER PAGE</strong></em>。</p><blockquote><p> <del>链接地址：<a href="http://szxhz.ikunh.top/">http://szxhz.ikunh.top/</a></del></p><ul><li>使用了免费的香港高速虚拟主机，直接白嫖。</li></ul></blockquote><p>步骤如下：</p><ul><li><p>有一个虚拟主机亦或者服务器</p></li><li><p>没有人会傻到自己写HTML：</p><pre><code class="hljs"><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width-device-width, initial-scale=1.0"> <title>Tiger Page | BY Github Page</title> <link rel="icon" href="/img/Page.png" type="image/x-icon"> <link rel="stylesheet" href="/Tiger.css"> </head> <body> <a href="/index.html" class="button">Home</a> <a href="/about.html" class="button">About</a> <div style="text-align: center"> <h1><strong><font color="white"> Tiger Page</font></strong></h1> <br> <br> <h2><strong><font color="white"> 六月的风滚烫，时光信马由缰，千花万柳是盛夏的诗行，<br>接纳不完美的自己，即使披荆斩棘</font></strong><h2> <br> <br> <br><br> <a href="/2023/6.16.01.n1.html" class="button button1"> <h3><font color="brown">2023,6,16,n1</font></h3> <p><strong><font color="black">Hello World</font></strong></p> <h5><font color="black">This is my first blog! Hello everybody! ...</font></h5> <img src="/img/6.16.01.png"> </a> </div> </body></html></code></pre></li></ul><p>当然，除了我…<br>就这样第一版出现了。但谁写blog要纯手编的？于是，我使用了<strong>Wordpress</strong>。<br>最后就有了效果：<br><img src="https://szxhz.github.io/szxhz.github.io-source/img/20230705001.png" alt="这是首页" title="HOME PAGE"><br><del>前往博客 <a href="http://szxhz.ikunh.top/" title="TIGER'S PAGE">前往</a>。</del></p>]]></content>
</entry>
<entry>
<title>第一篇文章</title>
<link href="/2023/07/04/%E7%AC%AC%E4%B8%80%E7%AF%87%E6%96%87%E7%AB%A0/"/>
<url>/2023/07/04/%E7%AC%AC%E4%B8%80%E7%AF%87%E6%96%87%E7%AB%A0/</url>
<content type="html"><![CDATA[<h2 id="第一篇文章"><a href="#第一篇文章" class="headerlink" title="第一篇文章"></a>第一篇文章</h2><p>Markdown is <strong>simple</strong>, the HTML is also more <strong>difficult</strong>.<br>This is a md <em>text docment</em>.</p><pre><code class="hljs"><strong><em>这是粗字体和斜字体</em></strong>***这是粗字体和斜字体***</code></pre><p>效果：<em><strong>这是粗字体和斜字体</strong></em> </p>]]></content>
</entry>
</search>