Hi everyone, just started using BS recently so please pardon me if this is should be a straightforward question. I built a UI/UX prototype that has over 15 pages using BS. Each of those pages has a sidebar nav. Each time a link changes as a result of client feedback, I'm having to go in and make changes to 15 files.
I'd prefer to load the URL's dynamically from say a JSON file or other data source, or be able to include a global component that I can edit once and have changes populate across all pages. My current understanding of the components system is that it's a saved code block along with the necessary styles (CSS/JS/etc). However, once I have this component in many pages and want to update it, I can't edit it once to have it update globally. Please correct me if this is incorrect.
First off it sounds like you'd use the linked component https://bootstrapstudio.io/forums/topic/common-code-across-pages/#post-4656
Then if every pages needs to have something slightly different, such as the link for the page to have it highlighted, you should be able to solve that with either JavaScript or CSS.
For instance the sites that I build have a navigation that our clients can change dynamically. We tend to highlight the nav section that for the subnav link someone clicked on. Our system allows me to set flags on a file that when you come across that file it adds a class to an element and based on that I know what gets highlighted, I use CSS for it. In other areas I have JavaScript add a class to like the body element and then CSS does something and other times JS removes the class and CSS does something different then.
Awesome! Thanks Saj, had no clue about the linked component. That's very helpful and my next project I'll probably do it that way to keep it cleaner.
Just to report back on how I tackled it temporarily, and as I had to knock something out to display as a prototype, I used a bit of JS to dynamically replace the Href's on load :
Not the cleanest solution and something I'd never use on production code, but good enough for the time being.
Another followup question would be can components in the library be edited directly or would I have to drag it into an active document make the changes and then re-import into the components library? I guess I'm approaching it from a Photoshop Linked Objects standpoint (https://helpx.adobe.com/photoshop/using/create-smart-objects.html) where I have a standard header/footer in a dedicated file that I reference in every single document via an include. Little different from a paste linked object. Is something like that possible with BS?
The linked system only works with in that project you created it in. You can copy it to another project or create and save the component to your own library but it's only linked in the pages of the project where you create the linking per page. If you delete the linked component, the undo does not restore the link, you will have to go to one of your other pages and re-copy/paste as linked to the page you need to restore that component.
Another thing I found that the undo only effects the page that you are on. So if you link something to another page load up that page make a change and then switch to another page make a change if you want to undo something from a previous pages undo it only undoes the current page your on you have to switch to the other page to undo those changes.