跳至主要內容

搭建本站

TNT2023年8月20日大约 8 分钟关于关于

搭建本站

环境配置

本项目基于vuepress项目搭建所以需要nodejs的环境。互联网中已有详细的安装配置教程这里跳过这一步骤。(安装完nodejs后可以直接使用npm命令，所以本教程全程使用npm命令)

安装框架及主题

本博客使用vuepress-theme-hope主题搭建，主题官网也有详细的操作教程。

1.把 [dir] 替换成你喜欢的名称用来存放vuepress-theme-hope项目。

npm init vuepress-theme-hope [dir]

2.这里我创建名称为3的项目。回车提示可以选择交互语言，如果英语不太好可以使用上下键选择简体中文，然后按照提示配置博客。

3.在选择源的时候推荐使用国内源，国内的源下载速度快不用等太长时间。

导航栏配置

博客的导航栏需要配置/src/.vuepress/config.ts文件，本博客的状态栏如下：

import { navbar } from "vuepress-theme-hope";

export default navbar([
  { text: "首页", icon: "home", link: "/" },
  { text: "文章", icon: "list", link: "/home" },
  {
    text: "免杀",
    icon: "code",
    children: [
      { text: "webshell免杀", icon: "door-open", link: "/docs/shell/webshell/" },
      { text: "shellcode免杀", icon: "horse-head", link: "/docs/shell/shellcode/" },
    ],
  },
  {
    text: "工具推荐",
    icon: "screwdriver-wrench",
    children: [
      { text: "插件", icon: "puzzle-piece", link: "/docs/tool/module/" },
      { text: "便捷工具", icon: "gauge-high", link: "/docs/tool/tools/" },
    ],
  },
  {
    text: "渗透技巧",
    icon: "user-secret",
    children: [
      { text: "经验总结", icon: "lightbulb", link: "/docs/attack/experience/" },
      { text: "实战案例", icon: "terminal", link: "/docs/attack/case/" },
    ],
  },
  {
    text: "漏洞纰漏",
    icon: "bug",
    children: [
      { text: "OA漏洞", icon: "briefcase", link: "/docs/bug/oa/" },
      { text: "Web应用漏洞", icon: "earth-americas", link: "/docs/bug/webapp/" },
      { text: "网络设备漏洞", icon: "microchip", link: "/docs/bug/iot/" },
      { text: "服务器应用漏洞", icon: "server", link: "/docs/bug/serverapp/" },
      { text: "内容管理系统漏洞", icon: "list-check", link: "/docs/bug/cms/" },
    ],
  },
  {
    text: "关于",
    icon: "circle-info",
    children: [
      { text: "更新记录", icon: "calendar", link: "/timeline/" },
      { text: "关于文库", icon: "user", link: "/blog/about/1" },
      { text: "关于本站", icon: "globe", link: "/blog/about/2" },
      { text: "搭建本站", icon: "copy", link: "/blog/about/5" },
      { text: "友情链接", icon: "link", link: "/blog/about/3" },
    ],
  },
]);

侧边栏配置

博客的侧边栏需要配置/src/.vuepress/sidebar.ts文件，本博客的侧边栏如下：(我把文章分为两类：博客、文章，所以有两个总目录)

import { sidebar } from "vuepress-theme-hope";

