给喘百科和喘论坛的建议

小管家 · 2022-10-11T02:35:56+00:00

给喘百科和喘论坛的建议有什么意见或建议欢迎在这里或者在推上留言~ 目前待办独立服务器：用于升级PHP8制作Sitemap提高SEO性能 2022.10.13 完成：原来PHP支持不同应用多版本！不需要多服务器获取root权限实现中文搜索中文搜索：现在搜索帖子需要完整帖子标题所以非常没用...

给喘百科和喘论坛的建议

小管家

给喘百科和喘论坛的建议

有什么意见或建议欢迎在这里或者在推上留言~

目前待办

独立服务器：
- 用于升级PHP8制作Sitemap提高SEO性能 2022.10.13 完成：原来PHP支持不同应用多版本！不需要多服务器
- 获取root权限实现中文搜索
中文搜索：现在搜索帖子需要完整帖子标题所以非常没用，以后帖子多了会使用MySQL中文全文索引（需要修改MySQL配置的权限）或者使用Sonic引擎（需要安装Docker或Rust的权限），不过先用着标签分类吧毕竟帖子也不多

yidaoyidao

有一个小小的建议，不知道是否有实现的可能性：男喘女喘的表格在滚动浏览时是否可以固定首列或者固定标题行，尤其是用手机端浏览的时候；大概是这样的效果。

↑ 浏览比较靠后的列，很容易就对应不上某个单元格属于哪位男喘/女喘

↑ 同理，在浏览比较靠后的行时，也会忘记那个单元格的数据的标题是什么。

谢谢小管家一直以来的搭建和维护，辛苦了！

小管家

yidaoyidao 太感谢了居然还给了我代码，我有时间才能看一看，目前 Wikipedia 和 Dokuwiki 都没有采用这么细致的优化所以这个可能也是比较靠后的 to-do，我可以先高效在每个字母分区加上 column 名。做网页其实我也是现学现卖，HTML、CSS 和 JS 都不太会，我得有空拙劣模仿一下，可能和百科的 Dokuwiki 框架有冲突最终会用不了，因为涉及到 Dokuwiki 的表格编辑器插件、表格宽度插件等几个插件的同时修改（因为我看了下你的代码需要在 table element 里面修改 class 和 id 可能会被其他插件无视并且重新保存时删除）。

再次感谢！

偷偷记一下免得网页没了：

HTML

-
  const rand = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  const makeRandomScores = () => {
    let scoreArray = [];
    for (let inning = 1; inning < 10; inning++) {
      scoreArray.push(rand(0, 4));
    }
    scoreArray.push(scoreArray.reduce((a, b) => a + b, 0));
    return scoreArray;
  }

  const teams = [
    { "name": "Milwaukee Brewers", scores: makeRandomScores() },
    { "name": "Los Angles Dodgers", scores: makeRandomScores() },
    { "name": "New York Mets", scores: makeRandomScores() },
    { "name": "St. Louis Cardinals", scores: makeRandomScores() },
    { "name": "Houston Astros", scores: makeRandomScores() },
    { "name": "Toronto Blue Jays", scores: makeRandomScores() },
    { "name": "Boston Red Sox", scores: makeRandomScores() },
    { "name": "Chicago Cubs", scores: makeRandomScores() },
    { "name": "Philadelphia Phillies", scores: makeRandomScores() },
    { "name": "Chicago White Sox", scores: makeRandomScores() },
    { "name": "San Diego Padres", scores: makeRandomScores() },
    { "name": "Cleveland Indians", scores: makeRandomScores() },
    { "name": "San Francisco Giants", scores: makeRandomScores() },
    { "name": "Cincinatti Reds", scores: makeRandomScores() },
    { "name": "Minnesota Twins", scores: makeRandomScores() },
    { "name": "Tampa Bay Rays", scores: makeRandomScores() },
    { "name": "Miami Marlins", scores: makeRandomScores() },
    { "name": "Oakland Athletics", scores: makeRandomScores() },
    { "name": "Detroit Tigers", scores: makeRandomScores() },
    { "name": "Pittsburgh Pirates", scores: makeRandomScores() },
    { "name": "Seattle Mariners", scores: makeRandomScores() },
    { "name": "Atlanta Braves", scores: makeRandomScores() }
  ];

