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 can elegantly present the basic details of a paper. Carousel images, embedded videos, embedded ECharts, one-click copying of BibTeX, and the comment component are all supported. It enables researchers to promote papers conveniently and intuitively.

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 <scripts> 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 for more details. We recomment that you use vercel 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

Acknowledgments

Parts of this project page were adopted from the Nerfies page.

Website License

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.