Eascripto
提示: 你当前所阅读的页面似乎并不适合新手。

Development


该章节介绍了有关 Eascripto 的所有开发信息和基本的开发过程,甚至[?]未知用法有未来的导向。

网站框架结构

网站的结构(并非目录结构)大致呈现这样:

{
    "Eascripto": {
        "Stylesheet": {
            "Page": ["/css/mdui.(min.)css", "/css/mdui.custom.css"], // 对页面进行样式规定
            "Icon": ["/icons/material-icons/*", "/devicon/*"], // 网页的图标来源
            "Fonts": ["/fonts/roboto/*", "/fonts/robotoMono/*"] // Webfont 采取本地加载
        },

        "Script": {
            "Main": "/js/mdui.(min.).js", // MDUI 相关动画和处理
            "Cookie": "/js/js.cookie-2.2.0.(min.)js", // Cookie 的设置与读取
            "Others": "/js/custom.js" // 自定义相关
        },

        "Processor": {
            "Markdown": "/parsedown/*", // Markdown 转义程序
            "Highlight": "/js/highlight/*", // 代码高亮
            "Collapse Functions": "/read/collapse.php" // 手风琴效果固定函数库(需要迭代)
        },

        "Static Page": {
            "Templates": ["/index.php", "/read/index.php"], // 页面框架
            "HTML Templates": "/template.*", // 空页面框架
            "Error Page": "/error/*", // 错误页面框架
            "Default Page": {
                "Footer Templates": ["/documents/footer.html", "/documents/reader-footer.html"], // 网页底部模板
                "Default": ["/documents/index.html", "/documents/default.html"] // 默认页模板
            }
        },

        "Others": {
            ".git": "/.git", // Git Info,无任何作用
            "GitHub Staff": ["/.gitattributes", "/.gitignore", "/LICENSE"], // Github 杂项
            "README": "/README.md" // README.md 是介绍
        },

        "Documents": "/documents/*/*" // 指位于 /documents 下的任意目录内的任意文件
    }
}

所编写的所有文档均根据编程语言类别分类后放置到 /documents/ 下的指定文件夹,在 Static Page->Templates 的两个页面中的 PHP 代码会直接根据 Request 对应解析文件夹的内容。

解析原理

原理是很基础的。Eascripto 所使用的解析器为 Parsedown,直接使用函数封装:

<?php
require "./parsedown/Parsedown.php"; // 导入 Parsedown
$readx = $_GET["c"]; // 导入页面请求

function parse($parse, $line){
    $Parsedown = new Parsedown();
    if ($line == true){
        echo $Parsedown->line($contents);
    } else {
        echo $Parsedown->text($contents);
    }
}

function getContent(){
    global $readx;
    if ($readx == "index"){
        // do something
    } else if (empty($readx)){
        // do something
    } else {
        $content = file_get_contents("documents/".$readx.".md"); // 默认定义解析路径
        $out = parse($content, false);
        echo($out);
    }
}
>

后在页面的 mdui-container mdui-typo 类内调用:

...
<div class="mdui-container mdui-typo">
    <?php getContent();?>
</div>
...

即可成相应格式的文本。另外对于分文件夹读取,这个在 /read/index.php 中重新作了规定,新增了一个参数 p 用来指向指定的文件夹,在地址栏上所呈现的是分类。

$part = $_GET["p"];

...

function getContent(){
    global $readx;
    global $part;
    if (empty($readx)){
        defaultPage();
    } else if (empty($part)){
        if (file_exists("./../documents/".$readx.".md")){
            $content = file_get_contents("./../documents/".$readx.".md");
            $out = parse($content, false);
            echo($out);
        } else {
            defaultPage();
        }
    } else if (file_exists("./../documents/".$part."/".$readx.".md")){
        $content = file_get_contents("./../documents/".$part."/".$readx.".md");
        $out = parse($content, false);
        echo($out);
    } else {
        defaultPage();
    }
}

对于含有 p 的请求,直接将解析文件目标指向 p 的值。

采用如上适配方法可以规范文件夹和文件的名称,方便管理。同时一举多得,并不需要循环等其他适配措施。(虽然大体上来看是低级了一些)

自定义样式

Eascripto 使用了除原生 MDUI 库以外的其他样式。为了避免样式混乱,自定义的样式也采用了 mdui- 的前缀。它们都保存在 css/mdui.custom.css 内。该自定义样式与 MDUI 没有任何关系。

定义的新样式有文本标题的颜色、夜间模式字体变暗和 mdui-description(暂未启用,待调试),mdui-info 块提示,mdui-warning 块警告。

.mdui-typo .mdui-warning {
    display: block;
    background-color: #f44336;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 2px;
    text-align: center;
    -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12); /* Shadow 方案同 mdui-shadow-2 */
}

.mdui-typo .mdui-info {
    display: block;
    background-color: #3f51b5; /* 仅仅更改颜色 */
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 2px;
    text-align: center;
    -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.mdui-theme-primary-indigo .mdui-typo h1, .mdui-theme-primary-indigo .mdui-typo h2, .mdui-theme-primary-indigo .mdui-typo h3, 
.mdui-theme-primary-indigo .mdui-typo h4, .mdui-theme-primary-indigo .mdui-typo h5, .mdui-theme-primary-indigo .mdui-typo h6 {
   color: #3f51b5!important;
}

.mdui-theme-layout-dark .mdui-typo *, .mdui-theme-layout-dark .mdui-typo-headline, .mdui-theme-layout-dark .mdui-list *, .mdui-theme-layout-dark footer * {
    color: #ddd!important;
    fill: #ddd!important;
}

还有部分未列出。

同样,对于代码高亮也有自己的定义。我们所采用的代码高亮是 Material-Darker 主题,来源 https://github.com/Kelbster/highlightjs-material-dark-theme

echo("你所看到的就是示例!");

对于 mdui-infomdui-warning,基础的样式示例如下:

这是一个 Info 块
这是一个 Warning 块

注释

循环: 指使用 for 或者 while 等方法进行遍历,然后对指定的请求做出响应的方法。该方法似乎更加高效。