div(role="region", aria-labelledby="caption", tabindex="0")
  table
    caption#caption Baseball numbers mmkay.
    thead
      tr
        th Teams
        each val in [1, 2, 3, 4, 5, 6, 7, 8, 9]
          th= val
        th Runs
    tbody
      each team in teams
        tr
          th= team.name
          each score in team.scores
            td= score

compiled HTML

<div role="region" aria-labelledby="caption" tabindex="0">
  <table>
    <caption id="caption">Baseball numbers mmkay.</caption>
    <thead>
      <tr>
        <th>Teams</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
        <th>9</th>
        <th>Runs</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Milwaukee Brewers</th>
        <td>4</td>
        <td>0</td>
        <td>0</td>
        <td>3</td>
        <td>2</td>
        <td>0</td>
        <td>2</td>
        <td>1</td>
        <td>4</td>
        <td>16</td>
      </tr>
      <tr>
        <th>Los Angles Dodgers</th>
        <td>4</td>
        <td>3</td>
        <td>1</td>
        <td>3</td>
        <td>3</td>
        <td>1</td>
        <td>2</td>
        <td>2</td>
        <td>0</td>
        <td>19</td>
      </tr>
      <tr>
        <th>New York Mets</th>
        <td>2</td>
        <td>2</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>1</td>
        <td>2</td>
        <td>10</td>
      </tr>
      <tr>
        <th>St. Louis Cardinals</th>
        <td>1</td>
        <td>0</td>
        <td>3</td>
        <td>2</td>
        <td>3</td>
        <td>2</td>
        <td>4</td>
        <td>0</td>
        <td>3</td>
        <td>18</td>
      </tr>
      <tr>
        <th>Houston Astros</th>
        <td>0</td>
        <td>4</td>
        <td>3</td>
        <td>3</td>
        <td>0</td>
        <td>0</td>
        <td>2</td>
        <td>1</td>
        <td>1</td>
        <td>14</td>
      </tr>
      <tr>
        <th>Toronto Blue Jays</th>
        <td>4</td>
        <td>0</td>
        <td>2</td>
        <td>0</td>
        <td>0</td>
        <td>1</td>
        <td>0</td>
        <td>2</td>
        <td>3</td>
        <td>12</td>
      </tr>
      <tr>
        <th>Boston Red Sox</th>
        <td>2</td>
        <td>0</td>
        <td>4</td>
        <td>1</td>
        <td>3</td>
        <td>2</td>
        <td>4</td>
        <td>0</td>
        <td>3</td>
        <td>19</td>
      </tr>
      <tr>
        <th>Chicago Cubs</th>
        <td>3</td>
        <td>4</td>
        <td>1</td>
        <td>0</td>
        <td>1</td>
        <td>1</td>
        <td>3</td>
        <td>1</td>
        <td>0</td>
        <td>14</td>
      </tr>
      <tr>
        <th>Philadelphia Phillies</th>
        <td>0</td>
        <td>1</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>0</td>
        <td>3</td>
        <td>4</td>
        <td>3</td>
        <td>23</td>
      </tr>
      <tr>
        <th>Chicago White Sox</th>
        <td>3</td>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>1</td>
        <td>1</td>
        <td>2</td>
        <td>1</td>
        <td>3</td>
        <td>18</td>
      </tr>
      <tr>
        <th>San Diego Padres</th>
        <td>1</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>2</td>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>22</td>
      </tr>
      <tr>
        <th>Cleveland Indians</th>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>3</td>
        <td>1</td>
        <td>3</td>
        <td>2</td>
        <td>1</td>
        <td>2</td>
        <td>24</td>
      </tr>
      <tr>
        <th>San Francisco Giants</th>
        <td>4</td>
        <td>0</td>
        <td>1</td>
        <td>4</td>
        <td>0</td>
        <td>4</td>
        <td>0</td>
        <td>2</td>
        <td>2</td>
        <td>17</td>
      </tr>
      <tr>
        <th>Cincinatti Reds</th>
        <td>2</td>
        <td>4</td>
        <td>3</td>
        <td>0</td>
        <td>4</td>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>0</td>
        <td>20</td>
      </tr>
      <tr>
        <th>Minnesota Twins</th>
        <td>0</td>
        <td>2</td>
        <td>3</td>
        <td>3</td>
        <td>4</td>
        <td>2</td>
        <td>4</td>
        <td>3</td>
        <td>0</td>
        <td>21</td>
      </tr>
      <tr>
        <th>Tampa Bay Rays</th>
        <td>3</td>
        <td>3</td>
        <td>0</td>
        <td>3</td>
        <td>1</td>
        <td>0</td>
        <td>2</td>
        <td>1</td>
        <td>2</td>
        <td>15</td>
      </tr>
      <tr>
        <th>Miami Marlins</th>
        <td>0</td>
        <td>4</td>
        <td>3</td>
        <td>4</td>
        <td>0</td>
        <td>2</td>
        <td>4</td>
        <td>0</td>
        <td>4</td>
        <td>21</td>
      </tr>
      <tr>
        <th>Oakland Athletics</th>
        <td>1</td>
        <td>2</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>3</td>
        <td>3</td>
        <td>0</td>
        <td>3</td>
        <td>12</td>
      </tr>
      <tr>
        <th>Detroit Tigers</th>
        <td>4</td>
        <td>3</td>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>3</td>
        <td>4</td>
        <td>2</td>
        <td>0</td>
        <td>23</td>
      </tr>
      <tr>
        <th>Pittsburgh Pirates</th>
        <td>3</td>
        <td>0</td>
        <td>3</td>
        <td>4</td>
        <td>1</td>
        <td>4</td>
        <td>0</td>
        <td>0</td>
        <td>2</td>
        <td>17</td>
      </tr>
      <tr>
        <th>Seattle Mariners</th>
        <td>2</td>
        <td>0</td>
        <td>2</td>
        <td>1</td>
        <td>3</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>2</td>
        <td>19</td>
      </tr>
      <tr>
        <th>Atlanta Braves</th>
        <td>4</td>
        <td>1</td>
        <td>4</td>
        <td>4</td>
        <td>0</td>
        <td>0</td>
        <td>3</td>
        <td>1</td>
        <td>4</td>
        <td>21</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,700;1,200&display=swap");

