03-网站基本信息配置「Jason」

AndersonHJB原创PythonPython一对一教学Python 辅导编程一对一教学少儿编程一对一PythonPython一对一教学Python 辅导编程一对一教学少儿编程一对一大约 3 分钟...约 847 字

1. 逻辑画出来

Jason Web
Jason Web

2. 修改网站配置

2.1 src/.vuepress/config.ts

src/.vuepress/config.ts
src/.vuepress/config.ts
效果
效果

2.2 src/.vuepress/theme.ts

image-20230111174506148
image-20230111174506148

路径:src/.vuepress/public/

image-20230111180401550
image-20230111180401550
image-20230111180515813
image-20230111180515813

提示

在 public 下的文件,开头添加 /

2.4 快捷部署

git pull
git add .
git commit -m "update"
git push

部署命令:

sh update.sh

访问链接,参考部署情况:https://github.com/TCreograph/TCreograph.github.io/actionsopen in new window

2.5 修改主页名称

2.6 本地启动

  1. 进到你的网站文件夹
  2. 打开 git bash here
  3. 输入: yarn run docs:dev
  4. 退出运行:Ctrl + C

2.7 修改背景

  1. 图片存放路径:src/.vuepress/public/
  2. README.mdopen in new window 里面添加/修改:bgImage

2.8 优化主页

image-20230112175114048
image-20230112175114048
image-20230112175444544
image-20230112175444544

2.9 社交链接

image-20230112174003318
image-20230112174003318

2.10 修改菜单栏、侧边栏

2.11 设置博客名称

image-20230112181729335
image-20230112181729335

3. 设置搜索功能

yarn add -D vuepress-plugin-search-pro@next

之前安装错误,需要先卸载:

yarn remove -D vuepress-plugin-search-pro

安装正确的搜索功能插件:

yarn add -D @vuepress/plugin-search@next

.vuepress/config.ts

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { searchPlugin } from "@vuepress/plugin-search";

export default defineUserConfig({
  plugins: [
    searchPlugin({
      // ...

      locales: {
        "/": {
          placeholder: "搜索",
        },
      },
    }),
  ],
});


 


 
 
 
 
 
 
 
 
 
 
 

4. 菜单栏

图标链接:https://theme-hope.vuejs.press/zh/guide/interface/icon.html#%E4%BD%BF%E7%94%A8-fontawesomeopen in new window

参考:https://www.thomasxiao.com/open in new window

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

export const zhNavbar = navbar([
    "/",
    {
        text: "关于我",
        icon: "at",
        link: "https://bornforthis.cn"
    },
    {
        text: "关于我",
        icon: "at",
        children: [
            {
                text: "关于我",
                icon: "at",
                link: "https://bornforthis.cn"
            },
        ]
    }
]);

5. 文章部分

5.1 文章删除

删除主题自带的文章。

5.2 创建自己要写的文章文件夹

5.3 文章头部

title: 03-网站基本信息配置「Jason」
date: 2023-01-11 17:10:20
author: AndersonHJB
isOriginal: true
category:
    - Python
tag:
    - Python
icon: vuejs2
sticky: false
star: false
article: true
timeline: true
image: false
navbar: true
sidebarIcon: true
headerDepth: 5
comment: true
lastUpdated: true
editLink: false
backToTop: true
toc: true

日期生成网站:https://bornforthis.cn/python/#/open in new window

侧边栏

课后任务

  1. 寻找背景图片
  2. logo 设计个更好看的
  3. 主页名称修改

评价

公众号:AI悦创【二维码】

AI悦创·编程一对一

AI悦创·推出辅导班啦,包括「Python 语言辅导班、C++ 辅导班、java 辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发、Web、Linux」,全部都是一对一教学:一对一辅导 + 一对一答疑 + 布置作业 + 项目实践等。当然,还有线下线上摄影课程、Photoshop、Premiere 一对一教学、QQ、微信在线,随时响应!微信:Jiabcdefh

C++ 信息奥赛题解,长期更新!长期招收一对一中小学信息奥赛集训,莆田、厦门地区有机会线下上门,其他地区线上。微信:Jiabcdefh

方法一:QQopen in new window

方法二:微信:Jiabcdefh

上次编辑于:
贡献者: AI悦创,AndersonHJB
你认为这篇文章怎么样?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度