export default sidebar({ 
  // 博客总目录
  "/blog/": [
    {
      text: "关于",
      icon: "circle-info",
      prefix: "/blog/about/",
      collapsible: true,
      children: [
        { text: "关于文库", icon: "user", link: "1" },
        { text: "关于本站", icon: "globe", link: "2" },
        { text: "搭建本站", icon: "copy", link: "5" },
        { text: "友情链接", icon: "link", link: "3" },
      ],
    },
  ],
  // 关于目录
  "/blog/about/": [
    { text: "更新记录", icon: "calendar", prefix: "/", link: "/timeline/" },
    {
      text: "关于",
      icon: "circle-info",
      collapsible: true,
      children: [
        "1",
      ],
    },
    { text: "友情链接", icon: "link", link: "/blog/about/3" },
  ],
  // 文章总目录
  "/docs/": [
    { text: "免杀", icon: "code", link: "/docs/shell/" },
    { text: "工具推荐", icon: "screwdriver-wrench", link: "/docs/tool/" },
    { text: "渗透技巧", icon: "user-secret", link: "/docs/attack/" },
    { text: "漏洞纰漏", icon: "bug", link: "/docs/bug/" },
  ],
  // 免杀目录
  "/docs/shell/": [
    {
      text: "webshell免杀",
      icon: "door-open",
      link: "/docs/shell/webshell/",
      prefix: "/docs/shell/webshell/",
      collapsible: true,
      children: [
        "1",
      ],
    },
    {
      text: "shellcode免杀",
      icon: "horse-head",
      link: "/docs/shell/shellcode/",
      prefix: "/docs/shell/shellcode/",
      collapsible: true,
      children: [
        "1",
      ],
    },
  ],
  // 工具推荐目录
  "/docs/tool/": [
    {
      text: "插件",
      icon: "puzzle-piece",
      link: "/docs/tool/module/",
      prefix: "/docs/tool/module/",
      collapsible: true,
      children: [
        "1",
      ],
    },
    {
      text: "便捷工具",
      icon: "gauge-high",
      link: "/docs/tool/tools/",
      prefix: "/docs/tool/tools/",
      collapsible: true,
      children: [
        "1",
      ],
    },
  ],
  // 渗透技巧目录
  "/docs/attack/": [
    {
      text: "经验总结",
      icon: "lightbulb",
      link: "/docs/attack/experience/",
      prefix: "/docs/attack/experience/",
      collapsible: true,
      children: [
        "1",
      ],
    },
    {
      text: "实战案例",
      icon: "terminal",
      link: "/docs/attack/case/",
      prefix: "/docs/attack/case/",
      collapsible: true,
      children: [
        "1",
      ],
    },
  ],
  // OA漏洞目录
  "/docs/bug/oa/": [
    {
      text: "泛微",
      icon: "briefcase",
      link: "/docs/bug/oa/泛微/",
      prefix: "/docs/bug/oa/泛微/",
      collapsible: true,
      children: [
        "1",
      ],
    },
    {
      text: "致远",
      icon: "briefcase",
      link: "/docs/bug/oa/致远/",
      prefix: "/docs/bug/oa/致远/",
      collapsible: true,
      children: [
        "1",
      ],
    },
  ],
  // Web应用漏洞目录
  "/docs/bug/webapp/": [
    {
      text: "瑞友",
      icon: "earth-americas",
      link: "/docs/bug/webapp/瑞友/",
      prefix: "/docs/bug/webapp/瑞友/",
      collapsible: true,
      children: [
        "1",
      ],
    },
    {
      text: "汉得",
      icon: "earth-americas",
      link: "/docs/bug/webapp/汉得/",
      prefix: "/docs/bug/webapp/汉得/",
      collapsible: true,
      children: [
        "1",
      ],
    },
  ],
  // 网络设备漏洞目录
  "/docs/bug/iot/": [
    {
      text: "大华",
      icon: "microchip",
      link: "/docs/bug/iot/大华/",
      prefix: "/docs/bug/iot/大华/",
      collapsible: true,
      children: [
        "1",
      ],
    },
    {
      text: "安恒",
      icon: "microchip",
      link: "/docs/bug/iot/安恒/",
      prefix: "/docs/bug/iot/安恒/",
      collapsible: true,
      children: [
        "1",
      ],
    },
  ],
  // 服务器应用漏洞目录
  "/docs/bug/serverapp/": [
    {
      text: "Junos",
      icon: "server",
      link: "/docs/bug/serverapp/Junos/",
      prefix: "/docs/bug/serverapp/Junos/",
      collapsible: true,
      children: [
        "1",
      ],
    },
    {
      text: "MinIO",
      icon: "server",
      link: "/docs/bug/serverapp/MinIO/",
      prefix: "/docs/bug/serverapp/MinIO/",
      collapsible: true,
      children: [
        "1",
      ],
    },
  ],
  // 内容管理系统漏洞目录
  "/docs/bug/cms/": [
    {
      text: "DocCMS",
      icon: "list-check",
      link: "/docs/bug/cms/DocCMS/",
      prefix: "/docs/bug/cms/DocCMS/",
      collapsible: true,
      children: [
        "1",
      ],
    },
    {
      text: "CraftCMS",
      icon: "list-check",
      link: "/docs/bug/cms/CraftCMS/",
      prefix: "/docs/bug/cms/CraftCMS/",
      collapsible: true,
      children: [
        "1",
      ],
    },
  ],
});

主题颜色配置

首先设置博客默认主题颜色，需要配置/src/.vuepress/styles/palette.scss文件，本博客的默认颜色如下：

// 访问站点默认颜色
$theme-color: #096dd9;

然后设置主题多种颜色，需要配置/src/.vuepress/styles/config.scss文件，本博客的主题多种颜色如下：

// 主题多种颜色
$theme-colors:#eb507e,#ec4141, #fb9b5f;

设置全屏按钮

如果你需要这个功能，需要在/src/.vuepress/theme.ts文件中增加如下代码：

export default hopeTheme(
  {
    fullscreen: true,
  }
);

动态图形背景

设置动态图形背景需要引用vuepress-plugin-canvas插件，把插件移动到/src/.vuepress/plugins目录中。还需要把bg.svg移动到/src/.vuepress/public文件夹下。
然后在/src/.vuepress/config.ts文件中增加如下代码：