table {
  font-family: "Fraunces", serif;
  font-size: 125%;
  white-space: nowrap;
  margin: 0;
  border: none;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border: 1px solid black;
}
table td,
table th {
  border: 1px solid black;
  padding: 0.5rem 1rem;
}
table thead th {
  padding: 3px;
  position: sticky;
  top: 0;
  z-index: 1;
  width: 25vw;
  background: white;
}
table td {
  background: #fff;
  padding: 4px 5px;
  text-align: center;
}

table tbody th {
  font-weight: 100;
  font-style: italic;
  text-align: left;
  position: relative;
}
table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}
table tbody th {
  position: sticky;
  left: 0;
  background: white;
  z-index: 1;
}
caption {
  text-align: left;
  padding: 0.25rem;
  position: sticky;
  left: 0;
}

[role="region"][aria-labelledby][tabindex] {
  width: 100%;
  max-height: 98vh;
  overflow: auto;
}
[role="region"][aria-labelledby][tabindex]:focus {
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
  outline: 0;
}

yidaoyidao

小管家
代码不是我的哇hhh，是搜到的别人的代码。😂
原来这个表格Dokuwiki内置的，我以为是小管家自己写的，心说如果是自己写的那换个能固定首行和首列的table library是不是就行了。
小管家有时间和精力再说，也先自己学习工作休息好哇~~

小管家

yidaoyidao 我的意思是目前 Wikipedia 官方和 Dokuwiki 官方用自己的 Wikimedia 和 Dokuwiki 框架时出现大型表格都不会固定第一行或第一列，所以我不打算在细节上超越他们。这个表格的几个插件不是内置的但也不是我写的所以动起来比较难。然后就是固定第一列对于手机屏幕太浪费空间了，我把第一行复制到每一个字母行应该足够方便了！感谢建议！