Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/junyaohu/academic-project-page-template-vue
A vue-based project page template for academic papers. (in development)
https://github.com/junyaohu/academic-project-page-template-vue
academic-template academic-website cvpr eccv iccv iclr icml neurips paper project-website template vite vue3
Last synced: 1 day ago
JSON representation
A vue-based project page template for academic papers. (in development)
- Host: GitHub
- URL: https://github.com/junyaohu/academic-project-page-template-vue
- Owner: JunyaoHu
- Created: 2023-07-27T07:15:20.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-02T05:13:14.000Z (27 days ago)
- Last Synced: 2025-01-02T05:18:44.261Z (27 days ago)
- Topics: academic-template, academic-website, cvpr, eccv, iccv, iclr, icml, neurips, paper, project-website, template, vite, vue3
- Language: Vue
- Homepage: https://junyaohu.github.io/academic-project-page-template-vue
- Size: 115 MB
- Stars: 190
- Watchers: 1
- Forks: 12
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# academic-project-page-template-vue
> This project is in development, and welcome any suggestions.
This Vue-based repository is developed for an academic paper page template. It enables researchers to promote papers conveniently and intuitively.
Now it support:
- Icons of paper logo, author and affiliation
- Markdown (using `.MDX` file)
- Carousel
- Video (local, bilibili iframe, youtube iframe)
- ECharts
- Math LaTex Formula
- 3D and 3DGS model
- Other components used to visualize model results
- One-click copying of BibTeX
- Comment area
- ...
**Example**: https://junyaohu.github.io/academic-project-page-template-vue/
**Deployment Tutotial Video**: https://www.bilibili.com/video/BV1oUrfYzEqZ
## Installation
**1. Github: Create a new repository**
Click `Create a new repository` to create a new copied repository based on this template for your site
- if your repo name is `yourname.github.io`, your site will be on `yourname.github.io`
- if your repo name is `xxx`, your site will be on `yourname.github.io/xxx`
Reference: https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site#creating-a-repository-for-your-site
**2. Github: Edit vite config**
in file `vite.config.js`, you should edit the `base` to your repo name xxx
- if your repo name is `yourname.github.io`, set `base:'/',`
- if your repo name is `xxx`, set `base:'/xxx',`
```
base:'/xxx',
```
> This step is just so that you can intuitively understand that the website can work normally in your repository, and you can also make modifications manually in the following steps.
**3. Github: Publish**
Choose `gh-pages` branch to show your website on github, then you will see your website on `xxx.github.io` or `yourname.github.io/xxx`
Reference: https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-from-a-branch
**4. Local PC: Prepare Vue environment**
- install nodejs: (https://nodejs.org/zh-cn)
- install vue: `npm create vue@latest` (https://cn.vuejs.org/guide/quick-start.html)
**5. Local PC: `Git clone` your new repo xxx**
**6. Local PC: install dependencies**
`npm i` to install necessary vue dependencies
**7. Local PC: Edit and preview your website**
`npm run dev` to preview your website on your local pc, edit by yourself until you feel nice
**8. Local PC: `git push`**
`git push` to your copied repo, then .github/workflows will do the Github action to generate `gh-pages` branch automatically, you can wait a minute, `xxx.github.io` or `yourname.github.io/xxx` will be updated automatically.
**9. After the first deployment**
If you want to update your website again, you can edit your website locally and git push to your repo, `gh-pages` branch and the website will be both updated automatically soon.
## How to edit this template?
- Edit the content `` in `.vue`, I have wrote some useful comments.
For example, you can change the original content to your own info (like paper's tile, logo, your name, your address, and the guidance buttons of your other materials) in `src/components/sections/Title.vue`
```
const logo = ''
const title = ''
const title_color = ''
const title_supp = ''
const title_supp_color = ''
const btn_color = ''
const authors = [
{
name: "",
icon: "",
homepage: "",
address_flag: ""
},
...
]
const addresses = [
{
address_flag: "",
name: "",
icon: "",
homepage: ""
},
...
]
const news = ""
const emphases = [
"",
...
]
const buttons = [
{
disabled: ,
name: "",
component: ,
},
...
]
```
- If you want to change the layout and use other components, you can read Element Plus Doc (https://element-plus.org/zh-CN/component/overview.html).
## How to deploy your own comment area?
> Twikoo is divided into two parts: cloud functions and front-end. To integrate Twikoo on your website, you need to deploy both cloud functions and front-end at the same time. Please pay attention to keeping the two versions consistent when deploying.
There we have deploy the front-end for you, you should only build your own cloud functions.
See [here](https://twikoo.js.org/backend.html) for more details. We recomment that you use [vercel](https://twikoo.js.org/backend.html#vercel-%E9%83%A8%E7%BD%B2) to do this. This can be more arbitrary, depending on you.
After building your own cloud functions, you can edit the config in `src/components/sections/Comment.vue`:
```
// Fill in envId for Tencent Cloud environment; fill in address for Vercel environment (https://xxx.versel.app)
envId: 'https://blog-comment-nvoz-8o7dxhfbd-junyaohus-projects.vercel.app',
// default: 'ap-shanghai'，Tencent Cloud: 'ap-shanghai' / 'ap-guangzhou'; Vercel: ''
region: '',
// comment area language， more supported languages: https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
lang: 'zh-CN',
```
## Star History
[](https://star-history.com/#JunyaoHu/academic-project-page-template-vue&Date)
## Acknowledgments
Parts of this project page were adopted from the [Nerfies](https://nerfies.github.io/) page.
## Website License
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.