// 引入背景插件
import {
  canvasPlugin,
  CanvasPluginType,
} from "./plugins/vuepress-plugin-canvas";

export default defineUserConfig({
  plugins: [
    // 背景插件
    canvasPlugin({
      type: CanvasPluginType.Figure,
      ribbonOption: {
        zIndex: 1,
        alpha: 0.8,
        size: 90,
      },
    }),
  ],  
});

模糊背景

设置模糊背景需要引用vuepress-plugin-gradient-cover插件，把插件引用到/src/.vuepress/plugins目录中。
然后在/src/.vuepress/config.ts文件中增加如下代码：

// 引入模糊背景
import { gradientCoverPlugin } from "./plugins/vuepress-plugin-gradient-cover";

export default defineUserConfig({
  plugins: [
    // 模糊背景
    gradientCoverPlugin({}),
  ],  
});

博客背景设置

设置完以上插件后发现博客界面出现bug，这里需要配置/src/.vuepress/styles/index.scss文件，把以下代码复制进去即可：

// place your custom styles here
@use "@sass-palette/hope-config";

.blog .fullscreen h1 {
  font-size: 2.8rem;
}

.vp-hero-info {
  z-index: 2;
}

.vp-feature-wrapper {
  z-index: 2;
}

.vp-blog-hero.fullscreen {
  z-index: 2;
}
.blog-page-wrapper {
  z-index: 2;
}

.theme-container .vp-sidebar {
  transition: 0.3s;
  top: var(--navbar-height);
  @media (min-width: hope-config.$pad) {
    z-index: 4;
    background-color: transparent;
  }
}

// 文章不显示内容
// .vp-article-excerpt{
//   display: none;
// }

// 首页
// #main-content.vp-project-home {
//   z-index: 2;
//   backdrop-filter: saturate(150%) blur(0.5rem);
// }

// 文章页面
#main-content.vp-page {
  backdrop-filter: saturate(150%) blur(0.75rem);
  z-index: 2;
}

// 404页面
.vp-page.not-found {
  max-width: none;
  background-color: transparent;
}

// 底部页码
.vp-pagination .vp-pagination-number div.active {
  background-color: var(--theme-color) !important;
}

// 时间轴
.timeline-wrapper {
  box-shadow: 0 1px 3px 1px var(--card-shadow);
  backdrop-filter: saturate(150%) blur(0.75rem);
  --dot-bar-color: #ebf6f6;
  .timeline-content::after {
    width: 3px;
  }
}

// 主页模糊
.vp-article-wrapper .vp-article-item,
.vp-page .vp-blogger-info,
.vp-page .vp-blog-infos,
.vp-pagination .vp-pagination-number div,
.vp-pagination .vp-pagination-nav .vp-pagination-button,
.vp-pagination .vp-pagination-nav input,
.back-to-top {
  -webkit-backdrop-filter: saturate(150%) blur(0.75rem);
  backdrop-filter: saturate(150%) blur(0.75rem);
}

// 帖子的横线
hr {
  margin-left: 0.375em;
  margin-right: 0.375em;
  height: 1px;
  border: none;
  background: linear-gradient(to right, #7873f5 0%, #97d9e1 33%, #ec77ab 100%);
}

[data-theme="light"] .theme-container .vp-sidebar {
  @media (max-width: hope-config.$tablet) {
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: saturate(150%) blur(0.75rem);
  }
}

[data-theme="dark"] .theme-container .vp-sidebar {
  @media (max-width: hope-config.$tablet) {
    background-color: rgba(29, 32, 37, 0.8);
    backdrop-filter: saturate(150%) blur(0.75rem);
  }
}

[data-theme="light"] #main-content.vp-page {
  background-color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] #main-content.vp-page {
  background-color: #1d2025cc;
}

[data-theme="light"] .vp-article-wrapper .vp-article-item,
[data-theme="light"] .vp-page .vp-blogger-info,
[data-theme="light"] .vp-page .vp-blog-infos,
[data-theme="light"] .vp-pagination .vp-pagination-nav .vp-pagination-button,
[data-theme="light"] .vp-pagination .vp-pagination-nav input,
[data-theme="light"] .vp-pagination .vp-pagination-number div,
[data-theme="light"] .wl-panel,
[data-theme="light"] .timeline-wrapper,
[data-theme="light"] .vp-project-home,
[data-theme="light"] .back-to-top [data-theme="light"] .page-bg {
  background-color: #ffffffb3;
}

[data-theme="dark"] .vp-article-wrapper .vp-article-item,
[data-theme="dark"] .vp-page .vp-blogger-info,
[data-theme="dark"] .vp-page .vp-blog-infos,
[data-theme="dark"] .vp-pagination .vp-pagination-nav .vp-pagination-button,
[data-theme="dark"] .vp-pagination .vp-pagination-nav input,
[data-theme="dark"] .vp-pagination .vp-pagination-number div,
[data-theme="dark"] .wl-panel,
[data-theme="dark"] .timeline-wrapper,
[data-theme="dark"] .vp-project-home,
[data-theme="dark"] .back-to-top [data-theme="dark"] .page-bg {
  background-color: #1d2025b3;
}

