Code Monkey home page Code Monkey logo

wyast.github.io's Introduction

未央科协网站

ALL accessed successfully...
If you are working on a project in YuQue list, pls fill in that tickbox in order to avoid redundant work

主页制作规范

————Nobunaga

基本

为了更高效地开发,我们认为有必要作以下提示。预祝我们用最少的投入做出最好的网站!

  1. 主页名叫 index.html,他用的 css 叫 index.css,都在根目录下。
  2. 主页的部件在./components/....中,新增部件就新增一个文件夹。不要在没有打好招呼的情况下动其他人的文件夹。在没有在群里说明并且商讨通过的情况下严禁删除任何文件。
  3. index.html 应当尽可能简洁,就像现在这样。可以先看看里面的写法,出自黄神之手值得学习。
  4. 在 index.css 中增加内容之前最好看看有没有已经写好的;若要新增,最好加上注释,避免后人重复操作导致 css 过长。
  5. 在每次 commit 前,和你的合作伙伴一起检查一下本地的项目有没有引入新的 bug。commit 时在群里说一下,commit 的信息要求包含更改的地方,比如“修正了 navbar 在页面刷新时的位置异常”,严禁只说“new”。上一个 era 我们已经吃过亏了哈哈哈哈哈。如果觉得有很多要说,可以略提一点,然后在本文档中的更新日志下写好。感谢配合!
  6. 如果有最近真的太忙等现象,请预前/尽早跟我们讲,不要过度加班或者拖延进度。

本次更新思路

  1. 框架直接借用上周轩组的成果。上一个模版过于唯象,不方便后去开发,故现在舍弃。我为带来的不便向大家致歉。
  2. 四个入口可以参照黄神的“最近的文章”的 grid 写法,又快又好。
  3. navbar 很困难。最好能实现老模版“跟着走”的效果,实在不行固定在 header 之下。
  4. 我已经写好了 header,大伙看看在你们的设备上是否好。

TODO

  1. 搜索框的搜索功能
  2. department 的图片拉伸问题 (已解决)
  3. 侧边栏的目录(?)
  4. 页脚的嵌套问题
  5. 优化代码,使之优雅简洁

更新日志

从新到旧:

2024/2/18 HCX

  • 完成了侧边栏目录等

2024/2/12 LYF

  • finished MatLab

2024/2/9 HCX

  • 加入 classless.css
  • 加入导航栏、页尾
  • 使用新样式修饰部分网站

2024/2/5 HCX

  • 加入样式指南

2024/2/5 LYF

  • finished LaTeX
  • finished FISH
  • add some harmless css

wyast.github.io's People

Contributors

liuyifan22 avatar an-314 avatar rebelpotato avatar sjhpqwerty avatar fanqieworkgroup avatar cariety73 avatar my-zzy avatar zcy-13230 avatar dubaib avatar

Stargazers

Feng Zijia avatar  avatar  avatar

Watchers

 avatar

Forkers

my-zzy

wyast.github.io's Issues

避免样式文件过于臃肿

style.css文件暂时没有问题,但目前不同文章缺乏统一的样式,随着文章的增多,样式文件可能会变得臃肿。

可能的应对策略:

  • 创建一份style guide,后续写作的html文章尽量按此风格创作 (#7
  • 使用类似Sass的工具生成css文件(待定)

“新闻”页面,以及后续其他页面建设

打算按照正规的机构网站做一套页面,以便上级催促时可以交差。
其中必要部分“新闻”已经做好(news分支),放在index的正文第三行。诸位看看这个页面作为暂行之策是否勉强可行。后期若有需要可以大改。

几点思考:

1 主页板块可以考虑用模版,做得更加气派。hcx在语雀中有“更加好看的网页”,我们可以收集更多类似的,然后和科协老板商议,主页的样式应当由他决定。
2 其他板块我们应该可以自决。除了必要有的新闻、主页外,各位之前提的“互动”“投稿”“知识专区”等都可以做。具体的可以先动手,也可以等我们招生后开个项目会,分配萌新和任务。
3 板块之间不必风格统一。根据之前的讨论,我认为各版块风格可以有更大的自由度,毕竟板块的内容本来就各异。开发者可以设计自己的板块,决定里面的内容等。为了连贯性,可以在每个页面保留一个相同的版块或者在醒目位置放未央科协的logo,足矣。
4 未央科协的logo。这件事我还没确认,我希望主席团能做一个匹敌“长乐未央”动图的AST炫酷logo,开学后我去提一下。
5 开学后我们元老团就不会全干css了,可能被要求去做后端等等。当然个人选择哪个方向,主要看诸位的兴趣,等开会了详议。

假期工作辛苦各位了,开学了我们人手就多了。开学愉快!

确定网页的板块

网页上的文章分成哪些板块?
确定后就可以定下来顶上的导航栏应该放哪些东西。

锚点用法(详见anchor-LaTeX)

在LaTeX页眉的导航栏中加入了锚点,点击锚点可以跳转到对应板块。

但是存在问题,因为页眉的存在,跳转后锚点锚定位置被遮挡。例如设置锚点在H2处,跳转过去,H2被页眉遮挡。故我现在唯象地把锚点设置在了希望跳转之位置的两行之上,效果不错,但非长远之计。

我的建议:
1 考虑黄神说的,侧边浮动目录。
2 想办法设置页面范围为页眉以下。目前的页眉应该是漂浮在页面的上部。

诸位怎么看?

文章加入统一格式

大部分不同的文章都需要一些公共内容,比如上方的导航栏,footer等。
需要一个从模板生成文章的方案。可以考虑使用现成的模板语言(单独使用,或结合静态网页生成器使用),也可以自己编写。

修饰classless样式

  1. nav的ul换成两行、图片变为两行、aside消失是此css规定的行为。可以修改。
    到时候要把ul换成html5规定的menu元素,aside弄大一点,在页面较窄的时候并到文章中……要改的东西还多着呢。

按照 #9 (comment) 的想法修改。

对各种浏览器的适配性问题

fbb6a42ccac030af0dcff6821065fbb
现在目录在手机端是这样的

有时候随着页面滚动,有时候不;并且陷入正文中

我们可能需要对一些特殊的块,例如aside、目录等等在宽度较窄的浏览器上的行为有另外的处理(?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.