/lqsblog-frontend-nextjs

是一个PC端、WAP端自适应展示的一个前端网站前台,它基于 nextjs 实现。

Primary LanguageTypeScriptMIT LicenseMIT

lqsblog-frontend-nextjs

它(GithubGitee)是一个PC端、WAP端自适应展示的一个前端网站前台,它基于 nextjs 结合 lqsblog-frontend-foreground-template模板实现。

开发文档

功能

- 首页
  -- 最新推荐
  -- 随笔作品列表
  -- 友情链接
- 关于
- 随笔
- 作品
- 专题
- 邻居

界面展示

index

目录结构

本项目基于nextjs生成,下面是整个项目的目录结构。大部分主体目录结构说明请参照nextjs文档

├── @types                     # ts类型定义目录
├── components                 # 组件目录
├── layouts                    # 布局目录
├── pages                      # 页面目录
│   ├── article                # 随笔目录
│   │   ├── detail             # 随笔详情
│   │   └── [cname].tsx        # 随笔(分类)列表
│   ├── search                 # 搜索列表目录
│   ├── tag                    # 标签下内容列表目录
│   ├── topics                 # 专题目录
│   │   ├── detail             # 专题详情
│   │   └── index.tsx          # 专题列表
│   ├── works                  # 作品目录
│   │   ├── detail             # 作品详情
│   │   └── index.tsx          # 作品列表
│   ├── about.tsx              # 关于我
│   ├── index.tsx              # 首页
│   └── links.tsx              # 邻居
├── public                     # 静态文件目录
├── server                     # 服务器配置目录
├── store                      # Store 目录
├── utils                      # 工具包
├── .env.xxx                   # 环境变量配置
├── next.config.js             # nuxt.config.js 文件
└── package.json               # package.json

Build Setup

# install dependencies
$ yarn # or npm install

# serve with hot reload at 127.0.0.1:3000
$ yarn dev # or npm run dev

# build for production and launch server
$ yarn build # or npm run build
$ yarn start # ro npm run start

配置 nginx 反向代理

http {
    # 内部添加以下内容
    server {
        # 监听 80 端口 ,你也可以设置其他端口但是访问域名时需要加上端口访问
        listen       80;
        # 你的网址,如果是本地测试,也可以设置你本地的ip
        server_name  liqingsong.cc;
        location / {
            # 代理地址,你本地 nuxt 的访问地址
		    proxy_pass  http://127.0.0.1:3000;
            index  index.html index.htm;
            
        }  
    }
}

捐赠

如果你觉得这个项目帮助到了你,你可以请作者喝咖啡表示鼓励.

ALIPAY WECHAT
Alipay Wechat