[data-theme="light"] .vp-blog-hero .vp-blog-mask:after {
  background: #000;
  opacity: 0.2 !important;
}

[data-theme="dark"] .vp-blog-hero .vp-blog-mask:after {
  background: #000;
  opacity: 0.5 !important;
}

鼠标点击特效

设置鼠标点击特效需要引用vuepress-plugin-popper插件，把插件引用到/src/.vuepress/plugins目录中。
然后下载插件：

npm i -D @moefy-canvas/theme-popper

然后在/src/.vuepress/config.ts文件中增加如下代码：

// 鼠标点击特效
import { popperPlugin } from "./plugins/vuepress-plugin-popper";
import { PopperShape } from "@moefy-canvas/theme-popper";

export default defineUserConfig({
  plugins: [
    popperPlugin({
      config: {
        shape: PopperShape.Star,
        size: 1.95,
        numParticles: 8,
      },
    }),
  ],  
});

搜索功能

首先下载插件：

npm i -D @vuepress/plugin-search@next

然后在/src/.vuepress/config.ts文件中增加如下代码：

// 搜索功能
import { searchPlugin } from "@vuepress/plugin-search";

export default defineUserConfig({
  plugins: [
    searchPlugin({
    }),
  ],
});

代码主题

设置代码主题需要用到@vuepress/plugin-shiki插件，因为主题默认使用的是Prism.js所以需要先禁用他。需要在/src/.vuepress/theme.ts文件中增加如下代码：

export default hopeTheme({
  plugins: {
    // 关闭prismjs代码主题
    prismjs: false,
  }
});

下载插件：

npm i -D @vuepress/plugin-shiki@next

然后在/src/.vuepress/config.ts文件中增加如下代码：

// 代码主题
import { shikiPlugin } from "@vuepress/plugin-shiki";

export default defineUserConfig({
  plugins: [
    shikiPlugin({
      theme: "one-dark-pro",
    }),
  ],
});

如果对代码主题默认的颜色不满意可以修改/src/.vuepress/styles/config.scss文件，本博客的代码颜色如下：

// 代码颜色
$code-color: (
  // light: #383a42,
  light: #abb2b1,
  dark: #abb2bf,
);
// 代码背景
$code-bg-color: (
  // light: #ecf4fa,
  light: #282c34,
  dark: #282c34,
);

一言&必应壁纸

为了通过别名替换组件，你需要将{ custom: true }作为第二个选项传入hopeTheme。首先需要编辑/src/.vuepress/theme.ts文件，增加如下代码：

export default hopeTheme(
  { custom: true },
);

然后创建/src/.vuepress/components/BlogHero.vue文件，文件中填写如下代码：

<script setup lang="ts">
import BlogHero from "vuepress-theme-hope/blog/components/BlogHero.js";
import BingHeroBackground from "vuepress-theme-hope/presets/BingHeroBackground.js";
import HitokotoBlogHero from "vuepress-theme-hope/presets/HitokotoBlogHero.js";
</script>

<template>
  <BlogHero>
    <template #heroBg>
      <BingHeroBackground />
    </template>
    <template #heroInfo="heroInfo">
      <HitokotoBlogHero v-bind="heroInfo" />
    </template>
  </BlogHero>
</template>

编辑/src/.vuepress/config.ts文件，增加如下代码：

// 一言&必应壁纸
import { getDirname, path } from "@vuepress/utils";

const __dirname = getDirname(import.meta.url);

export default defineUserConfig({
  alias: {
    "@theme-hope/modules/blog/components/BlogHero": path.resolve(
      __dirname,
      "./components/BlogHero.vue",
    ),
  },
});

友链功能

需要编辑/src/.vuepress/theme.ts文件，在文件中增加如下代码：

export default hopeTheme(
  {
    plugins: {
      // Markdown增强组件
      components: {
        components: [
          // 友链
          "SiteInfo",
        ],
      },
    },
  }
)

本站友链设置：

---
date: 2023-08-01
category:
  - 关于
tag:
  - 关于
friend:
  - name: Xioy
    desc: 记录生活中的每一刻精彩
    logo: /logo.png
    url: http://地址/
    preview: /img1/about/20230914151242.png

  - name: TNT文库
    desc: 渗透测试工程师的定向爆破利器
    logo: /img1/about/20230914151245.png
    url: http://地址/
    preview: /img1/about/20230914151244.png
---

# 友情链接

## 朋友们

<SiteInfo
  v-for="item in $frontmatter.friend"
  :key="item.link"
  v-bind="item"
/>