TieBaMma
Migrate to VuePress 2
问题
现在每次更新版本，都需要修改一个 index.md ，本着数据与模板相分离的观点，~~刚摸了点 Vue 想练手~~ , 在试试能否分离数据
建议
目前还是草稿，很多样式没加，而且要看能否不大动架构。
WIP
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="./data.js"></script>
<style type="text/css">
a {
text-decoration: none;
}
</style>
<title>temp</title>
</head>
<body>
<div id="dl">
<ul>
<li v-for="版本 in new Set(list.map(x=>x.版本))">
<input
type="checkbox"
v-bind:value="版本"
name="版本多选框"
v-model="current选中版本"
/>
<label>{{版本}}</label>
</li>
</ul>
<ul>
<li v-for="名字 in new Set(list.map(x=>x.名字))">
<input
type="checkbox"
v-bind:value="名字"
name="名字多选框"
v-model="current选中名字"
/>
<label>{{名字}}</label>
</li>
</ul>
<ul>
<li v-for="语言 in new Set(list.map(x=>x.语言))">
<input
type="checkbox"
v-bind:value="语言"
name="语言多选框"
v-model="current选中语言"
/>
<label>{{语言}}</label>
</li>
</ul>
<ul>
<li
v-for="种类 in list"
v-if=" current选中语言.indexOf(种类.语言) > -1 && current选中名字.indexOf(种类.名字) > -1 && current选中版本.indexOf(种类.版本) > -1 "
>
{{种类.名字}} v{{种类.版本}} 语言:{{种类.语言}}: {{种类.地址}}
</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#dl",
data: {
current选中版本: [],
current选中名字: [],
current选中语言: [],
list: window.list,
},
});
</script>
</html>
data.js
window.list = [
{
名字: "e",
版本: "12.1",
语言: "zh",
地址: { 盘1: "text", 盘2: "text", 盘3: "text" },
},
{
名字: "a",
版本: "11.1",
语言: "en",
地址: { 盘1: "text", 盘2: "text", 盘3: "text" },
},
{
名字: "m",
版本: "10.1",
语言: "en",
地址: { 盘1: "text", 盘2: "text", 盘3: "text" },
},
{
名字: "e",
版本: "12.1",
语言: "zh",
地址: { 盘1: "text", 盘2: "text", 盘3: "text" },
},
];
把 data.js 和 index.html 放在同一目录下，打开 index.html 就有效果了。
这是预览网站 https://wuyudi.github.io/mmaInstall/
/**
* 下载地址集合。
*/
type DownloadList = Resource[];
/**
* 一个资源。
*/
interface Resource {
/**
* 名称。
*
* 示例：
* * Mathematica 12.1.1
* * Mathematica 12 的激活工具
*/
name: string;
/**
* A Wolfram Language kernel full version number, or a valid semver range.
*
* Version numbers are in the format of `<Major>.<Minor>.<Release>` (`/^\d+\.\d+\.\d+$/`).
* For a non-Wolfram product, this is the kernel version it targets.
*
* Examples:
* * `12.1.1`
* * `>=12.0.0 <13.0.0`
*
* @see http://reference.wolfram.com/language/ref/$ReleaseNumber.html
*/
version: string;
platform: Platform;
language: LanguageTag;
/**
* 备选地址列表。
* 对同一个资源，各备选下载地址提供的内容是相同的。
*/
source: Source[];
}
const enum Platform {
Windows = "windows",
Mac = "macos",
Linux = "linux",
/**
* For web apps.
*/
Neutral = "neutral",
}
/**
* BCP 47.
*/
const enum LanguageTag {
English = "en",
ChineseSimplified = "zh-Hans",
}
/**
* 一个下载地址。
*/
interface Source {
/**
* 名称。
*
* 示例：
* * 天翼云盘
* * SharePoint-API
*/
name: string;
/**
* URI.
*/
location: string;
/**
* 备注。
* CommonMark 格式。
*/
note?: string;
}
我曾经考虑过动态页面，但一想到 SEO，就怂了，最后还是用的 Jekyll 单页面。
不妨按 ryaliu 的建议，上 VuePress 生成静态网站。比起修修补补，能省很多事。我写过部署工具，套过来即可，问题不大。
其实我一开始想的也是 VuePress, 就是心有余而力不足
看上去能解决在 html 写文档 和 在 md 里写 Vue 的障碍，等我有时间了把生态摸一下，~~先咕咕咕~~
昨天折腾了一天，发现把整个 index.md 放入 README.md 就解决问题了(包括自动生成侧边栏) ~~Quite Easy Done~~，但那样不能解决 md 增长过快的问题
感觉目前可以先把目录树解决 + 拆分 md？
今天做了测试，最后要解决部署问题。原本是看 Vuepress 官方文档，发现挺麻烦的。
https://vuepress.vuejs.org/guide/deploy.html#github-pages-and-travis-ci
然后经 @ryaliu 提示，可以用 GitHub Action 解决，一搜有现成的。
https://github.com/jenkey2011/vuepress-deploy/blob/master/README.zh-CN.md
经过几天的踩坑，一个测试项目算是解决了。
https://github.com/wuyudi/GeogebraLesson
实现了主仓库 push 触发 Action 自动部署
后面会在 https://wuyudi.github.io/mmaInstall/ 里面进行试点👀
部署成功，下载链接的交互先咕咕咕。ts 还没学，https://github.com/TieBaMma/InstallTutorial/issues/72#issuecomment-723544545 这个没看懂怎么用😅
@TieBaMma
很好。但我仍然最担心你这一环。
@wuyudi 这个没看懂怎么用
还没写完。你看看目录结构，就能知道我打算干什么了。
迁移真的不急，明年再说，至少等到 VuePress 2 alpha 发布。用 JS 大量存储结构化数据肯定要上 TypeScript 来约束，否则太容易出错。但 VuePress 1 上搞 TS 需要插件附带一堆琐事，而几个月后自带 TS 支持的 VuePress 2 就会出来。
眼下最要紧的应当是：
- 重写“激活 Mathematica”。
- 全站 HTTPS。
- 再找几个图床。
如果可以，我建议在 VuePress 2 达到 alpha 时着手准备，在 RC 时正式开始。
今天翻全文，深刻地体会到了重组内容的必要性。~~VuePress-Next 已经 2.0.0 beta.27 了，是不是应该考虑一下了~~
